/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Foyl Learn — Shared Visual FX layer
   three.js background + GSAP animation support styles.
   Loaded on landing pages only. Projector mode and
   prefers-reduced-motion disable the heavy effects.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 3D background canvas (injected by learn-fx.js) ── */
#fx-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
#fx-canvas.on{opacity:1}

/* ── Ambient gradient orbs (injected by learn-fx.js) ── */
.fx-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-orb{
  position:absolute;border-radius:50%;
  filter:blur(90px);will-change:transform;
  opacity:.55;
}
.fx-orb.a{
  width:520px;height:520px;top:-180px;left:-120px;
  background:radial-gradient(circle at 35% 35%, rgba(0,212,255,.10), rgba(0,174,239,.05) 45%, transparent 70%);
  animation:fx-orb-a 26s ease-in-out infinite alternate;
}
.fx-orb.b{
  width:640px;height:640px;top:20%;right:-260px;
  background:radial-gradient(circle at 60% 40%, rgba(0,137,123,.09), rgba(0,95,135,.05) 50%, transparent 72%);
  animation:fx-orb-b 34s ease-in-out infinite alternate;
}
.fx-orb.c{
  width:420px;height:420px;bottom:-160px;left:30%;
  background:radial-gradient(circle at 50% 50%, rgba(0,95,135,.09), transparent 68%);
  animation:fx-orb-c 30s ease-in-out infinite alternate;
}
@keyframes fx-orb-a{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,60px) scale(1.12)}}
@keyframes fx-orb-b{from{transform:translate(0,0) scale(1)}to{transform:translate(-90px,-50px) scale(1.08)}}
@keyframes fx-orb-c{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-70px) scale(1.15)}}

/* ── Scroll progress bar (injected by learn-fx.js) ── */
.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:900;
  pointer-events:none;
  background:linear-gradient(90deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  transform-origin:0 50%;transform:scaleX(0);
}

/* ── Hero word-split spans ── */
.fx-w{display:inline-block;will-change:transform,opacity}
/* page styles target ".ph-title span" — keep non-gradient words plain
   (the :not() bumps specificity above the page rule) */
.fx-w:not(.fx-wg){background:none;-webkit-text-fill-color:currentColor}
.fx-wg{
  background:linear-gradient(135deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── Card cursor glow ──
   learn-fx.js adds .fx-glow to cards and drives --mx / --my. */
.fx-glow{position:relative}
.fx-glow::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(0,212,255,.075), rgba(0,174,239,.03) 40%, transparent 65%);
  z-index:1;
}
.fx-glow:hover::after{opacity:1}
.fx-tilt{will-change:transform;transform-style:preserve-3d}

/* ── Scroll reveal initial state ──
   Only hidden once JS has confirmed it will run (html.fx). */
html.fx [data-reveal]{opacity:0;transform:translateY(26px);transition:none}
html.fx [data-reveal].visible{opacity:1;transform:none}

/* ── Guards: projector mode ── */
[data-theme="projector"] #fx-canvas,
[data-theme="projector"] .fx-orbs{display:none}
[data-theme="projector"] .fx-progress{opacity:.5}
[data-theme="projector"] .fx-wg{
  background:linear-gradient(135deg,#0077AA 0%,#005F87 50%,#00695C 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="projector"] .fx-glow::after{display:none}

/* ── Guards: reduced motion ── */
@media (prefers-reduced-motion: reduce){
  #fx-canvas,.fx-orbs,.fx-progress{display:none!important}
  html.fx [data-reveal]{opacity:1;transform:none}
  .fx-orb{animation:none}
}