/* =====================================================
   LOVE YOU MISS
   STYLE.CSS — PART 2A
====================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;500;600&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

    width:100%;
    height:100vh;

    overflow:hidden;

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

    background:#09070b;

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

    position:relative;

    color:#ffd7ea;

}


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

.background{

    position:fixed;
    inset:0;

    overflow:hidden;

    z-index:-20;

    background:

    radial-gradient(circle at top,
    #311223 0%,
    #180915 35%,
    #09070b 70%,
    #050505 100%);

}


/* ===============================
   GLOW CIRCLES
================================ */

.pink-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.35;

    animation:pulseGlow 10s ease-in-out infinite;

}

.glow1{

    width:450px;
    height:450px;

    left:-120px;
    top:-120px;

    background:#ff4fa4;

}

.glow2{

    width:380px;
    height:380px;

    right:-120px;
    top:25%;

    background:#ff78bd;

    animation-delay:2s;

}

.glow3{

    width:420px;
    height:420px;

    bottom:-170px;
    left:35%;

    background:#ff5cab;

    animation-delay:5s;

}



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

.hero{

    width:100%;
    height:100vh;

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

    padding:20px;

}


.content{

    position:relative;

    text-align:center;

    z-index:20;

}



/* ===============================
   MAIN HEADING
================================ */

h1{

    font-family:'Great Vibes',cursive;

    font-weight:400;

    line-height:1;

    color:#ffd7eb;

    font-size:clamp(90px,12vw,180px);

    letter-spacing:3px;

    text-shadow:

    0 0 10px #ff9dcb,

    0 0 25px #ff79bb,

    0 0 55px #ff4da3,

    0 0 90px #ff2d90;

    animation:

    headingFloat 5s ease-in-out infinite,

    headingGlow 3s ease-in-out infinite alternate;

}


/* MISS */

h1 span{

    display:block;

    margin-top:15px;

    font-size:clamp(70px,8vw,125px);

    color:#ffe7f4;

}



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

.line{

    width:240px;

    height:2px;

    margin:35px auto;

    border-radius:50px;

    background:

    linear-gradient(
    to right,

    transparent,

    #ff7ebd,

    #ffd7ea,

    #ff7ebd,

    transparent);

    box-shadow:

    0 0 15px #ff8fc8,

    0 0 35px #ff4da3;

}



/* ===============================
   SIGNATURE
================================ */

.signature{

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

    color:#ffd3e7;

    letter-spacing:2px;

    font-style:italic;

    opacity:.95;

    text-shadow:

    0 0 8px #ff8bc6;

}



.name{

    margin-top:12px;

    font-size:clamp(24px,3vw,36px);

    font-weight:500;

    color:#fff1f7;

    letter-spacing:2px;

    text-shadow:

    0 0 12px #ff7cbf,

    0 0 22px #ff53a5;

}



/* ===============================
   PARTICLE LAYERS
================================ */

#particles,
#hearts,
#stars{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}



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

#cursorGlow{

    position:fixed;

    width:180px;
    height:180px;

    border-radius:50%;

    pointer-events:none;

    background:

    radial-gradient(circle,
    rgba(255,140,190,.35),
    rgba(255,120,180,.12),
    transparent);

    filter:blur(25px);

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

    z-index:100;

}



/* ===============================
   BOTTOM LIGHT
================================ */

.bottom-light{

    position:absolute;

    left:50%;

    bottom:-170px;

    transform:translateX(-50%);

    width:700px;

    height:350px;

    background:

    radial-gradient(circle,
    rgba(255,100,170,.45),
    rgba(255,100,170,.12),
    transparent);

    filter:blur(80px);

    z-index:-5;

}



/* ===============================
   RESPONSIVE
================================ */

@media (max-width:992px){

    h1{

        font-size:110px;

    }

    h1 span{

        font-size:85px;

    }

}


@media (max-width:768px){

    h1{

        font-size:82px;

    }

    h1 span{

        font-size:62px;

    }

    .line{

        width:180px;

    }

}


@media (max-width:480px){

    h1{

        font-size:60px;

    }

    h1 span{

        font-size:45px;

    }

    .signature{

        font-size:16px;

    }

    .name{

        font-size:22px;

    }

}



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

@keyframes headingFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}


@keyframes headingGlow{

    from{

        text-shadow:

        0 0 10px #ff9dcb,

        0 0 25px #ff79bb,

        0 0 50px #ff4da3;

    }

    to{

        text-shadow:

        0 0 18px #ffd4e8,

        0 0 45px #ff89c5,

        0 0 80px #ff5ba8,

        0 0 130px #ff2d90;

    }

}


@keyframes pulseGlow{

    0%{

        transform:scale(1);

        opacity:.25;

    }

    50%{

        transform:scale(1.18);

        opacity:.45;

    }

    100%{

        transform:scale(1);

        opacity:.25;

    }

}

/* =====================================================
   STYLE.CSS — PART 2B-1
   Paste directly below Part 2A
======================================================*/


/* ==========================================
   PARTICLES
========================================== */

.particle{

    position:absolute;

    border-radius:50%;

    background:#ffc7df;

    pointer-events:none;

    opacity:.8;

    box-shadow:
    0 0 6px #ffc7df,
    0 0 12px #ff9dc7,
    0 0 20px #ff6fb2;

    animation-name:particleFloat;

    animation-timing-function:linear;

    animation-iteration-count:infinite;

}


.particle.small{

    width:2px;
    height:2px;

}

.particle.medium{

    width:4px;
    height:4px;

}

.particle.large{

    width:7px;
    height:7px;

}



/* ==========================================
   HEARTS
========================================== */

.heart{

    position:absolute;

    color:#ffb7d9;

    font-size:16px;

    opacity:.18;

    filter:

    drop-shadow(0 0 8px #ff8fc6)

    drop-shadow(0 0 18px #ff5ba9);

    animation-name:heartFloat;

    animation-timing-function:linear;

    animation-iteration-count:infinite;

}



/* ==========================================
   STARS
========================================== */

.star{

    position:absolute;

    width:2px;

    height:2px;

    border-radius:50%;

    background:white;

    opacity:.7;

    box-shadow:

    0 0 6px white,

    0 0 14px #ffd6ea;

    animation:

    twinkle 3s ease-in-out infinite;

}



/* ==========================================
   EXTRA GLOW PARTICLES
========================================== */

.spark{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:#ffe3f3;

    opacity:.5;

    filter:blur(.5px);

    box-shadow:

    0 0 10px #fff,

    0 0 20px #ff8fc6;

    animation:

    sparkle 4s ease-in-out infinite;

}



/* ==========================================
   PARTICLE ANIMATION
========================================== */

@keyframes particleFloat{

    0%{

        transform:

        translateY(110vh)

        translateX(0px)

        scale(.6);

        opacity:0;

    }

    10%{

        opacity:.8;

    }

    50%{

        transform:

        translateY(40vh)

        translateX(35px)

        scale(1);

    }

    100%{

        transform:

        translateY(-20vh)

        translateX(70px)

        scale(.7);

        opacity:0;

    }

}



/* ==========================================
   HEART ANIMATION
========================================== */

@keyframes heartFloat{

    0%{

        transform:

        translateY(110vh)

        translateX(0px)

        rotate(0deg)

        scale(.7);

        opacity:0;

    }

    10%{

        opacity:.18;

    }

    50%{

        transform:

        translateY(50vh)

        translateX(25px)

        rotate(15deg)

        scale(1);

    }

    100%{

        transform:

        translateY(-20vh)

        translateX(-30px)

        rotate(-15deg)

        scale(1.2);

        opacity:0;

    }

}



/* ==========================================
   STAR TWINKLE
========================================== */

@keyframes twinkle{

    0%,100%{

        opacity:.15;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.8);

    }

}



/* ==========================================
   SPARKLE
========================================== */

@keyframes sparkle{

    0%,100%{

        opacity:.15;

        transform:scale(.6);

    }

    50%{

        opacity:.9;

        transform:scale(1.5);

    }

}



/* ==========================================
   RANDOM SLOW DRIFT
========================================== */

@keyframes slowDrift{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(20px);

    }

    100%{

        transform:translateX(0);

    }

}



/* Apply drifting */

#particles{

    animation:slowDrift 18s ease-in-out infinite;

}

#hearts{

    animation:slowDrift 25s ease-in-out infinite reverse;

}

#stars{

    animation:slowDrift 30s ease-in-out infinite;

}

/* =====================================================
   STYLE.CSS — PART 2B-2
   Paste directly below Part 2B-1
======================================================*/


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

#cursorGlow{

    transition:
        left .08s linear,
        top .08s linear,
        opacity .4s;

    mix-blend-mode:screen;

    animation:
        cursorPulse 3s ease-in-out infinite;

}


@keyframes cursorPulse{

    0%,100%{

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

        opacity:.75;

    }

    50%{

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

        opacity:1;

    }

}



/* ==========================================
   BACKGROUND SHIMMER
========================================== */

.background::before{

    content:"";

    position:absolute;

    inset:-30%;

    background:

    radial-gradient(circle,
    rgba(255,170,215,.10),
    transparent 60%);

    animation:

    shimmerMove 20s linear infinite;

}


.background::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,

        rgba(255,255,255,.015),

        transparent 30%,

        rgba(255,180,220,.02),

        transparent 70%

    );

    animation:

    shimmerMoveReverse 30s linear infinite;

}



@keyframes shimmerMove{

    from{

        transform:

        rotate(0deg)

        scale(1);

    }

    to{

        transform:

        rotate(360deg)

        scale(1.15);

    }

}



@keyframes shimmerMoveReverse{

    from{

        transform:

        rotate(360deg)

        scale(1);

    }

    to{

        transform:

        rotate(0deg)

        scale(1.12);

    }

}



/* ==========================================
   HERO FADE-IN
========================================== */

.content{

    animation:

    pageFade 2s ease;

}


@keyframes pageFade{

    from{

        opacity:0;

        transform:

        translateY(40px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



/* ==========================================
   SIGNATURE ANIMATION
========================================== */

.signature,
.name{

    animation:

    textFloat 6s ease-in-out infinite;

}


@keyframes textFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}



/* ==========================================
   GLOWING LINE
========================================== */

.line{

    animation:

    lineGlow 4s ease-in-out infinite;

}


@keyframes lineGlow{

    0%,100%{

        opacity:.65;

        transform:scaleX(.92);

    }

    50%{

        opacity:1;

        transform:scaleX(1.05);

    }

}



/* ==========================================
   DREAMY OVERLAY
========================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at center,

    rgba(255,180,220,.03),

    transparent 65%);

    animation:

    dreamPulse 12s ease-in-out infinite;

}


@keyframes dreamPulse{

    0%,100%{

        opacity:.35;

    }

    50%{

        opacity:.8;

    }

}



/* ==========================================
   VIGNETTE
========================================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    box-shadow:

    inset 0 0 180px rgba(0,0,0,.55);

}



/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#120813;

}

::-webkit-scrollbar-thumb{

    background:#ff7cbc;

    border-radius:20px;

}



/* ==========================================
   RESPONSIVE POLISH
========================================== */

@media(max-width:768px){

    .pink-glow{

        filter:blur(90px);

    }

    .bottom-light{

        width:420px;

    }

}



@media(max-width:480px){

    .pink-glow{

        filter:blur(70px);

    }

    #cursorGlow{

        width:120px;

        height:120px;

    }

}



/* ==========================================
   PERFORMANCE
========================================== */

.particle,
.heart,
.star,
.spark,
.pink-glow,
.content{

    will-change:transform,opacity;

}