/* Zooly Video Kit - design tokens + base styles. Every scene imports this. */
@font-face { font-family: 'Lato'; font-weight: 400; src: url('../assets/fonts/Lato-Regular.ttf'); }
@font-face { font-family: 'Lato'; font-weight: 600; src: url('../assets/fonts/Lato-SemiBold.ttf'); }
@font-face { font-family: 'Lato'; font-weight: 700; src: url('../assets/fonts/Lato-Bold.ttf'); }
@font-face { font-family: 'Lato'; font-weight: 900; src: url('../assets/fonts/Lato-Black.ttf'); }

:root {
  --bg: #F5F5F7;
  --white: #FFFFFF;
  --ink: #0A0A0A;
  --ink-2: #6B6B6B;
  --muted: #9B9B9B;
  --border: #E8E8E8;
  --z-blue: #08ACFA;      /* mascot face + infinity */
  --accent: #0086B0;      /* key words on light */
  --cyan: #17C3E8;
  --shadow-card: 0 30px 80px rgba(10, 30, 60, .10), 0 6px 18px rgba(10, 30, 60, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); }
body { font-family: 'Lato', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }

#stage { position: absolute; inset: 0; overflow: hidden; }

/* Studio background: light gray base, white bloom, cyan tint rising from the floor */
.studio { position: absolute; inset: -10%; background:
  radial-gradient(ellipse 55% 50% at var(--bx, 50%) var(--by, 42%), rgba(255,255,255,1) 0%, rgba(255,255,255,.75) 35%, rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 90% 45% at 50% 108%, rgba(8,172,250,.16) 0%, rgba(8,172,250,.06) 45%, rgba(8,172,250,0) 75%),
  radial-gradient(ellipse 40% 35% at 92% 8%, rgba(23,195,232,.07) 0%, rgba(23,195,232,0) 70%),
  linear-gradient(180deg, #FAFAFB 0%, #F3F4F7 60%, #EDF2F8 100%); }

.grain { position: absolute; inset: 0; pointer-events: none; opacity: .045; }   /* dither: breaks gradient banding on light and dark */
body.dark .grain { opacity: .06; }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 48%, rgba(0,0,0,0) 60%, rgba(20,40,70,.07) 100%); }

.layer { position: absolute; inset: 0; }
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }

/* Kinetic type */
.kt { position: absolute; }
.kt .ln { display: block; white-space: nowrap; }
.kt .w { display: inline-block; will-change: transform, opacity, filter; }
.kt.statement { font-weight: 900; letter-spacing: -0.04em; line-height: 1.0; }
.kt.support { font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: #6B6F78; }
.kt .gray { color: #8A8F98; }
.kt .hl { background: linear-gradient(100deg, #08ACFA 0%, #0086B0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Cards / pills */
.pill { position: absolute; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 999px;
  padding: 10px 26px 10px 10px; box-shadow: var(--shadow-card); }
.pill .av { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(160deg,#E9F6FE,#D3ECFB); overflow: hidden; position: relative; }
.pill .t1 { font-weight: 900; font-size: 26px; }
.pill .t2 { font-weight: 600; font-size: 19px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--z-blue); box-shadow: 0 0 10px rgba(8,172,250,.8); }

/* Z rig */
.zrig { position: absolute; width: 1024px; height: 1200px; transform-origin: 50% 82%; }
.zrig img { position: absolute; left: 0; top: 0; width: 1024px; height: auto; }
.zrig .pose { opacity: 0; }
.zrig .face { position: absolute; left: 0; top: 0; width: 1024px; height: 1024px; }
.zrig .face img { width: 1024px; height: 1024px; opacity: 0; }
.zshadow { position: absolute; width: 520px; height: 70px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20,50,90,.28) 0%, rgba(20,50,90,.10) 45%, rgba(20,50,90,0) 72%); }

/* far-background depth plates: soft, out of focus, barely there */
.plate { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%); filter: blur(20px); opacity: .7; }

/* film components */
.zcard { position: absolute; background: #fff; box-shadow: 0 40px 90px rgba(15,35,70,.12), 0 10px 24px rgba(15,35,70,.07); }
.zav { position: relative; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg,#E9F6FE,#CFEAFB); flex: none; }
.label { font-weight: 700; font-size: 32px; letter-spacing: -0.01em; color: #0A0A0A; }
.label.gray { color: #6B6F78; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #F2F4F7; font-weight: 700; font-size: 26px; color: #0A0A0A; }
.chip.cyan { background: rgba(8,172,250,.12); color: #0086B0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; background: #0A0A0A; color: #fff; font-weight: 800; }
.bub { position: absolute; max-width: 300px; padding: 12px 16px; border-radius: 20px; font-size: 19px; line-height: 1.3; }
.bub.them { background: #F1F3F6; color: #111; }
.bub.z { background: #0A0A0A; color: #fff; }
.bub.you { background: rgba(8,172,250,.14); color: #064e6e; }

/* inbox rows (s01-offers style message list) */
  .inbox-h { position:absolute; top:64px; left:30px; right:30px; display:flex; align-items:center; justify-content:space-between; }
  .inbox-h .tt { font-weight:900; font-size:36px; letter-spacing:-.02em; }
  .badge { background:#0A0A0A; color:#fff; font-weight:800; font-size:17px; border-radius:999px; padding:5px 13px; }
  .row { position:absolute; left:12px; right:12px; height:96px; display:flex; align-items:center; gap:16px; padding:0 14px; border-radius:22px; background:#fff; }
  .row .av { width:60px; height:60px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:21px; }
  .row .avz { width:60px; height:60px; flex:none; }
  .row .tx { flex:1; min-width:0; }
  .row .nm { font-weight:800; font-size:22px; display:flex; justify-content:space-between; }
  .row .nm span { font-weight:600; font-size:15px; color:#9B9B9B; }
  .row .pv { font-size:19px; color:#6B6B6B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }
  .row .ud { width:12px; height:12px; border-radius:50%; background:#08ACFA; flex:none; box-shadow:0 0 8px rgba(8,172,250,.7); }
  .row.z { box-shadow: 0 0 0 2px rgba(8,172,250,.55), 0 14px 34px rgba(8,172,250,.25); }
  .typing { display:inline-flex; gap:6px; padding:8px 12px; background:#F1F3F6; border-radius:14px; }
  .typing i { width:8px; height:8px; border-radius:50%; background:#9AA3AF; display:block; }