/* ============================================================
   HUB AUGMENTS — shared across all 4 series hubs
   Enabled by body[data-hub-augments="on"][data-series="..."]
   Series accents inherited from hub's own :root (--accent, --accent-glow).
   ============================================================ */

/* --- 1. Hero field canvas (behind everything, above bg) ---------- */
body[data-hub-augments="on"] .hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-hub-augments="on"] .hero-field.is-live {
  opacity: 0.9;
  animation: hubAugFieldIgnite 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hubAugFieldIgnite {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  60% {
    opacity: 0.55;
    filter: blur(2px);
  }
  100% {
    opacity: 0.9;
    filter: blur(0);
  }
}
body[data-hub-augments="on"] .hero {
  overflow: hidden;
}
body[data-hub-augments="on"] .hero .ornament {
  z-index: 2;
}

/* Poster fallback (reduced motion / low power / no-webgl) */
body[data-hub-augments="on"] .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 800ms ease;
  background:
    radial-gradient(ellipse 60% 40% at 70% 30%, var(--accent-soft), transparent 60%),
    radial-gradient(ellipse 40% 30% at 30% 70%, rgba(255, 255, 255, 0.02), transparent 70%);
}
body[data-hub-augments="on"] .hero-poster.is-live {
  opacity: 1;
}

/* Kill on mobile */
@media (max-width: 900px) {
  body[data-hub-augments="on"] .hero-field,
  body[data-hub-augments="on"] .hero-poster {
    display: none !important;
  }
}

/* --- 2. Kill the infinite pulse; single strike only -------------- */
body[data-hub-augments="on"] .hero-title .accent::after {
  animation: hubAugPulseOnce 1400ms cubic-bezier(0.16, 1, 0.3, 1) 1500ms 1 both !important;
}
body[data-hub-augments="on"] .hero-title:hover .accent::after {
  animation: hubAugPulseOnce 1400ms cubic-bezier(0.16, 1, 0.3, 1) 0ms 1 both !important;
}
@keyframes hubAugPulseOnce {
  0% {
    opacity: 0;
    filter: blur(2px);
  }
  40% {
    opacity: 0.85;
    filter: blur(8px);
  }
  100% {
    opacity: 0.25;
    filter: blur(3px);
  }
}

/* Hairline under accent word — draws in on load */
body[data-hub-augments="on"] .hero-title .accent {
  position: relative;
}
body[data-hub-augments="on"] .hero-title .accent::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.08em;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: hubAugDrawLine 1200ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards;
  pointer-events: none;
}
@keyframes hubAugDrawLine {
  to {
    transform: scaleX(1);
  }
}

/* Return-ritual sweep (top of hero, once, on back-nav) */
body[data-hub-augments="on"] .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
body[data-hub-augments="on"][data-return-ritual="1"] .hero::before {
  animation: hubAugSweep 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms 1;
}
@keyframes hubAugSweep {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* --- 3. Receipts polish: tabular nums + hover hairline ---------- */
body[data-hub-augments="on"] .receipt,
body[data-hub-augments="on"] .receipt * {
  font-variant-numeric: tabular-nums;
}
body[data-hub-augments="on"] .receipt {
  transition:
    border-color 0.3s ease,
    background 0.3s ease !important;
  position: relative;
}
body[data-hub-augments="on"] .receipt:hover {
  transform: none !important;
}
body[data-hub-augments="on"] .receipt::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
body[data-hub-augments="on"] .receipt:hover::after {
  transform: scaleX(1);
}

/* --- 4. Section hairlines --------------------------------------- */
body[data-hub-augments="on"] section + section {
  position: relative;
}
body[data-hub-augments="on"] section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--px);
  right: var(--px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(255, 255, 255, 0.06) 80%,
    transparent
  );
  pointer-events: none;
}

/* --- 5. Cross-series rail: destination-accent peek strip -------- */
body[data-hub-augments="on"] .cross-card {
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body[data-hub-augments="on"] .cross-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: var(--peek, var(--accent));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-hub-augments="on"] .cross-card:hover::after {
  transform: scaleY(1);
}

/* --- 6. Ornament draw-on (draw once, then hold) ----------------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-hub-augments="on"] .ornament .orn-curve,
  body[data-hub-augments="on"] .ornament .orn-arrow,
  body[data-hub-augments="on"] .ornament .orn-axis {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: hubAugDrawStroke 2200ms cubic-bezier(0.22, 1, 0.36, 1) 1600ms forwards;
  }
  body[data-hub-augments="on"] .ornament .orn-box {
    stroke-dasharray: 1040;
    stroke-dashoffset: 1040;
    animation: hubAugDrawStroke 2000ms cubic-bezier(0.22, 1, 0.36, 1)
      calc(1600ms + var(--orn-delay, 0ms)) forwards;
  }
  body[data-hub-augments="on"] .ornament .orn-box:nth-of-type(1) {
    --orn-delay: 0ms;
  }
  body[data-hub-augments="on"] .ornament .orn-box:nth-of-type(2) {
    --orn-delay: 120ms;
  }
  body[data-hub-augments="on"] .ornament .orn-box:nth-of-type(3) {
    --orn-delay: 240ms;
  }
  body[data-hub-augments="on"] .ornament .orn-box:nth-of-type(4) {
    --orn-delay: 360ms;
  }
  body[data-hub-augments="on"] .ornament .orn-box:nth-of-type(5) {
    --orn-delay: 480ms;
  }
}
@keyframes hubAugDrawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

/* --- 7. Cursor focal glow (desktop only) ------------------------ */
body[data-hub-augments="on"] .focal-glow {
  position: fixed;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
body[data-hub-augments="on"] .focal-glow.is-live {
  opacity: 0.7;
}
@media (max-width: 900px) {
  body[data-hub-augments="on"] .focal-glow {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-hub-augments="on"] .focal-glow {
    display: none !important;
  }
}

/* --- 8. Reduced motion — hard stops ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-hub-augments="on"] .hero-field {
    display: none !important;
  }
  body[data-hub-augments="on"] .hero-title .accent::before,
  body[data-hub-augments="on"] .hero-title .accent::after,
  body[data-hub-augments="on"] .receipt::after,
  body[data-hub-augments="on"] .cross-card::after,
  body[data-hub-augments="on"] .hero::before {
    animation: none !important;
    transition: none !important;
  }
}