/* CKrsvp — storybook invitation (story.html). Shares fonts and colours with styles.css. */

@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("fonts/marcellus.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }

:root {
  --ivory: #fffaf4;
  --blush: #f8e4e8;
  --pastel: #f6cdd9;
  --rose: #b8476e;
  --rose-deep: #8c2c50;
  --rose-ink: #6e2141;
  --ink: #4b3236;
  --champagne: #e9cf99;
  --gold: #b68a3e;
  --gold-ink: #85601f;
  --night: #3a1e28;

  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --caps: "Marcellus", Georgia, serif;
  --serif: "EB Garamond", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(70rem 50rem at 50% 30%, #5a2e3e 0%, transparent 70%),
    var(--night);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid #ffd6e2; outline-offset: 3px; border-radius: 6px; }

/* ---------- Stage: full screen on phones, 9:16 on wider screens ---------- */

/* A fixed full-window box is always exactly the visible screen, even with browser toolbars. */
.story { position: fixed; inset: 0; display: grid; place-items: center; }
.stage {
  position: relative;
  height: 100%;
  /* 9:16 on wide screens; on phones narrower than that, the whole screen. */
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  overflow: hidden;
  overflow: clip;          /* never scrollable, so taps and focus can't shift the scene */
  container-type: size;
  background: var(--blush);
  isolation: isolate;
}
@media (min-aspect-ratio: 10/16) {
  .stage { box-shadow: 0 0 80px rgba(0, 0, 0, .45); }
}

.particles { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Scenes ---------- */

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.scene.is-active { opacity: 1; visibility: visible; transition: opacity 1.4s ease, visibility 0s; z-index: 2; }
.scene__bg { position: absolute; inset: -3%; transform-origin: 50% 60%; }
.scene.is-active .scene__bg { animation: drift var(--scene-dur, 12s) linear both; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Pausing freezes every animation in the story. */
.stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after { animation-play-state: paused !important; }

.sky { background: linear-gradient(180deg, #f4c6d4 0%, #f9dde5 38%, #fdeee9 62%, #f7e3c8 100%); }
.sky--rose { background: linear-gradient(180deg, #eab0c4 0%, #f6cfdb 40%, #fde8ec 70%, #f4ddc0 100%); }
.sky--ivory { background: radial-gradient(90% 60% at 50% 40%, #fffaf4 0%, #f9e6ea 60%, #f2cfd9 100%); }
.sky--sunset { background: linear-gradient(180deg, #d98fb0 0%, #f0a9b9 30%, #f8c9b4 58%, #fbe0bd 78%, #f6d2c6 100%); }
.garden { background: linear-gradient(180deg, #fbe6ec 0%, #f7dbe3 45%, #eef0e2 78%, #dfe9d6 100%); }

.glow { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; }
.glow--gold { left: 15%; right: 15%; top: 38%; height: 38%; background: radial-gradient(circle, rgba(255, 228, 160, .8), rgba(255, 228, 160, 0) 70%); animation: breathe 6s ease-in-out infinite; }
.glow--crown { left: 20%; right: 20%; top: 4%; height: 32%; background: radial-gradient(circle, rgba(255, 236, 180, .95), rgba(255, 236, 180, 0) 70%); animation: breathe 4s ease-in-out infinite; }
.glow--sunset { left: -10%; right: -10%; top: 40%; height: 40%; background: radial-gradient(circle, rgba(255, 214, 150, .85), rgba(255, 214, 150, 0) 70%); }
@keyframes breathe { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

.stars { position: absolute; inset: 0 0 45% 0; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fffbe8; box-shadow: 0 0 6px 2px rgba(255, 244, 205, .8); animation: twinkle 3s ease-in-out infinite; }
.star--spark { width: auto; height: auto; background: none; box-shadow: none; }
.star--spark svg { width: 100%; height: 100%; }
@keyframes twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1; } }

.cloud { position: absolute; height: 9%; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(14px); animation: cloud 40s linear infinite; }
.cloud--a { width: 60%; top: 14%; left: -20%; }
.cloud--b { width: 45%; top: 26%; left: 55%; animation-duration: 55s; animation-direction: reverse; opacity: .6; }
.cloud--c { width: 70%; top: 44%; left: 10%; height: 7%; animation-duration: 70s; opacity: .5; }
@keyframes cloud { from { translate: -8% 0; } to { translate: 8% 0; } }

.castle { position: absolute; left: 50%; translate: -50% 0; filter: drop-shadow(0 10px 18px rgba(140, 44, 80, .25)); }
.castle--far { width: 78%; bottom: 15%; }
.castle--grand { width: 80%; bottom: 13%; filter: drop-shadow(0 0 22px rgba(255, 226, 160, .7)) drop-shadow(0 12px 18px rgba(140, 44, 80, .3)); }
.scene--3.is-active .castle--grand { animation: rise 3s var(--ease) both; }
@keyframes rise { from { translate: -50% 8%; opacity: .4; } to { translate: -50% 0; opacity: 1; } }
.castle--sunset { width: 70%; bottom: 10%; opacity: .55; filter: drop-shadow(0 0 18px rgba(255, 214, 150, .8)); }

.crown-glow {
  position: absolute; left: 50%; top: 9%; width: 30%; translate: -50% 0;
  filter: drop-shadow(0 0 14px rgba(255, 228, 160, .95));
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -6%; } }

/* Rose clusters built by story.js */
.roses { position: absolute; inset: 0; pointer-events: none; }
.rose { position: absolute; }
.rose svg { width: 100%; height: auto; overflow: visible; }

.hearts { position: absolute; inset: 0; pointer-events: none; }
.heart { position: absolute; bottom: -8%; width: 6cqw; opacity: 0; animation: heart-rise 11s ease-in infinite; }
@keyframes heart-rise {
  0% { translate: 0 0; opacity: 0; }
  12% { opacity: .9; }
  100% { translate: 4cqw -110cqh; opacity: 0; }
}

.bfly { position: absolute; width: 11cqw; animation: flutter 5s ease-in-out infinite; z-index: 3; }
.bfly--1 { top: 9%; left: 8%; }
.bfly--2 { top: 16%; right: 8%; width: 9cqw; animation-delay: -2s; }
.bfly--3 { bottom: 26%; right: 14%; width: 8cqw; animation-delay: -3.4s; }
@keyframes flutter {
  0%, 100% { translate: 0 0; rotate: -6deg; scale: 1 1; }
  25% { scale: .8 1; }
  50% { translate: -6px -12px; rotate: 5deg; scale: 1 1; }
  75% { scale: .84 1; }
}

.bokeh { position: absolute; inset: 0; }

/* Scene 1, "pink roses and twinkling stars": more stars and roses bloom in */
.stars--bloom { inset: 0 0 35% 0; }
.stars--bloom .star { animation-duration: 1.8s; }
.roses--bloom.reveal { translate: 0 8cqh; transition: opacity 1.4s ease, translate 1.8s var(--ease); }
.roses--bloom.reveal.is-shown { translate: 0 0; }
.bokeh i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 190, .55), rgba(255, 236, 190, 0) 70%); animation: breathe 7s ease-in-out infinite; }

/* ---------- Text ---------- */

.scene__text { position: absolute; left: 6%; right: 6%; z-index: 4; text-align: center; }
.scene__text--top { top: 11%; }
.scene__text--mid { top: 23%; }

.reveal { opacity: 0; translate: 0 1.2cqh; transition: opacity 1.1s ease, translate 1.2s var(--ease); }
.reveal.is-shown { opacity: 1; translate: 0 0; }
/* A frame waiting for its first photo stays out of sight. */
.spot.is-empty, .card__medal.is-empty, .finale__photo.is-empty { opacity: 0; }

.t-once, .t-name, .t-kicker, .t-big, .t-wait, .t-love { margin: 0; text-shadow: 0 2px 14px rgba(255, 250, 244, .9); }
.t-once { font: 400 12cqw/1.1 var(--script); color: var(--rose-deep); }
.t-name {
  margin-top: 1.5cqh;
  font: 400 19cqw/1.1 var(--script);
  background: linear-gradient(180deg, #a8325a 0%, #c75580 55%, #8c2c50 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 250, 244, .9));
  text-shadow: none;
}
.t-kicker { font: 400 5.2cqw/1.3 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--rose-ink); }
.t-big { margin-top: 1.5cqh; font: 400 12.5cqw/1.1 var(--script); color: var(--rose-deep); }

/* ---------- Photo cyclers: crossfade with a slow, gentle zoom ---------- */

.cyc { position: relative; overflow: hidden; }
.cyc > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
}
.cyc > img.is-on { opacity: 1; animation: kenburns 7s ease-out both; }
@keyframes kenburns { from { scale: 1.14; } to { scale: 1.02; } }

/* ---------- Scene 2: the royal portrait gallery ---------- */

.gallery-hall {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.2'%3E%3Cpath d='M28 9c6 8 6 13 0 19-6-6-6-11 0-19zM28 47c6-8 6-13 0-19-6 6-6 11 0 19zM9 28c8-6 13-6 19 0-6 6-11 6-19 0zM47 28c-8-6-13-6-19 0 6 6 11 6 19 0z'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='2' fill='%23c99a4b' fill-opacity='.45'/%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%23c99a4b' fill-opacity='.35'/%3E%3Ccircle cx='56' cy='56' r='1.6' fill='%23c99a4b' fill-opacity='.35'/%3E%3C/svg%3E") 0 0 / 15cqw 15cqw,
    linear-gradient(180deg, #f7d2dd 0%, #fbe5ec 55%, #f6d6df 100%);
}
.hall-glow { position: absolute; left: 10%; right: 10%; top: 18%; height: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 214, .9), rgba(255, 244, 214, 0) 70%); filter: blur(10px); }
.hall-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
  background: linear-gradient(180deg, #f3d9c9 0%, #f8e5d7 40%, #f2d3cf 100%);
  box-shadow: 0 -2px 0 #e4c98f, 0 -6px 16px -6px rgba(140, 44, 80, .25);
}
.drape { position: absolute; z-index: 3; top: 0; width: 25%; height: 80%; filter: drop-shadow(0 8px 10px rgba(110, 33, 65, .3)); pointer-events: none; }
.drape--l { left: 0; }
.drape--r { right: 0; transform: scaleX(-1); }
.valance { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 7.5%; filter: drop-shadow(0 6px 6px rgba(110, 33, 65, .3)); pointer-events: none; }
.hall-title {
  position: absolute; z-index: 4; left: 18%; right: 18%; top: 9.5%; margin: 0; text-align: center;
  font: 400 8.6cqw/1.05 var(--script); color: var(--rose-deep);
  text-shadow: 0 2px 10px rgba(255, 250, 244, .9);
}

/* Scene 1: her newborn photo in a gold oval, in front of the castle */
.opening { position: absolute; z-index: 4; left: 50%; top: 31%; width: min(38cqw, 21cqh); margin: 0; translate: -50% 0; }
.opening.reveal { translate: -50% 2cqh; scale: .9; transition: opacity 1.4s ease, translate 1.6s var(--ease), scale 1.6s var(--ease); }
.opening.reveal.is-shown { translate: -50% 0; scale: 1; }
.opening__oval { aspect-ratio: 4 / 5; padding: 1.4cqw; border-radius: 50%; background: linear-gradient(135deg, #9a6b25, #ecd08e 30%, #b68a3e 55%, #f3e0a6 80%, #a5762e); box-shadow: 0 0 34px rgba(255, 228, 160, .75); }
.opening__oval img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 1cqw solid var(--ivory); }

/* ---------- Beat frames: one photo per spoken phrase ---------- */

/* Sized from the screen height too, so the frame always sits above the subtitles. */
.spot { position: absolute; z-index: 4; left: 50%; margin: 0; translate: -50% 0; text-align: center; transition: opacity .8s ease; }
.spot__gold {
  padding: 1.6cqw;
  background: linear-gradient(135deg, #9a6b25, #ecd08e 28%, #b68a3e 52%, #f3e0a6 76%, #a5762e);
  box-shadow: 0 0 0 1px rgba(255, 250, 244, .6) inset, 0 0 30px rgba(255, 228, 160, .6), 0 3cqw 5cqw -2cqw rgba(110, 33, 65, .55);
}
.spot__img { aspect-ratio: 4 / 5; border: 1.1cqw solid var(--ivory); background: linear-gradient(160deg, #fbe1e8, #f3c8d4); }

/* Scene 2: a tall arched portrait under the curtains */
.spot--hall { top: 19.5%; width: min(56cqw, 30cqh); }
.spot--hall .spot__gold { border-radius: 50% 50% 2.4cqw 2.4cqw / 34% 34% 2.4cqw 2.4cqw; animation: sway 7s ease-in-out infinite; transform-origin: 50% 0; }
.spot--hall .spot__img { border-radius: 50% 50% 1.4cqw 1.4cqw / 34% 34% 1.4cqw 1.4cqw; }
.spot--hall.reveal { translate: -50% -3cqh; scale: .92; transition: opacity 1.2s ease, translate 1.5s var(--ease), scale 1.5s var(--ease); }
.spot--hall.reveal.is-shown { translate: -50% 0; scale: 1; }
@keyframes sway { 0%, 100% { rotate: -.8deg; } 50% { rotate: .8deg; } }
.spot__plaque {
  position: relative; display: inline-block; margin: -3cqw auto 0; padding: .5cqw 3.4cqw 1cqw;
  font: 400 min(7.4cqw, 4cqh)/1.1 var(--script); color: var(--rose-deep); white-space: nowrap;
  background: linear-gradient(180deg, #fffaf4, #fbeee2);
  border: 1px solid #d7b878; border-radius: 1.4cqw;
  box-shadow: 0 1cqw 2cqw -1cqw rgba(110, 33, 65, .45);
  transition: opacity .4s ease;
}

/* Scene 3: an oval medallion under the crown */
.spot--medal { top: 31%; width: min(42cqw, 23cqh); }
.spot--medal .spot__gold, .spot--medal .spot__img { border-radius: 50%; }
.spot--medal .spot__plaque { margin-top: -2.4cqw; }
.spot.is-empty { scale: .9; }
.spot--medal { transition: opacity .8s ease, scale .8s var(--ease); }

.is-hidden { opacity: 0; }

/* ---------- Scene 4: the invitation card ---------- */

.card {
  position: absolute; z-index: 4; left: 8%; right: 8%; top: 15%;
  padding: 17cqw 6cqw 5cqw;
  text-align: center;
  background: var(--ivory);
  border-radius: 50cqw 50cqw 3cqw 3cqw / 34cqw 34cqw 3cqw 3cqw;
  box-shadow: 0 0 0 1.5px var(--champagne), 0 0 0 7px var(--ivory), 0 0 0 8.5px rgba(182, 138, 62, .6), 0 5cqw 9cqw -4cqw rgba(110, 33, 65, .55);
}
.card__medal { position: absolute; top: -15cqw; left: 50%; width: 30cqw; translate: -50% 0; }
.card__medal-crown { position: absolute; z-index: 2; top: -6cqw; left: 50%; width: 12cqw; translate: -50% 0; filter: drop-shadow(0 0 8px rgba(255, 228, 160, .9)); }
.card__medal-photo {
  aspect-ratio: 1; border-radius: 50%; border: 1.1cqw solid var(--ivory);
  box-shadow: 0 0 0 1.2cqw #d7b878, 0 0 0 1.6cqw rgba(255, 250, 244, .9), 0 3cqw 5cqw -2cqw rgba(110, 33, 65, .55);
  background: var(--pastel);
}
.card__title { margin: 0; font: 400 4.6cqw/1.35 var(--caps); letter-spacing: .14em; color: var(--rose-ink); }
.card__occasion { margin: 1cqw 0 0; font: 400 9cqw/1.12 var(--script); color: var(--rose-deep); }
.card__rule { width: 50%; margin: 2cqw auto; }
.card__date { margin: 0; font: 400 10.5cqw/1 var(--caps); color: var(--rose-deep); }
.card__time { margin: 2.2cqw 0 0; font: 500 6.2cqw/1.2 var(--serif); color: var(--ink); }
.card__venue { margin: 2.6cqw 0 0; font: 400 4.4cqw/1.5 var(--caps); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.card__venue span { display: block; }

/* ---------- Scene 5: the finale ---------- */

.finale { position: absolute; z-index: 4; inset: 6% 6% 0; text-align: center; }
.finale__photo { position: relative; width: 46%; margin: 5cqw auto 0; }
.finale__oval { aspect-ratio: 4 / 5; padding: 1.6cqw; border-radius: 50%; background: linear-gradient(135deg, #9a6b25, #ecd08e 30%, #b68a3e 55%, #f3e0a6 80%, #a5762e); box-shadow: 0 0 40px rgba(255, 228, 160, .7); }
.finale__photos { width: 100%; height: 100%; border-radius: 50%; border: 1.2cqw solid var(--ivory); background: var(--pastel); }
.finale__crown { position: absolute; z-index: 2; left: 50%; top: -9cqw; width: 18cqw; translate: -50% 0; filter: drop-shadow(0 0 10px rgba(255, 228, 160, .9)); }
.t-wait { margin-top: 3.5cqw; font: 400 9.8cqw/1.12 var(--script); color: var(--rose-ink); }
.t-love { margin-top: 2.5cqw; font: 400 4.6cqw/1.3 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-ink); }
.t-love span { display: block; margin-top: 1cqw; font: 400 9cqw/1.1 var(--script); letter-spacing: 0; text-transform: none; color: var(--rose-deep); }
.finale__credit { margin: 2.5cqw 0 0; font: italic 400 3.3cqw/1.3 var(--serif); color: rgba(110, 33, 65, .85); }
.storytext__credit { margin-top: 1rem !important; font-size: .9rem !important; font-style: italic; color: #6c4e54; text-align: center; }
.finale__actions { display: grid; gap: 2.2cqw; width: min(78%, 22rem); margin: 3cqw auto 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: 0 1.4rem;
  font: 400 1rem/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.2rem; height: 1.2rem; }
.btn--rsvp, .btn--open {
  color: var(--ivory); background: var(--rose-deep);
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4.5px var(--champagne), 0 14px 26px -12px rgba(58, 30, 40, .7);
}
.btn--rsvp:hover, .btn--open:hover { background: var(--rose-ink); }
.btn--rsvp[aria-disabled="true"] { opacity: .7; cursor: default; }
.btn--ghost { color: var(--rose-ink); background: rgba(255, 250, 244, .9); box-shadow: inset 0 0 0 1.5px var(--champagne); }
.btn--link { color: var(--rose-ink); background: none; text-decoration: underline; text-underline-offset: .25em; min-height: 2.75rem; }

/* ---------- Subtitles: a parchment plaque ---------- */

.subs {
  position: absolute; z-index: 7; left: 4.5%; right: 4.5%;
  bottom: calc(env(safe-area-inset-bottom) + 5.9rem);
  display: flex; justify-content: center; pointer-events: none;
  transition: opacity .4s;
}
.plaque {
  display: flex; align-items: center; gap: .55rem;
  max-width: 34rem; padding: .6rem 1rem;
  background: linear-gradient(180deg, #fffaf4 0%, #fdf1e4 100%);
  border: 1.5px solid #d7b878;
  border-radius: 1.3rem;
  box-shadow: 0 0 0 4px rgba(255, 250, 244, .8), 0 0 0 5.5px rgba(182, 138, 62, .6), 0 12px 26px -12px rgba(58, 30, 40, .6);
  transition: opacity .35s ease, translate .35s var(--ease);
}
.plaque.is-empty { opacity: 0; translate: 0 .4rem; }
.plaque__gem { flex: none; width: .9rem; height: .9rem; }
.plaque__text {
  margin: 0;
  font: 500 clamp(.95rem, 4.2cqw, 1.3rem)/1.38 var(--serif);
  color: var(--rose-ink); text-align: center;
}
.subs.is-off { opacity: 0; }

/* ---------- Gold storybook border ---------- */

.ornate {
  position: absolute; z-index: 9; inset: 2.4cqw; pointer-events: none;
  border: 1.5px solid rgba(215, 184, 120, .9);
  border-radius: 2.4cqw;
  box-shadow: inset 0 0 0 4px rgba(255, 250, 244, .3), inset 0 0 0 5.5px rgba(215, 184, 120, .5), 0 0 0 30cqw rgba(58, 30, 40, .06);
}
.ornate__c { position: absolute; width: 17cqw; height: 17cqw; filter: drop-shadow(0 1px 2px rgba(110, 33, 65, .35)); }
.ornate__c--tl { top: -1.6cqw; left: -1.6cqw; }
.ornate__c--tr { top: -1.6cqw; right: -1.6cqw; transform: scaleX(-1); }
.ornate__c--bl { bottom: -1.6cqw; left: -1.6cqw; transform: scaleY(-1); }
.ornate__c--br { bottom: -1.6cqw; right: -1.6cqw; transform: scale(-1, -1); }

/* ---------- Cover: the closed storybook ---------- */

.cover { position: absolute; inset: 0; z-index: 20; perspective: 1600px; }
.cover__door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    radial-gradient(120% 70% at 50% 40%, rgba(255, 255, 255, .08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #a03a62, #7d2448);
  transition: transform 1.6s cubic-bezier(.6, .05, .3, 1);
}
.cover__door::after { content: ""; position: absolute; inset: 5cqw; border: 2px solid rgba(233, 207, 153, .75); }
.cover__door--l { left: 0; transform-origin: 0 50%; border-right: 1px solid rgba(0, 0, 0, .25); }
.cover__door--l::after { right: 2cqw; border-right: 0; border-radius: 3cqw 0 0 3cqw; }
.cover__door--r { right: 0; transform-origin: 100% 50%; box-shadow: inset 8px 0 18px rgba(0, 0, 0, .3); }
.cover__door--r::after { left: 2cqw; border-left: 0; border-radius: 0 3cqw 3cqw 0; }
.cover.is-opening .cover__door--l { transform: rotateY(-108deg); }
.cover.is-opening .cover__door--r { transform: rotateY(108deg); }
.cover.is-open { visibility: hidden; }

.cover__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10% 8%; text-align: center; color: #fbe9d2;
  transition: opacity .6s ease;
}
.cover.is-opening .cover__content { opacity: 0; pointer-events: none; }
.cover__crown { width: 20cqw; filter: drop-shadow(0 0 12px rgba(255, 228, 160, .6)); }
.cover__kicker { margin: 4cqw 0 0; font: 400 4.4cqw/1.3 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); }
.cover__name {
  margin: 2cqw 0 0; font: 400 18cqw/1.1 var(--script);
  background: linear-gradient(180deg, #fff4dc 0%, #ecd08e 50%, #c99a4b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cover__occasion { margin: 1cqw 0 0; font: italic 400 5.6cqw/1.3 var(--serif); color: #fbe9d2; }
.btn--open { margin-top: 9cqw; min-height: 3.5rem; padding: 0 1.8rem; font-size: 1.05rem; color: var(--rose-ink); background: linear-gradient(180deg, #fff6e4, #ecd08e); box-shadow: 0 0 0 3px rgba(125, 36, 72, .9), 0 0 0 4.5px var(--champagne), 0 0 30px rgba(255, 228, 160, .55); animation: glow 2.6s ease-in-out infinite; }
.btn--open:hover { background: linear-gradient(180deg, #fffaf0, #f3dca6); }
@keyframes glow { 50% { box-shadow: 0 0 0 3px rgba(125, 36, 72, .9), 0 0 0 4.5px var(--champagne), 0 0 46px rgba(255, 228, 160, .85); } }
.cover__hint { margin: 4cqw 0 0; font: 400 3.8cqw/1.4 var(--serif); color: #f3d6dd; }
a.cover__read { display: inline-flex; align-items: center; margin-top: 0; }
.cover__read { margin-top: 2cqw; min-height: 2.75rem; padding: 0 1rem; font: italic 400 1rem var(--serif); color: var(--champagne); background: none; border: 0; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* ---------- Controls: a jewelled bar inside the border ---------- */

.controls {
  position: absolute; z-index: 25; left: 50%; translate: -50% 0;
  bottom: calc(env(safe-area-inset-bottom) + 1.3rem);
  display: flex; align-items: center; gap: .25rem;
  padding: .3rem .45rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(150, 50, 88, .92), rgba(96, 28, 56, .92));
  border: 1.5px solid #d7b878;
  box-shadow: 0 0 0 3px rgba(255, 250, 244, .35), 0 12px 26px -10px rgba(40, 12, 24, .6);
  transition: opacity .5s ease, translate .5s var(--ease);
}
.controls.is-dim, .controls.is-ended { opacity: 0; translate: -50% .6rem; pointer-events: none; }
.controls.is-ended { visibility: hidden; transition: opacity .5s ease, translate .5s var(--ease), visibility 0s linear .5s; }
.ctl {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0;
  color: #fbe9d2; background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.ctl:hover { background: rgba(255, 236, 190, .16); color: #fff6e4; }
.ctl svg { width: 1.4rem; height: 1.4rem; }
.ctl[aria-pressed="false"][data-cc] { opacity: .5; }
.ctl .ic-play, .ctl .ic-muted { display: none; }
.controls.is-paused .ic-play { display: block; }
.controls.is-paused .ic-pause { display: none; }
.ctl[aria-pressed="true"] .ic-muted { display: block; }
.ctl[aria-pressed="true"] .ic-sound { display: none; }
.ctl__note { position: absolute; bottom: calc(100% + .5rem); left: 50%; translate: -50% 0; white-space: nowrap; padding: .35rem .7rem; font: 500 .8rem/1.2 system-ui, sans-serif; color: var(--ivory); background: rgba(58, 30, 40, .8); border-radius: .5rem; }

/* ---------- Story text dialog ---------- */

.storytext {
  width: min(92vw, 34rem); max-height: 86dvh; padding: 0; border: 0; border-radius: 1rem;
  color: var(--ink); background: var(--ivory);
  box-shadow: 0 0 0 1.5px var(--champagne), 0 30px 60px rgba(0, 0, 0, .45);
}
.storytext::backdrop { background: rgba(58, 30, 40, .7); }
.storytext__inner { padding: 1.75rem 1.5rem 1.5rem; overflow: auto; max-height: 86dvh; }
.storytext__title { margin: 0 0 1rem; font: 400 2.6rem/1.1 var(--script); color: var(--rose-deep); text-align: center; }
.storytext p { margin: 0 0 .9rem; font-size: 1.15rem; line-height: 1.6; }
.storytext__details { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--champagne); text-align: center; }
.storytext__details p { margin: .2rem 0; }
.storytext__details .k { font: 400 .8rem/1.4 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--rose-deep); margin-top: .8rem; }
.storytext__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; padding: 2rem; text-align: center; color: var(--ivory); font-size: 1.2rem; }
.noscript a { color: var(--champagne); }

/* ---------- Reduced motion: keep the story, drop the movement ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .scene, .reveal, .cover__door, .cover__content { transition-duration: .3s !important; }
  .reveal { translate: none !important; scale: none !important; }
}