/* ============================================================
   ENTRY ENVELOPE — the experience begins only after Open
   ============================================================ */
.envelopeGate{
  position:fixed; inset:0; z-index:240;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,126,171,.18), transparent 22%),
    radial-gradient(circle at 16% 18%, rgba(255,211,225,.10), transparent 18%),
    radial-gradient(circle at 84% 82%, rgba(205,191,255,.10), transparent 20%),
    linear-gradient(180deg,#6b1537 0%,#481226 48%,#2c0c1c 100%);
}
.envelopeGate::before{
  content:''; position:absolute; inset:0; opacity:.20; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:38px 38px;
}
.envelopeGate__content{
  position:relative; z-index:2; width:min(100%,560px); text-align:center;
}
.envelopeGate__eyebrow{
  position:relative; z-index:7; color:rgba(255,224,233,.78); font:700 14px/1.2 'Cormorant Garamond',serif;
  font-style:italic; letter-spacing:.06em;
}
.envelopeGate__title{
  position:relative; z-index:7; margin-top:7px; color:#fff4ee;
  font:800 clamp(38px,8vw,66px)/.98 'Fraunces',serif;
  letter-spacing:-.035em; text-shadow:0 7px 20px rgba(0,0,0,.24);
}
.envelopeGate__question{
  position:relative; z-index:6; margin-top:10px; color:#ffdbe7;
  font:600 clamp(20px,4vw,28px)/1.25 'Cormorant Garamond',serif;
  font-style:italic;
}
.envelopeVisual{
  position:relative; width:min(72vw,330px); aspect-ratio:1.42/1;
  margin:38px auto 20px; perspective:900px;
  filter:drop-shadow(0 24px 30px rgba(16,2,9,.30));
}
.envelopeVisual__back{
  position:absolute; inset:18% 0 0; border-radius:14px 14px 20px 20px;
  background:linear-gradient(160deg,#f8d6df 0%,#f2b8ca 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}
.envelopeVisual__letter{
  position:absolute; z-index:1; left:9%; right:9%; top:15%; height:64%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:13px; background:linear-gradient(180deg,#fffaf4 0%,#fff2e9 100%);
  box-shadow:0 8px 20px rgba(88,35,57,.13);
  color:#9a506a;
}
.envelopeVisual__heart{ font-size:30px; line-height:1; color:#d93c73; }
.envelopeVisual__for{ margin-top:7px; font:800 23px/1 'Fraunces',serif; }
.envelopeVisual__from{ margin-top:5px; font:600 16px/1.1 'Cormorant Garamond',serif; font-style:italic; }
.envelopeVisual__flap{
  position:absolute; z-index:4; left:0; right:0; top:17%; height:51%;
  background:linear-gradient(145deg,#f8dce4 0%,#edabc0 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0%; transform-style:preserve-3d;
  border-radius:14px 14px 0 0;
}
.envelopeVisual__front{
  position:absolute; z-index:3; inset:18% 0 0; overflow:hidden; border-radius:14px 14px 20px 20px;
  background:
    linear-gradient(32deg, transparent 49.3%, rgba(255,255,255,.36) 50%, transparent 50.7%),
    linear-gradient(-32deg, transparent 49.3%, rgba(255,255,255,.30) 50%, transparent 50.7%),
    linear-gradient(180deg,#f4bfd0 0%,#eba5bd 100%);
  clip-path:polygon(0 26%,50% 66%,100% 26%,100% 100%,0 100%);
}
.envelopeVisual__seal{
  position:absolute; z-index:5; left:50%; top:52%; transform:translate(-50%,-50%);
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(180deg,#d9326d,#a91148); color:#ffe8ef;
  font:800 24px/1 'Cormorant Garamond',serif;
  box-shadow:0 7px 15px rgba(111,18,55,.28), inset 0 0 0 2px rgba(255,255,255,.14);
}
.envelopeGate__open{
  border:none; border-radius:999px; padding:14px 24px; cursor:pointer;
  background:linear-gradient(180deg,#ff9fba 0%,#e95188 100%); color:#fff;
  box-shadow:0 16px 32px rgba(233,81,136,.30);
  font:800 15px/1 'Fraunces',serif;
}
.envelopeGate__open:disabled{ cursor:default; opacity:.78; }
.envelopeGate__hint{
  margin-top:10px; color:rgba(255,226,235,.68);
  font:600 15px/1.3 'Cormorant Garamond',serif; font-style:italic;
}

.envelopeGate__creditsBlock{
  width:min(100%,520px); margin:11px auto 0; padding:0 12px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.envelopeGate__handmade{
  margin:0; max-width:500px; color:rgba(255,226,235,.58);
  font:600 11px/1.4 'Cormorant Garamond',serif; font-style:italic;
}
.envelopeGate__handmade span{ color:rgba(255,226,235,.38); }
.envelopeGate__credits{
  margin:0; max-width:510px; color:rgba(255,226,235,.43);
  font:600 10px/1.4 'Cormorant Garamond',serif; font-style:italic;
}

@media (max-width:600px){
  .envelopeGate{ overflow-y:auto; align-items:flex-start; }
  .envelopeGate__content{ margin:auto 0; padding:12px 0 18px; }
  .envelopeGate__creditsBlock{ max-width:94vw; margin-top:8px; padding:0 4px; }
  .envelopeGate__handmade{ font-size:10px; line-height:1.36; }
  .envelopeGate__credits{ font-size:9.5px; line-height:1.34; }
}

.envelopeGate__doodles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.envelopeGate__doodles span{ position:absolute; color:rgba(255,222,234,.38); line-height:1; animation:envelopeDoodleFloat 6.8s ease-in-out infinite; }
.envelopeGate__doodles span:nth-child(1){ left:10%; top:18%; font-size:36px; }
.envelopeGate__doodles span:nth-child(2){ right:13%; top:22%; font-size:24px; color:rgba(255,227,183,.46); animation-delay:1.1s; }
.envelopeGate__doodles span:nth-child(3){ left:12%; bottom:17%; font-size:28px; color:rgba(220,211,255,.42); animation-delay:2s; }
.envelopeGate__doodles span:nth-child(4){ right:11%; bottom:18%; font-size:30px; animation-delay:2.8s; }
.envelopeGate__doodles span:nth-child(5){ left:50%; top:10%; font-size:22px; animation-delay:1.7s; }
@keyframes envelopeDoodleFloat{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-10px) rotate(4deg)} }
@media (max-width:600px){
  .envelopeGate{ padding:18px; }
  .envelopeGate__title{ font-size:clamp(36px,12vw,52px); }
  .envelopeVisual{ width:min(78vw,310px); margin-top:24px; }
  .envelopeGate__doodles span:nth-child(1){ left:5%; }
  .envelopeGate__doodles span:nth-child(2){ right:6%; }
  .envelopeGate__doodles span:nth-child(3){ left:6%; }
  .envelopeGate__doodles span:nth-child(4){ right:5%; }
}


/* ============================================================
   PASSCODE GATE
   ============================================================ */
.passcodeGate[hidden]{ display:none !important; }
.passcodeGate{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.72), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,207,224,.38), transparent 36%),
    linear-gradient(180deg,#fff7f5 0%, #fdeee8 50%, #f8e6ee 100%);
  backdrop-filter: blur(6px);
}
.passcodeGate__card{
  width:min(100%, 460px);
  padding:30px 24px 24px;
  border-radius:30px;
  text-align:center;
  background:rgba(255,255,255,.84);
  box-shadow:0 28px 60px rgba(125,74,97,.16), inset 0 0 0 1px rgba(255,255,255,.55);
}
.passcodeGate__eyebrow{
  color:#d05c86; font:700 13px/1.2 'Fraunces', serif; letter-spacing:.14em; text-transform:uppercase;
}
.passcodeGate__title{
  margin-top:8px; color:#8c3e61; font:800 clamp(30px,6vw,40px)/1.08 'Fraunces', serif;
}
.passcodeGate__text{
  margin-top:12px; color:#8b6d78; font:600 clamp(17px,2.6vw,20px)/1.55 'Cormorant Garamond', serif;
}
.passcodeGate__form{
  display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:18px;
}
.passcodeGate__input{
  min-width:0; border:none; outline:none; border-radius:999px; padding:14px 18px;
  background:#fff; color:#7c4f61; box-shadow:inset 0 0 0 1px rgba(214,154,180,.42);
  font:700 18px/1 'Fraunces', serif; text-align:center; letter-spacing:.18em;
}
.passcodeGate__submit{
  border:none; border-radius:999px; padding:14px 20px; cursor:pointer;
  background:linear-gradient(180deg,#ff9eb9 0%, #ea5e92 100%); color:#fff;
  box-shadow:0 16px 28px rgba(201,78,123,.22); font:700 14px/1 'Fraunces', serif;
}
.passcodeGate__hint{
  margin-top:10px; color:#b08897; font:600 14px/1.35 'Cormorant Garamond', serif;
}
.passcodeGate__error{
  min-height:22px; margin-top:8px; color:#c43f6f; font:700 14px/1.35 'Fraunces', serif;
}
@media (max-width: 640px){
  .passcodeGate__card{ padding:26px 18px 20px; border-radius:24px; }
  .passcodeGate__form{ grid-template-columns:1fr; }
  .passcodeGate__submit{ width:100%; }
}

/* ============================================================
   HAPPY BIRTHDAY — a birthday film in four acts
   Vanilla + GSAP. One page, one continuous piece:
     1. a beating heart you open with a tap
     2. it falls, and bursts into a flood of rose
     3. a kinetic wish hinges up out of that colour
     4. a gold light blooms, and a tree grows into a heart
   One grain + vignette lens sits over all of it.
   ============================================================ */

:root{
  /* --- warm paper (Act 1 + the tree's dawn) --- */
  --paper-0:  #fff6ee;
  --paper-1:  #f9e2d2;
  --paper-2:  #f2c9b8;

  /* --- rose flood (Acts 2–3) --- */
  --rose-deep: #a80f43;
  --rose:      #d4235c;
  --rose-lift: #ff5f86;
  --wine:      #6e0a31;

  /* --- accents / ink --- */
  --gold-1:    #ffcf6a;
  --gold-2:    #e8a23d;
  --ink:       #7a4a55;   /* dusty rose ink        */
  --ink-soft:  #a9808a;   /* muted eyebrow / sub   */
  --cream:     #fff3ea;

  --ease-out:  cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }

body{
  background:#12060c;                 /* seam colour under everything */
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:auto;
}

.scene{ position:fixed; inset:0; overflow:hidden; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   THE TREE CANVAS (Act 4) — z0, transparent until it plays
   ============================================================ */
.tree{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:1;
}

/* ============================================================
   ACT 1 — THE INVITATION
   ============================================================ */
.hero{
  position:absolute; inset:0;
  z-index:3;
  overflow:hidden;
}
/* the warm field the heart sits on */
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 88% at 50% 24%, #fff8f1 0%, var(--paper-0) 38%, var(--paper-1) 74%, var(--paper-2) 100%);
}
.hero__bg::after{               /* a soft warm pool of light behind the heart */
  content:""; position:absolute; left:50%; top:44%;
  width:min(78vw,720px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,190,150,.55), rgba(255,150,170,.16) 46%, transparent 70%);
  filter:blur(6px);
}


/* subtle hand-drawn doodles on the heart + bow screen */
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.62;
  background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg fill='none' stroke='%23d9a8b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 128c18-64 74-108 124-92 29 9 39 37 24 57-14 18-42 18-58 1-15-16-14-43 4-57 19-15 47-9 62 8'/%3E%3Cpath d='M159 29c13-11 26-14 42-10-11 6-17 15-18 27 10-2 20 1 29 8-13-1-24 4-31 13'/%3E%3Cpath d='M30 157c41-10 84-9 124 3' stroke-dasharray='4 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cg fill='none' stroke='%23c8bbe7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M202 126c-18-64-74-108-124-92-29 9-39 37-24 57 14 18 42 18 58 1 15-16 14-43-4-57-19-15-47-9-62 8'/%3E%3Cpath d='M61 29c-13-11-26-14-42-10 11 6 17 15 18 27-10-2-20 1-29 8 13-1 24 4 31 13'/%3E%3Cpath d='M190 157c-41-10-84-9-124 3' stroke-dasharray='4 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 150'%3E%3Cg fill='none' stroke='%23e3b5c3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16c12 12 19 27 21 44 9-8 20-11 32-10-11 7-20 16-24 28 14 1 27 6 36 16-13-3-25-2-35 2'/%3E%3Cpath d='M26 126c28 9 57 9 86 1'/%3E%3Cpath d='M116 34c8-8 16-12 27-11-8 5-12 11-13 19 7-1 13 1 19 6-8 0-15 3-19 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 150'%3E%3Cg fill='none' stroke='%23e0b3a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M142 16c-12 12-19 27-21 44-9-8-20-11-32-10 11 7 20 16 24 28-14 1-27 6-36 16 13-3 25-2 35 2'/%3E%3Cpath d='M134 126c-28 9-57 9-86 1'/%3E%3Cpath d='M44 34c-8-8-16-12-27-11 8 5 12 11 13 19-7-1-13 1-19 6 8 0 15 3 19 8'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 1.5% 4%, 98.5% 5%, 2.5% 92%, 97.5% 91%;
  background-size: 210px auto, 210px auto, 145px auto, 145px auto;
}
.hero::after{
  content:'♡   ✦   ∞   ❥   ♡';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:19%;
  color:rgba(197,135,157,.32);
  font-size:clamp(18px,2vw,28px); letter-spacing:clamp(42px,8vw,120px);
  white-space:nowrap;
}
.hero__bg,.hero__motes,.hero__eyebrow,.targetWrap,.archery,.hero__hint{ z-index:2; }
.hero__bg{ z-index:0; }
.hero__motes{ z-index:1; }
.hero__eyebrow,.targetWrap,.archery,.hero__hint{ z-index:3; }

@media (max-width:700px){
  .hero::before{
    opacity:.48;
    background-size: 145px auto, 145px auto, 105px auto, 105px auto;
    background-position: 0% 5%, 100% 6%, 0% 93%, 100% 92%;
  }
  .hero::after{ padding-top:22%; letter-spacing:34px; font-size:18px; }
}

/* drifting light motes (JS fills this with a few spans) */
.hero__motes{ position:absolute; inset:0; pointer-events:none; }
.mote{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,214,.9), rgba(255,206,180,.15) 55%, transparent 72%);
  will-change:transform, opacity;
}

.hero__eyebrow{
  position:absolute; top:13%; left:0; right:0;
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic; font-weight:600;
  font-size:clamp(15px, 3.6vw, 26px);
  letter-spacing:.06em;
  color:#a85069;
  text-shadow:0 1px 10px rgba(255,248,241,.9);
  opacity:0;                          /* GSAP reveals */
}

/* ---- the target heart (GSAP animates .target on the hit → fall → burst) ---- */
.targetWrap{
  position:absolute; top:33%; left:0; right:0;
  display:flex; justify-content:center;
  transform:translateY(-50%);         /* centre at 33% — wrap is NOT animated */
  pointer-events:none;
}
.target{
  position:relative;
  width:clamp(120px, 27vw, 208px);
  aspect-ratio:100/92;
  will-change:transform;
  transform-origin:50% 60%;
}
.target__heart{ position:absolute; inset:0; display:block; }

/* radial bloom behind the heart — swells on the beat */
.heart__glow{
  position:absolute; left:50%; top:52%;
  width:230%; aspect-ratio:1; transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,120,150,.55), rgba(255,90,130,.18) 42%, transparent 68%);
  filter:blur(4px);
  pointer-events:none;
  will-change:transform, opacity;
}
.heart__svg{
  width:100%; height:100%; display:block;
  transform-origin:50% 60%;           /* the beat scales THIS, not the wrapper */
  filter:
    drop-shadow(0 10px 22px rgba(168,15,64,.34))
    drop-shadow(0 3px 6px rgba(120,10,48,.30));
  will-change:transform;
}

/* ---- the bow + arrow rig ----
   Placed lower-left and rotated by JS to aim at the heart, so the shot travels
   on a DIAGONAL. The whole rig (left/top + rotation around the grip) is set in
   JS from measured geometry; everything below is in the rig's own space. */
.archery{
  position:absolute; top:0; left:0;    /* JS sets left/top so the grip anchors */
  width:clamp(100px, 18vw, 168px);     /* smaller, daintier bow — delicate against the heart */
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;                   /* we own the drag gesture */
  will-change:transform;
}
.archery:active{ cursor:grabbing; }
.archery:focus-visible{ outline:none; }
.archery:focus-visible .bow{ filter:drop-shadow(0 0 0 3px rgba(255,255,255,.85)) drop-shadow(0 10px 18px rgba(120,50,20,.4)); }
.bow{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 12px 18px rgba(90,40,15,.3));
  overflow:visible;
}

/* the aim line rides inside the rig, so it points straight at the heart */
.aim{
  position:absolute; left:50%; bottom:32%;
  width:2px; height:190%; margin-left:-1px;
  transform-origin:bottom center;
  background:linear-gradient(0deg, rgba(255,214,150,.6) 0%, rgba(255,150,170,.22) 52%, transparent 78%);
  opacity:0; pointer-events:none;
}

/* the arrow overlaps the bow at the nock and flies to the heart */
.arrow{
  position:absolute; left:0; right:0; margin-inline:auto;
  bottom:36%;                          /* JS re-anchors the tail to the nock */
  width:17.5%; height:auto;
  overflow:visible;
  will-change:transform;
  filter:drop-shadow(0 5px 7px rgba(90,40,15,.36));
}
.arrow__wings{ transform-box:fill-box; transform-origin:50% 90%; }
.arrow__wings .wingL,
.arrow__wings .wingR{ transform-box:fill-box; }
.wingL{ transform-origin:88% 60%; animation:flapL 2.6s ease-in-out infinite; }
.wingR{ transform-origin:12% 60%; animation:flapR 2.6s ease-in-out infinite; }
@keyframes flapL{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-11deg); } }
@keyframes flapR{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(11deg); } }

/* ---- the draw / release hint ---- */
.hero__hint{
  position:absolute; bottom:8.5%; left:0; right:0;
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; font-style:italic;
  font-size:clamp(13px, 3.1vw, 19px);
  letter-spacing:.16em; text-transform:uppercase;
  color:#b06a7c;
  opacity:0;                          /* GSAP reveals */
}
.hero__ring{ display:none; }

/* ============================================================
   ACT 2 — THE FLOOD (the burst circle)
   ============================================================ */
.flood{
  position:absolute; left:50%; top:50%;
  width:140px; height:140px; margin:-70px 0 0 -70px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 34%, var(--rose-lift), var(--rose) 46%, var(--rose-deep) 100%);
  z-index:5;
  opacity:0; transform:scale(.001);
  will-change:transform, opacity;
  pointer-events:none;
}

/* ============================================================
   ACT 3 — THE WISH FIELD (rose world + kinetic type)
   ============================================================ */
.field{
  position:absolute; inset:0;
  z-index:4;                          /* below the flood; revealed once it covers */
  opacity:0;
  /* purely decorative — must never intercept the tap on the heart beneath it.
     An opacity:0 element is still hit-testable, so without this the invisible
     field (z4, above the hero z3) swallows every Act-1 tap. */
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 8%, #d5265f 0%, var(--rose) 42%, var(--rose-deep) 78%, var(--wine) 100%);
  color:#fff;
}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(46px); opacity:0;
  mix-blend-mode:screen;
  will-change:transform, opacity;
}
.blob--1{ width:58vmax; height:58vmax; left:-18vmax; top:-16vmax;
  background:radial-gradient(circle, rgba(255,130,160,.9), transparent 62%); }
.blob--2{ width:46vmax; height:46vmax; right:-14vmax; top:22vmax;
  background:radial-gradient(circle, rgba(255,90,120,.75), transparent 64%); }
.blob--3{ width:52vmax; height:52vmax; left:24vmax; bottom:-22vmax;
  background:radial-gradient(circle, rgba(180,20,70,.8), transparent 66%); }

/* faint grid — a hair of parallax gives the flood depth, not flatness */
.fgrid{
  position:absolute; inset:-6%;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:clamp(38px,7vw,74px) clamp(38px,7vw,74px);
  will-change:transform;
}
.fvignette{
  position:absolute; inset:0;
  background:radial-gradient(128% 96% at 50% 44%, transparent 50%, rgba(70,6,28,.5) 100%);
}

/* the camera — everything on the flood rides a slow continuous push */
.camera{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:clamp(4px,1.2vh,12px);
  padding:0 6vw; text-align:center;
  will-change:transform;
}
.kEyebrow{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic; font-weight:500;
  font-size:clamp(15px, 3.6vw, 27px);
  letter-spacing:.08em;
  color:#ffd7c8;
  clip-path:inset(-8% 100% -14% -3%);
  margin-bottom:clamp(2px,1vh,10px);
}

.headline{ font-family:"Fraunces", Georgia, serif; line-height:.92; }
.hl__line{ display:block; }
/* the mask each headline word hinges out of. Padded to clear ascenders +
   descenders so glyphs never peek past the clip edge when parked. */
.mask{
  display:inline-block; overflow:hidden;
  padding:.14em .06em;
  margin:-.14em -.06em;
}
.hl__word{
  display:inline-block;
  font-weight:900;
  font-size:clamp(52px, 15vw, 168px);
  letter-spacing:-.02em;
  color:#fff6f1;
  text-shadow:0 6px 34px rgba(60,4,24,.34), 0 2px 3px rgba(90,8,36,.42);
}
/* each glyph hinges up on its own bottom edge, under its own perspective */
.hl__ch{ display:inline-block; will-change:transform; }

/* gold hand-drawn underline under the second word */
.uline{
  width:clamp(150px, 40vw, 380px); height:auto;
  margin-top:clamp(4px,1.4vh,14px);
  color:var(--gold-1);
  filter:drop-shadow(0 2px 8px rgba(255,180,90,.5));
}
.kSub{
  margin-top:clamp(12px,2.4vh,26px);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:500; font-style:italic;
  font-size:clamp(14px, 3.4vw, 24px);
  letter-spacing:.05em;
  color:#ffdfd2;
  clip-path:inset(-8% 100% -14% -3%);
}

/* cinema bars — closed = black, they open as the wish lands */
.bar{
  position:absolute; left:0; right:0; height:16vh;
  background:#12040b; z-index:3; will-change:transform; pointer-events:none;
}
.bar--top{ top:0; }
.bar--bot{ bottom:0; }

/* ============================================================
   THE HANDOFF BLOOM (rose wish → dawn of the tree)
   ============================================================ */
.bloom{
  position:absolute; left:50%; top:50%;
  width:60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #fff2d6 30%, rgba(255,214,150,.85) 55%, rgba(255,190,150,0) 74%);
  z-index:8; opacity:0; transform:scale(.001);
  will-change:transform, opacity; pointer-events:none;
}

/* ============================================================
   SUB-SCENE — BIRTHDAY CAKE
   ============================================================ */
.cakeScene{
  position:absolute; inset:0; z-index:25; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 22%, var(--paper-0), var(--paper-1) 55%, var(--paper-2) 100%);
  opacity:0;
}
.cakeScene.is-open{ display:flex; }
.cakeScene__back{
  position:absolute; left:16px; top:20px;
  display:inline-flex; align-items:center; gap:5px;
  border:none; background:rgba(255,255,255,.6); backdrop-filter:blur(6px);
  color:var(--ink); border-radius:999px; padding:8px 14px 8px 10px;
  font:600 12px/1 "Cormorant Garamond", Georgia, serif; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; box-shadow:0 6px 16px -6px rgba(120,20,50,.3);
}
.cakeScene__eyebrow{
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:600;
  font-size:clamp(15px, 3.8vw, 21px); color:var(--ink); letter-spacing:.03em;
  margin-bottom:clamp(16px, 4.5vh, 34px); text-align:center; padding:0 10vw;
  transition:opacity .25s ease;
}
.cake{ position:relative; width:min(66vw, 240px); margin-top:6px; }
.cake__flameWrap{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  width:56px; height:70px; margin-bottom:-2px;
  display:flex; align-items:flex-end; justify-content:center;
  cursor:pointer;
}
.cake__flame{
  width:12px; height:26px; margin-bottom:14px; position:relative; z-index:2;
  background:linear-gradient(180deg, #fff6d0, var(--gold-1) 55%, var(--rose) 100%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin:bottom center;
  animation:cakeFlicker 1.15s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(255,207,106,.85));
}
@keyframes cakeFlicker{
  0%{ transform:scale(1,1) rotate(-2deg) skewX(0deg); }
  22%{ transform:scale(1.06,.93) rotate(3deg) skewX(2deg); }
  41%{ transform:scale(.93,1.09) rotate(-4deg) skewX(-3deg); }
  63%{ transform:scale(1.09,.91) rotate(2deg) skewX(1.5deg); }
  82%{ transform:scale(.96,1.05) rotate(-2deg) skewX(-1deg); }
  100%{ transform:scale(1,1) rotate(-2deg) skewX(0deg); }
}
/* soft pulsing light behind the flame — independent timing from the
   flicker itself so the two don't visually sync into a mechanical loop */
.cake__flameGlow{
  position:absolute; left:50%; bottom:12px; transform:translate(-50%, 50%);
  width:44px; height:44px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(255,207,106,.55), rgba(255,207,106,0) 70%);
  animation:flameGlowPulse 1.7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flameGlowPulse{
  0%, 100%{ opacity:.5; transform:translate(-50%, 50%) scale(.88); }
  50%{ opacity:.85; transform:translate(-50%, 50%) scale(1.18); }
}
/* an inviting "tap here" ping, ringing outward from the flame while it's
   still lit — this plus the eyebrow copy is the blow-out instruction */
.cake__tapRing{
  position:absolute; left:50%; bottom:26px; transform:translate(-50%, 50%);
  width:26px; height:26px; border-radius:50%; z-index:1;
  border:1.5px solid rgba(255,207,106,.8);
  animation:tapRingPulse 1.9s ease-out infinite;
  pointer-events:none;
}
@keyframes tapRingPulse{
  0%{ transform:translate(-50%, 50%) scale(.55); opacity:0; }
  22%{ opacity:.85; }
  80%{ transform:translate(-50%, 50%) scale(1.9); opacity:0; }
  100%{ opacity:0; }
}
.cake__flameWrap.is-blown .cake__tapRing{ animation:none; opacity:0; }
.cake__flameWrap.is-blown .cake__flameGlow{ animation:none; opacity:0; transition:opacity .4s ease; }
.cake__flame.is-out{ animation:cakeBlowOut .5s ease forwards; }
@keyframes cakeBlowOut{
  0%{ transform:scale(1) rotate(0); opacity:1; }
  45%{ transform:scale(.7, .35) rotate(55deg) translateX(9px); opacity:.7; }
  100%{ transform:scale(0) rotate(75deg) translateX(15px); opacity:0; }
}
.cake__smoke{
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%;
  background:rgba(150,150,150,.55); filter:blur(3px); opacity:0;
}
.cake__smoke.is-rising{ animation:cakeSmoke 1.4s ease-out forwards; }
@keyframes cakeSmoke{
  0%{ opacity:.6; transform:translate(-50%, 0) scale(1); }
  100%{ opacity:0; transform:translate(-70%, -46px) scale(2.6); }
}
.cake__wick{ position:relative; width:2px; height:14px; background:#5a4326; margin:0 auto; z-index:1; }
.cake__candle{
  width:9px; height:44px; margin:0 auto; border-radius:2px;
  background:repeating-linear-gradient(180deg, #fff 0 6px, var(--rose-lift) 6px 12px);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.cake__cutZone{ position:relative; }
.cake__tier{ position:relative; border-radius:9px 9px 5px 5px; box-shadow:0 8px 18px -8px rgba(120,20,50,.35); }
.cake__tier--top{
  width:58%; height:58px; margin:0 auto;
  background:linear-gradient(180deg, var(--paper-0), var(--paper-1));
  border:1px solid rgba(255,255,255,.6);
}
.cake__tier--bottom{
  width:100%; height:76px; margin-top:4px;
  background:linear-gradient(180deg, var(--paper-1), var(--paper-2));
  border:1px solid rgba(255,255,255,.5);
}
.cake__drip{
  position:absolute; left:0; right:0; top:-7px; height:16px;
  background:radial-gradient(circle at 10px 0, var(--rose) 0 8px, transparent 8px) 0 0 / 20px 16px repeat-x;
  opacity:.88;
}
.cake__plate{
  width:114%; height:14px; margin:6px -7% 0; border-radius:50%;
  background:linear-gradient(180deg, #fff, #f0ded0);
  box-shadow:0 10px 20px -6px rgba(120,20,50,.3);
}

/* the knife — starts resting just above the cake, drags straight down.
   Position only here; GSAP owns the transform (xPercent/rotation/y) once
   the scene opens, so nothing fights over it mid-drag. */
.cake__knife{
  position:absolute; left:64%; top:-46px; z-index:5;
  cursor:grab; touch-action:none;
  filter:drop-shadow(0 6px 10px rgba(60,10,25,.35));
}
.cake__knife.is-active{ cursor:grabbing; }

.cake__dragHint{
  position:absolute; left:64%; top:-88px; transform:translateX(-50%);
  margin:0; white-space:nowrap; opacity:0; pointer-events:none; z-index:6;
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:600;
  font-size:12px; letter-spacing:.03em; color:var(--ink);
  background:rgba(255,255,255,.88); backdrop-filter:blur(4px);
  padding:5px 13px; border-radius:999px;
  box-shadow:0 8px 16px -7px rgba(120,20,50,.4);
  animation:dragHintFloat 1.6s ease-in-out infinite;
}
.cake__dragHint::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(255,255,255,.88);
}
@keyframes dragHintFloat{ 0%, 100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(4px); } }

/* the cut mark — grows downward as the knife descends, never split into
   text so nothing to break; purely a visual gap between the two tiers */
.cake__cutLine{
  position:absolute; left:64%; top:0; width:3px; height:0;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(90,20,35,.05), rgba(90,20,35,.32) 12%, rgba(90,20,35,.32) 88%, rgba(90,20,35,.05));
  box-shadow:0 0 3px rgba(255,255,255,.5);
  z-index:3; pointer-events:none;
}

/* the serving table — slices land here one by one as each cut completes */
.cakeTable{
  position:relative; display:none; width:min(80vw, 270px); height:15px;
  margin-top:34px; border-radius:9px;
  background:linear-gradient(180deg, #dcaa6d, #b9824a);
  box-shadow:0 12px 22px -9px rgba(120,20,50,.4), inset 0 2px 3px rgba(255,255,255,.35);
}
.cakeTable__spot{
  position:absolute; bottom:11px; left:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
}
.cakeTable__slice{ margin-bottom:-5px; filter:drop-shadow(0 6px 10px rgba(120,20,50,.32)); }
.cakeTable__plate{
  width:44px; height:9px; border-radius:50%;
  background:linear-gradient(180deg, #fff, #f0ded0);
  box-shadow:0 6px 12px -5px rgba(120,20,50,.32);
}

.cake__counter{
  display:none; margin:12px 0 0; text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:600;
  font-size:12px; letter-spacing:.05em; color:var(--ink-soft);
}

/* the closing CTA — replaces the cake + table once every slice is served */
.cakeScene__cta{
  display:none; align-items:center; justify-content:center;
  border:none; cursor:pointer; text-align:center;
  background:linear-gradient(180deg, var(--rose-lift), var(--rose));
  color:#fff8f1; border-radius:999px; padding:13px 26px;
  font:600 13px/1.3 "Cormorant Garamond", Georgia, serif; letter-spacing:.05em;
  box-shadow:0 12px 24px -9px rgba(120,20,50,.5);
  max-width:70vw;
}

.cakeScene__confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confettiBit{ position:absolute; top:38%; left:50%; width:8px; height:8px; border-radius:2px; }

/* ============================================================
   SUB-SCENE — SONG DEDICATIONS
   ============================================================ */
.songsScene{
  position:absolute; inset:0; z-index:25; display:none;
  flex-direction:column; align-items:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:76px 5vw 40px;
  background:radial-gradient(120% 90% at 50% 14%, var(--paper-0), var(--paper-1) 55%, var(--paper-2) 100%);
  opacity:0;
}
.songsScene.is-open{ display:flex; }
.songsScene__back{
  position:absolute; left:16px; top:20px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  border:none; background:rgba(255,255,255,.6); backdrop-filter:blur(6px);
  color:var(--ink); border-radius:999px; padding:8px 14px 8px 10px;
  font:600 12px/1 "Cormorant Garamond", Georgia, serif; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; box-shadow:0 6px 16px -6px rgba(120,20,50,.3);
}
.songsScene__head{ text-align:center; margin-bottom:clamp(18px, 4vh, 30px); }
.songsScene__eyebrow{
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:500;
  font-size:clamp(13px, 3.2vw, 17px); letter-spacing:.06em; color:var(--ink-soft);
}
.songsScene__title{
  font-family:"Fraunces", Georgia, serif; font-weight:900;
  font-size:clamp(28px, 8vw, 42px); line-height:1.05; letter-spacing:-.01em;
  color:var(--rose-deep);
  text-shadow:0 3px 14px rgba(168,15,67,.18);
  margin-top:2px;
}
.songsScene__hint{
  margin-top:clamp(8px, 1.6vh, 14px);
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:600;
  font-size:clamp(12px, 3vw, 14px); letter-spacing:.04em; color:var(--ink-soft);
}

/* three tiles a side — a plain 2-column grid gives that naturally */
.songsGrid{
  width:100%; max-width:420px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(10px, 3vw, 16px);
}
.songTile{
  position:relative; aspect-ratio:1 / 1.02; border:none; cursor:pointer;
  border-radius:16px; overflow:hidden; padding:0;
  box-shadow:0 10px 22px -10px rgba(120,20,50,.45);
  transition:transform .25s var(--ease-out);
}
.songTile:active{ transform:scale(.96); }
.songTile.is-playing{ transform:scale(.97); box-shadow:0 6px 16px -8px rgba(120,20,50,.5); }

/* backdrop — the mildly-blurred cover fills the whole tile behind everything */
.songTile__backdrop{
  position:absolute; inset:-6%; background-size:cover; background-position:center;
  filter:blur(14px) brightness(.62) saturate(1.15);
  transform:scale(1.08); /* hides the blur's soft edge past the tile bounds */
}
/* a light vignette keeps the artwork readable against the blurred backdrop */
.songTile__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,4,10,.04), rgba(20,4,10,.24));
}
/* the cover itself is now the visual title, centered in the card */
.songTile__art{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:56%; aspect-ratio:1/1; border-radius:11px; background-size:cover; background-position:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.25) inset;
  display:flex; align-items:center; justify-content:center;
}
.songTile__art svg{ width:38%; height:38%; opacity:.85; }
/* a small playing indicator — three bars that bounce while a clip plays */
.songTile__bars{
  position:absolute; right:9px; top:9px; display:none;
  align-items:flex-end; gap:2px; height:13px;
}
.songTile.is-playing .songTile__bars{ display:flex; }
.songTile__bars span{
  width:2.5px; background:#fff; border-radius:1px;
  animation:songBar .8s ease-in-out infinite;
}
.songTile__bars span:nth-child(1){ height:6px; animation-delay:0s; }
.songTile__bars span:nth-child(2){ height:13px; animation-delay:.15s; }
.songTile__bars span:nth-child(3){ height:9px; animation-delay:.3s; }
@keyframes songBar{ 0%, 100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }

/* the lyric reveal — a sticky mini-player that surfaces the tapped song's
   title + handpicked lines; doubles as the real now-playing bar once mp3
   playback is wired in */
.songsNowPlaying{
  position:sticky; bottom:0; left:0; right:0; z-index:4;
  margin-top:clamp(16px, 4vh, 26px);
  width:100%; max-width:420px;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  border-radius:16px;
  background:rgba(255,246,238,.92); backdrop-filter:blur(10px);
  box-shadow:0 -8px 26px -10px rgba(120,20,50,.35), 0 0 0 1px rgba(255,255,255,.5) inset;
  opacity:0; pointer-events:none; transform:translateY(10px);
}
.songsNowPlaying__art{
  flex:none; width:46px; height:46px; border-radius:10px;
  background-size:cover; background-position:center;
  box-shadow:0 4px 10px -4px rgba(120,20,50,.4);
}
.songsNowPlaying__body{ min-width:0; flex:1 1 auto; }
.songsNowPlaying__title{
  font-family:"Cormorant Garamond", Georgia, serif; font-weight:700;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
/* the lyric scroll — several handpicked lines, current one highlighted and
   kept centered as playback (or the demo clock) advances */
.npLyricScroll{ position:relative; height:58px; overflow:hidden; margin-top:2px; }
.npLyricScroll__track{ position:absolute; left:0; right:0; top:50%; }
.npLyricScroll .lyricLine{
  height:21px; line-height:21px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:600;
  font-size:13px; color:var(--ink-soft); opacity:.42;
  transition:color .3s ease, opacity .3s ease, font-size .3s ease;
}
.npLyricScroll .lyricLine.is-active{
  color:var(--rose-deep); opacity:1; font-weight:700; font-size:15.5px;
}

/* ============================================================
   ACT 4 — THE MENU (over the tree) — five hearts fall into place
   ============================================================ */
.treeMenu{
  position:absolute; inset:0; z-index:6; pointer-events:none;
}

.treeMenu__header{
  position:absolute; left:50%; top:9%; transform:translate(-50%, -10px) scale(.94);
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:max-content; max-width:88vw; padding:9px 18px 10px;
  border-radius:999px;
  background:rgba(72,20,38,.24); backdrop-filter:blur(5px);
  box-shadow:0 10px 26px rgba(67,12,31,.14), inset 0 0 0 1px rgba(255,245,239,.18);
  opacity:0; pointer-events:none;
  color:#fff7ee;
  text-shadow:0 2px 5px rgba(58,5,22,.55), 0 0 14px rgba(255,232,222,.18);
}
.treeMenu__headerIcon{ font-size:clamp(21px,5vw,29px); line-height:1; filter:drop-shadow(0 4px 8px rgba(67,12,31,.28)); }
.treeMenu__headerTitle{
  font-family:"Fraunces", Georgia, serif; font-weight:800;
  font-size:clamp(24px,6vw,34px); line-height:1; letter-spacing:-.02em;
}
.treeMenu__headerSparkle{ font-size:clamp(17px,4vw,23px); line-height:1; animation:giftsSparkle 2.4s ease-in-out infinite; }
@keyframes giftsSparkle{
  0%,100%{ transform:rotate(-7deg) scale(.94); opacity:.76; }
  50%{ transform:rotate(7deg) scale(1.12); opacity:1; }
}
@media (max-width:640px){
  .treeMenu__header{ top:8%; padding:8px 15px 9px; gap:7px; }
}

.treeMenu__heart{
  position:absolute; transform:translate(-50%, -50%) scale(.4); opacity:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:clamp(74px, 19vw, 104px);
  border:none; background:none; cursor:pointer; pointer-events:auto;
  filter:drop-shadow(0 8px 18px rgba(120,10,45,.35));
}
.treeMenu__emoji{
  font-size:clamp(30px, 8vw, 42px); line-height:1;
  animation:heartBeat 2.6s ease-in-out infinite;
}
.treeMenu__tag{
  font-family:"Cormorant Garamond", Georgia, serif; font-weight:600; font-style:italic;
  font-size:clamp(11px, 2.8vw, 14px); letter-spacing:.02em; text-align:center;
  color:#fff3ea; text-shadow:0 1px 3px rgba(60,4,20,.6), 0 0 10px rgba(60,4,20,.35);
}
@keyframes heartBeat{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.treeMenu__toast{
  position:absolute; left:50%; bottom:14%; transform:translate(-50%, 8px);
  margin:0; padding:9px 18px; border-radius:999px; white-space:nowrap;
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:600;
  font-size:14px; color:#fff3ea;
  background:rgba(30,6,16,.55); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.treeMenu__toast.is-shown{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
   REPLAY
   ============================================================ */
.replay{
  position:absolute; right:20px; bottom:18px; z-index:7;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 12px; border-radius:999px;
  font:600 12.5px/1 "Cormorant Garamond", Georgia, serif; letter-spacing:.12em; text-transform:uppercase;
  color:#8a4a5a; background:rgba(255,248,242,.72);
  border:1px solid rgba(150,60,80,.18);
  box-shadow:0 6px 20px -8px rgba(120,20,50,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s var(--ease-out), background .3s ease;
}
.replay.is-shown{ opacity:1; transform:translateY(0); }
.replay:hover{ background:rgba(255,252,248,.92); }
.replay svg{ opacity:.8; }

/* ============================================================
   ACT 0 — THE LOADING SCREEN — a curtain that opens, not fades
   ============================================================ */

.loader{ position:absolute; inset:0; z-index:20; pointer-events:none; overflow:hidden; }
.loader__panel{
  position:absolute; left:0; right:0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,139,180,.16), rgba(255,139,180,0) 18%),
    radial-gradient(circle at 22% 78%, rgba(255,195,173,.12), rgba(255,195,173,0) 18%),
    radial-gradient(circle at 79% 20%, rgba(185,170,255,.12), rgba(185,170,255,0) 16%),
    linear-gradient(180deg, #6b1537 0%, #491327 44%, #2d0d1d 100%);
  will-change:transform;
}
.loader__panel::before,
.loader__panel::after{
  content:''; position:absolute; inset:0; pointer-events:none; background-repeat:no-repeat;
}
.loader__panel::before{
  opacity:.55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23ffd5e4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 128c14-60 71-112 127-96 30 8 43 36 28 57-13 18-42 21-61 5-18-15-19-46-1-61 20-16 49-11 67 5'/%3E%3Cpath d='M165 24c9-9 18-17 32-18-8 9-10 20-9 31 11-4 21-1 31 6-14 0-25 4-32 13'/%3E%3Cpath d='M25 164c46-12 87-12 124 0' stroke-dasharray='4 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 190'%3E%3Cg fill='none' stroke='%23eadbff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M239 60c-20-46-61-63-95-51-24 8-36 30-26 48 10 17 34 22 50 11 17-11 22-38 8-53-13-14-36-15-52-5'/%3E%3Cpath d='M44 35c14 0 26 5 35 16-11-4-22-4-31-1 2 9 1 18-3 27-1-12-5-21-15-28'/%3E%3Cpath d='M118 176c40-12 82-13 120-2' stroke-dasharray='4 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 160'%3E%3Cg fill='none' stroke='%23ffd5e4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12c11 11 19 25 22 42 9-7 20-10 32-9-12 7-20 15-24 27 14 1 26 6 35 16-13-3-25-2-35 2'/%3E%3Cpath d='M28 124c26 10 54 11 82 4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 160'%3E%3Cg fill='none' stroke='%23ffd8c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M161 16c-11 11-19 25-22 42-9-7-20-10-32-9 12 7 20 15 24 27-14 1-26 6-35 16 13-3 25-2 35 2'/%3E%3Cpath d='M152 126c-26 10-54 11-82 4'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 3% 5%, 97% 7%, 4% 89%, 96% 87%;
  background-size: 230px auto, 220px auto, 150px auto, 150px auto;
}
.loader__panel::after{
  opacity:.34;
  background-image:
    radial-gradient(circle at 16% 22%, #ffd8e4 0 2.5px, transparent 4px),
    radial-gradient(circle at 82% 18%, #ffd9b8 0 2.5px, transparent 4px),
    radial-gradient(circle at 18% 84%, #dbd3ff 0 2.5px, transparent 4px),
    radial-gradient(circle at 76% 83%, #ffd8e4 0 2.5px, transparent 4px);
}
.loader__panel--top{ top:0; height:50%; }
.loader__panel--bot{ bottom:0; height:50%; }
.loader__art{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.loader__term{
  position:absolute; font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:700;
  font-size:clamp(14px, 1.7vw, 22px); letter-spacing:.04em; color:rgba(255,231,237,.82);
  text-shadow:0 2px 8px rgba(0,0,0,.22);
}
.loader__term--1{ top:8%; left:6%; transform:rotate(-7deg); }
.loader__term--2{ top:9%; right:7%; transform:rotate(6deg); text-align:right; }
.loader__term--3{ top:36%; right:9%; transform:rotate(5deg); }
.loader__term--4{ bottom:14%; right:7%; transform:rotate(7deg); text-align:right; }
.loader__term--5{ bottom:16%; left:7%; transform:rotate(-5deg); }
.loader__doodle{ position:absolute; z-index:2; line-height:1; color:rgba(255,224,234,.48); text-shadow:0 4px 12px rgba(0,0,0,.18); animation:loaderDrift 6.8s ease-in-out infinite; }
.loader__doodle--1{ top:18%; left:20%; font-size:26px; animation-delay:.2s; }
.loader__doodle--2{ top:21%; right:20%; font-size:18px; color:rgba(255,228,185,.55); animation-delay:1.1s; }
.loader__doodle--3{ bottom:25%; left:18%; font-size:21px; color:rgba(215,208,255,.5); animation-delay:2.2s; }
.loader__doodle--4{ bottom:28%; right:17%; font-size:20px; animation-delay:1.8s; }
.loader__doodle--5{ top:29%; left:50%; transform:translateX(-50%); font-size:17px; animation-delay:2.8s; }
.loader__stage{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:3; width:min(82vw, 460px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:0 18px; text-align:center;
}
.loader__text{
  margin:0; min-height:1.3em;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:700;
  font-size:clamp(26px, 5.4vw, 42px); letter-spacing:.02em;
  color:#fff2eb;
  text-shadow:0 4px 12px rgba(0,0,0,.34);
}
.loader__cursor{
  display:inline-block; width:2px; height:.95em; margin-left:3px;
  background:#ffd0df; vertical-align:-.12em;
  animation:loaderBlink 1s step-end infinite;
}
@keyframes loaderBlink{ 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }
.loader__sticker{
  width:clamp(150px, 34vw, 220px); height:clamp(150px, 34vw, 220px);
  object-fit:contain; border-radius:22px; background:transparent;
  opacity:0; transform:scale(.6) translateY(8px);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.28)) drop-shadow(0 0 24px rgba(255,116,163,.12));
}
@keyframes loaderDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-10px,0) scale(1.04); }
}
@media (max-width: 760px){
  .loader__panel::before{
    background-size: 170px auto, 165px auto, 118px auto, 118px auto;
    background-position: 3% 7%, 98% 9%, 3% 90%, 98% 88%;
  }
  .loader__term{ font-size:clamp(12px, 3vw, 16px); max-width:36vw; }
  .loader__term--1{ left:4%; top:7%; }
  .loader__term--2{ right:4%; top:8%; }
  .loader__term--3{ right:4%; top:34%; }
  .loader__term--4{ right:4%; bottom:13%; }
  .loader__term--5{ left:4%; bottom:14%; }
  .loader__stage{ width:min(86vw, 380px); }
  .loader__text{ font-size:clamp(23px, 7vw, 33px); }
}
@media (max-width: 520px){
  .loader__panel::before{ background-size: 138px auto, 135px auto, 104px auto, 104px auto; }
  .loader__doodle--1{ left:10%; top:23%; }
  .loader__doodle--2{ right:11%; top:24%; }
  .loader__doodle--3{ left:13%; bottom:24%; }
  .loader__doodle--4{ right:12%; bottom:25%; }
  .loader__doodle--5{ top:19%; }
  .loader__term{ font-size:12px; }
}

/* ============================================================
   THE PAUSE — a cheeky checkpoint right as the heart bursts
   ============================================================ */
.consent{
  position:absolute; inset:0; z-index:15; display:none;
  align-items:center; justify-content:center; padding:8vw;
}

/* light doodles on the pink consent/checkpoint screen */
.consent{ overflow:hidden; }
.consent::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.54;
  background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 180'%3E%3Cg fill='none' stroke='%23ffe8ef' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 132c16-62 70-105 120-91 29 8 40 34 26 55-12 18-39 21-57 7-17-14-19-41-2-57 18-17 46-13 64 3'/%3E%3Cpath d='M160 29c13-9 25-12 40-8-10 6-15 14-15 25 10-2 19 1 27 7-13-1-23 3-29 12'/%3E%3Cpath d='M35 158c41-11 82-11 121 1' stroke-dasharray='4 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 180'%3E%3Cg fill='none' stroke='%23fff2d6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M210 132c-16-62-70-105-120-91-29 8-40 34-26 55 12 18 39 21 57 7 17-14 19-41 2-57-18-17-46-13-64 3'/%3E%3Cpath d='M70 29c-13-9-25-12-40-8 10 6 15 14 15 25-10-2-19 1-27 7 13-1 23 3 29 12'/%3E%3Cpath d='M195 158c-41-11-82-11-121 1' stroke-dasharray='4 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 140'%3E%3Cg fill='none' stroke='%23ffe3ed' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 20c14 9 23 22 27 39 8-9 18-14 30-14-10 8-16 18-18 30 13-1 24 2 35 10'/%3E%3Cpath d='M25 116c26 7 52 7 78 1'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 140'%3E%3Cg fill='none' stroke='%23e9e0ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M132 20c-14 9-23 22-27 39-8-9-18-14-30-14 10 8 16 18 18 30-13-1-24 2-35 10'/%3E%3Cpath d='M125 116c-26 7-52 7-78 1'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 2% 5%, 98% 5%, 3% 94%, 97% 94%;
  background-size: 215px auto, 215px auto, 135px auto, 135px auto;
}
.consent::after{
  content:'♡   ✦   ❥   ∞   ♡';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; justify-content:center; align-items:flex-start; padding-top:9%;
  color:rgba(255,242,246,.42); font-size:clamp(18px,2vw,26px);
  letter-spacing:clamp(36px,7vw,90px); white-space:nowrap;
}
.consent__card{ z-index:2; }
@media (max-width:700px){
  .consent::before{
    opacity:.42;
    background-size: 145px auto, 145px auto, 100px auto, 100px auto;
  }
  .consent::after{ padding-top:8%; letter-spacing:28px; font-size:17px; }
}

.consent__card{
  position:relative; width:min(86vw, 380px);
  background:linear-gradient(180deg, #fff8f1, #fdeee0);
  border-radius:20px; padding:26px 22px 24px;
  box-shadow:0 24px 60px rgba(40,6,20,.35);
  text-align:center;
}
.consent__sticker{
  width:130px; height:130px; object-fit:contain; display:block; margin:0 auto 8px;
  border-radius:16px; background:#f0d9c8;
}
.consent__title{
  margin:0 0 8px;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:600;
  font-size:clamp(19px, 5vw, 24px); color:#7a1030;
}
.consent__sub{
  margin:0; padding:0 4px;
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:500;
  font-size:clamp(14px, 3.7vw, 17px); line-height:1.45; color:#8a5566;
}
.consent__tag{
  margin:8px 0 0; padding:0 4px;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:500;
  font-size:clamp(13px, 3.3vw, 15px); line-height:1.4; color:#b06a80;
}
.consent__actions{
  position:relative; width:100%; height:178px; margin-top:10px;
}
.consent__yes, .consent__no{
  position:absolute; transform:translate(-50%, -50%);
  border-radius:999px; cursor:pointer; white-space:nowrap;
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; letter-spacing:.04em;
  font-size:15px; z-index:1; transition:box-shadow .2s ease, transform .2s ease;
}
.consent__yes{
  left:50%; top:28%; border:none; background:#c41f52; color:#fff8f1;
  box-shadow:0 10px 22px rgba(196,31,82,.4);
  padding:13px 22px; width:max-content; max-width:92%; text-align:center; z-index:3;
}
.consent__no{
  left:50%; top:76%; padding:11px 21px;
  background:rgba(255,251,252,.78); color:#a6465f;
  border:1.5px solid rgba(166,70,95,.42); z-index:2;
}
@media (max-width: 560px){
  .consent__actions{ height:184px; margin-top:8px; }
  .consent__yes, .consent__no{ font-size:14px; }
  .consent__yes{ top:27%; padding:12px 17px; max-width:94%; }
  .consent__no{ top:77%; padding:11px 18px; }
}
.consent__no.is-locked{
  opacity:.5; cursor:default; border-color:rgba(166,70,95,.22);
}

.sound-fallback{
  position:absolute; right:16px; bottom:16px; z-index:18;
  border:none; border-radius:999px; padding:9px 16px; cursor:pointer;
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:14px;
  background:rgba(20,8,14,.55); color:#f4dccb; backdrop-filter:blur(6px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.sound-fallback[hidden]{ display:none; }

/* ============================================================
   THE LENS — grain + vignette over every act
   ============================================================ */
.grade{ position:absolute; inset:0; z-index:28; pointer-events:none; }
.grade__vignette{
  position:absolute; inset:0;
  background:radial-gradient(125% 95% at 50% 42%, transparent 54%, rgba(60,18,30,.14) 84%, rgba(40,12,22,.3) 100%);
  mix-blend-mode:multiply;
}
.grade__grain{
  position:absolute; inset:0;
  background:url('/textures/grain.png') repeat;
  background-size:300px; opacity:.05; mix-blend-mode:overlay;
}

/* ============================================================
   REDUCED MOTION — skip the film, hand over the finished tree
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .loader{ display:none !important; }
  .hero, .flood, .field, .bloom, .hero__ring{ display:none !important; }
  .wish__eyebrow, .wish__rule, .wish__sub{ opacity:1; transform:none; filter:none; transition:none; }
  .wish__hero{ clip-path:none; filter:drop-shadow(0 0 5px rgba(255,252,248,.98)) drop-shadow(0 2px 4px rgba(130,18,55,.5)) drop-shadow(0 4px 14px rgba(150,28,70,.32)); }
  .wish.is-in .wish__hero{ animation:none; }
  .wish.is-in .wish__heroWrap::before{ animation:none; opacity:.9; }
  .wish.is-in .wish__heroWrap::after{ animation:none; opacity:0; }
}


/* ============================================================
   SUB-SCENE — Birthday Wish
   ============================================================ */
.wishScene{
  position:absolute; inset:0; z-index:25;
  display:none; flex-direction:column; align-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.72), transparent 42%),
    radial-gradient(circle at bottom right, rgba(255,195,214,.34), transparent 40%),
    linear-gradient(180deg, #fff8f3 0%, #fdeee8 100%);
  overflow:auto;
}
.wishScene__back{
  position:absolute; z-index:28; left:14px; top:calc(14px + env(safe-area-inset-top));
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(208,122,150,.25); border-radius:999px;
  background:rgba(255,255,255,.86); color:#8e5d70;
  padding:10px 14px; font:600 13px/1 'Fraunces', serif;
  box-shadow:0 8px 18px rgba(133,85,104,.12);
}
.wishPage{ width:min(100%, 760px); margin:auto; }
.wishPage[hidden]{ display:none !important; }
.wishScene__head{ text-align:center; margin:52px auto 16px; max-width:680px; }
.wishScene__eyebrow{
  font:800 clamp(28px, 7.7vw, 50px)/1.02 'Fraunces', serif;
  color:#c41f62; letter-spacing:-.03em;
  text-wrap:balance;
}
.wishScene__quote{
  margin-top:10px; color:#8d6b78; font:500 clamp(16px, 4vw, 21px)/1.45 'Cormorant Garamond', serif;
  font-style:italic; text-wrap:balance;
}
.wishBoard{
  position:relative; margin:22px auto 0; min-height:535px; width:min(100%, 720px);
  padding:24px 12px 12px;
}
.wishVideoCard{
  position:absolute; inset:62px 50% auto auto; left:50%; transform:translateX(-50%);
  width:min(68vw, 270px); aspect-ratio: 10/15; z-index:1;
  border-radius:28px; background:linear-gradient(180deg,#ffe7ef 0%,#ffd3df 100%);
  box-shadow:0 24px 60px rgba(178,92,126,.22), inset 0 0 0 1px rgba(255,255,255,.55);
  padding:14px; overflow:hidden;
}
.wishVideoCard__frame{
  position:absolute; inset:12px; border:4px solid #f39abb; border-radius:22px;
  pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
.wishVideo{
  width:100%; height:100%; object-fit:cover; border-radius:18px; display:block;
  background:#f6dbe4;
}
.wishChip{
  position:absolute; max-width:220px; padding:12px 16px; border-radius:16px; z-index:3;
  background:rgba(255,255,255,.94); border:1px solid rgba(226,157,182,.52);
  color:#c8507a; text-align:center; box-shadow:0 10px 24px rgba(185,127,149,.14);
  font:700 clamp(14px, 3.2vw, 18px)/1.25 'Fraunces', serif;
}
.wishChip::after{
  content:''; position:absolute; width:16px; height:16px; background:inherit;
  border-right:1px solid rgba(226,157,182,.52); border-bottom:1px solid rgba(226,157,182,.52);
  transform:rotate(45deg);
}
.wishChip--1{ left:0; top:84px; }
.wishChip--1::after{ right:-9px; top:24px; }
.wishChip--2{ right:0; top:82px; }
.wishChip--2::after{ left:-9px; top:24px; transform:rotate(225deg); }
.wishChip--3{ left:18px; bottom:92px; }
.wishChip--3::after{ right:18px; top:-9px; transform:rotate(-45deg); }
.wishChip--4{ right:14px; bottom:122px; }
.wishChip--4::after{ left:18px; top:-9px; transform:rotate(135deg); }
.wishChip--5{ left:calc(50% - 105px); bottom:4px; width:210px; max-width:210px; }
.wishChip--5::after{ left:calc(50% - 8px); top:-9px; transform:rotate(135deg); }
.wishScene__continue,
.wishLetterActions__back{
  display:inline-flex; align-items:center; justify-content:center; border:none;
  border-radius:999px; padding:14px 24px; cursor:pointer;
  background:linear-gradient(180deg,#ff9eb9 0%, #ea5e92 100%); color:#fff;
  box-shadow:0 16px 28px rgba(201,78,123,.28);
  font:700 15px/1 'Fraunces', serif;
}
.wishScene__continue{
  position:absolute;
  left:0; right:0;
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:max-content; min-width:132px;
  margin:0 auto; z-index:6;
}

.wishScene__eyebrow,
.wishScene__quote,
.wishVideoCard,
.wishChip,
.wishScene__continue{
  will-change:transform, opacity, filter;
}
.wishScene__continue[disabled]{ pointer-events:none; }
.wishScrollCue{
  position:fixed;
  left:50%;
  bottom:calc(76px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:30;
  display:none;
  align-items:center; justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  color:#a85f78;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 20px rgba(151,91,113,.13);
  font:700 12px/1 'Fraunces',serif;
  letter-spacing:.03em;
  pointer-events:none;
}
@media (min-width: 641px){
  .wishScrollCue{ display:none !important; }
}

.wishPage--intro{ padding-bottom:92px; }

/* Full-screen letter grows out of the Continue pill. */
.wishLetterReveal{
  position:absolute; z-index:29; display:none;
  background:linear-gradient(160deg,#fff8ef 0%,#fde8ee 52%,#fff2d8 100%);
  box-shadow:0 18px 70px rgba(171,82,116,.34);
  pointer-events:none; overflow:hidden;
}
.wishPage--letter{
  position:absolute; inset:0; z-index:30;
  width:100%; max-width:none; margin:0; padding:0;
  background:
    radial-gradient(circle at 12% 6%,rgba(255,255,255,.92),transparent 32%),
    radial-gradient(circle at 90% 88%,rgba(255,193,217,.30),transparent 36%),
    linear-gradient(160deg,#fff8ef 0%,#fde8ee 52%,#fff2d8 100%);
  overflow:hidden;
}
.wishLetterClose{
  position:absolute; z-index:4;
  left:14px; top:calc(14px + env(safe-area-inset-top));
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(208,122,150,.25); border-radius:999px;
  background:rgba(255,255,255,.90); color:#8e5d70;
  padding:10px 14px; font:600 13px/1 'Fraunces',serif;
  box-shadow:0 8px 18px rgba(133,85,104,.12);
}
.wishLetterScroll{
  position:absolute; inset:0;
  overflow:auto; overscroll-behavior:contain;
  padding:calc(68px + env(safe-area-inset-top)) 18px calc(38px + env(safe-area-inset-bottom));
  scrollbar-width:thin;
}
.wishLetterDecor{
  position:absolute; z-index:1; color:#ef8cb1;
  filter:drop-shadow(0 6px 12px rgba(216,116,154,.18));
  pointer-events:none; user-select:none;
}
.wishLetterDecor--left{ left:7px; bottom:56px; font-size:68px; opacity:.78; }
.wishLetterDecor--right{ right:8px; top:80px; font-size:27px; line-height:1.7; text-align:right; opacity:.8; }
.wishLetterHeader{
  position:relative; z-index:2;
  text-align:center; margin:6px auto 22px; max-width:650px;
}
.wishLetterHeader__title{
  color:#c92061;
  font:800 clamp(29px,7.8vw,48px)/1.03 'Fraunces',serif;
  letter-spacing:-.035em; text-wrap:balance;
}
.wishLetterHeader__sub{
  margin-top:8px; color:#9d7283;
  font:500 clamp(16px,4vw,20px)/1.35 'Cormorant Garamond',serif;
  font-style:italic;
}
.wishLetterPaper{
  position:relative; z-index:2;
  width:min(100%,620px); margin:0 auto;
  padding:31px 25px 32px 50px;
  border-radius:24px;
  background:
    repeating-linear-gradient(to bottom,rgba(140,98,65,.075),rgba(140,98,65,.075) 1px,transparent 1px,transparent 31px),
    linear-gradient(180deg,#fff6c8 0%,#fff9df 100%);
  box-shadow:0 22px 46px rgba(150,104,76,.18),inset 0 1px rgba(255,255,255,.8);
  min-height:440px;
}
.wishLetterPaper::before{
  content:''; position:absolute; left:31px; top:0; bottom:0; width:2px;
  background:rgba(230,140,150,.42);
}
.wishLetterPaper__holes{
  position:absolute; left:11px; top:28px;
  display:flex; flex-direction:column; gap:52px;
}
.wishLetterPaper__holes span{
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.74);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.wishLetterPaper__content{
  color:#8d5947;
  font:650 clamp(16px,4vw,21px)/1.55 'Fraunces',serif;
  white-space:pre-wrap;
}
.wishLetterPaper__content p{ min-height:1em; }
.wishLetterPaper__content p + p{ margin-top:17px; }
.wishLetterQuote{
  color:#af4d68;
  font-family:'Cormorant Garamond',serif !important;
  font-weight:600 !important; font-style:italic;
  font-size:clamp(18px,4.6vw,24px) !important;
  line-height:1.55 !important;
  padding:3px 0 10px 14px;
  border-left:3px solid rgba(213,66,120,.34);
}
.wishLetterQuote--end{ margin-top:28px !important; color:#9b6572; }
.wishLetterGreeting{ color:#c5336e; font-weight:800 !important; }
.wishLetterEmphasis{ color:#b22461; font-weight:800 !important; }
.wishLetterSignoff{
  color:#c5336e;
  font-size:clamp(19px,4.8vw,25px) !important;
  font-weight:800 !important;
}
.wishLetterDone{
  position:relative; z-index:2;
  width:min(100%,620px); margin:18px auto 0;
  text-align:center; color:#bd3d72; opacity:0;
  font:700 20px/1.2 'Cormorant Garamond',serif; font-style:italic;
}
.wishLetterTyping::after{
  content:'▌'; display:inline-block; margin-left:2px;
  color:#d54278; animation:wishCaret .72s steps(1,end) infinite;
}
@keyframes wishCaret{ 50%{ opacity:0; } }

@media (max-width: 640px){
  /* Mobile gets its own flow layout. None of the animated intro pieces rely
     on desktop absolute coordinates, so GSAP scale/rotate/y cannot push the
     video or callouts outside the viewport. */
  .wishScene{
    align-items:stretch;
    padding-left:12px;
    padding-right:12px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .wishPage--intro{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 0 calc(104px + env(safe-area-inset-bottom));
  }
  .wishScene__head{
    width:100%;
    max-width:100%;
    margin:64px auto 14px;
    padding:0 8px;
  }
  .wishScene__eyebrow{
    font-size:clamp(31px,9.6vw,43px);
    line-height:1.02;
  }
  .wishScene__quote{
    max-width:94%;
    margin:12px auto 0;
    font-size:clamp(16px,4.6vw,20px);
    line-height:1.35;
  }
  .wishBoard{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "chip1 chip2"
      "video video"
      "chip3 chip4"
      "chip5 chip5";
    align-items:center;
    justify-items:center;
    gap:18px 12px;
    width:100%;
    min-height:0;
    margin:16px auto 0;
    padding:4px 0 18px;
  }
  .wishVideoCard{
    grid-area:video;
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:min(60vw,238px);
    max-width:100%;
    margin:2px auto 4px;
    transform:none;
  }
  .wishChip{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    max-width:190px;
    min-width:0;
    margin:0;
    padding:11px 10px;
    font-size:clamp(13px,4vw,16px);
    line-height:1.22;
    transform:none;
  }
  .wishChip--1{ grid-area:chip1; }
  .wishChip--2{ grid-area:chip2; }
  .wishChip--3{ grid-area:chip3; }
  .wishChip--4{ grid-area:chip4; }
  .wishChip--5{
    grid-area:chip5;
    width:min(62%,210px);
    max-width:210px;
  }
  /* Speech tails point toward the centre/video in the mobile composition. */
  .wishChip--1::after,
  .wishChip--2::after{
    left:calc(50% - 8px);
    right:auto;
    top:auto;
    bottom:-9px;
    transform:rotate(45deg);
  }
  .wishChip--3::after,
  .wishChip--4::after,
  .wishChip--5::after{
    left:calc(50% - 8px);
    right:auto;
    top:-9px;
    bottom:auto;
    transform:rotate(225deg);
  }
  .wishScene__continue{
    position:fixed;
    left:0;
    right:0;
    bottom:calc(18px + env(safe-area-inset-bottom));
    width:max-content;
    min-width:144px;
    margin:0 auto;
    transform:none;
    z-index:31;
  }
  .wishLetterScroll{ padding-left:13px; padding-right:13px; }
  .wishLetterPaper{ padding:27px 16px 28px 43px; border-radius:20px; }
  .wishLetterPaper::before{ left:27px; }
  .wishLetterPaper__holes{ left:8px; }
  .wishLetterDecor--left{ font-size:52px; bottom:70px; }
  .wishLetterDecor--right{ font-size:23px; top:78px; }
}


/* End-of-letter forward CTA */
.wishLetterNext{
  display:block; opacity:0; pointer-events:none;
  width:max-content; max-width:calc(100% - 32px); margin:18px auto 34px;
  border:0; border-radius:999px; padding:14px 22px;
  background:linear-gradient(180deg,#ef719e 0%,#cf3f78 100%); color:#fff;
  box-shadow:0 14px 30px rgba(192,61,111,.25);
  font:700 14px/1.1 'Fraunces',serif; cursor:pointer;
  will-change:transform,opacity;
}


/* ============================================================
   SUB-SCENE — Partnership Deed
   ============================================================ */
.deedScene{
  position:absolute; inset:0; z-index:28; display:none;
  align-items:flex-start; justify-content:center;
  padding:calc(72px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 14% 8%,rgba(255,255,255,.84),transparent 32%),
    radial-gradient(circle at 92% 10%,rgba(255,219,228,.50),transparent 26%),
    linear-gradient(160deg,#fff7e8 0%,#f8e6d2 52%,#f7dfe8 100%);
  overflow:auto;
}
.deedScene__back{
  position:absolute; left:14px; top:calc(14px + env(safe-area-inset-top));
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(151,104,72,.20); border-radius:999px;
  background:rgba(255,255,255,.88); color:#805a4e;
  padding:10px 14px; font:600 13px/1 'Fraunces',serif;
  box-shadow:0 8px 18px rgba(99,68,45,.10); cursor:pointer;
  z-index:2;
}
.deedScene__wrap{ width:min(100%, 900px); margin:0 auto; }
.deedScene__eyebrow{ text-align:center; color:#a86e58; font:700 16px/1.2 'Cormorant Garamond',serif; font-style:italic; letter-spacing:.04em; }
.deedScene__title{ margin-top:6px; text-align:center; color:#854735; font:800 clamp(30px,5vw,52px)/1.02 'Fraunces',serif; }
.deedPaper{
  position:relative; margin:24px auto 0; padding:42px 28px 26px;
  border:1px solid rgba(132,91,58,.20); border-radius:18px;
  background:
    radial-gradient(circle at top,rgba(255,255,255,.55),transparent 26%),
    repeating-linear-gradient(to bottom,rgba(117,78,50,.055),rgba(117,78,50,.055) 1px,transparent 1px,transparent 34px),
    #fff9eb;
  box-shadow:0 22px 50px rgba(104,70,45,.16);
  overflow:hidden;
}
.deedPaper__seal{ position:absolute; top:18px; left:22px; font-size:32px; filter:drop-shadow(0 4px 8px rgba(153,76,112,.12)); }
.deedPaper__content{ position:relative; z-index:1; padding-top:14px; }
.deedLead{
  color:#76584f; font:600 clamp(18px,2.1vw,22px)/1.65 'Cormorant Garamond',serif;
  padding:14px 14px 22px; border-radius:18px; background:rgba(255,255,255,.44);
}
.deedClause{ margin-top:18px; padding:16px 16px 14px; border-radius:18px; background:rgba(255,255,255,.50); box-shadow:inset 0 0 0 1px rgba(191,149,117,.10); }
.deedClause__title{ color:#8b4a5a; font:800 clamp(19px,2.4vw,24px)/1.2 'Fraunces',serif; }
.deedClause__text{ margin-top:8px; color:#745b52; font:600 clamp(17px,2vw,20px)/1.6 'Cormorant Garamond',serif; }
.deedClosing{ margin-top:22px; padding:18px 18px 8px; border-top:1px dashed rgba(153,103,77,.28); }
.deedClosing__text{ color:#825d50; font:700 clamp(18px,2vw,22px)/1.55 'Cormorant Garamond',serif; text-align:center; }
.deedSignatureRow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; align-items:stretch; }
.deedSignatureBox{ padding:14px 14px 12px; border-radius:16px; background:rgba(255,255,255,.54); box-shadow:inset 0 0 0 1px rgba(180,140,110,.13); text-align:center; min-width:0; }
.deedSignatureBox__label{ display:block; color:#aa7b68; font:700 12px/1.25 'Fraunces',serif; letter-spacing:.08em; text-transform:uppercase; white-space:normal; }
.deedSignatureBox__value{ display:block; margin-top:8px; color:#7b4b41; font:800 clamp(15px,2vw,19px)/1.35 'Cormorant Garamond',serif; overflow-wrap:anywhere; word-break:break-word; }
@media (max-width: 640px){
  .deedSignatureRow{ grid-template-columns:1fr; gap:10px; }
  .deedSignatureBox{ padding:13px 12px; border-radius:15px; }
  .deedSignatureBox__label{ font-size:11px; letter-spacing:.07em; }
  .deedSignatureBox__value{ font-size:clamp(17px,4.9vw,20px); line-height:1.28; }
}
.deedActionBar{ position:relative; z-index:1; margin-top:22px; padding-top:18px; border-top:1px solid rgba(160,121,93,.20); text-align:center; }
.deedActionBar__note{ color:#936c5a; font:600 clamp(16px,2vw,19px)/1.5 'Cormorant Garamond',serif; }
.deedApproveBtn{
  margin-top:14px; border:none; border-radius:999px; padding:14px 24px; cursor:pointer;
  background:linear-gradient(180deg,#ff9eb9 0%, #ea5e92 100%); color:#fff;
  box-shadow:0 16px 28px rgba(201,78,123,.26);
  font:700 15px/1 'Fraunces',serif;
}
.deedApproveBtn.is-done{ background:linear-gradient(180deg,#e7b66a 0%, #cf8743 100%); box-shadow:0 16px 28px rgba(170,111,44,.24); }
.deedClosing__stampArea{
  display:flex; justify-content:center; align-items:center;
  min-height:0; margin-top:16px;
}
.deedStamp{
  position:relative; z-index:2;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  width:154px; aspect-ratio:1/1; border-radius:50%;
  border:5px double rgba(193,46,74,.78); color:#b32449;
  background:rgba(255,240,243,.86); box-shadow:0 12px 24px rgba(179,36,73,.15);
  text-align:center; opacity:0; transform:rotate(-16deg) scale(.64);
  pointer-events:none;
}
.deedStamp__main{ font:900 22px/1 'Fraunces',serif; letter-spacing:.08em; }
.deedStamp__sub{ margin-top:6px; font:700 12px/1.2 'Cormorant Garamond',serif; letter-spacing:.08em; text-transform:uppercase; }
.deedConfirm{
  position:fixed; inset:0; z-index:240; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(56,31,39,.34); backdrop-filter:blur(6px);
  overflow:auto; overscroll-behavior:contain;
}
.deedConfirm__card{
  width:min(100%, 480px); padding:24px 22px 20px; border-radius:28px;
  background:linear-gradient(180deg,#fffefb 0%, #fff3f7 100%);
  box-shadow:0 24px 50px rgba(74,33,53,.18); text-align:center;
}
.deedConfirm__eyebrow{ color:#c0587f; font:700 13px/1.2 'Fraunces',serif; letter-spacing:.12em; text-transform:uppercase; }
.deedConfirm__title{ margin-top:8px; color:#803c57; font:800 clamp(24px,5vw,32px)/1.1 'Fraunces',serif; }
.deedConfirm__text{ margin-top:12px; color:#86636f; font:600 18px/1.55 'Cormorant Garamond',serif; }
.deedConfirm__actions{ display:flex; justify-content:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.deedConfirm__btn{ border:none; border-radius:999px; padding:12px 18px; cursor:pointer; font:700 14px/1 'Fraunces',serif; }
.deedConfirm__btn--ghost{ background:#fff; color:#8f6070; box-shadow:inset 0 0 0 1px rgba(194,112,145,.24); }
.deedConfirm__btn--solid{ background:linear-gradient(180deg,#ff9eb9 0%, #ea5e92 100%); color:#fff; box-shadow:0 14px 24px rgba(201,78,123,.22); }

.deedApprovalMoment{
  position:fixed; inset:0; z-index:260;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(64,34,45,.18);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.deedApprovalMoment__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at center, rgba(255,249,241,.96) 0%, rgba(255,239,244,.86) 38%, rgba(255,228,237,.54) 68%, transparent 100%);
  opacity:0;
}
.deedApprovalMoment__content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.deedApprovalMoment__stamp{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:min(56vw, 260px); aspect-ratio:1/1; border-radius:50%;
  border:8px double rgba(187,36,72,.88);
  color:#b32449;
  background:rgba(255,246,247,.95);
  box-shadow:0 22px 48px rgba(156,42,72,.18), inset 0 0 0 3px rgba(187,36,72,.10);
  transform:rotate(-14deg);
}
.deedApprovalMoment__main{
  font:900 clamp(30px,7vw,46px)/1 'Fraunces',serif;
  letter-spacing:.08em;
}
.deedApprovalMoment__sub{
  margin-top:10px;
  font:800 clamp(13px,3vw,18px)/1.2 'Cormorant Garamond',serif;
  letter-spacing:.12em; text-transform:uppercase;
}
.deedApprovalMoment__text{
  margin-top:22px; color:#8e5365;
  font:800 clamp(20px,4.4vw,28px)/1.25 'Fraunces',serif;
  text-shadow:0 4px 12px rgba(255,255,255,.75);
}
@media (max-width: 640px){
  .deedApprovalMoment__stamp{ width:min(68vw, 240px); border-width:6px; }
}

.endingScene{
  position:fixed; inset:0; z-index:32; display:none;
  align-items:flex-start; justify-content:center;
  width:100%; height:100%; min-height:100dvh;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  overflow-anchor:none;
  scroll-padding-top:calc(18px + env(safe-area-inset-top));
  scrollbar-gutter:stable both-edges;
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(26px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.76), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,205,223,.40), transparent 32%),
    linear-gradient(180deg,#fff7f5 0%, #fdeee8 54%, #f9e4ef 100%);
}
.endingScene__card{
  position:relative; flex:0 0 auto; align-self:flex-start;
  width:min(100%, 620px); margin:0 auto !important;
  padding:26px 24px 24px; border-radius:30px; text-align:center;
  background:rgba(255,255,255,.90); box-shadow:0 22px 46px rgba(128,73,99,.14);
  border:1px solid rgba(213,171,189,.28);
  backdrop-filter:blur(8px);
  scroll-margin-top:calc(14px + env(safe-area-inset-top));
  outline:none;
}
.endingScene__eyebrow{ color:#d05c86; font:700 13px/1.2 'Fraunces',serif; letter-spacing:.14em; text-transform:uppercase; }
.endingScene__title{ margin-top:8px; color:#8c3e61; font:800 clamp(26px,5.2vw,38px)/1.08 'Fraunces',serif; }
.endingScene__text{
  margin:12px auto 0; max-width:520px; color:#896874;
  font:600 clamp(16px,2.1vw,19px)/1.54 'Cormorant Garamond',serif;
}
.endingScene__divider{
  margin:16px auto 2px; display:flex; align-items:center; justify-content:center; gap:12px;
}
.endingScene__divider span{
  display:block; width:min(34%, 120px); height:1px;
  background:linear-gradient(90deg, rgba(213,122,156,0), rgba(213,122,156,.55), rgba(213,122,156,0));
}
.endingScene__divider i{ font-style:normal; font-size:18px; }
.endingScene__finalWish{
  margin:14px auto 0; padding:18px 18px 16px; max-width:540px; border-radius:22px;
  color:#8f4968; background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,247,250,.64));
  box-shadow:inset 0 0 0 1px rgba(205,126,158,.16), 0 10px 24px rgba(204,125,158,.08);
}
.endingScene__finalWishLabel{
  margin:0 0 10px; color:#c04c7b; font:700 12px/1.2 'Fraunces',serif;
  letter-spacing:.13em; text-transform:uppercase;
}
.endingScene__finalWishBody{
  margin:0; color:#8f4968; font:600 clamp(16px,2.05vw,19px)/1.48 'Cormorant Garamond',serif;
}
.endingScene__finalWishBody + .endingScene__finalWishBody{ margin-top:8px; }
.endingScene__finalWish strong{ color:#bb3d70; font-weight:800; }
.endingScene__sub{
  margin:14px auto 0; max-width:500px; color:#a17f8b;
  font:600 clamp(15px,1.85vw,16px)/1.45 'Cormorant Garamond',serif;
}
.endingScene__replay{
  margin-top:18px; border:none; border-radius:999px; padding:14px 24px; cursor:pointer;
  background:linear-gradient(180deg,#ff9eb9 0%, #ea5e92 100%); color:#fff;
  box-shadow:0 16px 28px rgba(201,78,123,.24); font:700 16px/1 'Fraunces',serif;
}
@media (max-width: 640px){
  .endingScene{
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
  .endingScene__card{ width:100%; padding:24px 18px 22px; border-radius:28px; }
  .endingScene__title{ font-size:clamp(24px, 8vw, 34px); }
  .endingScene__text{ font-size:clamp(15px, 4.9vw, 17px); line-height:1.48; }
  .endingScene__finalWish{ margin-top:12px; padding:15px 14px 14px; border-radius:20px; }
  .endingScene__finalWishLabel{ font-size:11px; }
  .endingScene__finalWishBody{ font-size:clamp(15px, 4.8vw, 17px); line-height:1.42; }
  .endingScene__sub{ margin-top:14px; font-size:clamp(14px, 4.4vw, 15px); line-height:1.42; }
  .endingScene__replay{ margin-top:16px; padding:13px 20px; font-size:15px; }
}
@media (max-width: 760px){
  .endingScene__card{ width:100%; }
}


/* ============================================================
   SUB-SCENE — Memories
   ============================================================ */
.memoriesScene{
  position:absolute; inset:0; z-index:25;
  display:none; flex-direction:column; align-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.72), transparent 42%),
    radial-gradient(circle at bottom right, rgba(255,203,223,.36), transparent 40%),
    linear-gradient(180deg, #fff8f3 0%, #fdeee8 100%);
  overflow:auto;
}
.memoriesScene__back{
  position:absolute; left:14px; top:calc(14px + env(safe-area-inset-top));
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(208,122,150,.25); border-radius:999px;
  background:rgba(255,255,255,.86); color:#8e5d70;
  padding:10px 14px; font:600 13px/1 'Fraunces', serif;
  box-shadow:0 8px 18px rgba(133,85,104,.12);
}
.memoriesScene__wrap{ width:min(100%, 920px); margin:auto; }
.memoriesScene__head{ text-align:center; margin:54px auto 18px; max-width:760px; }
.memoriesScene__eyebrow{ color:#c45e82; font:700 15px/1.2 'Fraunces', serif; letter-spacing:.12em; text-transform:uppercase; }
.memoriesScene__title{ margin-top:8px; color:#cf336c; font:800 clamp(28px, 7vw, 46px)/1.02 'Fraunces', serif; letter-spacing:-.03em; }
.memoriesScene__hint{ margin-top:10px; color:#91727d; font:500 clamp(15px, 3.2vw, 18px)/1.45 'Cormorant Garamond', serif; }
.memoriesViewer{ width:min(100%, 820px); margin:0 auto; }
.memoriesFrame{
  position:relative; width:min(100%, 760px); margin:0 auto; min-height:420px;
  border-radius:32px; padding:16px;
  background:linear-gradient(180deg,#fffefe 0%, #fff4f7 100%);
  box-shadow:0 24px 56px rgba(161,97,126,.16), inset 0 0 0 1px rgba(255,255,255,.6);
  overflow:hidden; cursor:pointer; isolation:isolate;
}
.memoriesFrame__glow{
  position:absolute; inset:0; background:
    radial-gradient(circle at 20% 16%, rgba(255,225,235,.72), transparent 25%),
    radial-gradient(circle at 80% 78%, rgba(255,210,223,.42), transparent 30%);
  z-index:0; pointer-events:none;
}
.memoriesImage{
  position:relative; z-index:1; display:block; width:100%; height:min(70vh, 560px);
  object-fit:contain; border-radius:22px; background:#f7e8ee;
  box-shadow:0 12px 28px rgba(115,76,92,.12);
  user-select:none; -webkit-user-drag:none;
}
.memoriesMeta{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 8px 4px; }
.memoriesMeta__group{ color:#c65580; font:700 clamp(14px, 3vw, 18px)/1.2 'Fraunces', serif; }
.memoriesMeta__count{ color:#9a7c87; font:600 14px/1.2 'Fraunces', serif; }
.memoriesControls{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:12px; }
.memoriesControls__btn{
  border:none; border-radius:999px; padding:12px 18px; cursor:pointer;
  background:linear-gradient(180deg,#ff9eb9 0%, #ea5e92 100%); color:#fff;
  box-shadow:0 14px 26px rgba(201,78,123,.24);
  font:700 14px/1 'Fraunces', serif;
}
.memoriesProgress{ height:10px; border-radius:999px; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(220,163,185,.36); overflow:hidden; }
.memoriesProgress__fill{ display:block; height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#ff9db8 0%, #d8427b 100%); }
@media (max-width: 720px){
  .memoriesScene__head{ margin-top:58px; }
  .memoriesFrame{ min-height:280px; border-radius:24px; padding:12px; }
  .memoriesImage{ height:min(54vh, 420px); border-radius:16px; }
  .memoriesMeta{ flex-direction:column; align-items:flex-start; gap:6px; }
  .memoriesControls{ grid-template-columns:1fr 1fr; }
  .memoriesProgress{ grid-column:1 / -1; order:3; }
  .memoriesControls__btn{ width:100%; padding:12px 14px; }
}



/* Shared mute control for every screen that plays music/audio. */
.audioToggle{
  position:absolute; right:14px; top:calc(14px + env(safe-area-inset-top)); z-index:30;
  display:inline-flex; align-items:center; justify-content:center; min-width:92px; min-height:38px;
  padding:10px 14px; border-radius:999px; border:1px solid rgba(208,122,150,.28);
  background:rgba(255,255,255,.88); color:#8e5d70;
  box-shadow:0 8px 18px rgba(133,85,104,.12);
  font:700 12px/1 'Fraunces', serif; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.audioToggle.is-muted{ background:rgba(126,93,105,.88); color:#fff; border-color:rgba(255,255,255,.2); }
.audioToggle[hidden]{ display:none !important; }
.audioToggle--film{ position:absolute; z-index:24; }
@media (max-width:640px){
  .audioToggle{ right:10px; top:calc(12px + env(safe-area-inset-top)); min-width:82px; min-height:38px; padding:9px 12px; font-size:11px; }
}



.deedIntroNote{
  margin:18px 8px 4px; color:#8b675b;
  font:600 clamp(17px,2vw,20px)/1.62 'Cormorant Garamond',serif;
  text-align:center;
}
.deedClause__mantra{
  margin-top:10px; color:#8d465d; text-align:center;
  font:800 clamp(18px,2.2vw,22px)/1.55 'Cormorant Garamond',serif;
}
.deedClause--heart{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,241,246,.70));
}
.deedFinalDeclaration{
  margin-top:24px; padding:24px 18px; border-radius:22px;
  background:linear-gradient(180deg,rgba(255,244,248,.78),rgba(255,251,240,.76));
  box-shadow:inset 0 0 0 1px rgba(201,114,145,.15);
  text-align:center;
}
.deedFinalDeclaration__title{
  color:#8b405a; font:900 clamp(22px,3vw,30px)/1.15 'Fraunces',serif;
}
.deedFinalDeclaration__text{
  margin-top:10px; color:#795b54; font:600 clamp(17px,2vw,20px)/1.6 'Cormorant Garamond',serif;
}
.deedFinalDeclaration__big{
  margin-top:12px; color:#b54268; font:800 clamp(22px,3vw,30px)/1.38 'Fraunces',serif;
}


/* ============================================================
   GUIDED GIFT FLOW
   ============================================================ */
.giftFlowNext{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; text-align:center;
  border-radius:999px; padding:13px 24px;
  background:linear-gradient(180deg,var(--rose-lift),var(--rose));
  color:#fff8f1;
  box-shadow:0 13px 26px -9px rgba(120,20,50,.46);
  font:700 14px/1.25 "Cormorant Garamond", Georgia, serif;
  letter-spacing:.035em;
}
.giftFlowNext[hidden]{ display:none !important; }
.songsScene__next{ margin:20px auto 2px; flex:none; }
.memoriesScene__nextGift{ margin:18px auto 4px; }
.memoriesControls__btn:disabled{
  opacity:.42; cursor:default; box-shadow:none;
}
.passcodeGate__cancel{
  margin-top:8px; border:none; background:transparent; color:#9c7382;
  cursor:pointer; padding:9px 14px;
  font:700 13px/1 "Cormorant Garamond", Georgia, serif;
  text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:640px){
  .giftFlowNext{ width:min(100%,330px); padding:13px 18px; }
}


/* ============================================================
   SITE-WIDE MINIMAL DOODLES
   ============================================================ */
#siteDoodleDefsHost,.siteDoodleDefs{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;pointer-events:none!important;}
.envelopeGate,.passcodeGate,.hero,.field,.consent,.treeMenu,.cakeScene,.songsScene,.wishScene,.memoriesScene,.deedScene,.endingScene{isolation:isolate;}
.siteDoodles{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.siteDoodles--hero,.siteDoodles--field,.siteDoodles--consent{z-index:1;}
.siteDoodles--treeMenu{z-index:-1;}
.siteDoodle{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;
  color:#d8a0b4;opacity:var(--o,.2);overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(var(--r,0deg));transform-origin:center;
  filter:drop-shadow(0 4px 9px rgba(91,44,63,.06));
  animation:siteDoodleFloat 8.2s ease-in-out infinite;animation-delay:var(--delay,0s);
}
@keyframes siteDoodleFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg));}
  50%{transform:translate3d(0,-7px,0) rotate(calc(var(--r,0deg) + 2deg));}
}
/* Keep functional content above the edge art without changing positioning. */
.envelopeGate > :not(.siteDoodles),
.passcodeGate > :not(.siteDoodles),
.cakeScene > :not(.siteDoodles),
.songsScene > :not(.siteDoodles),
.wishScene > :not(.siteDoodles),
.memoriesScene > :not(.siteDoodles),
.deedScene > :not(.siteDoodles),
.endingScene > :not(.siteDoodles),
.consent > :not(.siteDoodles){z-index:1;}
.treeMenu > :not(.siteDoodles){z-index:1;}
.field .camera{z-index:2;}
.field .blob,.field .fgrid,.field .fvignette{z-index:0;}
@media (max-width:700px){
  .siteDoodle{width:var(--wm,var(--w));stroke-width:2.4;opacity:calc(var(--o,.2) * .82);}
  .siteDoodle[data-mobile-hide="1"]{display:none;}
}
@media (prefers-reduced-motion:reduce){.siteDoodle{animation:none!important;}}


/* Envelope interaction hardening + clean card reveal. */
.envelopeGate__open{position:relative;z-index:12;pointer-events:auto;min-width:180px;min-height:46px;}
.envelopeVisual__letter{transform-origin:50% 100%;box-shadow:0 12px 26px rgba(88,35,57,.16),0 0 0 1px rgba(255,255,255,.65);}
.envelopeVisual.is-opening .envelopeVisual__letter{box-shadow:0 22px 38px rgba(49,12,28,.22),0 0 0 1px rgba(255,255,255,.82);}