:root {
  --black: #0D0C10;
  --pink: #F7C6D9;
  --purple: #7A4FB3;
  --ground: var(--black);
  --ink: var(--pink);
  --accent: var(--pink);
  --on-accent: var(--black);
  --letter-ink: #0D0C10;
  --margin: clamp(20px, 3.2vw, 44px);

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --step-head: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--step-body);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 1s var(--ease-out), color 1s var(--ease-out);
}
h1, h2, p { margin: 0; }
h2 { font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; }

[hidden] { display: none !important; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- acts: one screen each, laid over the 3D stage ---- */
.act {
  position: fixed; inset: 0;
  padding: max(var(--margin), env(safe-area-inset-top)) var(--margin) max(var(--margin), env(safe-area-inset-bottom));
  display: grid;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.act.is-on { opacity: 1; }
.act button { pointer-events: auto; }
.act > *, .foot > * { transform: translateY(22px); opacity: 0; transition: transform .8s var(--ease-out), opacity .8s var(--ease-out); }
.act.is-on > *, .act.is-on .foot > * { transform: none; opacity: 1; }
.act.is-on > *:nth-child(2), .act.is-on .foot > *:nth-child(2) { transition-delay: .09s; }
.act.is-on > *:nth-child(3) { transition-delay: .18s; }

/* ---- buttons ---- */
.btn {
  font: inherit; font-size: var(--step-body); font-weight: 500;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 999px;
  padding: 16px 30px; min-height: 56px;
  cursor: pointer;
  transition: transform .25s var(--ease-out), background-color .6s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); }
.text-btn {
  font: inherit; font-size: var(--step-body);
  background: none; border: 0; color: inherit;
  padding: 12px 4px; min-height: 48px;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  cursor: pointer;
  transition: text-underline-offset .25s var(--ease-out), opacity .25s;
}
.text-btn:hover { text-underline-offset: 9px; }
.text-btn:active { opacity: .6; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ---- envelope ---- */
.act-envelope { place-items: center; grid-template-rows: 1fr auto; gap: 24px; }
.envelope {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 7 / 5;
  background: var(--pink);
  color: var(--black);
  container-type: inline-size;
  perspective: 1400px;
  transition: transform 1s var(--ease-out) .75s, opacity .8s var(--ease-out) .85s;
}
.env-flap {
  position: absolute; inset: 0 0 auto 0; height: 38%;
  background: #EBA8C4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .8s var(--ease-out) .3s;
}
.env-body { position: absolute; left: 6%; right: 6%; bottom: 8%; text-align: center; }
.env-name {
  font-family: 'Great Vibes', 'Newsreader', cursive;
  font-weight: 400; font-size: 13.5cqw; line-height: 1.1; letter-spacing: 0; white-space: nowrap;
  margin: 0 0 5cqw;
}
.env-note { font-size: max(16px, 3.4cqw); margin: 0 auto; max-width: 34ch; }

/* the wax seal: poured edge, pressed face, embossed initial. Flat tones only. */
.seal {
  position: absolute; left: 50%; top: 38%;
  width: clamp(92px, 21cqw, 128px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 0; padding: 0; background: none; border-radius: 50%;
  cursor: pointer;
  transition: transform .3s var(--ease-out), opacity .5s .35s;
}
.wax { display: block; width: 100%; height: 100%; overflow: visible; }
.wax-pour { fill: #5E3A91; }
.wax-face { fill: #7A4FB3; }
.wax-rim { fill: none; stroke: #9270C7; stroke-width: 3; }
.wax-press { fill: none; stroke: #66409C; stroke-width: 1.6; }
.wax-mono { font-family: 'Great Vibes', cursive; font-size: 42px; text-anchor: middle; fill: #7A4FB3; }
.wax-mono-low { fill: #4F2F7E; }
.wax-mono-high { fill: #A88BD6; }
.wax-l { clip-path: polygon(0 0, 52% 0, 47% 35%, 54% 62%, 48% 100%, 0 100%); }
.wax-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 54% 62%, 47% 35%); }
.wax-half { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .7s var(--ease-out), opacity .6s .3s; }
.seal:hover:not(:disabled) { transform: translate(-50%, -50%) rotate(-8deg) scale(1.05); }
.seal:active:not(:disabled) { transform: translate(-50%, -50%) rotate(-8deg) scale(.95); }
.seal:disabled { cursor: default; }
.envelope.is-open .wax-l { transform: translate(-14%, 6%) rotate(-16deg); opacity: 0; }
.envelope.is-open .wax-r { transform: translate(14%, 8%) rotate(14deg); opacity: 0; }
.envelope.is-open .env-flap { transform: rotateX(180deg); }
.envelope.is-open { transform: translateY(40vh); opacity: 0; }
.countdown { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cd-label { font-size: var(--step-body); max-width: 34ch; margin: 0 auto; }
.cd-time { display: flex; justify-content: center; gap: clamp(16px, 4vw, 40px); margin-top: 12px; font-size: var(--step-small); }
.cd-time span { display: flex; flex-direction: column; align-items: center; }
.cd-time b { font-weight: 300; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.env-count { font-size: var(--step-body); text-align: center; font-variant-numeric: tabular-nums; max-width: 40ch; min-height: 1.5em; }

/* ---- choosing the paper ---- */
.act-pick { grid-template-rows: auto 1fr; gap: 32px; }
.pick-head h2 { font-size: var(--step-head); }
.pick-head p { margin-top: 12px; max-width: 34ch; }
.sheets {
  align-self: center;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.4vw, 40px);
  width: 100%; max-width: 900px; margin: 0 auto;
}
.sheet {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
  transform: rotate(var(--tilt));
  transition: transform .45s var(--ease-out);
}
.sheet:hover, .sheet:focus-visible { transform: rotate(0deg) translateY(-12px); }
.sheet:active { transform: scale(.95); }
.sheet-face { display: block; aspect-ratio: 1; background-size: cover; }
.sheet-name { display: block; margin-top: 14px; font-size: var(--step-body); }
.sheet-model { display: block; font-size: var(--step-small); font-style: italic; }

/* ---- folding ---- */
.act-fold { grid-template-rows: auto 1fr auto; }
.instruction { font-size: var(--step-lead); max-width: 20ch; }
.fold-foot { grid-row: 3; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.memory {
  font-size: var(--step-head); font-style: italic; font-weight: 300; line-height: 1.2;
  max-width: 24ch; min-height: 2.4em;
  display: flex; align-items: end;
  opacity: 0; transform: translateY(14px);
}
.memory.is-shown { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.act-fold.is-done .instruction, .act-fold.is-done #autofold,
.act-fold.is-listening .instruction, .act-fold.is-listening #autofold { opacity: 0; pointer-events: none; transition: opacity .6s; }
.act-fold.is-listening #autofold { display: none; }

/* ---- the butterfly waits on the closed scroll ---- */
.act-perch { grid-template-rows: auto 1fr auto; }
.act-perch h2 { font-size: var(--step-head); max-width: 18ch; }
.act-perch .btn { grid-row: 3; justify-self: start; }

/* ---- the foot used by the later screens ---- */
.foot { align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.foot h2 { font-size: var(--step-head); }

/* ---- the letter, laid over the scroll ---- */
.letter {
  position: fixed; z-index: 2;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(20px, 4vw, 48px) clamp(20px, 4.5vw, 56px);
  color: var(--letter-ink);
  font-size: var(--step-body); line-height: 1.6;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.letter .ln { max-width: 58ch; margin: 0 0 1em; opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.letter .ln.is-shown { opacity: 1; transform: none; }
.letter .greeting { font-size: var(--step-head); font-weight: 400; margin-bottom: .7em; }
.letter .signoff { margin-top: 1.6em; margin-bottom: .2em; }
.letter .from { font-style: italic; font-size: var(--step-lead); }
body.is-static { overflow: auto; }
body.is-static #gl { display: none; }
body.is-static .letter { position: static; max-width: 680px; margin: 0 auto; background: #FDEAF1; min-height: 100svh; }

.noscript { padding: var(--margin); font-size: var(--step-lead); }

/* ---- phones ---- */
@media (max-width: 600px) {
  .fold-foot { flex-direction: column; align-items: start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .act > *, .foot > *, .letter .ln, .memory { transform: none !important; transition: opacity .3s !important; }
  .envelope, .env-flap { transition: opacity .3s !important; transform: none !important; }
}