/* PREMIUM REFERENCE INTEGRATION / v1.0.13 / 2026-09-06 */

:root {
  --echoes-river-blue: #7fb4bd;
  --echoes-river-deep: #163b45;
  --echoes-beam-gold: #e2b568;
  --echoes-beam-jade: #79b5a5;
  --echoes-reveal-duration: 1.18s;
  --echoes-focus-glow: rgba(121,181,165,.18);
}

/* 00 / the opening becomes a layered scene, not a flat background. */
.premium-v1013-ready .opening-chapter > .premium-opening-reveal {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  overflow: hidden;
  width: auto;
  height: auto;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(0% at 50% 52%);
  background:
    radial-gradient(circle at 50% 56%, rgba(202,235,228,.38) 0 1px, transparent 2px 18px),
    radial-gradient(ellipse at 50% 57%, rgba(37,102,112,.42), rgba(9,28,34,.06) 42%, transparent 70%);
  mix-blend-mode: screen;
  will-change: clip-path, opacity;
}

.premium-v1013-ready .premium-opening-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 50% 57%, transparent 0 16px, rgba(179,225,218,.16) 17px 18px, transparent 19px 34px);
  opacity: .56;
  transform: scaleY(.48);
  transform-origin: 50% 57%;
}

.premium-v1013-ready .opening-copy h1,
.premium-v1013-ready .opening-copy .opening-line,
.premium-v1013-ready .opening-copy .opening-en {
  will-change: filter, letter-spacing, clip-path, transform;
}

.premium-v1013-ready .opening-copy .opening-line { clip-path: inset(0 0 0 0); }

.premium-v1013-ready .opening-chapter .opening-image img,
.premium-v1013-ready .opening-chapter .opening-mark-wrap,
.premium-v1013-ready .opening-chapter .opening-surface-canvas {
  will-change: transform;
}

/* 01 / a second river line carries scroll progress and audio energy. */
.premium-v1013-ready .river-stage { isolation: isolate; }
.premium-v1013-ready .river-stage::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11,44,53,.28), transparent 28% 72%, rgba(11,44,53,.18));
  box-shadow: inset 0 20px 35px rgba(127,180,189,.06), inset 0 -18px 35px rgba(4,22,28,.18);
}
.premium-v1013-ready .premium-river-beam {
  fill: none;
  stroke: url(#premiumRiverGradient);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(121,181,165,.2));
}
.premium-v1013-ready .river-data-anchor,
.premium-v1013-ready .river-data-line,
.premium-v1013-ready .river-data-number strong,
.premium-v1013-ready .river-data-basin strong { font-variant-numeric: tabular-nums; }

/* 02 / museum map module: topography is texture, not a dashboard wallpaper. */
.premium-v1013-ready .human-chapter .field-map { isolation: isolate; overflow: hidden; }
.premium-v1013-ready .field-map > .premium-topography {
  position: absolute;
  z-index: 1;
  inset: 5%;
  pointer-events: none;
  opacity: .3;
  background:
    repeating-radial-gradient(ellipse at 46% 48%, transparent 0 20px, rgba(17,22,25,.14) 21px 22px, transparent 23px 38px),
    repeating-linear-gradient(162deg, transparent 0 24px, rgba(17,22,25,.055) 25px 26px, transparent 27px 54px);
  mix-blend-mode: multiply;
}
.premium-v1013-ready .human-chapter .skill-map-spotlight {
  z-index: 4;
  opacity: .42;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(226,181,104,.18), transparent 16%, transparent 29%);
  mix-blend-mode: multiply;
}
.premium-v1013-ready .human-chapter .field-map svg { z-index: 2; }
.premium-v1013-ready .human-chapter .field-node { z-index: 5; }
.premium-v1013-ready .human-chapter .sonic-data-panel {
  border-top-color: rgba(17,22,25,.5);
  border-bottom-color: rgba(17,22,25,.26);
  background: transparent;
}

/* 03 / carved beam, with no neon-tech treatment. */
.premium-v1013-ready .civilization-timeline { position: relative; overflow: hidden; }
.premium-v1013-ready .premium-civilization-beam {
  position: absolute;
  z-index: 0;
  top: 47px;
  left: 0;
  width: var(--premium-timeline-progress, 0%);
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(226,181,104,.75), rgba(237,101,79,.62));
  box-shadow: 0 0 9px rgba(226,181,104,.13);
  transform-origin: left;
}
.premium-v1013-ready .civilization-node { position: relative; z-index: 1; }
.premium-v1013-ready .civilization-node.is-active { box-shadow: inset 0 -2px 0 rgba(237,101,79,.72); }

/* 04 / signal map: existing audio-driven Threads stay, but their glow is quiet. */
.premium-v1013-ready .new-signal-map {
  box-shadow: inset 0 0 90px rgba(0,0,0,.18), 0 18px 45px rgba(0,0,0,.12);
}
.premium-v1013-ready .new-signal-map .skill-threads-canvas { opacity: .62; }
.premium-v1013-ready .new-signal-map .signal-node {
  box-shadow: inset 2px 0 rgba(121,181,165,.35);
  transition: border-color .36s ease, background-color .36s ease, box-shadow .36s ease, transform .36s ease;
}
.premium-v1013-ready .new-signal-map .signal-node:hover,
.premium-v1013-ready .new-signal-map .signal-node:focus-visible,
.premium-v1013-ready .new-signal-map .signal-node.is-active {
  box-shadow: inset 2px 0 var(--echoes-beam-gold), 0 12px 30px rgba(0,0,0,.2), 0 0 20px var(--echoes-focus-glow);
}

/* 05 / archive focus is a reading state, never a product card zoom. */
.premium-v1013-ready .archive-chapter-row { transform: translate3d(0,0,0); }
.premium-v1013-ready .archive-chapter-row:hover,
.premium-v1013-ready .archive-chapter-row:focus-visible { padding-left: 8px; transform: translate3d(1px,0,0); }
.premium-v1013-ready .voice-wall { box-shadow: inset 0 0 50px rgba(121,181,165,.08); }

/* 06 / unified audio visual language. */
.premium-v1013-ready .microscope-lab,
.premium-v1013-ready .final-echo-area,
.premium-v1013-ready .resonance-mixer { border-color: rgba(121,181,165,.22); }
.premium-v1013-ready .poster-frame { box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 0 0 1px rgba(226,181,104,.16); }

@media (max-width: 760px) {
  .premium-v1013-ready .premium-opening-reveal::after { transform: scaleY(.72); }
  .premium-v1013-ready .premium-river-beam { stroke-width: 2.1; }
  .premium-v1013-ready .field-map > .premium-topography { opacity: .22; }
  .premium-v1013-ready .new-signal-map .skill-threads-canvas { opacity: .46; }
  .premium-v1013-ready .premium-civilization-beam { top: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-v1013-ready .premium-opening-reveal,
  .premium-v1013-ready .premium-river-beam,
  .premium-v1013-ready .opening-copy h1,
  .premium-v1013-ready .opening-copy .opening-line { will-change: auto; transition: none !important; }
  .premium-v1013-ready .skill-threads-canvas { display: none; }
}