/* Walk to Bethlehem: colours sampled from the logo. */
:root {
  --ink: #0e101a;
  --navy: #131828;
  --gold: #dabc5f;
  --gold-l: #ebd9a2;
  --gold-d: #b79e51;
  --cream: #f8f7f2;
  --sand: #a17955;
  --copper: #c9935f;
  --blue: #364069;
  --muted: #d3cec2;
  --muted-2: #c4bfb3;
  --card: rgba(14, 16, 26, 0.7);
  --line: rgba(218, 188, 95, 0.3);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Allura', cursive;
  --sans: 'Manrope', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* What shows behind the phone's status bar / browser bar and when you over-scroll:
   the screen's top colour above, its bottom colour below (set per screen in app.js). */
html {
  /* A solid colour Safari can read for its bottom bar, with the top colour layered above. */
  background-color: var(--chrome-bottom, #5f473a);
  background-image: linear-gradient(var(--chrome-top, #0b0d16) 50%, var(--chrome-bottom, #5f473a) 50%);
  overscroll-behavior: none;
}
.chrome-edge { position: fixed; left: 0; right: 0; z-index: 60; pointer-events: none; }
.chrome-edge.top { top: 0; height: max(env(safe-area-inset-top), 3px); background-color: var(--chrome-top, #0b0d16); }
/* Safari samples solid fixed elements touching the bottom edge to tint its toolbar. The strip
   is solid colour (what Safari reads) but faded at the top so it melts into the sky. */
.chrome-edge.bottom { bottom: 0; height: calc(env(safe-area-inset-bottom) + 28px); background-color: var(--chrome-bottom, #5f473a);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%); }
body {
  min-height: 100dvh;
  background-color: transparent;
  overscroll-behavior: none;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Painted sky fixed behind everything; the stars live on their own layers and drift. */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity 0.8s; }
.bg-sky { position: absolute; inset: 0; background: #131828 url('/assets/sky-base.jpg') center top / cover no-repeat; }
.bg-stars { position: absolute; inset: 0; background: url('/assets/stars.png') repeat; background-size: 600px; will-change: background-position; }
.bg-stars.far { background-size: 380px; opacity: 0.5; }
body[data-screen='during'] .bg, body[data-screen='candle'] .bg, body[data-screen='photo'] .bg { opacity: 0; }
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
p { margin: 0; }
h1 { margin: 0; font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* layout */
section { min-height: 100dvh; display: flex; flex-direction: column; }
.pad { padding: calc(20px + var(--safe-t)) 20px calc(24px + var(--safe-b)); }
.top + section .pad, .top + .pad { padding-top: 12px; }
.top + section { min-height: calc(100dvh - 56px); }
.pad-x { padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.stack-xs { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; gap: 12px; align-items: center; }
.row-sm { display: flex; gap: 8px; align-items: center; }
.baseline { align-items: baseline; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.center { text-align: center; }
.center-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.full { width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* type */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-l); }
.eyebrow.copper, .copper { color: var(--copper); }
.label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.title { font-family: var(--serif); font-size: 31px; line-height: 1.12; }
.title-sm { font-family: var(--serif); font-size: 25px; line-height: 1.15; font-weight: 700; }
.script { font-family: var(--script); font-weight: 400; color: var(--gold); font-size: 42px; line-height: 1; }
.script.big { font-size: 54px; }
.script.huge { font-size: 68px; }
.serif-i { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.32; }
.verse { font-family: var(--serif); font-size: 22px; line-height: 1.38; }
.verse.i { font-style: italic; }
.ref { font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-l); }
.quote { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.35; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.5; }
.fine { font-size: 13px; color: var(--muted-2); }
.gold { color: var(--gold-l); }
.hand { font-family: var(--script); font-size: 34px; font-weight: 400; line-height: 1; }
.hand-line { text-align: center; font-family: var(--serif); font-style: italic; font-size: 20px; color: #efe2c4; }
.error { color: #f0b8a0; font-size: 14px; }
small { display: block; font-size: 12.5px; color: var(--muted-2); font-weight: 500; }

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px;
  background: linear-gradient(180deg, #ebd39a, #c9a954); color: #1a1405;
  font-weight: 800; font-size: 17px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(161, 121, 85, 0.3);
}
.btn:disabled { opacity: 0.55; }
.btn.ghost { background: rgba(14, 16, 26, 0.55); color: var(--gold-l); border: 1px solid rgba(218, 188, 95, 0.7); box-shadow: none; font-weight: 700; }
.btn.small-btn { min-height: 48px; font-size: 15px; }
.link { background: none; border: 0; color: var(--gold-l); font-weight: 700; padding: 12px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.icon-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(218, 188, 95, 0.45); background: rgba(14, 16, 26, 0.5); display: flex; align-items: center; justify-content: center; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.card.row { align-items: flex-start; }
.card.blue { background: rgba(45, 61, 97, 0.75); border-color: rgba(142, 155, 191, 0.45); }
.card.brown { background: rgba(116, 84, 66, 0.72); border-color: rgba(201, 147, 95, 0.5); }
.ring { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; background: rgba(218, 188, 95, 0.12); }
.ring.dark { border-color: rgba(26, 20, 5, 0.3); color: #1a1405; background: rgba(26, 20, 5, 0.1); }
.ring.num { font-weight: 800; font-size: 15px; }
.big-ring { width: 72px; height: 72px; margin-top: 12vh; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.field em { font-style: normal; font-weight: 500; color: var(--muted-2); }
.field input, .field textarea, #gift-own input {
  min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(248, 247, 242, 0.25);
  background: rgba(22, 28, 44, 0.85); font-size: 16px; font-weight: 500; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.opt { min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(248, 247, 242, 0.22); background: rgba(14, 16, 26, 0.62); text-align: left; font-size: 16px; }
.opt.tall { min-height: 64px; text-align: center; font-weight: 700; }
.opt.picked { border: 2px solid var(--gold); background: rgba(218, 188, 95, 0.22); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-flex; gap: 6px; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(248, 247, 242, 0.25); font-size: 14px; color: var(--cream); }
.chip input:checked + span { border: 2px solid var(--gold); background: rgba(218, 188, 95, 0.22); font-weight: 800; }
.chip input:focus-visible + span { outline: 2px solid var(--gold); }
fieldset { margin: 0; min-width: 0; }
legend { float: left; width: 100%; font-weight: 700; font-size: 15px; padding: 0; }
.item, .feature {
  display: flex; gap: 14px; align-items: center; text-align: left; width: 100%;
  border-radius: 20px; border: 1px solid var(--line); background: var(--card); padding: 14px 16px; color: var(--cream); text-decoration: none;
}
.item > span:not(.ring), .feature > span:not(.ring) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.feature { background: linear-gradient(135deg, #ebd39a, #c9a954); color: #1a1405; border: 0; }
.feature small { color: #3a2e14; }
.item svg { color: var(--muted-2); flex-shrink: 0; }
.item > svg:first-child { color: var(--gold); }
.pick { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; color: var(--cream); }
.pick-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pill { padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: linear-gradient(180deg, #ebd39a, #c9a954); color: #1a1405; white-space: nowrap; }
.pill.live { background: var(--blue); color: var(--cream); border: 1px solid var(--gold); }
.progress { height: 8px; border-radius: 4px; background: rgba(248, 247, 242, 0.14); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 4px; transition: width 0.4s; }
.bar { position: relative; min-height: 50px; border-radius: 14px; overflow: hidden; background: rgba(14, 16, 26, 0.65); border: 1px solid rgba(248, 247, 242, 0.18); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(218, 188, 95, 0.35); transition: width 0.5s; }
.bar span, .bar b { position: relative; font-size: 15px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 30px; height: 6px; border-radius: 3px; background: rgba(248, 247, 242, 0.25); }
.dots i.on { background: var(--gold); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(248, 247, 242, 0.08); width: 240px; margin: 0 auto; }
.seg button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 600; }
.seg button.on { background: linear-gradient(180deg, #ebd39a, #c9a954); color: #1a1405; font-weight: 800; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: calc(10px + var(--safe-t)) 16px 6px; }
.top.dim { position: fixed; left: 0; right: 0; opacity: 0.4; max-width: 480px; margin: 0 auto; }
.flock-chip { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(14, 16, 26, 0.72); border: 1px solid rgba(218, 188, 95, 0.5); color: var(--gold-l); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.conn { font-size: 12px; color: #f0c9a0; }

/* welcome */
.welcome .hero { position: relative; height: 54dvh; max-height: 470px; overflow: hidden; }
.welcome .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transform: scale(1.14); transform-origin: 40% 80%; }
.welcome .hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, rgba(19, 24, 40, 0), rgba(19, 24, 40, 0.92)); }
.welcome .pad { margin-top: -30px; position: relative; padding-top: 0; }

/* census scroll */
.scroll { border-radius: 6px; background: linear-gradient(170deg, #f2e6ca, #e2cfa6); color: #2b1e0e; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); transform: rotate(-1deg); }
.scroll small { color: #6b5232; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.scroll b { font-family: var(--serif); font-size: 19px; }
.scroll b.hand { font-family: var(--script); font-size: 34px; }
.scroll-head { display: flex; justify-content: space-between; font-family: var(--serif); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; }
.scroll-rule { height: 1px; background: #8a6a3a; }
.scroll-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scroll-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); color: #6b5232; }
.seal { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed #9c7a52; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: #8a6a3a; line-height: 1.3; flex-shrink: 0; }
.seal.sealed { border: 2px solid #8a3a2a; color: #8a3a2a; transform: rotate(-12deg); font-family: var(--serif); font-size: 11px; }
.sealed-card { display: flex; gap: 12px; align-items: center; border-radius: 14px; background: linear-gradient(170deg, #f2e6ca, #e2cfa6); color: #2b1e0e; padding: 12px 14px; }
.sealed-card small { color: #5a4436; }

/* dark scenes */
.dark-scene { background: #000; color: #a39c8a; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 40px; }
.dark-scene .eyebrow { color: #b8a97a; }
.dark-line { font-family: var(--serif); font-style: italic; font-size: 25px; color: #b8b09c; }
.dark-hint { position: absolute; bottom: calc(40px + var(--safe-b)); left: 40px; right: 40px; font-size: 13px; color: #8f8877; }
.ember { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(218, 188, 95, 0.32), rgba(0, 0, 0, 0) 68%); display: flex; align-items: center; justify-content: center; animation: breathe 4s ease-in-out infinite; }
.ember i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.75; } }

.glow-scene { background: #0b0d16; align-items: center; justify-content: flex-end; text-align: center; gap: 10px; padding: 0 24px calc(90px + var(--safe-b)); overflow: hidden; position: relative; }
.bloom { position: absolute; left: 50%; top: 32%; width: 900px; height: 900px; margin: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 243, 220, 0.95) 0%, rgba(239, 228, 196, 0.55) 14%, rgba(218, 188, 95, 0.18) 32%, rgba(0, 0, 0, 0) 55%); animation: bloomIn 1.2s ease-out both; }
@keyframes bloomIn { from { transform: scale(0.3); opacity: 0; } }
.glow-scene > :not(.bloom) { position: relative; }
.glow-scene .script { color: #fbf3dc; }

/* between */
.between { gap: 0; }
.between .title-sm { margin-top: 4px; }
/* Interactive map */
.between-head { padding-bottom: 8px; }
.map-wrap { position: relative; margin: 0 12px; aspect-ratio: 390 / 430; max-height: 62vh; border-radius: 22px; overflow: hidden; touch-action: none; background: rgba(14, 16, 26, 0.35); border: 1px solid var(--line); }
.map-inner { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-star { position: absolute; width: 31%; left: 49%; top: -3%; pointer-events: none; animation: starPulse 4s ease-in-out infinite; }
@keyframes starPulse { 50% { filter: brightness(1.25); transform: scale(1.04); } }
.map-tools { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.map-tools button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(218, 188, 95, 0.6); background: rgba(14, 16, 26, 0.75); color: var(--gold-l); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.map-tip { position: absolute; left: 12px; top: 10px; font-size: 11px; color: var(--muted-2); pointer-events: none; }
.walking { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.25); opacity: 0.2; } }
.token { transition: transform 2.5s ease-in-out; }
.sheet { margin-top: -8px; padding-bottom: calc(18px + var(--safe-b)); }
.clue .serif-i { margin-top: 6px; }

/* AR */
.ar-screen { background: #0b0d16; }
.ar-root { position: fixed; inset: 0; overflow: hidden; background: #0b0d16; touch-action: none; }
.ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.has-camera .ar-video { opacity: 1; }
/* Painted sky shows until (or instead of) the live camera. */
.ar-sky { position: absolute; inset: 0; background: #131828 url('/assets/sky-wide.jpg') repeat-x; background-size: auto 100%; }
.ar-obj { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.4s; pointer-events: none; }
.ar-obj img { position: absolute; left: 0; top: 0; display: block; }
.ar-star img { width: 52vw; max-width: 260px; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.ar-fire img { width: 58vw; max-width: 290px; transform: translate(-50%, -86%); transform-origin: 50% 86%; }
.ar-tag { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 8px 12px; border-radius: 12px; background: rgba(14, 16, 26, 0.8); border: 1px solid rgba(218, 188, 95, 0.55); font-size: 13px; font-weight: 800; color: var(--cream); }
.ar-star .ar-tag { top: 70px; }
.ar-fire .ar-tag { top: 14px; }
.ar-arrow { position: absolute; left: 0; top: 0; width: 44px; height: 44px; color: #fbf3dc; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.8)); transition: opacity 0.3s; pointer-events: none; }
.ar-reticle { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px; border: 1.5px solid rgba(248, 247, 242, 0.75); border-radius: 50%; pointer-events: none; }
.found .ar-reticle { border-color: var(--gold); box-shadow: 0 0 30px rgba(218, 188, 95, 0.6); }
.ar-top { position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 2; padding: calc(60px + var(--safe-t)) 22px 50px; background: linear-gradient(to bottom, rgba(11, 13, 22, 0.94), rgba(11, 13, 22, 0)); pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
.ar-top.center { text-align: center; }
.ar-screen .top { position: fixed; left: 0; right: 0; max-width: 480px; margin: 0 auto; }
.ar-hint { position: fixed; left: 0; right: 0; top: 64%; z-index: 2; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 23px; color: #fbf3dc; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); pointer-events: none; padding: 0 20px; }
.ar-bottom { position: fixed; left: 16px; right: 16px; bottom: calc(18px + var(--safe-b)); z-index: 2; max-width: 448px; margin: 0 auto; }
.ar-bottom .card { background: rgba(14, 16, 26, 0.86); }

/* angels: blinding flash, then it settles into the gold glory */
.angels { position: relative; overflow: hidden; padding: 0; }
.angels .flash, .angels .glory { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px; }
.angels .flash { background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fffdf4 28%, #fbefcb 62%, #f0d48a 100%); color: #2b2418; overflow: hidden; }
.angels .flash > :not(.flash-rays) { position: relative; }
.angels .flash.dimming { animation: flashOut 2.4s ease-in-out forwards; }
.flash-rays { position: absolute; inset: -25%; background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(218, 188, 95, 0.22) 0deg 4deg, rgba(255, 255, 255, 0) 4deg 13deg); mask-image: radial-gradient(circle at 50% 42%, transparent 8%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 8%, #000 30%, transparent 75%); animation: spin 90s linear infinite; }
.angels .flash .script { color: #9c8139; }
.angels .glory { background: radial-gradient(circle at 50% 38%, rgba(251, 243, 220, 0.5), rgba(218, 188, 95, 0.16) 35%, rgba(11, 13, 22, 0.2) 65%); color: var(--cream); }
.angels .glory > :not(.bloom) { position: relative; }
.angels .glory .script { color: #efdda8; }
.angels .glory .bloom { top: 38%; animation: none; opacity: 0.7; }
.angel-star { width: 190px; animation: starPulse 4s ease-in-out infinite; }
@keyframes flashOut { to { opacity: 0; visibility: hidden; } }

/* herod */
.shh { position: relative; display: flex; justify-content: center; height: 270px; }
.shh::before { content: ''; position: absolute; width: 250px; height: 250px; top: 20px; left: 50%; margin-left: -125px; border-radius: 50%; background: radial-gradient(circle, rgba(218, 188, 95, 0.28), rgba(0, 0, 0, 0) 65%); }
.shh svg { position: relative; }
.shh-word { position: absolute; right: 3%; top: 4px; font-family: var(--script); font-size: 54px; color: #efdda8; animation: shhWord 3.6s ease-in-out infinite; }
.shh-hand { animation: shhHand 3.6s ease-in-out infinite; }
.shh-open { animation: shhEyes 3.6s ease-in-out infinite; }
.shh-closed { animation: shhClosed 3.6s ease-in-out infinite; }
@keyframes shhHand { 0%, 12% { transform: translateY(80px); opacity: 0; } 38%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes shhWord { 0%, 40% { opacity: 0; transform: translateX(-8px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes shhEyes { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes shhClosed { 0%, 30% { opacity: 0; } 36%, 100% { opacity: 1; } }

/* candle */
.candle-scene { background: #0a090b; align-items: center; text-align: center; padding: calc(60px + var(--safe-t)) 24px calc(30px + var(--safe-b)); gap: 8px; overflow: hidden; }
.candle-scene .serif-i { font-size: 27px; color: #efe2c4; }
.candle { position: relative; width: 200px; flex: 1; min-height: 360px; margin-top: 20px; }
.candle-glow { position: absolute; left: 50%; top: 40px; width: 720px; height: 720px; margin-left: -360px; margin-top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, 0.42) 0%, rgba(201, 147, 95, 0.18) 22%, rgba(90, 50, 30, 0.08) 40%, rgba(0, 0, 0, 0) 60%); animation: glowPulse 2.4s ease-in-out infinite; }
.flame-lean { position: absolute; left: 77px; top: 0; width: 46px; height: 112px; transform-origin: 50% 100%; will-change: transform; }
.flame { position: absolute; left: 0; top: 0; width: 46px; height: 112px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 78%, #fffdf4 0%, #ffe9b0 22%, #f7b657 52%, rgba(222, 112, 40, 0.55) 76%, rgba(222, 112, 40, 0) 100%); filter: blur(1.2px); transform-origin: 50% 92%; animation: flick 1.6s ease-in-out infinite; }
.flame-blue { position: absolute; left: 14px; top: 86px; width: 18px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, rgba(140, 160, 230, 0.55), rgba(140, 160, 230, 0) 70%); filter: blur(1px); }
.wick { position: absolute; left: 98px; top: 94px; width: 4px; height: 22px; border-radius: 2px; background: linear-gradient(#3a2a1e, #1a120c); }
.wax { position: absolute; left: 54px; top: 110px; width: 92px; bottom: -40px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #c7b28c 0%, #eaddbf 22%, #fbf4e3 46%, #f1e5c9 66%, #d2be98 86%, #b39f7b 100%); }
.wax::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(rgba(255, 196, 120, 0.35), rgba(255, 196, 120, 0)); }
.pool { position: absolute; left: 0; right: 0; top: -9px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #ffe8b6 0%, #f1d9a8 45%, #dcc59a 100%); z-index: 1; }
.drip { position: absolute; top: 2px; border-radius: 0 0 6px 6px; z-index: 1; }
.drip.d1 { left: 3px; width: 11px; height: 46px; background: linear-gradient(90deg, #dccdae, #f7eeda); }
.drip.d2 { right: 10px; width: 9px; height: 28px; background: linear-gradient(90deg, #f1e5c9, #d2be98); }
@keyframes flick { 0%, 100% { transform: none; } 20% { transform: scale(0.96, 1.05) skewX(1.5deg); } 45% { transform: scale(1.03, 0.96) skewX(-1deg); } 70% { transform: scale(0.98, 1.03) skewX(1deg); } }
@keyframes glowPulse { 50% { opacity: 0.75; } }
.candle-foot { position: relative; padding-top: 16px; background: linear-gradient(rgba(10, 9, 11, 0), rgba(10, 9, 11, 0.9) 40%); width: 100%; }
.candle-foot .script { color: #ebd39a; font-size: 48px; }

/* gifts, reveal */
#gift-own { display: flex; gap: 8px; }
#gift-own input { flex: 1; }
.gift-star { width: 140px; }
.reveal { position: relative; overflow: hidden; text-align: center; }
.reveal > * { position: relative; }
.glow-top { position: absolute !important; left: 50%; top: -120px; width: 620px; height: 620px; margin-left: -310px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 243, 220, 0.4), rgba(218, 188, 95, 0.12) 30%, rgba(0, 0, 0, 0) 60%); }
.jay-struck { font-family: var(--serif); font-size: 44px; font-weight: 600; color: #8c8a86; text-decoration: line-through; text-decoration-color: var(--gold); margin-top: 24px; }
.reveal .script.huge { color: #efdda8; font-size: 82px; }

/* ticket */
.ticket { width: 100%; border-radius: 22px; background: linear-gradient(160deg, #ebd39a, #c9a954 60%, #a17955); color: #1a1405; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.ticket small { color: #2b2418; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.ticket-code { display: flex; gap: 10px; align-items: center; font-family: var(--serif); font-size: 46px; font-weight: 700; }
.ticket-rule { width: 100%; border-top: 2px dashed rgba(26, 20, 5, 0.35); margin: 8px 0; }
.ticket p { font-size: 13px; }

/* photo */
.photo { background: #05070d; min-height: 100dvh; }
.viewfinder { position: relative; margin: calc(12px + var(--safe-t)) 12px 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: #1d2236; }
.land .viewfinder { aspect-ratio: 4 / 3; }
.viewfinder video, #shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder video.mirror { transform: scaleX(-1); }
#shot { z-index: 3; object-fit: contain; background: #05070d; }
.frame { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.frame::before { content: ''; position: absolute; inset: 2.2%; border: 3px solid var(--gold); }
.frame::after { content: ''; position: absolute; inset: 3.9%; border: 1px solid rgba(218, 188, 95, 0.6); }
.frame-star { position: absolute; width: 28%; left: 36%; top: -4%; }
.land .frame-star { width: 18%; left: auto; right: 3%; top: -1%; }
.frame-banner { position: absolute; left: 0; right: 0; bottom: 0; height: 17.4%; display: flex; align-items: center; gap: 4%; padding: 0 5.5%; background: linear-gradient(rgba(14, 16, 26, 0.35), rgba(14, 16, 26, 0.75)), url('/assets/sky-wide.jpg') center 85% / cover; }
.land .frame-banner { height: 18.5%; }
.frame-banner img { height: 72%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid var(--gold); }
.frame-banner div { display: flex; flex-direction: column; line-height: 0.95; }
.wm1 { font-family: 'Permanent Marker', cursive; font-size: clamp(16px, 5.4vw, 26px); }
.wm2 { font-family: var(--script); color: var(--gold); font-size: clamp(24px, 8vw, 38px); margin-left: 10%; }
.frame-banner small { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #efe2c4; font-weight: 800; margin-top: 2px; }
.photo-controls { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; padding: 12px 20px calc(16px + var(--safe-b)); }
.shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--cream); background: linear-gradient(180deg, #ebd39a, #c9a954); }
.save-row .btn { flex: 1; }

/* menu */
.menu-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 20; }
.menu { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 21; background: #161c2c; border-top: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 22px 18px calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; animation: up 0.25s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}


/* ---------- screen transitions ---------- */
.layer { min-height: 100dvh; position: relative; animation: fadeUp 0.45s ease-out both; animation-delay: var(--enter-delay, 0ms); }
.layer.quick { animation-duration: 0.25s; }
.layer.enter-during, .layer.enter-candle { animation: fadeIn 0.9s ease both; animation-delay: var(--enter-delay, 0ms); }
.layer.enter-gabriel, .layer.enter-angels { animation: fadeIn 0.2s ease both; }
.layer.enter-between, .layer.enter-star, .layer.enter-fire, .layer.enter-reveal { animation: fadeIn 0.7s ease both; animation-delay: var(--enter-delay, 0ms); }
.layer.leaving { position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 40; pointer-events: none; animation: fadeOut var(--leave, 450ms) ease forwards; }
.layer.leave-gabriel, .layer.leave-angels { animation-name: dimOut; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes dimOut { 60% { filter: brightness(0.25); } to { filter: brightness(0); opacity: 0; } }

/* lobby + permissions */
.ember.small { width: 56px; height: 56px; flex-shrink: 0; }
.ring.sm { width: 34px; height: 34px; }
.perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.perm-list li { display: flex; gap: 10px; align-items: flex-start; }
.perm-list svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* AR helpers */
.ar-enable { position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%); z-index: 5; min-height: 44px; padding: 0 18px; font-size: 15px; background: rgba(14, 16, 26, 0.75); color: var(--gold-l); border: 1px solid rgba(218, 188, 95, 0.7); box-shadow: none; }

/* star celebrations */
.celebrate { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.celebrate.goal { background: radial-gradient(circle at 50% 42%, rgba(251, 243, 220, 0.55), rgba(218, 188, 95, 0.2) 35%, rgba(11, 13, 22, 0.85) 75%); animation: fadeIn 0.6s ease both; }
.cel-star { width: 70vw; max-width: 340px; animation: celStar 1.4s cubic-bezier(.2, .9, .3, 1.2) both; filter: drop-shadow(0 0 30px rgba(251, 243, 220, 0.8)); }
.goal .cel-star { width: 90vw; max-width: 420px; animation: celStarRise 2s cubic-bezier(.2, .9, .3, 1) both; }
.cel-rays { position: absolute; left: 50%; top: 45%; width: 900px; height: 900px; margin: -450px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(251, 243, 220, 0.18) 0deg 4deg, rgba(251, 243, 220, 0) 4deg 14deg); mask-image: radial-gradient(circle, #000 15%, transparent 60%); -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%); animation: spin 18s linear infinite, fadeIn 0.8s ease both; }
.cel-text { position: relative; margin-top: -10px; animation: fadeUp 0.6s ease 0.6s both; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.cel-text .script { color: #fbf3dc; font-size: 58px; }
.spark { position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-radius: 50%; background: #fbf3dc; box-shadow: 0 0 10px 3px rgba(251, 243, 220, 0.8); animation: spark 1.3s ease-out both; }
.celebrate.out { animation: fadeOut 0.8s ease forwards; }
@keyframes celStar { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } }
@keyframes celStarRise { from { transform: translateY(40vh) scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spark { from { transform: translate(0, 0) scale(0.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* reveal sequence: Jay → shrinks → crossed out → The Word → verses */
.reveal-names { position: relative; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin-top: 10px; }
.jay-name { font-family: var(--serif); font-weight: 600; font-size: 104px; line-height: 1; color: var(--cream); animation: jayShrink 1.2s ease-in-out 1.4s both; transform-origin: 50% 0; }
.jay-name span { position: relative; display: inline-block; }
.jay-name span::after { content: ''; position: absolute; left: -6%; top: 54%; height: 6px; width: 0; background: var(--gold); border-radius: 3px; animation: strike 0.7s ease-out 2.7s forwards; }
.the-word { opacity: 0; margin-top: 4px; color: #efdda8 !important; font-size: 84px !important; text-shadow: 0 0 30px rgba(218, 188, 95, 0.55); animation: wordIn 1.2s ease-out 3.5s forwards; }
.reveal .r1 { animation: fadeUp 1s ease 5s both; }
.reveal .r2 { animation: fadeUp 0.8s ease 6.2s both; }
.reveal .r3 { animation: fadeUp 1s ease 7.6s both; }
.reveal .r4 { animation: fadeUp 0.8s ease 8.8s both; }
.reveal .r5 { animation: fadeUp 1s ease 10.4s both; }
@keyframes jayShrink { from { transform: translateY(24vh) scale(1); } to { transform: translateY(0) scale(0.42); color: #8c8a86; } }
@keyframes strike { to { width: 112%; } }
@keyframes wordIn { from { opacity: 0; transform: scale(0.85); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.reveal .jay-struck { display: none; }

/* feedback */
.chip-btn { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(248, 247, 242, 0.25); background: transparent; color: var(--cream); font-size: 14px; }
.chip-btn.on { border: 2px solid var(--gold); background: rgba(218, 188, 95, 0.22); font-weight: 800; color: var(--gold-l); }
.chips { margin-top: 0; }

/* go deeper intro */
.deeper-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* photo frame: rays, twinkles, corners */
.frame-rays { position: absolute; left: 50%; top: -10%; width: 160%; aspect-ratio: 1; margin-left: -80%; background: repeating-conic-gradient(from 160deg at 50% 0%, rgba(251, 243, 220, 0.14) 0deg 3deg, rgba(251, 243, 220, 0) 3deg 11deg); mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 55%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 55%); animation: raysBreathe 6s ease-in-out infinite; }
.land .frame-rays { left: 85%; }
@keyframes raysBreathe { 50% { opacity: 0.55; } }
.twinkle { position: absolute; width: 10px; height: 10px; background: #fbf3dc; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #fbf3dc); animation: twinkle 2.4s ease-in-out infinite; }
.twinkle:nth-of-type(1) { left: 9%; top: 14%; } .twinkle:nth-of-type(2) { left: 84%; top: 22%; animation-delay: .4s; width: 14px; height: 14px; }
.twinkle:nth-of-type(3) { left: 16%; top: 42%; animation-delay: .8s; } .twinkle:nth-of-type(4) { left: 90%; top: 50%; animation-delay: 1.2s; }
.twinkle:nth-of-type(5) { left: 30%; top: 8%; animation-delay: 1.6s; width: 8px; height: 8px; } .twinkle:nth-of-type(6) { left: 70%; top: 9%; animation-delay: .2s; }
.twinkle:nth-of-type(7) { left: 6%; top: 64%; animation-delay: 1s; width: 14px; height: 14px; } .twinkle:nth-of-type(8) { left: 93%; top: 70%; animation-delay: 1.8s; }
.twinkle:nth-of-type(9) { left: 52%; top: 30%; animation-delay: 2s; width: 7px; height: 7px; }
@keyframes twinkle { 50% { transform: scale(0.3) rotate(45deg); opacity: 0.3; } }
.frame-corner { position: absolute; width: 34px; height: 34px; border: 3px solid var(--gold); }
.frame-corner.tl { left: 4%; top: 3%; border-right: 0; border-bottom: 0; } .frame-corner.tr { right: 4%; top: 3%; border-left: 0; border-bottom: 0; }
.frame-corner.bl { left: 4%; bottom: 20%; border-right: 0; border-top: 0; } .frame-corner.br { right: 4%; bottom: 20%; border-left: 0; border-top: 0; }
.frame::after { display: none; }
.flash-shot::after { content: ''; position: absolute; inset: 0; z-index: 5; background: #fff; animation: fadeOut 0.5s ease forwards; }

/* angels: switching from bright to dim happens on the same screen, so don't fade the layer */
.layer.enter-angels.quick { animation: none; }
/* while a star celebration plays, everything else steps back so the words are readable */
.layer.celebrating .ar-top, .layer.celebrating .ar-hint, .layer.celebrating .ar-bottom,
.layer.celebrating .top, .layer.celebrating .ar-enable, .layer.celebrating .ar-tag,
.layer.celebrating .ar-arrow, .layer.celebrating .ar-reticle { opacity: 0 !important; transition: opacity 0.3s; }

/* Herod: the Magi slip away */
.magi-away { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1170 / 606; border: 1px solid var(--line); background: #131828; }
.magi-away img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; animation: walkAway 9s ease-out both; transform-origin: 50% 85%;
  }
@keyframes walkAway { from { transform: scale(1.12); filter: brightness(1.1); } to { transform: scale(1); filter: brightness(0.9); } }
@keyframes hush { 0%, 100% { opacity: 0.55; letter-spacing: 0; } 50% { opacity: 1; letter-spacing: 3px; } }

/* star celebrations, centred on the real AR star */
.celebrate .cel-rays { left: var(--cx); top: var(--cy); }
.celebrate .spark { left: var(--cx); top: var(--cy); }
.cel-glow { position: absolute; left: var(--cx); top: var(--cy); width: 360px; height: 360px; margin: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 243, 220, 0.6), rgba(218, 188, 95, 0.15) 40%, transparent 70%); animation: glowPop 1.4s ease-out both; }
@keyframes glowPop { from { transform: scale(0.2); opacity: 0; } 40% { opacity: 1; } }
.celebrate { justify-content: flex-end; padding-bottom: 22vh; }
.celebrate.goal { background: radial-gradient(circle at var(--cx) var(--cy), rgba(251, 243, 220, 0.35), rgba(218, 188, 95, 0.12) 30%, rgba(11, 13, 22, 0.75) 70%); }
.cel-star { display: none; }
/* keep the one real star above the celebration glow */
.layer.celebrating .ar-obj { z-index: 31; }