/* Third Eye FX layer: modern motion and visual effects. Transform and opacity only, no layout shift.
   Pointer effects only on mouse devices; everything calms down for prefers-reduced-motion. */
:root{--fx-a:#8b7bff;--fx-b:#ff5f8f;--fx-c:#ffb42e}

/* scroll progress bar */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--fx-a),var(--fx-b),var(--fx-c));z-index:10000;pointer-events:none;will-change:transform}

/* capability marquee */
.fx-marquee{position:relative;overflow:hidden;background:#0a0720;border-block:1px solid rgba(255,255,255,.09);padding:1.05rem 0}
.fx-marquee:before,.fx-marquee:after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.fx-marquee:before{left:0;background:linear-gradient(90deg,#0a0720,transparent)}
.fx-marquee:after{right:0;background:linear-gradient(270deg,#0a0720,transparent)}
.fx-track{display:flex;width:max-content;gap:0}
.fx-track span{display:inline-flex;align-items:center;gap:2rem;padding-right:2rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;color:#d9d2ff;white-space:nowrap}
.fx-track span:after{content:"\2726";color:var(--fx-b);font-size:.9rem}
.fx-track span:nth-child(3n):after{color:var(--fx-c)}
.fx-track span:nth-child(3n+1):after{color:var(--fx-a)}
@media (prefers-reduced-motion:no-preference){
  .fx-track{animation:fx-scroll 46s linear infinite}
  .fx-marquee:hover .fx-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.fx-marquee{overflow-x:auto}}
@keyframes fx-scroll{to{transform:translateX(-50%)}}

/* numbers strip */
.fx-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden}
.fx-nums div{background:#12102a;padding:1.7rem 1.2rem;text-align:center}
.fx-nums b{display:block;font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;background:linear-gradient(120deg,#fff 20%,var(--fx-c) 60%,var(--fx-b));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.fx-nums span{display:block;margin-top:.55rem;font-size:.85rem;color:#b9b2e6}
@media (max-width:760px){.fx-nums{grid-template-columns:repeat(2,1fr)}}
.fx-nums-wrap{background:#0a0720;padding:2.6rem 0 2.2rem}
.fx-nums-note{margin:.9rem 0 0;font-size:.8rem;color:#8f88c4;text-align:center}

/* cursor-tracked glow and tilt on cards (mouse devices only) */
.fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(139,123,255,.20),rgba(255,95,143,.10) 40%,transparent 70%)}
.fx-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:2;padding:1.5px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#8b7bff,#ff5f8f 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fx-card{position:relative;transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
  .fx-card:hover{box-shadow:0 26px 60px -26px rgba(78,52,200,.45)}
  .fx-card:hover .fx-glow,.fx-card:hover .fx-ring{opacity:1}
  .sg-card img,.wk-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .sg-card:hover img,.wk-card:hover img{transform:scale(1.07)}
}

/* headline word reveal */
.fx-words .fx-w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(4px)}
.fx-words.fx-in .fx-w{opacity:1;transform:none;filter:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .6s ease;transition-delay:calc(var(--i) * 55ms)}
@media (prefers-reduced-motion:reduce){.fx-words .fx-w{opacity:1;transform:none;filter:none}}

/* floating colour orbs behind sections */
.fx-has-orbs{position:relative;overflow:hidden;isolation:isolate}
.fx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none;z-index:-1}
.fx-orb.o1{width:340px;height:340px;left:-90px;top:-60px;background:#8b7bff}
.fx-orb.o2{width:300px;height:300px;right:-80px;bottom:-60px;background:#ff5f8f}
.fx-orb.o3{width:220px;height:220px;right:30%;top:20%;background:#ffb42e;opacity:.16}
@media (prefers-reduced-motion:no-preference){
  .fx-orb.o1{animation:fx-float 14s ease-in-out infinite}
  .fx-orb.o2{animation:fx-float 17s ease-in-out infinite reverse}
  .fx-orb.o3{animation:fx-float 20s ease-in-out infinite}
}
@keyframes fx-float{50%{transform:translate3d(40px,-30px,0) scale(1.1)}}

/* soft pulse on the main call to action */
@media (prefers-reduced-motion:no-preference){
  .h3-btn-solid,.band-cta .btn-accent{animation:fx-pulse 3.2s ease-out infinite}
}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(255,95,143,.45)}70%,100%{box-shadow:0 0 0 18px rgba(255,95,143,0)}}

/* animated gradient underline on section eyebrows */
.sec-head .eyebrow{position:relative}
@media (prefers-reduced-motion:no-preference){
  .sec-head.reveal.in .eyebrow:after,.sec-head.reveal.is-visible .eyebrow:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--fx-a),var(--fx-b),var(--fx-c));transform-origin:0 50%;animation:fx-draw .9s .2s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes fx-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
