/* ============================================================
   DRIP — FX LAYER 2
   The effects fx.css didn't cover: branded loader, page transitions,
   line-mask reveals, marquee, scale-on-scroll, sticky spec showcase.
   Loads on EVERY page, not just the homepage.
   ============================================================ */

/* ---------- branded loader (hides the 3D model pop-in) ---------- */
#fx-loader{
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg,#fff);
  transition:opacity .7s cubic-bezier(.25,.46,.45,.94), visibility .7s;
}
#fx-loader.gone{ opacity:0; visibility:hidden; pointer-events:none; }
#fx-loader .mark{
  font:italic 800 clamp(42px,9vw,84px)/1 Montserrat,sans-serif;
  letter-spacing:-.02em;
  background:var(--holo); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:260% 100%; animation:fxHolo 3.4s ease-in-out infinite;
}
@keyframes fxHolo{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
#fx-loader .bar{
  width:min(210px,42vw); height:2px; margin-top:26px; border-radius:2px;
  background:rgba(11,12,14,.10); overflow:hidden;
}
#fx-loader .bar i{ display:block; height:100%; width:0%; background:var(--holo); background-size:200% 100%; }
#fx-loader .pct{
  margin-top:14px; font:700 10px/1 Montserrat,sans-serif;
  letter-spacing:.34em; color:rgba(11,12,14,.42);
}

/* ---------- page transition curtain ----------
   Starts hidden and stays hidden unless a navigation actually asks for it.
   A full-screen panel that relies on an animation FINISHING is a blank-page
   waiting to happen — under a heavy 3D load the animation can stall — so
   visibility is the gate, not the transform. */
#fx-curtain{
  position:fixed; inset:0; z-index:99998; pointer-events:none;
  background:var(--ink,#0b0c0e);
  transform:scaleY(0); transform-origin:bottom;
  visibility:hidden;
}
#fx-curtain.in { visibility:visible; transform-origin:bottom; animation:fxCurtainIn .42s cubic-bezier(.77,0,.175,1) forwards; }
#fx-curtain.out{ visibility:visible; transform-origin:top;    animation:fxCurtainOut .52s cubic-bezier(.77,0,.175,1) forwards; }
@keyframes fxCurtainIn { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes fxCurtainOut{ from{transform:scaleY(1)} to{transform:scaleY(0)} }

/* ---------- line-mask text reveal (the agency wipe) ---------- */
.fx-lines .fx-line{ display:block; overflow:hidden; }
.fx-lines .fx-line > span{
  display:block; transform:translateY(112%);
  transition:transform .82s cubic-bezier(.76,0,.24,1);
}
.fx-lines.seen .fx-line > span{ transform:translateY(0); }
.fx-lines.seen .fx-line:nth-child(2) > span{ transition-delay:.09s; }
.fx-lines.seen .fx-line:nth-child(3) > span{ transition-delay:.18s; }
.fx-lines.seen .fx-line:nth-child(4) > span{ transition-delay:.27s; }

/* ---------- clip wipe for images / panels ---------- */
.fx-wipe{ clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.77,0,.175,1); }
.fx-wipe.seen{ clip-path:inset(0 0% 0 0); }

/* ---------- infinite marquee ---------- */
.fx-marquee{ overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.fx-marquee .fx-track{ display:inline-flex; align-items:center; gap:2.6rem; animation:fxMarquee 28s linear infinite; will-change:transform; }
.fx-marquee:hover .fx-track{ animation-play-state:paused; }
.fx-marquee .fx-track > *{ flex:0 0 auto; }
@keyframes fxMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- scale toward viewport centre ---------- */
.fx-scale{ transform:scale(.88); transition:transform .18s linear; will-change:transform; }

/* ---------- sticky spec showcase ---------- */
.fx-sticky{ position:sticky; top:calc(var(--nav-h,66px) + 22px); }

/* ---------- counting stat ---------- */
.fx-count{ font-variant-numeric:tabular-nums; }

/* ---------- spec band + brand ticker ---------- */
.fx-stats{ padding:clamp(54px,8vw,96px) 0 clamp(54px,8vw,96px); border-top:1px solid var(--line,#e8eaee); border-bottom:1px solid var(--line,#e8eaee); }
.fx-stats-in{
  max-width:var(--maxw,1200px); margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,3vw,32px);
}
.fx-stat{ text-align:center; }
.fx-stat b{
  display:block; font:800 clamp(30px,5.4vw,58px)/1 Montserrat,sans-serif; letter-spacing:-.03em;
  background:var(--holo); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.fx-stat span{
  display:block; margin-top:9px; font:600 11px/1.45 Manrope,sans-serif;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(11,12,14,.5);
}
.fx-ticker{ margin-top:clamp(34px,6vw,60px); padding:16px 0; border-top:1px solid var(--line,#e8eaee); border-bottom:1px solid var(--line,#e8eaee); }
.fx-ticker .fx-track > span{ font:800 12px/1 Montserrat,sans-serif; letter-spacing:.3em; color:rgba(11,12,14,.62); }
.fx-ticker .fx-track > i{ font-style:normal; font-size:9px; color:var(--blue,#2f8fe0); opacity:.7; }
@media (max-width:640px){
  .fx-stats-in{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
}

/* respect the user's motion preference throughout */
@media (prefers-reduced-motion:reduce){
  .fx-lines .fx-line > span,.fx-wipe{ transform:none!important; clip-path:none!important; transition:none!important; }
  .fx-marquee .fx-track{ animation:none; }
  .fx-scale{ transform:none!important; }
  #fx-curtain{ display:none; }
}

/* ---------- parallax scaffolding ----------
   Depth layers are transformed every frame, so they get their own
   compositor layer and are never allowed to widen the page. */
[data-px],[data-px-bg],[data-px-mouse]{ backface-visibility:hidden; will-change:translate; }
[data-px-pin]{ position:relative; }
[data-px-pin] > .px-stick{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
[data-px-rail]{ display:flex; gap:clamp(14px,3vw,34px); padding:0 6vw; will-change:transform; }
[data-px-rail] > *{ flex:0 0 auto; }
[data-px-showcase] [data-px-stage] > *{ opacity:0; transition:opacity .5s ease; position:absolute; inset:0; }
[data-px-showcase] [data-px-stage] > *.active{ opacity:1; }

/* the hero planes must not spill once they start moving */
.ld-hero{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  [data-px],[data-px-bg],[data-px-mouse],[data-px-rail]{ translate:none!important; }
}