/* ============ AIOOS — texture & grain layer ============ */

/* ---------- animated film grain (global) ---------- */
.grain{position:fixed; inset:-220px; z-index:80; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='280' height='280' filter='url(%23n)'/></svg>");
  background-size:280px 280px; will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grainJitter .85s steps(8) infinite}
}
@keyframes grainJitter{
  0%{transform:translate(0,0)} 12.5%{transform:translate(-2.4%,1.6%)} 25%{transform:translate(1.8%,-2.2%)}
  37.5%{transform:translate(-1.4%,2.3%)} 50%{transform:translate(2.3%,1.3%)} 62.5%{transform:translate(-2%,-1.7%)}
  75%{transform:translate(1.5%,2.1%)} 87.5%{transform:translate(-2.5%,-.9%)} 100%{transform:translate(0,0)}
}

/* ---------- static grain for dark surfaces ---------- */
.gtex{position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size:240px 240px; opacity:.13; mix-blend-mode:overlay}

/* ---------- aurora drift on hero glows ---------- */
@media (prefers-reduced-motion:no-preference){
  .glow.a{animation:driftA 17s ease-in-out infinite alternate}
  .glow.b{animation:driftB 21s ease-in-out infinite alternate}
  .glow.c{animation:driftC 19s ease-in-out infinite alternate}
}
@keyframes driftA{to{transform:translate(90px,70px) scale(1.18)}}
@keyframes driftB{to{transform:translate(-60px,90px) scale(1.12)}}
@keyframes driftC{to{transform:translate(-80px,-50px) scale(1.22)}}

/* ---------- gradient shimmer on headline accents ---------- */
h1 .g, .h2 .g, .cta-band h2{background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){
  h1 .g, .h2 .g{animation:gradShift 7s ease-in-out infinite}
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- dotted paper texture on tinted sections ---------- */
.section.tint{background:
  radial-gradient(rgba(36,90,180,.05) 1px, transparent 1.3px) 0 0/22px 22px,
  linear-gradient(180deg,#F4F8FD 0%, #EFF4FB 100%)}

/* dark surfaces get a faint top sheen for depth */
.stats, .cta-band, .price.best{isolation:isolate}
.stats .gtex, .cta-band .gtex, .price.best .gtex, .footer .gtex{z-index:0}
.stats > .stat, .cta-band > h2, .cta-band > p, .cta-band > .row{position:relative; z-index:1}