/* ============================================================
   fx.css — interactive layer
   Lenis smooth-scroll styles, scroll progress, marquee,
   reveal variants, tilt + magnetic micro-interactions, parallax.
   Built to layer on top of styles.css (uses the same tokens).
   ============================================================ */

/* ---------- Lenis smooth-scroll required styles ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);z-index:70;pointer-events:none;
  box-shadow:0 0 12px rgba(255,27,141,.5);
}

/* ---------- scroll reveal variants ---------- */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:transform,opacity}
.reveal[data-fx="left"]{transform:translateX(-46px)}
.reveal[data-fx="right"]{transform:translateX(46px)}
.reveal[data-fx="scale"]{transform:scale(.9)}
.reveal[data-fx="blur"]{filter:blur(14px)}
/* .in MUST win over the directional rules above — match their specificity
   AND come later in the source so the reset always applies. */
.reveal.in,
.reveal[data-fx="left"].in,
.reveal[data-fx="right"].in,
.reveal[data-fx="scale"].in{opacity:1;transform:none}
.reveal[data-fx="blur"].in{filter:blur(0)}

/* stagger children of a container with .stagger */
.stagger > *{opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.22s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(6){transition-delay:.34s}
.stagger.in > *:nth-child(7){transition-delay:.40s}
.stagger.in > *:nth-child(8){transition-delay:.46s}

/* ---------- hero word reveal ---------- */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word > span{display:inline-block;transform:translateY(110%);
  animation:wordUp .8s var(--ease) forwards}
@keyframes wordUp{to{transform:translateY(0)}}

/* fade-in-up entrance used on hero pieces */
.enter{opacity:0;transform:translateY(24px);animation:enterUp .8s var(--ease) forwards}
@keyframes enterUp{to{opacity:1;transform:none}}
.enter.d1{animation-delay:.15s}
.enter.d2{animation-delay:.3s}
.enter.d3{animation-delay:.45s}
.enter.d4{animation-delay:.6s}

/* ---------- 3D tilt cards ---------- */
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease)}
.tilt .tilt-inner{transform:translateZ(40px)}

/* ---------- magnetic buttons ---------- */
.magnetic{will-change:transform;transition:transform .25s var(--ease)}

/* ---------- marquee / tech ticker ---------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-soft);padding:18px 0;position:relative;
  -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;width:max-content;gap:0;animation:scrollX 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:14px;padding:0 28px;
  font-family:var(--display);font-weight:600;font-size:1.05rem;color:#cfcfd6;white-space:nowrap}
.marquee-item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------- nav active link (scrollspy) ---------- */
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{width:100%}

/* ---------- subtle float on hero portrait via parallax ---------- */
.portrait{will-change:transform}

/* ---------- reduced motion: turn it all off ---------- */
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .word>span{transform:none !important;animation:none !important}
  .enter{opacity:1 !important;transform:none !important;animation:none !important}
  .marquee-track{animation:none !important}
  .scroll-progress{display:none}
}