/* ===================================================================
   TORCH WELLNESS — ELEVATION LAYER  (loaded after site.css)
   Cinematic, editorial, premium. Hand-crafted motion + materials.
   =================================================================== */

:root{
  --glow-orange: 255,122,0;
  --glow-teal: 30,170,170;
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring2: cubic-bezier(0.34, 1.3, 0.5, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html{ scroll-behavior: smooth; }
body{ overflow-x: hidden; }
::selection{ background: var(--tw-torch-500); color:#fff; }
* { scrollbar-width: thin; scrollbar-color: var(--tw-torch-600) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background: var(--tw-navy-900); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--tw-torch-400),var(--tw-torch-700)); border-radius:20px; border:3px solid var(--tw-navy-900); }
::-webkit-scrollbar-thumb:hover{ background: var(--tw-torch-500); }

/* ---- fixed chrome: grain + scroll progress ---- */
.tw-grain{ position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image: var(--grain); background-size:200px 200px; }
.tw-progress{ position:fixed; top:0; left:0; height:2px; width:0%; z-index:1200; background:linear-gradient(90deg, var(--tw-torch-600), var(--tw-torch-400) 60%, #ffcf8a); box-shadow:0 0 14px rgba(var(--glow-orange),.7); transition: width .08s linear; }

/* ---- typography elevation ---- */
.display, .hero-display, h1, h2{ letter-spacing:-.035em; text-wrap: balance; }
.hero-display{ letter-spacing:-.055em; }
.display em, .hero-display em, h1 em, h2 em{ font-style: italic; background: linear-gradient(120deg, var(--tw-torch-400), var(--tw-torch-600)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; color: var(--tw-torch-500); }
.eyebrow{ position:relative; }

/* ---- premium buttons ---- */
.btn{ position:relative; isolation:isolate; transition: transform .3s var(--ease-spring2), box-shadow .35s var(--ease-out), background .3s; will-change: transform; }
.btn-primary{ background: linear-gradient(135deg, #ff8c1a, var(--tw-torch-600)); box-shadow: 0 8px 22px rgba(var(--glow-orange),.32), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(var(--glow-orange),.5), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary::after{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s var(--ease-cinema); z-index:-1; }
.btn-primary:hover::after{ transform: translateX(130%); }
.btn .arr{ display:inline-block; transition: transform .3s var(--ease-spring2); }
.btn:hover .arr{ transform: translateX(5px); }
.btn-ghost-dark, .btn-ghost-light{ transition: transform .3s var(--ease-spring2), border-color .3s, color .3s, background .3s; }
.btn-ghost-dark:hover{ transform: translateY(-3px); border-color: var(--tw-torch-400); color:#fff; background: rgba(var(--glow-orange),.08); }
.btn-ghost-light:hover{ transform: translateY(-3px); border-color: var(--tw-navy-900); }

/* ---- animated link underlines (nav + footer) ---- */
.nav-link{ position:relative; transition: color .25s; }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--tw-torch-500); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease-cinema); }
.nav-link:hover::after, .nav-link.is-current::after{ transform: scaleX(1); }
.footer a{ transition: color .25s; }

/* ---- glass nav on scroll ---- */
.nav{ transition: background .4s var(--ease-out), backdrop-filter .4s, box-shadow .4s, border-color .4s; }
.nav[data-mode="solid"]{ background: color-mix(in srgb, #fff 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(8,22,39,.06), 0 12px 40px -18px rgba(8,22,39,.3); }

/* ---- elevated cards: glass + gradient hairline + hover lift/sheen ---- */
.svc, .vcard, .tcard, .fcard, .fit-card, .side-card, .office-card, .channel, .qcard, .icard, .step, .eligibility{
  position:relative; transition: transform .4s var(--ease-cinema), box-shadow .4s var(--ease-out), border-color .4s; will-change: transform;
}
.svc:hover, .vcard:hover, .tcard:hover, .fcard:hover, .fit-card:hover, .side-card:hover, .office-card:hover, .channel:hover, .qcard:hover, .icard:hover{
  transform: translateY(-6px); box-shadow: 0 26px 60px -28px rgba(8,22,39,.45);
}
.svc::after, .vcard::after, .tcard::after, .fcard::after, .qcard::after, .icard::after, .fit-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition: opacity .4s;
  background: linear-gradient(135deg, rgba(var(--glow-orange),.6), transparent 45%, rgba(var(--glow-teal),.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.svc:hover::after, .vcard:hover::after, .tcard:hover::after, .fcard:hover::after, .qcard:hover::after, .icard:hover::after, .fit-card:hover::after{ opacity:1; }

/* ---- section rhythm + dark-section aurora ---- */
.section{ position:relative; }
.section.navy, .compare, .evidence-wrap, .program.tint{ position:relative; overflow:hidden; }
.aura{ position:absolute; border-radius:50%; filter: blur(80px); opacity:.5; pointer-events:none; z-index:0; }
.aura.o{ background: radial-gradient(circle, rgba(var(--glow-orange),.55), transparent 70%); }
.aura.t{ background: radial-gradient(circle, rgba(var(--glow-teal),.45), transparent 70%); }

/* ===================================================================
   REVEAL ENGINE  (richer than base: rise + fade + blur, staggered)
   =================================================================== */
html.tw-anim :is([data-reveal],.svc,.col,.vcard,.step,.qcard,.metric,.program-inner,.belief,.fit-card,.wedge-stats,.quote,.fcard,.tcard,.hstat,.reassure,.channel,.side-card,.office-card,.section-head,.eligibility,.signature,.compare-table,.cform,.info-cards,.icard,.mission-inner,.origin-inner){
  transition: opacity .9s var(--ease-cinema), transform .9s var(--ease-cinema), filter .9s var(--ease-cinema);
}
html.tw-anim :is([data-reveal],.svc,.col,.vcard,.step,.qcard,.metric,.program-inner,.belief,.fit-card,.wedge-stats,.quote,.fcard,.tcard,.hstat,.reassure,.channel,.side-card,.office-card,.section-head,.eligibility,.signature,.compare-table,.cform,.info-cards,.icard,.mission-inner,.origin-inner):not(.is-in){
  opacity:0; transform: translateY(38px) scale(.985); filter: blur(9px);
}

/* ===================================================================
   CINEMATIC HERO
   =================================================================== */
.home-hero{ position:relative; overflow:hidden; min-height: 92vh; display:flex; align-items:center; }
.home-hero > .container{ position:relative; z-index:2; }
.hero-aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-aurora span{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.55; }
.hero-aurora .a1{ width:60vw; height:60vw; left:-10vw; top:-20vw; background: radial-gradient(circle, rgba(var(--glow-orange),.5), transparent 65%); animation: auraDrift1 18s var(--ease-in-out) infinite; }
.hero-aurora .a2{ width:48vw; height:48vw; right:-8vw; top:8vw; background: radial-gradient(circle, rgba(var(--glow-teal),.42), transparent 65%); animation: auraDrift2 22s var(--ease-in-out) infinite; }
.hero-aurora .a3{ width:36vw; height:36vw; left:30vw; bottom:-18vw; background: radial-gradient(circle, rgba(80,120,255,.3), transparent 65%); animation: auraDrift1 26s var(--ease-in-out) infinite reverse; }
@keyframes auraDrift1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6%,4%) scale(1.12); } }
@keyframes auraDrift2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-7%,5%) scale(1.1); } }
.home-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.35)); }

/* hero headline line reveal */
.hero-display .ln{ display:block; overflow:hidden; }
.hero-display .ln > span{ display:inline-block; transform: translateY(110%); }
html.tw-anim .home-hero.lit .hero-display .ln > span,
html:not(.tw-anim) .hero-display .ln > span{ animation: lineUp 1.05s var(--ease-cinema) forwards; }
.hero-display .ln:nth-child(1) > span{ animation-delay:.05s; }
.hero-display .ln:nth-child(2) > span{ animation-delay:.16s; }
.hero-display .ln:nth-child(3) > span{ animation-delay:.27s; }
@keyframes lineUp{ to{ transform: none; } }

/* scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color: rgba(255,255,255,.5); font: 500 10px/1 var(--font-mono); letter-spacing:.22em; text-transform:uppercase; }
.scroll-cue i{ width:1px; height:42px; background: linear-gradient(rgba(255,255,255,.6), transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:#fff; animation: cueRun 1.8s var(--ease-in-out) infinite; }
@keyframes cueRun{ 0%{ top:-50%; } 100%{ top:100%; } }

/* ===================================================================
   CODE MARQUEE
   =================================================================== */
.tw-marquee{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background: var(--tw-navy-900); overflow:hidden; padding:22px 0; }
.tw-marquee .track{ display:flex; gap:64px; width:max-content; animation: marquee 32s linear infinite; }
.tw-marquee:hover .track{ animation-play-state: paused; }
.tw-marquee .m{ display:inline-flex; align-items:center; gap:14px; color: rgba(255,255,255,.55); font: 500 15px/1 var(--font-display); white-space:nowrap; }
.tw-marquee .m b{ font: 500 12px/1 var(--font-mono); color: var(--tw-torch-400); letter-spacing:.08em; }
.tw-marquee .m .dot{ width:5px; height:5px; border-radius:50%; background: var(--tw-torch-500); }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* counters keep size stable */
.metric .v, .hstat .v, .wedge-stats .v, .v[data-count]{ font-variant-numeric: tabular-nums; }

/* magnetic wrapper */
.magnetic{ display:inline-block; will-change: transform; transition: transform .4s var(--ease-spring2); }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-aurora span, .tw-marquee .track, .scroll-cue i::after{ animation:none !important; }
  .hero-display .ln > span{ transform:none !important; animation:none !important; }
  html.tw-anim :is(.svc,.col,.vcard,.step,.qcard,.metric,.program-inner,.belief,.fit-card,.section-head,[data-reveal]){ opacity:1 !important; transform:none !important; filter:none !important; }
}

.section.navy > .container, .compare > .container, .home-hero > .container{ position:relative; z-index:2; }

/* inner page-hero aurora */
.page-hero{ position:relative; overflow:hidden; }
.page-hero > .container{ position:relative; z-index:2; }
.page-hero .hero-aurora .a1{ width:42vw; height:42vw; opacity:.4; }
.page-hero .hero-aurora .a2{ width:34vw; height:34vw; opacity:.34; }

/* let the headline line-reveal own the hero h1 (no double animation) */
html.tw-anim .home-hero h1{ animation: none !important; }

/* clip the button sheen sweep to the button */
.btn{ overflow:hidden; }
