/* The Fulcrum — scene-like transitions
   Quiet rooms / weather / scale. Soft, inevitable. Not SaaS flash. */

:root {
  --scene-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --scene-enter-ms: 720ms;
  --scene-exit-ms: 280ms;
  --scene-stagger: 42ms;
  --scene-rise: 8px;
  --scene-bg-flood: color-mix(in srgb, #c8d4dc 14%, var(--bg));
  --scene-bg-needle: color-mix(in srgb, #d8d0c4 12%, var(--bg));
  --scene-bg-scale: color-mix(in srgb, #d4d6d0 10%, var(--bg));
}

/* ---------- Page enter / exit ---------- */

/* Hold first paint until is-ready (only when scenes.js is present) */
html.scenes-js body:not(.is-ready):not(.scene-exit) .main,
html.scenes-js body:not(.is-ready):not(.scene-exit) .cover {
  opacity: 0;
  transform: translateY(var(--scene-rise));
}

@view-transition {
  navigation: auto;
}

body.is-ready .main,
body.is-ready .cover {
  animation: scene-enter var(--scene-enter-ms) var(--scene-ease) both;
}

body.scene-enter .main,
body.scene-enter .cover {
  animation-name: scene-enter;
}

body.scene-exit .main,
body.scene-exit .cover,
body.scene-exit .chapter-nav {
  animation: scene-exit var(--scene-exit-ms) var(--scene-ease) both;
  pointer-events: none;
}

@keyframes scene-enter {
  from {
    opacity: 0;
    transform: translateY(var(--scene-rise));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scene-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(calc(var(--scene-rise) * -0.5));
  }
}

/* Staggered prose children — light, literary */
body.is-ready .prose > * {
  animation: scene-fade-up calc(var(--scene-enter-ms) * 0.85) var(--scene-ease) both;
}

body.is-ready .prose > *:nth-child(1) { animation-delay: calc(var(--scene-stagger) * 1); }
body.is-ready .prose > *:nth-child(2) { animation-delay: calc(var(--scene-stagger) * 2); }
body.is-ready .prose > *:nth-child(3) { animation-delay: calc(var(--scene-stagger) * 3); }
body.is-ready .prose > *:nth-child(4) { animation-delay: calc(var(--scene-stagger) * 4); }
body.is-ready .prose > *:nth-child(5) { animation-delay: calc(var(--scene-stagger) * 5); }
body.is-ready .prose > *:nth-child(6) { animation-delay: calc(var(--scene-stagger) * 6); }
body.is-ready .prose > *:nth-child(7) { animation-delay: calc(var(--scene-stagger) * 7); }
body.is-ready .prose > *:nth-child(8) { animation-delay: calc(var(--scene-stagger) * 8); }
body.is-ready .prose > *:nth-child(9) { animation-delay: calc(var(--scene-stagger) * 9); }
body.is-ready .prose > *:nth-child(10) { animation-delay: calc(var(--scene-stagger) * 10); }
body.is-ready .prose > *:nth-child(n+11) { animation-delay: calc(var(--scene-stagger) * 11); }

@keyframes scene-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cover / part dividers: rule grow + title fade */
body.is-ready .cover-rule,
body.is-ready .part-divider .part-head::after {
  animation: scene-rule-grow 900ms var(--scene-ease) 180ms both;
}

body.is-ready .cover-title,
body.is-ready .part-head h1,
body.is-ready .chapter-head h1 {
  animation: scene-title-fade 800ms var(--scene-ease) 60ms both;
}

.part-divider .part-head {
  position: relative;
  padding-bottom: 1.25rem;
}

.part-divider .part-head::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 1.25rem auto 0;
  background: var(--rule-strong);
  transform-origin: center;
}

.part-page .part-divider .part-head::after {
  margin-left: 0;
  transform-origin: left center;
}

@keyframes scene-rule-grow {
  from {
    transform: scaleX(0);
    opacity: 0.4;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes scene-title-fade {
  from {
    opacity: 0;
    letter-spacing: -0.01em;
  }
  to {
    opacity: 1;
    letter-spacing: -0.03em;
  }
}

.part-head h1 {
  letter-spacing: -0.025em;
}

.chapter-head h1 {
  letter-spacing: -0.02em;
}

/* ---------- Soft hover / focus (nav, buttons, TOC) ---------- */

.site-nav a,
.site-mark,
.crumb a,
.chapter-nav a,
.toc-list a,
.btn,
.footer-legal a,
.footer-legal .linkish {
  transition:
    color 220ms var(--scene-ease),
    background 220ms var(--scene-ease),
    opacity 220ms var(--scene-ease),
    border-color 220ms var(--scene-ease),
    transform 220ms var(--scene-ease);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.crumb a:hover,
.crumb a:focus-visible {
  transform: translateY(-1px);
}

.toc-list a:hover,
.toc-list a:focus-visible {
  transform: translateX(2px);
}

.chapter-nav a:hover,
.chapter-nav a:focus-visible {
  opacity: 0.85;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* ---------- UI panels: pay gate, talk bubbles, consent ---------- */

.talk-bubble {
  animation: scene-panel-in 480ms var(--scene-ease) both;
}

.talk-settings-backdrop {
  transition: opacity 280ms var(--scene-ease);
}

.talk-settings {
  transition: transform 320ms var(--scene-ease), opacity 280ms var(--scene-ease);
}

.consent-banner:not([hidden]) {
  animation: scene-panel-in 420ms var(--scene-ease) both;
}

.episode-gate,
.pay-panel,
.pay-card,
[data-episode-gate],
.pack-card {
  transition:
    opacity 280ms var(--scene-ease),
    transform 320ms var(--scene-ease),
    border-color 220ms var(--scene-ease),
    box-shadow 280ms var(--scene-ease);
}

@keyframes scene-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Named atmospheres (very subtle) ---------- */

body[data-scene] {
  transition: background-color 1.1s var(--scene-ease);
}

body[data-scene="flood"] {
  background-color: var(--scene-bg-flood);
}

body[data-scene="needle"] {
  background-color: var(--scene-bg-needle);
}

body[data-scene="scale"] {
  background-color: var(--scene-bg-scale);
}

/* ---------- View Transitions API (same-origin) ---------- */

@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 380ms;
    animation-timing-function: var(--scene-ease);
  }

  ::view-transition-old(root) {
    animation-name: scene-vt-out;
  }

  ::view-transition-new(root) {
    animation-name: scene-vt-in;
  }
}

@keyframes scene-vt-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes scene-vt-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --scene-enter-ms: 1ms;
    --scene-exit-ms: 1ms;
    --scene-stagger: 0ms;
    --scene-rise: 0px;
  }

  html.scenes-js body:not(.is-ready) .main,
  html.scenes-js body:not(.is-ready) .cover {
    opacity: 1;
    transform: none;
  }

  body.is-ready .main,
  body.is-ready .cover,
  body.is-ready .prose > *,
  body.is-ready .cover-rule,
  body.is-ready .part-divider .part-head::after,
  body.is-ready .cover-title,
  body.is-ready .part-head h1,
  body.is-ready .chapter-head h1,
  body.scene-exit .main,
  body.scene-exit .cover,
  body.scene-exit .chapter-nav,
  .talk-bubble,
  .consent-banner:not([hidden]) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-nav a,
  .site-mark,
  .crumb a,
  .chapter-nav a,
  .toc-list a,
  .btn,
  .footer-legal a,
  .footer-legal .linkish,
  .episode-gate,
  .pay-panel,
  .pay-card,
  [data-episode-gate],
  .pack-card,
  .talk-settings,
  .talk-settings-backdrop,
  body[data-scene] {
    transition: none !important;
  }

  @supports (view-transition-name: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none !important;
    }
  }
}

@media print {
  body.is-ready .main,
  body.is-ready .cover,
  body.is-ready .prose > *,
  body.is-ready .cover-rule,
  body.is-ready .cover-title,
  body.is-ready .part-head h1,
  body.is-ready .chapter-head h1 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}