/*
 * GloCoach motion.css — cinematic layer styles
 * Pairs with assets/motion.js (GSAP + ScrollTrigger + Lenis via CDN)
 * Progressive enhancement: NOTHING here hides content without JS.
 * All initial "hidden" reveal states are set by motion.js at runtime,
 * so the site is fully readable with JavaScript disabled.
 */

/* ── LENIS SMOOTH SCROLL ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── HOME HERO — CINEMATIC MEDIA STACK ── */
/* Layer order (back→front): gradient (section bg) → brand still → canvas wave → video slot → overlay → content */
.hero-cinema { position: relative; }

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Brand duotone still — faint texture under the wave */
.hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  opacity: 0.30;
  mix-blend-mode: luminosity;
}

/* Signature GCLM pillar-arc watermark — bleeds off the right edge.
   Alpha is authored IN the SVG per element; container opacity only.
   ⚠️ NEVER apply CSS filters (brightness/invert flattens it to a disk). */
.hero-watermark {
  position: absolute;
  top: 50%;
  right: -16%;
  width: min(62vw, 880px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.13;
  will-change: transform;
}

/* Canvas data-wave (free branded motion — echoes the Digital Wave graphic) */
.hero-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

/* HIGGSFIELD HERO VIDEO SLOT — hidden until a <source> is added and loads.
   motion.js adds .hero-video-ready on loadedmetadata, then scroll-scrubs currentTime. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-video.hero-video-ready { opacity: 1; }

/* When the video is live, quiet the wave + still + watermark so the film reads clean */
.hero-cinema.has-video .hero-wave      { opacity: 0.25; }
.hero-cinema.has-video .hero-still     { opacity: 0.08; }
.hero-cinema.has-video .hero-watermark { opacity: 0.06; }

/* Legibility overlay — keeps white text AA on top of any media */
.hero-media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0,30,48,0.82) 0%, rgba(0,59,92,0.55) 45%, rgba(0,59,92,0.22) 100%);
}

/* People heroes — show the human warmly (not the faint abstract texture).
   Used where the page is ABOUT people; abstract/tech heroes keep the .hero-still default.
   Warm-grade rule (design.md §5): warmth lives in the PHOTO, never the scrim. */
.hero-cinema.hero-people .hero-still {
  opacity: 0.86;
  mix-blend-mode: normal;
  object-position: 75% 28%;
  filter: saturate(1.14) sepia(0.22) brightness(1.04) contrast(1.02);
}
.hero-cinema.hero-people .hero-media-overlay {
  /* Demo-page falloff (2026-07-05 convergence): opaque on the text side, clears
     fully over the subject side. Scrim serves legibility only — never a brand filter. */
  background:
    linear-gradient(100deg, rgba(0,30,48,0.92) 0%, rgba(0,42,66,0.58) 42%, rgba(0,59,92,0.14) 74%, rgba(0,59,92,0) 100%);
}

/* Content sits above all media layers */
.hero-cinema .hero-inner { position: relative; z-index: 3; }
.hero-cinema::before, .hero-cinema::after { z-index: 2; }

/* ── SCROLL-PROGRESS HAIRLINE (top of viewport, brand yellow) ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--yellow, #FFF522);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 400;
  pointer-events: none;
}

/* ── NAV — solidify on scroll ── */
.site-nav { transition: box-shadow 0.3s ease, background 0.3s ease; }
.site-nav.nav-scrolled {
  background: rgba(0,30,48,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 32px rgba(0,0,0,0.45);
}

/* ── REVEAL POLISH ── */
/* will-change is applied/removed by motion.js around tweens; this is a fallback hint */
.reveal-prep { will-change: transform, opacity; }

/* Card hover lift — subtle, premium (motion-stack pages only) */
.motion-on .card,
.motion-on .stakes-card,
.motion-on .brief-cap-card,
.motion-on .enroll-card,
.motion-on .testimonial-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.motion-on .card:hover,
.motion-on .stakes-card:hover,
.motion-on .brief-cap-card:hover,
.motion-on .enroll-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(33,57,194,0.13);
}

.motion-on .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.35);
}

/* ── SECTION BACKGROUND ART (brand duotone stills, lazy-loaded) ── */
.section-art {
  position: relative;
  overflow: hidden;
}

.section-art .section-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  pointer-events: none;
}

.section-art > * { position: relative; z-index: 1; }
.section-art .section-art-img { z-index: 0; }

/* ── REDUCED MOTION — kill everything, show static state ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-wave  { display: none; }
  .hero-video { display: none; }
  .hero-still { opacity: 0.22; }
  .scroll-progress { display: none; }
  .motion-on .card, .motion-on .stakes-card, .motion-on .brief-cap-card,
  .motion-on .enroll-card, .motion-on .testimonial-card { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}