/* fallow-ignore-file unused-file */
/* Living images (docs/LOOP.md). The still <img> is the base layer; loop.js stacks muted <video> layers over it. */
.loop{position:relative;overflow:hidden;width:100%;height:100%}
.frame>.loop,.fxb-media>.loop,.card-media>.loop,.phx-media>.loop{position:absolute;inset:0}
.card-media{position:relative}
.loop .lp-c{display:none}
.loop .loop-poster{display:block;width:100%;height:100%;object-fit:cover}
.lp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .6s linear}
.lp-v.is-on{opacity:1}
.loop[data-lp="hover"] .lp-v{transition-duration:.45s}

/* hover cards: a flat glowing card at rest (a slow edge glow), the clip fades in over the still on hover/focus */
.card.has-clip{box-shadow:0 0 0 1px rgba(98,182,255,.16),0 18px 46px -32px rgba(47,123,255,.4);animation:lp-glow 5.5s ease-in-out infinite}
.card.has-clip:hover,.card.has-clip:focus-within{box-shadow:0 0 0 1px rgba(98,182,255,.5),0 24px 64px -28px rgba(47,123,255,.7)}
.card.has-clip:hover .card-media .media,.card.has-clip:focus-within .card-media .media{transform:none}
@keyframes lp-glow{0%,100%{box-shadow:0 0 0 1px rgba(98,182,255,.12),0 18px 44px -32px rgba(47,123,255,.3)}50%{box-shadow:0 0 0 1px rgba(98,182,255,.36),0 22px 58px -28px rgba(47,123,255,.6)}}

/* a still beat between clips (LoopHold): the device card + a status chip over a dark glow, faded in by loop.js */
.lp-hold{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0a1222;opacity:0;transition:opacity .5s ease;pointer-events:none}
.lp-hold.is-on{opacity:1}
.lp-hold-glow{position:absolute;inset:0;background:radial-gradient(55% 60% at 50% 45%,rgba(47,123,255,.32),transparent 70%)}
.lp-hold-img{position:relative;width:min(44%,230px);height:auto;border-radius:12px;box-shadow:0 26px 50px -18px rgba(0,0,0,.7),0 0 0 1px rgba(98,182,255,.25)}
.lp-hold-chip{position:relative;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(5,7,11,.72);border:1px solid rgba(98,182,255,.32);color:#eef2f8;font-size:13px;line-height:1.25}
.lp-hold-chip svg{width:22px;height:22px;fill:none;stroke:#62b6ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lp-hold-chip b{display:block;font-weight:600;font-size:14px}

/* reduced motion: the still only, never a video, no glow animation */
@media(prefers-reduced-motion:reduce){.lp-v{display:none!important}.card.has-clip{animation:none}.lp-hold{display:none}}
/* How It Works 'Silent standby' on paper: more motion against the white. The device film floats slowly
   and quiet blue rings spread out from its frame, two at a time. Reduced motion: the global rule in site.css stops both */
#standby .frame{animation:sb-float 6s ease-in-out infinite,sb-rings 3.2s ease-out infinite}
@keyframes sb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sb-rings{0%{box-shadow:0 40px 90px -40px var(--glow),0 0 0 0 rgba(47,123,255,.34),0 0 0 0 rgba(47,123,255,.2)}
  60%{box-shadow:0 40px 90px -40px var(--glow),0 0 0 18px rgba(47,123,255,.08),0 0 0 36px rgba(47,123,255,.05)}
  100%{box-shadow:0 40px 90px -40px var(--glow),0 0 0 28px rgba(47,123,255,0),0 0 0 56px rgba(47,123,255,0)}}