/* ========================================
   Anavix — Parallax & Motion layer
   ========================================
   Loaded after php-site.css on public pages only (admin has its own layout).
   Everything here is decorative: with JS off or reduced motion on, the page
   falls back to the static design underneath. Parallax is driven by CSS
   custom properties that parallax.js writes once per animation frame. */

:root {
  --px-scroll: 0;          /* page scroll progress 0..1 */
  --px-mx: 0;              /* pointer x, -1..1 */
  --px-my: 0;              /* pointer y, -1..1 */
}

/* ---- Scroll progress bar ---- */
.av-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 200; pointer-events: none;
  transform-origin: right center; transform: scaleX(var(--px-scroll));
  background: linear-gradient(270deg, var(--accent), var(--rose), var(--gold));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ---- Header: tightens and gets glassier once the page scrolls ---- */
.av-nav { transition: background .35s var(--ease), box-shadow .35s var(--ease), min-height .35s var(--ease), transform .45s var(--ease); }
.av-header.is-scrolled .av-nav {
  min-height: 60px;
  background: rgba(8,11,19,.66);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(109,92,252,.12);
}
.av-header.is-hidden .av-nav { transform: translateY(-140%); }

/* ---- Parallax scene (hero + interior page titles) ---- */
.av-px-scene {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.av-px-layer {
  position: absolute; inset: 0;
  will-change: transform;
  transform:
    translate3d(
      calc(var(--px-mx) * var(--depth, 0) * -40px),
      calc(var(--px-my) * var(--depth, 0) * -30px + var(--px-y, 0px)),
      0);
}

/* Glowing orbs */
.av-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.av-orb-1 { width: 520px; height: 520px; top: -120px; left: 8%;  background: radial-gradient(circle, rgba(109,92,252,.75), transparent 65%); animation: av-float 14s ease-in-out infinite; }
.av-orb-2 { width: 420px; height: 420px; top: 30%;   right: -80px; background: radial-gradient(circle, rgba(244,114,182,.55), transparent 65%); animation: av-float 17s ease-in-out infinite reverse; }
.av-orb-3 { width: 340px; height: 340px; bottom: -120px; left: 38%; background: radial-gradient(circle, rgba(34,211,238,.4), transparent 65%); animation: av-float 20s ease-in-out infinite; }

/* Perspective grid floor */
.av-px-grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%;
  background-image:
    linear-gradient(rgba(109,92,252,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,92,252,.22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotateX(72deg); transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: av-grid-run 6s linear infinite;
  opacity: .55;
}

/* Lens rings — a camera-aperture nod */
.av-px-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 60px rgba(109,92,252,.08);
}
.av-px-ring::before, .av-px-ring::after {
  content: ''; position: absolute; border-radius: 50%; inset: 14%;
  border: 1px dashed rgba(255,255,255,.07);
}
.av-px-ring::after { inset: 32%; border-style: solid; border-color: rgba(244,114,182,.12); }
.av-px-ring-1 { width: 620px; height: 620px; top: -160px; left: -180px; animation: av-spin-slow 60s linear infinite; }
.av-px-ring-2 { width: 300px; height: 300px; bottom: 6%; right: 6%; animation: av-spin-slow 40s linear infinite reverse; }

/* Floating glass chips with media icons */
.av-px-chip {
  position: absolute; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  color: #fff; font-size: 22px;
  animation: av-bob 7s ease-in-out infinite;
}
.av-px-chip i { opacity: .9; }
.av-px-chip.is-sm { width: 46px; height: 46px; border-radius: 14px; font-size: 16px; }
.av-px-chip.is-gold i { color: var(--gold); }
.av-px-chip.is-rose i { color: var(--rose); }
.av-px-chip.is-cyan i { color: var(--cyan); }
.av-px-chip.is-violet i { color: var(--accent-hover); }

/* Star dust */
.av-px-dust {
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 32% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 58% 34%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 78% 82%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 88% 14%, rgba(251,191,36,.6), transparent),
    radial-gradient(1px 1px at 46% 52%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 6% 88%, rgba(244,114,182,.6), transparent);
  background-size: 520px 520px;
  animation: av-twinkle 5s ease-in-out infinite alternate;
}

/* Hero content drifts up and fades as you scroll past it */
.av-px-content {
  will-change: transform, opacity;
  transform: translate3d(0, var(--px-y, 0px), 0);
  opacity: var(--px-fade, 1);
}

/* Hero title: words rise in one after another */
.av-split-word { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); filter: blur(8px); animation: av-word-in .9s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
.av-hero p, .av-hero .d-flex, .av-hero-feature-stack { animation: av-fade-up 1s var(--ease) both; }
.av-hero p { animation-delay: .55s; }
.av-hero .d-flex { animation-delay: .7s; }
.av-hero-feature-stack { animation-delay: .85s; }

/* Scroll cue */
.av-scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border-radius: 20px; border: 2px solid rgba(255,255,255,.25);
  display: flex; justify-content: center; padding-top: 7px;
}
.av-scroll-cue::before { content: ''; width: 4px; height: 8px; border-radius: 4px; background: #fff; animation: av-cue 1.8s ease-in-out infinite; }

/* Generic scroll-speed elements (decor that drifts against the scroll) */
[data-px-speed]:not(.av-px-layer) { will-change: transform; transform: translate3d(0, var(--px-y, 0px), 0); }

/* Words inside the gradient phrase each carry the gradient themselves,
   because background-clip:text does not paint through transformed children. */
.av-gradient-text .av-split-word {
  background: linear-gradient(135deg, var(--accent-hover), var(--rose), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Page-leave fade (lets the click sound finish before navigating) */
.av-site-wrapper { transition: opacity .22s ease, filter .22s ease; }
body.av-leaving .av-site-wrapper { opacity: 0; filter: blur(6px); }
body { animation: av-page-in .6s var(--ease) both; }
@keyframes av-page-in { from { opacity: 0; } to { opacity: 1; } }
.av-big-number[data-px-speed] { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06); }

/* ---- Kinetic marquee band ---- */
.av-marquee { position: relative; padding: 40px 0; overflow: hidden; }
.av-marquee-row {
  display: flex; gap: 48px; white-space: nowrap; will-change: transform;
  font-size: clamp(42px, 7vw, 104px); font-weight: 900; line-height: 1.15; letter-spacing: -.03em;
}
.av-marquee-row span { display: inline-flex; align-items: center; gap: 48px; }
.av-marquee-row span::after { content: '✦'; font-size: .35em; color: var(--gold); }
.av-marquee-row.is-solid { color: #fff; transform: translate3d(calc(var(--px-x, 0px)), 0, 0); }
.av-marquee-row.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22); transform: translate3d(calc(var(--px-x, 0px)), 0, 0); }
.av-marquee-row.is-solid span:nth-child(odd) { background: linear-gradient(135deg, var(--accent-hover), var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Fade the band's edges with a mask so it blends into any background. */
.av-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

/* ---- Reveal upgrades: blur + scale in ---- */
.av-reveal { filter: blur(6px); transform: translateY(48px) scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.av-reveal.av-revealed { filter: none; transform: none; }

/* ---- 3D tilt cards ---- */
.av-tilt {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .35s, box-shadow .35s !important;
}
.av-tilt.is-tilting {
  transition: transform .12s linear, border-color .35s, box-shadow .35s !important;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important;
}
.av-tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.1), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.av-tilt.is-tilting::after { opacity: 1; }
.av-card.av-tilt, .av-stat.av-tilt, .av-team-card.av-tilt, .av-contact-card.av-tilt { position: relative; }

/* ---- Magnetic buttons ---- */
.av-btn.av-magnetic { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
.av-btn.av-magnetic:hover { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0); }
.av-btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.av-btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.av-btn-primary:hover::before { transform: translateX(120%); }

/* Click ripple */
.av-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: rgba(255,255,255,.45); animation: av-ripple .7s var(--ease) forwards;
}

/* ---- Cursor glow (fine pointers only) ---- */
.av-cursor-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.av-cursor-glow {
  position: absolute; top: 0; left: 0; pointer-events: none;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(109,92,252,.13), transparent 60%);
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
  transition: opacity .4s; mix-blend-mode: screen;
}
.av-cursor-dot {
  position: absolute; top: 0; left: 0; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  transform: translate3d(var(--dx, -999px), var(--dy, -999px), 0) scale(var(--ds, 1));
  transition: transform .18s var(--ease), border-color .25s, background .25s, width .25s, height .25s;
  mix-blend-mode: difference;
}
.av-cursor-dot.is-hover { --ds: 1.8; border-color: transparent; background: rgba(255,255,255,.9); }

/* ---- Sound toggle ---- */
.av-sound-toggle {
  position: fixed; left: 22px; bottom: 80px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: #fff; border: 1px solid var(--border-strong);
  cursor: pointer; transition: all .25s var(--ease); font-size: 15px;
}
.av-sound-toggle:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.av-sound-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.av-sound-bars i { display: block; width: 3px; border-radius: 2px; background: currentColor; height: 4px; transition: height .2s; }
.av-sound-toggle[aria-pressed="true"] .av-sound-bars i { animation: av-eq .9s ease-in-out infinite; }
.av-sound-toggle[aria-pressed="true"] .av-sound-bars i:nth-child(2) { animation-delay: .2s; }
.av-sound-toggle[aria-pressed="true"] .av-sound-bars i:nth-child(3) { animation-delay: .4s; }
.av-sound-toggle[aria-pressed="true"] .av-sound-bars i:nth-child(4) { animation-delay: .1s; }
.av-sound-toggle[aria-pressed="false"] { opacity: .7; }
.av-sound-toggle[aria-pressed="false"] .av-sound-bars { position: relative; }
.av-sound-toggle[aria-pressed="false"] .av-sound-bars::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px;
  background: var(--rose); transform: rotate(-35deg);
}

/* ---- Interior page title: give it depth too ---- */
.av-page-title { min-height: 52vh; display: flex; align-items: flex-end; }
.av-page-title .av-orb { opacity: .4; }

/* ---- Inertia scrolling: JS eases the wheel, so CSS smoothing must step aside ---- */
html.av-smooth { scroll-behavior: auto; }

/* ---- Hero fly-through: the scene pushes towards you as you scroll ---- */
.av-hero .av-px-scene,
.av-page-title .av-px-scene { transform: scale(calc(1 + var(--px-hero, 0) * .35)); transform-origin: 50% 35%; }
.av-hero .av-px-float {
  transform:
    perspective(900px)
    translate3d(calc(var(--px-mx) * var(--depth, 0) * -40px), calc(var(--px-my) * var(--depth, 0) * -30px), 0)
    rotateX(calc(var(--px-hero, 0) * 30deg))
    rotateY(calc(var(--px-mx) * -6deg));
  transform-origin: 50% 0;
}

/* ---- Section ambient orbs, drifting against the scroll ---- */
.av-section::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; border-radius: 50%; top: 12%; left: -220px;
  background: radial-gradient(circle, rgba(109,92,252,.1), transparent 62%);
  transform: translate3d(0, var(--px-sec, 0px), 0);
  will-change: transform;
}
.av-section:nth-of-type(even)::after {
  left: auto; right: -220px;
  background: radial-gradient(circle, rgba(244,114,182,.075), transparent 62%);
}

/* ---- Photos drift inside their frames ---- */
.av-team-photo img[data-px-speed],
.av-media-frame img[data-px-speed] {
  transform: translate3d(0, var(--px-y, 0px), 0) scale(1.18);
  transition: transform .25s ease-out;
}
.av-team-card:hover .av-team-photo img[data-px-speed],
.av-media-frame:hover img[data-px-speed] { transform: translate3d(0, var(--px-y, 0px), 0) scale(1.25); }

/* ---- Section headings: words rise once the heading is revealed ---- */
.av-reveal:not(.av-revealed) .av-split-word { animation-play-state: paused; }
.av-section-heading .av-split-word { animation-duration: .8s; }

/* ---- Manifesto: pinned while its words light up ---- */
.av-manifesto { position: relative; height: 240vh; }
.av-manifesto-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.av-manifesto-sticky .container { position: relative; z-index: 2; }
.av-manifesto-label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: .12em;
}
.av-manifesto-label::before { content: ''; width: 40px; height: 2px; background: var(--gold); }
.av-manifesto-text {
  margin: 0; max-width: 1120px;
  font-size: clamp(28px, 4.3vw, 64px); font-weight: 800; line-height: 1.4; letter-spacing: -.02em;
}
.av-sw { color: rgba(255,255,255,.1); transition: color .45s var(--ease), text-shadow .45s var(--ease); }
.av-sw.is-lit { color: #fff; text-shadow: 0 0 42px rgba(109,92,252,.35); }
.av-sw.is-lit:nth-child(7n+4) { color: var(--gold); text-shadow: 0 0 42px var(--gold-glow); }
.av-sw.is-lit:nth-child(9n+6) { color: var(--rose); text-shadow: 0 0 42px var(--rose-glow); }
.av-manifesto-bg {
  position: absolute; top: 50%; left: 50%; z-index: 0; pointer-events: none; user-select: none;
  font-size: 30vw; font-weight: 900; line-height: 1; white-space: nowrap; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08);
  transform: translate(calc(-50% + (var(--mp, 0) - .5) * 40vw), -50%);
}
.av-manifesto-ring {
  position: absolute; z-index: 1; width: 70vmin; height: 70vmin; top: 50%; left: 50%; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.08); pointer-events: none;
  transform: translate(-50%, -50%) rotate(calc(var(--mp, 0) * 220deg)) scale(calc(.7 + var(--mp, 0) * .6));
  box-shadow: inset 0 0 120px rgba(109,92,252,.12), 0 0 120px rgba(109,92,252,.08);
}
.av-manifesto-ring::before {
  content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 20px var(--gold);
}
.av-manifesto-bar {
  position: absolute; bottom: 48px; left: 50%; width: min(320px, 60vw); height: 2px; z-index: 2;
  transform: translateX(-50%); background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
}
.av-manifesto-bar::after {
  content: ''; position: absolute; inset: 0; transform-origin: right; transform: scaleX(var(--mp, 0));
  background: linear-gradient(270deg, var(--accent), var(--rose), var(--gold));
}
@media (max-width: 991px) {
  .av-manifesto { height: 200vh; }
  .av-manifesto-sticky { height: 100svh; }
}

/* ---- Keyframes ---- */
@keyframes av-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-40px); } }
@keyframes av-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes av-spin-slow { to { transform: rotate(360deg); } }
@keyframes av-grid-run { to { background-position: 0 64px, 0 0; } }
@keyframes av-twinkle { from { opacity: .35; } to { opacity: .8; } }
@keyframes av-word-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes av-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes av-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes av-ripple { to { transform: scale(40); opacity: 0; } }
@keyframes av-eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* ---- Small screens: fewer, lighter layers ---- */
@media (max-width: 991px) {
  .av-px-chip { display: none; }
  .av-px-chip.is-keep { display: grid; width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
  .av-orb { filter: blur(40px); }
  .av-orb-1 { width: 320px; height: 320px; }
  .av-orb-2 { width: 260px; height: 260px; }
  .av-orb-3 { display: none; }
  .av-px-ring-1 { width: 380px; height: 380px; }
  .av-px-ring-2 { display: none; }
  .av-scroll-cue { display: none; }
  .av-marquee { padding: 24px 0; }
  .av-marquee-row, .av-marquee-row span { gap: 24px; }
  .av-page-title { min-height: 0; }
  .av-sound-toggle { left: 14px; bottom: 136px; width: 44px; height: 44px; }
}
@media (min-width: 992px) {
  .av-sound-toggle { bottom: 80px; }
}

/* ---- Reduced motion: keep the look, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .av-px-layer, .av-px-content, [data-px-speed], .av-marquee-row { transform: none !important; opacity: 1 !important; }
  .av-orb, .av-px-grid, .av-px-ring, .av-px-chip, .av-px-dust, .av-scroll-cue::before,
  .av-sound-toggle .av-sound-bars i { animation: none !important; }
  .av-split-word, .av-hero p, .av-hero .d-flex, .av-hero-feature-stack { animation: none !important; opacity: 1; transform: none; filter: none; }
  .av-reveal { filter: none; transform: none; transition: opacity .4s; }
  .av-cursor-layer { display: none; }
  .av-manifesto { height: auto; }
  .av-manifesto-sticky { position: relative; height: auto; padding: 120px 0; }
  .av-manifesto-bg, .av-manifesto-ring, .av-hero .av-px-scene, .av-page-title .av-px-scene, .av-section::after { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Pointer-only drift for foreground pieces (no scroll component) */
.av-px-float {
  will-change: transform;
  transform: translate3d(calc(var(--px-mx) * var(--depth, 0) * -40px), calc(var(--px-my) * var(--depth, 0) * -30px), 0);
}
@media (prefers-reduced-motion: reduce) { .av-px-float { transform: none !important; } }