/*
 * site.css — layout + chrome for azareth.
 *
 * TUNABLES:
 *   .hl-circle width/height          — highlight circle size (74px desktop, 66px mobile)
 *   #highlights gap                  — spacing between highlight circles
 *   .hl-label color/letter-spacing   — caption look under each circle
 *   .hl-glyph box-shadow             — glow strength of the fallback glyph dot
 *   .sp-fill background              — story progress bar color
 *
 * z-index layers (shared contract):
 *   10  #content   — page content (the emblem)
 *   20  #ambient   — the sacred mist, ABOVE the content: it engulfs the
 *                    emblem's edges; the shader itself keeps a clear
 *                    window over the emblem's body (see js/main.js hole)
 *   100 .story-player — fullscreen story overlay
 *   200 .az-veil   — passage transition canvas (created by JS with inline styles)
 */

/* ---------- reset-ish ---------- */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  /* nothing may extend or scroll past the visible frame */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  /* no text/image selection anywhere on the page; user-select inherits
     down to everything, so this one declaration covers the whole site */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ---------- ambient mist canvas (z:20 — OVER the content) ----------
   The mist renders above the emblem so its wisps bleed across the
   emblem's edges; the shader masks a clear window over the emblem's
   body (fed its rect by js/main.js) so the artwork itself stays
   untouched. pointer-events:none keeps everything beneath clickable. */

#ambient {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 20;
  pointer-events: none;
  display: block;
}

/* ---------- page content (z:10) ---------- */

#content {
  position: relative;
  z-index: 10;
  /* exactly the visible frame, never taller — a min-height of 100vh
     could exceed the real visible height on mobile (URL bar showing)
     and make the page scrollable past the frame */
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
}

/* Every direct child shares the same centered cell — the logo stays
   dead-center regardless of #highlights' own (currently empty) box. */
#content > * {
  grid-area: 1 / 1;
}

/* Sized well under the viewport so the mist has clear room to drift
   around it. Rendered at full fidelity — no blend mode: the PNG's own
   black canvas is pure #000, identical to the page's, so its square
   edge is invisible, and the mist layer above bleeds across the edges.
   A background-image div, not an <img> — mobile browsers give real <img>
   elements a native long-press "save/copy image" menu that CSS alone
   (pointer-events, touch-callout, user-select) doesn't reliably suppress;
   a div has no "image" for the OS to recognize as save-able at all. */
#logo {
  width: min(62vmin, 600px);
  aspect-ratio: 1 / 1;
  background-image: url(../azareth.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14%; /* curved edges — clips the background-image too */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateY(-50%); /* shifted up from dead-center */
}

/* Short viewports — phone in landscape, and any desktop window that is not
   fullscreen. The -63% above is measured against the LOGO's own height, so
   in a tall portrait frame there is ample room above centre to absorb it,
   but in a short frame there is not and the emblem was being clipped off
   the top: ~85px on a landscape phone, 156px in a laptop-sized window.

   Here the lift is measured against the VIEWPORT instead (vh), so it always
   scales with the room actually available, and the emblem is a little
   smaller so it breathes in the reduced height. Portrait is untouched. */
@media (orientation: landscape) {
  #logo {
    width: min(52vmin, 600px);
    transform: translateY(-16vh);
  }
}

/* A PHONE in landscape, specifically — a desktop window is also
   "landscape" but has several times the height and keeps the rule above.
   560px catches phones (viewport height ~375-430 on their side) while
   leaving tablets, which have room to spare, alone.

   The emblem is a third larger here. Because it is taller it also needs
   more of the frame's height, so the lift is eased from 16vh to 11vh —
   otherwise the extra size pushes it back off the top, which is the very
   thing the landscape rule exists to prevent. The mist needs no
   counterpart change: its clear window is measured from this element's
   real rect, so it follows the new size and position by itself. */
@media (orientation: landscape) and (max-height: 560px) {
  #logo {
    width: min(69vmin, 600px);    /* 52 x 1.33 */
    transform: translateY(-11vh);
  }
}

/* Highlight row: scrolls horizontally if it overflows, centered when it fits.
   Vertical padding must clear the aura's halo (size * spread, centered on
   the circle) or it gets clipped: setting overflow-x without an explicit
   overflow-y still computes overflow-y as auto per spec, so anything a
   child paints past this box's own padding edge is cut off top/bottom. */
#highlights {
  display: flex;
  gap: 1.6rem;
  padding: 2.75rem 1.5rem;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
}

#highlights::-webkit-scrollbar {
  display: none; /* WebKit */
}

/* ---------- highlight items ---------- */

.hl-item {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  font: inherit;
}

/* position:relative is REQUIRED — the aura canvas centers itself inside. */
.hl-circle {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); /* subtle ring */
  overflow: visible; /* aura extends beyond the circle */
}

.hl-cover {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Fallback dot when a highlight has no cover image (stories.js sets color inline). */
.hl-glyph {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  background: currentColor;
  box-shadow: 0 0 10px currentColor, 0 0 24px currentColor;
}

.hl-label {
  font: 500 12px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #b9b9c4;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

/* ---------- story player overlay (z:100) ---------- */

.story-player {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: hold-to-pause must not open the image/video callout */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.sp-progress {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 5;
}

.sp-bar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.sp-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #f2f2f5;
}

.sp-close,
.sp-sound {
  position: absolute;
  z-index: 6;
  top: calc(24px + env(safe-area-inset-top));
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.sp-close {
  right: 10px;
  font-size: 26px;
}

.sp-sound {
  right: 54px;
  font-size: 18px;
}

/* the display:grid above would defeat the hidden attribute's UA rule */
.sp-sound[hidden] {
  display: none;
}

.sp-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.sp-media img,
.sp-media video {
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Tap zones for prev/next navigation. */
.sp-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  z-index: 4;
}

.sp-zone-left {
  left: 0;
}

.sp-zone-right {
  right: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 480px) {
  #highlights {
    gap: 1.1rem;
  }

  .hl-circle {
    width: 66px;
    height: 66px;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* The shaders are JS-driven, so CSS alone can't pause them.
     Wire this up later by checking matchMedia('(prefers-reduced-motion: reduce)')
     in js/main.js and lowering CONFIG.ambient.speed / skipping mounts. */
}