/* ─── Station-specific styles ─── */

/* Hero ────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  padding: var(--s-9) var(--gutter) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(0.3) contrast(1.05);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 70%, var(--c-bg) 100%),
    linear-gradient(to bottom, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.1) 30%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw-wide);
  margin: 0 auto;
  width: 100%;
}

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--c-accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.hero__title {
  font-size: clamp(var(--t-3xl), 8vw, var(--t-5xl));
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  margin-bottom: var(--s-3);
  color: var(--c-fg);
}
.hero__title .he {
  display: block;
  font-family: var(--f-serif-he);
  font-size: 0.7em;
  color: var(--c-stone);
  direction: rtl;
  margin-top: var(--s-2);
  font-weight: 400;
}

.hero__sub {
  font-size: var(--t-md);
  max-width: 50ch;
  color: var(--c-fg-dim);
  line-height: var(--lh-snug);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-fg-mute);
}
.hero__scroll-hint .line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--c-fg-mute), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; }
  50%      { transform: scaleY(1);   transform-origin: top; }
}

/* Station layout: two-column on wide, stacked on narrow */
.station__grid {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .station__grid--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: start;
  }
}

/* Media frame — looks like a forensic specimen mount */
.media-frame {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.media-frame--tall { aspect-ratio: 3/4; }
.media-frame--video { aspect-ratio: 16/9; }
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame__caption {
  position: absolute;
  bottom: 0; left: 0;
  padding: var(--s-1) var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-dim);
  background: rgba(10,10,10,0.7);
}

/* Stack of media elements within a station's right column */
.media-column {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Small inline note (e.g. "3D gallery coming soon") */
.muted-note {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-mute);
  text-align: center;
  padding: var(--s-2);
  border: 1px dashed var(--c-line);
}

/* Station 4 — 3D gallery placeholder canvas styles will live here later */

/* Station 5 — photo grid placeholder */
.photo-grid {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: var(--maxw-wide);
  margin: 0 auto;
}
.photo-grid figure {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  aspect-ratio: 4/3;
  cursor: zoom-in;
  outline: none;
}
.photo-grid figure:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.photo-grid figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease-out), filter var(--d-base) var(--ease-out);
  filter: grayscale(0.15);
}
.photo-grid figure:hover img {
  transform: scale(1.04);
  filter: grayscale(0);
}
.photo-grid figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--s-1) var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-fg-dim);
  background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.photo-grid figure:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Station 4 — Possible Stones inline 3D viewer ─────── */
.ps-viewer {
  position: relative;
  background: #050505;
  border: 1px solid var(--c-line);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 70vh;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
.ps-viewer:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.ps-viewer__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 50vh;
}
.ps-viewer__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.ps-viewer__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: center;
  justify-content: center;
  background: rgba(5,5,5,0.92);
  color: var(--c-fg-mute);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  z-index: 5;
  transition: opacity var(--d-base) var(--ease-out);
}
.ps-viewer__loading.is-hidden { opacity: 0; pointer-events: none; }
.ps-progress {
  width: 180px;
  height: 1px;
  background: var(--c-line);
  overflow: hidden;
}
.ps-progress > div {
  height: 100%;
  width: 0;
  background: var(--c-accent);
  transition: width var(--d-fast) var(--ease-out);
}
.ps-viewer__info {
  position: absolute;
  top: var(--s-3);
  inset-inline-start: var(--s-3);
  max-width: 320px;
  z-index: 4;
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  padding: var(--s-2) var(--s-3);
  color: var(--c-fg);
  pointer-events: none;
}
.ps-viewer__info h3 {
  font-size: var(--t-md);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--s-1);
}
.ps-viewer__info .ps-id {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-accent);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--s-2);
}
.ps-viewer__info .ps-desc {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-fg-dim);
  margin-bottom: var(--s-2);
}
.ps-viewer__info .ps-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
}
.ps-viewer__info .ps-meta dt {
  color: var(--c-fg-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.ps-viewer__info .ps-meta dd { color: var(--c-fg); }
.ps-viewer__info .ps-error { color: var(--c-warn); font-size: var(--t-xs); margin-top: var(--s-1); }

.ps-viewer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: var(--s-2);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  min-width: 0;
  overflow: hidden;
}
.ps-viewer__nav button {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-fg-mute);
  background: transparent;
  border: 1px solid var(--c-line);
  padding: 6px 10px;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.ps-viewer__nav button:hover {
  color: var(--c-fg);
  border-color: var(--c-fg-mute);
}
.ps-viewer__nav button.is-active {
  color: var(--c-bg);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* ─── Reveal-on-scroll ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}