@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('../assets/fonts/sorts-mill-goudy-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal: #356768;
  --grey: #999999;
  --blue: #34689a;
  --ink: #f4efe8;
  --ink-dim: rgba(244, 239, 232, 0.62);
  --ember: #f2c27e;
  --ember-hot: #ffae52;
  --bg: #0a0f15;
  --logo-w: min(86vw, 720px);
  --serif: 'Sorts Mill Goudy', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse 90% 70% at 50% 42%, #18222f 0%, #0c121a 55%, #06080c 100%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

button { font: inherit; color: inherit; }
svg { display: block; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: #0a0f15;
}
.scene-fade #scene { opacity: 0; transition: opacity 1.4s ease; }
.no-intro #scene { display: none; }

/* ---------- stage: logo dead centre ---------- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

.logo-wrap {
  position: relative;
  width: var(--logo-w);
  perspective: 900px;
}

.logo-move {
  transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.logo-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.logo-tilt { aspect-ratio: 5 / 1; }

.logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.55), transparent 55%);
  transition: opacity 0.4s ease;
}

.is-tilting .logo-sheen { opacity: 1; }

.below {
  position: absolute;
  top: calc(100% + clamp(18px, 3.2vh, 34px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 94vw;
  text-align: center;
}

.tagline {
  margin: 0;
  font-size: clamp(14px, 2.1vw, 21px);
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 0.6em;
}
.tagline i { font-style: normal; color: var(--ember); opacity: 0.8; }

.motto {
  margin: 0.5em 0 0;
  font-size: clamp(15px, 2.2vw, 22px);
  font-style: italic;
  color: var(--ember);
  text-shadow: 0 0 18px rgba(255, 180, 90, 0.3);
}
.motto em { font-style: italic; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

.tagline > *,
.motto,
.photos-btn {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
}

.logo-handoff .logo { opacity: 1; }

/* the stone logo photographed from the 3D scene, with transparent padding */
.stone-logo .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * (1 + 2 * var(--pad-x, 0)));
  max-width: none;
  transform: translate(-50%, -50%);
  transition: opacity 0s;
}
.stone-logo .logo-sheen { display: none; }
.logo-centre .logo { filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.45)); transition: opacity 0.6s ease, filter 1.2s ease; }
.is-revealed .tagline > *,
.is-revealed .motto,
.is-revealed .photos-btn { opacity: 1; transform: none; filter: none; }
.is-revealed .tagline > :nth-child(1) { transition-delay: 0.45s; }
.is-revealed .tagline > :nth-child(2) { transition-delay: 0.6s; }
.is-revealed .tagline > :nth-child(3) { transition-delay: 0.7s; }
.is-revealed .tagline > :nth-child(4) { transition-delay: 0.85s; }
.is-revealed .tagline > :nth-child(5) { transition-delay: 0.95s; }
.is-revealed .motto { transition-delay: 1.25s; }
.is-revealed .photos-btn { transition-delay: 1.7s; }

.is-revealed .logo-wrap,
.is-revealed .photos-btn { pointer-events: auto; }

/* ---------- photos button ---------- */
.photos-btn {
  position: relative;
  margin: clamp(22px, 4.5vh, 44px) auto 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: radial-gradient(circle at 50% 35%, rgba(52, 104, 154, 0.55), rgba(10, 12, 18, 0.85) 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 34px rgba(255, 190, 110, 0.2);
}
.photos-btn svg {
  width: 28px; height: 28px;
  fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  position: relative;
  transition: transform 0.35s var(--ease-out);
}
.photos-btn .ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from var(--a, 0deg), var(--ember-hot), #ffd28a, var(--teal), var(--grey), var(--blue), var(--ember-hot));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: spin 3.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 190, 110, 0.7));
}
.photos-btn:hover svg,
.photos-btn:focus-visible svg { transform: scale(1.12) rotate(-6deg); }
.photos-btn:hover .ring { animation-duration: 1.1s; }
.photos-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }

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

/* ---------- corner chips ---------- */
.corner-left {
  right: auto !important;
  left: max(16px, env(safe-area-inset-left));
}
.corner {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  gap: 8px;
}
.chip {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip:hover, .chip:focus-visible { color: var(--ink); border-color: rgba(255, 180, 90, 0.6); background: rgba(40, 20, 8, 0.6); outline: none; }

.intro-ready.intro-running #skip { display: inline-flex; animation: chipIn 0.6s 1.2s both; }
.intro-ready:not(.no-intro) #sound { display: inline-flex; animation: chipIn 0.6s 0.4s both; }
#sound .ico-on, #sound.on .ico-off { display: none; }
#sound.on .ico-on { display: block; }
#sound.on { color: var(--ink); border-color: rgba(242, 194, 126, 0.55); }
#sound.pending { animation: chipIn 0.6s 0.4s both, pulse 2s 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { border-color: rgba(242, 194, 126, 0.8); box-shadow: 0 0 16px rgba(242, 194, 126, 0.35); } }
.is-revealed:not(.no-intro) #replay { display: inline-flex; animation: chipIn 0.6s 2.2s both; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px); } }


/* ---------- gallery ---------- */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 24, 34, 0.55), rgba(3, 4, 6, 0.9) 70%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.5s ease;
  --cw: min(56vw, 300px);
  --ch: calc(var(--cw) * 1.25);
}
.gallery[hidden] { display: none; }
.gallery.is-open { opacity: 1; }

.carousel {
  width: 100%;
  height: calc(var(--ch) * 1.45);
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.carousel.dragging { cursor: grabbing; }

.ring3d {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-box-reflect: below 14px linear-gradient(transparent 62%, rgba(0, 0, 0, 0.22));
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 50px rgba(0, 0, 0, 0.6);
  background: #111;
}
.card.is-front img {
  box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.55), 0 0 40px rgba(255, 122, 26, 0.35), 0 18px 50px rgba(0, 0, 0, 0.6);
}

.gallery-ui {
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 1;
}
.caption {
  min-width: min(58vw, 260px);
  text-align: center;
  font-size: clamp(18px, 2.4vw, 24px);
}
.caption .count {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.nav, .gallery-close {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 14, 20, 0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.nav svg, .gallery-close svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav:hover, .gallery-close:hover, .nav:focus-visible, .gallery-close:focus-visible {
  border-color: rgba(255, 180, 90, 0.7);
  background: rgba(50, 24, 8, 0.65);
  outline: none;
}
.nav:active { transform: scale(0.94); }

.gallery-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
}

.hint {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 3, 5, 0.88);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 60px rgba(255, 122, 26, 0.18);
  transform: scale(0.94);
  transition: transform 0.4s var(--ease-out);
}
.lightbox.is-open img { transform: none; }

@media (max-height: 560px) {
  .gallery { --cw: min(34vw, 200px); }
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; transition-delay: 0s !important; }
}

/* ---------- version switcher (1 · 2 · 3) ---------- */
.versions {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 4;
  display: flex;
  gap: 8px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.versions:hover, .versions:focus-within { opacity: 1; }
.versions a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 12, 16, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(244, 239, 232, 0.92);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.versions a:hover, .versions a:focus-visible { border-color: rgba(242, 194, 126, 0.7); color: #fff; outline: none; }
.versions a[aria-current="page"] { border-color: rgba(242, 194, 126, 0.75); background: rgba(242, 194, 126, 0.18); color: #fff; }
.gallery-open .versions, body:has(.gallery.is-open) .versions { display: none; }