/* =========================================================
   ZB Digital · Plastic surgery storyline layer
   Used only by plastic-surgery.html (html[data-story]).
   Adds: the opening title card, the persistent world behind
   the page (dust, light, grid floor) and the chapter rail.
   ps-story.js adds html.story once it is running, so nothing
   here hides content when JavaScript is unavailable.
   ========================================================= */

/* ---------------------------------------------------------
   1. Opening title card
   The inline head script adds html.intro-on before first paint
   (skipped for reduced motion and on repeat visits), and both
   ps-story.js and a 3s safety net remove it again.
   --------------------------------------------------------- */
.intro { display: none; }
html.intro-on .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  will-change: transform;
  /* Decorative only. Scrolling is held by the scroller itself, so the
     card must never swallow a tap on the menu button underneath it. */
  pointer-events: none;
}
html.intro-on body { overflow: hidden; }
.intro-inner { display: grid; justify-items: center; gap: 20px; padding: 24px; text-align: center; }
.intro-mark { width: 54px; height: auto; }
.intro-line { font-size: clamp(16px, 2vw, 21px); letter-spacing: -0.02em; color: var(--text-2); }
.intro-bar { width: min(220px, 56vw); height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.intro-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }

/* ---------------------------------------------------------
   2. The world behind the page
   Fixed layer between the page background and the content, so
   one space runs the whole way down.
   --------------------------------------------------------- */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html.story main,
html.story .footer { position: relative; z-index: 1; }
/* section tints would cover the world, so the world provides the colour */
html.story .section-tint { background: none; }

.world-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-tint {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 38% at 28% 30%, rgba(31,95,240,0.16), transparent 70%),
    radial-gradient(34% 34% at 76% 62%, rgba(31,95,240,0.10), transparent 70%);
  will-change: transform, opacity;
}
.world-floor {
  position: absolute;
  left: -45%; right: -45%;
  bottom: -8%;
  height: 56%;
  perspective: 520px;
  perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 86%);
  mask-image: linear-gradient(to top, #000 8%, transparent 86%);
  opacity: 0.5;
}
.world-floor i { position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotateX(68deg); }
.world-floor b {
  position: absolute;
  inset: -72px 0 0 0;
  background-image:
    linear-gradient(rgba(0,68,206,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,68,206,0.18) 1px, transparent 1px);
  background-size: 72px 72px;
  will-change: transform;
}

/* ---------------------------------------------------------
   3. Hero: the storyline layer owns the entrance and the depth
   --------------------------------------------------------- */
html.story .hero { perspective: 1600px; }
html.story .hero-row { transform-style: preserve-3d; }
html.story .hero-chip,
html.story .hero-title .w,
html.story .hero-sub,
html.story .hero-actions,
html.story .hero-media { animation: none !important; }

/* ---------------------------------------------------------
   4. Chapter rail
   --------------------------------------------------------- */
.rail { display: none; }
@media (min-width: 1200px) {
  html.story .rail {
    display: grid;
    align-content: center;
    gap: 2px;
    position: fixed;
    right: max(18px, calc((100vw - var(--container)) / 2 - 40px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
}
.rail-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--text-3);
  background: none;
  cursor: pointer;
  transition: color 200ms ease;
}
.rail-label {
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.rail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-3);
  transition: transform 260ms var(--ease-out), background-color 260ms ease;
}
.rail-item[aria-current] { color: var(--text); }
.rail-item[aria-current] .rail-dot { background: var(--accent); transform: scale(1.4); }
/* Names show on hover or keyboard focus only: a name pinned to the active
   chapter would sit over the full-bleed sections, like the reviews row. */
.rail:hover .rail-label,
.rail-item:focus-visible .rail-label { opacity: 1; transform: none; }
.rail-item:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .rail-item:hover { color: var(--text); } }

/* ---------------------------------------------------------
   5. Reduced motion: no title card, no moving world
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  html.intro-on body { overflow: visible; }
  .world-floor b { animation: none; }
}