/* ── Stories landing page: a quiet gallery, not a list ──
   For now the gallery holds one creature: the leatherback that stands
   for Axis Mundi. Everything here is built to hold more of these later
   without rework — the stage is the whole viewport, and each creature
   would be its own independently-positioned/wandering link within it.
*/

.ocean-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.stories-title {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
}

/* Only present when the page actually has editor content -- the gallery
   itself carries the page when it doesn't. Lives below the fold, in
   normal flow, so it never fights the stage for space. */
.stories-content {
  max-width: 60ch;
  margin: 0 auto;
  padding: 8vh 1.5rem;
  color: rgba(210, 216, 230, 0.75);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7;
}

/* ── the turtle: position and heading are two separate transforms,
   set every frame by assets/js/stories-turtle.js — #wander only ever
   translates (so the hit target and the label stay upright), while
   #turtle-heading only ever rotates. Combining both on one element
   would make the label spin with the turtle and complicate the
   boundary math for no benefit. ── */
.turtle-wander {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.turtle-heading {
  display: block;
  will-change: transform;
}

.turtle-svg {
  display: block;
  width: min(26vw, 300px);
  height: auto;
  overflow: visible;
}

.turtle-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 14px);
  white-space: nowrap;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.09em;
  color: rgba(210, 216, 230, 0.75);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.turtle-wander:hover .turtle-label,
.turtle-wander:focus-visible .turtle-label {
  opacity: 1;
}

.turtle-wander:focus-visible {
  outline: 1px solid rgba(210, 216, 230, 0.5);
  outline-offset: 12px;
  border-radius: 6px;
}

.turtle-wander:hover #turtle-glow,
.turtle-wander:focus-visible #turtle-glow {
  filter: url(#turtle-soft-glow) brightness(1.35);
}

/* ── glow layer — richer and softer, matching the homepage key rack's
   own soft-glow recipe: a wide halo stacked three times (reads as dense
   and liquid rather than a thin fuzzy outline), plus a tighter mid-blur
   under the crisp core. See the <filter> in template-parts/axis-mundi-turtle.php. ── */
#turtle-glow {
  fill: none;
  stroke: #cfd6e6;
  stroke-linejoin: round;
  stroke-linecap: round;
  mix-blend-mode: screen;
  filter: url(#turtle-soft-glow);
  animation: turtle-glow-breathe 11.5s ease-in-out infinite;
  transition: filter 0.5s ease;
}
#turtle-glow path { stroke-width: 1.7; }
#ridges-glow path { stroke-width: 1.5; }
#ridges-glow { opacity: 0.92; }
@keyframes turtle-glow-breathe {
  0%, 100% { stroke-opacity: 0.32; }
  50%      { stroke-opacity: 0.62; }
}

/* ── crisp line beneath the glow ── */
#turtle-line {
  fill: none;
  stroke: #dfe4ef;
  stroke-opacity: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#turtle-line path { stroke-width: 1.3; }
#ridges-line path { stroke-width: 1.05; stroke-opacity: 0.72; }

#swim-rig, #swim-rig-glow { transform-box: view-box; }

/* ── shoulder: flipper pivot AND a small adjoining sliver of the body
   itself share the same transform-origin, so the body gives slightly as
   the flipper strokes rather than presenting a rigid seam — see
   stories-turtle.js, which rotates the flex slivers by a fraction of
   the flipper's own angle. ── */
#flipper-right-pivot, #flipper-right-pivot-glow,
#shoulder-right-flex, #shoulder-right-flex-glow {
  transform-box: view-box;
  transform-origin: 740px 218.5px;
}
#flipper-left-pivot, #flipper-left-pivot-glow,
#shoulder-left-flex, #shoulder-left-flex-glow {
  transform-box: view-box;
  transform-origin: 318px 214px;
}

@media (prefers-reduced-motion: reduce) {
  #turtle-glow { animation: none; stroke-opacity: 0.45; }
}