/* =========================================================
   NetGenX: Cinematic Motion Layer
   Smooth-scroll + GSAP-driven parallax, pinned sequences,
   kinetic typography, aurora, marquee, tilt, spotlight.
   Progressive enhancement: degrades to the base experience.
   ========================================================= */

/* When smooth scroll (Lenis) is active, disable native CSS smooth so
   the JS engine owns the motion, and prevent scroll anchoring jumps. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 1500; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan) 60%, var(--accent-teal));
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.7);
  pointer-events: none;
}

/* ---------- Animated aurora background ---------- */
/* Re-skin the ambient layer with slow drifting light. */
body::before {
  background:
    radial-gradient(46% 38% at var(--a1x, 78%) var(--a1y, 6%), rgba(14, 165, 233, 0.16), transparent 60%),
    radial-gradient(54% 46% at var(--a2x, 12%) var(--a2y, 16%), rgba(37, 99, 235, 0.18), transparent 62%),
    radial-gradient(60% 60% at 50% 120%, rgba(16, 185, 129, 0.07), transparent 60%),
    linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-primary-2) 100%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { --a1x: 78%; --a1y: 4%;  --a2x: 10%; --a2y: 14%; }
  50%  { --a1x: 64%; --a1y: 16%; --a2x: 26%; --a2y: 4%;  }
  100% { --a1x: 86%; --a1y: 10%; --a2x: 6%;  --a2y: 22%; }
}
/* register the custom props so they animate (where supported) */
@property --a1x { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --a1y { syntax: '<percentage>'; inherits: false; initial-value: 6%; }
@property --a2x { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --a2y { syntax: '<percentage>'; inherits: false; initial-value: 16%; }

/* Slow-rotating conic glow blob (injected element) */
.fx-aurora {
  position: fixed; inset: -30vmax; z-index: -2; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(37, 99, 235,0.0) 0deg, rgba(14, 165, 233,0.10) 70deg,
    rgba(37, 99, 235,0.0) 150deg, rgba(16, 185, 129,0.06) 240deg, rgba(37, 99, 235,0.0) 360deg);
  filter: blur(60px);
  animation: auroraSpin 40s linear infinite;
  opacity: 0.8;
}
@keyframes auroraSpin { to { transform: rotate(360deg); } }

/* Film grain overlay */
.fx-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
  animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); } 50% { transform: translate(-4px,3px); } 100% { transform: translate(3px,-2px); }
}

/* ---------- Hero kinetic enhancements ---------- */
.hero h1 { position: relative; }
/* gradient shimmer sweep across headline */
.hero h1::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0); /* clip to text box only visually subtle */
  mix-blend-mode: overlay; opacity: 0; animation: shimmer 6s ease-in-out 1.4s infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 160% 0; opacity: 0; }
  35% { opacity: .6; } 50% { background-position: -60% 0; } 65% { opacity: 0; }
}

/* parallax helper: smooth transforms applied by JS */
[data-parallax], [data-speed] { will-change: transform; }
/* when GSAP parallax owns the glyph transform, drop the CSS float so they don't fight */
.cine-on .hero-glyph { animation: none; }

/* ---------- Infinite marquee ---------- */
.marquee-section { padding-block: clamp(18px, 2.4vw, 34px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; background: rgba(255,255,255,0.012); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-right: clamp(20px, 3vw, 48px); white-space: nowrap; will-change: transform; animation: marqueeMove 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(148,163,184,0.45); text-transform: uppercase; transition: color .4s var(--ease-out), -webkit-text-stroke-color .4s var(--ease-out); }
.marquee-item:hover { color: #fff; -webkit-text-stroke-color: transparent; }
.marquee-sep { width: 12px; height: 12px; flex: none; transform: rotate(45deg); background: var(--grad-accent); border-radius: 3px; box-shadow: var(--glow-cyan); }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ---------- Pinned horizontal "Pillars" gallery ---------- */
.pillars-section { padding-bottom: 0; }
.pillars { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.pillars::-webkit-scrollbar { display: none; }
.pillars.is-pinned { overflow: hidden; }
.pillars-track { display: flex; gap: clamp(18px, 2vw, 28px); padding: 10px clamp(20px, 5vw, 48px) 40px; width: max-content; }
.pillar {
  position: relative; flex: 0 0 clamp(300px, 38vw, 460px); min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: 34px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 20% 0%, rgba(37, 99, 235,0.16), transparent 55%); opacity: .6; }
.pillar:hover { border-color: var(--border-accent); box-shadow: var(--glow-card), var(--shadow-card); }
.pillar .p-num { position: absolute; top: 24px; right: 28px; font-family: var(--font-mono); font-weight: 700; font-size: clamp(56px, 7vw, 96px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(14, 165, 233,0.35); opacity: .5; }
.pillar .icon-tile { width: 64px; height: 64px; }
.pillar .icon-tile svg { width: 32px; height: 32px; }
.pillar h3 { font-size: clamp(22px, 2.2vw, 30px); }
.pillar p { color: var(--text-secondary); font-size: 15.5px; }
.pillar .link-arrow { margin-top: 6px; }
.pillars-progress { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.pillars-progress span { width: 30px; height: 3px; border-radius: 3px; background: var(--border-strong); transition: background var(--dur) var(--ease-out); }
.pillars-hint { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-top: 14px; }
.pillars-hint svg { width: 16px; height: 16px; color: var(--accent-cyan); }

/* ---------- Pinned scrubbing manifesto ---------- */
.manifesto { min-height: 100vh; display: grid; place-items: center; text-align: center; position: relative; }
.manifesto .container { position: relative; z-index: 1; }
.manifesto-text { font-size: clamp(30px, 5.4vw, 76px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; margin: 22px auto 0; }
.manifesto-text .w { display: inline-block; transition: opacity .2s linear, filter .2s linear; }
.manifesto.is-scrub .w { opacity: 0.12; filter: blur(0.4px); }
.manifesto-text .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.manifesto-sub { margin-top: 28px; font-size: var(--text-body-lg); color: var(--text-secondary); }

/* ---------- 3D tilt + spotlight cards ---------- */
[data-tilt], .tilt-on .card, .tilt-on .pillar {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transform-style: preserve-3d; transition: transform .25s var(--ease-out);
}
.card.spot::after, .pillar.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(14, 165, 233,0.16), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease-out); z-index: 0;
}
.card.spot:hover::after, .pillar.spot:hover::after { opacity: 1; }
.card.spot > *, .pillar.spot > * { position: relative; z-index: 1; }

/* magnetic buttons get a smoother transition */
[data-magnetic], .btn.btn-primary { will-change: transform; }

/* ---------- Reveal upgrade (more dramatic, used by base reveals) ---------- */
.reveal, .reveal-l, .reveal-r, .reveal-scale { transition-duration: 1s; }
.reveal { transform: translateY(42px); }
.reveal-l { transform: translateX(-60px); }
.reveal-r { transform: translateX(60px); }

/* clip-wipe reveal for headings */
.reveal-clip { clip-path: inset(0 100% 0 0); opacity: 1; transition: clip-path 1.1s var(--ease-out); }
.reveal-clip.in-view { clip-path: inset(0 0 0 0); }

/* ---------- Reduced motion: shut the cinematic layer down ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .fx-aurora, .fx-grain, .hero h1::after { display: none; }
  .marquee-track { animation: none; }
  .manifesto { min-height: auto; padding-block: var(--section-gap); }
  .manifesto.is-scrub .w, .manifesto-text .w { opacity: 1 !important; filter: none !important; }
  .scroll-progress { display: none; }
  [data-tilt], .tilt-on .card, .tilt-on .pillar { transform: none !important; }
}

/* tablet & smaller: pinned sequences fall back to native horizontal/vertical scroll */
@media (max-width: 1024px) {
  .pillars { scroll-snap-type: x mandatory; }
  .pillar { scroll-snap-align: center; min-height: 400px; }
  .manifesto { min-height: auto; padding-block: var(--section-gap); }
  .manifesto.is-scrub .w { opacity: 1; filter: none; }
}

/* =========================================================
   LIGHT THEME OVERRIDES + EXTRA MOTION (professional)
   ========================================================= */
@property --bd { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* gentle animated aurora washes on white (authoritative body::before) */
body::before {
  background:
    radial-gradient(40% 32% at var(--a1x, 86%) var(--a1y, -2%), rgba(14,165,233,0.12), transparent 62%),
    radial-gradient(46% 36% at var(--a2x, 4%) var(--a2y, 4%), rgba(37,99,235,0.10), transparent 64%),
    radial-gradient(55% 50% at 50% 116%, rgba(16,185,129,0.05), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #EFF4FB 100%);
}
.fx-aurora { opacity: 0.5; filter: blur(70px); }
.fx-grain { display: none; }               /* keep it crisp & professional */
.hero h1::after { display: none; }          /* drop the dark-mode shimmer */

/* flowing gradient on highlighted text */
.text-grad, .stat .num, .manifesto-text .grad {
  background-size: 220% 100%;
  animation: gradFlow 9s ease-in-out infinite;
}
@keyframes gradFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* animated glowing border on cards (subtle at rest, alive on hover) */
.card::before {
  background: conic-gradient(from var(--bd), transparent 0%, rgba(14,165,233,0.55) 22%, rgba(37,99,235,0.55) 48%, transparent 70%);
  opacity: 0;
}
.card:hover::before { opacity: 1; animation: bdSpin 4.5s linear infinite; }
@keyframes bdSpin { to { --bd: 360deg; } }

/* sheen sweep across primary buttons on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,0.55) 50%, transparent 68%);
  background-size: 250% 100%; background-position: 160% 0; opacity: 0;
}
.btn-primary:hover::after { opacity: 1; animation: sheen 0.9s var(--ease-out); }
@keyframes sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* soft morphing hero orb behind the headline */
.hero-orb {
  position: absolute; z-index: 1; left: 52%; top: 38%; transform: translate(-50%, -50%);
  width: 58vmax; height: 58vmax; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(37,99,235,0.16), rgba(14,165,233,0.08) 42%, transparent 70%);
  filter: blur(46px);
  border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
  animation: orbMorph 16s var(--ease-in-out) infinite;
}
@keyframes orbMorph {
  0%,100% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; transform: translate(-50%,-50%) rotate(0deg) scale(1); }
  50%     { border-radius: 58% 42% 45% 55% / 55% 60% 40% 45%; transform: translate(-53%,-47%) rotate(18deg) scale(1.08); }
}

/* marquee on light (stronger outline so the ghost text stays legible) */
.marquee-item { -webkit-text-stroke: 1px rgba(37,99,235,0.7); }
.marquee-item:hover { color: var(--text-primary); -webkit-text-stroke-color: transparent; }

/* blur-in reveal for extra polish */
.reveal { filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
.reveal.in-view { filter: blur(0); }

/* pillar on light: soft tinted top glow */
.pillar::before { background: radial-gradient(120% 80% at 20% 0%, rgba(37,99,235,0.10), transparent 55%); }
.pillar .p-num { -webkit-text-stroke: 1px rgba(37,99,235,0.55); opacity: 0.9; }
/* manifesto dimmed words: lift the floor so they read as soft gray, not near-white */
.manifesto.is-scrub .w { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  .text-grad, .stat .num, .manifesto-text .grad, .hero-orb, .card:hover::before, .btn-primary:hover::after { animation: none; }
  .reveal { filter: none; }
}

/* ---------- Animated hero logo mark ---------- */
.hero-logo {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: clamp(260px, 33vw, 540px); height: auto; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 24px 60px rgba(37, 99, 235, 0.26));
  animation: heroLogoFloat 9s var(--ease-in-out) infinite;
}
@keyframes heroLogoFloat { 0%,100% { transform: translateY(-52%); } 50% { transform: translateY(-46%); } }
/* hide the large hero mark where it would crowd the headline (tablet/mobile) */
@media (max-width: 1080px) { .hero-logo { display: none; } }

/* ---------- Nav logo hover: the mark spins + glows (name untouched) ---------- */
.brand img { transition: transform 0.7s var(--ease-out), filter 0.4s var(--ease-out); }
.brand:hover img { transform: rotate(120deg) scale(1.08); filter: drop-shadow(0 6px 14px rgba(37,99,235,0.5)); }

@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
  .brand:hover img { transform: none; }
}

/* ---------- Calm gradient-mesh hero background (replaces flow-field) ---------- */
.hero-mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-mesh .blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
.hero-mesh .b1 { width: 48vmax; height: 48vmax; left: -8%; top: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(37,99,235,0.22), transparent 62%);
  animation: meshDrift1 30s var(--ease-in-out) infinite; }
.hero-mesh .b2 { width: 54vmax; height: 54vmax; right: -10%; top: 2%;
  background: radial-gradient(circle at 50% 50%, rgba(14,165,233,0.20), transparent 62%);
  animation: meshDrift2 38s var(--ease-in-out) infinite; }
.hero-mesh .b3 { width: 42vmax; height: 42vmax; left: 28%; bottom: -22%;
  background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.14), transparent 62%);
  animation: meshDrift3 44s var(--ease-in-out) infinite; }
@keyframes meshDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(9%,7%) scale(1.12); } }
@keyframes meshDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8%,9%) scale(1.1); } }
@keyframes meshDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%,-7%) scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .hero-mesh .blob { animation: none; } }