/* Efectos de «servicios»: generado desde assets/css/src/fx/ (materiales, mat-cristal, mat-bronce-acero, cierre-engranajes). */
/* ---------- 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; }

/* Cristal (láminas de Diseño Web): un destello esmeralda recorre el canto de cada lámina. */
/* Cada canto es una franja estrecha con margen a los lados para que el resplandor esmeralda no se corte. */
.edges i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: max(2.6%, 10px); height: calc(var(--h) * 1%); margin-left: max(-1.3%, -5px); overflow: hidden; }
.edges i.top { left: 53.6%; top: 20.6%; width: 33%; height: max(3.6%, 10px); margin: 0; transform: rotate(-2.4deg); transform-origin: 0 50%; }
.edges i::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-101%);
  background:
    linear-gradient(to bottom, transparent 30%, rgba(237, 232, 223, 1) 50%, transparent 70%) 50% 0 / max(22%, 2px) 100% no-repeat,
    radial-gradient(ellipse 50% 28% at 50% 50%, rgba(120, 240, 160, .95), rgba(78, 189, 95, .45) 55%, transparent 100%);
}
.edges i.top::before {
  transform: translateX(-101%);
  background:
    linear-gradient(to right, transparent 30%, rgba(237, 232, 223, 1) 50%, transparent 70%) 0 50% / 100% max(22%, 2px) no-repeat,
    radial-gradient(ellipse 28% 50% at 50% 50%, rgba(120, 240, 160, .95), rgba(78, 189, 95, .45) 55%, transparent 100%);
}
/* En reposo: una pasada lenta y tenue cada 7 s. */
.motion [data-material].is-live .edges i::before { opacity: .5; animation: swf-edge 7s var(--ease) calc(var(--i) * .28s) infinite; }
.motion [data-material].is-live .edges i.top::before { animation-name: swf-edge-x; }
/* En hover (o al entrar en pantalla en táctil): una pasada nítida, lámina a lámina. */
.motion [data-material].is-hot .edges i::before, .motion a:hover [data-material] .edges i::before, .motion [data-material]:hover .edges i::before { opacity: 1; animation: swf-edge-hot 1.5s var(--ease) calc(var(--i) * .13s) both; }
.motion [data-material].is-hot .edges i.top::before, .motion a:hover [data-material] .edges i.top::before, .motion [data-material]:hover .edges i.top::before { animation-name: swf-edge-hot-x; }
@keyframes swf-edge { 0% { transform: translateY(-101%); } 26%, 100% { transform: translateY(101%); } }
@keyframes swf-edge-x { 0% { transform: translateX(-101%); } 26%, 100% { transform: translateX(101%); } }
@keyframes swf-edge-hot { from { transform: translateY(-101%); } to { transform: translateY(101%); } }
@keyframes swf-edge-hot-x { from { transform: translateX(-101%); } to { transform: translateX(101%); } }

/* 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 Servicios: engranajes de acero que engranan y giran. */
.gears { position: absolute; right: 13%; top: 52%; width: 0; height: 0; transform: scale(1.55); color: rgba(244, 181, 61, .3); }
.gear { position: absolute; max-width: none; transform-origin: 50% 50%; }
.gear--a { left: -95.5px; top: -95.5px; }
.gear--b { left: -191.5px; top: 8.5px; color: rgba(190, 180, 100, .28); transform: rotate(8deg); }
.gear--c { left: -270px; top: -10px; color: rgba(142, 178, 107, .3); }
.motion .band.is-live .gear--a { animation: swf-orbit 36s linear infinite; }
.motion .band.is-live .gear--b { animation: swf-orbit 24s linear infinite reverse; }
.motion .band.is-live .gear--c { animation: swf-orbit 18s linear infinite; }
@media (max-width: 1023px) { .gears { right: 4%; top: 78%; transform: scale(1); opacity: .7; } }