/* ─── Reset & Base ─────────────────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
    font-family: 'BillyArgel';
    src: url('../CupidDeLocke-RqeW.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
    :root {
      --pink-light:   #ffd6e8;
      --pink-mid:     #ff6b9d;
      --pink-hot:     #ff1744;
      --pink-deep:    #c94b7d;
      --pink-dark:    #8b2c5a;
      --pink-darkest: #5a1838;
      --white:        #ffffff;
      --overlay:      rgba(0,0,0,.65);
      --glass:        rgba(255,255,255,.15);
      --font-display: 'Pacifico', cursive;
      --font-new-display: 'BillyArgel', cursive;
      /* --font-display: '', cursive; */
      /* --font-display: 'Chewy', cursive; */
      --font-body:    'Quicksand', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--pink-light);
      overflow-x: hidden;
      cursor: none;
    }

    /* ─── Custom Cursor ─────────────────────────────────── */
    .cursor {
      width: 18px; height: 18px;
      border: 2px solid var(--pink-hot);
      border-radius: 50%;
      position: fixed;
      pointer-events: none;
      z-index: 999999;
      transform: translate(-50%,-50%);
      transition: transform .08s ease;
      mix-blend-mode: difference;
    }

    .cursor-heart {
      position: fixed;
      pointer-events: none;
      z-index: 999998;
      font-size: 13px;
      animation: heartFade 1.4s forwards ease-out;
      transform: translate(-50%,-50%);
    }

    @keyframes heartFade {
      to { opacity: 0; transform: translate(-50%, -80px) scale(.3); }
    }

    /* ─── SCREEN 1 · Countdown ──────────────────────────── */
    #countdownScreen {
      position: fixed; inset: 0;
      background: linear-gradient(135deg, var(--pink-dark) 0%, var(--pink-deep) 50%, var(--pink-mid) 100%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      z-index: 100000;
      transition: opacity .9s ease, transform .9s ease;
    }

    #countdownScreen.hidden {
      opacity: 0; transform: scale(1.08); pointer-events: none;
    }

    .cd-particles {
      position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    }

    .cd-particle {
      position: absolute; font-size: 20px; opacity: .3;
      animation: floatParticle 14s infinite ease-in-out;
    }

    @keyframes floatParticle {
      0%,100% { transform: translateY(0) rotate(0deg); }
      25%      { transform: translateY(-90px) translateX(45px) rotate(90deg); }
      50%      { transform: translateY(-180px) translateX(-40px) rotate(180deg); }
      75%      { transform: translateY(-90px) translateX(45px) rotate(270deg); }
    }

    .cd-title {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 5vw, 3.2rem);
      color: var(--white);
      letter-spacing: 3px;
      font-weight: 300;
      margin-bottom: 55px;
      text-shadow: 0 0 40px rgba(255,255,255,.7);
      animation: titleGlow 2s ease-in-out infinite;
      z-index: 2; text-align: center; padding: 0 20px;
    }

    @keyframes titleGlow {
      0%,100% { text-shadow: 0 0 40px rgba(255,255,255,.7); }
      50%      { text-shadow: 0 0 80px rgba(255,255,255,1), 0 0 120px rgba(255,107,157,.5); }
    }

    .cd-timer {
      display: flex; gap: clamp(15px,4vw,40px); z-index: 2; flex-wrap: wrap; justify-content: center;
    }

    .time-unit {
      background: var(--glass);
      backdrop-filter: blur(18px);
      border: 2px solid rgba(255,255,255,.3);
      border-radius: 22px;
      padding: clamp(20px,4vw,40px) clamp(15px,3vw,30px);
      min-width: clamp(90px,14vw,140px);
      text-align: center;
      box-shadow: 0 8px 32px rgba(0,0,0,.1);
      animation: floatUnit 3s ease-in-out infinite;
    }

    .time-unit:nth-child(1) { animation-delay: 0s; }
    .time-unit:nth-child(2) { animation-delay: .2s; }
    .time-unit:nth-child(3) { animation-delay: .4s; }
    .time-unit:nth-child(4) { animation-delay: .6s; }

    @keyframes floatUnit {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-14px); }
    }

    .time-value {
      font-family: 'Courier New', monospace;
      font-size: clamp(2.5rem,6vw,5rem);
      font-weight: 700;
      color: var(--white);
      text-shadow: 0 0 50px rgba(255,107,157,1);
    }

    .time-label {
      font-size: clamp(.85rem,2vw,1.2rem);
      color: rgba(255,255,255,.9);
      margin-top: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
    }