/* ============================================================
   TEAM ENIGMA — FX layer (motion + 3D + interactivity)
   Loaded on top of _styles.css. Design unchanged; behavior added.
   ============================================================ */

/* ---- scroll progress bar ---- */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--red),var(--red-2));box-shadow:0 0 12px rgba(216,32,31,.6);
  transition:width .08s linear}

/* ---- custom diamond cursor (desktop pointers only) ---- */
.cursor{position:fixed;top:0;left:0;width:14px;height:14px;z-index:130;pointer-events:none;
  border:1.5px solid var(--red);transform:translate(-50%,-50%) rotate(45deg);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s,opacity .3s;
  mix-blend-mode:difference;opacity:0}
.cursor.show{opacity:1}
.cursor.hot{width:34px;height:34px;background:var(--red);border-color:var(--red)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---- hero load-reveal sequence ---- */
.fx-line{display:block;overflow:hidden}
.fx-line>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.fx-ready .fx-line>span{transform:translateY(0)}
.fx-up{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fx-ready .fx-up{opacity:1;transform:none}
.fx-d1{transition-delay:.12s}.fx-d2{transition-delay:.22s}.fx-d3{transition-delay:.34s}
.fx-d4{transition-delay:.46s}.fx-d5{transition-delay:.58s}

/* ---- parallax hero media ---- */
.phero img,.hero img{will-change:transform}

/* ---- 3D tilt cards ---- */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tilt .tilt-inner{transform:translateZ(38px);transform-style:preserve-3d}
.tilt-glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 45%);
  transition:opacity .4s}
.tilt:hover .tilt-glare{opacity:1}

/* ---- magnetic buttons ---- */
.mag{will-change:transform}

/* ---- floating ambient diamonds (hero) ---- */
.diamonds{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.diamonds i{position:absolute;display:block;border:1px solid rgba(216,32,31,.22);
  transform:rotate(45deg);animation:floatD linear infinite}
@keyframes floatD{
  0%{transform:translateY(40px) rotate(45deg);opacity:0}
  12%{opacity:.7}
  88%{opacity:.7}
  100%{transform:translateY(-120px) rotate(225deg);opacity:0}}

/* ---- 3D spinning hero diamond mark ---- */
.hero-3d{position:absolute;z-index:1;right:-2%;top:46%;transform:translateY(-50%);
  width:clamp(170px,22vw,320px);aspect-ratio:1;perspective:900px;pointer-events:none;opacity:.5}
.hero-3d .cube{position:absolute;inset:0;transform-style:preserve-3d;animation:spinY 16s linear infinite}
.hero-3d .face{position:absolute;inset:14%;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(177,18,23,.92),rgba(120,10,14,.92));
  border:1px solid rgba(255,255,255,.12);transform:rotate(45deg)}
.hero-3d .face span{transform:rotate(-45deg);font-family:'Anton',sans-serif;font-size:clamp(60px,9vw,130px);color:#fff;line-height:1}
.hero-3d .f1{transform:rotateY(0deg) translateZ(70px) rotate(45deg)}
.hero-3d .f2{transform:rotateY(90deg) translateZ(70px) rotate(45deg)}
.hero-3d .f3{transform:rotateY(180deg) translateZ(70px) rotate(45deg)}
.hero-3d .f4{transform:rotateY(270deg) translateZ(70px) rotate(45deg)}
@keyframes spinY{to{transform:rotateY(360deg)}}
@media(max-width:900px){.hero-3d{display:none}}

/* ---- count-up stat flag ---- */
.stat .display[data-count]{font-variant-numeric:tabular-nums}

/* ---- marquee strip ---- */
.marquee{overflow:hidden;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);
  background:var(--ink-2);padding:16px 0}
.marquee-track{display:flex;gap:42px;width:max-content;animation:scrollX 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,3vw,34px);
  letter-spacing:.02em;color:var(--bone);white-space:nowrap;display:inline-flex;align-items:center;gap:42px}
.marquee span::after{content:"";width:12px;height:12px;background:var(--red);transform:rotate(45deg);flex:0 0 12px}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---- link underline sweep for CTAs already covered; add image hover zoom safety ---- */

/* ---- respect reduced motion: kill all the heavy stuff ---- */
@media(prefers-reduced-motion:reduce){
  .fx-line>span,.fx-up{transform:none!important;opacity:1!important;transition:none!important}
  .hero-3d,.diamonds,.cursor{display:none!important}
  .marquee-track{animation:none!important}
  .tilt{transform:none!important}
}