/* ==========================================================================
   BNA WORLDWIDE — MOTION SYSTEM
   Reveal primitives driven by IntersectionObserver (class toggling) and
   GSAP ScrollTrigger (inline/scoped). Kept declarative so any element can
   opt in via data-reveal attributes.
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transition:opacity 1.1s var(--ease-premium), transform 1.1s var(--ease-premium), filter 1.1s var(--ease-premium);
  will-change:transform, opacity;
}
[data-reveal="up"]{ transform:translateY(48px); }
[data-reveal="up-sm"]{ transform:translateY(22px); }
[data-reveal="down"]{ transform:translateY(-32px); }
[data-reveal="left"]{ transform:translateX(-48px); }
[data-reveal="right"]{ transform:translateX(48px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="blur"]{ filter:blur(14px); transform:translateY(18px); }
[data-reveal="mask"]{ transform:translateY(100%); }

[data-reveal].is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* stagger via CSS custom property set by JS on children */
[data-reveal-group] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* mask-reveal container (overflow hidden wrapper) */
.mask{ overflow:hidden; display:block; }

/* Split-text word reveal — words flow inline and wrap normally; each word
   masks its own translateY reveal via the inner span. */
.split-line{ overflow:hidden; display:inline-block; vertical-align:top; padding-bottom:0.22em; margin-bottom:-0.22em; }
.split-line > span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s var(--ease-premium);
  transition-delay:calc(var(--i,0) * 60ms);
}
.split-line.is-visible > span{ transform:translateY(0); }

/* ---- Cursor ---- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:var(--z-cursor);
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px; height:6px; border-radius:50%; background:#fff;
  transition:opacity .2s;
}
.cursor-ring{
  width:38px; height:38px; border-radius:50%; border:1px solid #fff;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), opacity .2s, border-color .3s, background .3s;
  opacity:.7;
  display:flex; align-items:center; justify-content:center;
}
.cursor-ring.is-active{ width:64px; height:64px; opacity:1; }
.cursor-ring.is-hidden, .cursor-dot.is-hidden{ opacity:0; }
.cursor-ring.is-labelled{
  width:80px; height:80px; background:#fff; mix-blend-mode:normal; border-color:transparent;
}
.cursor-ring.is-labelled .cursor-label{ color:var(--navy-900); }
.cursor-label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .2s var(--ease-out);
  white-space:nowrap;
}
.cursor-ring.is-labelled .cursor-label{ opacity:1; }
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ---- Cursor spotlight (radial light following pointer within a section) ---- */
.spotlight{
  position:relative;
  isolation:isolate;
}
.spotlight::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%), var(--glow-sky), transparent 70%);
  opacity:0;
  transition:opacity .5s var(--ease-out);
  pointer-events:none;
  z-index:0;
}
.spotlight:hover::before{ opacity:.16; }

/* ---- Marquee (logo ecosystem) ---- */
.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:flex; align-items:center; gap:clamp(3rem,6vw,6rem);
  animation:marquee 42s linear infinite;
  padding-inline:3rem;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track.reverse{ animation-direction:reverse; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---- Magnetic button wrapper ---- */
.magnetic{ transition:transform .25s var(--ease-out); }

/* ---- Loader ---- */
.loader{
  position:fixed; inset:0; z-index:var(--z-loader);
  background:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.75rem;
  transition:transform 1.05s var(--ease-premium) .1s, visibility 0s 1.15s;
}
.loader.is-done{ transform:translateY(-101%); }
.loader-mark{ width:52px; height:52px; opacity:0; animation:loaderFade .9s var(--ease-out) forwards .15s; }
.loader-bar{ width:200px; height:1px; background:var(--line-on-dark); position:relative; overflow:hidden; }
.loader-bar::before{
  content:''; position:absolute; inset:0; left:0; width:var(--pct,0%); background:var(--sky-500);
  transition:width .25s var(--ease-out);
}
.loader-pct{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
.loader-pct::after{ content:'%'; margin-left:1px; }

/* ---- Glow / light rays ---- */
.light-rays{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.light-rays::before{
  content:'';
  position:absolute; top:-20%; left:50%; width:140%; height:140%;
  transform:translateX(-50%);
  background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(79,184,234,.10) 12deg, transparent 28deg, transparent 360deg);
  animation:raysDrift 24s linear infinite;
}
@keyframes raysDrift{
  from{ transform:translateX(-50%) rotate(0deg); }
  to{ transform:translateX(-50%) rotate(360deg); }
}

/* ---- Floating particles ---- */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particles span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--sky-400); opacity:.5;
  animation:floatY linear infinite;
}
@keyframes floatY{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-120vh); opacity:0; }
}

/* ---- Counter ---- */
.count{ font-variant-numeric:tabular-nums; }

/* ---- Image reveal (clip-path sweep) ---- */
.img-reveal{ position:relative; overflow:hidden; }
.img-reveal img,.img-reveal video{
  transform:scale(1.12);
  transition:transform 1.6s var(--ease-premium);
}
.img-reveal.is-visible img,.img-reveal.is-visible video{ transform:scale(1); }
.img-reveal::after{
  content:''; position:absolute; inset:0; background:var(--paper);
  transform-origin:left;
  transition:transform 1s var(--ease-premium);
}
.img-reveal.is-visible::after{ transform:scaleX(0); }
.img-reveal.is-visible:hover img,.img-reveal.is-visible:hover video{ transform:scale(1.045); }

/* ---- Hover lift for generic interactive blocks ---- */
.hover-lift{ transition:transform .5s var(--ease-premium); }
.hover-lift:hover{ transform:translateY(-4px); }

/* ---- Scroll progress bar ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; background:var(--sky-500);
  z-index:calc(var(--z-nav) + 1); width:0%;
  transition:width .1s linear;
}

/* ---- Page transition overlay (injected by main.js, no markup needed per-page) ---- */
.page-transition{
  position:fixed; inset:0; z-index:var(--z-transition);
  background:var(--navy-900);
  transform:translateY(101%);
  pointer-events:none;
}
.page-transition.is-covering{
  transform:translateY(0%);
  transition:transform .6s var(--ease-inout);
}
.page-transition.is-leaving{
  transform:translateY(-101%);
  transition:transform .7s var(--ease-premium);
}
.page-transition-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; opacity:0;
  transition:opacity .3s var(--ease-out) .25s;
}
.page-transition.is-covering .page-transition-mark{ opacity:.9; }

/* ---- Tilt-ready cards receive a subtle ambient sheen on hover ---- */
.card{ background-image:linear-gradient(155deg, rgba(255,255,255,0) 40%, rgba(79,184,234,.05) 100%); background-repeat:no-repeat; }

/* ---- Section top-edge depth seam — subtle separation between stacked sections ---- */
/* Scoped to .section (already position:relative in base.css) to avoid mispositioning
   on third-party section classes that may not establish their own containing block. */
.section{ position:relative; }
.section::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  pointer-events:none;
}
.bg-white.section::before, .bg-paper.section::before{
  background:linear-gradient(90deg, transparent, rgba(13,18,32,.05), transparent);
}