/* Efectos de «nosotros»: generado desde assets/css/src/fx/ (materiales, mat-bronce-acero, cierre-hilo). */
/* ---------- Materiales: cada imagen de servicio reacciona a la luz según lo que es ----------
   Hover en ratón; en táctil, la clase .is-hot al entrar en pantalla. Los bucles solo corren con .is-live. */
[data-material] { position: relative; isolation: isolate; }
[data-material] img, .over { transition: transform .9s var(--ease), opacity .6s var(--ease); }
/* Capa de luces registrada sobre la imagen (misma geometría y mismo zoom que ella). */
.over { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.over--wide { inset: 0 auto 0 50%; height: 100%; aspect-ratio: 16 / 9; translate: -50% 0; }
[data-material]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; }

/* Zoom */
.service-card__media.is-hot > :is(img, .over), .explore__media.is-hot > :is(img, .over), .presence__media.is-hot > img { transform: scale(1.05); }
.service-row__media.is-hot { --z: 1.13; }
@media (hover: hover) {
  .service-card:hover [data-material] > :is(img, .over), .explore__card:hover [data-material] > :is(img, .over) { transform: scale(1.05); }
  .motion .service-row__media, .motion .presence__media { transition: transform .35s var(--ease); }
  .motion .service-row__media.is-glow, .motion .presence__media.is-glow { transform: perspective(1100px) rotateY(calc(var(--nx) * 2.4deg)) rotateX(calc(var(--ny) * -2.4deg)); }
  .motion .service-row__media.is-glow { --z: 1.13; }
}

/* Mármol (gráfica de Posicionamiento SEO): los puntos laten en ámbar y las barras en verde, cada uno a su ritmo. */
.glows { opacity: .7; }
.glows i, .glows b { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); opacity: .4; will-change: opacity, transform; }
.glows i { width: 7.5%; aspect-ratio: 1; margin: -3.75% 0 0 -3.75%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 96, .95), rgba(244, 150, 40, .5) 28%, transparent 68%); }
.glows i.g { background: radial-gradient(circle, rgba(196, 240, 156, .95), rgba(120, 196, 104, .5) 28%, transparent 68%); }
.glows b { width: 7%; height: calc((67 - var(--y)) * 1%); margin-left: -3.5%; border-radius: 40% / 12%; background: radial-gradient(ellipse at 50% 42%, rgba(156, 226, 124, .62), rgba(120, 190, 100, .22) 48%, transparent 74%); }
.motion [data-material].is-live .glows :is(i, b) { animation: swf-breathe calc(var(--d) * 1s) ease-in-out calc(var(--o) * -1s) infinite; }
@keyframes swf-breathe { 0%, 100% { opacity: .16; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.14); } }
[data-material].is-hot .glows, a:hover [data-material] .glows, [data-material]:hover .glows { opacity: 1; }

/* Bronce (antena de Publicidad): la antena emite ondas de señal. */
[data-material="bronce"]::after {
  inset: -40%; transform: scale(.7);
  background: repeating-radial-gradient(circle at 50% 42%, transparent 0 26px, rgba(244, 181, 61, .24) 26px 27.5px, transparent 27.5px 54px, rgba(142, 178, 107, .2) 54px 55.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 7%, black 18%, transparent 56%); mask-image: radial-gradient(circle at 50% 42%, transparent 7%, black 18%, transparent 56%);
}
/* Acero (engranajes de Automatizaciones): un haz de luz gira sobre el eje. */
[data-material="acero"]::after {
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0 286deg, rgba(244, 181, 61, .3) 334deg, rgba(237, 232, 223, .14) 350deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, black 0 30%, transparent 60%); mask-image: radial-gradient(circle, black 0 30%, transparent 60%);
}
.motion [data-material="bronce"].is-hot::after { animation: swf-signal 2.2s linear infinite; }
.motion [data-material="acero"].is-hot::after { animation: swf-beam 3.4s linear infinite; }
@media (hover: hover) {
  .motion a:hover [data-material="bronce"]::after, .motion [data-material="bronce"]:hover::after { animation: swf-signal 2.2s linear infinite; }
  .motion a:hover [data-material="acero"]::after, .motion [data-material="acero"]:hover::after { animation: swf-beam 3.4s linear infinite; }
}
@keyframes swf-signal { 0% { transform: scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes swf-beam { 0% { transform: rotate(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: rotate(1turn); opacity: 0; } }

/* Cierre de Nosotros: el hilo de luz cruza la banda, late y se inclina hacia el cursor. */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(calc(var(--ny) * 12px)); transition: transform .8s var(--ease); }
.thread path { fill: none; }
.thread__base { stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(244, 181, 61, .55)); opacity: .75; }
.thread__pulse { stroke: var(--text-1); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .05 1; stroke-dashoffset: .05; opacity: 0; filter: drop-shadow(0 0 8px rgba(244, 181, 61, .9)); }
.motion .band.is-live .thread__pulse { opacity: .95; animation: swf-pulse 6s linear infinite; }
@keyframes swf-pulse { from { stroke-dashoffset: .05; } to { stroke-dashoffset: -1; } }