/* ======================================
   RESET & ULTRA LUXURY FOUNDATIONS
====================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    background-color: #000000;
}

body{
    font-family:'Inter', sans-serif;
    background-color:#000000; /* Pure Rich Velvet Black */
    color:#ffffff;
    overflow-x:hidden;
}

:root{
    --gold:#f5d8a8;
    --pink:#ff8fc7;
    --purple:#8e75ff;
    --border:rgba(255,255,255,0.04);
}

/* COUNTDOWN SCREEN */
#countdownScreen{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000000;
    overflow:hidden;
    z-index:9999;
}

#starsCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity: 0.4;
}

.countdownContent{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1200px;
    padding:40px 20px;
    text-align:center;
}

.miniText{
    display:block;
    font-size:.7rem;
    letter-spacing:10px;
    text-transform:uppercase;
    opacity:.35;
    margin-bottom:40px;
}

.filmStrip{
    height:24px;
    margin:25px 0;
    background: repeating-linear-gradient(90deg, #090909 0 15px, #000000 15px 30px);
    opacity:.3;
}

.moviePoster{
    position:relative;
    padding:80px 40px;
    border-radius:20px;
    background:#030303;
    border: 1px solid var(--border);
    box-shadow: 0 50px 120px rgba(0,0,0,0.95);
}

.posterSmall{
    letter-spacing:10px;
    font-size:.7rem;
    opacity:.4;
    margin-bottom:25px;
}

.posterDate{
    font-family: 'Cormorant Garamond', serif;
    font-size:5.5rem;
    font-weight:300;
    line-height:1;
    margin-bottom:50px;
}

.posterCountdown{
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
    perspective: 1000px;
}

/* 3D LUXURY CALENDAR TRANSITION CARDS */
.calendarCard {
    text-align: center;
}

.flipContainer {
    position: relative;
    width: 130px;
    height: 150px;
    background: linear-gradient(180deg, #090909 0%, #050505 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 20px 45px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.flipContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.4);
}

.flipContainer span {
    display: block;
    font-size: 4.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: #ffffff;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.flip-active {
    animation: turnPage 0.45s ease-in-out;
}

@keyframes turnPage {
    0% { transform: translateY(-30px) rotateX(45deg); opacity: 0.3; }
    50% { transform: translateY(0) rotateX(0deg); opacity: 1; }
    100% { transform: translateY(0); }
}

.calendarCard small{
    display:block;
    margin-top:15px;
    font-size:.6rem;
    letter-spacing:4px;
    opacity:.35;
}

.movieQuote{
    margin-top:50px;
    font-style:italic;
    opacity:.35;
    font-size: 0.9rem;
}





.aurora{
    position:absolute;
    border-radius:50%;
    filter:blur(180px);
    opacity:.12;
}
.aurora1{ width:600px; height:600px; background:var(--pink); top:-200px; left:-200px; }
.aurora2{ width:700px; height:700px; background:var(--purple); right:-300px; bottom:-300px; }

/* INTERACTIVE DISPLAY SCENES */
#introScene, #loadingScene, #memoryExplosion, #heroReveal {
    display:none;
    height:100vh;
    background:#000000;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.introText{ font-family: 'Cormorant Garamond', serif; font-size:4rem; font-weight:300; opacity:0; transition:1.2s; }
.loadingCenter h2{ font-family: 'Cormorant Garamond', serif; font-size:3rem; font-weight:300; margin-bottom:30px; }
#loadingMessage{ margin-bottom:25px; opacity:.4; letter-spacing: 1px; }

.loadingBar{ width:100%; max-width:450px; height:4px; background: rgba(255,255,255,.04); border-radius:999px; overflow:hidden; margin: 0 auto; }
#loadingProgress{ width:0%; height:100%; background: #ffffff; }
#loadingPercent{ display:block; margin-top:20px; font-size:0.9rem; opacity: 0.6; }

#memoryExplosion { position:relative; overflow:hidden; background:#000000; }
.memoryContainer { position:relative; width:100%; height:100%; }
.memoryPhoto { 
    position:absolute; 
    width:230px; 
    height:290px; 
    object-fit:cover; 
    border-radius:4px; 
    border:6px solid #ffffff; 
    box-shadow: 0 40px 80px rgba(0,0,0,0.9); 
    left:50%; 
    top:50%; 
    transform: translate(-50%,-50%) scale(.1); 
    opacity:0; 
    will-change: transform, opacity;
    transition:1.5s cubic-bezier(0.1, 0.85, 0.25, 1); 
}

.heroVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.heroOverlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.3), #000000 98%); }
.heroContent{ position:relative; z-index:5; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; max-width:900px; margin:auto; }
.heroContent h1{ font-family: 'Cormorant Garamond', serif; font-size:6rem; font-weight:300; }
.heroContent h2{ font-family: 'Cormorant Garamond', serif; font-size:8rem; font-weight:700; background: linear-gradient(90deg, white, var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.heroContent p { max-width: 550px; margin-top: 25px; line-height: 1.8; opacity: 0.6; }

#enterStory, #openLetter, #surpriseButton { margin-top:40px; padding:16px 42px; border:none; border-radius:999px; background:#ffffff; color:#000000; font-weight:600; cursor:pointer; transition:.4s cubic-bezier(0.16, 1, 0.3, 1); letter-spacing: 1px; }
#enterStory:hover, #openLetter:hover, #surpriseButton:hover { transform:translateY(-4px); box-shadow: 0 15px 30px rgba(255,255,255,0.15); }

#mainWebsite{ display:none; background:#000000; }
.chapter{ min-height:100vh; display:flex; align-items:center; justify-content:center; gap:100px; padding:140px 10%; background:#000000; }
.chapter.reverse{ flex-direction:row-reverse; }
.chapter img{ width:460px; height:600px; object-fit:cover; border-radius:8px; box-shadow: 0 40px 90px rgba(0,0,0,0.95); transition:.6s cubic-bezier(0.16, 1, 0.3, 1); }
.chapterText{ max-width:500px; }
.chapterText span{ letter-spacing:8px; font-size:.7rem; opacity:.35; }
.chapterText h2{ font-family: 'Cormorant Garamond', serif; font-size:4.5rem; font-weight:300; margin:20px 0; }
.chapterText p{ font-size:1.05rem; line-height:1.9; opacity:.65; }

.gallerySection{ padding:150px 10%; background:#000000; border-top: 1px solid rgba(255,255,255,0.02); }
.gallerySection h2{ font-family: 'Cormorant Garamond', serif; font-size:4.5rem; font-weight:300; text-align:center; margin-bottom:80px; }
.galleryGrid{ columns:4; column-gap:20px; }
.galleryGrid img{ width:100%; margin-bottom:20px; border-radius:6px; cursor:pointer; transition:.4s ease; box-shadow:0 15px 40px rgba(0,0,0,0.8); }

.letterSection { padding:150px 8%; background:#000000; display:flex; flex-direction:column; align-items:center; }
.envelope { font-size:6rem; cursor:pointer; margin-bottom: 20px; }
#letter{ display:none; margin-top:60px; max-width:750px; padding:60px; border-radius:12px; background:rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.04); text-align:left; }
#letter h2{ font-family: 'Cormorant Garamond', serif; font-size:3.5rem; font-weight:300; margin-bottom:30px; }
#letter p{ line-height:2; margin-bottom:24px; opacity:.65; }

.surpriseSection{ padding:140px 8%; background:#000000; text-align:center; }
#surpriseContent{ display:none; margin-top:60px; }
#surpriseContent img{ width:240px; max-width:90%; margin:auto; }

.finalScene{ height:100vh; position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; text-align:center; background:#000000; }
#fireworksCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity: 0.4; }
.finalContent h1{ font-family: 'Cormorant Garamond', serif; font-size:5.5rem; font-weight:300; margin:25px 0; }

.reveal{ opacity:0; transform: translateY(40px); transition: 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active{ opacity:1; transform: translateY(0); }
::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-track{ background:#000000; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); }

@media(max-width:1024px){
    .chapter{ flex-direction:column; text-align:center; gap:50px; padding:100px 5%; }
    .chapter.reverse{ flex-direction:column; }
    .chapter img{ width:100%; max-width:450px; height:auto; }
    .galleryGrid{ columns:2; }
    .heroContent h1{ font-size:4rem; }
    .heroContent h2{ font-size:5rem; }
}
@media(max-width:768px){
    .posterDate { font-size: 3.8rem; }
    .flipContainer { width: 75px; height: 95px; }
    .flipContainer span { font-size: 2.8rem; }
    .chapterText h2{ font-size:2.8rem; }
}