/* MindType hero — crystal-brain swarm (approved 2026-10-04; replaces the V2.2 sphere visual). Copy/CTA unchanged; layout follows the approved
   prototype (copy left, brain right on desktop; brain above copy on mobile). Original V2.2 notes follow.
   MindType hero — V2.2 (FINAL-APPROVED), integrated into the homepage.
   Source of truth: ~/wow-lab/FINAL-APPROVED-V2.2/mindtype-hero-test/src/style.css.
   Values (colours, type, timing, easing, layout) are the approved ones; only the SELECTORS are namespaced under
   .mt-hero so nothing leaks into / is affected by the rest of the site. Hero palette is intentionally its own
   (deep navy / cyan / indigo) and does not touch the global site palette. */
.mt-hero {
  --bg-0: #030611; --bg-1: #07102a;
  --ink: #eaf0ff; --ink-dim: #93a3c9; --cyan: #86dcf0;
  --ease: cubic-bezier(.16, .84, .24, 1);          /* long, soft landing */
  /* full-bleed inside the 480px .screen column: same 100vw technique the page already uses for .hero-choices */
  position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: -18px;                                /* cancel #screen-intro's top padding: hero starts at the very top */
  height: 100vh; height: 100svh;                    /* fixed height from first paint => no layout shift */
  overflow: hidden; isolation: isolate; contain: layout paint;
  color: var(--ink); text-align: left;
  font-family: ui-sans-serif, -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  background: radial-gradient(ellipse 70% 80% at 66% 50%, #04132e 0%, #010612 72%);
}
/* Hero -> Coach transition (2026-10-04): the hero's bottom edge fades to transparent over --mt-fade so the page's own atmosphere
   (shader + sparkles) shows through and there is no hard cut; a faint cyan/indigo glow on the Coach wrapper continues across the seam. */
.mt-hero { --mt-fade: clamp(120px, 18vh, 170px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mt-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mt-fade)), transparent 100%); }
.coach-feature-wrap { position: relative; }
.coach-feature-wrap::before {
  content: ""; position: absolute; left: 50%; top: -170px; width: min(1200px, 100%); height: 380px; transform: translateX(-50%);
  pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 52% 55% at 50% 42%, rgba(34, 211, 238, .11), rgba(99, 102, 241, .11) 48%, transparent 76%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.mt-hero, .mt-hero * { box-sizing: border-box; }

#mt-hero-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
#mt-hero-stage.on { opacity: 1; }

.mt-hero__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* S1 — wordmark arrives first, alone, while the fragments are still suspended */
.mt-hero__brand {
  margin: 0 0 28px; font-size: 12px; font-weight: 400; letter-spacing: .5em; color: var(--cyan);
  opacity: 0; filter: blur(6px); transition: opacity 1s ease, filter 1s ease, letter-spacing 1.6s var(--ease);
}
.mt-hero__overlay.s1 .mt-hero__brand { opacity: .9; filter: none; letter-spacing: .42em; }

/* copy: left, vertically centred (desktop) -- the brain lives on the right (canvas layout in mt-swarm.js) */
.mt-hero__copy {
  position: absolute; left: 7vw; top: 50%; transform: translateY(-50%); width: min(max(30vw, 260px), 460px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}

/* approved static crystal brain: reduced motion / no WebGL / swarm failure. Same placement + feather as the canvas. */
.mt-hero__static {
  display: none; position: absolute; z-index: 1; pointer-events: none; height: auto;
  width: min(59vw, 134.07vh); width: min(59vw, 134.07svh); left: 66.5%; top: 52%; transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.mt-hero.no-swarm .mt-hero__static { display: block; }
.mt-hero.no-swarm #mt-hero-stage { display: none; }

/* S2 — headline resolves word by word (blur -> sharp), as the sphere nears completion */
.mt-hero__h1 { margin: 0; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(40px, 4.6vw, 72px); color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.mt-hero__w { display: inline-block; overflow: hidden; padding: .06em .04em; margin: -.06em -.04em; vertical-align: top; }
.mt-hero__w i {
  display: inline-block; font-style: normal; opacity: 0; filter: blur(14px); transform: translateY(.45em);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i) * .08s);
}
.mt-hero__overlay.s2 .mt-hero__w i { opacity: 1; filter: none; transform: none; }

/* S3 / S4 — support copy and CTA only after the headline has landed */
.mt-hero__sub { margin: 24px 0 36px; max-width: 34ch; font-size: clamp(15px, 1.25vw, 19px); font-weight: 400; line-height: 1.55; color: var(--ink-dim);
  opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform 1s var(--ease); }
.mt-hero__overlay.s3 .mt-hero__sub { opacity: 1; transform: none; }

.mt-hero__cta {
  display: inline-block; white-space: nowrap; text-decoration: none; color: var(--ink); padding: 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 400; letter-spacing: .04em;
  border: 1px solid rgba(134, 220, 240, .32); background: rgba(108, 116, 230, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .6s ease .05s, transform .8s var(--ease) .05s, background .4s, border-color .4s;
}
.mt-hero__overlay.s4 .mt-hero__cta { opacity: 1; transform: none; animation: mt-hero-arm 0s linear .3s forwards; }   /* clickable ~0.3s after it starts fading in, not while invisible */
@keyframes mt-hero-arm { to { pointer-events: auto; } }
.mt-hero__overlay.s4 .mt-hero__cta:hover, .mt-hero__overlay.s4 .mt-hero__cta:focus-visible { background: rgba(108, 116, 230, .3); border-color: rgba(134, 220, 240, .7); outline: none; }

/* mobile: brain on top, copy below (approved prototype layout) */
@media (max-width: 700px) {
  .mt-hero { --mt-fade: 120px; background: radial-gradient(ellipse 90% 40% at 50% 27%, #04132e 0%, #010612 75%); }
  .mt-hero__copy { left: 0; right: 0; top: 51vh; top: 51svh; transform: none; width: 100%; padding: 0 28px; align-items: center; text-align: center; }
  .mt-hero__brand { margin-bottom: 16px; }
  .mt-hero__h1 { font-size: 40px; }
  .mt-hero__sub { margin: 16px 0 26px; font-size: 15px; }
  .mt-hero__static { width: 120.67vw; left: 50%; top: 26.5%; }
}

/* #screen-intro's own top padding varies by viewport (style.css: 18px default, 12px when max-height:700px, 52px when max-width:479px);
   cancel exactly that so the hero always starts at the very top of the page. Same breakpoints/order as those rules. */
@media (max-height: 700px) { .mt-hero { margin-top: -12px; } }
@media (max-width: 479px) { .mt-hero { margin-top: -52px; } }

@media (prefers-reduced-motion: reduce) {
  .mt-hero__brand, .mt-hero__w i, .mt-hero__sub, .mt-hero__cta, #mt-hero-stage { transition: none; }
  .mt-hero__overlay.s4 .mt-hero__cta { animation: none; pointer-events: auto; }
}