/* Kovan Digital — efectos 3D y animaciones (activados por js/fx.js con la clase .fx en <html>).
   Sin la clase .fx (sin JS o con "reducir movimiento") la web se ve igual que antes.
   Se usan las propiedades sueltas rotate/translate/scale para no pisar los transform de .reveal y :hover. */

/* ---------- Fondo de circuito animado (hero y cabeceras de página) ---------- */
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero .fx-canvas {
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.45) 40%, #000 65%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.45) 40%, #000 65%);
}
@media (max-width: 900px) {
  .hero .fx-canvas {
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 55%, #000 75%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 55%, #000 75%);
  }
}
.page-head { position: relative; overflow: hidden; isolation: isolate; }
.page-head > .wrap { position: relative; z-index: 1; }
.page-head .fx-canvas {
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 35%, #000 75%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 35%, #000 75%);
}

/* ---------- Barra de progreso de lectura ---------- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1000;
  background: var(--ink);
  transform-origin: 0 50%;
  scale: var(--fx-progress, 0) 1;
  opacity: 0.85;
  pointer-events: none;
}

/* ---------- Hero: entrada en 3D ---------- */
.fx .hero { perspective: 1200px; }
.fx .hero-art {
  translate: var(--fx-art-x, 0) var(--fx-art-y, 0);
  rotate: var(--fx-art-ax, 0) var(--fx-art-ay, 1) 0 var(--fx-art-ang, 0deg);
  transition: rotate 0.6s cubic-bezier(.2, .7, .2, 1), translate 0.6s cubic-bezier(.2, .7, .2, 1), opacity 1.4s ease;
  animation: fx-art-in 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes fx-art-in {
  from { opacity: 0; scale: 1.08; filter: blur(6px); }
  to { scale: 1; filter: none; }
}
.fx .hero-content { perspective: 800px; }
.fx .hero h1 .fx-w {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: fx-word 0.95s cubic-bezier(.2, .75, .2, 1) both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.075s);
}
@keyframes fx-word {
  from { opacity: 0; transform: translateY(0.45em) rotateX(-75deg); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.fx .hero .eyebrow,
.fx .hero-content > p,
.fx .hero-cta,
.fx .hero-meta {
  animation: fx-rise 0.9s cubic-bezier(.2, .7, .2, 1) both;
}
.fx .hero .eyebrow { animation-delay: 0.05s; }
.fx .hero-content > p { animation-delay: 0.75s; }
.fx .hero-cta { animation-delay: 0.9s; }
.fx .hero-meta { animation-delay: 1.05s; }
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.fx .hero-meta span { position: relative; }
.fx .hero-meta span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0.24em;
  bottom: -8px;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
  animation: fx-line 1.1s cubic-bezier(.2, .7, .2, 1) both;
  opacity: 0.5;
}
.fx .hero-meta span:nth-child(1)::after { animation-delay: 1.3s; }
.fx .hero-meta span:nth-child(2)::after { animation-delay: 1.45s; }
.fx .hero-meta span:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes fx-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Aparición al hacer scroll, ahora en 3D ---------- */
.fx .reveal {
  opacity: 0;
  transform: perspective(1100px) translate3d(0, 38px, 0) rotateX(12deg);
  transform-origin: 50% 100%;
  transition: opacity 0.9s cubic-bezier(.2, .7, .2, 1), transform 0.9s cubic-bezier(.2, .7, .2, 1),
              background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
              rotate 0.5s cubic-bezier(.2, .7, .2, 1), translate 0.5s cubic-bezier(.2, .7, .2, 1);
}
.fx .reveal.is-visible { opacity: 1; transform: none; }
.fx .reveal.fx-done { transition-delay: 0s; }

/* ---------- Tarjetas con inclinación 3D y brillo que sigue al cursor ---------- */
.fx .services-grid,
.fx .cases-grid,
.fx .news-grid,
.fx .pillars-grid,
.fx .contact-channels,
.fx .channels { perspective: 1000px; }
.fx .fx-tilt {
  position: relative;
  transform-style: preserve-3d;
  rotate: var(--fx-ax, 0) var(--fx-ay, 1) 0 var(--fx-ang, 0deg);
  translate: 0 var(--fx-lift, 0) 0;
  will-change: rotate;
}
.fx .fx-tilt:not(.reveal) {
  transition: background-color 0.25s ease, border-color 0.25s ease, rotate 0.5s cubic-bezier(.2, .7, .2, 1), translate 0.5s cubic-bezier(.2, .7, .2, 1);
}
.fx .fx-tilt.fx-tilting,
.fx .reveal.fx-tilt.fx-tilting { transition-duration: 0.9s, 0.9s, 0.25s, 0.25s, 0.25s, 0.12s, 0.3s; transition-delay: 0s; }
.fx .fx-tilt:not(.reveal).fx-tilting { transition-duration: 0.25s, 0.25s, 0.12s, 0.3s; }
.fx .service.fx-tilt:hover { transform: none; }
.fx .fx-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 50%), color-mix(in srgb, var(--ink) 9%, transparent), transparent 60%);
}
.fx .fx-tilt.fx-tilting::after { opacity: 1; }
/* el icono y el número "flotan" por encima de la tarjeta */
.fx .fx-tilt .icon,
.fx .fx-tilt .num { translate: 0 0 28px; transition: translate 0.5s cubic-bezier(.2, .7, .2, 1); }
.fx .fx-tilt.fx-tilting .icon { translate: 0 -2px 46px; }

/* Iconos de servicio: el trazo se dibuja al aparecer */
.fx .service .icon svg *,
.fx .case .icon svg * {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4, .1, .2, 1) 0.25s;
}
.fx .is-visible .icon svg * { stroke-dashoffset: 0; }

/* ---------- Pilares: línea superior que se dibuja ---------- */
.fx .pillar { position: relative; }
.fx .pillar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink), transparent);
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) 0.3s;
}
.fx .pillar.is-visible::before { transform: scaleX(1); }

/* ---------- Proceso: barra de avance y paso activo ---------- */
.fx .steps { position: relative; }
.fx .steps::before,
.fx .steps::after {
  content: '';
  position: absolute;
  left: -22px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.fx .steps::after {
  background: var(--ink);
  transform-origin: 50% 0;
  transform: scaleY(var(--fx-steps, 0));
}
.fx .step .n { transition: color 0.4s ease, scale 0.5s cubic-bezier(.2, .7, .2, 1); color: var(--muted-2); transform-origin: 0 50%; }
.fx .step h4 { transition: translate 0.5s cubic-bezier(.2, .7, .2, 1); }
.fx .step.fx-active .n { color: var(--ink); scale: 1.18; }
.fx .step.fx-active h4 { translate: 4px 0; }
@media (max-width: 560px) {
  .fx .steps::before, .fx .steps::after { left: -12px; }
}

/* ---------- Declaración: la K gira en 3D con el scroll ---------- */
.fx .statement { perspective: 700px; }
.fx .statement img {
  rotate: y var(--fx-k, 0deg);
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--ink) 14%, transparent));
}
.fx .statement blockquote strong {
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--muted-2) 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.4s cubic-bezier(.2, .7, .2, 1) 0.5s;
}
.fx .statement blockquote.is-visible strong { background-position: 0 0; }

/* ---------- Botones magnéticos ---------- */
.fx .btn,
.fx .btn-ghost {
  translate: var(--fx-bx, 0) var(--fx-by, 0);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, translate 0.35s cubic-bezier(.2, .7, .2, 1);
}
.fx .btn svg { transition: translate 0.3s cubic-bezier(.2, .7, .2, 1); }
.fx .btn:hover svg { translate: 3px 0; }

/* ---------- Banda de contacto: reflejo que la recorre ---------- */
.fx .cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--band-ink) 7%, transparent) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: fx-sheen 7s ease-in-out infinite;
}
@keyframes fx-sheen {
  0%, 35% { background-position: 120% 0; }
  70%, 100% { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
}