/* Axionis landing — light, laser & glow effects */

/* hero aurora — drifting ember/obsidian light field */
.hero__aurora{ position:absolute; inset:-30% -10% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 22% 30%, rgba(255,90,54,.20), transparent 60%),
    radial-gradient(35% 45% at 78% 22%, rgba(255,122,82,.12), transparent 60%),
    radial-gradient(50% 60% at 60% 80%, rgba(255,90,54,.10), transparent 65%);
  filter:blur(20px); animation:aurora 18s ease-in-out infinite alternate; }
@keyframes aurora{
  0%{ transform:translate3d(-2%,-1%,0) scale(1); }
  50%{ transform:translate3d(3%,2%,0) scale(1.08); }
  100%{ transform:translate3d(-1%,3%,0) scale(1.04); }
}

/* faint perspective grid */
.hero__grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--hair-2) 1px,transparent 1px),linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%); }

/* Hero: full-bleed lightning VIDEO, dampened so it's not too bright and copy stays legible */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:url("../img/hero-poster.webp") 62% center / cover no-repeat; }
.hero__video{ width:100%; height:100%; object-fit:cover; object-position:62% center; }
/* minimal overlay: only a soft gradient behind the text (left) for legibility — bolt comes through */
.hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, var(--obsidian) 0%, rgba(14,15,18,.96) 18%, rgba(14,15,18,.66) 38%, rgba(14,15,18,.28) 56%, transparent 74%),
    linear-gradient(180deg, transparent 84%, var(--obsidian) 100%); }

/* faint recognition bolt watermark — fixed in the dark background, behind content */
.bgbolt{ position:fixed; inset:0; z-index:0; pointer-events:none; display:grid; place-items:center; overflow:hidden; }
.bgbolt svg{ height:88vh; width:auto; transform:translateX(20vw); }
.bgbolt path{ fill:var(--ember); opacity:.05; }
/* content sits above the fixed background bolt + cursor glow */
main, .foot{ position:relative; z-index:1; }

/* film grain — subtle premium texture, site-wide */
.grain{ position:fixed; inset:0; z-index:75; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* @keyframes halo retained below — also used by .cta__aurora */
@keyframes halo{ from{ transform:scale(.9); opacity:.6 } to{ transform:scale(1.12); opacity:1 } }

/* cursor-follow ember glow (desktop, positioned by JS) */
.cursorglow{ position:fixed; top:0; left:0; width:520px; height:520px; z-index:0; pointer-events:none;
  margin:-260px 0 0 -260px; border-radius:50%; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle, var(--ember-soft), transparent 60%); mix-blend-mode:screen; }
.is-pointer .cursorglow{ opacity:1; }

/* card light sweep on hover */
.card::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--ember-soft), transparent 45%);
  opacity:0; transition:opacity .5s; }
.card:hover::before,.card:focus-within::before{ opacity:1; }
.card::after{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--ember-line), transparent); opacity:0; transition:opacity .5s; }
.card:hover::after,.card:focus-within::after{ opacity:1; }

/* CTA aurora */
.cta__aurora{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(50% 80% at 50% 120%, rgba(255,90,54,.22), transparent 60%); }

/* ── left-edge scroll-progress rail: gradient fill + a light dot that marks your position ── */
.lightrail{ position:fixed; left:clamp(12px,3.4vw,46px); top:0; bottom:0; width:2px; z-index:40;
  pointer-events:none; background:linear-gradient(180deg,transparent,var(--hair-2) 8%,var(--hair-2) 92%,transparent); }
/* filled portion up to current scroll position */
.lightrail::before{ content:""; position:absolute; top:0; left:0; width:100%; height:var(--p,0%);
  background:linear-gradient(180deg,transparent,var(--ember-line)); }
/* light point that accompanies you at the current position */
.lightrail::after{ content:""; position:absolute; left:50%; top:var(--p,0%); transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:radial-gradient(circle,#fff 10%,var(--ember) 55%,transparent 72%);
  box-shadow:0 0 14px var(--ember-glow); transition:top .12s linear; }

/* ── border-beam: a laser that endlessly runs the edge of an element ── */
@property --beam-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.beam{ position:relative; }
.beam::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--beam-a), transparent 0 64%, var(--ember) 78%, #fff 88%, var(--ember-2) 96%, transparent 100%);
  -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:beamspin 5s linear infinite; filter:drop-shadow(0 0 4px var(--ember-glow)); }
@keyframes beamspin{ to{ --beam-a:360deg } }

/* apply the running edge-laser to the highlighted "third way" card */
.why__col--us{ position:relative; }

@media (prefers-reduced-motion: reduce){
  .beam::before{ display:none !important; }
}