/* Pizza Eye: hero + scene. CCTV monitor, slate accent. */
.hero-pizzaeye,.scene-pizzaeye{--sl:#5a6b7b;--sl-l:#9fb2c4;--warn:#ffb547;--ok:#5fe0a0;--n:#a9c4dd;--hud:#e8eef3}

/* boxes and labels (shared) */
.pe-ov,.pe-hud{position:absolute;inset:0;pointer-events:none}
.pe-box{--c:var(--n);--iz:1;position:absolute;border:calc(1.5px * var(--iz)) solid var(--c);border-radius:calc(3px * var(--iz));box-shadow:0 0 0 calc(1px * var(--iz)) rgba(0,0,0,.35),inset 0 0 calc(18px * var(--iz)) color-mix(in srgb,var(--c) 22%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent)}
.pe-box::before,.pe-box::after{content:"";position:absolute;width:calc(10px * var(--iz));height:calc(10px * var(--iz));border:calc(3px * var(--iz)) solid var(--c)}
.pe-box::before{left:calc(-3px * var(--iz));top:calc(-3px * var(--iz));border-right:0;border-bottom:0}
.pe-box::after{right:calc(-3px * var(--iz));bottom:calc(-3px * var(--iz));border-left:0;border-top:0}
.pe-warn{--c:var(--warn)}.pe-ok{--c:var(--ok)}.pe-n{--c:var(--n)}
.pe-lb{position:absolute;left:calc(-1.5px * var(--iz));bottom:calc(100% + 4px * var(--iz));transform:scale(var(--iz));transform-origin:0 100%;background:var(--c);color:#0b0f12;font:700 .74rem/1.2 var(--sans);padding:4px 8px;border-radius:5px;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.pe-lb b{font-variant-numeric:tabular-nums}
.pe-lb-rt{left:auto;right:calc(-1.5px * var(--iz));transform-origin:100% 100%}
.pe-lb-l{left:auto;right:calc(100% + 4px * var(--iz));bottom:auto;top:0;transform-origin:100% 0}
.pe-meter{position:absolute;left:8%;right:8%;bottom:10%;height:calc(6px * var(--iz));border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden}
.pe-meter i{display:block;height:100%;width:18%;background:var(--warn);border-radius:99px}
.pe-ring{position:absolute;left:100%;top:50%;margin-left:calc(8px * var(--iz));transform:translateY(-50%) scale(var(--iz));transform-origin:0 50%;width:46px;height:46px;display:grid;place-items:center;background:rgba(6,10,12,.75);border-radius:50%}
.pe-ring svg{position:absolute;inset:4px;transform:rotate(-90deg)}
.pe-ring circle{fill:none;stroke:rgba(255,255,255,.15);stroke-width:3.5}
.pe-ring .pe-ring-f{stroke:var(--ok);stroke-dasharray:94.25;stroke-dashoffset:3.77;stroke-linecap:round}
.pe-ring b{font:700 .66rem/1 var(--sans);color:var(--ok)}
.pe-cam,.pe-ts{position:absolute;font:600 .72rem/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;color:var(--hud);text-shadow:0 1px 2px rgba(0,0,0,.9);display:flex;align-items:center;gap:7px;white-space:nowrap}
.pe-rec{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:pe-blink 1.2s steps(1) infinite}
@keyframes pe-blink{50%{opacity:.15}}
.pe-scan{position:absolute;left:0;right:0;top:0;height:14%;background:linear-gradient(180deg,transparent,rgba(160,210,255,.05) 80%,rgba(200,235,255,.35) 98%,rgba(200,235,255,0));animation:pe-scan 4.2s linear infinite;mix-blend-mode:screen}
@keyframes pe-scan{0%{transform:translateY(-100%)}100%{transform:translateY(720%)}}
.pe-al-i{flex:none;width:30px;height:30px;border-radius:8px;background:linear-gradient(140deg,#7d8fa1,#3c4a57);position:relative}
.pe-al-i::after{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid #fff;box-shadow:inset 0 0 0 3px #3c4a57,inset 0 0 0 7px #fff}

/* ---------- HERO ---------- */
.hero-pizzaeye{max-width:540px;margin:0 auto}
.pe-mon{position:relative;padding:10px;border-radius:20px;background:linear-gradient(160deg,#2a3038,#12161a);box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07)}
.pe-feed-h{position:relative;aspect-ratio:1600/893;border-radius:12px;overflow:hidden;background:#000}
.pe-feed-h img{display:block;width:100%;height:100%;filter:saturate(.8) contrast(1.05)}
.pe-feed-h::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.pe-feed-h .pe-cam{left:10px;top:10px;font-size:.6rem;z-index:2}
.pe-feed-h .pe-ts{right:10px;top:10px;font-size:.6rem;z-index:2}
.pe-feed-h .pe-box{opacity:0;transform:scale(1.15);transition:opacity .4s,transform .5s cubic-bezier(.2,1.2,.3,1)}
.pe-feed-h .pe-box.on{opacity:1;transform:none}
.pe-feed-h .pe-lb{font-size:.62rem;padding:3px 6px}
.pe-alert{position:absolute;left:50%;bottom:-18px;width:min(88%,360px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(245,247,250,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#111;box-shadow:0 20px 40px -14px rgba(0,0,0,.7);transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.3,1)}
.pe-alert.out{opacity:0;transform:translate(-50%,14px) scale(.96)}
.pe-alert b{font-size:.76rem}
.pe-alert p{font-size:.8rem;line-height:1.3}
.pe-alert small{align-self:flex-start;margin-left:auto;color:#888;font-size:.66rem}
.hero-pizzaeye{padding-bottom:22px}

/* ---------- SCENE ---------- */
.scene-pizzaeye{background:#06080a;color:var(--hud);overflow:clip}
.pe-stage{position:relative;padding:56px 16px 64px;max-width:1180px;margin:0 auto}
/* static layout */
.pe-feeds{display:grid;gap:14px}
.pe-feed{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1600/893;background:#000}
.pe-feed img{display:block;width:100%;height:100%;filter:saturate(.8) contrast(1.05)}
.scene-pizzaeye .pe-hud,.pe-chip,.pe-reel{display:none}
.pe-caps{list-style:none;margin:28px 0;padding:0;display:grid;gap:18px}
.pe-step{display:block;font:600 .74rem/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-l);margin-bottom:8px}
.pe-caps h3{font:800 clamp(1.9rem,5.6vw,3.1rem)/.95 var(--display);text-transform:uppercase;color:#fff;margin-bottom:8px}
.pe-caps p{color:#aeb9c3;max-width:36ch}
.pe-phone{max-width:340px}
.scene-pizzaeye:not(.pe-on) .pe-lb{font-size:.56rem;padding:2px 5px}
.scene-pizzaeye:not(.pe-on) .pe-ring{display:none}
.pe-ph-scr{border-radius:28px;padding:16px 12px;background:linear-gradient(180deg,#3a4552,#1b2229)}
.pe-ph-t{text-align:center;font:300 3rem/1 var(--sans);color:#fff}
.pe-ph-d{text-align:center;font-size:.8rem;color:#cfd8e0;margin-bottom:14px}
.pe-notes{display:flex;flex-direction:column-reverse;gap:8px}
.pe-note{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(245,247,250,.92);color:#111}
.pe-note b{display:block;font-size:.82rem}
.pe-note p{font-size:.78rem;line-height:1.3;color:#333}
.pe-note small{margin-left:auto;color:#888;font-size:.66rem;white-space:nowrap}
.pe-note-ok .pe-al-i{background:linear-gradient(140deg,#4fc18a,#227a53)}
.pe-note-ok .pe-al-i::after{box-shadow:inset 0 0 0 3px #227a53,inset 0 0 0 7px #fff}
@media(min-width:900px){.pe-feeds{grid-template-columns:1fr 1fr}}

/* pinned mode */
.scene-pizzaeye.pe-on .pe-track{height:500vh}
.scene-pizzaeye.pe-on .pe-stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;max-width:none;overflow:hidden}
.scene-pizzaeye.pe-on .pe-feeds{position:absolute;inset:0;display:block}
.scene-pizzaeye.pe-on .pe-feed{position:absolute;left:0;top:0;width:var(--fw);height:auto;border-radius:0;transform-origin:0 0;will-change:transform,opacity;aspect-ratio:auto}
.scene-pizzaeye.pe-on .pe-feed img{height:auto}
.scene-pizzaeye.pe-on .pe-feed::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);pointer-events:none}
.scene-pizzaeye.pe-on .pe-f-lobby{opacity:0}
.scene-pizzaeye.pe-on .pe-feed.glitch img{filter:saturate(.4) contrast(1.4) brightness(1.3) hue-rotate(-20deg);transform:translateX(-1%) skewX(-2deg)}
.scene-pizzaeye.pe-on .pe-box{opacity:0;transform:scale(1.12);transition:opacity .35s,transform .45s cubic-bezier(.2,1.2,.3,1)}
.scene-pizzaeye.pe-on .pe-box.on{opacity:1;transform:none}
.scene-pizzaeye.pe-on .pe-wall .pe-lb,.scene-pizzaeye.pe-on .pe-wall .pe-ring{opacity:0;transition:opacity .3s}
.scene-pizzaeye.pe-on .pe-hud{display:block;z-index:5}
.scene-pizzaeye.pe-on .pe-hud::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,transparent 50%,rgba(0,0,0,.6))}
.scene-pizzaeye.pe-on .pe-cam{left:16px;top:78px}
.scene-pizzaeye.pe-on .pe-ts{right:16px;top:78px}
.pe-corner{position:absolute;width:26px;height:26px;border:2px solid rgba(232,238,243,.6)}
.pe-corner.c1{left:12px;top:70px;border-right:0;border-bottom:0}.pe-corner.c2{right:12px;top:70px;border-left:0;border-bottom:0}
.pe-corner.c3{left:12px;bottom:12px;border-right:0;border-top:0}.pe-corner.c4{right:12px;bottom:12px;border-left:0;border-top:0}
.scene-pizzaeye.pe-on .pe-chip{display:block;position:absolute;z-index:2;left:50%;bottom:var(--chipb,190px);transform:translate(-50%,-10px);opacity:0;padding:9px 16px;border-radius:999px;background:rgba(8,12,15,.82);border:1px solid rgba(169,196,221,.4);font:700 .9rem/1.1 var(--sans);color:#fff;white-space:nowrap;transition:opacity .35s,transform .35s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scene-pizzaeye.pe-on .pe-chip.on{opacity:1;transform:translate(-50%,0)}
.scene-pizzaeye.pe-on .pe-caps{position:absolute;z-index:4;left:0;right:0;top:64px;margin:0;padding:50px 16px 40px;display:block;background:linear-gradient(180deg,rgba(6,8,10,.92) 55%,transparent);pointer-events:none;min-height:230px}
.scene-pizzaeye.pe-on .pe-caps li{position:absolute;left:16px;right:16px;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s}
.scene-pizzaeye.pe-on .pe-caps li.on{opacity:1;transform:none}
.scene-pizzaeye.pe-on .pe-caps h3{font-size:clamp(1.7rem,5.4vw,2.9rem)}
.scene-pizzaeye.pe-on .pe-caps p{font-size:.92rem}
.scene-pizzaeye.pe-on .pe-cam,.scene-pizzaeye.pe-on .pe-ts{z-index:5}
.scene-pizzaeye.pe-on .pe-phone{position:absolute;z-index:5;left:50%;width:290px;margin-left:-145px;top:0;max-width:none;will-change:transform}
.scene-pizzaeye.pe-on .pe-ph-scr{border:8px solid #15191d;border-radius:40px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -20px rgba(0,0,0,.9);height:560px;background:linear-gradient(180deg,rgba(58,69,82,.92),rgba(27,34,41,.96));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:26px}
.scene-pizzaeye.pe-on .pe-note{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-8px;transform:translateY(-10px) scale(.95);transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.3,1),max-height .4s,padding .4s,margin .4s;overflow:hidden}
.scene-pizzaeye.pe-on .pe-note.on{opacity:1;max-height:90px;padding-top:10px;padding-bottom:10px;margin-top:0;transform:none}
@media(min-width:900px){
  .scene-pizzaeye.pe-on .pe-caps{top:auto;bottom:0;left:0;right:0;padding:0;background:linear-gradient(0deg,rgba(6,8,10,.9),rgba(6,8,10,.5) 45%,transparent);min-height:320px}
  .scene-pizzaeye.pe-on .pe-caps li{max-width:520px}
  .scene-pizzaeye.pe-on .pe-reel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:absolute;z-index:4;opacity:0;will-change:transform}
  .scene-pizzaeye.pe-on .pe-caps li{left:max(28px,calc(50vw - 590px));right:28px;bottom:44px}
  .scene-pizzaeye.pe-on .pe-phone{left:auto;right:max(28px,calc(50vw - 590px));margin-left:0;width:270px}
  .scene-pizzaeye.pe-on .pe-ph-scr{height:540px}
  .scene-pizzaeye.pe-on .pe-cam{left:max(28px,calc(50vw - 590px))}
  .scene-pizzaeye.pe-on .pe-chip{bottom:auto;top:108px;left:calc(50% - 140px)}
}
@media(max-width:899px){.scene-pizzaeye.pe-on .pe-lb-l{left:calc(-1.5px * var(--iz));right:auto;top:auto;bottom:calc(100% + 4px * var(--iz));transform-origin:0 100%}.scene-pizzaeye.pe-on .pe-ph-t{display:none}.scene-pizzaeye.pe-on .pe-ph-d{font-weight:600;margin-bottom:10px}}
.pe-reel div{padding:14px 16px;border-radius:14px;background:rgba(20,26,31,.85);border:1px solid rgba(169,196,221,.18)}
.pe-reel small{display:block;font:600 .66rem/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-l)}
.pe-reel b{display:block;font:800 2.2rem/1 var(--display);color:#fff;margin:6px 0 2px}
.pe-reel span{font-size:.78rem;color:#aeb9c3}
@media(prefers-reduced-motion:reduce){.pe-rec,.pe-scan{animation:none}.pe-scan{display:none}}