/* ============================================================
   AEROPAR — FX · capa inmersiva (vanilla, 60fps)
   Ligera pero VIVA: aurora animada + partículas a la deriva +
   reveal por palabras + hover de flota + cursor hélice (SVG
   centrado) + botones magnéticos. Sin canvas pesado, sin
   blend, sin grano. Respeta reduced-motion y táctil.
   ============================================================ */
:root { --fx-ease: cubic-bezier(.16,1,.3,1); }

/* ---- preloader: logo real ---- */
#pre .pre-logo { width:min(220px,52vw); height:auto; opacity:0; animation:fxPre 1.6s ease-in-out infinite; }
@keyframes fxPre { 0%,100%{ opacity:.4; transform:scale(.985); } 50%{ opacity:1; transform:scale(1); } }

/* ---- aurora ambiente (3 blobs, GPU) ---- */
.fx-aurora { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.fx-aurora i { position:absolute; display:block; border-radius:50%; will-change:transform,opacity; }
/* solo translate3d (compositor) — sin scale() ni opacity animados, que fuerzan re-rasterizar los degradados grandes */
.fx-aurora .a1 { width:46vw; height:46vw; left:-12vw; top:-16vw; background:radial-gradient(circle, var(--red) 0%, transparent 60%); opacity:.20; animation:fxA1 30s ease-in-out infinite; }
.fx-aurora .a2 { width:40vw; height:40vw; right:-10vw; bottom:-14vw; background:radial-gradient(circle, var(--red-deep) 0%, transparent 60%); opacity:.18; animation:fxA2 36s ease-in-out infinite; }
.fx-aurora .a3 { width:32vw; height:32vw; left:40vw; top:32vh; background:radial-gradient(circle, var(--red-2) 0%, transparent 62%); opacity:.12; animation:fxA3 42s ease-in-out infinite; }
@keyframes fxA1 { 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(6vw,4vw,0); } }
@keyframes fxA2 { 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-5vw,-3vw,0); } }
@keyframes fxA3 { 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-4vw,3vw,0); } }

/* ---- partículas a la deriva (polvo de aire) ---- */
.fx-particles { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.fx-particles i { position:absolute; bottom:-12px; border-radius:50%; background:rgba(231,231,231,.55); will-change:transform,opacity; animation:fxDrift linear infinite; }
@keyframes fxDrift {
  0% { transform:translate3d(0,0,0); opacity:0; }
  12% { opacity:.7; }
  88% { opacity:.45; }
  100% { transform:translate3d(2vw,-112vh,0); opacity:0; }
}

/* ---- viñeta cinematográfica ---- */
.fx-vignette { position:fixed; inset:0; z-index:-1; pointer-events:none; box-shadow:inset 0 0 220px 70px rgba(0,0,0,.5); }

/* ---- reveal por palabras (hero h1 + frase manifiesto) ---- */
.fx-word { display:inline-block; opacity:0; transform:translateY(.55em); transition:opacity .6s var(--fx-ease), transform .6s var(--fx-ease); }
.fx-word.in { opacity:1; transform:none; }

/* ---- flota: overlay "Ver más" al pasar el mouse ---- */
#flota .ac .pic { position:relative; }
.fx-vermas { position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:center; padding:22px; opacity:0; pointer-events:none; background:linear-gradient(to top, rgba(11,11,12,.82), rgba(11,11,12,.15) 55%, transparent 72%); transition:opacity .3s var(--fx-ease); }
.fx-vermas span { font-family:var(--f); font-weight:700; font-size:13.5px; letter-spacing:.02em; color:#fff; border:1.5px solid rgba(255,255,255,.55); border-radius:7px; padding:10px 18px; transform:translateY(14px); transition:transform .35s var(--fx-ease), background .2s, border-color .2s; }
#flota .ac:hover .fx-vermas { opacity:1; }
#flota .ac:hover .fx-vermas span { transform:none; background:var(--red); border-color:var(--red); }

/* ---- cursor personalizado: hélice (SVG centrado, gira limpio) ---- */
@media (hover:hover) and (pointer:fine) {
  .fx-cursor { position:fixed; top:0; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; z-index:99999; pointer-events:none; will-change:transform; transition:width .18s var(--fx-ease), height .18s var(--fx-ease), margin .18s var(--fx-ease), opacity .25s; }
  .fx-cursor svg { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); animation:fxSpin 2.6s linear infinite; }
  @keyframes fxSpin { to { transform:rotate(360deg); } }
  .fx-cursor svg path, .fx-cursor svg ellipse, .fx-cursor svg circle { fill:#fff; }
  .fx-cursor.fx-hot { width:46px; height:46px; margin:-23px 0 0 -23px; }
  .fx-cursor.fx-hot svg { filter:drop-shadow(0 0 7px rgba(212,35,31,.95)); }
  .fx-dot { position:fixed; top:0; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--red-2); z-index:99999; pointer-events:none; will-change:transform; transition:opacity .25s; }
  body.fx-cursor-on, body.fx-cursor-on * { cursor:none; }
  body.fx-cursor-on input, body.fx-cursor-on textarea, body.fx-cursor-on select, body.fx-cursor-on [contenteditable] { cursor:auto; }
}

/* ---- gates ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora i, .fx-particles i { animation:none !important; }
  .fx-particles { display:none !important; }
  .fx-word { opacity:1 !important; transform:none !important; }
  #pre .pre-logo { animation:none !important; opacity:1 !important; }
}
@media (hover:none), (pointer:coarse) {
  .fx-cursor, .fx-dot { display:none !important; }
  .fx-particles { opacity:.5; }
}
/* modo lite (?lite / ?nofx): diagnóstico — apaga toda animación decorativa */
.fx-lite .fx-aurora, .fx-lite .fx-particles, .fx-lite .fx-cursor, .fx-lite .fx-dot, .fx-lite .fx-vermas { display:none !important; }
.fx-lite .hero-bg img { animation:none !important; }