/* style.css */
:root {
    --text-light: #FDFBF7;
    --text-accent: #FFDDE1; 
    --font-storybook: 'Alice', serif; 
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

body, html {
    width: 100%; 
    height: 100vh; 
    height: 100dvh; 
    background-color: #050505;
    font-family: var(--font-storybook); 
    overflow: hidden; 
    display: flex; justify-content: center; align-items: center;
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation; 
}

/* --- Backgrounds & Overlays --- */
#bg-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; filter: blur(20px); transform: scale(1.1);
    transition: opacity 3s ease, filter 4s ease-out, transform 5s ease-out;
    z-index: 1;
}
#bg-layer.active { opacity: 0.6; filter: blur(0px); transform: scale(1); }

#dim-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0; transition: opacity 2s ease;
    z-index: 2;
}
#dim-overlay.active { opacity: 1; }

.start-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; 
    background-color: #050505; z-index: 99999; 
    display: flex; justify-content: center; align-items: center;
    color: var(--text-light); font-size: 1.4rem; letter-spacing: 2px;
    cursor: pointer; transition: opacity 0.5s ease;
}
.start-overlay.hidden { opacity: 0; pointer-events: none; }

/* --- Typography & Text Positioning --- */
#story-container {
    position: relative; z-index: 10; width: 90%; max-width: 400px; height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.story-text {
    position: absolute; color: var(--text-light); opacity: 0; filter: blur(10px); transform: translateY(15px);
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; text-shadow: 0px 4px 15px rgba(0,0,0,0.5);
}
.story-text.show { opacity: 1; filter: blur(0px); transform: translateY(0); }
.story-text.exit { opacity: 0; filter: blur(10px); transform: translateY(-15px); animation: none !important; }

.story-group { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 20px; pointer-events: none; }
.story-group .story-text { position: relative; }

.cinematic { font-size: 3rem; }
.personal { font-size: 3rem; }
.hint-text { font-size: 1.1rem; letter-spacing: 2px; color: #EBEBEB; opacity: 0.8; }
.soothing { font-size: 1.4rem; letter-spacing: 3px; opacity: 0.8; }
.buildup { font-size: 2.2rem; line-height: 1.5; }

/* --- Animations & Interactions --- */
.rotate-icon { width: 28px; height: 48px; border: 2px solid #EBEBEB; border-radius: 6px; margin-top: 15px; transform-origin: center; }
#tilt-screen.show .rotate-icon { animation: rotatePhone 2.5s infinite ease-in-out 1.5s; }
@keyframes rotatePhone {
    0%, 15% { transform: rotate(0deg); opacity: 1; }
    45%, 55% { transform: rotate(-90deg); opacity: 1; }
    85%, 100% { transform: rotate(0deg); opacity: 1; }
}

.landscape-group { width: 85vh; max-width: 800px; transform: rotate(90deg); text-align: center; }
.interactive-group.active { pointer-events: auto; cursor: pointer; }
.pulsing-cta { position: relative; font-size: 1.6rem; color: var(--text-accent); margin-top: 15px; letter-spacing: 2px; }
.pulsing-cta.show { animation: gentlePulse 2s infinite alternate ease-in-out 1.5s; }
@keyframes gentlePulse {
    0% { opacity: 1; transform: scale(1); text-shadow: 0px 4px 15px rgba(0,0,0,0.5); }
    100% { opacity: 0.6; transform: scale(0.95); text-shadow: 0px 0px 15px rgba(255,221,225,0.6); }
}

/* =========================================
   MUSIC CARD INTEGRATION
   ========================================= */
.landscape-card {
    position: absolute; z-index: 20; width: 85vh; max-width: 850px; height: 85vw; max-height: 450px;
    transform: rotate(90deg) scale(0.9); opacity: 0; pointer-events: none;
    transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    background-color: #4a0d0d; border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
    display: flex; overflow: hidden;
}
.landscape-card.active { opacity: 1; pointer-events: auto; transform: rotate(90deg) scale(1); }



/* --- Section 1: Canvas --- */
.canvas-section {
    flex: 1; position: relative; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.05);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)); background-size: cover; background-position: center;
}
.lyric-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.lyric-wrapper { position: absolute; top: 0; left: 0; width: 100%; padding: 200px 40px; transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1); }

.lyric-line {
    font-size: 1.5rem; line-height: 1.6; text-align: center; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    opacity: 0.4; filter: blur(3px); transform: translateY(30px) scale(0.9); transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform, opacity, filter;
}
.lyric-line.active { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1.05); color: #ffffff; }
.lyric-line.passed { opacity: 0.4; filter: blur(3px); transform: translateY(-30px) scale(0.9); }

/* --- Section 2: Controls --- */
.control-section { width: 320px; padding: 40px 30px; display: flex; flex-direction: column; justify-content: space-between; }
.device-info { font-size: 0.8rem; color: #b57b7b; text-transform: uppercase; letter-spacing: 2px; text-align: right; margin-bottom: 20px; }
.song-info { text-align: right; margin-bottom: 30px; }
.song-title { font-size: 2.2rem; font-weight: normal; margin-bottom: 5px; color: #ffffff; }
.artist-name { font-size: 1.2rem; color: #b57b7b; }

.progress-container { margin-bottom: 30px; }
.time-labels { display: flex; justify-content: space-between; font-size: 0.85rem; color: #b57b7b; margin-bottom: 8px; }
.progress-bar-bg { width: 100%; height: 6px; background-color: rgba(255,255,255,0.1); border-radius: 10px; }
.progress-bar-fill { height: 100%; width: 0%; background-color: #ffffff; border-radius: 10px; position: relative; transition: width 0.1s linear; }
.progress-bar-fill::after { content: ''; position: absolute; right: -5px; top: -4px; width: 14px; height: 14px; background-color: #ffffff; border-radius: 50%; box-shadow: 0 0 10px rgba(255,255,255,0.5); }
.controls { display: flex; justify-content: center; align-items: center; gap: 30px; }
.controls button { background: none; border: none; cursor: pointer; color: #f8e3e3; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.controls button:hover { transform: scale(1.1); color: #ffffff; }
.controls button svg { fill: currentColor; }
.btn-play { width: 60px; height: 60px; }
.btn-skip { width: 35px; height: 35px; color: #b57b7b; }
.typing-cursor::after { content: '|'; animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* =========================================
   UPGRADED: GLOBAL PRANK REVEAL TAKEOVER
   ========================================= */

/* 1. The Blinding Flash */
.white-flash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #FFFFFF; z-index: 999998;
    opacity: 0; pointer-events: none;
}
.white-flash.trigger-flash {
    animation: blastFlash 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes blastFlash {
    0% { opacity: 0; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(10); }
    100% { opacity: 1; filter: brightness(1); }
}

/* 2. The Global White Screen */
.global-prank-overlay {
    position: fixed; 
    top: 50%; left: 50%; 
    /* Force width/height to flip for mobile landscape orientation */
    width: 100vh; width: 100dvh; 
    height: 100vw; 
    transform: translate(-50%, -50%) rotate(90deg);
    background-color: #FCFCFC; /* Clean off-white */
    z-index: 999999; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #050505; text-align: center; overflow: hidden;
}
.global-prank-overlay.hidden { display: none; }

/* 1. Impact Text (fahhhhhh) */
.impact-text {
    font-size: 4.5rem; font-weight: 900; letter-spacing: -2px; text-transform: lowercase;
    opacity: 0; display: none; margin: 0; padding: 0 20px; line-height: 1;
}
.impact-text.show-impact {
    display: block;
    animation: impactPop 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, violentShake 0.1s infinite 0.15s;
}

@keyframes impactPop {
    0% { transform: scale(3.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes violentShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-4px, 4px) rotate(-2deg); }
    50% { transform: translate(4px, -3px) rotate(2deg); }
    75% { transform: translate(-4px, -4px) rotate(-1deg); }
}

/* 2. Prank Reveal Container & Lines */
.reveal-container { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 20px; }
.reveal-container.hidden { display: none; }
.reveal-line { opacity: 0; font-weight: 800; font-size: 1.8rem; margin: 0; }
.reveal-sub { font-size: 1rem; font-weight: 600; color: #666; font-style: italic; }
.reveal-sweet { font-size: 1.4rem; color: #ff3b30; margin-top: 15px; }

/* Custom Reveal Animations */
.anim-slam { animation: slamIn 0.3s ease-out forwards; }
@keyframes slamIn {
    0% { transform: scale(2); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.anim-soft-up { animation: softUp 0.4s ease-out forwards; }
@keyframes softUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.anim-wobble { animation: cheekyWobble 0.5s ease-in-out forwards; transform-origin: center; }
@keyframes cheekyWobble {
    0% { transform: translateY(15px) rotate(-5deg); opacity: 0; }
    50% { transform: translateY(-5px) rotate(3deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.anim-snap { animation: snapIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes snapIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.anim-stamp { animation: stampPop 0.3s ease-in forwards; }
@keyframes stampPop {
    0% { transform: scale(1.5); opacity: 0; text-shadow: 0 20px 20px rgba(0,0,0,0); }
    100% { transform: scale(1); opacity: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
}

.anim-fade-up { animation: softFadeUp 0.8s ease-out forwards; }
@keyframes softFadeUp {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* --- UPGRADED REVEAL ANIMATIONS --- */

/* 1. Flash Zoom In -> Normal (APRIL FOOL'S) */
/* 1. Fast Pace Morph Blur Zoom In (APRIL FOOL'S) */
.anim-morph-zoom {
    /* Fast 0.5s duration with a snappy, premium deceleration curve */
    animation: morphZoomIn 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
    transform-origin: center;
    will-change: transform, filter, opacity;
}
@keyframes morphZoomIn {
    0% { 
        transform: scale(4); 
        filter: blur(20px); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1); 
        filter: blur(0px); 
        opacity: 1; 
    }
}
/* 2. Simple Smooth Fade In (Relax / April fool tha) */
.anim-fade-in {
    /* Slowed from 0.8s to 1.5s for a very gentle materialization */
    animation: simpleFade 1.5s ease-in-out forwards;
    opacity: 0;
}
@keyframes simpleFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 3. Elegant Upward Drift & Typography (Ending line) */
.elegant-text {
    font-family: var(--font-storybook); 
    color: #4a0d0d; 
    font-weight: normal;
    letter-spacing: 1px;
}
.anim-elegant-up {
    /* Slowed from 1.5s to 2.5s to create a floating, dreamy finale */
    animation: elegantUp 2.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    opacity: 0;
}
@keyframes elegantUp {
    0% { transform: translateY(20px); opacity: 0; filter: blur(4px); }
    100% { transform: translateY(0); opacity: 1; filter: blur(0px); }
}

/* =========================================
   SHARE CTA & LAYOUT SHIFT
   ========================================= */

/* 1. Smooth Upward Shift for the Text */
.reveal-container {
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal-container.shift-up {
    transform: translateY(-50px); /* Shifts the text up gracefully */
}

/* 2. CTA Container Positioning */
.share-cta-container {
    position: absolute;
    bottom: 12%; /* Comfortably above the physical bottom edge */
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 10;
}
.share-cta-container.hidden { display: none; }

/* 3. The Soft Glow Button Styles */
.btn-premium {
    border: none; outline: none; cursor: pointer;
    font-size: 1.1rem; font-weight: 700;
    padding: 18px 32px; border-radius: 50px;
    display: flex; align-items: center; gap: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, box-shadow;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.btn-premium:active { transform: scale(0.95) !important; }

.btn-soft-glow {
    background-color: #fff;
    color: #050505;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 15px 35px rgba(0,0,0,0.08);
}
.btn-soft-glow:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.12); 
    color: #ff3b30; 
}

/* 4. Morph Blur In Animation */
.anim-morph-blur-in {
    animation: morphBlurIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes morphBlurIn {
    0% { opacity: 0; filter: blur(15px); transform: translateY(30px) scale(1.2); }
    100% { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); }
}