/* Script capital «А»/«A»: Arizonia's connecting capital (tools/make-script-caps.py); every other letter stays Great Vibes */
@font-face {
  font-family: 'Script Caps'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/script-caps.woff2') format('woff2');
  unicode-range: U+0041, U+0410;
}
:root {
  --ivory: #fbf6ea;
  --parchment: #f6eedb;
  --parchment-edge: #e6d6b2;
  --gold: #b08d3c;
  --gold-dark: #8a6a22;
  --olive: #5f6f2c;
  --olive-light: #8fa356;
  --grape: #5a2e5e;
  --ink: #3b2a14;
  --ink-soft: #6b5a3e;
  --danger: #a3401e;
  --sky-top: #7fb3e0;
  --sky-bottom: #dcecf7;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* the four text styles of the invitation (the 3D canvases use the same fonts, see FONT in scene.js) */
  --bold: 'Prata', 'Cormorant Garamond', Georgia, serif;
  --italic: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --script: 'Script Caps', 'Great Vibes', 'Cormorant Garamond', cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--sky-bottom);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; }

#sky {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
#tags { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
main { position: relative; z-index: 2; }

/* ---------- round buttons ---------- */
.round-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(251, 246, 234, .9);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(59, 42, 20, .15);
}
.fps-meter { position: fixed; left: 10px; top: 10px; z-index: 50; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); color: #7dff8a; font: 600 14px/1.4 ui-monospace, monospace; pointer-events: none; }
#mute { position: fixed; right: 16px; top: 16px; z-index: 20; }
#mute svg { width: 22px; height: 22px; fill: var(--gold-dark); stroke: var(--gold-dark); stroke-width: 1.6; stroke-linecap: round; }
#mute .icon-on { display: none; }
#mute[aria-pressed="true"] .icon-on { display: block; }
#mute[aria-pressed="true"] .icon-off { display: none; }

/* ---------- opening gate: full-screen envelope with a wax seal ---------- */
#gate {
  position: fixed; inset: 0; z-index: 30; overflow: hidden;
  background: #d6c39b; perspective: 1600px;
  transition: opacity .55s ease, visibility .55s;
}
#gate.opened { opacity: 0; visibility: hidden; }
.env-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.env-flap {
  position: absolute; inset: 0; transform-origin: 50% 0;
  filter: drop-shadow(0 8px 7px rgba(80, 60, 30, .28));
  transition: transform .45s cubic-bezier(.5, 0, .3, 1) .05s;
}
.env-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(90, 65, 30, .22)); }

.gate-to {
  position: absolute; left: 0; right: 0; top: calc(var(--tip-y, 56vh) * .42); margin: 0; padding: 0 24px;
  text-align: center; font-family: var(--script); font-size: clamp(36px, 7.8vw, 64.8px); color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 250, 235, .8);
}
.gate-hint {
  position: absolute; left: 0; right: 0; bottom: 14vh; margin: 0; padding: 0 24px;
  text-align: center; font-family: var(--italic); font-style: italic; font-size: clamp(17px, 2.4vw, 21px); color: var(--ink-soft);
}
.gate-to, .gate-hint { transition: opacity .35s ease; }

/* wax seal on the flap's point; two halves so it can crack apart */
.seal {
  position: absolute; left: 50%; top: var(--tip-y, 56vh);
  width: clamp(120px, 30vmin, 200px); aspect-ratio: 1; transform: translate(-50%, -62%);
  padding: 0; border: none; background: none; cursor: pointer;
  animation: sealPulse 2.6s ease-in-out infinite;
}
.seal-half { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.3, .6, .4, 1), opacity .4s ease .05s; }
.seal-half svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal-half.l { clip-path: polygon(0 0, 53% 0, 47% 22%, 55% 44%, 46% 63%, 54% 82%, 49% 100%, 0 100%); }
.seal-half.r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49% 100%, 54% 82%, 46% 63%, 55% 44%, 47% 22%); }
.seal:hover { animation-play-state: paused; }
.seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 50%; }
@keyframes sealPulse { 50% { transform: translate(-50%, -62%) scale(1.05); } }

/* opening: seal cracks into two falling halves, flap swings up, text fades */
#gate.open .seal { animation: none; pointer-events: none; }
#gate.open .seal-half.l { transform: translate(-22%, 18%) rotate(-18deg); opacity: 0; }
#gate.open .seal-half.r { transform: translate(22%, 22%) rotate(15deg); opacity: 0; }
#gate.open .env-flap { transform: rotateX(178deg); }
#gate.open .gate-to, #gate.open .gate-hint { opacity: 0; }

/* ---------- intro (sky) ---------- */

#intro {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 70px 16px 40px;
  color: var(--ink);
}
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px);
  letter-spacing: .45em; text-transform: uppercase; font-family: var(--bold); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 32px); color: var(--gold-dark); margin: 0 0 clamp(10px, 2vh, 22px);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .9), 0 0 18px rgba(255, 255, 255, .9);
}
.eyebrow-line { width: clamp(36px, 8vw, 120px); height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.eyebrow-line:last-child { margin-left: -.45em; } /* compensate trailing letter-spacing */
.intro-row { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 60px); width: 100%; max-width: 1500px; }
.intro-center { flex: 0 1 auto; position: relative; z-index: 4; }
.names {
  font-family: var(--script); font-weight: 400; margin: 0;
  font-size: clamp(76px, 9.6vw, 176px); line-height: .95;
  padding: 0 .34em; /* room for the 22% horizontal stretch, which transforms don't reserve */
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 2px 22px rgba(255, 255, 255, .85);
}
.name-line { display: block; transform: scaleX(1.22); letter-spacing: .01em; }
.names .amp { color: var(--gold); font-size: .5em; line-height: 1; margin: -.05em 0; transform: none; }
.date {
  position: relative; z-index: 4; margin: clamp(16px, 3vh, 34px) 0 0; line-height: 1;
  font-size: clamp(40px, 7.6vw, 124px); letter-spacing: .04em; font-family: var(--bold); font-weight: 400; white-space: nowrap;
  color: var(--olive); text-shadow: 0 2px 0 rgba(255, 250, 230, .9), 0 0 26px rgba(255, 255, 255, .95);
}
.greeting { font-family: var(--script); font-size: clamp(33.6px, 5.4vw, 48px); margin: 26px 0 4px; position: relative; z-index: 4; text-shadow: 0 0 16px rgba(255, 255, 255, .9); }
.greeting-text { font-size: clamp(20px, 2.6vw, 25px); margin: 0; max-width: 34ch; position: relative; z-index: 4; text-shadow: 0 0 12px rgba(255, 255, 255, .95); }
/* fixed scroll cue: visible until the column appears, click jumps there */
#scroll-cue {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 15; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: none; padding: 6px 12px;
  font-family: var(--script); font-size: clamp(28.8px, 3.6vw, 38.4px); color: var(--ink);
  text-shadow: 0 0 12px rgba(255, 255, 255, .95), 0 0 4px rgba(255, 255, 255, .9);
  transition: opacity .5s, transform .5s;
}
#scroll-cue.gone { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
body.locked #scroll-cue { opacity: 0; }
.cue-circle {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(251, 246, 234, .92); border: 1.5px solid var(--gold);
  box-shadow: 0 4px 16px rgba(59, 42, 20, .25); animation: cue 1.8s ease-in-out infinite;
}
.cue-circle i { position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-right: 2.5px solid var(--gold-dark); border-bottom: 2.5px solid var(--gold-dark); transform: rotate(45deg); }
.cue-circle i:first-child { top: 13px; opacity: .55; }
.cue-circle i:last-child { top: 22px; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* ---------- museum frames standing on (3D) clouds ---------- */
.cloud-photo { position: relative; margin: 0; width: clamp(230px, 22vw, 360px); flex: 0 0 auto; }
.cloud-photo.left { transform: rotate(-3deg); animation: float 8s ease-in-out infinite; }
.cloud-photo.right { transform: rotate(3deg); animation: float 8s ease-in-out -4s infinite; }
@keyframes float { 50% { translate: 0 -10px; } }
.frame {
  position: relative; z-index: 2;
  padding: 12.5%; border-radius: 3px;
  background: linear-gradient(135deg, #fff0b8 0%, #d6ac4a 14%, #f7e2a0 27%, #a37a26 43%, #e9c869 58%, #8a6419 76%, #e6c46a 90%, #fbe9ad 100%);
  box-shadow:
    0 22px 46px rgba(40, 28, 10, .42), 0 5px 12px rgba(40, 28, 10, .3),
    inset 0 0 0 2px #6e4f12, inset 0 0 0 5px rgba(255, 240, 190, .55), inset 0 0 0 7px #8a6419,
    inset 0 0 22px rgba(80, 55, 10, .55);
}
.frame-beads { /* carved bead-and-reel moulding */
  position: absolute; inset: 5.2%; pointer-events: none;
  border: 6px dotted #fff3c8; border-radius: 2px;
  filter: drop-shadow(1px 1px 0 #6e4f12);
}
.frame-beads::after { content: ''; position: absolute; inset: 7px; border: 2px solid rgba(110, 79, 18, .75); box-shadow: 0 0 0 2px rgba(255, 240, 190, .5); }
.frame-lip { /* bevelled inner slip */
  position: relative; padding: 3.5%;
  background: linear-gradient(135deg, #8a6419, #f4dc92 35%, #a07624 65%, #f0d488);
  box-shadow: 0 0 0 1.5px #5a3f0c, inset 0 0 0 1.5px #5a3f0c;
}
.frame-mat { padding: 8%; background: #f5eedc; box-shadow: inset 0 3px 10px rgba(60, 40, 10, .5), inset 0 0 0 1px rgba(60, 40, 10, .25); }
.frame-mat img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #efe6d2; box-shadow: 0 0 0 1px rgba(60, 40, 10, .35), 0 2px 6px rgba(60, 40, 10, .3); }
.orn { position: absolute; width: 31%; height: auto; aspect-ratio: 1; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(50, 30, 5, .45)); }
.orn.tl { top: -2.5%; left: -3%; }
.orn.tr { top: -2.5%; right: -3%; transform: scaleX(-1); }
.orn.bl { bottom: -2.5%; left: -3%; transform: scaleY(-1); }
.orn.br { bottom: -2.5%; right: -3%; transform: scale(-1, -1); }
.crest { position: absolute; left: 50%; width: 42%; height: auto; aspect-ratio: 2; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(50, 30, 5, .45)); }
.crest.top { top: 0; transform: translate(-50%, -40%); }
.crest.bottom { bottom: 0; transform: translate(-50%, 40%) scaleY(-1); width: 30%; }
.mist { /* soft cloud wisps in front of the frame's foot, blending it into the 3D cloud behind */
  position: absolute; z-index: 3; left: -30%; right: -30%; bottom: -16%; height: 34%; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 50% at 30% 62%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 34% 46% at 66% 58%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 50% 40% at 50% 75%, rgba(250, 252, 255, .9), rgba(250, 252, 255, 0) 72%);
  filter: blur(3px);
}

/* ---------- 3D track + grape tags ---------- */
#track { height: 1200vh; position: relative; }

.tag-string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.tag-string line { stroke: #8a6a3a; stroke-width: 1.4; }
.tag-string circle { fill: var(--grape); }

.tag {
  position: absolute; left: 0; top: 0;
  will-change: transform, opacity;
  transition: opacity .35s ease;
}
.tag.hidden { opacity: 0; }
.tag-mini {
  position: relative;
  font-family: var(--script); font-size: 24px; white-space: nowrap;
  padding: 4px 14px 4px 26px;
  background: var(--parchment); border: 1px solid var(--parchment-edge);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 2px 8px rgba(59, 42, 20, .2);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
.tag-mini::before { content: ''; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #c9b994; }

.tag-card {
  display: none;
  width: min(380px, calc(100vw - 32px));
  background: var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 10px 30px rgba(59, 42, 20, .28);
  pointer-events: auto;
  position: relative;
}
.tag-card::before { /* inner gold rule */
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(176, 141, 60, .45); border-radius: 10px; pointer-events: none;
}
.tag.active .tag-mini { display: none; }
/* schedule clock: only the title is HTML; time and stage are written on the dial */
.sched { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; pointer-events: none; }
.sched.shown { opacity: 1; }
.sched-title { position: absolute; left: 0; top: 0; margin: 0; text-align: center; white-space: nowrap; }
.sched-title { font-family: var(--script); font-size: clamp(36px, 5.4vw, 57.6px); color: var(--ink); text-shadow: 0 0 12px rgba(255, 255, 255, .95), 0 0 4px rgba(255, 255, 255, .9); }

.venue-link { position: absolute; pointer-events: auto; border-radius: 10px; cursor: pointer; }
.venue-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.schedule-list { list-style: none; margin: 0; padding: 0; font-size: 19px; }
.schedule-list li { margin: 4px 0; }
.schedule-list b { color: var(--olive); margin-right: 8px; }

/* cloud countdown: only the title and unit labels are HTML, the digits are 3D clouds */
.cd3d { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.cd3d.shown { opacity: 1; }
.cd3d-title, .cd3d-label {
  position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; color: var(--ink);
  font-family: var(--script); text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9);
}
.cd3d-title { font-size: clamp(28px, 4vw, 46px); }
.cd3d-label { font-family: var(--italic); font-style: italic; font-weight: 600; font-size: clamp(16px, 1.8vw, 22px); color: var(--ink-soft); }
.tag.sign .tag-card { width: min(440px, calc(100vw - 32px)); text-align: center; border-color: var(--gold); }
.tag.sign .leaf-rule { margin: 4px auto 10px; }
.tag.active .tag-card { display: block; animation: tagIn .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tagIn { from { opacity: 0; transform: scale(.85) translateY(-10px); } }

.tag-card h3 { font-family: var(--script); font-weight: 400; font-size: 38.4px; margin: 0 0 8px; line-height: 1.1; color: var(--ink); }
.tag-card p { margin: 0 0 10px; }
.tag-time { font-family: var(--bold); font-size: 42px; font-weight: 400; color: var(--olive); line-height: 1; letter-spacing: .03em; }
.tag-event-title { font-family: var(--script); font-size: 43.2px; margin-top: 4px; }
.tag-event-title mark { background: linear-gradient(transparent 55%, rgba(90, 46, 94, .22) 55%); color: inherit; padding: 0 4px; }
.leaf-rule { display: block; width: 120px; height: 14px; margin: 4px 0 10px; }

.countdown { display: flex; gap: 8px; justify-content: space-between; text-align: center; margin-top: 6px; }
.countdown div { flex: 1; background: rgba(255, 255, 255, .55); border: 1px solid var(--parchment-edge); border-radius: 8px; padding: 6px 2px; }
.countdown b { display: block; font-family: var(--bold); font-size: 30px; font-weight: 400; line-height: 1.1; color: var(--olive); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 15px; color: var(--ink-soft); }

.address { color: var(--ink-soft); font-size: 17px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  background: var(--olive); color: #fff8e6; border: none; text-decoration: none;
  font-family: var(--bold); font-size: 17px; font-weight: 400; letter-spacing: .02em;
  box-shadow: 0 3px 10px rgba(95, 111, 44, .3);
  transition: background .2s, transform .1s;
}
.btn:hover { background: #4e5c22; }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--olive); border: 1px solid var(--olive); box-shadow: none; }
.btn.ghost:hover { background: rgba(95, 111, 44, .08); }

.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 4px 0 12px; }
.swatches span { aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(59, 42, 20, .15); }
.dress-line { margin: 0 0 6px; font-size: 17px; }
.dress-line b { font-family: var(--script); font-weight: 400; font-size: 26.4px; margin-right: 4px; }

.details-list { margin: 0; padding: 0 0 0 4px; list-style: none; font-size: 16.5px; }
.details-list li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.details-list li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--grape); box-shadow: 5px -4px 0 -1px var(--olive-light); }
.organizer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.organizer .btn { font-size: 16px; padding: 7px 14px; }

/* ---------- fallback flat list ---------- */
#flat-stops { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
#flat-stops .tag { position: static; }
#flat-stops .tag-card { display: block; }
#flat-stops .tag-mini { display: none; }
body.no3d #track { display: none; }
body.no3d #sky { background: linear-gradient(to bottom, var(--sky-top), var(--ivory) 40%); }

/* ---------- stage navigation: a little vine with a gold medallion per stage ---------- */
.stage-nav { position: fixed; z-index: 18; right: 18px; top: 50%; transform: translateY(-50%); transition: opacity .4s; }
body.locked .stage-nav { opacity: 0; pointer-events: none; }
.stage-track { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: min(66vh, 500px); width: 30px; }
/* the stem: a twisted vine, with the passed part gilded */
.stage-track::before, .stage-fill { content: ''; position: absolute; left: 50%; top: 13px; width: 3px; margin-left: -1.5px; border-radius: 2px; }
.stage-track::before {
  bottom: 13px;
  background: repeating-linear-gradient(170deg, #6b4f2a 0 5px, #8a6a3a 5px 8px, #5a7a2e 8px 10px);
  box-shadow: 0 0 0 1px rgba(255, 250, 235, .35), 0 1px 4px rgba(40, 25, 10, .35);
}
.stage-fill { height: calc((100% - 26px) * var(--progress, 0)); background: linear-gradient(#f3d78e, #c99a3a); box-shadow: 0 0 7px rgba(240, 212, 138, .8); transition: height .55s ease; }
.nav-leaf { /* little vine leaves between the medallions */
  position: relative; z-index: 1; width: 11px; height: 6px; border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #8fae4a, #5d7a26); box-shadow: 0 1px 2px rgba(40, 25, 10, .3);
}
.nav-leaf.l { transform: translateX(-6px) rotate(-30deg); }
.nav-leaf.r { transform: translateX(6px) rotate(150deg); }
/* medallions */
.stage-dot {
  position: relative; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #efe2c2); color: #9a7428;
  border: 1.5px solid #c4a463; box-shadow: 0 2px 5px rgba(40, 25, 10, .35), inset 0 0 0 2px rgba(255, 250, 235, .7);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), background .3s, color .3s, box-shadow .3s;
}
.stage-dot::before { content: ''; position: absolute; inset: -8px; } /* bigger tap area */
.stage-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-dot.passed { background: radial-gradient(circle at 35% 30%, #f6dc94, #c99a3a); color: #4a3208; border-color: #a37a26; }
.stage-dot.active {
  transform: scale(1.32); background: radial-gradient(circle at 35% 30%, #fff1bf, #d9b24f 60%, #a37a26); color: #3a2706; border-color: #8a6419;
  box-shadow: 0 0 0 3px rgba(240, 212, 138, .35), 0 0 14px rgba(240, 212, 138, .9), inset 0 1px 0 rgba(255, 250, 220, .8);
}
.stage-dot:hover:not(.active) { transform: scale(1.12); }
.stage-dot:focus-visible { outline: 2px solid #f0d48a; outline-offset: 4px; }
.stage-label {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--script); font-size: 25.2px; color: var(--ink); text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9);
  opacity: 0; transition: opacity .3s;
}
.stage-dot.active .stage-label { font-size: 16px; } /* the medallion is scaled up 1.32×: keep the label the same visual size */
.stage-dot.active .stage-label, .stage-dot:hover .stage-label, .stage-dot:focus-visible .stage-label { opacity: 1; }
@media (max-width: 760px) {
  /* phones: the vine runs across the top, next to the music button */
  .stage-nav { left: 14px; right: 74px; top: 26px; transform: none; }
  .stage-track { flex-direction: row; width: auto; height: 30px; }
  .stage-track::before, .stage-fill { top: 50%; left: 12px; width: auto; height: 3px; margin: -1.5px 0 0; }
  .stage-track::before { right: 12px; bottom: auto; background: repeating-linear-gradient(80deg, #6b4f2a 0 5px, #8a6a3a 5px 8px, #5a7a2e 8px 10px); }
  .stage-fill { width: calc((100% - 24px) * var(--progress, 0)); height: 3px; transition: width .55s ease; }
  .stage-dot { width: 24px; height: 24px; }
  .stage-dot.quiet .stage-label { display: none; } /* the clock has its own «Программа дня» plaque right there */
  .stage-ico { width: 13px; height: 13px; }
  .nav-leaf.l { transform: translateY(-5px) rotate(-60deg); }
  .nav-leaf.r { transform: translateY(5px) rotate(120deg); }
  .stage-label { right: auto; left: 50%; top: calc(100% + 9px); transform: translateX(-50%); font-size: 17px; }
  .stage-dot.active .stage-label { font-size: 13px; }
  .stage-dot:first-of-type .stage-label { left: -4px; transform: none; }
  .stage-dot:last-of-type .stage-label { left: auto; right: -4px; transform: none; }
  .stage-dot:hover:not(.active) .stage-label { opacity: 0; }
}

/* ---------- RSVP: Roman voting tablets → envelope with a wax seal ---------- */
#rsvp { padding: 18vh 16px 40px; display: flex; flex-direction: column; align-items: center; }
body.no3d #rsvp { padding-top: 40px; }
.script-title { font-family: var(--script); font-weight: 400; font-size: clamp(38px, 7vw, 54px); text-align: center; margin: 0 0 6px; }
.rsvp-stage { position: relative; width: min(440px, 100%); min-height: 560px; padding-top: 34px; }

/* the tablet: carved wooden frame (thick border) around dark wax (padding box) */
.tablet {
  position: relative; min-height: 480px; border-radius: 12px;
  border-style: solid; border-color: transparent; border-width: 18px 18px 38px 26px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 240, 210, .025) 0 2px, transparent 2px 9px) padding-box,
    radial-gradient(rgba(255, 240, 210, .04) 1px, transparent 1.3px) 0 0 / 5px 5px padding-box,
    radial-gradient(ellipse at 50% 40%, #54452f, #2e2518 85%) padding-box,
    repeating-linear-gradient(92deg, rgba(60, 35, 15, .18) 0 2px, transparent 2px 7px, rgba(255, 225, 180, .06) 7px 8px, transparent 8px 13px) border-box,
    linear-gradient(135deg, #b8895a, #8a6440 28%, #a87c4d 52%, #7a5530 78%, #a37748) border-box;
  box-shadow: 0 18px 36px rgba(40, 25, 10, .38), inset 0 0 0 2px rgba(30, 18, 6, .45), inset 0 0 26px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 240, 210, .06);
  color: #f2e8d0;
}
.tablet.back { position: absolute; inset: 0; pointer-events: none; }
.tablet.back.b1 { transform: rotate(2.2deg) translate(7px, 5px); filter: brightness(.82); }
.tablet.back.b2 { transform: rotate(-3deg) translate(-7px, 10px); filter: brightness(.7); }
.tablet.front { display: flex; flex-direction: column; padding: 30px 22px 16px; }
.tablet-stack { position: relative; perspective: 1400px; }
.tablet.leaf { position: absolute; left: 0; right: 0; top: 0; z-index: 3; transform-origin: 0 50%; pointer-events: none; backface-visibility: hidden; }

/* frame furniture: bronze title plaque, carved deadline, corner brackets, hinge rings */
.tablet-plaque {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%); z-index: 2;
  padding: 6px 26px 8px; border-radius: 8px; white-space: nowrap;
  background: linear-gradient(160deg, #f0d48a, #b8913f 40%, #e3c06a 60%, #9a7428);
  box-shadow: 0 4px 10px rgba(40, 25, 10, .4), inset 0 0 0 1.5px rgba(90, 60, 15, .6), inset 0 1px 0 rgba(255, 245, 210, .7);
}
.tablet-plaque::before, .tablet-plaque::after { /* rivets */
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c4, #8a6419 70%);
}
.tablet-plaque::before { left: 9px; } .tablet-plaque::after { right: 9px; }
.tablet-plaque span { font-family: var(--script); font-size: 31.2px; color: #4a3208; text-shadow: 0 1px 0 rgba(255, 240, 200, .7), 0 -1px 0 rgba(80, 50, 10, .35); }
.tablet-engrave {
  position: absolute; left: 0; right: 0; bottom: -31px; text-align: center; font-family: var(--bold); font-size: 14px; font-weight: 400; letter-spacing: .04em;
  color: #2a1606; text-shadow: 0 1px 0 rgba(255, 232, 195, .7), 0 -1px 0 rgba(30, 14, 3, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px;
}
.corner { position: absolute; width: 22px; height: 22px; border: 3px solid #b8913f; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.corner::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f0d48a; }
.corner.tl { top: -16px; left: -24px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.corner.tr { top: -16px; right: -16px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.corner.bl { bottom: -36px; left: -24px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.corner.br { bottom: -36px; right: -16px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.corner.tl::after { left: 3px; top: 3px; } .corner.tr::after { right: 3px; top: 3px; }
.corner.bl::after { left: 3px; bottom: 3px; } .corner.br::after { right: 3px; bottom: 3px; }
.hinge { /* leather loop with a bronze ring on the hinged side */
  position: absolute; left: -33px; width: 18px; height: 28px; border-radius: 9px; z-index: 1;
  border: 4px solid #6b3a1e; background: transparent; box-shadow: inset 0 0 0 2px #c9a14a, 0 2px 3px rgba(0, 0, 0, .4);
}
.hinge.h1 { top: 18%; } .hinge.h2 { top: 70%; }

/* answered tablets pile up on the left */
.tablet-pile { position: absolute; left: -8px; top: 60px; width: 68%; height: 430px; pointer-events: none; }
.tablet-pile i {
  position: absolute; inset: 0; border-radius: 12px;
  background: repeating-linear-gradient(92deg, rgba(60, 35, 15, .2) 0 2px, transparent 2px 9px), linear-gradient(135deg, #9a7048, #6e4c2c);
  box-shadow: 0 6px 14px rgba(40, 25, 10, .3);
}
.tablet-pile i:nth-child(1) { transform: rotate(-9deg) translateX(-24px); }
.tablet-pile i:nth-child(2) { transform: rotate(-12deg) translateX(-30px) translateY(6px); }
.tablet-pile i:nth-child(3) { transform: rotate(-7deg) translateX(-36px) translateY(10px); }
.tablet-pile i:nth-child(4) { transform: rotate(-14deg) translateX(-40px) translateY(14px); }

/* content scratched into the wax */
.tablet-body { flex: 1; }
.tablet-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.tablet-progress span { font-family: var(--bold); font-size: 12px; letter-spacing: .32em; font-weight: 400; color: #d9b866; }
.notches { display: flex; gap: 6px; }
.notches i { width: 14px; height: 4px; border-radius: 2px; background: rgba(242, 232, 208, .18); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.notches i.done { background: rgba(217, 184, 102, .65); }
.notches i.now { background: #f0d48a; box-shadow: 0 0 6px rgba(240, 212, 138, .6); }
.tablet-person { margin: 2px 0 0; text-align: center; font-family: var(--script); font-size: 28.8px; color: #e6c873; }
.tablet-q {
  display: block; font-family: var(--script); font-size: clamp(32.4px, 7.7vw, 39.6px); line-height: 1.18; margin: 6px 0 18px; text-align: center; padding: 0;
  color: #f6ecd2; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 245, 220, .12);
}
.tablet fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.tablet-hint { margin: -8px 0 14px; text-align: center; font-family: var(--italic); font-style: italic; font-size: 16px; color: rgba(242, 232, 208, .65); }
.wax-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wax-chips.big { flex-direction: column; align-items: stretch; gap: 12px; }
.wax-chips.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.wax-chip { position: relative; display: block; }
.wax-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wax-chip span {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 17px; line-height: 1.15;
  border: 1.5px solid rgba(242, 232, 208, .32); color: #f2e8d0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(255, 240, 210, .03));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 240, 210, .08); /* pressed into the wax */
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .12s;
}
.wax-chips.big .wax-chip span { justify-content: center; padding: 14px; font-size: 20px; }
.wax-chip b { font-family: var(--bold); font-weight: 400; }
.wax-chip span:active { transform: scale(.97); }
.wax-chip input:checked + span { /* gold leaf */
  background: linear-gradient(135deg, #f3d78e, #c99a3a 55%, #e6c56d); border-color: #f0d48a; color: #2f2210;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 250, 220, .7);
}
.wax-chip input:focus-visible + span { outline: 2px solid #f0d48a; outline-offset: 3px; }
.wax-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wax-field { position: relative; }
.wax-input {
  display: block; width: 100%; padding: 12px 6px; font: inherit; font-size: 21px; color: #fbf3df; text-align: center;
  background: transparent; border: none; border-bottom: 2px dashed rgba(242, 232, 208, .55);
}
.wax-input::placeholder { color: rgba(242, 232, 208, .38); font-family: var(--italic); font-style: italic; }
.wax-input:focus { outline: none; border-bottom: 2px solid #f0d48a; }
.tablet-error { margin: 12px 0 0; text-align: center; color: #ffbe9c; font-size: 16px; }
.tablet-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.wax-btn { /* gold medallion button */
  min-width: 132px; padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer; font: inherit; font-family: var(--bold); font-size: 17px; font-weight: 400;
  background: linear-gradient(160deg, #f3d78e, #c99a3a 50%, #9a7428); color: #2f2210;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 250, 220, .75), inset 0 0 0 1.5px rgba(90, 60, 15, .45);
}
.wax-btn::after { content: ' →'; }
.wax-btn.send { background: linear-gradient(160deg, #d2584a, #a5291e 55%, #6d1c13); color: #fbe4d4; } /* the send button is the wax seal colour */
.wax-btn.send::after { content: ''; }
.wax-btn:disabled { opacity: .7; cursor: default; }
.wax-back {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 20px; color: #f2e8d0;
  background: transparent; border: 1.5px solid rgba(242, 232, 208, .35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
}
.wax-link { background: none; border: none; cursor: pointer; font: inherit; font-size: 17px; color: rgba(242, 232, 208, .85); text-decoration: underline; text-underline-offset: 3px; }
.wax-link.dark { color: var(--olive); }

/* summary tablet */
.sum-list { display: flex; flex-direction: column; gap: 14px; }
.sum-name { margin: 0 0 2px; font-family: var(--script); font-size: 28.8px; color: #e6c873; text-align: center; }
.sum-line {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; font: inherit; font-size: 17px; text-align: left;
  color: #f2e8d0; background: none; border: none; border-bottom: 1px dashed rgba(242, 232, 208, .22); cursor: pointer;
}
.sum-line span { flex: 1; }
.sum-line em { font-style: normal; opacity: .55; }
.sum-line .wax-ico { width: 20px; height: 20px; opacity: .85; }

/* sending: tablets gather and vanish, the envelope rises, the stack slides in, the flap closes, the seal drops */
.rsvp-stage.sending .tablet-stack { transition: transform .5s ease, opacity .45s ease; transform: scale(.55) translateY(-30px); opacity: 0; pointer-events: none; }
.rsvp-stage.sending .tablet-pile { transition: opacity .3s; opacity: 0; }
.env-scene { position: absolute; top: 20px; left: 50%; width: min(94vw, 900px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.rsvp-stage.sending { min-height: calc(min(94vw, 900px) * .667 + 80px); }
.env-scene[hidden] { display: none; }
.mini-env { position: relative; width: 100%; aspect-ratio: 3 / 2; container-type: inline-size; perspective: 900px; filter: drop-shadow(0 16px 20px rgba(40, 30, 10, .3)); }
.rsvp-stage.sending .mini-env { animation: envIn .6s cubic-bezier(.2, .8, .3, 1) .2s both; }
@keyframes envIn { from { transform: translateY(70px) scale(.9); opacity: 0; } }
.mini-env-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.mini-env-layer.front { z-index: 3; }
.mini-stack { position: absolute; z-index: 2; left: 20%; right: 20%; top: -62%; height: 92%; }
.mini-stack i { position: absolute; inset: 0; border-radius: 6px; border: 5px solid #9a7048; background: #3f3424; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.mini-stack i:nth-child(1) { transform: rotate(-4deg) translate(-4px, 4px); }
.mini-stack i:nth-child(2) { transform: rotate(3deg) translate(4px, 2px); }
.rsvp-stage.sending .mini-stack { animation: stackIn .8s cubic-bezier(.5, 0, .3, 1) .7s both; }
@keyframes stackIn { from { transform: translateY(-20%); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(66%); } }
.mini-flap { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 0; transform: rotateX(180deg); }
.mini-flap svg { width: 100%; height: 100%; display: block; }
.rsvp-stage.sealed .mini-flap { animation: flapClose .6s ease forwards; }
@keyframes flapClose { 0% { transform: rotateX(180deg); z-index: 0; } 50% { z-index: 0; } 51% { z-index: 4; } 100% { transform: rotateX(0deg); z-index: 4; } }
.mini-seal { position: absolute; z-index: 5; left: 50%; top: 59%; width: 26%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%) scale(2.2); opacity: 0; overflow: visible; }
.rsvp-stage.sealed .mini-seal { animation: sealDrop .5s cubic-bezier(.3, 1.5, .5, 1) .55s forwards; }
@keyframes sealDrop { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.env-thanks { position: absolute; z-index: 6; inset: 0; text-align: center; pointer-events: none; }
/* «Спасибо!» on the flap above the seal (like the greeting on the opening envelope), the note under the seal */
.ink-thanks {
  position: absolute; left: 0; right: 0; top: 13%; margin: 0; font-family: var(--script); font-size: 13.2cqw; line-height: 1; color: #2c1d0c;
  text-shadow: 0 0 1px rgba(44, 29, 12, .5); /* a touch of ink bleed */
  clip-path: inset(0 100% 0 0); /* revealed left to right, like a pen stroke */
}
.ink-note { position: absolute; left: 0; right: 0; top: 80%; margin: 0; font-family: var(--italic); font-style: italic; font-size: max(15px, 3.8cqw); color: #4a3a22; opacity: 0; }
.ink-edit {
  position: absolute; right: 6%; bottom: 3%; pointer-events: auto; cursor: pointer;
  background: none; border: none; padding: 2px 0; font: italic 600 max(13px, 3.2cqw) var(--italic); color: #6b5a3e;
  text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; opacity: 0;
}
.rsvp-stage.sealed .ink-thanks { animation: inkWrite 1.1s steps(18, end) 1s forwards; }
.rsvp-stage.sealed .ink-note, .rsvp-stage.sealed .ink-edit { animation: inkFade .6s ease 2.1s forwards; }
@keyframes inkWrite { to { clip-path: inset(0 0 0 0); } }
@keyframes inkFade { to { opacity: 1; } }
/* returning guest: show the sealed envelope without replaying the animation */
.rsvp-stage.instant *, .rsvp-stage.instant { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }

.music-credit { display: block; font-family: var(--serif); font-size: 13px; max-width: 560px; margin: 10px auto 0; opacity: .85; text-align: center; padding: 0 16px; }
.footer { text-align: center;  font-family: var(--script); font-size: 31.2px; color: var(--ivory); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); padding: 30px 0 10px; }

/* photos inside the dress-code card when 3D is unavailable */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 10px; }
.look-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: #efe4cc; }

/* stacked intro below 1200px: names on top, the two frames side by side */
@media (max-width: 1199px) {
  .intro-row { flex-wrap: wrap; gap: 7vw; }
  .intro-center { order: -1; flex-basis: 100%; margin-bottom: 4vh; }
  .names { font-size: clamp(70px, 18vw, 170px); padding: 0; }
  .date { font-size: clamp(46px, 12.5vw, 110px); letter-spacing: .03em; }
  .cloud-photo { width: min(40vw, 320px); }
  .cloud-photo.right { margin-top: 5vw; }
}

/* phones: the whole invitation (names, photos, date, greeting) fits on the first screen;
   the scroll cue is just the round button, with room kept for it at the bottom */
@media (max-width: 760px) {
  #intro { justify-content: flex-start; padding: 86px 14px calc(78px + env(safe-area-inset-bottom)); }
  .eyebrow { font-size: 14px; letter-spacing: .32em; gap: 10px; margin: 0 0 1.2svh; white-space: nowrap; }
  .eyebrow-line { width: 34px; }
  .eyebrow-line:last-child { margin-left: -.32em; }
  .intro-row { gap: 1.2svh 6vw; }
  .intro-center { margin-bottom: 0; }
  /* sizes follow both the width and the height, so short phones (iPhone SE) still fit everything */
  .names { font-size: clamp(40px, min(14vw, 8.2svh), 76px); }
  .cloud-photo { width: min(29vw, 17svh, 150px); }
  .cloud-photo.right { margin-top: 3vw; }
  .date { font-size: clamp(32px, min(10.5vw, 6.8svh), 52px); margin-top: 2.4svh; }
  .greeting { font-size: clamp(24px, min(7.4vw, 5svh), 34px); margin: 1.8svh 0 2px; }
  .greeting-text { font-size: 17px; line-height: 1.35; }
  #scroll-cue { bottom: max(12px, env(safe-area-inset-bottom)); gap: 0; }
  #scroll-cue #hint { display: none; }
  .cue-circle { width: 50px; height: 50px; }
  .cue-circle i:first-child { top: 10px; }
  .cue-circle i:last-child { top: 18px; }
}
@media (max-width: 760px) and (max-height: 620px) {
  #intro { padding-top: 80px; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .eyebrow { margin-bottom: .6svh; }
  .greeting-text { font-size: 16px; }
  .cue-circle { width: 44px; height: 44px; }
  .cue-circle i:first-child { top: 8px; }
  .cue-circle i:last-child { top: 15px; }
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  .tag-card h3 { font-size: 28px; }
  .tag-time { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}