/* ==========================================================================
   Scrollytelling CSS - Sticky Sections, Reveal Animations, Scroll Effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   Main Scroll Container
   -------------------------------------------------------------------------- */
.scroll-container {
  position: relative;
}

/* --------------------------------------------------------------------------
   Section Base Styles
   -------------------------------------------------------------------------- */
.scroll-section {
  position: relative;
  padding: var(--space-12) 0;
  overflow: hidden;
}

.scroll-section--hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-16) 0 var(--space-24); /* room for the scroll hint below the CTAs */
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-background);
}

.scroll-section--alt {
  background-color: var(--color-background-alt);
}

.scroll-section--dark {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.scroll-section--dark h2,
.scroll-section--dark h3,
.scroll-section--dark h4 {
  color: var(--color-background);
}

.scroll-section--dark .text-muted {
  color: rgba(245, 242, 235, 0.7);
}

/* Light panels inside the dark section must not inherit its cream text */
.scroll-section--dark .split-comparison__side--light,
.scroll-section--dark .feature-card {
  color: var(--color-text);
}

.scroll-section--dark .feature-card h4,
.scroll-section--dark .split-comparison__side--light h3,
.scroll-section--dark .split-comparison__side--light h5 {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero__overline {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-5xl);
  color: var(--color-background);
  margin-bottom: var(--space-6);
  line-height: 1.1;
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(245, 242, 235, 0.85);
  max-width: 600px;
  margin: 0 auto var(--space-10);
  line-height: 1.6;
}

.hero__cta-group {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(245, 242, 235, 0.6);
  font-size: var(--text-sm);
  animation: bounce 2s infinite;
}

.hero__scroll-hint svg {
  width: 24px;
  height: 24px;
}

@media (max-height: 640px) {
  .hero__scroll-hint { display: none; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* Hero background arrow decoration */
.hero__bg-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  max-width: 1200px;
  opacity: 0.05;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Sticky Section Layout (Text + Visual)
   -------------------------------------------------------------------------- */
.sticky-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.sticky-section--reverse {
  direction: rtl;
}

.sticky-section--reverse > * {
  direction: ltr;
}

.sticky-content {
  padding: var(--space-6);
}

.sticky-visual {
  position: sticky;
  top: var(--space-8);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
}

.sticky-visual__inner {
  width: 100%;
  max-width: 500px;
}

/* A panel straight inside the sticky column fills it, as __inner does.
   Left to size itself, it takes its diagram's width, and a diagram's SVG has
   none of its own (only a viewBox): Chromium falls back to 300px and WebKit
   to 0, so Safari drew these diagrams as empty boxes. */
.sticky-visual > .visual-panel {
  width: 100%;
  max-width: 500px;
}

/* --------------------------------------------------------------------------
   Scroll Progress
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
  z-index: var(--z-fixed);
}

.scroll-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  width: 0%;
  transition: width 100ms linear;
}

/* --------------------------------------------------------------------------
   Section Navigation
   -------------------------------------------------------------------------- */
.section-nav {
  position: fixed;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-nav__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-border);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.section-nav__dot::before {
  content: attr(data-label);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-primary);
  color: var(--color-background);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  margin-right: var(--space-3);
  transition: all var(--duration-fast) var(--ease-out);
}

.section-nav__dot:hover::before {
  opacity: 1;
  visibility: visible;
}

.section-nav__dot--active {
  background-color: var(--color-accent);
  border-color: var(--color-accent-light);
  transform: scale(1.3);
}

/* --------------------------------------------------------------------------
   Reveal Animations
   -------------------------------------------------------------------------- */

/* Fade up animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* The hero fades in with CSS alone. It is the first screen every visitor sees and
   the page's largest paint, so it must not wait for the scripts to load. Reduced
   motion switches the animation off (base.css), leaving the hero simply visible. */
.scroll-section--hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
  animation: hero-in var(--duration-slow) var(--ease-out) both;
}

.scroll-section--hero .reveal:nth-child(2) { animation-delay: 80ms; }
.scroll-section--hero .reveal:nth-child(3) { animation-delay: 160ms; }
.scroll-section--hero .reveal:nth-child(4) { animation-delay: 240ms; }

/* The headline and subtitle rise without fading: browsers don't count text whose
   first frame was transparent as painted, which would leave the hero out of the
   page's largest-paint timing. */
.scroll-section--hero .hero__title,
.scroll-section--hero .hero__subtitle {
  animation-name: hero-rise;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes hero-rise {
  from {
    transform: translateY(16px);
  }
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.reveal-stagger--visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger--visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger--visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger--visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger--visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger--visible > *:nth-child(6) { transition-delay: 500ms; }

.reveal-stagger--visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in from sides */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal-left--visible,
.reveal-right--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-spring);
}

.reveal-scale--visible {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   Content Blocks
   -------------------------------------------------------------------------- */
.content-block {
  max-width: var(--container-narrow);
  /* Only the sides: "margin: 0 auto" also wiped the mt-* utilities */
  margin-left: auto;
  margin-right: auto;
}

.content-block h3,
.scroll-section .container > h3 {
  margin-bottom: var(--space-4);
}

.content-block__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent-text);
  margin-bottom: var(--space-4);
}

.scroll-section--dark .content-block__overline {
  color: var(--color-accent-light);
}

.content-block__overline::before {
  content: '';
  width: 30px;
  height: 2px;
  background-color: var(--color-accent);
}

.content-block__title {
  margin-bottom: var(--space-6);
}

.content-block__body {
  color: var(--color-text-light);
  font-size: var(--text-lg);
  line-height: 1.7;
}

.content-block__body p {
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Visual Panels
   -------------------------------------------------------------------------- */
.visual-panel {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.visual-panel--bordered {
  border: 2px solid var(--color-border);
  box-shadow: none;
}

.visual-panel__label {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* The label sits in the panel's top padding, so a labelled panel's padding
   clears it: the label's offset, its line (font size x line height), a gap. */
.visual-panel:has(> .visual-panel__label) {
  padding-top: calc(var(--space-4) + var(--text-xs) * 1.6 + var(--space-3));
}

/* --------------------------------------------------------------------------
   Comparison Layouts
   -------------------------------------------------------------------------- */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.comparison__item {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.comparison__item:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.comparison__item--highlighted {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(196, 112, 60, 0.05), transparent);
}

.comparison__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.comparison__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.comparison__description {
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

/* Split comparison (side by side) */
.split-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background-color: var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.split-comparison__side {
  padding: var(--space-8);
  background-color: var(--color-surface);
}

.split-comparison__side--target {
  background: linear-gradient(135deg, var(--color-surface), rgba(196, 112, 60, 0.05));
}

.split-comparison__side--hunting {
  background: linear-gradient(135deg, var(--color-surface), rgba(26, 47, 35, 0.05));
}

/* --------------------------------------------------------------------------
   Feature Cards Grid
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* Four cards: two even rows, not three plus one left alone */
@media (min-width: 769px) {
  .feature-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  transition: all var(--duration-normal) var(--ease-out);
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.feature-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.feature-card__text {
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Diagram Styles
   -------------------------------------------------------------------------- */
.diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
}

.diagram svg {
  width: 100%;
  height: 100%;
}

/* Diagrams whose SVG sets its own proportions (no letterboxing) */
.diagram--free {
  aspect-ratio: auto;
}

.diagram--free svg {
  height: auto;
}

.gpp-scale {
  padding: var(--space-8) 0 0;
}

/* The zone legend lives in HTML so it stays legible when the scale shrinks */
.gpp-legend {
  list-style: none;
  margin: var(--space-6) auto 0;
  padding: 0;
  max-width: 40rem;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-light);
  text-align: left;
}

.gpp-legend li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

.gpp-legend strong {
  color: var(--color-text);
}

.gpp-legend__swatch {
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 2px;
  border: 1px solid var(--color-border);
  transform: translateY(0.12em);
}

.gpp-legend__swatch--low { background-color: rgba(200, 68, 68, 0.35); }
.gpp-legend__swatch--mid { background-color: rgba(214, 150, 60, 0.35); }
.gpp-legend__swatch--high { background-color: rgba(74, 170, 74, 0.35); }

.gpp-legend__example {
  max-width: 40rem;
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: left;
}

/* The scale shrinks to about 0.6x on a phone: enlarge its numbers to match */
@media (max-width: 600px) {
  .gpp-scale svg text {
    font-size: 24px;
  }
}

.diagram__label {
  position: absolute;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  pointer-events: none;
}

/* Annotation lines */
.annotation-line {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 2;
}

/* --------------------------------------------------------------------------
   Statistic Displays
   -------------------------------------------------------------------------- */
.stat-display {
  text-align: center;
  padding: var(--space-6);
}

.stat-display__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-display__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Stats row */
.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

/* --------------------------------------------------------------------------
   Call to Action Section
   -------------------------------------------------------------------------- */
.cta-section {
  text-align: center;
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(180deg, var(--color-background-alt), var(--color-background));
}

.cta-section__title {
  margin-bottom: var(--space-4);
}

.cta-section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  max-width: 500px;
  margin: 0 auto var(--space-8);
}

/* Wraps on phones: two large buttons side by side made the whole page 426px wide at 390px */
.cta-section__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sticky-section {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .sticky-content {
    position: relative;
    top: auto;
    transform: none;
    padding: var(--space-6);
  }

  .sticky-visual {
    position: relative;
    height: auto;
    min-height: 0;
  }

  .section-nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .scroll-section {
    padding: var(--space-12) 0;
    min-height: auto;
  }

  /* The rule above would also strip the hero's padding: keep room below the
     buttons for the scroll hint, with slack for its bounce and the buttons'
     reveal slide. */
  .scroll-section--hero {
    padding: var(--space-16) 0 calc(var(--space-32) + var(--space-4));
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: center;
  }

  .comparison,
  .split-comparison {
    grid-template-columns: 1fr;
  }

  .stats-row {
    flex-direction: column;
    gap: var(--space-6);
  }
}

@media (max-width: 480px) {
  .content-block {
    padding: 0 var(--space-4);
  }

  .visual-panel {
    padding: var(--space-4);
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   SVG Animation Keyframes
   (flight paths and the archer's paradox animate with SMIL inside the SVG)
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Deflection weight drop animation */
.deflection-weight {
  animation: dropWeight 2s ease-out infinite;
}

@keyframes dropWeight {
  0% {
    transform: translateY(-15px);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-15px);
    opacity: 0;
  }
}

/* The markup draws the shaft bent under the weight (this animation's middle
   frame), so with Reduce Motion, when nothing animates, the diagram still
   shows what spine is. */
/* Arrow shaft bend animation for deflection test */
.deflection-arrow {
  animation: bendArrow 2s ease-out infinite;
  transform-origin: center;
}

@keyframes bendArrow {
  0%, 100% {
    d: path("M 40,120 Q 200,120 360,120");
  }
  30%, 70% {
    d: path("M 40,120 Q 200,145 360,120");
  }
}