/* BIMARG · efectos de la home (fx.css)
   Luz que sigue al cursor en las tarjetas, horizonte de luz en el cierre
   y wordmark gigante al pie. Todo es aditivo: no cambia el contenido. */

/* 1. Tarjetas: luz que sigue al cursor y borde que se prende */
.fx-on .fx-spot{
  background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(0,191,255,.11),transparent 45%);
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .45s cubic-bezier(.22,1,.36,1);
}
.fx-on .fx-spot:hover{
  border-color:rgba(0,191,255,.38);
  box-shadow:0 0 0 1px rgba(0,191,255,.12),0 24px 70px -36px rgba(0,191,255,.55);
}

/* 2. Cierre: horizonte de luz que respira */
.final .fx-horizon{
  position:absolute;left:50%;bottom:calc(-240vw + 190px);z-index:0;
  width:240vw;height:240vw;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,#071019 0%,#05080b 40%,#080808 70%);
  box-shadow:
    0 -1px 0 rgba(190,240,255,.85),
    0 -6px 24px rgba(0,191,255,.55),
    0 -40px 120px rgba(0,191,255,.32),
    0 -120px 260px rgba(0,191,255,.16),
    inset 0 40px 90px rgba(0,191,255,.18);
  animation:fx-respira 9s ease-in-out infinite;
}
.final .fx-horizon::after{   /* destello que recorre el borde */
  content:"";position:absolute;left:50%;top:-2px;width:38%;height:4px;transform:translateX(-50%);
  border-radius:50%;filter:blur(2px);
  background:linear-gradient(90deg,transparent,rgba(220,248,255,.95),transparent);
  animation:fx-destello 9s ease-in-out infinite;
}
@keyframes fx-respira{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.012)}}
@keyframes fx-destello{0%,100%{opacity:.35;width:26%}50%{opacity:1;width:44%}}
.final{padding-bottom:clamp(180px,20vw,280px)}

/* 3. Pie: BIMARG gigante que se corta abajo */
.footer{position:relative;overflow:hidden}
.footer .fx-wordmark{
  display:block;width:min(1400px,100%);margin:clamp(40px,6vw,80px) auto calc(-1 * clamp(28px,5.5vw,80px));
  padding:0 var(--gutter,24px);pointer-events:none;
  opacity:0;transform:translateY(40px);
  transition:opacity 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1);
}
.footer .fx-wordmark.fx-in{opacity:1;transform:none}
.footer .fx-wordmark img{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  .final .fx-horizon,.final .fx-horizon::after{animation:none}
  .footer .fx-wordmark{opacity:1;transform:none;transition:none}
}