/* =================================================================
   POMFS — 21st.dev-style element upgrades (vanilla port, shared)
   2026-06-25 · linked site-wide, applied via shared CSS + upgrade JS
   -----------------------------------------------------------------
   Selectors are specificity-bumped (span.x / a.x) so they win over
   each page's inline <style> regardless of <link> order.
   Effects:
     1) Hero ambient aurora        (Aurora Background)
     2) Shimmer CTA buttons        (Shimmer Button)
     3) Spotlight / magic cards    (Magic Card)
     4) Border beam on map frame   (Border Beam)
     5) Shimmer headline accents   (Aurora / Shimmer Text)
   ================================================================= */

@property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- 1) Hero ambient aurora (element injected into .hero by upgrade JS) ---- */
.hero-aurora{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.85}
.hero-aurora::before,.hero-aurora::after{content:'';position:absolute;border-radius:50%;filter:blur(64px);will-change:transform}
.hero-aurora::before{width:62vw;height:52vh;left:42%;top:-12%;background:radial-gradient(circle at 50% 50%,rgba(42,216,41,0.50) 0%,rgba(42,216,41,0) 62%);animation:hero-aurora-a 17s ease-in-out infinite alternate}
.hero-aurora::after{width:48vw;height:46vh;left:-10%;top:26%;background:radial-gradient(circle at 50% 50%,rgba(42,216,41,0.34) 0%,rgba(42,216,41,0) 60%);animation:hero-aurora-b 23s ease-in-out infinite alternate}
@keyframes hero-aurora-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-9%,7%) scale(1.18)}}
@keyframes hero-aurora-b{0%{transform:translate(0,0) scale(1)}100%{transform:translate(11%,-9%) scale(1.24)}}

/* ---- 2) Shimmer CTA — periodic light sweep over accent/download buttons ---- */
.btn-accent,.dl-btn{position:relative;overflow:hidden}
.btn-accent::before,.dl-btn::before{content:'';position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0.42) 50%,transparent 100%);transform:translateX(-180%) skewX(-14deg);animation:btn-shimmer 5s ease-in-out infinite;pointer-events:none;z-index:0}
.btn-accent > *,.dl-btn > *{position:relative;z-index:1}
@keyframes btn-shimmer{0%,28%{transform:translateX(-180%) skewX(-14deg)}64%,100%{transform:translateX(320%) skewX(-14deg)}}

/* ---- 3) Spotlight cards — cursor-tracking glow + hued border halo ---- */
.wcard::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--hue) 26%,transparent) 0%,color-mix(in srgb,var(--hue) 9%,transparent) 38%,transparent 64%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:0}
.wcard:hover::before{opacity:1}
.wcard > *{position:relative;z-index:1}
a.wcard:hover,.wcard:hover{border-color:transparent;box-shadow:0 18px 38px rgba(0,0,0,0.08),0 0 0 1.5px color-mix(in srgb,var(--hue) 55%,transparent),0 16px 48px color-mix(in srgb,var(--hue) 28%,transparent)}

/* ---- 4) Border beam — rotating accent light around the map frame ---- */
/* (span.beam-ring injected into .ai-map-wrap by upgrade JS) */
.beam-ring{position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--beam-angle) at 50% 50%,
    transparent 0deg,transparent 232deg,
    color-mix(in srgb,var(--accent) 30%,transparent) 286deg,
    var(--accent) 322deg,#ffffff 340deg,var(--accent) 356deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:beam-spin 5s linear infinite}
@keyframes beam-spin{to{--beam-angle:360deg}}

/* ---- 5) Shimmer headline accents — animated gradient on accent words ---- */
h1 span.g,h2 span.g,h3 span.g,.team-h span.g,.follow-h span.g{
  background:linear-gradient(100deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,#ffffff) 50%,var(--accent) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:shine-x 4.5s linear infinite}
/* hero underlined accent: keep the word, shimmer the underline bar */
.hero h1 span.u{border-bottom-color:transparent !important;position:relative}
.hero h1 span.u::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 45%,#ffffff) 50%,var(--accent) 100%);
  background-size:220% 100%;animation:shine-x 3.2s linear infinite}
@keyframes shine-x{0%{background-position:0% 50%}100%{background-position:220% 50%}}

/* ---- reduced motion: calm everything ---- */
@media (prefers-reduced-motion: reduce){
  .hero-aurora::before,.hero-aurora::after{animation:none}
  .btn-accent::before,.dl-btn::before{animation:none;display:none}
  .beam-ring{animation:none}
  h1 span.g,h2 span.g,h3 span.g,.team-h span.g,.follow-h span.g,.hero h1 span.u::after{animation:none}
}