:root{
      --pink-bg:#ffc4dd;
      --pink-soft:#ffd9e8;
      --pink:#ff5ea6;
      --pink-deep:#cc2c72;
      --blue:#64c8ff;
      --blue-deep:#1698dc;
      --blue-soft:#c7ecff;
      --cream:#fff8ee;
      --ink:#202033;
      --yellow:#ffe66e;
      --white:#fff;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      font-family:Inter,system-ui,sans-serif;
      background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.55), transparent 18%),
        radial-gradient(circle at 86% 20%, rgba(100,200,255,.28), transparent 22%),
        radial-gradient(circle at 22% 82%, rgba(255,255,255,.24), transparent 20%),
        linear-gradient(180deg,#ffd4e6 0%,var(--pink-bg) 45%,#ffc0db 100%);
      overflow-x:hidden;
    }

    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none; z-index:1000;
      opacity:.075;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.42'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    ::selection{background:var(--blue);color:white}

    .site{
      position:relative;
      min-height:100vh;
      isolation:isolate;
    }

    .orb{
      position:fixed;
      pointer-events:none;
      z-index:-1;
      filter:blur(1px);
      opacity:.55;
      animation:floatOrb 16s ease-in-out infinite;
    }
    .orb.one{
      width:330px;height:260px;left:-80px;top:110px;
      background:rgba(255,255,255,.58);
      border-radius:60% 40% 57% 43% / 45% 55% 45% 55%;
    }
    .orb.two{
      width:260px;height:300px;right:-75px;top:300px;
      background:rgba(100,200,255,.34);
      border-radius:42% 58% 48% 52% / 56% 44% 56% 44%;
      animation-delay:-5s;
    }
    .orb.three{
      width:280px;height:220px;left:12%;bottom:100px;
      background:rgba(255,255,255,.24);
      border-radius:56% 44% 50% 50% / 42% 58% 42% 58%;
      animation-delay:-9s;
    }
    @keyframes floatOrb{
      50%{transform:translateY(-14px) rotate(4deg)}
    }

    .nav{
      position:fixed;
      z-index:50;
      left:50%;
      top:16px;
      transform:translateX(-50%);
      width:min(1180px,calc(100% - 28px));
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      padding:10px 14px 10px 18px;
      background:rgba(255,255,255,.28);
      border:1px solid rgba(255,255,255,.45);
      backdrop-filter:blur(16px);
      border-radius:999px;
      box-shadow:0 12px 35px rgba(120,27,73,.08);
    }

    .brand{
      display:flex;align-items:center;gap:10px;
      font-family:"Patrick Hand",cursive;
      font-size:24px;
    }
    .brand-mark{
      width:34px;height:22px;
      background:var(--blue);
      border-radius:50% 46% 54% 50% / 58% 42% 58% 42%;
      transform:rotate(-10deg);
      box-shadow:18px 3px 0 var(--pink);
      margin-right:18px;
    }

    .nav-links{
      display:flex;gap:16px;align-items:center;
    }
    .nav a,.nav button{
      border:none;
      background:none;
      text-decoration:none;
      color:var(--ink);
      font-size:11px;
      font-weight:900;
      letter-spacing:.13em;
      text-transform:uppercase;
      cursor:pointer;
      padding:8px 2px;
      position:relative;
    }
    .nav a::after,.nav button::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:1px;
      height:2px;
      background:linear-gradient(90deg,var(--pink),var(--blue));
      transform:scaleX(0);
      transform-origin:left;
      transition:.25s;
    }
    .nav a:hover::after,.nav button:hover::after{transform:scaleX(1)}

    .hero{
      min-height:100svh;
      display:flex;
      align-items:center;
      padding:120px 22px 56px;
      position:relative;
      overflow:hidden;
    }

    .wrap{
      width:min(1180px,100%);
      margin:0 auto;
    }

    .hero-layout{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:34px;
      align-items:center;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.16em;
      margin-bottom:18px;
    }
    .eyebrow::before{
      content:"";
      width:38px;height:3px;
      background:var(--blue);
      border-radius:999px;
      transform:rotate(-4deg);
    }

    .hero h1{
      margin:0;
      font-size:clamp(78px,11vw,154px);
      line-height:.75;
      text-transform:uppercase;
      letter-spacing:-.075em;
      font-weight:900;
    }
    .hero h1 .pinkword{
      display:block;
      color:#fffafc;
      text-shadow:0 12px 28px rgba(204,44,114,.12);
    }
    .hero h1 .blueword{
      display:block;
      color:var(--blue);
      margin-left:clamp(0px,5vw,70px);
      text-shadow:0 12px 28px rgba(22,152,220,.12);
    }

    .hero-copy{
      max-width:620px;
      margin-top:24px;
      font-family:"Patrick Hand",cursive;
      font-size:clamp(22px,2.2vw,30px);
      line-height:1.25;
    }

    .hero-actions{
      margin-top:28px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .pill{
      border:none;
      border-radius:999px;
      padding:14px 20px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.11em;
      text-transform:uppercase;
      cursor:pointer;
      text-decoration:none;
      transition:.25s ease;
    }
    .pill.dark{
      background:var(--ink);
      color:white;
      box-shadow:0 10px 25px rgba(32,32,51,.12);
    }
    .pill.light{
      background:rgba(255,255,255,.62);
      color:var(--ink);
      backdrop-filter:blur(8px);
    }
    .pill:hover{transform:translateY(-3px)}

    .hero-art{
      position:relative;
      min-height:610px;
    }

    .main-photo{
      position:absolute;
      left:50%;
      top:49%;
      transform:translate(-50%,-50%) rotate(-4deg);
      width:min(430px,80vw);
      aspect-ratio:4/5;
      padding:18px;
      background:var(--cream);
      border-radius:47% 53% 42% 58% / 38% 46% 54% 62%;
      box-shadow:0 25px 65px rgba(132,31,77,.18);
      transition:transform .18s ease;
    }

    .main-photo::before{
      content:"";
      position:absolute;
      width:102px;height:28px;
      left:50%;top:-7px;
      transform:translateX(-50%) rotate(-4deg);
      background:rgba(255,242,176,.88);
      border-radius:7px;
      box-shadow:0 3px 9px rgba(0,0,0,.04);
    }

    .main-photo-inner{
      width:100%;
      height:100%;
      border-radius:44% 56% 40% 60% / 35% 46% 54% 65%;
      overflow:hidden;
      position:relative;
      background:
        radial-gradient(circle at 26% 24%, rgba(255,94,166,.88) 0 11%, transparent 11.5%),
        radial-gradient(circle at 74% 25%, rgba(100,200,255,.95) 0 10%, transparent 10.5%),
        radial-gradient(circle at 55% 74%, rgba(255,230,110,.9) 0 13%, transparent 13.5%),
        linear-gradient(180deg,#e7f7ff,#bce7ff);
    }

    .main-photo-inner::after{
      content:"YOUR PHOTO";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-weight:900;
      font-size:12px;
      letter-spacing:.18em;
      color:rgba(32,32,51,.58);
    }

    .doodle{
      position:absolute;
      font-family:"Patrick Hand",cursive;
      line-height:1;
      color:var(--ink);
    }
    .doodle.one{
      left:0;top:7%;
      font-size:29px;
      transform:rotate(-7deg);
    }
    .doodle.two{
      right:2%;top:15%;
      font-size:23px;
      transform:rotate(8deg);
    }
    .doodle.three{
      left:2%;bottom:10%;
      font-size:24px;
      transform:rotate(-5deg);
    }

    .soft-dot{
      position:absolute;
      border-radius:50%;
      display:grid;
      place-items:center;
      text-align:center;
      font-weight:800;
      box-shadow:0 12px 28px rgba(0,0,0,.07);
    }
    .soft-dot.a{
      width:126px;height:126px;
      background:white;
      right:5%;bottom:15%;
      color:var(--pink-deep);
      transform:rotate(8deg);
      font-size:14px;
    }
    .soft-dot.b{
      width:138px;height:138px;
      background:var(--blue);
      left:4%;bottom:26%;
      color:white;
      transform:rotate(-7deg);
      font-size:15px;
    }
    .soft-dot.c{
      width:74px;height:74px;
      background:var(--yellow);
      right:18%;top:40%;
      font-size:24px;
      transform:rotate(-7deg);
    }

    .stroke{
      position:absolute;
      border-top:5px solid rgba(204,44,114,.48);
      border-radius:50%;
    }
    .stroke.a{
      width:130px;height:46px;
      left:9%;top:30%;
      transform:rotate(-26deg);
    }
    .stroke.b{
      width:120px;height:40px;
      right:11%;top:61%;
      border-color:rgba(22,152,220,.5);
      transform:rotate(20deg);
    }

    section{
      position:relative;
      padding:100px 22px;
    }

    .kicker{
      font-size:11px;
      font-weight:900;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:12px;
    }

    .section-title{
      margin:0;
      max-width:960px;
      font-family:"DM Serif Display",serif;
      font-size:clamp(42px,6.4vw,86px);
      line-height:.97;
      letter-spacing:-.045em;
      font-weight:400;
    }
    .section-title em{
      color:var(--blue-deep);
      font-weight:400;
    }

    .section-note{
      margin-top:20px;
      max-width:610px;
      font-family:"Patrick Hand",cursive;
      font-size:26px;
      line-height:1.2;
    }

    .memories{
      padding-top:80px;
    }

    .memory-stage{
      margin-top:52px;
      min-height:650px;
      position:relative;
    }

    .memory-photo{
      position:absolute;
      width:280px;
      aspect-ratio:1/1;
      padding:12px;
      background:rgba(255,248,238,.94);
      box-shadow:0 18px 45px rgba(112,27,69,.12);
      cursor:pointer;
      transition:.28s ease;
    }

    .memory-photo:nth-child(1){
      left:2%;top:40px;
      border-radius:58% 42% 55% 45% / 48% 52% 48% 52%;
      transform:rotate(-9deg);
    }
    .memory-photo:nth-child(2){
      left:29%;top:0;
      border-radius:43% 57% 48% 52% / 56% 44% 56% 44%;
      transform:rotate(6deg);
    }
    .memory-photo:nth-child(3){
      right:20%;top:92px;
      border-radius:53% 47% 38% 62% / 40% 60% 40% 60%;
      transform:rotate(-3deg);
    }
    .memory-photo:nth-child(4){
      right:0;bottom:34px;
      border-radius:47% 53% 59% 41% / 56% 44% 56% 44%;
      transform:rotate(9deg);
    }
    .memory-photo:nth-child(5){
      left:14%;bottom:20px;
      border-radius:60% 40% 47% 53% / 43% 57% 43% 57%;
      transform:rotate(-4deg);
    }

    .memory-photo:hover{
      transform:rotate(0deg) translateY(-7px)!important;
      z-index:20;
    }

    .memory-photo input{display:none}
    .memory-photo .pic{
      width:100%;height:100%;
      overflow:hidden;
      position:relative;
      background:linear-gradient(180deg,#dff4ff,#b8e4fb);
      border-radius:inherit;
    }
    .memory-photo .pic::after{
      content:"click to add photo";
      position:absolute;inset:0;
      display:grid;place-items:center;
      font-size:10px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:rgba(32,32,51,.55);
    }

    .memory-caption{
      position:absolute;
      font-family:"Patrick Hand",cursive;
      font-size:24px;
      color:var(--ink);
    }
    .mc1{left:48%;top:44%;transform:rotate(-5deg)}
    .mc2{left:46%;bottom:7%;transform:rotate(4deg)}
    .mc3{right:5%;top:8%;transform:rotate(8deg)}

    .wishes{
      padding-top:70px;
    }

    .wish-flow{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:28px;
      margin-top:56px;
      align-items:start;
    }

    .wish{
      position:relative;
      min-height:300px;
      padding:34px 30px;
    }

    .wish::before{
      content:"";
      position:absolute;inset:0;
      z-index:-1;
      box-shadow:0 16px 40px rgba(103,30,65,.1);
    }
    .wish:nth-child(1)::before{
      background:rgba(255,255,255,.5);
      border-radius:57% 43% 53% 47% / 44% 56% 44% 56%;
      transform:rotate(-2deg);
    }
    .wish:nth-child(2)::before{
      background:rgba(100,200,255,.28);
      border-radius:42% 58% 46% 54% / 53% 47% 53% 47%;
      transform:rotate(2deg);
    }
    .wish:nth-child(3)::before{
      background:rgba(255,230,110,.48);
      border-radius:54% 46% 43% 57% / 46% 54% 46% 54%;
      transform:rotate(-1deg);
    }

    .wish-index{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.15em;
      font-weight:900;
    }
    .wish h3{
      margin:58px 0 14px;
      font-family:"DM Serif Display",serif;
      font-size:40px;
      line-height:.98;
      font-weight:400;
    }
    .wish p{
      margin:0;
      line-height:1.8;
      font-size:15px;
    }

    .letter-zone{
      margin-top:56px;
      display:grid;
      grid-template-columns:.75fr 1.25fr;
      gap:38px;
      align-items:start;
    }

    .letter-aside{
      font-family:"Patrick Hand",cursive;
      font-size:28px;
      line-height:1.2;
      transform:rotate(-4deg);
      padding-top:22px;
    }
    .letter-aside .heart{
      display:block;
      font-size:84px;
      color:var(--pink);
      line-height:.8;
      margin-bottom:12px;
    }

    .letter-paper{
      position:relative;
      padding:44px clamp(26px,5vw,58px);
      background:rgba(255,248,238,.92);
      border-radius:38px 42px 34px 46px / 32px 42px 38px 48px;
      box-shadow:0 20px 54px rgba(111,27,68,.13);
      overflow:hidden;
    }

    .letter-paper::before{
      content:"";
      position:absolute;
      left:26px;top:0;bottom:0;
      width:2px;
      background:rgba(255,94,166,.34);
    }
    .letter-paper::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:repeating-linear-gradient(
        transparent 0px,
        transparent 35px,
        rgba(100,200,255,.14) 36px
      );
    }

    .letter-paper > *{position:relative;z-index:2}
    .letter-paper h3{
      margin:0 0 18px 10px;
      font-family:"Patrick Hand",cursive;
      font-size:42px;
      font-weight:400;
    }
    .letter-paper p{
      margin:0 0 16px 10px;
      font-family:"Patrick Hand",cursive;
      font-size:22px;
      line-height:36px;
    }
    .signature{
      text-align:right;
      font-family:"DM Serif Display",serif;
      font-style:italic;
      font-size:30px;
      color:var(--pink-deep);
      margin-top:18px;
    }

    .surprise{
      min-height:760px;
      display:flex;
      align-items:center;
    }

    .cake-stage{
      position:relative;
      min-height:470px;
      display:grid;
      place-items:center;
      margin-top:42px;
    }

    .cake-note{
      position:absolute;
      top:10px;
      right:12%;
      font-family:"Patrick Hand",cursive;
      font-size:25px;
      transform:rotate(5deg);
    }

    .cake{
      position:relative;
      width:300px;
      height:300px;
      cursor:pointer;
      transition:.25s ease;
      filter:drop-shadow(0 16px 28px rgba(109,29,69,.1));
    }
    .cake:hover{transform:translateY(-5px)}

    .plate{
      position:absolute;
      left:20px;
      bottom:0;
      width:260px;
      height:28px;
      border-radius:50%;
      background:white;
    }

    .layer{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      border-radius:24px 24px 12px 12px;
    }

    .layer.bottom{
      bottom:27px;
      width:230px;
      height:90px;
      background:var(--blue);
    }
    .layer.top{
      bottom:112px;
      width:170px;
      height:72px;
      background:var(--cream);
    }
    .icing{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:160px;
      width:176px;
      height:31px;
      border-radius:50%;
      background:var(--pink-soft);
    }

    .candles{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:184px;
      display:flex;
      gap:22px;
    }
    .candle{
      width:14px;
      height:64px;
      border-radius:8px;
      background:repeating-linear-gradient(45deg,#fff 0 8px,#f1c9dc 8px 16px);
      position:relative;
    }
    .flame{
      position:absolute;
      width:20px;height:30px;
      left:50%;top:-32px;
      transform:translateX(-50%) rotate(45deg);
      border-radius:70% 30% 62% 38%;
      background:var(--yellow);
      animation:flicker .7s infinite alternate;
      transition:.3s;
    }
    @keyframes flicker{
      to{transform:translateX(-50%) rotate(40deg) scale(.9)}
    }
    .cake.blown .flame{
      opacity:0;
      transform:translateX(-50%) translateY(-12px) scale(.1);
    }

    .finale{
      min-height:86vh;
      display:grid;
      place-items:center;
      text-align:center;
    }

    .final-big{
      margin:0;
      font-size:clamp(82px,14vw,188px);
      line-height:.74;
      letter-spacing:-.08em;
      text-transform:uppercase;
      font-weight:900;
    }
    .final-big .one{display:block;color:#fff}
    .final-big .two{display:block;color:var(--blue)}
    .final-note{
      margin-top:24px;
      font-family:"Patrick Hand",cursive;
      font-size:30px;
    }

    .footer{
      padding:28px 20px 38px;
      text-align:center;
      font-size:11px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.62;
    }

    .float-heart{
      position:fixed;
      bottom:-40px;
      z-index:120;
      pointer-events:none;
      animation:rise var(--dur) linear forwards;
    }
    @keyframes rise{
      to{
        transform:translate(var(--drift),-115vh) rotate(360deg);
        opacity:0;
      }
    }

    .confetti{
      position:fixed;
      top:-20px;
      width:10px;height:16px;
      border-radius:4px;
      z-index:150;
      pointer-events:none;
      animation:fall var(--dur) linear forwards;
    }
    @keyframes fall{
      to{
        transform:translate(var(--x),110vh) rotate(var(--rot));
        opacity:.8;
      }
    }

    .modal{
      position:fixed;
      inset:0;
      z-index:220;
      display:none;
      place-items:center;
      padding:22px;
      background:rgba(32,32,51,.82);
    }
    .modal.show{display:grid}
    .modal-card{
      width:min(760px,95vw);
      padding:14px;
      border-radius:28px;
      background:white;
      box-shadow:0 30px 90px rgba(0,0,0,.28);
    }
    .modal-card img{
      width:100%;
      max-height:78vh;
      object-fit:contain;
      border-radius:18px;
      display:block;
      background:var(--blue-soft);
    }
    .modal-close{
      border:none;
      margin-top:12px;
      border-radius:999px;
      padding:11px 16px;
      background:var(--ink);
      color:white;
      font-weight:800;
      cursor:pointer;
    }

    .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
    }
    .reveal.show{
      opacity:1;
      transform:none;
    }

    @media(max-width:980px){
      .hero-layout,.letter-zone{grid-template-columns:1fr}
      .hero-art{min-height:520px}
      .memory-stage{min-height:950px}
      .memory-photo:nth-child(1){left:3%;top:0}
      .memory-photo:nth-child(2){right:2%;left:auto;top:130px}
      .memory-photo:nth-child(3){left:8%;right:auto;top:380px}
      .memory-photo:nth-child(4){right:4%;bottom:130px}
      .memory-photo:nth-child(5){left:7%;bottom:0}
      .wish-flow{grid-template-columns:1fr}
      .cake-note{right:auto;left:50%;transform:translateX(-50%) rotate(3deg)}
    }

    @media(max-width:640px){
      .nav{
        align-items:flex-start;
      }
      .nav-links a{display:none}
      .brand{font-size:21px}
      .hero{padding-top:105px}
      .hero h1{font-size:clamp(62px,18vw,100px)}
      .hero h1 .blueword{margin-left:0}
      .hero-art{min-height:440px}
      .main-photo{width:290px}
      .soft-dot.a{width:90px;height:90px;font-size:11px}
      .soft-dot.b{width:100px;height:100px;font-size:12px}
      .soft-dot.c{width:66px;height:66px}
      .doodle.one{font-size:21px}
      .doodle.two,.doodle.three{font-size:18px}
      section{padding:76px 16px}
      .memory-stage{min-height:1050px}
      .memory-photo{width:220px}
      .memory-photo:nth-child(1){left:0;top:0}
      .memory-photo:nth-child(2){right:0;top:190px}
      .memory-photo:nth-child(3){left:0;top:420px}
      .memory-photo:nth-child(4){right:0;bottom:190px}
      .memory-photo:nth-child(5){left:6px;bottom:0}
      .mc1,.mc2,.mc3{display:none}
      .letter-paper{padding:34px 20px}
      .letter-paper p{font-size:19px;line-height:33px}
      .final-note{font-size:24px}
    }

    /* =========================================================
       LOCKED BIRTHDAY INTRO — visible until 19/09/2026 00:00 UTC+7
       ========================================================= */
    body.countdown-lock{
      overflow:hidden !important;
    }

    body.countdown-lock .site{
      display:none !important;
    }

    body.birthday-unlocked .site{
      display:block !important;
      animation:siteArrive 1.15s cubic-bezier(.18,.8,.22,1) both;
    }

    @keyframes siteArrive{
      from{opacity:0;filter:blur(14px);transform:scale(1.025)}
      to{opacity:1;filter:blur(0);transform:scale(1)}
    }

    #birthdayGate{
      position:fixed;
      inset:0;
      z-index:5000;
      display:grid;
      place-items:center;
      overflow:hidden;
      background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.56), transparent 20%),
        radial-gradient(circle at 85% 18%, rgba(100,200,255,.34), transparent 24%),
        radial-gradient(circle at 28% 88%, rgba(255,255,255,.28), transparent 23%),
        linear-gradient(160deg,#ffd8e8 0%,#ffc0da 44%,#f7aacb 100%);
      color:var(--ink);
      transition:
        opacity 1.1s cubic-bezier(.2,.8,.2,1),
        filter 1.1s cubic-bezier(.2,.8,.2,1),
        transform 1.1s cubic-bezier(.2,.8,.2,1);
    }

    #birthdayGate::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.075;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='gnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gnoise)' opacity='.42'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    #birthdayGate.gate-leaving{
      opacity:0;
      filter:blur(18px);
      transform:scale(1.045);
      pointer-events:none;
    }

    .gate-orbit{
      position:absolute;
      border-radius:50%;
      pointer-events:none;
      mix-blend-mode:soft-light;
      animation:gateFloat 10s ease-in-out infinite;
    }
    .gate-orbit.o1{
      width:340px;height:340px;
      left:-130px;top:-90px;
      border:2px solid rgba(255,255,255,.65);
    }
    .gate-orbit.o2{
      width:470px;height:470px;
      right:-210px;bottom:-180px;
      border:2px solid rgba(100,200,255,.62);
      animation-delay:-3s;
    }
    .gate-orbit.o3{
      width:95px;height:95px;
      right:17%;top:12%;
      background:var(--blue);
      opacity:.36;
      animation-delay:-6s;
    }
    .gate-orbit.o4{
      width:58px;height:58px;
      left:12%;bottom:18%;
      background:#fff;
      opacity:.55;
      animation-delay:-2s;
    }

    @keyframes gateFloat{
      50%{transform:translateY(-13px) rotate(7deg)}
    }

    .gate-doodle{
      position:absolute;
      font-family:"Patrick Hand",cursive;
      color:rgba(32,32,51,.7);
      pointer-events:none;
      user-select:none;
    }
    .gate-doodle.d1{
      left:7%;top:17%;
      font-size:27px;
      transform:rotate(-9deg);
    }
    .gate-doodle.d2{
      right:7%;bottom:17%;
      font-size:24px;
      transform:rotate(8deg);
    }

    .gate-shell{
      position:relative;
      z-index:3;
      width:min(980px,calc(100% - 38px));
      text-align:center;
      padding:30px 10px;
    }

    .gate-date{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.18em;
      text-transform:uppercase;
      margin-bottom:34px;
    }

    .gate-date::before,
    .gate-date::after{
      content:"";
      width:34px;height:2px;
      border-radius:999px;
    }
    .gate-date::before{background:var(--pink-deep)}
    .gate-date::after{background:var(--blue-deep)}

    .gate-kicker{
      font-family:"Patrick Hand",cursive;
      font-size:clamp(23px,3vw,34px);
      margin-bottom:15px;
      opacity:.84;
    }

    .gate-title{
      margin:0;
      font-size:clamp(48px,7vw,96px);
      line-height:.9;
      letter-spacing:-.055em;
      font-weight:900;
      text-transform:uppercase;
    }

    .gate-title .wait-white{
      color:#fffafc;
      display:block;
    }
    .gate-title .wait-blue{
      color:var(--blue);
      display:block;
      font-family:"DM Serif Display",serif;
      font-style:italic;
      font-weight:400;
      text-transform:none;
      letter-spacing:-.035em;
      margin-top:8px;
    }

    .countdown{
      margin:clamp(46px,7vh,74px) auto 0;
      display:flex;
      justify-content:center;
      align-items:flex-start;
      gap:clamp(10px,2.5vw,34px);
      width:min(900px,100%);
    }

    .count-unit{
      min-width:clamp(64px,14vw,150px);
      position:relative;
    }

    .count-number{
      font-size:clamp(54px,10vw,126px);
      line-height:.82;
      letter-spacing:-.07em;
      font-weight:900;
      font-variant-numeric:tabular-nums;
      color:#fff;
      text-shadow:0 14px 30px rgba(130,31,76,.13);
      transition:transform .18s ease,opacity .18s ease;
    }

    .count-unit:nth-child(even) .count-number{
      color:var(--blue);
    }

    .count-number.tick{
      transform:translateY(-4px);
      opacity:.65;
    }

    .count-label{
      margin-top:13px;
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.22em;
      font-weight:900;
      opacity:.63;
    }

    .count-separator{
      padding-top:clamp(9px,1.3vw,19px);
      font-family:"DM Serif Display",serif;
      font-style:italic;
      font-size:clamp(34px,6vw,72px);
      color:var(--pink-deep);
      opacity:.4;
    }

    .gate-bottom{
      margin-top:45px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      font-family:"Patrick Hand",cursive;
      font-size:20px;
      opacity:.72;
    }

    .gate-pulse{
      width:7px;height:7px;
      border-radius:50%;
      background:var(--blue-deep);
      box-shadow:0 0 0 0 rgba(22,152,220,.34);
      animation:pulseDot 1.8s infinite;
    }

    @keyframes pulseDot{
      70%{box-shadow:0 0 0 13px rgba(22,152,220,0)}
      100%{box-shadow:0 0 0 0 rgba(22,152,220,0)}
    }

    /* Birthday message sequence after countdown */
    .birthday-sequence{
      position:absolute;
      inset:0;
      z-index:6;
      display:grid;
      place-items:center;
      text-align:center;
      padding:24px;
      opacity:0;
      pointer-events:none;
      visibility:hidden;
    }

    #birthdayGate.sequence-mode .gate-shell{
      opacity:0;
      transform:scale(.97);
      filter:blur(10px);
      transition:opacity .65s ease,transform .65s ease,filter .65s ease;
      pointer-events:none;
    }

    #birthdayGate.sequence-mode .birthday-sequence{
      opacity:1;
      visibility:visible;
    }

    .sequence-inner{
      width:min(900px,100%);
      min-height:240px;
      display:grid;
      place-items:center;
      position:relative;
    }

    .sequence-line{
      position:absolute;
      margin:0;
      max-width:880px;
      opacity:0;
      transform:translateY(18px) scale(.985);
      filter:blur(8px);
      transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
      font-family:"DM Serif Display",serif;
      font-size:clamp(38px,6.7vw,88px);
      line-height:1.02;
      letter-spacing:-.035em;
      font-weight:400;
    }

    .sequence-line.hand{
      font-family:"Patrick Hand",cursive;
      font-size:clamp(35px,5vw,65px);
      letter-spacing:0;
    }

    .sequence-line.blue{
      color:var(--blue-deep);
      font-style:italic;
    }

    .sequence-line.show{
      opacity:1;
      transform:translateY(0) scale(1);
      filter:blur(0);
    }

    .sequence-line.hide{
      opacity:0;
      transform:translateY(-16px) scale(.99);
      filter:blur(7px);
    }

    .birthday-flash{
      position:absolute;
      inset:0;
      z-index:5;
      background:white;
      opacity:0;
      pointer-events:none;
    }

    #birthdayGate.flash .birthday-flash{
      animation:birthdayFlash .85s ease both;
    }

    @keyframes birthdayFlash{
      0%{opacity:0}
      18%{opacity:.9}
      100%{opacity:0}
    }

    @media(max-width:640px){
      .gate-shell{
        width:min(100% - 24px,980px);
      }
      .gate-date{
        margin-bottom:28px;
      }
      .gate-title{
        font-size:clamp(43px,13vw,72px);
      }
      .countdown{
        gap:6px;
        margin-top:48px;
      }
      .count-unit{
        min-width:58px;
      }
      .count-number{
        font-size:clamp(48px,16vw,76px);
      }
      .count-label{
        font-size:8px;
        letter-spacing:.12em;
      }
      .count-separator{
        padding-top:7px;
        font-size:36px;
      }
      .gate-doodle.d1{
        left:4%;top:11%;font-size:20px;
      }
      .gate-doodle.d2{
        right:4%;bottom:10%;font-size:19px;
      }
      .sequence-line{
        font-size:clamp(36px,11vw,60px);
      }
      .sequence-line.hand{
        font-size:clamp(34px,10vw,54px);
      }
    }


/* =========================================================
   PERFORMANCE PASS v1
   Keeps the visual language while reducing expensive repaint/compositing.
   ========================================================= */

/* The fixed SVG noise + blend mode forced full-screen compositing while scrolling. */
body::before{
  display:none !important;
}

/* Decorative blobs scroll with the page instead of creating permanent fixed layers. */
.orb{
  position:absolute !important;
  filter:none !important;
  will-change:transform;
}

/* Fixed navigation remains visually translucent without live backdrop sampling. */
.nav{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.pill.light{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Don't paint the long lower page until it approaches the viewport. */
section:not(.hero){
  content-visibility:auto;
  contain-intrinsic-size:900px;
}

/* Avoid rasterizing the entire website through a blur when it unlocks. */
@keyframes siteArrive{
  from{opacity:0;transform:scale(1.012)}
  to{opacity:1;transform:scale(1)}
}

body.birthday-unlocked .site{
  animation:siteArrive .8s cubic-bezier(.18,.8,.22,1) both !important;
}

#birthdayGate{
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1) !important;
}

#birthdayGate::before{
  opacity:.045 !important;
  mix-blend-mode:normal !important;
}

#birthdayGate.gate-leaving{
  opacity:0 !important;
  filter:none !important;
  transform:scale(1.018) !important;
}

.gate-orbit{
  mix-blend-mode:normal !important;
  will-change:transform;
}

#birthdayGate.sequence-mode .gate-shell{
  opacity:0 !important;
  transform:scale(.985) !important;
  filter:none !important;
  transition:opacity .48s ease, transform .48s ease !important;
}

.sequence-line{
  filter:none !important;
  transition:opacity .58s ease, transform .58s cubic-bezier(.2,.8,.2,1) !important;
}

.sequence-line.show{
  filter:none !important;
}

.sequence-line.hide{
  filter:none !important;
}

/* GPU-friendly hints only on elements that actually animate. */
.main-photo,
.float-heart,
.flame,
.count-number{
  backface-visibility:hidden;
}

/* Confetti is now canvas-rendered; legacy DOM style stays unused. */
.fx-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:150;
}

/* Lower effect density on touch devices where GPU headroom is usually smaller. */
@media (pointer:coarse){
  .orb{animation-duration:22s !important;}
  .gate-orbit{animation-duration:15s !important;}
}

@media (prefers-reduced-motion:reduce){
  .orb,
  .gate-orbit,
  .flame,
  .gate-pulse{
    animation:none !important;
  }

  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   COUNTDOWN AUDIO CONTROL
   ========================================================= */
.gate-audio-control{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}

.gate-sound-btn{
  appearance:none;
  border:1px solid rgba(32,32,51,.12);
  background:rgba(255,255,255,.48);
  color:var(--ink);
  border-radius:999px;
  padding:10px 15px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(107,27,67,.07);
  transition:transform .18s ease,background .18s ease,opacity .18s ease;
}

.gate-sound-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.68);
}

.gate-sound-btn:disabled{
  cursor:default;
  opacity:.68;
  transform:none;
}

.gate-sound-btn.is-ready{
  background:rgba(199,236,255,.68);
  border-color:rgba(22,152,220,.22);
}

.gate-sound-btn.is-playing{
  background:rgba(100,200,255,.82);
  color:#fff;
  border-color:transparent;
}

.gate-sound-icon{
  font-size:15px;
  line-height:1;
}

.gate-sound-status{
  font-family:"Patrick Hand",cursive;
  font-size:14px;
  opacity:.62;
}

.yt-countdown-audio{
  position:absolute!important;
  width:2px!important;
  height:2px!important;
  left:-9999px!important;
  bottom:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:.001!important;
}

@media(max-width:640px){
  .gate-audio-control{margin-top:13px}
  .gate-sound-btn{font-size:10px;padding:9px 13px}
  .gate-sound-status{font-size:13px}
}