/* =====================================================================
   ELEVATE 2026 — progressive-enhancement layer (Pathways to Heal webinar)
   Additive only. Loaded AFTER base styles. Touches no funnel logic.
   Every entrance effect is feature-gated (@supports) and reduced-motion
   aware, so unsupported browsers and motion-sensitive users always see
   full, un-hidden content. Same-origin assets, no CDN.
   ===================================================================== */

:root{
  --ev-ease:cubic-bezier(.16,1,.3,1);          /* expressive "luxury" ease-out */
  --ev-ease-soft:cubic-bezier(.33,.9,.27,1);
  --ev-glow:rgba(212,175,122,.55);
}

/* ---------------------------------------------------------------------
   1. LOGO LOAD TRANSITION  (LCP-safe: overlay only; never replaces hero)
   --------------------------------------------------------------------- */
#ev-loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,#15264a 0%,#0a1430 70%);
  opacity:1;transition:opacity .6s var(--ev-ease),visibility .6s;
  /* HARD FAILSAFE: self-dismiss even if JS never runs, so the page is
     never stuck behind the overlay */
  animation:ev-loader-failsafe 0s linear 2.6s forwards;
}
body.ev-ready #ev-loader{opacity:0;visibility:hidden;pointer-events:none}
@keyframes ev-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.ev-load-inner{position:relative;display:grid;place-items:center;padding:0 24px}
.ev-load-glow{position:absolute;width:130%;height:320%;left:-15%;top:-110%;background:radial-gradient(circle,rgba(212,175,122,.22),transparent 60%);opacity:0;pointer-events:none;animation:ev-bloom 1.5s var(--ev-ease) .1s forwards}
.ev-load-logo{width:min(380px,68vw);height:auto;display:block;position:relative;z-index:1;filter:drop-shadow(0 12px 36px rgba(0,0,0,.5));opacity:0;transform:translateY(10px) scale(.94);animation:ev-logo-in 1s var(--ev-ease) .15s forwards}
.ev-load-rule{position:relative;z-index:1;margin-top:22px;height:2px;width:0;background:linear-gradient(90deg,transparent,var(--gold-light,#D4AF7A),transparent);animation:ev-rule 1s var(--ev-ease) .55s forwards}
@keyframes ev-logo-in{to{opacity:1;transform:none}}
@keyframes ev-bloom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes ev-rule{to{width:min(300px,52vw)}}

/* ---------------------------------------------------------------------
   2. FILM GRAIN  (injected by JS) — premium tactile texture, ~0.045
   --------------------------------------------------------------------- */
#ev-grain{
  position:fixed;inset:-120%;z-index:7;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ev-grain-shift 8s steps(5) infinite;
}
@keyframes ev-grain-shift{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-6%)}
  60%{transform:translate(-4%,6%)}80%{transform:translate(6%,-4%)}100%{transform:translate(0,0)}
}

/* ---------------------------------------------------------------------
   3. CURSOR-AWARE HERO BEAM (injected by JS; desktop pointer only)
   --------------------------------------------------------------------- */
.ev-herobeam{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(420px circle at var(--ev-mx,75%) var(--ev-my,32%),
            rgba(212,175,122,.16),transparent 60%);
}
.hero:hover .ev-herobeam{opacity:1}

/* ---------------------------------------------------------------------
   4. KINETIC GOLD HEADLINE — animated sheen on the italic accent
   --------------------------------------------------------------------- */
.hero h1 em{
  background:linear-gradient(100deg,#D4AF7A 0%,#F1DDB0 38%,#fff 50%,#F1DDB0 62%,#D4AF7A 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:ev-sheen 7s ease-in-out 1.6s infinite;
}
@keyframes ev-sheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}

/* ---------------------------------------------------------------------
   5. MAGNETIC CTA (transform set by JS) + softened press
   --------------------------------------------------------------------- */
.btn-gold{transition:transform .25s var(--ev-ease-soft),box-shadow .25s ease,background .25s ease;will-change:transform}
.btn-gold.ev-mag{transition:transform .12s linear}

/* ---------------------------------------------------------------------
   6. CARD SPOTLIGHT (radial follows cursor; vars set by JS)
   --------------------------------------------------------------------- */
.learn-card,.pillar,.tcard{position:relative}
.learn-card::after,.pillar::after,.tcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--ev-cx,50%) var(--ev-cy,50%),
            rgba(212,175,122,.14),transparent 60%);
}
.learn-card:hover::after,.pillar:hover::after,.tcard:hover::after{opacity:1}

/* ---------------------------------------------------------------------
   7. SCROLL-DRIVEN ENTRANCES — native, off-main-thread, feature-gated.
   Only runs where supported AND motion is allowed; otherwise content is
   simply visible. No JS, no stuck-hidden risk.
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .section-head,.learn-card,.pillar,.tcard,.agenda-row,.reg-list li,.speaker-img{
      animation:ev-rise linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 22%;
    }
    @keyframes ev-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  }
}

/* ---------------------------------------------------------------------
   8. DARK-SECTION AURA — slow drifting glow on the registration band
   --------------------------------------------------------------------- */
.register{position:relative;overflow:hidden}
.register .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .register::after{
    content:"";position:absolute;width:60vw;height:60vw;left:-10vw;top:-20vw;z-index:0;pointer-events:none;
    background:radial-gradient(circle,rgba(70,99,168,.22),transparent 62%);
    animation:ev-drift 22s ease-in-out infinite;
  }
}
@keyframes ev-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,12vw) scale(1.18)}}

/* ---------------------------------------------------------------------
   9. GLASS + DEPTH refinements
   --------------------------------------------------------------------- */
nav{background:rgba(250,248,244,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.form-card{backdrop-filter:saturate(1.1)}
.pillar{transition:transform .35s var(--ev-ease),border-color .35s ease,box-shadow .35s ease}
.pillar:hover{box-shadow:0 26px 60px rgba(3,8,22,.4)}

/* Gold focus ring upgrade (keeps AA, adds polish) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--gold,#C09250);outline-offset:3px;box-shadow:0 0 0 5px rgba(192,146,80,.18)
}

/* Refined scrollbar (desktop) */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:var(--gold,#C09250) transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--gold-light));border-radius:8px;border:3px solid var(--paper,#FAF8F4)}
  ::-webkit-scrollbar-track{background:transparent}
}

/* ---------------------------------------------------------------------
   10. REDUCED-MOTION + SAFETY — kill every elevate animation
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #ev-loader{animation:none;opacity:0;visibility:hidden;pointer-events:none}
  #ev-grain{animation:none}
  .hero h1 em{animation:none}
  .ev-herobeam{display:none}
  .register::after{animation:none}
}
