/* ============================================================
   Beniparrell C.F. — Efectos 3D de marca para la home (ADITIVO y REVERSIBLE)
   Inspirado en los mejores repos de tarjetas 3D (tilt + spotlight + glare):
   - Escudo con raya luminosa (oro).
   - Tarjetas: tilt 3D real, brillo que cruza, foco (spotlight) que sigue el
     cursor y glare direccional. Profundidad con sombras de marca (rojo/oro).
   Para revertir: borra este archivo, landing-fx.js y los 2 <tags> inyectados.
   ============================================================ */

/* ---------- Raya luminosa recorriendo el escudo (nav + footer) ---------- */
.fx-shine{position:relative;display:inline-block;overflow:hidden;line-height:0;isolation:isolate}
.fx-shine::after{
  content:"";position:absolute;top:-45%;left:0;width:60%;height:190%;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,175,55,0) 22%,
    rgba(212,175,55,.85) 46%,
    rgba(255,255,255,.98) 50%,
    rgba(212,175,55,.85) 54%,
    rgba(212,175,55,0) 78%,
    transparent 100%);
  transform:translateX(-220%) rotate(14deg);
  animation:fxLogoSheen 5.5s cubic-bezier(.5,0,.2,1) infinite;
  mix-blend-mode:screen;
}
@keyframes fxLogoSheen{
  0%   {transform:translateX(-220%) rotate(14deg)}
  55%,100%{transform:translateX(360%) rotate(14deg)}
}

/* ---------- Tarjetas: tilt 3D + spotlight + glare + glow de marca ---------- */
.fx-tilt{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}

/* Brillo que cruza al pasar (oro/blanco) */
.fx-sheen{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;overflow:hidden}
.fx-sheen::before{
  content:"";position:absolute;top:0;left:0;width:80%;height:100%;
  background:linear-gradient(115deg,
    transparent 36%,
    rgba(212,175,55,.10) 46%,
    rgba(255,255,255,.30) 50%,
    rgba(212,175,55,.10) 54%,
    transparent 64%);
  transform:translateX(-160%) skewX(-12deg);
  transition:transform .75s cubic-bezier(.4,0,.2,1);
}
.fx-tilt:hover .fx-sheen::before{transform:translateX(220%) skewX(-12deg)}

/* Foco (spotlight) que sigue el cursor — el efecto "premium" de los mejores repos */
.fx-spot{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(212,175,55,.16), rgba(200,0,26,.10) 40%, transparent 62%);}
.fx-tilt:hover .fx-spot{opacity:1}

/* Glare direccional según la inclinación (brillo sutil superior) */
.fx-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(var(--gl,120deg), rgba(255,255,255,.14), transparent 45%);}
.fx-tilt:hover .fx-glare{opacity:1}

/* Profundidad: la tarjeta se eleva con sombra roja + aro dorado */
.fx-tilt:hover{box-shadow:0 34px 70px -26px rgba(200,0,26,.55), 0 0 0 1px rgba(212,175,55,.30)!important}

/* ---------- Parallax sutil del hero (profundidad al mover el ratón) ---------- */
.fx-parallax{will-change:transform;transition:transform .4s cubic-bezier(.2,.7,.2,1)}

/* ---------- Accesibilidad y táctil ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-shine::after{animation:none;opacity:0}
  .fx-sheen,.fx-spot,.fx-glare{display:none}
  .fx-tilt,.fx-parallax{transform:none!important}
}
@media (hover:none),(pointer:coarse){
  /* en táctil: se conserva la raya del escudo, se omite el tilt/brillo de tarjeta */
  .fx-sheen,.fx-spot,.fx-glare{display:none}
}