:root {
  --paper: #f6efe4;            
  --paper-shade: #ece1cf;
  --ink: #4a3b32;
  --ink-soft: #7a6656;
  --gold: #b8975a;
  --gold-deep: #8c6a32;
  --gold-light: #e3cd98;
  --sage: #7d8f6e;
  --sage-deep: #4f5f45;
  --blush: #e8c4c0;
  --rose: #c98e8a;

  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --font-serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-caps: "Cinzel", "Trajan Pro", "Times New Roman", serif;

  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-serif);
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.6;
  --bs-link-color-rgb: 140, 106, 50;
}

/* ---------- Base --------------------------------------------------------- */
html {
  color-scheme: light;
  scroll-behavior: auto;
}

html.cover-open,
html.cover-open body {
  overflow: hidden;
}

body {
  background: var(--paper) url("../assets/textures/paper.webp") 0 0 / 512px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.eyebrow {
  font-family: var(--font-caps);
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.amp {
  font-family: var(--font-script);
  color: var(--rose);
  padding-inline: .08em;
}

.flourish {
  display: block;
  width: min(240px, 62%);
  height: auto;
  margin: .4rem auto 1rem;
  color: var(--gold);
}

/* ---------- Buttons ------------------------------------------------------ */
.btn-storybook {
  --bs-btn-padding-x: 1.7rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-family: var(--font-caps);
  --bs-btn-font-size: .78rem;
  --bs-btn-font-weight: 500;
  --bs-btn-color: var(--paper);
  --bs-btn-bg: var(--sage-deep);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #43523b;
  --bs-btn-hover-border-color: var(--gold-light);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3a4733;
  --bs-btn-active-border-color: var(--gold-light);
  --bs-btn-disabled-color: var(--paper);
  --bs-btn-disabled-bg: var(--sage);
  --bs-btn-disabled-border-color: var(--gold);
  --bs-btn-disabled-opacity: .85;
  --bs-btn-focus-shadow-rgb: 184, 151, 90;
  --bs-btn-border-radius: 999px;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgb(184 151 90 / .55);
}

.btn-storybook--ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--paper);
  --bs-btn-hover-bg: var(--sage-deep);
  box-shadow: none;
}

.btn-hud {
  --bs-btn-padding-x: .9rem;
  --bs-btn-padding-y: .3rem;
  --bs-btn-font-family: var(--font-caps);
  --bs-btn-font-size: .68rem;
  --bs-btn-color: var(--ink);
  --bs-btn-bg: rgb(246 239 228 / .82);
  --bs-btn-border-color: rgb(184 151 90 / .6);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--paper);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-bg: var(--paper-shade);
  --bs-btn-active-border-color: var(--gold);
  --bs-btn-focus-shadow-rgb: 184, 151, 90;
  --bs-btn-border-radius: 999px;
  letter-spacing: .2em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* ---------- Cover: closed theatre curtains ------------------------------- */
.cover {
  display: none;
}

.js .cover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  overflow: hidden;
}

.cover[hidden] {
  display: none;
}

.cover__drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  transition: transform 1.9s cubic-bezier(.66, 0, .22, 1), opacity .7s ease 1.3s;
}

.cover__drape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/ornaments/drape-panel.webp") 0 0 / 100% 100% no-repeat;
}

.cover__drape--left {
  left: 0;
  transform-origin: 0 50%;
}

.cover__drape--right {
  right: 0;
  transform-origin: 100% 50%;
}

.cover__drape--right {
  --flip: -1;
}

.cover__drape::before {
  transform: scaleX(var(--flip, 1));
}

.cover::after {
  /* shadow under the curtain rail */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22vh;
  background: linear-gradient(rgb(28 36 24 / .55), transparent);
  pointer-events: none;
  transition: opacity 1s ease .6s;
}

.cover__card {
  position: relative;
  z-index: 2;
  width: min(92vw, 25rem);
  padding: 3.4rem 1.6rem 2.3rem;
  background: var(--paper) url("../assets/textures/paper.webp") 0 0 / 512px;
  border-radius: 12.5rem 12.5rem 1.25rem 1.25rem;
  box-shadow:
    inset 0 0 0 1px rgb(184 151 90 / .6),
    inset 0 0 0 7px var(--paper),
    inset 0 0 0 8px rgb(184 151 90 / .45),
    0 1.6rem 3.2rem rgb(24 32 20 / .5);
  transition: opacity .7s ease, transform 1s cubic-bezier(.5, 0, .2, 1);
}

.cover__names {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 14vw, 4.7rem);
  line-height: 1.05;
  color: var(--ink);
}

.cover__line {
  margin-bottom: 1.7rem;
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink-soft);
}

.cover.is-open .cover__drape {
  transform: scaleX(.12);
  opacity: 0;
}

.cover.is-open .cover__card {
  opacity: 0;
  transform: translateY(-2.5rem) scale(.96);
  pointer-events: none;
}

.cover.is-open::after {
  opacity: 0;
}

/* ---------- Story: static storybook (no JS / reduced motion) ------------- */
.story {
  padding: 4rem 1rem 1rem;
}

.story__stage {
  max-width: 960px;
  margin-inline: auto;
}

.scene {
  margin: 0 0 4.5rem;
}

.scene__art {
  position: relative;
  aspect-ratio: var(--ar);
}

.scene__art .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__caption {
  padding: 1rem 1rem 0;
  text-align: center;
}

.chapter {
  display: block;
  font-family: var(--font-caps);
  font-size: .74rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.scene__title {
  margin: .08em 0 .12em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.3rem, 8vw, 3.8rem);
  line-height: 1.12;
  color: var(--ink);
}

.scene__caption p {
  max-width: 31ch;
  margin: 0 auto;
  font-style: italic;
  font-size: clamp(1.08rem, 3.6vw, 1.38rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.stage-frame,
.stage-sparkles,
.stage-hud,
.scroll-cue {
  display: none;
}

/* ---------- Story: 3D zoom stage ----------------------------------------- */
.js-3d .story {
  padding: 0;
}

.js-3d .story__stage {
  --drape-w: clamp(120px, 32vw, 460px);
  position: sticky;
  top: 0;
  height: 100vh;
  max-width: none;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  background: var(--paper);
}

.js-3d .scene {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none;
}

.js-3d .scene.is-live {
  display: block;
}

.js-3d .scene__art {
  position: static;
  aspect-ratio: auto;
}

.js-3d .scene__art .layer,
.js-3d .scene__paper,
.js-3d .wreath {
  position: absolute;
  inset: auto;
  max-width: none;
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.js-3d .scene__art .layer,
.js-3d .scene__paper {
  will-change: transform, opacity;
}

.js-3d .scene__paper {
  background: var(--tint, var(--paper)) url("../assets/textures/paper.webp") 0 0 / 512px;
  transform-origin: 50% 50%;
}

.js-3d .wreath {
  overflow: visible;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 3px rgb(74 59 50 / .25));
}

.js-3d .scene__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 700;
  padding: 6rem 1.25rem calc(2.9rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgb(246 239 228 / .97) 32%, rgb(246 239 228 / .78) 62%, rgb(246 239 228 / 0));
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.js-3d .stage-frame {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 650;
  pointer-events: none;
}

.stage-frame::before {
  /* warm chandelier light from above */
  content: "";
  position: absolute;
  inset: -30vh 15% auto;
  height: 60vh;
  background: radial-gradient(closest-side, rgb(255 236 190 / .55), rgb(255 236 190 / 0));
  mix-blend-mode: soft-light;
}

.stage-frame__drape {
  position: absolute;
  top: 0;
  width: var(--drape-w);
  height: 100%;
  will-change: transform;
}

.stage-frame__drape--left {
  left: 0;
  transform-origin: 0 0;
}

.stage-frame__drape--right {
  right: 0;
  transform-origin: 100% 0;
}

.stage-frame__tail {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;            /* folds simply gather tighter on narrow screens */
  filter: drop-shadow(0 .5rem .9rem rgb(30 40 26 / .3));
  transform-origin: 50% 0;
  animation: drape-breeze 6.5s ease-in-out infinite alternate;
}

.stage-frame__drape--right .stage-frame__tail {
  transform: scaleX(-1);
  animation-delay: -2.7s;
  animation-duration: 7.3s;
}

@keyframes drape-breeze {
  0%   { rotate: -.5deg; scale: 1 1; }
  55%  { rotate: .7deg;  scale: 1.025 1; }
  100% { rotate: -.2deg; scale: .99 1; }
}

/* Scalloped swag valance across the top of the stage */
.stage-frame__valance {
  --swag: clamp(130px, 24vw, 280px);
  --swag-mask:
    radial-gradient(50% 100% at 50% 0, #000 calc(100% - 1.5px), transparent) 50% 0 / var(--swag) 100% repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% 30% no-repeat;
  position: absolute;
  top: 0;
  left: -6%;
  right: -6%;
  height: clamp(34px, 7.5vh, 74px);
  transform-origin: 50% 0;
  filter: drop-shadow(0 .45rem .6rem rgb(30 40 26 / .32));
  will-change: transform;
}

.stage-frame__valance::before,
.stage-frame__valance::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--swag-mask);
  mask: var(--swag-mask);
}

.stage-frame__valance::before {
  /* gold fringe peeking out below the cloth */
  top: .55rem;
  bottom: -.55rem;
  background: repeating-linear-gradient(90deg, #cfb06f 0 2px, #8c6a32 2px 4px);
}

.stage-frame__valance::after {
  background:
    linear-gradient(rgb(40 52 36 / .55), transparent 40%),
    repeating-radial-gradient(50% 100% at 50% 0, #4e5f45 0, #93a684 9%, #6f8263 13%, #4e5f45 18%) 50% 0 / var(--swag) 100% repeat-x;
}

.js-3d .stage-sparkles {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 660;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.js-3d .stage-hud {
  position: absolute;
  inset: calc(.75rem + env(safe-area-inset-top)) 0 auto;
  z-index: 720;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  pointer-events: none;
}

.stage-hud__chapter {
  margin: 0;
  font-family: var(--font-caps);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 6px var(--paper), 0 0 12px var(--paper);
}

.stage-hud .btn {
  pointer-events: auto;
}

@media (min-width: 768px) {
  /* wreaths often float near the top on wide screens; keep the HUD out of their way */
  .js-3d .stage-hud {
    inset: auto calc(var(--drape-w) * .3 + 1.25rem) calc(1.5rem + env(safe-area-inset-bottom)) auto;
    align-items: flex-end;
  }
}

.js-3d .scroll-cue {
  display: block;
  position: absolute;
  inset: auto 0 calc(.7rem + env(safe-area-inset-bottom));
  z-index: 710;
  margin: 0;
  text-align: center;
  font-family: var(--font-caps);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.scroll-cue::after {
  content: "";
  display: block;
  width: .5rem;
  height: .5rem;
  margin: .35rem auto 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: cue-bob 1.8s ease-in-out infinite;
}

.scroll-cue.is-visible {
  opacity: 1;
}

@keyframes cue-bob {
  50% { transform: translateY(.3rem) rotate(45deg); }
}

:root {
  --pink-pale: #fbeef0;
  --pink: #f2d3d7;
  --pink-deep: #dca7ae;
  --ivory: #fffaf1;
}

.zoom-controls {
  display: none;
}

.js-3d .zoom-controls {
  position: absolute;
  top: 50%;
  left: calc(.6rem + env(safe-area-inset-left));
  z-index: 720;
  display: flex;
  align-items: stretch;
  gap: .45rem;
  transform: translateY(-50%);
}

.btn-zoom {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--gold-deep);
  --bs-btn-bg: var(--ivory);
  --bs-btn-border-color: rgb(184 151 90 / .65);
  --bs-btn-border-width: 1px;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--pink);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--pink-deep);
  --bs-btn-active-border-color: var(--gold);
  --bs-btn-disabled-color: rgb(140 106 50 / .45);
  --bs-btn-disabled-bg: var(--pink-pale);
  --bs-btn-disabled-border-color: rgb(184 151 90 / .35);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-focus-shadow-rgb: 220, 167, 174;
  --bs-border-radius: 999px;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}

.zoom-controls .btn-group-vertical > .btn-zoom {
  width: 2.6rem;
  flex: none;
}

.zoom-controls .btn-group-vertical {
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4px rgb(184 151 90 / .55), 0 .6rem 1.4rem rgb(74 59 50 / .22);
}

.btn-zoom svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-zoom:not(:disabled):hover svg {
  transform: scale(1.1);
}

.zoom-meter {
  position: relative;
  width: 4px;
  margin-block: .9rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 250 241 / .8);
  box-shadow: 0 0 0 1px rgb(184 151 90 / .45);
}

.zoom-meter__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--pink-deep), var(--gold));
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

.tooltip {
  --bs-tooltip-bg: var(--ivory);
  --bs-tooltip-color: var(--ink);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-font-size: .95rem;
  font-family: var(--font-serif);
  font-style: italic;
  filter: drop-shadow(0 0 1px rgb(184 151 90 / .9)) drop-shadow(0 .3rem .6rem rgb(74 59 50 / .18));
}

/* ---------- Threshold reveals -------------------------------------------- */
.scene__caption .scene__detail {
  max-width: none;
  margin: .7rem auto 0;
  font-size: clamp(.98rem, 3.2vw, 1.12rem);
  color: var(--ink);
}

.scene__detail-label {
  display: inline-block;
  margin-right: .4rem;
  padding: .12rem .65rem;
  font-family: var(--font-caps);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  vertical-align: .15em;
  color: var(--gold-deep);
  background: var(--pink-pale);
  border: 1px solid rgb(220 167 174 / .8);
  border-radius: 999px;
}

.js-3d .zoom-reveal {
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.js-3d .zoom-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition-delay: .25s;
}

.music-toggle {
  position: fixed;
  top: calc(.75rem + env(safe-area-inset-top));
  right: calc(.75rem + env(safe-area-inset-right));
  z-index: 1100;              
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgb(184 151 90 / .75), 0 .4rem 1rem rgb(40 30 20 / .3);
  transition: transform .2s ease;
}

.modal-open .music-toggle {
  z-index: 1040;              
}

.music-toggle[hidden] {
  display: none;
}

.music-toggle:hover {
  transform: scale(1.06);
}

.music-toggle:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 6px;
}

.music-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}

.music-toggle__disc {
  transform-origin: 24px 24px;
  animation: music-spin 5s linear infinite paused;
}

.music-toggle.is-playing .music-toggle__disc {
  animation-play-state: running;
}

.music-toggle__play {
  transition: opacity .3s ease;
}

.music-toggle.is-playing .music-toggle__play {
  opacity: 0;
}

@keyframes music-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Finale ------------------------------------------------------- */
.finale {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.finale__card {
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  background: rgb(255 252 246 / .72);
  border: 1px solid rgb(184 151 90 / .55);
  border-radius: 1.25rem;
  outline: 1px solid rgb(184 151 90 / .3);
  outline-offset: -10px;
  box-shadow: 0 1.5rem 3rem rgb(74 59 50 / .08);
}

.finale__names {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 4.8rem);
  line-height: 1.1;
}

.finale__full {
  font-size: 1.3rem;
  line-height: 1.45;
}

.finale__with {
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--rose);
}

.finale__details {
  margin: 1.5rem 0 .5rem;
}

.finale__label {
  margin-bottom: .35rem;
  font-family: var(--font-caps);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.finale__venue {
  margin: 1rem 0 2rem;
  font-style: italic;
  font-size: 1.2rem;
}

:root {
  --bs-form-valid-color: var(--sage-deep);
  --bs-form-valid-border-color: var(--sage);
  --bs-form-invalid-color: #a2453f;
  --bs-form-invalid-border-color: #c98680;
}

.rsvp {
  padding: 0 0 clamp(4rem, 10vw, 7rem);
}

.rsvp__card {
  padding: clamp(2.25rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 3rem);
  background: rgb(255 252 246 / .72);
  border: 1px solid rgb(184 151 90 / .55);
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem rgb(74 59 50 / .08);
}

.rsvp__title,
.rsvp-modal__title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1.15;
}

.rsvp .form-label,
.rsvp legend {
  margin-bottom: .35rem;
  font-family: var(--font-caps);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.rsvp__optional {
  font-family: var(--font-serif);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.rsvp .form-control,
.rsvp .form-select,
.rsvp .input-group-text {
  font-size: 1.12rem;
  color: var(--ink);
  background-color: rgb(255 253 249 / .9);
  border-color: rgb(184 151 90 / .45);
}

.rsvp .input-group-text {
  background-color: var(--paper-shade);
  color: var(--ink-soft);
}

.rsvp .form-control:focus,
.rsvp .form-select:focus,
.rsvp .form-check-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .22rem rgb(184 151 90 / .25);
}

.rsvp .form-check-label {
  font-size: 1.15rem;
}

.rsvp .form-check-input:checked {
  background-color: var(--sage-deep);
  border-color: var(--sage-deep);
}

.rsvp .form-text,
.rsvp .invalid-feedback {
  font-size: .98rem;
}

.rsvp-modal {
  padding: .5rem 1rem;
  background: var(--paper) url("../assets/textures/paper.webp") 0 0 / 512px;
  border: 1px solid rgb(184 151 90 / .6);
  border-radius: 1.25rem;
}

.rsvp-modal__text {
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
}

.rsvp-toast {
  font-size: 1.05rem;
  color: var(--paper);
  background: var(--sage-deep);
}

.rsvp-toast .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

/* ---------- 2.5D depth ---------------------------------------------------- */
/* Cover: curtains breathe in a breeze, drift with the pointer and swing past the
   camera when they open; the invitation card tilts like a thick paper card. */
.js-3d .cover {
  perspective: 1300px;
  perspective-origin: 50% 40%;
}

.js-3d .cover__drape {
  translate: calc(var(--tx, 0) * -16px) calc(var(--ty, 0) * -6px);
}

.js-3d .cover__drape::before {
  transform-origin: 50% 0;
  animation: curtain-billow 7s ease-in-out infinite alternate;
}

.js-3d .cover__drape--right::before {
  animation-delay: -3.1s;
}

.js-3d .cover__drape::after {
  /* deepening shadow in the folds as the cloth gathers */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(20 28 18 / .1), rgb(20 28 18 / .5));
  opacity: 0;
  transition: opacity 1.2s ease;
}

.js-3d .cover__drape--right::after {
  background: linear-gradient(-90deg, rgb(20 28 18 / .1), rgb(20 28 18 / .5));
}

.js-3d .cover.is-open .cover__drape::after {
  opacity: 1;
}

.js-3d .cover.is-open .cover__drape--left {
  transform: rotateY(-58deg) scaleX(.16);
}

.js-3d .cover.is-open .cover__drape--right {
  transform: rotateY(58deg) scaleX(.16);
}

@keyframes curtain-billow {
  0%   { transform: scaleX(var(--flip, 1)) skewX(0deg); }
  50%  { transform: scaleX(calc(var(--flip, 1) * 1.012)) skewX(.9deg); }
  100% { transform: scaleX(var(--flip, 1)) skewX(-.6deg); }
}

.js-3d .cover__card {
  transform: rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg));
  transform-style: preserve-3d;
  transition: opacity .7s ease;
}

.js-3d .cover.is-open .cover__card {
  transition: opacity .7s ease, transform 1s cubic-bezier(.5, 0, .2, 1);
}

.js-3d .cover__card > * {
  transform: translateZ(26px);
}

.js-3d .cover__card > .cover__names {
  transform: translateZ(58px);
}

.js-3d .cover__card::after,
.js-3d .depth-in[data-tilt]::after {
  /* glare that follows the light as the card tilts */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at calc(50% + var(--tx, 0) * 45%) calc(32% + var(--ty, 0) * 45%), rgb(255 255 255 / .55), rgb(255 255 255 / 0) 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Story captions fold up from the page like a pop-up book */
.js-3d .scene__caption {
  transform-origin: 50% 100%;
}

/* Finale + RSVP: cards rise into place, the finale card tilts under the pointer */
.js-3d .depth-stage {
  perspective: 1100px;
}

.js-3d .depth-in {
  position: relative;
  opacity: 0;
  translate: 0 2.5rem;
  rotate: x 16deg;
  transform: rotateX(calc(var(--ty, 0) * -6deg)) rotateY(calc(var(--tx, 0) * 7deg));
  transform-origin: 50% 70%;
  transform-style: preserve-3d;
  transition: opacity .9s ease, translate 1.1s cubic-bezier(.2, .7, .2, 1), rotate 1.1s cubic-bezier(.2, .7, .2, 1), transform .35s ease-out;
}

.js-3d .depth-in.is-in {
  opacity: 1;
  translate: none;
  rotate: none;
}

.js-3d .depth-in[data-tilt] > * {
  transform: translateZ(18px);
}

.js-3d .depth-in[data-tilt] > .finale__names {
  transform: translateZ(42px);
}

@media (prefers-reduced-motion: reduce) {
  .cover__drape,
  .cover__card,
  .cover::after {
    transition: none;
  }

  .scroll-cue::after,
  .music-toggle__disc,
  .stage-frame__tail {
    animation: none;
  }
}