:root {
  --sky: #1E2350;
  --sky-deep: #161a3f;
  --cream: #F6EBD2;
  --cream-dim: #D9CBB0;
  --gold: #E8B54A;
  --burgundy: #7A2633;
  --ink: #1A1712;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  /* stage = phone-shaped column; full width on phones, centred column on desktop */
  --stage-w: min(100vw, 52svh);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sky-deep); color: var(--cream); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }

/* ---------- film ---------- */
#film { position: relative; height: 1400vh; height: 1400svh; }
#stage {
  position: sticky; top: 0;
  width: var(--stage-w); height: 100vh; height: 100svh;
  margin: 0 auto; overflow: hidden; background: var(--sky);
  box-shadow: 0 0 0 1px rgba(246,235,210,.06), 0 30px 80px rgba(0,0,0,.45);
}
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
.world img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

.sky {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='520'%3E%3Cg fill='%23E8B54A'%3E%3Cpath d='M62 52l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M318 120l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M210 330l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Ccircle cx='120' cy='190' r='1.6'/%3E%3Ccircle cx='250' cy='24' r='1.4'/%3E%3Ccircle cx='350' cy='260' r='1.6'/%3E%3Ccircle cx='30' cy='400' r='1.3'/%3E%3Ccircle cx='160' cy='470' r='1.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 390px 520px repeat,
    radial-gradient(120% 70% at 50% 0%, #2A3070 0%, var(--sky) 55%, var(--sky-deep) 100%);
}
#sky { position: absolute; inset: 0; opacity: 0; }

.paper {
  position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background-image: 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* placeholders */
.ph-tag {
  position: absolute; z-index: 2; white-space: nowrap;
  font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); background: rgba(122,38,51,.92); padding: 6px 8px; border-radius: 999px;
}
#visual { position: absolute; inset: 0; }
.world img.overlay { position: absolute; inset: 0; opacity: 0; }
#w-doors { perspective: 1400px; }
/* the doorway is cut out of the doors art so the chamber (world underneath) shows through as they open */
.doors-plate { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M0 0H1000V1000H0Z M319 402H616V900H319Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M0 0H1000V1000H0Z M319 402H616V900H319Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.door-glow {
  position: absolute; left: 31.9%; top: 40.2%; width: 29.7%; height: 49.8%; pointer-events: none;
  background: radial-gradient(80% 70% at 50% 55%, rgba(255,240,196,.0) 40%, rgba(232,181,74,.45) 100%);
}
.cdoor {
  position: absolute; top: 40.2%; height: 49.8%; background-repeat: no-repeat;
  backface-visibility: hidden; will-change: transform;
}
.cdoor.l { left: 31.9%; width: 14.06%; background-size: 711.2% auto; background-position: 37.1% 80.1%; transform-origin: 0 50%; }
.cdoor.r { left: 48.18%; width: 13.41%; background-size: 745.7% auto; background-position: 55.6% 80.1%; transform-origin: 100% 50%; }

#strip { position: absolute; left: 0; bottom: 0; width: 300%; height: 60%; will-change: transform; transform: translate3d(100vw,0,0); }
#strip-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-strip { left: 18px; top: 8px; }

#doorframe {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  border: solid #D9B57A; border-width: 14svh 12% 0 12%;
  box-shadow: inset 0 0 0 2px #14110d;
}
#doorframe .ph-tag { left: 50%; top: -9svh; transform: translateX(-50%); }

#matcha {
  position: absolute; left: 0; top: 0; width: 26%; aspect-ratio: 1; opacity: 0;
  will-change: transform, opacity;
}
#matcha .face {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--cream); outline: 2px dashed var(--gold); outline-offset: 5px;
  background: url("assets/art/01-matcha-city-hall.webp") no-repeat;
  background-size: 544% auto; background-position: 33.5% 40%;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
#matcha .ph-tag { left: 50%; top: calc(100% + 14px); transform: translateX(-50%); }
#ring-fly {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; opacity: 0;
  border: 5px solid var(--gold); outline: 2px solid #14110d; outline-offset: 0;
  box-shadow: inset 0 0 0 2px #14110d, 0 0 18px 4px rgba(255,236,170,.9);
}

/* text overlays */
.t { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; padding: 0 24px; pointer-events: none; text-shadow: 0 2px 18px rgba(16,18,48,.65); }
.t .names { font: 600 clamp(36px, 11.5vw, 54px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--cream); }
.t .sub { font: italic 400 19px/1.35 var(--serif); color: var(--gold); margin-top: 6px; }
.t .big { font: 600 40px/1.1 var(--serif); letter-spacing: -.02em; color: var(--cream); }
.t .big.it { font-style: italic; font-weight: 500; font-size: 32px; }
.t .huge { font: 600 46px/1.1 var(--serif); letter-spacing: -.02em; color: var(--cream); margin-top: 4px; }
.t .place { font: 500 20px/1.3 var(--serif); color: var(--cream); }
.t .label { font: 600 11px/1.8 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.t .date { font: 500 19px/1.3 var(--serif); color: var(--cream); }
.t .cue { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
#t-intro { top: 7svh; }
#t-date { bottom: 0; padding: 60px 24px 34px; background: linear-gradient(180deg, transparent, rgba(30,35,80,.9) 45%); }
#t-civil { top: 0; padding: 7svh 24px 40px; background: linear-gradient(180deg, rgba(30,35,80,.95) 65%, transparent); }
#t-married { top: 16svh; }
#t-next { top: 20svh; }
#t-dinner { bottom: 0; padding: 70px 24px 6svh; background: linear-gradient(180deg, transparent, var(--sky) 30%); }

/* ---------- final invitation: last horizontal panel inside the stage ---------- */
#invitation {
  position: absolute; inset: 0; z-index: 5; will-change: transform;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6svh 28px 8svh; overflow: hidden; transform: translate3d(0,0,0);
}
.inv { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6svh, 18px); }
.inv h1 { margin: 0; font: 600 clamp(40px, min(13vw, 7.2svh), 62px)/1.02 var(--serif); letter-spacing: -.025em; color: var(--cream); }
.inv h1 em { font-weight: 400; color: var(--gold); }
.inv-date { margin: 0; font: 500 clamp(16px, 2.3svh, 19px)/1.3 var(--serif); }
.divider { margin: 1svh 0 1.5svh; }
.block { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 1.8svh; }
.block h2 { margin: 0; font: 600 12px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.block .place { margin: 0; font: 400 clamp(17px, 2.5svh, 21px)/1.3 var(--serif); }
.block .menu { margin: 2px 0 0; font: italic 400 clamp(14px, 2svh, 16px)/1.4 var(--serif); color: var(--cream-dim); }
.dir { margin-top: 2px; font: 500 14px/1.4 var(--sans); color: var(--cream); text-underline-offset: 4px; text-decoration-thickness: 1px; padding: 8px 4px; }
.dir:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.rm-only { display: none; }

/* ---------- review HUD (prototype only) ---------- */
#hud { position: fixed; left: 12px; bottom: 12px; z-index: 50; font: 600 11px/1 var(--sans); letter-spacing: .06em; }
#hud-btn { font: inherit; color: var(--ink); background: var(--cream); border: 0; border-radius: 999px; padding: 9px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; }
#hud-list { position: absolute; left: 0; bottom: 42px; width: 250px; background: var(--cream); color: var(--ink); border-radius: 14px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#hud-list button { display: block; width: 100%; text-align: left; font: 500 13px/1.3 var(--sans); color: var(--ink); background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
#hud-list button:hover, #hud-list button:focus-visible { background: rgba(122,38,51,.12); }
.noscript { text-align: center; padding: 40px; }

/* ---------- reduced motion / no film: just the invitation with a still ---------- */
@media (prefers-reduced-motion: reduce) {
  #film { height: auto; }
  #stage { position: relative; height: auto; min-height: 100svh; }
  #visual, #hud { display: none; }
  #invitation { position: relative; inset: auto; min-height: 100svh; transform: none !important; }
  .rm-only { display: block; margin: 0 0 24px; width: 100%; max-width: 420px; }
  .rm-only img { width: 100%; border-radius: 12px; }
}

/* final panel: stars kept to the margins so they never sit on the text */
#invitation.sky {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23E8B54A'%3E%3Cpath d='M40 70l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M352 150l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M26 560l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M350 760l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath d='M300 40l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z'/%3E%3Ccircle cx='18' cy='300' r='1.5'/%3E%3Ccircle cx='372' cy='420' r='1.4'/%3E%3Ccircle cx='60' cy='800' r='1.5'/%3E%3Ccircle cx='200' cy='22' r='1.2'/%3E%3Ccircle cx='190' cy='826' r='1.3'/%3E%3Ccircle cx='366' cy='600' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(120% 70% at 50% 0%, #2A3070 0%, var(--sky) 55%, var(--sky-deep) 100%);
}

/* ---------- production drop-in layers ---------- */
#matcha .sprite {
  position: absolute; left: 50%; bottom: 0; width: 100%; aspect-ratio: 1; display: none;
  background-repeat: no-repeat; background-position: 0 0;
  transform-origin: 50% 100%;
}
#matcha.has-sprite .face, #matcha.has-sprite .ph-tag { display: none; }
#matcha.has-sprite .sprite { display: block; }

#strip.has-art { background-repeat: repeat-x; background-size: auto 100%; background-position: 0 100%; }
#strip.has-art #strip-svg, #strip.has-art .ph-strip { display: none; }

.layer-strip {
  position: absolute; left: 0; bottom: 0; width: 300%; height: 70%; display: none; pointer-events: none;
  background-repeat: repeat-x; background-size: auto 100%; background-position: 0 100%;
  will-change: transform; transform: translate3d(100vw,0,0);
}
.layer-strip.has-art { display: block; }
#fg { height: 50%; }
#strip.has-art { height: 46%; }
#bloor { height: 52%; }

#doorframe.has-art { border: 0; box-shadow: none; background-size: cover; background-position: center; }
#doorframe.has-art .ph-tag { display: none; }

/* chamber floor extension: continues the polished warm floor below the ceremony art */
.floor-blend { position: absolute; left: 0; bottom: 0; width: 100%; height: 3.5%; background: linear-gradient(180deg, rgba(235,170,114,0), #EBAA72); }
.floor-ext {
  position: absolute; left: 0; top: 100%; width: 100%; height: 34%;
  background:
    repeating-linear-gradient(118deg, rgba(255,236,200,.16) 0 2px, rgba(255,236,200,0) 2px 7px, rgba(150,80,40,.08) 7px 9px, rgba(150,80,40,0) 9px 15px),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 22%, rgba(110,60,28,.22) 22% calc(22% + 1.5px), rgba(0,0,0,0) calc(22% + 1.5px) 46%),
    radial-gradient(60% 50% at 50% 10%, rgba(255,226,170,.55), rgba(255,226,170,0) 70%),
    linear-gradient(180deg, #EBAA72 0%, #DC9862 50%, #C88450 100%);
}