@layer reset, base, components, print;

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-roman-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}

@layer reset {
  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  body, h1, h2, h3, p, dl, dd, figure { margin: 0; }
}

@layer base {
  :root {
    --bg: #0b0e14;
    --bg-raised: #12161f;
    --bg-deep: #06080c;
    --ink: #e7ddc8;
    --ink-dim: rgb(231 221 200 / 0.72);
    --gold: #d9a95e;
    --gold-bright: #eccd92;
    --gold-dim: rgb(217 169 94 / 0.6);
    --gold-faint: rgb(217 169 94 / 0.28);
    --paper: #ece1c9;
    --paper-edge: #d9c9a6;
    --paper-ink: #2b2118;
    --paper-ink-dim: rgb(43 33 24 / 0.66);
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='560'%3E%3Cfilter id='d' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.032 0.026' numOctaves='4' seed='23'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='12'/%3E%3C/filter%3E%3Crect x='7' y='7' width='370' height='546' fill='%23000' filter='url(%23d)'/%3E%3C/svg%3E");
    --fog-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='500'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.009' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.72 0 0 0 0 0.8 0 0 0 0 0.88 0 0 0 1 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }

  html { scrollbar-color: var(--gold-faint) var(--bg); }

  body {
    font-family: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
    background:
      radial-gradient(110% 70% at 50% 108%, rgb(217 169 94 / 0.07), transparent 60%),
      radial-gradient(130% 95% at 50% -10%, var(--bg-raised) 0%, var(--bg) 55%, var(--bg-deep) 100%);
    background-attachment: fixed;
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  /* archival double hairline frame + soft vignette */
  body::before {
    content: "";
    position: fixed;
    inset: 12px;
    border: 1px solid rgb(217 169 94 / 0.16);
    outline: 1px solid rgb(217 169 94 / 0.07);
    outline-offset: -4px;
    box-shadow: inset 0 0 70px rgb(0 0 0 / 0.32);
    pointer-events: none;
  }

  /* film grain over the whole scene */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--noise);
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  ::selection { background: var(--gold-dim); color: var(--bg-deep); }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 2px;
  }
}

@layer components {

  /* ---- stage machinery ---- */

  .scene {
    display: grid;
    place-items: center;
  }

  .stage {
    grid-area: 1 / 1;
    inline-size: 100%;
    min-block-size: 100vh;
    min-block-size: 100svh;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: 3rem 1.5rem 3.5rem;
    max-inline-size: 40rem;
    margin-inline: auto;
    transition: opacity 0.9s ease, translate 0.9s ease;
    transition:
      opacity 0.9s ease,
      translate 0.9s ease,
      display 0.9s allow-discrete;
  }
  .stage[hidden] {
    display: none;
    opacity: 0;
    translate: 0 1.25rem;
  }
  @starting-style {
    .stage:not([hidden]) {
      opacity: 0;
      translate: 0 1.25rem;
    }
  }
  .stage:focus { outline: none; }

  /* staggered entrance of a stage's children; each element sets --d inline */
  .stage > * { animation: rise 0.9s ease both; animation-delay: var(--d, 0.1s); }
  @keyframes rise {
    from { opacity: 0; translate: 0 0.9rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* narrative lines surface one after another, like ink soaking into paper */
  .line { animation: inkin 1.4s ease both; animation-delay: var(--d, 0s); }
  .line-block { display: block; margin-block-start: 0.85em; }
  @keyframes inkin {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ---- shared type ---- */

  .overline {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    margin-inline-start: 0.35em; /* optically re-center the letter-spaced text */
    color: var(--gold-dim);
  }

  .chapter {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-inline-start: 0.2em;
    color: var(--gold-faint);
  }
  .chapter::before, .chapter::after {
    content: "";
    block-size: 1px;
    inline-size: 2.4rem;
  }
  .chapter::before { background: linear-gradient(to left, var(--gold-faint), transparent); }
  .chapter::after { background: linear-gradient(to right, var(--gold-faint), transparent); }

  .narrative {
    font-size: clamp(1.3rem, 2.4vw + 0.85rem, 1.7rem);
    line-height: 1.55;
    text-wrap: pretty;
    margin-block-start: 1.5rem;
    max-inline-size: 32rem;
  }

  .flourish {
    inline-size: 7rem;
    color: var(--gold-faint);
    margin-block-start: 2rem;
  }
  .flourish-intro { margin-block-start: 1.4rem; }

  .btn {
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    text-indent: 0.28em; /* balance the trailing letter-space */
    color: var(--gold-bright);
    background: transparent;
    border: 1px solid var(--gold-faint);
    border-radius: 999px;
    padding: 0.85em 2.2em;
    margin-block-start: 2.5rem;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
  .btn:hover, .btn:active {
    border-color: var(--gold-dim);
    background-color: rgb(217 169 94 / 0.08);
  }

  /* ---- stage 0: the sealed letter ---- */

  .intro-title {
    font-size: clamp(3.2rem, 13vw, 4.8rem);
    font-weight: 500;
    line-height: 1.1;
    margin-block-start: 1rem;
  }

  .seal-button {
    font: inherit;
    background: none;
    border: none;
    padding: 0.5rem;
    margin-block-start: 2.25rem;
    cursor: pointer;
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    color: var(--ink-dim);
    -webkit-tap-highlight-color: transparent;
  }

  .seal {
    inline-size: clamp(7.5rem, 34vw, 9rem);
    filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.55));
    transition: scale 0.4s ease;
  }
  .seal-button:hover .seal { scale: 1.04; }

  .seal-monogram {
    font-family: "Cormorant Garamond", Garamond, Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
  }

  .seal-monogram-large { font-size: 42px; }

  .seal-hint {
    font-size: 1rem;
    font-style: italic;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
  }
  .seal-button:hover .seal-hint { color: var(--gold-bright); }

  /* gentle glow inviting the tap */
  .seal-button::before {
    content: "";
    position: absolute;
    inline-size: 16rem;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
    translate: 0 -1.3rem;
    background: radial-gradient(closest-side, rgb(217 169 94 / 0.14), transparent 70%);
    pointer-events: none;
    animation: breathe 4s ease-in-out infinite;
  }
  .seal-button { position: relative; }
  @keyframes breathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }

  .seal-half {
    transform-box: fill-box;
    transform-origin: center;
    transition: translate 0.55s cubic-bezier(0.45, 0, 0.8, 0.6) 1s,
                rotate 0.55s cubic-bezier(0.45, 0, 0.8, 0.6) 1s;
  }
  .seal-crack {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
  }
  /* the crack advances in jolts, hesitating twice before it gives way */
  .seal-button.broken .seal-crack { animation: crack 0.95s ease-out forwards; }
  @keyframes crack {
    0%   { stroke-dashoffset: 240; }
    28%  { stroke-dashoffset: 160; }
    42%  { stroke-dashoffset: 152; }
    66%  { stroke-dashoffset: 60; }
    76%  { stroke-dashoffset: 54; }
    100% { stroke-dashoffset: 0; }
  }
  .seal-button.broken .seal { animation: shudder 0.95s ease; }
  @keyframes shudder {
    0%, 100% { rotate: 0deg; }
    22% { rotate: -0.9deg; }
    42% { rotate: 1deg; }
    62% { rotate: -0.7deg; }
    82% { rotate: 0.5deg; }
  }
  .seal-button.broken::before { animation: none; opacity: 0; transition: opacity 0.7s ease; }
  .seal-button.broken .seal-left  { translate: -11px 4px; rotate: -7deg; }
  .seal-button.broken .seal-right { translate: 11px -3px; rotate: 6deg; }
  .seal-button.broken { cursor: default; }
  .seal-button.broken .seal-hint { opacity: 0; transition: opacity 0.3s ease; }

  /* ---- stage 2: the street lamp ---- */

  .lamp-wrap {
    position: relative;
    margin-block-start: 0.75rem;
    display: grid;
    place-items: center;
  }
  .lamp {
    inline-size: clamp(4.5rem, 16vw, 6rem);
    color: rgb(200 163 95 / 0.8);
  }
  .lamp-glow {
    position: absolute;
    inset: -30% -80%;
    background: radial-gradient(closest-side at 50% 30%, rgb(255 205 120 / 0.22), transparent 70%);
    pointer-events: none;
    animation: ignite 1.5s linear 1.3s both, flicker 5s linear 2.8s infinite;
  }
  .lamp-flame { animation: ignite 1.5s linear 1.3s both, flicker 5s linear 2.8s infinite reverse; }
  /* the flame sputters twice before it catches */
  @keyframes ignite {
    0%   { opacity: 0; }
    12%  { opacity: 0.85; }
    20%  { opacity: 0.1; }
    34%  { opacity: 0.7; }
    44%  { opacity: 0.25; }
    62%  { opacity: 1; }
    100% { opacity: 1; }
  }
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    41% { opacity: 1; }
    43% { opacity: 0.72; }
    45% { opacity: 0.95; }
    60% { opacity: 0.85; }
    62% { opacity: 1; }
    78% { opacity: 0.9; }
    80% { opacity: 1; }
  }

  /* ---- final stage: reveal + keepsake ---- */

  .stage-final { row-gap: 0; }

  .reveal-title {
    font-size: clamp(2.5rem, 8.5vw, 3.7rem);
    font-weight: 600;
    line-height: 1.12;
    text-wrap: balance;
    margin-block-start: 1.25rem;
    color: var(--gold-bright);
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .reveal-title {
      background: linear-gradient(165deg, #f4e0b0 10%, var(--gold) 55%, #b07c33 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }

  .stage-final .reveal-title {
    animation: title-in 1.8s ease-out both;
    animation-delay: var(--d, 0s);
  }
  @keyframes title-in {
    from { opacity: 0; filter: blur(9px); scale: 1.05; }
    to   { opacity: 1; filter: blur(0); scale: 1; }
  }

  .reveal-sub {
    font-size: clamp(1.2rem, 2vw + 0.8rem, 1.4rem);
    font-style: italic;
    color: var(--ink-dim);
    text-wrap: pretty;
    max-inline-size: 28rem;
    margin-block-start: 1.25rem;
  }

  .ticket-shadow {
    filter: drop-shadow(0 22px 45px rgb(0 0 0 / 0.55));
    margin-block-start: 2.75rem;
    inline-size: min(100%, 24rem);
    perspective: 1400px;
    animation: ticket-in 1.2s cubic-bezier(0.16, 0.8, 0.3, 1) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes ticket-in {
    from { opacity: 0; translate: 0 2.5rem; scale: 0.955; rotate: -2deg; }
    to   { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
  }

  .ticket {
    --tear: 6.1rem;      /* distance of the tear line from the bottom edge */
    --notch: 0.75rem;
    position: relative;
    color: var(--paper-ink);
    text-align: center;
    text-shadow: 0 1px 0 rgb(255 250 235 / 0.35); /* letterpress deboss */
    padding: 1.9rem 1.6rem 1.4rem;
    /* foxing spots, a tideline, scuffs and a fold crease age the card stock */
    background:
      var(--noise),
      linear-gradient(178deg, transparent 35.2%, rgb(61 45 27 / 0.45) 35.7%, rgb(255 247 227 / 0.9) 36.1%, transparent 36.7%),
      linear-gradient(107deg, transparent 46%, rgb(255 250 237 / 0.26) 46.3%, transparent 46.9%),
      linear-gradient(74deg, transparent 63.4%, rgb(255 250 237 / 0.18) 63.7%, transparent 64.2%),
      radial-gradient(4.5rem 3rem at 80% 14%, rgb(146 104 54 / 0.2), rgb(146 104 54 / 0.08) 55%, transparent 75%),
      radial-gradient(3rem 2.2rem at 14% 62%, rgb(132 94 48 / 0.17), transparent 70%),
      radial-gradient(1.6rem 1.3rem at 30% 30%, rgb(146 104 54 / 0.14), transparent 75%),
      radial-gradient(7rem 5.2rem at 68% 92%, transparent 58%, rgb(139 99 52 / 0.16) 66%, rgb(139 99 52 / 0.05) 71%, transparent 79%),
      radial-gradient(135% 110% at 50% 40%, transparent 52%, rgb(110 80 44 / 0.14) 80%, rgb(86 60 30 / 0.3) 100%),
      radial-gradient(120% 100% at 50% 0%, #f2e9d4 0%, var(--paper) 55%, var(--paper-edge) 100%);
    background-blend-mode: overlay, soft-light, screen, screen, multiply, multiply, multiply, multiply, multiply, normal;
    /* deckled edges, a row of punched perforation holes, and the two side notches */
    mask-image:
      var(--deckle),
      radial-gradient(circle 2.2px at 50% calc(100% - var(--tear)), transparent 97%, #000),
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--tear)), transparent 98%, #000),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--tear)), transparent 98%, #000);
    mask-size: 100% 100%, 11px 100%, auto, auto;
    mask-repeat: no-repeat, repeat-x, no-repeat, no-repeat;
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }


  /* faint archival watermark */
  .ticket::after {
    content: "B" / "";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11rem;
    font-style: italic;
    font-weight: 400;
    color: rgb(43 33 24 / 0.09);
    text-shadow: none;
    -webkit-mask-image: var(--noise);
    mask-image: var(--noise);
    pointer-events: none;
  }

  .ticket > * { position: relative; z-index: 1; }

  .ticket-overline {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    margin-inline-start: 0.32em;
    color: var(--paper-ink-dim);
  }

  .ticket-title {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    margin-block-start: 0.6rem;
  }

  .ticket-sub {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--paper-ink-dim);
    margin-block-start: 0.25rem;
  }

  .ticket-flourish {
    display: block;
    margin-inline: auto;
    margin-block-start: 1.1rem;
    color: rgb(43 33 24 / 0.6);
    -webkit-mask-image: var(--noise);
    -webkit-mask-size: 190px;
    mask-image: var(--noise);
    mask-size: 190px;
  }

  .ticket-facts {
    display: grid;
    gap: 0.7rem;
    margin-block-start: 1.2rem;
  }
  .ticket-facts dt {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-inline-start: 0.3em;
    color: var(--paper-ink-dim);
  }
  .ticket-facts dd {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .ticket-stub {
    position: relative;
    margin-block-start: 1.3rem;
    margin-inline: -1.6rem;
    padding: 0.95rem 1.6rem 0.35rem;
    border-block-start: 1px dashed rgb(43 33 24 / 0.3);
  }

  .ticket-names {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .ticket-for {
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
    color: var(--paper-ink-dim);
    margin-inline-end: 0.15em;
  }
  .ticket-amp {
    font-style: italic;
    font-weight: 400;
  }

  .ticket-stamp {
    text-shadow: none;
    position: absolute;
    inline-size: 2.7rem;
    inset-inline-end: 0.7rem;
    inset-block-start: 0.7rem;
    rotate: -9deg;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgb(43 33 24 / 0.35));
  }

  .ticket-note {
    font-size: 0.78rem;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--paper-ink-dim);
    margin-block-start: 0.3rem;
  }

  .outro {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 2.75rem;
  }
  .outro-big {
    font-size: clamp(1.6rem, 4.5vw, 2rem);
    font-weight: 600;
  }
  .outro-heart {
    inline-size: 0.72em;
    color: #a63d49;
    vertical-align: -0.05em;
    display: block;
  }
  @keyframes heartbeat {
    0%, 24%, 100% { scale: 1; }
    7%  { scale: 1.22; }
    14% { scale: 1; }
    18% { scale: 1.12; }
  }
  .outro-small {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink-dim);
  }

  /* ---- final stage interactions: flip, seal, lantern, embers ---- */

  .ticket-flip {
    display: grid;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    transition: transform 1.1s cubic-bezier(0.24, 0.7, 0.25, 1);
  }
  .stage-final.flipped .ticket-flip { transform: rotateY(0deg); }
  /* the card peeks a little on hover, hinting that it turns */
  .stage-final:not(.flipped) .ticket-flip:has(.ticket-back:hover) { transform: rotateY(172deg); }
  .ticket-flip > * {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .ticket-back {
    font: inherit;
    border: none;
    cursor: pointer;
    display: grid;
    place-content: center;
    gap: 0.8rem;
    transform: rotateY(180deg);
    -webkit-tap-highlight-color: transparent;
  }
  .ticket-back .ticket-flourish { margin-block-start: 0.1rem; }
  .ticket-back-no {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
  }

  .ticket-hint {
    font-size: 1rem;
    font-style: italic;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    margin-block-start: 1.5rem;
    min-block-size: 1.5em;
    transition: opacity 0.35s ease;
  }
  .ticket-hint.swap { opacity: 0; }
  .stage-final.sealed .ticket-hint { animation: none; opacity: 0; }

  .stamp-target {
    position: absolute;
    inset-inline-end: 0.55rem;
    inset-block-start: 0.55rem;
    inline-size: 3rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgb(43 33 24 / 0.5);
    background: rgb(43 33 24 / 0.05);
    border: 1.5px dashed rgb(43 33 24 / 0.5);
    border-radius: 50%;
    rotate: -9deg;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .stage-final.flipped .stamp-target:enabled {
    opacity: 1;
    pointer-events: auto;
    animation: target-pulse 2.6s ease-in-out 1s infinite;
  }
  .stamp-target:hover { background: rgb(43 33 24 / 0.12); }
  @keyframes target-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.09; }
  }

  .stage-final.sealed .ticket-stamp {
    animation: stamp-press 0.65s cubic-bezier(0.35, 1.4, 0.45, 1) both;
  }
  @keyframes stamp-press {
    0%   { opacity: 0; scale: 2.1; filter: drop-shadow(0 16px 18px rgb(43 33 24 / 0.5)); }
    55%  { opacity: 0.95; scale: 0.85; filter: drop-shadow(0 1px 2px rgb(43 33 24 / 0.45)); }
    78%  { scale: 1.07; }
    100% { opacity: 0.9; scale: 1; filter: drop-shadow(0 2px 4px rgb(43 33 24 / 0.35)); }
  }
  /* the card takes the blow */
  .stage-final.sealed .ticket { animation: ticket-jolt 0.45s ease 0.25s; }
  @keyframes ticket-jolt {
    0%, 100% { translate: 0 0; }
    35% { translate: 0 3px; }
    65% { translate: 0 -1px; }
  }

  .stage-final .outro {
    animation: none;
    opacity: 0;
    translate: 0 0.9rem;
    visibility: hidden;
    transition: opacity 0.9s ease, translate 0.9s ease, visibility 0s 0.9s;
  }
  .stage-final.sealed .outro {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition-delay: 0.7s;
  }
  .stage-final.sealed .outro-heart { animation: heartbeat 2.4s ease-in-out 2s infinite; }

  .heart-button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    vertical-align: -0.05em;
    transition: scale 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .heart-button:active { scale: 1.2; }

  .ember {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 30%;
    inline-size: var(--e-size, 0.3rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe9b8, #e8a05c 55%, #a63d49 100%);
    box-shadow: 0 0 6px rgb(255 200 120 / 0.6);
    pointer-events: none;
    animation: ember-rise var(--e-dur, 1.4s) ease-out var(--e-delay, 0s) both;
  }
  @keyframes ember-rise {
    0%   { opacity: 0; translate: 0 0; scale: 0.6; }
    12%  { opacity: 1; scale: 1; }
    100% { opacity: 0; translate: calc(var(--ex, 0) * 3.4rem) calc(var(--ey, 1) * -4.6rem); scale: 0.25; }
  }

  /* night falls over the scene; a lantern glow trails the pointer */
  .lantern-veil {
    --lx: 50%;
    --ly: 55%;
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
      radial-gradient(circle at var(--lx) var(--ly), rgb(255 205 120 / 0.09), transparent 10rem),
      radial-gradient(circle at var(--lx) var(--ly), transparent 7rem, rgb(4 6 11 / 0.5) 19rem);
    animation: veil-in 3s ease 4.6s both;
    transition: opacity 2s ease;
  }
  @keyframes veil-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* once the date is sealed, the night eases up */
  .stage-final.sealed .lantern-veil { animation: none; opacity: 0.25; }

  /* ---- atmosphere: drifting fog and stray glimmers ---- */

  .atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }

  /* turbulence clouds, thinned toward reading height by a vertical mask;
     drift distance is a whole number of texture tiles so the loop stays seamless */
  .fog-layer {
    position: absolute;
    inset-block: -12%;
    inset-inline-start: 0;
  }
  .fog-far {
    inline-size: calc(100vw + 144rem);
    background: var(--fog-tex) 0 0 / 72rem 40rem repeat;
    mask-image: linear-gradient(to bottom,
      rgb(255 255 255 / 0.34),
      rgb(255 255 255 / 0.18) 40%,
      rgb(255 255 255 / 0.1) 70%,
      rgb(255 255 255 / 0.26) 100%);
    animation: fog-drift-far 280s linear infinite;
  }
  @keyframes fog-drift-far {
    to { translate: -144rem 0; }
  }
  .fog-near {
    inline-size: calc(100vw + 96rem);
    background: var(--fog-tex) 0 0 / 48rem 28rem repeat;
    mask-image: linear-gradient(to top,
      rgb(255 255 255 / 0.6),
      rgb(255 255 255 / 0.3) 30%,
      rgb(255 255 255 / 0.08) 65%,
      transparent 85%);
    animation: fog-drift-near 140s linear infinite reverse;
  }
  @keyframes fog-drift-near {
    to { translate: -96rem 0; }
  }

  /* thin ground mist in front of the scene */
  .mist-front {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--fog-tex) 0 0 / 40rem 24rem repeat;
    mask-image:
      radial-gradient(72% 50% at 20% 102%, rgb(255 255 255 / 0.85), transparent 75%),
      radial-gradient(62% 44% at 80% 104%, rgb(255 255 255 / 0.7), transparent 75%);
    animation: mist-breathe 22s ease-in-out infinite;
  }
  @keyframes mist-breathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
  }

  .glimmers {
    position: absolute;
    inset: 0;
  }
  .glimmer {
    position: absolute;
    inset-inline-start: var(--gx, 50%);
    inset-block-start: var(--gy, 50%);
    inline-size: var(--g-size, 3px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #f4e0b0 0%, rgb(217 169 94 / 0.55) 45%, transparent 72%);
    box-shadow: 0 0 6px rgb(217 169 94 / 0.35);
    opacity: 0;
    animation: glimmer var(--g-dur, 6s) ease-in-out var(--g-delay, 0s) infinite;
  }
  @keyframes glimmer {
    0%   { opacity: 0; translate: 0 0; scale: 0.5; }
    45%  { opacity: var(--g-peak, 0.6); scale: 1; }
    100% { opacity: 0; translate: calc(var(--g-dx, 0) * 1.5rem) -1.6rem; scale: 0.45; }
  }

  /* ---- reduced motion ---- */

  @media (max-width: 26rem) {
    .stage { padding: 2.25rem 1.25rem 2.75rem; }
    .btn { margin-block-start: 2rem; }
    .narrative { margin-block-start: 1.25rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .stage { transition-duration: 0.01s; }
    .stage > *,
    .line,
    .stage-final .reveal-title,
    .ticket-shadow,
    .outro-heart { animation: none; }
    .seal-button::before,
    .lamp-glow,
    .lamp-flame { animation: none; }
    .seal-half { transition: none; }
    .seal { transition: none; }
    .ticket-flip { transition: none; }
    .ticket-hint { transition: none; }
    .stage-final.flipped .stamp-target:enabled { animation: none; }
    .stage-final .outro { transition: none; }
    .stage-final.sealed .ticket { animation: none; }
    .stage-final.sealed .ticket-stamp { animation: none; opacity: 0.9; }
    .stage-final.sealed .outro-heart { animation: none; }
    .lantern-veil { display: none; }
    .fog-layer, .mist-front, .glimmer { animation: none; }
  }
}

@layer print {
  @media print {
    body { background: #fff; }
    body::before, body::after { content: none; }
    .atmosphere, .mist-front { display: none; }
    .stage { display: none !important; }
    #stage-final {
      display: grid !important;
      opacity: 1 !important;
      translate: none !important;
      min-block-size: auto;
    }
    #stage-final > :not(.ticket-shadow) { display: none !important; }
    .stage > *, .line, .ticket-shadow { animation: none !important; }
    .ticket-shadow { filter: none; margin-block-start: 0; perspective: none; }
    .ticket-flip { transform: none !important; transition: none; }
    .ticket-back, .stamp-target { display: none !important; }
    .ticket-stamp { opacity: 0.9 !important; animation: none !important; }
    .ticket {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
      border: 1px solid var(--paper-edge);
    }
  }
}