/* ==========================================================================
   Atelier — Aarav & Sama
   A luxury-stationery still life. The 3D object is the hero; the DOM carries
   only a quiet caption and the controls. Emerald dominates, gold is the only
   accent, ivory is the neutral, oxblood lives in the wax seal alone.
   ========================================================================== */

:root {
  --emerald-950: #06100D;
  --emerald-900: #0B1814;
  --emerald-800: #13261F;

  --gold:     #CDAE6A;
  --gold-hi:  #EAD49C;
  --gold-40:  rgba(205, 174, 106, .40);
  --gold-20:  rgba(205, 174, 106, .20);

  --ivory:    #F3ECDF;
  --ivory-70: rgba(243, 236, 223, .70);
  --ivory-50: rgba(243, 236, 223, .50);
  --ivory-14: rgba(243, 236, 223, .14);

  --ink:      #10231B;
  --ink-gold: #8A6A30;

  --serif:  "EB Garamond", Georgia, "Times New Roman", serif;
  --caps:   "Cinzel", "Trajan Pro", Georgia, serif;
  --script: "Pinyon Script", "EB Garamond", cursive;
  --ui:     "Jost", "Futura", "Avenir Next", sans-serif;
  --arabic: "Amiri", "Noto Naskh Arabic", serif;

  --ease:   cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --header: 76px;                         /* mirrors HEADER_PX in scene.js */
  --safe-b: max(1.1rem, env(safe-area-inset-bottom));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* A stage, not a page: every gesture belongs to the canvas, including
   paging through the open card on a phone. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--emerald-950);
  color: var(--ivory);
  font-family: var(--ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Stage layers ──────────────────────────────────────────────────────── */

/* Lit like seamless studio paper: brightest behind the object, falling off
   to near-black at the edges. */
.backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 48% at 50% 42%, rgba(58, 96, 80, .5) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 44%, var(--emerald-800) 0%, var(--emerald-900) 45%, var(--emerald-950) 100%);
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;             /* the canvas owns every gesture */
  opacity: 0;
  transition: opacity .6s var(--ease);
}
body:not([data-state="loading"]) #stage { opacity: 1; }

/* Dark veil for the move from the card into the courtyard: quick to fall,
   slow to lift, so the courtyard fades up out of the night. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--emerald-950);
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
body[data-state="entering"] .veil { opacity: 1; transition-duration: .5s; }

.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

/* Its own band with a fade beneath, so the card can pass under it while the
   guest scrolls without the two ever colliding. */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5;
  height: calc(var(--header) + env(safe-area-inset-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: env(safe-area-inset-top) var(--gutter) 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 16, 13, .96) 0%, rgba(6, 16, 13, .82) 55%, rgba(6, 16, 13, 0) 100%);
}

.masthead__mark {
  font-family: var(--script);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--gold-hi);
}
.masthead__mark i { font-family: var(--serif); font-style: italic; font-size: .5em; margin: 0 .3em; color: var(--gold); }

.masthead__title {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory-50);
}

/* ── Loader ────────────────────────────────────────────────────────────── */

.loader {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  transition: opacity .5s var(--ease), visibility .5s;
}
body:not([data-state="loading"]) .loader { opacity: 0; visibility: hidden; }

.loader__star { width: 44px; height: 44px; animation: turn 6s linear infinite; }
.loader__star rect { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.loader__text {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory-50);
}

@keyframes turn { to { transform: rotate(360deg); } }

/* ── Captions ──────────────────────────────────────────────────────────── */

.copy {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: var(--safe-b);
  padding: 0 var(--gutter);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}

/* Wide screens: a compact caption centred directly beneath the object
   (the 3D framing reserves WIDE_CAPTION_PX for it), in one quiet line of
   hint and action under a small title. */
@media (min-aspect-ratio: 9/10) {
  .copy { bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
  .copy .eyebrow { margin-bottom: .45rem; font-size: .6rem; }
  .copy .copy__title { font-size: 1.35rem; }
  .copy__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: .7rem;
  }
  .copy__row .copy__hint { margin: 0; font-size: .74rem; }
  .copy__row .btn { min-height: 36px; padding: 0 1.2rem; font-size: .6rem; }
}

body[data-state="envelope"] .copy--envelope,
body[data-state="card-open"][data-layout="book"] .copy--open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .1s;
}

.eyebrow {
  margin: 0 0 .7rem;
  font-size: .64rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}

.copy__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.1;
}

.copy__hint {
  margin: .55rem 0 1.1rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ivory-50);
}

.btn {
  min-height: 44px;
  padding: 0 1.6rem;
  border: 1px solid var(--gold-40);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-hi);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover { border-color: var(--gold-hi); }
.btn:active { transform: scale(.97); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--emerald-950); }
.btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }

/* "Step inside" only exists once the courtyard has finished building. */
.btn--enter { display: none; }
body[data-court="ready"] .btn--enter { display: inline-flex; align-items: center; justify-content: center; }

/* ── Seal marker ───────────────────────────────────────────────────────── */

/* Positioned by scene.js at the seal's projected centre; --r is the seal's
   on-screen radius, so the rings hug it at any size. Two staggered rings
   pulse outward, and the label sits just beneath. */
.seal-hint {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
  --r: 40px;
}

body[data-state="envelope"] .seal-hint {
  opacity: 1;
  visibility: visible;
  transition-delay: .15s;
}

.seal-hint__ring {
  position: absolute;
  left: calc(var(--r) * -1);
  top: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 1.5px solid var(--gold-hi);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 2.6s var(--ease) infinite;
}
.seal-hint__ring--late { animation-delay: 1.3s; }

@keyframes ripple {
  0%   { transform: scale(.85); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: scale(1.65); opacity: 0; }
}

.seal-hint__label {
  position: absolute;
  left: 0;
  top: calc(var(--r) * 1.75);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .45rem .95rem;
  border: 1px solid var(--gold-40);
  border-radius: 999px;
  background: rgba(6, 16, 13, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gold-hi);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  animation: nudge 2.6s var(--ease) infinite;
}

@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -3px); }
}

/* ── Reading UI (phones, card open) ────────────────────────────────────── */

.reading-ui {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(96px + env(safe-area-inset-bottom));   /* mirrors READING_FOOTER_PX */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter) var(--safe-b);
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 16, 13, .94) 0%, rgba(6, 16, 13, .7) 50%, rgba(6, 16, 13, 0) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}

body[data-state="card-open"][data-layout="vertical"] .reading-ui {
  opacity: 1;
  visibility: visible;
  transition-delay: .2s;
}

/* Page cue: two dots (which page) and where the other page is. Also a
   button, for anyone who would rather tap than swipe. */
.page-cue {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory-70);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.page-cue__dots { display: grid; gap: 5px; }
.page-cue__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ivory-14);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.page-cue[data-page="0"] .page-cue__dots i:first-child,
.page-cue[data-page="1"] .page-cue__dots i:last-child {
  background: var(--gold-hi);
  transform: scale(1.25);
}

.pill {
  pointer-events: auto;
  min-height: 40px;
  padding: 0 1.1rem;
  border: 1px solid var(--ivory-14);
  border-radius: 999px;
  background: rgba(11, 24, 20, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--ivory-70);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--ease), color .25s var(--ease);
}
.pill:active { transform: scale(.97); }

.pill--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--emerald-950);
  box-shadow: none;
}

/* Phones: on the verse page, once the courtyard is ready, Step inside takes
   the cue's place; on the details page the cue stays. */
body[data-court="ready"][data-page="1"] .page-cue { display: none; }
body:not([data-page="1"]) .reading-ui .btn--enter { display: none; }

/* ── Text version ──────────────────────────────────────────────────────── */

.text-version {
  width: min(92vw, 34rem);
  max-height: 86dvh;
  padding: 3rem clamp(1.4rem, 5vw, 2.8rem) 2.4rem;
  border: 1px solid var(--gold-20);
  border-radius: 4px;
  background: #F4EDE0;
  color: var(--ink);
  text-align: center;
  font-family: var(--serif);
}
.text-version::backdrop { background: rgba(6, 16, 13, .78); backdrop-filter: blur(6px); }

.text-version__close { position: absolute; top: .9rem; right: .9rem; }
.btn--ink { color: var(--ink); border-color: rgba(16, 35, 27, .22); min-height: 38px; padding: 0 1rem; }
.btn--ink:hover { border-color: var(--ink); }

.tv-arabic { font-family: var(--arabic); font-size: 1.6rem; line-height: 2; color: var(--ink); margin: 0; }
.tv-arabic:first-of-type { color: var(--ink-gold); }
.tv-eyebrow {
  margin: 1rem 0 0;
  font-family: var(--caps);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.tv-names { font-family: var(--script); font-weight: 400; font-size: 3.4rem; line-height: 1.15; margin: .2rem 0; color: var(--ink-gold); }
.tv-names i { font-family: var(--serif); font-size: .45em; }
.tv-small { font-style: italic; font-size: 1.05rem; line-height: 1.5; color: #34473F; margin: .4rem 0 0; }

.tv-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin: 1.8rem 0;
  padding: 1.6rem 0;
  border-block: 1px solid rgba(138, 106, 48, .28);
}
.tv-events h3 {
  margin: 0 0 .6rem;
  font-family: var(--caps);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-gold);
}
.tv-events p { margin: 0 0 .7rem; font-size: 1.08rem; line-height: 1.45; }
.tv-events span { font-style: italic; font-size: .98rem; color: #34473F; }

.tv-verse { margin: 0 0 1.4rem; }
.tv-verse p:not(.tv-arabic) { font-style: italic; font-size: 1.08rem; line-height: 1.6; color: #22352D; }
.tv-verse cite {
  font-family: var(--caps);
  font-style: normal;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-gold);
}

/* ── No WebGL: the text version becomes the page ───────────────────────── */

body[data-state="fallback"] { overflow: auto; }
html:has(body[data-state="fallback"]) { overflow: auto; }
body[data-state="fallback"] .text-version {
  position: static;
  display: block;
  margin: calc(var(--header) + 1.5rem) auto 3rem;
  max-height: none;
}
body[data-state="fallback"] .text-version__close { display: none; }

/* ── Courtyard ─────────────────────────────────────────────────────────── */

.court-ui {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.5rem var(--gutter) var(--safe-b);
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 16, 13, .9) 0%, rgba(6, 16, 13, .6) 55%, rgba(6, 16, 13, 0) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}
body[data-state="courtyard"] .court-ui {
  opacity: 1;
  visibility: visible;
  transition-delay: .9s;       /* after the veil has begun to lift */
}

/* Passages stack in one grid cell and cross-fade. */
.court-ui { display: grid; justify-items: center; }
.court-stop {
  grid-area: 1 / 1;
  max-width: 30rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
body[data-stop="0"] .court-stop[data-court-stop="0"],
body[data-stop="1"] .court-stop[data-court-stop="1"],
body[data-stop="2"] .court-stop[data-court-stop="2"] {
  opacity: 1;
  transform: none;
  transition-delay: .35s;
}

.court-arabic {
  margin: 0;
  font-family: var(--arabic);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.8;
  color: var(--gold-hi);
}
.court-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  line-height: 1.15;
}
.court-line {
  margin: .5rem auto 0;
  max-width: 26rem;
  font-family: var(--serif);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.45;
  color: var(--ivory-70);
}
.court-cite {
  margin: .6rem 0 0;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}

.court-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.4rem;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory-50);
  white-space: nowrap;
}
.court-dots { display: flex; gap: 6px; }
.court-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ivory-14);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
body[data-stop="0"] .court-dots i:nth-child(1),
body[data-stop="1"] .court-dots i:nth-child(2),
body[data-stop="2"] .court-dots i:nth-child(3) {
  background: var(--gold-hi);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .loader__star, .seal-hint__ring, .seal-hint__label { animation: none; }
  .seal-hint__ring { opacity: .6; }
  .copy, #stage, .loader, .reading-ui { transition-duration: .01ms; }
}