/* ==========================================================================
   Scroll-driven hero experience - index.html only
   ========================================================================== */

/* ---------- Loader -------------------------------------------------------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-6);
  background: #0A1512;
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}
#loader.is-done { opacity: 0; visibility: hidden; }

.loader-brand {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}
.loader-brand img { width: 62px; height: 62px; animation: seal-turn 9s linear infinite; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
.loader-brand__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}
.loader-brand__role {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

#loader-bar {
  position: relative;
  width: min(240px, 56vw);
  height: 1px;
  background: rgba(184, 134, 59, 0.2);
  overflow: hidden;
}
#loader-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: var(--brass);
  transition: width 240ms linear;
}
#loader-percent {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--on-ink-faint);
}

/* ---------- Standalone hero ---------------------------------------------- */

/* The hero owns the first 20% of the scroll experience. Its content pins for
   the first viewport-height so the canvas can iris in behind it instead of the
   page falling through to an empty gap. */
.hero-standalone {
  position: relative;
  z-index: 20;
  height: 200vh;
  background: var(--ink);
}

.hero-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 7.5rem var(--gutter) 6rem;
  overflow: hidden;
}

.hero-standalone__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(184,134,59,.13), transparent 62%),
    repeating-linear-gradient(to bottom, rgba(184,134,59,.055) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 45%, #000 30%, transparent 78%);
}

.hero-standalone__seal {
  position: absolute;
  z-index: 0;
  top: 50%; left: 50%;
  width: min(118vw, 940px);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .17;
  animation: seal-turn 150s linear infinite;
  pointer-events: none;
}

.hero-standalone__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}

.hero-heading {
  margin-block: var(--s-5) var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144;
  color: var(--on-ink);
}
/* Word-by-word mask rise on load. */
.hero-heading .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-heading .w > span {
  display: inline-block;
  transform: translateY(105%);
  animation: word-rise 1100ms var(--ease-out) forwards;
  animation-delay: calc(340ms + var(--i) * 78ms);
}
@keyframes word-rise { to { transform: translateY(0); } }

.hero-tagline {
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-ink-mute);
  text-wrap: pretty;
}

/* Load-in stagger for the non-heading hero furniture. */
.hero-fade {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-in 900ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes hero-fade-in { to { opacity: 1; transform: none; } }

.hero-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-line);
}
.hero-credentials li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}
.hero-credentials li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--brass);
  rotate: 45deg;
  flex: none;
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2.5rem);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
}
.scroll-cue__line {
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  animation: cue-drop 2.4s var(--ease-in-out) infinite;
  transform-origin: top center;
}
@keyframes cue-drop {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---------- Canvas + overlays --------------------------------------------- */

.canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}
#canvas { width: 100%; height: 100%; display: block; }

#dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: #07100E;
}

/* Grain sits over the canvas so rendered frames share the page's texture. */
.canvas-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .26;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Fixed marquee ------------------------------------------------- */

.marquee-wrap {
  position: fixed;
  z-index: 4;
  left: 0;
  bottom: 0.5vh;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.marquee-text {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 13rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 144;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 134, 59, .55);
  will-change: transform;
}
.marquee-text span { padding-inline: 0.18em; }

/* ---------- Scroll container + sections ----------------------------------- */

#scroll-container {
  position: relative;
  z-index: 5;
  height: 800vh;
  /* Sections park at x:±80 in their GSAP "from" state while off-screen, which
     would otherwise widen the document. clip (not hidden) avoids creating a
     scroll container. */
  overflow-x: clip;
}

.scroll-section {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
.scroll-section a,
.scroll-section button { pointer-events: auto; }

.section-inner { max-width: 38vw; }

/* Atmospheric scrim, not a card. Copy sits directly on it; it only darkens the
   footage under the text so contrast holds over bright frames (the lit desk).
   Directional, so the opposite side of the frame stays fully visible. */
.scroll-section::before {
  content: '';
  position: absolute;
  inset: -2.5rem 0;
  z-index: -1;
  pointer-events: none;
}
.align-left::before {
  background: linear-gradient(to right,
    rgba(7,16,14,.90) 0%, rgba(7,16,14,.74) 30%, rgba(7,16,14,0) 64%);
}
.align-right::before {
  background: linear-gradient(to left,
    rgba(7,16,14,.90) 0%, rgba(7,16,14,.74) 30%, rgba(7,16,14,0) 64%);
}
.section-cta::before {
  background: radial-gradient(68% 62% at 50% 50%,
    rgba(7,16,14,.93) 38%, rgba(7,16,14,0) 100%);
}
/* Stats already sit under the full-viewport dark overlay. */
.section-stats::before { background: none; }

.align-left  { padding-left: 6vw;  padding-right: 58vw; text-align: left; }
.align-right { padding-left: 58vw; padding-right: 6vw;  text-align: right; }
.align-right .section-inner { margin-left: auto; }
.align-right .label { flex-direction: row-reverse; }
.align-right .btn-row { justify-content: flex-end; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.section-label::before {
  content: '';
  width: 2rem; height: 1px;
  background: currentColor;
  opacity: .7;
}
.align-right .section-label { flex-direction: row-reverse; }

.section-heading {
  margin-block: var(--s-4) var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  color: var(--on-ink);
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(7, 16, 14, .78);
}
.section-heading .mark { color: var(--brass); }
.section-heading .tension { color: var(--oxide-lt); }

.section-body {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(244, 239, 228, .82);
  max-width: 40ch;
  text-wrap: pretty;
  text-shadow: 0 2px 26px rgba(7, 16, 14, .92);
}
.align-right .section-body { margin-left: auto; }
.section-body + .section-body { margin-top: var(--s-4); }

.section-note {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.scroll-section .btn-row { margin-top: var(--s-6); }

/* Tension list - the pain section's four failures. */
.pain-list { display: grid; gap: 0; margin-top: var(--s-5); }
.pain-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(212, 97, 74, .30);
  font-size: 1rem;
  color: rgba(244, 239, 228, .86);
  text-shadow: 0 2px 22px rgba(7, 16, 14, .92);
}
.pain-list li:last-child { border-bottom: 1px solid rgba(212, 97, 74, .30); }
.pain-list span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--oxide-lt);
}

/* ---------- Stats (centre, over the dark overlay) ------------------------- */

.section-stats { padding-inline: 6vw; text-align: center; }
.section-stats .section-inner { max-width: 1180px; margin-inline: auto; }
.section-stats .section-label { justify-content: center; }

.stats-grid {
  display: grid;
  gap: var(--s-7) var(--s-6);
  margin-top: var(--s-8);
}
.stats-grid .stat {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: 0;
  border: 0;
}
.stats-grid .stat > .stat-figure {
  display: flex;
  align-items: baseline;
  gap: 0.04em;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2rem + 5vw, 6rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 144;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.stats-grid .stat-suffix { font-size: 0.4em; color: var(--brass-lt); }
.stats-grid .stat-label {
  max-width: 24ch;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(244, 239, 228, .68);
}
.stats-grid .stat--zero .stat-figure { color: var(--oxide-lt); }

/* ---------- Persistent CTA ------------------------------------------------ */

.section-cta { padding-inline: 6vw; text-align: center; }
.section-cta .section-inner {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}
.section-cta .section-label { justify-content: center; }
.section-cta .section-body { margin-inline: auto; max-width: 48ch; }
.section-cta .btn-row { justify-content: center; }

/* ---------- Mobile -------------------------------------------------------- */

@media (max-width: 1023px) {
  .hero-standalone { height: 160vh; }
  #scroll-container { height: 520vh; }

  .align-left, .align-right {
    padding-inline: var(--gutter);
    text-align: left;
  }
  .align-right .section-inner { margin-left: 0; }
  .align-right .label,
  .align-right .section-label { flex-direction: row; }
  .align-right .section-body { margin-left: 0; }
  .align-right .btn-row { justify-content: flex-start; }

  .section-inner { max-width: 100%; }

  /* Text needs a legible ground on small screens where the frame fills the
     viewport - a full-bleed scrim behind the block, not a card around it.
     Anchored to the section (not the inner) so it can never widen the page. */
  .scroll-section::before,
  .align-right::before,
  .section-cta::before,
  .section-stats::before {
    inset: -2rem 0;
    background: linear-gradient(
      to right,
      rgba(7, 16, 14, .95) 0%,
      rgba(7, 16, 14, .90) 62%,
      rgba(7, 16, 14, .55) 100%
    );
  }

  .section-heading { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 3rem); }
  .section-body { max-width: 100%; font-size: 1.02rem; }

  .marquee-wrap { bottom: 6vh; }
  .marquee-text { font-size: 16vw; }

  .stats-grid { gap: var(--s-6); }
  .hero-standalone__seal { width: 150vw; opacity: .13; }
}

@media (min-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Stacking above the fixed canvas layers ------------------------ */
/* Everything after #scroll-container is in normal flow at z-index 0, which
   would sit *under* the fixed canvas (z1), grain (z3) and marquee (z4). */

#reviews,
.marquee,
.cta-band,
.footer {
  position: relative;
  z-index: 6;
}

/* The fixed marquee would collide with vertically-centred section text on
   narrow screens. The in-flow .marquee section below covers small viewports. */
@media (max-width: 767px) {
  .marquee-wrap { display: none; }
}

/* ---------- Static mode (reduced motion / no GSAP) ------------------------ */

body.static-mode #scroll-container { height: auto; }
body.static-mode .hero-standalone { height: auto; }
body.static-mode .hero-sticky { position: static; }

body.static-mode .scroll-section {
  position: static;
  transform: none;
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
  pointer-events: auto;
  border-top: 1px solid var(--ink-line);
}
body.static-mode .scroll-section .section-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0;
}
body.static-mode .scroll-section .section-inner::before { display: none; }
body.static-mode .section-heading,
body.static-mode .section-body,
body.static-mode .pain-list li { text-shadow: none; }
body.static-mode .align-right { text-align: left; }
body.static-mode .align-right .section-inner { margin-left: auto; margin-right: auto; }
body.static-mode .align-right .section-label,
body.static-mode .align-right .btn-row { flex-direction: row; justify-content: flex-start; }
body.static-mode .align-right .section-body { margin-left: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .hero-heading .w > span { transform: none; animation: none; }
  .hero-fade { opacity: 1; transform: none; animation: none; }
  .scroll-cue__line, .hero-standalone__seal, .loader-brand img { animation: none; }
  .hero-standalone { height: auto; }
  .hero-sticky { position: static; min-height: auto; }
  #loader { display: none; }
  /* Sections are laid out statically by hero.js via body.static-mode. */
}