/* Ilustraciones de servicios (resources/views/site/scenes). SVG con trazos finos sobre fondo
   oscuro, en los colores de la marca. Las animaciones corren solo con .is-visible (site.js). */

.scene{position:relative;margin:0;aspect-ratio:480/300;border-radius:16px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 85% 10%,rgba(31,91,255,.22),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(255,106,0,.12),transparent 60%),#0B0D11;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(100% 100% at 50% 40%,#000,transparent 85%);mask-image:radial-gradient(100% 100% at 50% 40%,#000,transparent 85%)}
.scene svg{display:block;width:100%;height:100%;overflow:visible}

/* Trazos */
.scene .l,.scene .l2,.scene .o,.scene .b,.scene .g,.scene .y,.scene .w,.scene .y-wide{fill:none;stroke-linecap:round;stroke-linejoin:round}
.scene .l{stroke:rgba(255,255,255,.34);stroke-width:1.6}
.scene .l2{stroke:rgba(255,255,255,.12);stroke-width:1.2}
.scene .o{stroke:var(--naranja);stroke-width:2.2}
.scene .b{stroke:var(--azul-claro);stroke-width:2}
.scene .g{stroke:var(--verde);stroke-width:2.2}
.scene .y{stroke:var(--amarillo);stroke-width:2}
.scene .w{stroke:#fff;stroke-width:2}
.scene .y-wide{stroke:var(--amarillo);stroke-width:7;opacity:.85}

/* Rellenos */
.scene .fo,.scene .fo-solid{fill:var(--naranja)}
.scene .fb,.scene .fb-solid{fill:var(--azul)}
.scene .fg,.scene .fg-solid{fill:var(--verde)}
.scene .fy,.scene .fy-solid{fill:var(--amarillo)}
.scene .fw{fill:#fff}
.scene .fb-solid,.scene .fg-solid,.scene .fo-solid,.scene .fy-solid{opacity:.9}
.scene .pane{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.16);stroke-width:1.2}
.scene .pane-strong{fill:rgba(20,23,29,.92);stroke:rgba(255,255,255,.26);stroke-width:1.3}
.scene .win{fill:rgba(23,201,100,.12);stroke:var(--verde);stroke-width:1.4}
.scene .sign{fill:rgba(10,11,13,.95);stroke:rgba(255,201,79,.55);stroke-width:1.4}
.scene .caret{fill:var(--azul-claro)}

/* Texto */
.scene .t,.scene .t-g,.scene .t-dark,.scene .t-w{font-family:var(--mono);font-size:9px;letter-spacing:.12em}
.scene .t{fill:rgba(255,255,255,.55)}
.scene .t-g{fill:var(--verde);font-size:11px}
.scene .t-dark{fill:#0A0B0D;font-size:11px;font-weight:600;letter-spacing:0}
.scene .t-w{fill:#fff;font-size:20px;letter-spacing:0}
.scene .t-o{fill:var(--naranja)}

/* Movimiento: pausado hasta que la escena entra en pantalla */
.scene *{animation-play-state:paused}
.scene.is-visible *{animation-play-state:running}
.scene .flow{stroke-dasharray:5 7;animation:sc-flow 1.6s linear infinite}
.scene .pulse{transform-box:fill-box;transform-origin:center;animation:sc-pulse 2.2s ease-in-out infinite}
.scene .blink{animation:sc-blink 1.4s steps(2,jump-none) infinite}
.scene .blink.d2{animation-delay:.5s}
.scene .blink.d3{animation-delay:.9s}
.scene .float{animation:sc-float 6s ease-in-out infinite}
.scene .draw{stroke-dasharray:420;stroke-dashoffset:420;animation:sc-draw 2.4s var(--ease) forwards}
.scene .grow{transform-box:fill-box;transform-origin:bottom;animation:sc-grow 1.4s var(--ease) both}
.scene .grow-x{stroke-dasharray:400;stroke-dashoffset:400;animation:sc-draw 2s var(--ease) forwards}
.scene .spin{transform-box:fill-box;transform-origin:center;animation:sc-spin 6s linear infinite}
.scene .spin-slow{animation:sc-spin 40s linear infinite}
.scene .rise{transform-box:fill-box;animation:sc-rise 3.2s ease-in infinite}
.scene .rise.d2{animation-delay:1.4s}
.scene .focus{transform-box:fill-box;transform-origin:center;animation:sc-focus 3s ease-in-out infinite}
.scene .playhead{animation:sc-play 6s linear infinite}
.scene .climb{animation:sc-climb 4s var(--ease) infinite}
.scene .drive{animation:sc-drive 5s ease-in-out infinite}
.scene .glow .sign-letters{animation:sc-neon 3.4s ease-in-out infinite}
.scene .cursor{animation:sc-float 4s ease-in-out infinite}

@keyframes sc-flow{to{stroke-dashoffset:-24}}
@keyframes sc-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
@keyframes sc-blink{50%{opacity:.25}}
@keyframes sc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-rise{0%{transform:translateY(20px);opacity:0}20%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
@keyframes sc-focus{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
@keyframes sc-play{from{transform:translateX(-200px)}to{transform:translateX(150px)}}
@keyframes sc-climb{0%,15%{transform:translateY(110px)}45%,100%{transform:translateY(0)}}
@keyframes sc-drive{0%,100%{transform:translateX(0)}50%{transform:translateX(-30px)}}
@keyframes sc-neon{0%,100%{filter:drop-shadow(0 0 6px rgba(255,106,0,.9))}50%{filter:drop-shadow(0 0 1px rgba(255,106,0,.3))}}

@media (prefers-reduced-motion:reduce){
  .scene *{animation:none!important}
  .scene .draw,.scene .grow-x{stroke-dashoffset:0}
}