/* ============================================================================
   SOV Web — WOW Layer v6.0  ·  premium motion + atmosphere + polish
   Non-destructive: hooks onto existing classes, opt-in via [data-reveal],
   fully reduced-motion safe. Loads AFTER sov-polish so it can refine, never break.
   ============================================================================ */

:root{
  --wow-lime:#d7f66f;
  --wow-teal:#83e6c2;
  --wow-gold:#e8c987;
  --wow-blue:#78d7ff;
  --wow-ink:#04080a;
  --wow-glow:0 0 0 1px rgba(255,255,255,.05), 0 30px 90px rgba(0,0,0,.45);
  --wow-ease:cubic-bezier(.22,1,.36,1);
  --wow-ease-soft:cubic-bezier(.4,0,.2,1);
  --wow-display:"Bricolage Grotesque","Inter",ui-sans-serif,system-ui,sans-serif;
}

/* ---- Distinctive display type for big headings (public + cloud heroes) ---- */
.portal-hero h1,
.about-hero-polish h1,.about-hero h1,
.sov-hero h1,.aw-hero h1,.as-hero h1,.cm-hero h1,
.section-head h2,.about-section-title h2,.about-duh h2{
  font-family:var(--wow-display)!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
}
.portal-hero h1{font-weight:800!important;letter-spacing:-.055em!important}

/* ---- Cinematic film-grain + vignette for depth (very subtle) ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ============================================================================
   1. SCROLL PROGRESS BAR  (top of viewport)
   ============================================================================ */
.wow-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9000;pointer-events:none;
  background:linear-gradient(90deg,var(--wow-lime),var(--wow-teal),var(--wow-blue));
  box-shadow:0 0 18px rgba(215,246,111,.55);
  transform-origin:0 50%;transition:width .08s linear;
}

/* ============================================================================
   2. POINTER AURORA  (a soft spotlight that follows the cursor on heroes)
   ============================================================================ */
.wow-aurora{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;
  opacity:0;transition:opacity .6s var(--wow-ease-soft);
}
.wow-aurora.is-live{opacity:1}
.wow-aurora::before{
  content:"";position:absolute;width:46vmax;height:46vmax;border-radius:50%;
  left:var(--wow-x,50%);top:var(--wow-y,40%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(215,246,111,.16),rgba(131,230,194,.08) 38%,transparent 64%);
  filter:blur(8px);transition:left .18s var(--wow-ease-soft),top .18s var(--wow-ease-soft);
}
.portal-hero,.about-hero-polish,.about-hero{position:relative}
.portal-hero .portal-hero-inner,.about-hero-polish>*,.about-hero>*{position:relative;z-index:1}

/* ============================================================================
   3. PAGE-LOAD ORCHESTRATION  (staggered hero entrance)
   ============================================================================ */
.wow-ready .portal-hero .eyebrow,
.wow-ready .portal-hero h1,
.wow-ready .portal-hero .portal-sub,
.wow-ready .portal-hero .hero-actions,
.wow-ready .portal-hero .hero-stats{
  animation:wowRise .9s var(--wow-ease) both;
}
.wow-ready .portal-hero h1{animation-delay:.08s}
.wow-ready .portal-hero .portal-sub{animation-delay:.18s}
.wow-ready .portal-hero .hero-actions{animation-delay:.28s}
.wow-ready .portal-hero .hero-stats{animation-delay:.38s}
@keyframes wowRise{
  from{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ============================================================================
   4. SCROLL REVEAL  (opt-in via [data-reveal]; JS toggles .is-in)
   ============================================================================ */
[data-reveal]{
  opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .7s var(--wow-ease),transform .7s var(--wow-ease);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="left"]{transform:translate3d(-34px,0,0)}
[data-reveal="right"]{transform:translate3d(34px,0,0)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].is-in[data-reveal="zoom"]{transform:none}
/* stagger inside grids */
[data-reveal-stagger] > *{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .6s var(--wow-ease),transform .6s var(--wow-ease);
}
[data-reveal-stagger].is-in > *{opacity:1;transform:none}

/* ============================================================================
   5. PREMIUM CARD INTERACTION  (sheen sweep + lift on the news + link cards)
   ============================================================================ */
.news-featured,.news-side-card,.news-card,.link-card,.quick-inner a,
.contact-card,.about-route-grid a,.about-switchboard a{
  transition:transform .35s var(--wow-ease),border-color .3s var(--wow-ease-soft),box-shadow .35s var(--wow-ease);
}
.news-card::after,.news-featured::after,.news-side-card::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);transition:left .8s var(--wow-ease);pointer-events:none;
}
.news-card:hover::after,.news-featured:hover::after,.news-side-card:hover::after{left:140%}
.news-card:hover,.news-featured:hover,.news-side-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(215,246,111,.18)!important;
  border-color:rgba(215,246,111,.4)!important;
}
.link-card:hover,.contact-card:hover{transform:translateY(-5px)}

/* category meta as a refined pill */
.news-meta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;font-weight:900;
}

/* ============================================================================
   6. MAGNETIC PRIMARY CTAs
   ============================================================================ */
.hero-join,.hero-cloud,.about-hero-actions a:first-child,.expedition-banner-cta{
  transition:transform .25s var(--wow-ease),box-shadow .3s var(--wow-ease),filter .3s ease;
  position:relative;
}
.hero-join:hover,.about-hero-actions a:first-child:hover{
  filter:brightness(1.05);
  box-shadow:0 22px 60px rgba(215,246,111,.4)!important;
}
.hero-join span,.hero-actions a span{display:inline-block;transition:transform .3s var(--wow-ease)}
.hero-join:hover span{transform:translateX(5px)}

/* ============================================================================
   7. HERO STATS STRIP  (count-up numbers — injected by JS on homepage)
   ============================================================================ */
.hero-stats{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;
}
.hero-stat{
  flex:1 1 130px;min-width:120px;padding:16px 18px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(10px);box-shadow:0 16px 50px rgba(0,0,0,.3);
}
.hero-stat b{
  display:block;font-family:var(--wow-display);font-weight:800;
  font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--wow-lime),var(--wow-teal));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-stat span{display:block;margin-top:7px;color:var(--wow-gold);font-size:12px;
  letter-spacing:.04em;font-weight:700;line-height:1.3}

/* ============================================================================
   8. NEWS LOADING SKELETON  (shown while Supabase fetch is in flight)
   ============================================================================ */
.wow-skeleton{display:grid;gap:18px}
.wow-skeleton .sk-lead{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.wow-skeleton .sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:4px}
.sk-box{border-radius:26px;border:1px solid rgba(255,255,255,.08);min-height:220px;
  background:linear-gradient(110deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%);
  background-size:220% 100%;animation:skShimmer 1.4s linear infinite}
.wow-skeleton .sk-lead .sk-box:first-child{min-height:340px}
@keyframes skShimmer{from{background-position:220% 0}to{background-position:-20% 0}}
@media(max-width:820px){.wow-skeleton .sk-lead,.wow-skeleton .sk-grid{grid-template-columns:1fr}}

/* ============================================================================
   9. SECTION HEADERS — animated accent underline
   ============================================================================ */
.section-head h2,.about-section-title h2{position:relative;display:inline-block}
.section-head h2::after,.about-section-title.clean h2::after{
  content:"";position:absolute;left:0;bottom:-10px;height:4px;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--wow-lime),var(--wow-teal));
  transition:width .9s var(--wow-ease) .2s;
}
[data-reveal].is-in .section-head h2::after,
.section-head[data-reveal].is-in h2::after,
.about-block[data-reveal].is-in .about-section-title h2::after{width:64px}
.wow-ready .news-section .section-head h2::after{width:64px} /* homepage shows it once visible */

/* ============================================================================
   10. GLOBAL UX POLISH  (focus, selection, scrollbar, expedition banner)
   ============================================================================ */
:focus-visible{outline:3px solid var(--wow-lime)!important;outline-offset:3px!important;border-radius:8px}
::selection{background:rgba(215,246,111,.32);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(215,246,111,.4) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--wow-lime),var(--wow-teal));border-radius:999px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

.expedition-banner-link img{transition:transform 1.1s var(--wow-ease),filter .5s ease}
.expedition-banner-link:hover img{transform:scale(1.045)}
.expedition-banner-cta{animation:wowPulse 2.6s var(--wow-ease-soft) infinite}
@keyframes wowPulse{0%,100%{box-shadow:0 14px 40px rgba(0,0,0,.32)}50%{box-shadow:0 14px 50px rgba(215,246,111,.45)}}

/* nav links get a clean underline-grow on hover (additive to existing pill bg) */
.navlinks-main>a::before{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;
  background:var(--wow-lime);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--wow-ease);border-radius:2px}
.navlinks-main>a{position:relative}
.navlinks-main>a:hover::before{transform:scaleX(1)}

/* ============================================================================
   11. CLOUD / APP polish — module cards get the same lift + sheen vocabulary
   ============================================================================ */
body.sov-cloud-page .sov-module,body.sov-cloud-page [class*="card"]{
  transition:transform .3s var(--wow-ease),border-color .3s var(--wow-ease-soft),box-shadow .35s var(--wow-ease);
}

/* ============================================================================
   12. REDUCED MOTION — turn off all kinetic flourish, keep visual upgrades
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  .wow-progress,.wow-aurora{display:none!important}
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  .wow-ready .portal-hero *{animation:none!important}
  .news-card::after,.news-featured::after,.news-side-card::after{display:none!important}
  .expedition-banner-cta{animation:none!important}
  .sk-box{animation:none!important}
  .section-head h2::after{transition:none!important;width:64px}
}