/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#050814;
    --bg2:#090d1d;

    --card:rgba(255,255,255,.06);
    --cardBorder:rgba(255,255,255,.1);

    --text:#ffffff;
    --muted:#9ea8c4;

    --accent:#74d6ff;
    --accent2:#8e7dff;
    --accent3:#ffd56a;

    --shadow:
        0 20px 60px rgba(0,0,0,.35);

}

html{
    scroll-behavior:smooth;
}

body{

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(116,214,255,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(142,125,255,.08),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #050814,
            #090d1d,
            #050814
        );

    min-height:100vh;

    color:var(--text);

    font-family:'Inter',sans-serif;

    overflow-x:hidden;
}

/* =====================================================
   CURSOR GLOW
===================================================== */

#cursorGlow{

    position:fixed;

    width:320px;
    height:320px;

    border-radius:50%;

    pointer-events:none;

    z-index:5;

    background:
        radial-gradient(
            circle,
            rgba(116,214,255,.15),
            rgba(116,214,255,.05),
            transparent 70%
        );

    filter:blur(25px);

    transform:
        translate(-50%,-50%);

}

/* =====================================================
   SPACE CANVAS
===================================================== */

#spaceCanvas{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:-10;
}

/* =====================================================
   BACKGROUND LAYERS
===================================================== */

.background-layer{

    position:fixed;

    inset:0;

    pointer-events:none;
}

.layer-1{

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size:140px 140px;

    opacity:.3;

    z-index:-9;
}

.layer-2{

    background:
        radial-gradient(
            circle,
            rgba(116,214,255,.12) 2px,
            transparent 2px
        );

    background-size:260px 260px;

    opacity:.25;

    z-index:-8;
}

.layer-3{

    background:
        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    opacity:.25;

    z-index:-7;
}

/* =====================================================
   INTRO
===================================================== */

#intro{

    position:fixed;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            #11192f,
            #050814
        );

    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.intro-content{

    text-align:center;

    position:absolute;

    z-index:3;
}

.intro-line{

    opacity:0;

    font-size:clamp(24px,4vw,52px);

    font-weight:700;

    letter-spacing:-1px;
}

.intro-line-1{
    animation:introText .9s forwards;
}

.intro-line-2{
    animation:introText .9s forwards;
    animation-delay:1.6s;
}

.intro-line-3{
    animation:introText .9s forwards;
    animation-delay:3.2s;
}

.age-wrapper{

    position:absolute;

    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;
}

.age-number{

    position:absolute;

    font-size:min(34vw,350px);

    font-weight:900;

    letter-spacing:-12px;

    user-select:none;
}

.age16{
    opacity:0;
}

.age17{
    opacity:0;
}

/* =====================================================
   HERO
===================================================== */

.hero{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    padding:40px;
}

.hero-content{

    text-align:center;

    max-width:900px;

    position:relative;
    z-index:2;
}

.hero-badge{

    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    margin-bottom:35px;

    font-size:14px;
}

.hero h1{

    font-size:
        clamp(56px,12vw,130px);

    font-weight:900;

    line-height:.9;

    letter-spacing:-4px;

    margin-bottom:25px;

    background:
        linear-gradient(
            90deg,
            #fff,
            #aee8ff
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-text{

    color:var(--muted);

    font-size:
        clamp(18px,2vw,26px);

    line-height:1.8;

    max-width:760px;

    margin:auto;
}

.scroll-indicator{

    margin-top:50px;

    font-size:30px;

    opacity:.5;
}

/* =====================================================
   RAYS
===================================================== */

.hero-rays{

    position:absolute;

    inset:0;

    overflow:hidden;
}

.hero-rays::before,
.hero-rays::after{

    content:"";

    position:absolute;

    width:1200px;
    height:1200px;

    border-radius:50%;

    filter:blur(100px);

    opacity:.15;
}

.hero-rays::before{

    background:
        radial-gradient(
            circle,
            rgba(116,214,255,.9),
            transparent 70%
        );

    left:-300px;
    top:-300px;
}

.hero-rays::after{

    background:
        radial-gradient(
            circle,
            rgba(142,125,255,.9),
            transparent 70%
        );

    right:-300px;
    bottom:-300px;
}

/* =====================================================
   DIVIDER
===================================================== */

.divider{

    width:100%;

    max-width:1200px;

    margin:0 auto 80px;

    padding:0 40px;
}

.divider svg{

    width:100%;
    height:100px;
}

.divider line{

    stroke:
        rgba(255,255,255,.15);

    stroke-width:1;
}

.divider circle{

    fill:
        rgba(255,255,255,.25);
}

/* =====================================================
   MAIN GRID
===================================================== */

.memory-grid{

    width:min(1400px,92vw);

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:32px;

    padding-bottom:140px;
}

.card{

    position:relative;

    background:var(--card);

    border:
        1px solid var(--cardBorder);

    backdrop-filter:blur(18px);

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:
        transform .5s,
        border-color .5s,
        box-shadow .5s;
}

.card:hover{

    border-color:
        rgba(116,214,255,.4);

    box-shadow:
        0 25px 70px rgba(0,0,0,.4);

}

/* =====================================================
   PHOTO CARDS
===================================================== */

.photo-card{
    background:#ffffff;
    color:#111;
    padding:14px;
}

.photo-placeholder{

    width:100%;
    height:320px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;
    font-weight:700;

    color:white;

    background:
        linear-gradient(
            135deg,
            #2f6fff,
            #7f5fff,
            #59d7ff
        );

    background-size:300% 300%;
}

.photo-caption{

    text-align:center;

    margin-top:14px;

    font-size:14px;
    font-weight:600;

    color:#444;
}

/* =====================================================
   POLAROIDS
===================================================== */

.polaroid{
    transition:
        transform .6s,
        box-shadow .6s;
}

.rotate-left{
    transform:rotate(-3deg);
}

.rotate-right{
    transform:rotate(4deg);
}

.polaroid:hover{

    transform:
        rotate(0deg)
        scale(1.04);

    z-index:20;
}

/* =====================================================
   QUOTES
===================================================== */

.quote-card{

    display:flex;
    align-items:center;

    min-height:240px;

    padding:36px;
}

.quote-card p{

    font-size:24px;

    line-height:1.8;

    font-weight:500;
}

/* =====================================================
   SPECIAL CARD
===================================================== */

.special-card{

    padding:40px;

    background:
        linear-gradient(
            135deg,
            rgba(70,120,255,.15),
            rgba(255,255,255,.05)
        );

    overflow:hidden;
}

.special-card::before{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(116,214,255,.15),
            transparent 70%
        );

    top:-150px;
    right:-150px;
}

.special-icon{

    width:70px;
    height:70px;

    margin-bottom:24px;
}

.special-icon svg{

    width:100%;
    height:100%;

    fill:var(--accent);
}

.special-card h3{

    font-size:32px;

    margin-bottom:20px;
}

.special-card p{

    font-size:20px;

    line-height:1.8;

    margin-bottom:16px;
}

.special-card small{

    color:var(--muted);

    font-size:15px;
}

/* =====================================================
   ACHIEVEMENTS
===================================================== */

#achievementContainer{

    position:fixed;

    top:30px;
    right:30px;

    z-index:100;

    width:360px;

    pointer-events:none;
}

.achievement{

    margin-bottom:14px;

    padding:18px 20px;

    border-radius:18px;

    background:
        rgba(10,15,30,.92);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    box-shadow:
        0 10px 40px rgba(0,0,0,.4);

    opacity:0;

    transform:
        translateX(120px);

    font-size:15px;
    line-height:1.5;
}

/* =====================================================
   CONFETTI
===================================================== */

#confettiLayer{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:20;
}

.confetti{

    position:absolute;

    width:28px;
    height:28px;

    fill:white;

    opacity:.2;
}

.star{
    fill:#ffd86b;
}

.gift{
    fill:#8ad9ff;
}

.heart{
    fill:#ff8bb7;
}

.trophy{
    fill:#ffe28d;
}

/* =====================================================
   FINAL SCENE
===================================================== */

.final-scene{

    position:relative;

    padding:
        220px 30px;

    text-align:center;

    overflow:hidden;
}

.final-scene::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.04),
            transparent 60%
        );
}

.final-content{

    position:relative;
    z-index:2;

    max-width:1000px;

    margin:auto;
}

.final-line{

    font-size:
        clamp(34px,5vw,70px);

    font-weight:800;

    line-height:1.25;

    margin-bottom:40px;

    opacity:0;
}

.final-message{

    margin-top:100px;

    font-size:
        clamp(60px,8vw,120px);

    font-weight:900;

    letter-spacing:-4px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #9ee6ff
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.final-small{

    margin-top:25px;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;
}

.final-stars{

    position:absolute;

    inset:0;

    opacity:.25;
}

/* =====================================================
   REVEAL
===================================================== */

.reveal{

    opacity:0;

    transform:
        translateY(80px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.reveal.show{

    opacity:1;

    transform:none;
}

/* =====================================================
   INTRO EFFECTS
===================================================== */

.crack{

    position:absolute;

    width:260px;
    height:3px;

    background:white;

    opacity:0;

    transform-origin:left center;
}

.crack-1{
    transform:rotate(30deg);
}

.crack-2{
    transform:rotate(-40deg);
}

.crack-3{
    transform:rotate(80deg);
}

.shard{

    position:absolute;

    width:40px;
    height:40px;

    background:white;

    opacity:0;

    clip-path:
        polygon(
            0 0,
            100% 20%,
            80% 100%,
            20% 70%
        );
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes introText{

    0%{
        opacity:0;
        transform:
            translateY(30px);
    }

    20%,80%{
        opacity:1;
        transform:none;
    }

    100%{
        opacity:0;
        transform:
            translateY(-20px);
    }
}

@keyframes pulseGlow{

    0%,100%{
        opacity:.12;
    }

    50%{
        opacity:.25;
    }
}

@keyframes floatConfetti{

    from{

        transform:
            translateY(-120px)
            rotate(0deg);
    }

    to{

        transform:
            translateY(110vh)
            rotate(720deg);
    }
}

@keyframes floatPhoto{

    0%,100%{
        transform:
            translateY(0px);
    }

    50%{
        transform:
            translateY(-10px);
    }
}

@keyframes raysRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes achievementIn{

    0%{
        opacity:0;

        transform:
            translateX(120px);
    }

    100%{
        opacity:1;

        transform:
            translateX(0);
    }
}

@keyframes achievementOut{

    0%{
        opacity:1;
    }

    100%{

        opacity:0;

        transform:
            translateX(120px);
    }
}

@keyframes finalFade{

    from{

        opacity:0;

        transform:
            translateY(40px);
    }

    to{

        opacity:1;

        transform:none;
    }
}

@keyframes flashScreen{

    0%{
        opacity:0;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
    }
}

@keyframes ageExplode{

    0%{

        opacity:1;

        transform:
            scale(1);
    }

    100%{

        opacity:0;

        transform:
            scale(1.4)
            rotate(10deg);

        filter:
            blur(10px);
    }
}

@keyframes ageAppear{

    from{

        opacity:0;

        transform:
            scale(.6);

        filter:
            blur(20px);
    }

    to{

        opacity:1;

        transform:
            scale(1);

        filter:none;
    }
}

/* =====================================================
   SMALL DETAILS
===================================================== */

.hero-badge,
.card,
.special-card{

    position:relative;
}

.hero-badge::after,
.card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:900px){

    .memory-grid{
        grid-template-columns:1fr;
    }

    .quote-card p{
        font-size:20px;
    }

    .photo-placeholder{
        height:260px;
    }

    #achievementContainer{

        width:280px;

        right:10px;
        top:10px;
    }

    .achievement{

        font-size:13px;
    }
}

@media (max-width:600px){

    .hero h1{
        letter-spacing:-2px;
    }

    .hero-text{
        line-height:1.7;
    }

    .special-card{
        padding:28px;
    }

    .quote-card{
        padding:28px;
    }

    .final-message{
        letter-spacing:-2px;
    }
}

img {
    width: 100%;
    border-radius: 16px;
}