/* ============================================================
   PREMIUM FX — loader · cursor · split · HUD · before/after · grain
   ============================================================ */

/* ---- branded entrance loader ---- */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
#loader .emblem{width:74px;height:74px;animation:emblemDraw .8s var(--ease-out) both}
#loader .loader-logo{width:clamp(260px,46vw,400px);height:auto;animation:logoIn .7s var(--ease-out) both}
#loader .lwm{font-family:var(--font-display);text-transform:uppercase;display:flex;flex-direction:column;align-items:flex-start;line-height:.86;color:var(--white)}
#loader .lwm .c{font-size:clamp(12px,2vw,18px);letter-spacing:.16em}
#loader .lwm .o{color:var(--orange);font-size:clamp(30px,5.4vw,52px);letter-spacing:.01em}
#loader .lwm span{display:inline-block;animation:logoIn .6s var(--ease-out) both;animation-delay:.2s}
#loader .lbar{width:160px;height:3px;background:var(--surface-3);border-radius:3px;overflow:hidden}
#loader .lbar i{display:block;height:100%;width:0;background:var(--orange);animation:lbar 1s var(--ease-out) .15s forwards}
@keyframes lbar{to{width:100%}}

/* ---- custom cursor + magnetic ---- */
.cursor-on,.cursor-on a,.cursor-on button,.cursor-on .card,.cursor-on input,.cursor-on textarea,.cursor-on select{cursor:none}
#cur,#curRing{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;
  transform:translate3d(-50%,-50%,0);will-change:transform;mix-blend-mode:difference}
#cur{width:7px;height:7px;background:#fff}
#curRing{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s}
#curRing.grow{width:64px;height:64px;border-color:var(--orange);background:rgba(255,106,26,.12)}
.mag{will-change:transform}

/* ---- split-text titles ---- */
.section-title.reveal{opacity:1 !important;transform:none !important}
.section-title .w{display:inline-block;overflow:hidden;vertical-align:top;line-height:.94}
.section-title .w > i{display:inline-block;font-style:normal;transform:translate3d(0,108%,0);transition:transform .8s var(--ease-out)}
.section-title.in .w > i{transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){.section-title .w > i{transform:none}}

/* ---- hero live HUD ---- */
.hero-hud{display:flex;gap:0;margin-top:clamp(26px,3vw,40px);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;width:fit-content;
  background:rgba(14,15,17,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;animation:fadeUp 1s var(--ease-out) .8s forwards}
.hero-hud .h{display:flex;flex-direction:column;gap:4px;padding:14px 22px;border-left:1px solid var(--line)}
.hero-hud .h:first-child{border-left:none}
.hero-hud .h b{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);line-height:1;color:#fff}
.hero-hud .h b .u{color:var(--orange)}
.hero-hud .h span{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
@media(max-width:560px){.hero-hud{width:100%}.hero-hud .h{flex:1}}

/* ---- hero grain + vignette ---- */
.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px}
.hero-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(0,0,0,.20)}

/* ---- before/after slider ---- */
.ba{background:var(--ink);position:relative;overflow:hidden}
.ba .head{margin-bottom:clamp(34px,4vw,52px)}
.ba-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:72vh;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(0,0,0,.9);cursor:ew-resize;user-select:none;touch-action:none}
.ba-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;width:100%;overflow:hidden;z-index:1;clip-path:inset(0 50% 0 0)}
.ba-before img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;bottom:16px;z-index:3;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;background:rgba(14,15,17,.6);backdrop-filter:blur(4px);border:1px solid var(--line)}
.ba-tag.l{left:16px;color:var(--yellow)}
.ba-tag.r{right:16px;color:#fff}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:46px;transform:translateX(-50%);
  display:grid;place-items:center;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--orange);box-shadow:0 0 18px rgba(255,106,26,.6)}
.ba-knob{width:46px;height:46px;border-radius:50%;background:var(--orange);display:grid;place-items:center;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.7);color:#fff;font-size:15px;font-weight:700}
.ba-knob::before{content:"\2194"}