/*
 * Adaptive performance mode.
 * The canonical visual experience remains unchanged on capable devices.
 */
:root {
  --background: #07111f;
  --section-background: #07111f;
}

.hero {
  background:
    radial-gradient(circle at 73% 44%, #164ba30b, transparent 37%),
    linear-gradient(120deg, #07111fe6 0%, #0814264d 48%, #07112066 100%);
}

.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

.perf-lite .global-mouse-aurora,
.perf-lite .mouse-aurora {
  display: none;
}

.perf-lite .expert-webgl {
  background-image: var(--expert-image);
  background-position: center top;
  background-size: cover;
}

.perf-lite .expert-grid article:nth-child(1) .expert-webgl {
  background-image: url("/experts/generated-man.webp");
}

.perf-lite .expert-grid article:nth-child(2) .expert-webgl {
  background-image: url("/experts/generated-woman-1.webp");
}

.perf-lite .expert-grid article:nth-child(3) .expert-webgl {
  background-image: url("/experts/generated-woman-2.webp");
}

.perf-lite .expert-webgl canvas {
  display: none !important;
}

.perf-lite [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

.perf-lite .direction-card,
.perf-lite .direction-card.is-sequence-lit {
  background: linear-gradient(145deg, #0b1b37d1, #050f20b3);
  border-color: #6484c12e;
  box-shadow: none;
}

.perf-lite .corporate-features article,
.perf-lite .corporate-features article.is-sequence-lit {
  background:
    radial-gradient(circle at 82% 22%, #2667eb24, transparent 34%),
    #08152bab;
  border-color: #598ef42e;
  box-shadow: none;
}

html {
  scroll-snap-type: none !important;
}

main > section {
  scroll-snap-align: none !important;
}

main > section[data-reveal]:not(.is-visible) *,
main > section[data-reveal]:not(.is-visible) *::before,
main > section[data-reveal]:not(.is-visible) *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .global-mouse-aurora,
  .mouse-aurora {
    display: none;
  }

  .expert-webgl {
    background-image: var(--expert-image);
    background-position: center top;
    background-size: cover;
  }

  .expert-webgl canvas {
    display: none !important;
  }
}

/*
 * Mobile Safari can repeatedly snap back to the preceding full-height section
 * while the finger is still moving. Keep the cinematic snap only for precise
 * desktop pointers; touch navigation must remain native and freely scrollable.
 */
@media (max-width: 980px), (hover: none), (pointer: coarse) {
  html {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }

  main > section {
    scroll-snap-align: none !important;
  }

  .direction-art-wrap,
  .card-number,
  .scene-tilt,
  .program-scene svg,
  .cinematic-depth,
  .cinematic-depth img,
  .corporate-object img,
  .corporate-features article {
    animation: none !important;
    transform: none !important;
  }

  .electric-scribbles,
  .electric-lightning {
    display: none !important;
  }

  .electric-button,
  .electric-button::before,
  .electric-button::after,
  .electric-button-content {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .electric-button:active {
    filter: brightness(1.08);
  }

  .electric-button:focus-visible {
    outline: 2px solid #78a8ff;
    outline-offset: 3px;
  }

  .section-heading,
  .stories-heading,
  .section-heading > div,
  .section-heading h2,
  .learning-copy > h2,
  .corporate-content h2,
  .stories-heading h2,
  .final-cta h2 {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .section-heading h2,
  .learning-copy > h2,
  .corporate-content h2,
  .stories-heading h2,
  .final-cta h2 {
    overflow-wrap: break-word;
  }
}

@media (max-width: 420px) {
  .section-heading h2,
  .learning-copy > h2,
  .corporate-content h2,
  .stories-heading h2,
  .final-cta h2 {
    font-size: clamp(36px, 11vw, 42px);
  }
}

@media (min-width: 1920px) and (min-height: 1200px) {
  .hero {
    min-height: min(100svh, 1100px);
  }

  .hero-layout {
    min-height: min(calc(100svh - 86px), 1014px);
  }
}