/* ===========================================================
   Arca Media Company — FX v2
   Cursore-pedone 3D · bagliore · bordi luminosi in prossimità
   · sfondo ambient · reveal allo scroll · hero display
   Progressive enhancement: senza JS / touch / reduce-motion
   il sito resta perfettamente usabile.
   =========================================================== */

/* --- cursore custom: solo desktop-mouse --- */
html.fx-on, html.fx-on *{cursor:none !important}

.fx-cur{
  position:fixed;left:0;top:0;width:30px;height:38px;z-index:2147483000;
  margin:-19px 0 0 -15px;pointer-events:none;
  transform:translate3d(-200px,-200px,0);
  will-change:transform;
  perspective:260px}
.fx-cur .c3d{
  position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fx-cur svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:opacity .2s}
.fx-cur svg.back{transform:translateZ(-7px) scale(1.05);filter:blur(.4px)}
.fx-cur svg.front{transform:translateZ(3px)}
.fx-cur .shd{
  position:absolute;left:50%;bottom:-4px;width:20px;height:6px;
  margin-left:-10px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(30,8,60,.55),transparent 70%);
  filter:blur(2px);transform:translateZ(-10px)}
.fx-cur.morph .c3d{transition:transform .17s ease-in}
.fx-cur.morph svg{opacity:.12}
.fx-cur .fx-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:1.5px solid rgba(198,145,255,.8);
  box-shadow:0 0 14px rgba(150,90,240,.35),inset 0 0 8px rgba(150,90,240,.18);
  opacity:0;transform:scale(.55);
  transition:opacity .28s,transform .28s cubic-bezier(.16,1,.3,1)}
.fx-cur.hot .fx-ring{opacity:1;transform:scale(1)}

/* --- bagliore che segue il cursore --- */
.fx-glow{
  position:fixed;left:0;top:0;width:300px;height:300px;
  margin:-150px 0 0 -150px;border-radius:50%;z-index:2147482000;
  pointer-events:none;transform:translate3d(-400px,-400px,0);
  will-change:transform;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(150,90,240,.28),rgba(138,75,255,.10) 44%,transparent 70%)}
[data-theme="light"] .fx-glow{
  mix-blend-mode:normal;
  background:radial-gradient(circle,rgba(124,58,237,.13),rgba(124,58,237,.05) 46%,transparent 70%)}

/* --- bordo luminoso in prossimità (anello figlio, niente pseudo) --- */
.fxr{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:5;opacity:var(--fxo,0);padding:1.5px;display:block;
  background:radial-gradient(190px circle at var(--fxx,50%) var(--fxy,50%),
    rgba(219,186,255,.95),rgba(155,95,240,.55) 38%,rgba(155,95,240,.12) 62%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  transition:opacity .12s linear}
[data-theme="light"] .fxr{
  background:radial-gradient(190px circle at var(--fxx,50%) var(--fxy,50%),
    rgba(124,58,237,.85),rgba(124,58,237,.4) 40%,rgba(124,58,237,.08) 64%,transparent 76%)}

/* glow morbido dei testi/link al passaggio (niente rettangoli) */
.fx-txt{text-shadow:0 0 16px rgba(186,127,255,.55)!important;transition:text-shadow .25s}
[data-theme="light"] .fx-txt{text-shadow:0 0 14px rgba(124,58,237,.35)!important}

/* lift leggero delle card */
.fx-lift{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.fx-lift:hover{transform:translateY(-4px)}

/* --- FIX: pulsante Menu centrato senza transform (niente salti) --- */
.menu-btn{left:0;right:0;top:0;bottom:0;inset:0;margin:auto;
  width:max-content;height:max-content;transform:none}

/* --- sfondo ambient: orbs + pedine in deriva lenta --- */
.fx-bg{position:fixed;inset:-6%;z-index:-1;pointer-events:none;overflow:hidden;
  will-change:transform}
.fx-bg i{position:absolute;border-radius:50%;display:block;filter:blur(70px)}
.fx-bg .o1{width:46vw;height:46vw;left:-12%;top:6%;
  background:radial-gradient(circle,rgba(138,75,255,.16),transparent 68%);
  animation:fxDrift1 52s ease-in-out infinite alternate}
.fx-bg .o2{width:38vw;height:38vw;right:-10%;top:40%;
  background:radial-gradient(circle,rgba(198,68,255,.11),transparent 68%);
  animation:fxDrift2 67s ease-in-out infinite alternate}
.fx-bg .o3{width:30vw;height:30vw;left:32%;bottom:-14%;
  background:radial-gradient(circle,rgba(120,80,230,.10),transparent 68%);
  animation:fxDrift3 45s ease-in-out infinite alternate}
[data-theme="light"] .fx-bg .o1{background:radial-gradient(circle,rgba(124,58,237,.09),transparent 68%)}
[data-theme="light"] .fx-bg .o2{background:radial-gradient(circle,rgba(162,31,224,.07),transparent 68%)}
[data-theme="light"] .fx-bg .o3{background:radial-gradient(circle,rgba(110,70,220,.06),transparent 68%)}
@keyframes fxDrift1{to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes fxDrift2{to{transform:translate3d(-7vw,-9vh,0) scale(.9)}}
@keyframes fxDrift3{to{transform:translate3d(6vw,-6vh,0) scale(1.08)}}

/* --- scacchiera nascosta: pedine rivelate solo dal bagliore del cursore --- */
.fx-reveal{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-repeat:repeat;background-size:540px 580px;
  opacity:0;transition:opacity .8s;
  -webkit-mask-image:radial-gradient(310px circle at var(--rx,-500px) var(--ry,-500px),
    #000 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.25) 60%,transparent 76%);
          mask-image:radial-gradient(310px circle at var(--rx,-500px) var(--ry,-500px),
    #000 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.25) 60%,transparent 76%)}
html.fx-on .fx-reveal{opacity:1}

/* --- rivelazione elementi allo scroll (fallback) --- */
.fx-rise{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.fx-rise.fx-in{opacity:1;transform:none}

/* ===========================================================
   HERO DISPLAY (servizi · arcademy · casi studio)
   parola-fantasma outline + reveal per parola + split bicromatico
   =========================================================== */
[data-hero-fx]{position:relative;overflow:clip}
[data-hero-fx]>*:not(.fx-ghost){position:relative;z-index:1}
.fx-ghost{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(4.6rem,17vw,15rem);line-height:1;letter-spacing:.04em;
  white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
  color:transparent;-webkit-text-stroke:1.5px rgba(186,127,255,.10);
  animation:fxGhost 44s ease-in-out infinite alternate}
[data-theme="light"] .fx-ghost{-webkit-text-stroke:1.5px rgba(113,39,214,.09)}
@keyframes fxGhost{from{transform:translateX(-53%)}to{transform:translateX(-47%)}}

[data-hero-fx] h1 .hw{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.08em;margin-bottom:-.08em}
[data-hero-fx] h1 .hw i{
  display:inline-block;font-style:normal;
  transform:translateY(112%) rotate(3deg);transform-origin:0 100%;
  animation:fxWord .85s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--wd,0s)}
@keyframes fxWord{to{transform:none}}
/* parola chiave: split bicromatico netto, come il logo */
[data-hero-fx] h1 .hw i.g{
  background:linear-gradient(100deg,#c9a0ff 0 48.5%,#8d34c8 51.5%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] [data-hero-fx] h1 .hw i.g{
  background:linear-gradient(100deg,#8a4de0 0 48.5%,#5e1b9e 51.5%);
  -webkit-background-clip:text;background-clip:text}
[data-hero-fx] .kicker,[data-hero-fx] p{
  animation:fxFade 1s ease .5s backwards}
@keyframes fxFade{from{opacity:0;transform:translateY(10px)}}

/* --- accessibilità: movimento ridotto --- */
@media (prefers-reduced-motion:reduce){
  .fx-rise{opacity:1;transform:none;transition:none}
  .fx-bg i,.fx-bg svg,.fx-ghost{animation:none!important}
  [data-hero-fx] h1 .hw i{animation:none;transform:none}
  [data-hero-fx] .kicker,[data-hero-fx] p{animation:none}
  .fx-lift,.fx-lift:hover{transform:none;transition:none}
}