/* ============================================
   Fireworks & Valentine's Day Night Theme
   Song: "Rồi Ta Sẽ Ngắm Pháo Hoa Cùng Nhau"
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Night sky palette */
    --night-deep: #0a0a1a;
    --night-purple: #1a1a3e;
    --night-blue: #0d1b2a;
    --midnight: #141428;
    
    /* Romantic accent colors */
    --rose-gold: #e8b4b8;
    --blush-pink: #ffb6c1;
    --coral-pink: #ff6b6b;
    --hot-pink: #ff1493;
    --magenta: #ff00ff;
    
    /* Firework colors */
    --firework-gold: #ffd700;
    --firework-orange: #ff8c00;
    --firework-red: #ff4444;
    --firework-pink: #ff69b4;
    --firework-purple: #9370db;
    --firework-blue: #00bfff;
    --firework-cyan: #00ffff;
    --firework-green: #7fff00;
    --firework-white: #ffffff;
    
    /* UI colors */
    --white: #ffffff;
    --white-transparent: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(20, 20, 40, 0.7);
    --glass-border: rgba(255, 182, 193, 0.3);
    
    /* Shadows and glows */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(255, 105, 180, 0.5);
    --text-glow: 0 0 20px rgba(255, 182, 193, 0.8);
    
    /* Typography */
    --font-cursive: 'Great Vibes', cursive;
    --font-romantic: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Poppins', sans-serif;
    --transition-smooth: all 0.3s ease;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
    color: var(--white);
    opacity: 0;
    animation: pageEntrance 1.2s ease forwards;
}

/* Page Entrance Animation */
@keyframes pageEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Background Container - Night Sky with Stars */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top, var(--night-purple) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, var(--night-blue) 0%, transparent 50%),
        linear-gradient(180deg, var(--night-deep) 0%, var(--midnight) 50%, var(--night-deep) 100%);
    z-index: -3;
}

/* Stars Layer */
.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--white), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--white), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, var(--white), transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 250px 160px, var(--white), transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 350px 100px, var(--white), transparent),
        radial-gradient(2px 2px at 400px 180px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 450px 60px, var(--white), transparent),
        radial-gradient(2px 2px at 500px 140px, rgba(255,255,255,0.8), transparent);
    background-size: 550px 200px;
    animation: twinkle 4s ease-in-out infinite alternate;
}

/* Twinkling stars animation */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* City Silhouette at Bottom */
.background-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: 
        linear-gradient(to top, var(--night-deep) 0%, transparent 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%230a0a1a' d='M0,120 L0,80 L30,80 L30,60 L50,60 L50,80 L80,80 L80,50 L100,50 L100,40 L120,40 L120,50 L140,50 L140,80 L170,80 L170,70 L200,70 L200,80 L230,80 L230,30 L250,30 L250,20 L270,20 L270,30 L290,30 L290,80 L320,80 L320,60 L350,60 L350,80 L380,80 L380,45 L400,45 L400,35 L420,35 L420,45 L440,45 L440,80 L470,80 L470,55 L500,55 L500,80 L530,80 L530,65 L560,65 L560,80 L590,80 L590,25 L610,25 L610,15 L630,15 L630,25 L650,25 L650,80 L680,80 L680,70 L710,70 L710,80 L740,80 L740,50 L770,50 L770,80 L800,80 L800,40 L820,40 L820,30 L840,30 L840,40 L860,40 L860,80 L890,80 L890,60 L920,60 L920,80 L950,80 L950,75 L980,75 L980,80 L1010,80 L1010,55 L1040,55 L1040,80 L1070,80 L1070,45 L1090,45 L1090,35 L1110,35 L1110,45 L1130,45 L1130,80 L1160,80 L1160,70 L1200,70 L1200,120 Z'/%3E%3C/svg%3E") bottom/cover no-repeat;
}

/* Fireworks Container */
.hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Firework Particle */
.firework-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Firework Trail */
.firework-trail {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    background: var(--firework-gold);
    box-shadow: 0 0 6px var(--firework-gold);
}

/* Floating Heart (for occasional romantic touch) */
.floating-heart {
    position: absolute;
    bottom: -50px;
    opacity: 0.8;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.6));
}

/* Main Content Area - Single Screen Grid Layout */
.main-content {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    padding: 2vh 2vw;
    gap: 2vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Content Wrapper - Holds Lyrics and Envelope */
.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 4vw;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    max-height: 55vh;
}

/* Header Section */
.header {
    text-align: center;
    margin-bottom: 0;
}

.title {
    text-shadow: var(--text-glow);
    font-family: var(--font-cursive);
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    color: var(--blush-pink);
    animation: titleGlow 3s ease-in-out infinite alternate;
    margin-bottom: 0.5vh;
    letter-spacing: 2px;
}

/* Song Title */
.song-title {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 2vw, 1.1rem);
    color: var(--firework-gold);
    margin-top: 0.5vh;
    opacity: 0;
    animation: fadeIn 1s ease forwards 1s;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.song-title span {
    color: var(--blush-pink);
}

/* Title Glow Animation */
@keyframes titleGlow {
    from {
        text-shadow: 
            0 0 10px rgba(255, 182, 193, 0.5),
            0 0 20px rgba(255, 182, 193, 0.3),
            0 0 30px rgba(255, 105, 180, 0.2);
    }
    to {
        text-shadow: 
            0 0 20px rgba(255, 182, 193, 0.8),
            0 0 40px rgba(255, 182, 193, 0.5),
            0 0 60px rgba(255, 105, 180, 0.4),
            0 0 80px rgba(255, 20, 147, 0.3);
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lyrics Section */
.lyrics-section {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.lyrics-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: clamp(15px, 2vw, 25px);
    padding: clamp(20px, 3vh, 40px) clamp(15px, 2vw, 30px);
    box-shadow: 
        var(--shadow-soft),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    text-align: center;
    height: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vh;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer effect on lyrics card */
.lyrics-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 182, 193, 0.05) 50%,
        transparent 70%
    );
    animation: shimmer 8s linear infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.lyrics-text {
    line-height: 1.6;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 1;
    font-family: var(--font-romantic);
    font-size: clamp(1.1rem, 2.8vw, 1.8rem);
    font-weight: 500;
    color: var(--blush-pink);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Controls Section */
.controls-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    position: relative;
    padding-bottom: 1vh;
}

/* Music Player Wrapper - contains vinyl, button, and decorations */
.music-player-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Vinyl Disc - decorative rotating disc behind the button */
.vinyl-disc {
    position: absolute;
    width: clamp(110px, 15vh, 150px);
    height: clamp(110px, 15vh, 150px);
    border-radius: 50%;
    background: 
        radial-gradient(circle at 50% 50%, #1a1a2e 0%, #1a1a2e 20%, transparent 20%),
        conic-gradient(from 0deg, #1a1a2e, #2d2d44, #1a1a2e, #2d2d44, #1a1a2e, #2d2d44, #1a1a2e, #2d2d44, #1a1a2e);
    box-shadow: 
        0 4px 25px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 105, 180, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
    animation: vinylSpin 4s linear infinite paused;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vinyl-disc::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--coral-pink), var(--hot-pink));
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(255, 105, 180, 0.4);
}

.vinyl-grooves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        inset 0 0 0 6px rgba(255, 255, 255, 0.03),
        inset 0 0 0 12px rgba(255, 255, 255, 0.03),
        inset 0 0 0 18px rgba(255, 255, 255, 0.03),
        inset 0 0 0 24px rgba(255, 255, 255, 0.03);
}

@keyframes vinylSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Playing state - vinyl spins */
.music-player-wrapper.playing .vinyl-disc {
    animation-play-state: running;
}

/* Floating Music Notes - more prominent */
.floating-note {
    position: absolute;
    font-size: clamp(1.4rem, 3vh, 2rem);
    opacity: 0;
    pointer-events: none;
    animation: floatNote 2.5s ease-in-out infinite;
    z-index: 3;
}

.note-1 {
    top: -20px;
    left: -35px;
    animation-delay: 0s;
    color: var(--firework-gold);
    text-shadow: 
        0 0 10px var(--firework-gold),
        0 0 20px var(--firework-gold);
}

.note-2 {
    top: -25px;
    right: -30px;
    animation-delay: 0.8s;
    color: var(--blush-pink);
    text-shadow: 
        0 0 10px var(--blush-pink),
        0 0 20px var(--blush-pink);
}

.note-3 {
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1.6s;
    color: var(--firework-cyan);
    text-shadow: 
        0 0 10px var(--firework-cyan),
        0 0 20px var(--firework-cyan);
}

@keyframes floatNote {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translateY(-8px) scale(1);
    }
    40% {
        opacity: 1;
        transform: translateY(-20px) scale(1.15) rotate(8deg);
    }
    70% {
        opacity: 0.7;
        transform: translateY(-35px) scale(1) rotate(-5deg);
    }
    90% {
        opacity: 0.2;
        transform: translateY(-50px) scale(0.8) rotate(3deg);
    }
}

/* Play/Pause Button */
.play-pause-btn {
    width: clamp(60px, 8vh, 80px);
    height: clamp(60px, 8vh, 80px);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--coral-pink), var(--hot-pink));
    border: 3px solid var(--blush-pink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        var(--shadow-soft),
        0 0 30px rgba(255, 105, 180, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: var(--transition-smooth);
    position: relative;
    z-index: 2;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 
            var(--shadow-soft),
            0 0 30px rgba(255, 105, 180, 0.4);
    }
    50% {
        box-shadow: 
            var(--shadow-soft),
            0 0 50px rgba(255, 105, 180, 0.6),
            0 0 80px rgba(255, 105, 180, 0.3);
    }
}

.play-pause-btn:hover {
    transform: scale(1.1);
    box-shadow: 
        var(--shadow-glow),
        0 0 60px rgba(255, 105, 180, 0.6);
    animation: none;
}

.play-pause-btn:active {
    transform: scale(0.95);
}

.play-pause-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    animation: none;
}

.btn-icon {
    color: var(--white);
    font-size: clamp(1.5rem, 3vh, 2rem);
    position: absolute;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.play-icon {
    padding-left: 6px;
}

.hidden {
    display: none !important;
}

/* Loading Spinner */
.loading-spinner {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spinRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
    animation-delay: -0.45s;
    border-top-color: var(--firework-pink);
}

.spinner-ring:nth-child(2) {
    animation-delay: -0.3s;
    border-top-color: var(--firework-gold);
    width: 85%;
    height: 85%;
}

.spinner-ring:nth-child(3) {
    animation-delay: -0.15s;
    border-top-color: var(--firework-cyan);
    width: 70%;
    height: 70%;
}

@keyframes spinRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Click Me Hint - Arrow Animation */
.click-me-hint {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.click-me-hint.show {
    opacity: 1;
}

/* Individual arrow chevrons */
.arrow-hint {
    width: 16px;
    height: 16px;
    border-left: 3px solid var(--blush-pink);
    border-top: 3px solid var(--blush-pink);
    transform: rotate(45deg);
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(255, 182, 193, 0.8));
}

.click-me-hint.show .arrow-hint {
    animation: arrowPulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.click-me-hint.show .arrow-hint:nth-child(1) {
    animation-delay: 0s;
}

.click-me-hint.show .arrow-hint:nth-child(2) {
    animation-delay: 0.2s;
}

.click-me-hint.show .arrow-hint:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrowPulse {
    0% {
        opacity: 0;
        transform: rotate(45deg) translateY(8px);
    }
    30% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translateY(-8px);
    }
}

/* Surprise Section */
.surprise-section {
    width: 100%;
    max-width: 850px;
    margin-top: 30px;
    text-align: center;
}

.surprise-title {
    font-family: var(--font-cursive);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--firework-gold);
    margin-bottom: 25px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.surprise-cards {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.surprise-card {
    width: 210px;
    height: 160px;
    perspective: 1000px;
    cursor: pointer;
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: var(--transition-smooth);
}

.card-front {
    background: linear-gradient(145deg, var(--glass-bg), rgba(30, 30, 60, 0.8));
    box-shadow: 
        var(--shadow-soft),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 2px solid var(--glass-border);
}

.card-front:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 
        var(--shadow-glow),
        0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--blush-pink);
}

.envelope-icon {
    font-size: 3.5rem;
    margin-bottom: 12px;
    animation: floatEnvelope 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.5));
}

@keyframes floatEnvelope {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

.card-label {
    font-size: 0.95rem;
    color: var(--rose-gold);
    font-weight: 500;
    letter-spacing: 1px;
}

.card-back {
    background: linear-gradient(145deg, rgba(40, 20, 40, 0.9), rgba(60, 30, 60, 0.9));
    box-shadow: 
        var(--shadow-soft),
        0 0 30px rgba(255, 105, 180, 0.2);
    border: 2px solid var(--hot-pink);
}

.card-back .message-vi {
    font-family: var(--font-cursive);
    font-size: 1.3rem;
    color: var(--blush-pink);
    line-height: 1.6;
}

/* YouTube Player Container (Hidden) */
.youtube-player-container {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Surprise Card Section
   ============================================ */

.surprise-card-section {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

/* Envelope Container */
.surprise-envelope {
    position: relative;
    width: clamp(160px, 18vw, 200px);
    height: clamp(120px, 14vw, 150px);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.surprise-envelope:hover {
    transform: scale(1.05) translateY(-5px);
}

.surprise-envelope.opened {
    pointer-events: none;
}

/* Envelope Body */
.envelope-body {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Envelope Front */
.envelope-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #ff9a9e 0%, #fecfef 50%, #ffecd2 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 
        0 10px 40px rgba(255, 105, 180, 0.4),
        0 0 60px rgba(255, 182, 193, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 182, 193, 0.5);
    z-index: 2;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.surprise-envelope.opened .envelope-front {
    transform: rotateX(-180deg) translateY(-100px);
    opacity: 0;
}

.envelope-heart {
    font-size: clamp(2rem, 4vw, 2.8rem);
    animation: heartBeat 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.6));
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.15);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
}

.envelope-text {
    font-family: var(--font-cursive);
    font-size: 1.4rem;
    color: #d63384;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Envelope Flap (decorative top triangle) */
.envelope-flap {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 110px solid transparent;
    border-right: 110px solid transparent;
    border-bottom: 60px solid #fecfef;
    filter: drop-shadow(0 -3px 6px rgba(255, 105, 180, 0.3));
    z-index: 1;
    transition: all 0.5s ease;
    transform-origin: bottom center;
}

.surprise-envelope.opened .envelope-flap {
    transform: translateX(-50%) rotateX(180deg);
    border-bottom-color: #ffb6c1;
}

/* Click Hint Animation - Romantic Hearts */
.envelope-click-hint {
    position: absolute;
    bottom: clamp(-70px, -8vh, -50px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8vh;
    animation: hintFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes hintFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Orbiting hearts container */
.hint-hearts-orbit {
    position: relative;
    width: clamp(50px, 7vw, 70px);
    height: clamp(50px, 7vw, 70px);
    animation: orbitRotate 8s linear infinite;
}

@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Individual orbiting hearts */
.orbit-heart {
    position: absolute;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    animation: heartFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 105, 180, 0.8));
}

.orbit-heart:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.orbit-heart:nth-child(2) {
    bottom: 10px;
    left: 5px;
    animation-delay: -0.7s;
}

.orbit-heart:nth-child(3) {
    bottom: 10px;
    right: 5px;
    animation-delay: -1.4s;
}

@keyframes heartFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-8px) scale(1.2);
        opacity: 1;
    }
}

/* Romantic text hint */
.hint-text-romantic {
    font-family: var(--font-cursive);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: var(--blush-pink);
    text-shadow: 
        0 0 15px rgba(255, 182, 193, 0.9),
        0 0 30px rgba(255, 105, 180, 0.5);
    animation: romanticTextPulse 3s ease-in-out infinite;
    white-space: nowrap;
    letter-spacing: 1px;
}

@keyframes romanticTextPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
        text-shadow: 
            0 0 15px rgba(255, 182, 193, 0.9),
            0 0 30px rgba(255, 105, 180, 0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        text-shadow: 
            0 0 20px rgba(255, 182, 193, 1),
            0 0 40px rgba(255, 105, 180, 0.8),
            0 0 60px rgba(255, 20, 147, 0.4);
    }
}

/* Pulse rings emanating from envelope */
.hint-pulse-ring {
    position: absolute;
    top: clamp(-100px, -12vh, -80px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(70px, 10vw, 90px);
    height: clamp(70px, 10vw, 90px);
    border: 2px solid var(--blush-pink);
    border-radius: 50%;
    opacity: 0;
    animation: pulseRing 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hint-pulse-ring.delay {
    animation-delay: 1.25s;
}

@keyframes pulseRing {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0.8;
        border-color: var(--hot-pink);
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(-50%) scale(2);
        opacity: 0;
        border-color: var(--blush-pink);
    }
}

.surprise-envelope.opened .envelope-click-hint {
    animation: hintFadeOut 0.4s ease forwards;
}

@keyframes hintFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* ============================================
   Flying Out Animation - No Popup!
   Image and text fly out from envelope and float up
   ============================================ */

/* Hide the static flying content - we create dynamic elements instead */
.flying-content {
    display: none !important;
}

/* Flying Out Image - emerges from envelope and floats up */
.flying-out-image {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    transform: translate(-50%, 0);
    animation: flyOutImage 10s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.flying-out-image-inner {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #ffecd2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 0 40px rgba(255, 105, 180, 0.7),
        0 0 80px rgba(255, 182, 193, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.4);
    animation: imageGlow 2s ease-in-out infinite alternate;
}

@keyframes imageGlow {
    from {
        box-shadow: 
            0 0 40px rgba(255, 105, 180, 0.7),
            0 0 80px rgba(255, 182, 193, 0.4);
    }
    to {
        box-shadow: 
            0 0 60px rgba(255, 105, 180, 0.9),
            0 0 120px rgba(255, 182, 193, 0.6),
            0 0 160px rgba(255, 20, 147, 0.3);
    }
}

.flying-emoji {
    font-size: 4.5rem;
    filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.8));
    animation: emojiWobble 1s ease-in-out infinite;
}

.flying-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.8));
    animation: photoWobble 3s ease-in-out infinite;
}

@keyframes photoWobble {
    0%, 100% { transform: rotate(-1deg) scale(1); }
    50% { transform: rotate(1deg) scale(1.02); }
}

@keyframes emojiWobble {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    50% { transform: rotate(3deg) scale(1.05); }
}

.flying-hearts-decor {
    position: absolute;
    bottom: 25px;
    font-size: 2rem;
    animation: heartsFloat 1.5s ease-in-out infinite;
}

@keyframes heartsFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-8px) scale(1.15); opacity: 1; }
}

/* Main fly out animation - floats up gently and stays visible longer */
@keyframes flyOutImage {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.3) rotate(-5deg);
    }
    8% {
        opacity: 1;
        transform: translate(-50%, -30px) scale(1.05) rotate(2deg);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -80px) scale(1) rotate(0deg);
    }
    /* Pause phase - image stays centered and fully visible */
    25% {
        opacity: 1;
        transform: translate(-50%, -120px) scale(1) rotate(-1deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -150px) scale(1) rotate(1deg);
    }
    65% {
        opacity: 1;
        transform: translate(-50%, -180px) scale(0.98) rotate(-1deg);
    }
    /* Gentle fade out phase */
    80% {
        opacity: 0.85;
        transform: translate(-50%, -250px) scale(0.95) rotate(0deg);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -350px) scale(0.9) rotate(1deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -450px) scale(0.8) rotate(2deg);
    }
}

/* Flying Out Text */
.flying-out-text {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    transform: translate(-50%, 0);
    text-align: center;
    white-space: normal;
    max-width: 90vw;
    padding: 0 1rem;
    animation: flyOutText 10s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.flying-out-text-sub {
    animation: flyOutTextSub 10s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.flying-main-message {
    font-family: var(--font-cursive);
    font-size: clamp(1.4rem, 4vw, 2.5rem);
    color: var(--blush-pink);
    line-height: 1.4;
    display: block;
    text-shadow: 
        0 0 20px rgba(255, 182, 193, 1),
        0 0 40px rgba(255, 105, 180, 0.8),
        0 0 60px rgba(255, 20, 147, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
    animation: textPulse 1s ease-in-out infinite alternate;
}

.flying-sub-message {
    font-family: var(--font-romantic);
    font-size: clamp(1rem, 3vw, 1.4rem);
    color: var(--firework-gold);
    font-style: italic;
    text-shadow: 
        0 0 15px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(255, 215, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes textPulse {
    from {
        text-shadow: 
            0 0 20px rgba(255, 182, 193, 1),
            0 0 40px rgba(255, 105, 180, 0.8);
    }
    to {
        text-shadow: 
            0 0 30px rgba(255, 182, 193, 1),
            0 0 60px rgba(255, 105, 180, 1),
            0 0 80px rgba(255, 20, 147, 0.6);
    }
}

@keyframes flyOutText {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.7);
    }
    8% {
        opacity: 1;
        transform: translate(-50%, -40px) scale(1.05);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -100px) scale(1);
    }
    /* Pause phase - text stays centered and fully visible */
    25% {
        opacity: 1;
        transform: translate(-50%, -140px) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -170px) scale(1);
    }
    65% {
        opacity: 1;
        transform: translate(-50%, -200px) scale(0.98);
    }
    /* Gentle fade out phase */
    80% {
        opacity: 0.85;
        transform: translate(-50%, -280px) scale(0.95);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -380px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -480px) scale(0.85);
    }
}

@keyframes flyOutTextSub {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.7);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -30px) scale(1.02);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -80px) scale(1);
    }
    /* Pause phase - sub text stays visible */
    28% {
        opacity: 1;
        transform: translate(-50%, -110px) scale(1);
    }
    52% {
        opacity: 1;
        transform: translate(-50%, -140px) scale(1);
    }
    68% {
        opacity: 1;
        transform: translate(-50%, -170px) scale(0.98);
    }
    /* Gentle fade out phase */
    82% {
        opacity: 0.8;
        transform: translate(-50%, -250px) scale(0.95);
    }
    92% {
        opacity: 0.4;
        transform: translate(-50%, -350px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -450px) scale(0.85);
    }
}

/* Trailing Sparkles */
.trailing-sparkle {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    animation: trailFloat 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    filter: drop-shadow(0 0 8px currentColor);
}

@keyframes trailFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.3) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2) rotate(90deg);
    }
    60% {
        opacity: 0.7;
        transform: translateY(var(--float-distance)) scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(var(--float-distance) * 1.5)) scale(0.5) rotate(360deg);
    }
}

/* No overlay or close button needed - content flies out and disappears! */

/* Hearts burst animation when envelope opens */
.burst-heart {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 1002;
    animation: burstOut 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.8));
}

@keyframes burstOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(var(--rot));
    }
}


/* ============================================
   Responsive Design - Single Screen
   ============================================ */

/* Tablet and Below */
@media screen and (max-width: 768px) {
    .main-content {
        padding: 1.5vh 3vw;
        gap: 1.5vh;
    }
    
    .content-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2vh;
        max-height: 65vh;
    }
    
    .lyrics-section {
        max-width: 100%;
    }
    
    .lyrics-card {
        padding: 2vh 3vw;
    }
    
    .loading-spinner {
        width: 40px;
        height: 40px;
    }
    
    .background-container::after {
        height: 60px;
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    .main-content {
        padding: 1vh 2vw;
        gap: 1vh;
        grid-template-rows: auto 1fr auto;
    }
    
    .content-wrapper {
        gap: 1.5vh;
        max-height: 60vh;
        overflow: visible;
    }
    
    .lyrics-card {
        padding: 1.5vh 2.5vw;
    }
    
    .loading-spinner {
        width: 35px;
        height: 35px;
    }
    
    .background-container::after {
        height: 40px;
    }
    
    .controls-section {
        padding-bottom: 15px;
        flex-shrink: 0;
        position: relative;
        z-index: 10;
    }
    
    /* Ensure vinyl disc and button are properly sized on mobile */
    .vinyl-disc {
        width: clamp(90px, 12vh, 120px);
        height: clamp(90px, 12vh, 120px);
    }
    
    .play-pause-btn {
        width: clamp(55px, 7vh, 70px);
        height: clamp(55px, 7vh, 70px);
    }
}

/* Touch-friendly sizing */
@media (hover: none) and (pointer: coarse) {
    .play-pause-btn {
        min-width: 48px;
        min-height: 48px;
    }
    
    .surprise-envelope {
        min-width: 48px;
        min-height: 48px;
    }
}

/* Fix for iOS Safari dynamic viewport - ensures controls are always visible */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: -webkit-fill-available;
    }
    
    .main-content {
        height: 100%;
        min-height: -webkit-fill-available;
        padding-bottom: max(2vh, env(safe-area-inset-bottom, 20px));
    }
    
    .controls-section {
        padding-bottom: env(safe-area-inset-bottom, 10px);
        margin-bottom: 10px;
    }
}

/* Responsive styles for Surprise Card Section */
@media screen and (max-width: 768px) {
    .envelope-flap {
        border-left-width: clamp(70px, 10vw, 90px);
        border-right-width: clamp(70px, 10vw, 90px);
        border-bottom-width: clamp(40px, 6vw, 55px);
    }
    
    .flying-image-container {
        width: 200px;
        height: 200px;
    }
}

@media screen and (max-width: 480px) {
    .envelope-flap {
        border-left-width: clamp(60px, 12vw, 80px);
        border-right-width: clamp(60px, 12vw, 80px);
        border-bottom-width: clamp(35px, 7vw, 45px);
    }
    
    .flying-image-container {
        width: 160px;
        height: 160px;
        border-radius: 12px;
    }
}