/* ==========================================================================
   Securcast Italia — animated SVG scene system
   Generated from the approved design system. Palette values are overridden at
   runtime by the Customizer (see inc/customizer.php), so edit colours there
   rather than here.
   ========================================================================== */

/* ============================================================================
   ANIMATED SCENE SYSTEM
   Line-drawn SVG scenes replace photography in every image slot. Animation only
   runs once the slot is in view (.is-in) and stops entirely under reduced motion.
   ========================================================================== */
.art{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.shot--art::after{background:linear-gradient(155deg,rgba(46,155,219,.16),transparent 52%,rgba(6,7,10,.5));
  mix-blend-mode:normal}
.shot--art::before{background:
  radial-gradient(78% 62% at 74% 16%,rgba(150,182,235,.13),transparent 64%),
  radial-gradient(70% 62% at 14% 88%,rgba(46,155,219,.17),transparent 66%),
  linear-gradient(155deg,#151920 0%,#0A0C10 56%,#07080B 100%)}

.art .l{fill:none;stroke:rgba(255,255,255,.36);stroke-width:1.5;
  vector-effect:non-scaling-stroke;stroke-linecap:square}
.art .d{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1;vector-effect:non-scaling-stroke}
.art .f{fill:rgba(255,255,255,.04)}
.art .r{fill:none;stroke:var(--red);stroke-width:1.5;vector-effect:non-scaling-stroke}
.art .rf{fill:var(--red)}
.art .cone{fill:rgba(46,155,219,.13);stroke:rgba(46,155,219,.34);stroke-width:1;
  vector-effect:non-scaling-stroke}
.art--camera .cone,.art--desk .cone,.art--motion .cone{fill:rgba(150,190,255,.12);
  stroke:rgba(150,190,255,.3)}
.art .t{font-family:var(--f-mono);font-size:14px;font-weight:400;letter-spacing:.18em;
  fill:rgba(255,255,255,.4);text-transform:uppercase}

/* --- shared transform boxes ------------------------------------------------ */
.art .an-wave,.art .an-wave2,.art .an-halo,.art .an-scanring,.art .an-arm,
.art .an-seal,.art .an-heat{transform-box:fill-box;transform-origin:center}
.art .an-mercury{transform-box:fill-box;transform-origin:bottom}
.art .an-radar{transform-box:fill-box;transform-origin:0% 50%}
.art .an-cam{transform-box:fill-box;transform-origin:50% 0%}

/* --- ambient ---------------------------------------------------------------*/
.art .an-float{animation:aFloat 9s ease-in-out infinite alternate}
.art .an-tilt{animation:aTilt 11s ease-in-out infinite alternate}
@keyframes aFloat{to{transform:translateY(-14px)}}
@keyframes aTilt{0%{transform:translate(-6px,4px) rotate(-.5deg)}100%{transform:translate(6px,-6px) rotate(.6deg)}}

/* --- detection waves -------------------------------------------------------*/
.art .an-wave{opacity:0;animation:aWave 3.4s ease-out infinite;
  animation-delay:calc(var(--i,0) * 1.13s)}
.art .an-wave2{opacity:0;animation:aWave 3.4s ease-out infinite;
  animation-delay:calc(.55s + var(--i,0) * 1.13s)}
@keyframes aWave{0%{transform:scale(.34);opacity:0}
  18%{opacity:.85}100%{transform:scale(1.5);opacity:0}}
.art .an-scanring{opacity:0;animation:aScan 3.6s ease-out infinite;
  animation-delay:calc(var(--i,0) * 1.8s)}
@keyframes aScan{0%{transform:scale(.2);opacity:0}20%{opacity:.9}100%{transform:scale(3.6);opacity:0}}

/* --- nodes & indicators ----------------------------------------------------*/
.art .an-node{animation:aNode 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .34s)}
@keyframes aNode{0%,100%{opacity:.55}50%{opacity:1}}
.art .an-halo{opacity:0;animation:aWave 3.6s ease-out infinite;
  animation-delay:calc(var(--i,0) * .45s)}
.art .an-blink{animation:aBlink 2.1s steps(1) infinite;
  animation-delay:calc(var(--i,0) * .3s)}
@keyframes aBlink{0%,60%{opacity:1}61%,100%{opacity:.18}}
.art .an-strobe{animation:aStrobe .9s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .45s)}
@keyframes aStrobe{0%,100%{opacity:.2}50%{opacity:1}}

/* --- drawing ---------------------------------------------------------------*/
.art .an-draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  animation:aDraw 2.6s var(--ease-io) forwards;animation-delay:calc(.2s + var(--i,0) * .5s)}
@keyframes aDraw{to{stroke-dashoffset:0}}
.art .an-type{stroke-dasharray:200;stroke-dashoffset:200;
  animation:aType 4.4s var(--ease-io) infinite}
@keyframes aType{0%{stroke-dashoffset:200}30%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:200}}
.art .an-line{stroke-dasharray:320;stroke-dashoffset:320;
  animation:aLine 5.4s var(--ease-io) infinite;animation-delay:calc(var(--i,0) * .22s)}
@keyframes aLine{0%{stroke-dashoffset:320}26%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:320}}
.art .an-tick{stroke-dasharray:70;stroke-dashoffset:70;
  animation:aTick 5s var(--ease-io) infinite;animation-delay:calc(.4s + var(--i,0) * .34s)}
@keyframes aTick{0%,14%{stroke-dashoffset:70}34%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:70}}
.art .an-shield{stroke-dasharray:420;stroke-dashoffset:420;
  animation:aShield 6s var(--ease-io) infinite;animation-delay:calc(var(--i,0) * .3s)}
@keyframes aShield{0%{stroke-dashoffset:420}30%,76%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
.art .an-key2{stroke-dasharray:60;stroke-dashoffset:60;animation:aTick 4s var(--ease-io) infinite}
.art .an-unlock{opacity:0;animation:aUnlock 5s ease-in-out infinite}
@keyframes aUnlock{0%,44%{opacity:0}56%,88%{opacity:1}100%{opacity:0}}

/* --- travelling energy -----------------------------------------------------*/
.art .an-dash{stroke-dasharray:14 10;animation:aMarch 3.2s linear infinite}
@keyframes aMarch{to{stroke-dashoffset:-48}}
.art .an-flow{stroke-dasharray:10 300;animation:aFlow 3.4s linear infinite;
  animation-delay:calc(var(--i,0) * .9s)}
@keyframes aFlow{to{stroke-dashoffset:-310}}
.art .an-beam{stroke-dasharray:8 14;opacity:.75;
  animation:aBeam 2.6s linear infinite;animation-delay:calc(var(--i,0) * .35s)}
@keyframes aBeam{to{stroke-dashoffset:-44}}
.art .an-sweepline{animation:aSweepY 7.5s var(--ease-io) infinite}
@keyframes aSweepY{0%{transform:translateY(760px);opacity:0}
  12%{opacity:.75}86%{opacity:.75}100%{transform:translateY(120px);opacity:0}}
.art .an-scanbar{animation:aScanBar 5.2s var(--ease-io) infinite}
@keyframes aScanBar{0%{transform:translateY(0);opacity:0}
  10%{opacity:.9}90%{opacity:.9}100%{transform:translateY(440px);opacity:0}}
.art .an-radar{animation:aSpin 7s linear infinite}
@keyframes aSpin{to{transform:rotate(360deg)}}
.art .an-arm{stroke-dasharray:26 18;opacity:.6;animation:aSpin 16s linear infinite;
  animation-delay:calc(var(--i,0) * -8s)}

/* --- scene specifics -------------------------------------------------------*/
.art .an-win{animation:aWin 6.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .55s)}
@keyframes aWin{0%,100%{fill:rgba(255,255,255,.02)}45%,65%{fill:rgba(46,155,219,.16)}}
.art .an-cone{animation:aConeBreathe 5s ease-in-out infinite}
@keyframes aConeBreathe{0%,100%{opacity:.55}50%{opacity:1}}
.art .an-cam{animation:aSwivel 9s ease-in-out infinite alternate}
@keyframes aSwivel{0%{transform:rotate(-11deg)}100%{transform:rotate(11deg)}}
.art .an-lock{animation:aLockPulse 4.6s ease-in-out infinite}
@keyframes aLockPulse{0%,100%{opacity:.25}40%,60%{opacity:1}}
.art .an-smoke{animation:aSmoke 6.5s ease-in-out infinite}
@keyframes aSmoke{0%{transform:translateY(40px) scale(.72);opacity:0}
  30%{opacity:1}100%{transform:translateY(-140px) scale(1.5);opacity:0}}
.art .an-fog{animation:aFog 7s ease-in-out infinite}
@keyframes aFog{0%{transform:scale(.3) translateY(-90px);opacity:0}
  35%{opacity:1}100%{transform:scale(1.35) translateY(10px);opacity:.15}}
.art .an-heat{animation:aHeat 4.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .6s)}
@keyframes aHeat{0%,100%{transform:scale(.86);opacity:.14}50%{transform:scale(1.1);opacity:.34}}
.art .an-mercury{animation:aMercury 5.6s ease-in-out infinite}
@keyframes aMercury{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
.art .an-row{opacity:0;animation:aRow .9s var(--ease) forwards;
  animation-delay:calc(.5s + var(--i,0) * .22s)}
@keyframes aRow{to{opacity:1}}
.art .an-feed{opacity:0;animation:aRow .8s var(--ease) forwards;
  animation-delay:calc(.3s + var(--i,0) * .16s)}
.art .an-mod{opacity:0;animation:aRow .8s var(--ease) forwards;
  animation-delay:calc(.3s + var(--i,0) * .2s)}
.art .an-key{opacity:.35;animation:aKey 5.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .18s)}
@keyframes aKey{0%,100%{opacity:.28}42%,50%{opacity:.9}}
.art .an-box{opacity:0;animation:aBox 5.6s var(--ease-io) infinite;
  animation-delay:calc(var(--i,0) * .8s)}
@keyframes aBox{0%{opacity:0;transform:scale(.94)}18%,74%{opacity:1;transform:none}
  100%{opacity:0;transform:scale(.94)}}
.art .an-notify{opacity:0;animation:aNotify 6s var(--ease-io) infinite}
@keyframes aNotify{0%{opacity:0;transform:translate(24px,10px)}
  16%,70%{opacity:1;transform:none}100%{opacity:0;transform:translate(24px,10px)}}
.art .an-badge{animation:aBadge 5s var(--ease-io) infinite}
@keyframes aBadge{0%,10%{transform:translate(40px,0);opacity:.5}
  40%,60%{transform:translate(-24px,-30px);opacity:1}100%{transform:translate(40px,0);opacity:.5}}
.art .an-doorswing{animation:aDoor 6s var(--ease-io) infinite}
@keyframes aDoor{0%,44%{opacity:.12}62%,84%{opacity:.5}100%{opacity:.12}}
.art .an-walk{animation:aWalk 7s linear infinite;animation-delay:calc(var(--i,0) * 2.2s)}
@keyframes aWalk{0%{transform:translateX(0);opacity:0}
  8%{opacity:1}88%{opacity:1}100%{transform:translateX(420px);opacity:0}}
.art .an-walk2{animation:aWalk2 8s ease-in-out infinite}
@keyframes aWalk2{0%{transform:translate(120px,0);opacity:0}
  14%{opacity:1}80%{opacity:1}100%{transform:translate(-130px,-46px);opacity:0}}
.art .an-seal{animation:aSeal 5s var(--ease-io) infinite}
@keyframes aSeal{0%{transform:scale(.6);opacity:0}22%,80%{transform:scale(1);opacity:1}
  100%{transform:scale(.6);opacity:0}}
/* --- a scene only animates while it is actually on screen ------------------
   Declared last: the `animation` shorthand above resets animation-play-state,
   so this pair has to come after every shorthand declaration. */
.art [class*="an-"]{animation-play-state:paused}
.shot.playing .art [class*="an-"]{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  .art [class*="an-"]{animation:none!important;opacity:1!important;
    stroke-dashoffset:0!important;transform:none!important}
  .art .an-wave,.art .an-wave2,.art .an-halo,.art .an-scanring{opacity:.3!important}
}