/* ============================================================
   V3 — lightweight seamless diagonal bands (CSS-only, low CPU)
   Fixes: bands now truly fill screen on any resize (flex column
   inset:0, no vmax-sized rotated stage). Diagonal feel via
   skewed band edges, track slides horizontally (compositor-only).
   Perf: only transform+opacity animations, static art otherwise,
   fewer shadows/blurs, mobile trims bands, in-session pauses all.
   ============================================================ */
.px-bg{
  --pink:#ff007f; --cyan:#00f0ff; --purple:#7b2cbf; --ink:#0a0b10;
  --panel:#121324; --panel2:#1b1c3a; --yellow:#ffe600; --green:#39ff14;
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#0a0b10;
  contain:layout paint;
}
/* App layering and surfaces live in styles.css (design tokens). */

/* TRUE DIAGONAL, resize-safe: overscan via negative insets (relative to
   fixed .px-bg, so it tracks any viewport), rotated as one rigid sheet.
   No vmax sizing, no size-containment — flex children keep real height. */
.px-bands{
  position:absolute; inset:-25%;
  display:flex; flex-direction:column;
  transform:rotate(-12deg);
}
.px-band{
  position:relative; flex:1 0 0; min-height:110px;
  overflow:hidden;
  background:linear-gradient(180deg,#150f38 0%,#2b0f4e 38%,#8a1258 62%,#0d0e1b 100%);
  border-top:2px solid rgba(0,240,255,.5);
  border-bottom:2px solid rgba(255,0,127,.35);
}
.px-band:nth-child(even){background:linear-gradient(180deg,#10123a 0%,#33135c 40%,#7a1060 65%,#0d0e1b 100%);}
.px-band::before{ /* cheap diagonal accent — no layout cost, no extra paint loop */
  content:""; position:absolute; top:-20%; bottom:-20%; left:8%; width:120px; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,240,255,.14), rgba(255,0,127,.14));
  transform:skewX(-14deg);
}
.px-band::after{ /* one cheap static scanline overlay, no animation */
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 2px, transparent 2px 5px);
}
/* single compositor-only animation per band */
.px-band__track{display:flex; width:max-content; height:100%; will-change:transform; animation:pxSlide 55s linear infinite; transform:translate3d(0,0,0);}
.px-band--rev .px-band__track{animation-direction:reverse;}
.px-band--slow .px-band__track{animation-duration:75s;}
.px-band--fast .px-band__track{animation-duration:42s;}
@keyframes pxSlide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.px-seq{display:flex; height:100%;}

/* ---------- scene tile (static art, ~2 cheap anims each) ---------- */
.px-scene{
  position:relative; width:340px; height:100%; min-height:110px; flex:0 0 340px;
  overflow:hidden; image-rendering:pixelated;
  border-right:4px solid rgba(10,11,16,.9);
  background:linear-gradient(180deg,#160f3d 0%,#3a0f52 42%,#a3125a 66%,#0d0e1b 78%,#14162e 78%,#080912 100%);
}
.px-cityline{
  position:absolute; left:0; right:0; top:46%; height:30%;
  background:
    linear-gradient(#00f0ff,#00f0ff) 10px 8px/4px 70% no-repeat,
    linear-gradient(#ff007f,#b20059) 26px 2px/26px 92% no-repeat,
    linear-gradient(#7b2cbf,#4a1a7a) 60px 12px/34px 80% no-repeat,
    linear-gradient(#1b1c3a,#1b1c3a) 104px 8px/44px 84% no-repeat,
    linear-gradient(#ff007f,#ff007f) 158px 20px/30px 72% no-repeat,
    linear-gradient(#7b2cbf,#7b2cbf) 196px 4px/22px 88% no-repeat,
    linear-gradient(#00f0ff,#00f0ff) 226px 14px/36px 78% no-repeat,
    linear-gradient(#241b4d,#241b4d) 272px 10px/40px 82% no-repeat;
}
.px-ground{
  position:absolute; left:0; right:0; bottom:0; height:22%;
  background:
    linear-gradient(rgba(0,240,255,.55),rgba(0,240,255,.55)) 0 0/100% 3px no-repeat,
    linear-gradient(180deg,#1a1c38,#080912);
}
.px-actor{position:absolute; bottom:20%; z-index:3;}
.px-bubble{
  position:absolute; z-index:4; font-size:.875rem; font-weight:700; line-height:1.2; white-space:nowrap;
  background:#0d0e1b; border:2px solid var(--cyan); color:#fff; padding:3px 6px; border-radius:3px;
}
.px-bubble.pink{border-color:var(--pink);}
.px-bubble.green{border-color:var(--green);}
.px-bubble::after{content:""; position:absolute; left:10px; bottom:-7px; width:8px; height:8px; background:inherit; border-right:2px solid inherit; border-bottom:2px solid inherit; transform:rotate(45deg);}

/* SCENE A — laptop caller */
.sc-a .desk{position:absolute; left:30px; right:30px; bottom:20%; height:12px; background:#3a1c5a; border:2px solid #0a0b10; z-index:2;}
.sc-a .lamp{position:absolute; left:36px; bottom:calc(20% + 12px); width:10px; height:48px; background:#0a0b10; border:2px solid var(--yellow); z-index:2;}
.sc-a .lamp::before{content:""; position:absolute; top:-13px; left:-12px; width:30px; height:11px; background:var(--yellow);}
.sc-a .person{left:120px;}
.sc-a .person .hd{width:30px; height:26px; background:linear-gradient(#2b1a12,#2b1a12) 0 0/100% 9px no-repeat,linear-gradient(#f2b88a,#d89a6a) 4px 6px/22px 20px no-repeat; box-shadow:0 0 0 2px #0a0b10; position:relative;}
.sc-a .person .hd::after{content:""; position:absolute; left:7px; top:14px; width:5px; height:5px; background:#0a0b10; box-shadow:10px 0 0 #0a0b10;}
.sc-a .person .bd{width:40px; height:32px; margin-left:-5px; background:linear-gradient(180deg,#ff007f,#7a0c3e); box-shadow:0 0 0 2px #0a0b10; position:relative;}
.sc-a .arm{position:absolute; left:34px; top:36px; width:30px; height:9px; background:#f2b88a; box-shadow:0 0 0 2px #0a0b10;}
.sc-a .laptop{position:absolute; left:196px; bottom:calc(20% + 12px); width:64px; height:44px; z-index:3;}
.sc-a .laptop .scr{width:60px; height:38px; border:3px solid #0a0b10; background:linear-gradient(180deg,rgba(0,240,255,.9),rgba(0,240,255,.25)),#0d2b33; position:relative;}
.sc-a .laptop .scr::before{content:""; position:absolute; left:6px; top:8px; width:16px; height:12px; background:var(--pink); box-shadow:24px 4px 0 var(--green);}
.sc-a .laptop .base{width:72px; height:9px; margin-left:-4px; background:#2b2d4a; box-shadow:0 0 0 2px #0a0b10;}
.sc-a .mug{position:absolute; left:276px; bottom:calc(20% + 12px); width:16px; height:20px; background:var(--cyan); box-shadow:0 0 0 2px #0a0b10; z-index:3;}
.sc-a .bubble1{left:96px; bottom:66%;}
.sc-a .bubble2{left:196px; bottom:74%;}

/* SCENE B — cyborg */
.sc-b .cy{left:88px;}
.sc-b .cy .hd{width:36px; height:30px; background:linear-gradient(180deg,#aeb6c4 0 45%,#5b6472 45% 100%); box-shadow:0 0 0 2px #0a0b10; position:relative;}
.sc-b .cy .hd::before{content:""; position:absolute; left:3px; top:12px; width:30px; height:9px; background:linear-gradient(90deg,var(--pink) 0 55%,#0a0b10 55% 65%,var(--cyan) 65% 100%);}
.sc-b .cy .bd{width:46px; height:36px; margin:2px 0 0 -5px; background:linear-gradient(90deg,#7b2cbf 0 14px,#1b1c3a 14px 32px,#7b2cbf 32px); box-shadow:0 0 0 2px #0a0b10; position:relative;}
.sc-b .phone{position:absolute; left:158px; bottom:calc(20% + 12px); width:26px; height:42px; background:#0a0b10; border:2px solid var(--cyan); z-index:4;}
.sc-b .phone::before{content:""; position:absolute; inset:4px; background:linear-gradient(var(--pink),var(--pink)) 0 0/100% 5px no-repeat,linear-gradient(rgba(0,240,255,.8),rgba(0,240,255,.8)) 0 10px/100% 4px no-repeat;}
.sc-b .holo{position:absolute; left:150px; bottom:calc(20% + 60px); width:42px; height:28px; border:2px solid var(--pink); background:repeating-linear-gradient(0deg,rgba(255,0,127,.35) 0 2px,transparent 2px 5px); z-index:3;}
.sc-b .rings i{position:absolute; border:2px solid var(--green); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; opacity:0;}
.sc-b .rings i:nth-child(1){left:190px; bottom:44%; width:20px; height:20px; animation:pxPing 2.4s ease-out infinite;}
.sc-b .rings i:nth-child(2){left:184px; bottom:42%; width:32px; height:32px; animation:pxPing 2.4s ease-out .8s infinite;}
@keyframes pxPing{0%{opacity:0; transform:scale(.6);}25%{opacity:1;}100%{opacity:0; transform:scale(1.15);}}
.sc-b .drone{position:absolute; left:262px; bottom:64%; width:34px; height:10px; background:#0a0b10; border:2px solid var(--cyan); z-index:4;}
.sc-b .bubble1{left:60px; bottom:72%;}
.sc-b .bubble2{left:236px; bottom:78%;}

/* SCENE C — cat */
.sc-c .rug{position:absolute; left:40px; right:40px; bottom:18%; height:10px; background:repeating-linear-gradient(90deg,var(--purple) 0 20px,#2a1650 20px 40px); border:2px solid #0a0b10;}
.sc-c .cat{left:60px;}
.sc-c .cat .bd{width:52px; height:26px; background:#ff9f1c; box-shadow:0 0 0 2px #0a0b10; position:relative;}
.sc-c .cat .hd{width:26px; height:24px; background:#ff9f1c; box-shadow:0 0 0 2px #0a0b10; position:relative; margin-bottom:-4px;}
.sc-c .cat .hd::before,.sc-c .cat .hd::after{content:""; position:absolute; top:-10px; width:10px; height:12px; background:#ff9f1c; clip-path:polygon(0 100%,50% 0,100% 100%);}
.sc-c .cat .hd::before{left:-2px;} .sc-c .cat .hd::after{right:-2px;}
.sc-c .cat .eyes{position:absolute; left:5px; top:8px; width:5px; height:7px; background:var(--cyan); box-shadow:11px 0 0 var(--cyan);}
.sc-c .tail{position:absolute; left:48px; bottom:6px; width:24px; height:9px; background:#ff9f1c; box-shadow:0 0 0 2px #0a0b10; transform:rotate(10deg);}
.sc-c .board{position:absolute; left:56px; bottom:calc(20% - 8px); width:70px; height:8px; background:var(--cyan); box-shadow:0 0 0 2px #0a0b10; z-index:2;}
.sc-c .ball{position:absolute; left:196px; bottom:22%; width:22px; height:22px; background:conic-gradient(var(--pink) 0 25%,var(--cyan) 0 50%,var(--pink) 0 75%,var(--cyan) 0); box-shadow:0 0 0 2px #0a0b10; z-index:3; animation:pxBounce 1.1s cubic-bezier(.4,0,.6,1) infinite alternate;}
@keyframes pxBounce{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-40px,0);}}
.sc-c .yarn{position:absolute; left:150px; bottom:24%; width:48px; height:5px; background:repeating-linear-gradient(90deg,var(--pink) 0 7px,transparent 7px 10px); transform:rotate(-10deg);}
.sc-c .fishtv{position:absolute; left:286px; bottom:calc(20% + 8px); width:52px; height:40px; border:3px solid #0a0b10; background:#062a33; z-index:3;}
.sc-c .fishtv::before{content:""; position:absolute; left:10px; top:14px; width:20px; height:10px; background:var(--pink); clip-path:polygon(0 50%,35% 0,100% 30%,100% 70%,35% 100%);}
.sc-c .bubble1{left:44px; bottom:72%;}
.sc-c .bubble2{left:230px; bottom:78%;}

/* SCENE D — VR bar */
.sc-d .neon{position:absolute; left:50%; top:6px; transform:translateX(-50%); font-size:.875rem; font-weight:800; letter-spacing:2px; color:var(--pink); text-shadow:2px 2px 0 var(--cyan); z-index:4; white-space:nowrap;}
.sc-d .shelf{position:absolute; left:16px; right:16px; top:32%; height:6px; background:#0a0b10; border:1px solid var(--cyan); z-index:2;}
.sc-d .bottles{position:absolute; left:24px; top:17%; width:310px; height:24px; background:linear-gradient(var(--cyan),transparent) 0 8px/12px 18px no-repeat,linear-gradient(var(--pink),transparent) 30px 4px/12px 22px no-repeat,linear-gradient(var(--yellow),transparent) 60px 8px/12px 18px no-repeat,linear-gradient(var(--green),transparent) 90px 2px/12px 24px no-repeat,linear-gradient(var(--cyan),transparent) 150px 6px/12px 20px no-repeat,linear-gradient(var(--pink),transparent) 200px 8px/12px 18px no-repeat; z-index:2;}
.sc-d .counter{position:absolute; left:0; right:0; bottom:20%; height:26px; background:linear-gradient(180deg,#3a1c5a,#1b1c3a); border-top:3px solid var(--cyan); z-index:2;}
.sc-d .stool{position:absolute; bottom:20%; width:16px; height:34px; background:#0a0b10; border:2px solid var(--pink); z-index:2;}
.sc-d .stool.s1{left:40px;} .sc-d .stool.s2{left:290px;}
.sc-d .vrp{left:150px;}
.sc-d .vrp .hd{width:32px; height:26px; background:#f2c49b; box-shadow:0 0 0 2px #0a0b10; position:relative;}
.sc-d .vrp .hd::after{content:""; position:absolute; left:-4px; top:6px; width:40px; height:14px; background:#0a0b10; border:2px solid var(--cyan);}
.sc-d .vrp .bd{width:42px; height:30px; margin:2px 0 0 -5px; background:linear-gradient(180deg,#00f0ff,#005f7a); box-shadow:0 0 0 2px #0a0b10;}
.sc-d .beam{position:absolute; left:178px; bottom:52%; width:80px; height:3px; background:var(--cyan); transform:rotate(-16deg); transform-origin:left center;}
.sc-d .dance{position:absolute; left:60px; right:60px; bottom:20%; height:4px; background:repeating-linear-gradient(90deg,var(--pink) 0 14px,var(--cyan) 14px 28px,var(--yellow) 28px 42px);}
.sc-d .bubble1{left:36px; bottom:74%;}
.sc-d .bubble2{left:232px; bottom:70%;}

/* dust removed for perf; keep one soft vignette, static */
.px-fade{position:absolute; inset:0; z-index:7; background:radial-gradient(120% 95% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);}

/* Scenes ride the diagonal sheet as-is (no counter-rotation) so the
   artwork itself travels at -12deg with the bands. Static = free. */

/* ---------- IN-SESSION: no backdrop inside the video grid ----------
   #video-container + .grid become fully opaque during a session, so the
   animated bands never show through gaps behind tiles. They stay visible
   outside the main window: login screen, header/dock translucency edges
   and page margins around the container. */
/* In a call the header, dock and grid are opaque, so the art is never seen.
   Stop rendering it entirely: no compositor layers, no animation, no paint. */
body.in-session .px-bg{display:none;}

@media (max-width:768px){
  .px-scene{width:260px; flex-basis:260px;}
  /* fewer bands on small screens = less paint cost */
  .px-band:nth-child(2){display:none;}
  .px-band__track{animation-duration:38s;}
}
@media (prefers-reduced-motion:reduce){
  .px-band__track,.sc-c .ball,.sc-b .rings i{animation:none !important;}
}