/* Features hero motion graphic (#hero-story).
   One glass card: a cinematic night camera view (layered landscape, stars, mist, grain) where a thermal
   subject walks in, a reticle settles, six frames are verified, then an iOS-style notification and a
   call pill appear. Second scene: an animal, no call. Animated by hero-story.js (GSAP).
   Static fallback (no JS / reduced motion) = the person scene's final frame. */

.hs{--hs-ease:cubic-bezier(.16,1,.3,1);--hs-ok:#5eead4;--hs-warn:#fbbf24;position:relative;width:100%;max-width:32rem;margin-inline:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-feature-settings:"tnum" 1,"cv11" 1;color:#fff}
.hs-stage{position:relative;padding-top:3.75rem;perspective:1600px}
.hs-card{position:relative;border-radius:30px;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1px 0 rgba(255,255,255,.12) inset,0 50px 100px -40px rgba(0,0,0,.95),0 30px 60px -30px rgba(20,184,166,.18);transform:rotateX(var(--hs-tx,0deg)) rotateY(var(--hs-ty,0deg));transition:transform .9s var(--hs-ease);will-change:transform}
.hs-halo{position:absolute;inset:8% -6% -4%;background:radial-gradient(50% 50% at 50% 45%,rgba(45,212,191,.16),transparent 70%);filter:blur(30px);pointer-events:none;z-index:-1}

/* Lens */
.hs-lens{position:relative;aspect-ratio:400/275;border-radius:22px;overflow:hidden;background:#071012;isolation:isolate}
.hs-world{position:absolute;inset:0;transform-origin:49% 72%;will-change:transform}
.hs-world svg{display:block;width:100%;height:100%}
.hs-grain{position:absolute;inset:-50%;background:url(/assets/noise.svg);opacity:.09;mix-blend-mode:overlay;pointer-events:none;animation:hs-grain 1.2s steps(6) infinite}
@keyframes hs-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.hs-vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.hs-glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 30%);pointer-events:none}
.hs-hud{text-shadow:0 1px 6px rgba(0,0,0,.8);position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.01em;color:rgba(255,255,255,.88);pointer-events:none}
.hs-hud-l{display:flex;align-items:center;gap:7px}
.hs-dot{width:6px;height:6px;border-radius:50%;background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.18)}
.hs-place{font-weight:500}
.hs-clock{font-weight:400;color:rgba(255,255,255,.72)}
.hs-cam-id{position:absolute;left:14px;bottom:11px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.55);pointer-events:none}
.hs-star{animation:hs-twinkle 4s ease-in-out infinite}
@keyframes hs-twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
.hs-mist{animation:hs-drift 18s ease-in-out infinite alternate}
.hs-mist-b{animation-duration:26s;animation-direction:alternate-reverse}
@keyframes hs-drift{from{transform:translateX(-24px)}to{transform:translateX(24px)}}

/* Verify strip */
.hs-verify{padding:14px 6px 6px}
.hs-verify-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:12px}
.hs-verify-title{color:rgba(255,255,255,.62)}
.hs-count{color:#fff;font-weight:500;min-height:1.2em;text-align:right}
.hs-frames{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.hs-f{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#0a1416;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.hs-f svg{display:block;width:100%;height:100%}
.hs-badge{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.hs-badge::before{content:"–"}
.hs-f.is-ok{box-shadow:0 0 0 1.5px var(--hs-ok),0 0 18px -4px var(--hs-ok)}
.hs-f.is-ok .hs-badge{background:var(--hs-ok);color:#042f2e}
.hs-f.is-ok .hs-badge::before{content:"✓"}
.hs.is-dog .hs-f.is-no{box-shadow:0 0 0 1px rgba(251,191,36,.35)}

/* Notification (iOS-style) */
.hs-notif{position:absolute;left:22px;right:22px;top:0;z-index:3;display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:20px;background:rgba(28,30,36,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 40px -12px rgba(0,0,0,.8)}
.hs-appicon{flex:none;width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;overflow:hidden}
.hs-appicon img{width:30px;height:30px;border-radius:50%}
.hs-notif-body{flex:1;min-width:0;font-size:12px;line-height:1.35}
.hs-notif-top{display:flex;justify-content:space-between;color:rgba(255,255,255,.6);font-size:11px}
.hs-notif-title{font-weight:600;color:#fff;margin-top:1px}
.hs-notif-text{color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-notif-thumb{flex:none;width:44px;height:44px;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.hs-notif-thumb svg{display:block;width:100%;height:100%}

/* Call state: the notification turns into an incoming call */
.hs-notif-slot{position:relative;flex:none;width:44px;height:44px}
.hs-notif-slot>*{position:absolute;inset:0}
.hs-call{border-radius:50%;background:#22c55e;display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.6)}
.hs-notif.is-calling .hs-notif-thumb{opacity:0;transform:scale(.8)}
.hs-notif.is-calling .hs-call{opacity:1;transform:scale(1);animation:hs-ring 1.5s ease-out infinite}
.hs-notif-thumb,.hs-call{transition:opacity .5s var(--hs-ease),transform .6s var(--hs-ease)}
@keyframes hs-ring{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}75%,100%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
.hs-call-line{display:none;align-items:center;gap:7px;color:#bbf7d0}
.hs-notif.is-calling .hs-notif-text{display:none}
.hs-notif.is-calling .hs-call-line{display:flex}
.hs-wave{display:flex;gap:2px;align-items:center;height:12px}
.hs-wave i{width:2px;border-radius:2px;background:#4ade80;height:30%;animation:hs-wave 1s ease-in-out infinite}
.hs-wave i:nth-child(2){animation-delay:-.2s}.hs-wave i:nth-child(3){animation-delay:-.4s}.hs-wave i:nth-child(4){animation-delay:-.6s}.hs-wave i:nth-child(5){animation-delay:-.8s}
@keyframes hs-wave{0%,100%{height:25%}50%{height:100%}}

/* Controls */
.hs-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:0 4px}
.hs-toggle{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.hs-toggle button{font-size:12px;padding:6px 14px;border-radius:999px;color:rgba(255,255,255,.7);transition:background .4s var(--hs-ease),color .4s var(--hs-ease)}
.hs-toggle button[aria-pressed="true"]{background:rgba(255,255,255,.95);color:#000}
.hs-toggle button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hs-caption{font-size:11px;color:rgba(255,255,255,.55)}

/* Before JS / static: person end state */
.hs:not(.hs-js) .hs-dog,.hs:not(.hs-js) .hs-reticle-dog{display:none}

@media (prefers-reduced-motion:reduce){
  .hs-card{transform:none;transition:none}
  .hs-grain,.hs-star,.hs-mist,.hs-wave i,.hs-notif.is-calling .hs-call{animation:none}
}
@media (max-width:480px){
  .hs-notif{left:12px;right:12px}
}
.hs.is-paused .hs-grain,.hs.is-paused .hs-star,.hs.is-paused .hs-mist,.hs.is-paused .hs-wave i{animation-play-state:paused}