/* live scenes (js/scenes/live.js): styles for this file only, every class prefixed lv-. */
@keyframes lv-rise { from { opacity: 0; translate: 0 10px; } }
@keyframes lv-pulse { 50% { scale: 1.04; opacity: .6; } }
@keyframes lv-pop { 30% { scale: 1.14; } }

/* shared bits: text column, icon tile */
.lv-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.lv-wt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-ai { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.1); font-size: 17px; flex: none; }
.lv-ai.low { background: var(--notch-amber); color: #000; }
.lv-ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--notch-green); color: #000; font-size: 18px; flex: none; animation: pop 420ms var(--sp-reward); }
.lv-dlb, .lv-snd { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; width: 320px; height: 40px; border-radius: 12px; cursor: pointer;
  background: #1c1d22; border: 1px solid #2a2b31; color: #f5f5f7; font: 600 14px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; transition: background var(--m-base), transform var(--m-fast) var(--ease-quint); }
.lv-dlb:hover, .lv-snd:hover { background: #26272c; }
.lv-dlb:active, .lv-snd:active, .lv-dlb.press, .lv-snd.press { transform: scale(.97); }
.lv-dlb .ic, .lv-snd .ic { font-size: 16px; }
.lv-dlb { left: 596px; top: 250px; }
.lv-snd { left: 596px; top: 200px; }

/* Lock screen (Unlock with Face, Notch lock screen) */
.lv-lock { position: absolute; inset: 0; background: #05060a; color: #f5f5f7; animation: lv-rise 400ms var(--ease-out) backwards;
  transition: opacity 700ms var(--ease-inout), scale 700ms var(--ease-inout); }
.lv-lock > * { transition: opacity 600ms var(--ease-out); }
.lv-lock:not(.on) > * { opacity: .35; }
.lv-lock.away { opacity: 0; scale: 1.03; pointer-events: none; }
.lv-clk { position: absolute; left: 0; right: 0; top: 108px; text-align: center; font: 600 64px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -.02em; }
.lv-pw { position: absolute; left: 50%; top: 196px; translate: -50% 0; width: 220px; height: 34px; border-radius: 17px; cursor: pointer;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.14); color: #f5f5f7; font: 500 14px/1 -apple-system, system-ui, sans-serif; }
.lv-pw:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.lv-lock.sm .lv-clk { top: 50px; font-size: 44px; }
.lv-lock.sm .lv-pw { top: 330px; cursor: default; }
.lv-face { width: 38px; height: 38px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--notch-blue); }
.lv-sl { stroke-width: 1.6; opacity: .8; animation: lv-scan 1.1s var(--ease-inout) infinite alternate; }
@keyframes lv-scan { from { transform: translateY(-9px); } to { transform: translateY(9px); } }

/* Notch lock screen: widgets stacked above the password field */
.lv-ws { position: absolute; left: 556px; top: 108px; width: 400px; display: grid; gap: 4px; padding: 8px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.lv-w { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 10px; font-size: 13px;
  animation: lv-rise 420ms var(--ease-quint) calc(var(--i) * 130ms) backwards; }
.lv-wi { display: grid; place-items: center; width: 22px; flex: none; }
.lv-wi .ic { font-size: 18px; }
.lv-wi .ring { width: 20px; height: 20px; }
.lv-w.paused .bars b { animation-play-state: paused; }
.lv-pz { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; flex: none; }
.lv-pz::after { content: ""; position: absolute; inset: -8px; }
.lv-pz .ic { font-size: 13px; }
.lv-ag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--notch-text-2); }
.lv-dp { display: block; position: relative; width: 100%; height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.lv-dp i { position: absolute; inset: 0 auto 0 0; width: 8%; background: var(--notch-blue); transition: width 2700ms linear; }

/* Creatures */
.lv-cbox { display: grid; place-items: center; width: 96px; height: 96px; flex: none; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.lv-cre { width: 84px; height: 84px; }
.lv-cre g { opacity: 0; transition: opacity 240ms var(--ease-out); }
.lv-cr[data-s="0"] .lv-g0, .lv-cr[data-s="1"] .lv-g1, .lv-cr[data-s="2"] .lv-g2 { opacity: 1; }
.lv-cbox.pop .lv-cre { animation: lv-pop 520ms var(--sp-reward); }
.lv-m { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; margin: 12px 0 8px; }
.lv-cap { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Accessory alerts */
.lv-acc { display: flex; flex-direction: column; gap: 8px; }
.lv-ar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.lv-bat { position: relative; width: 70px; height: 8px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; flex: none; }
.lv-bat i { position: absolute; inset: 0 auto 0 0; background: var(--notch-green); transition: background var(--m-base); }
.lv-bat.low i { background: var(--notch-red); }
.lv-pc { width: 36px; text-align: right; }

/* Bars follow the music */
.lv-eqv { display: flex; flex-direction: column; gap: 12px; }
.lv-eq { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 64px; }
.lv-eq b { width: 10px; height: 64px; border-radius: 3px; background: var(--notch-teal); transform-origin: 50% 100%; scale: 1 .2;
  transition: scale 90ms linear; animation: lv-idle 1.2s var(--ease-inout) calc(var(--n) * -80ms) infinite alternate; }
@keyframes lv-idle { from { scale: 1 .16; } to { scale: 1 .4; } }
.lv-on .lv-eq b { animation: none; scale: 1 var(--v, .2); }
.lv-wb { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.lv-wb b { width: 3px; height: 16px; border-radius: 2px; background: var(--notch-teal); scale: 1 var(--v, .3); transition: scale 90ms linear; }

/* Companion */
.lv-mc { display: block; }
.lv-ey { transform-box: fill-box; transform-origin: center; animation: lv-blink 4s infinite; }
@keyframes lv-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
.lv-mbtn { position: relative; width: 44px; height: 44px; flex: none; cursor: pointer; transform-origin: 50% 100%; }
.lv-mbtn::after { content: ""; position: absolute; inset: -6px; }
.lv-mbtn:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; border-radius: 12px; }
.lv-hop { animation: lv-hop 520ms var(--sp-reward); }
.lv-cheer { animation: lv-cheer 900ms var(--sp-reward); }
.lv-sway { animation: lv-sway 900ms var(--ease-inout) infinite alternate; }
@keyframes lv-hop { 40% { translate: 0 -10px; } }
@keyframes lv-cheer { 20% { translate: 0 -12px; rotate: -10deg; } 50% { translate: 0 0; rotate: 8deg; } 70% { translate: 0 -6px; } }
@keyframes lv-sway { from { rotate: -8deg; } to { rotate: 8deg; } }
.lv-chip { display: flex; align-items: center; font-size: 18px; min-width: 20px; justify-content: flex-end; }

/* Downloads */
.lv-dl { display: flex; flex-direction: column; gap: 6px; }
.lv-dh { gap: 8px; height: 22px; }
.lv-dh .ic { font-size: 15px; color: var(--notch-blue); }
.lv-dh small { margin-left: auto; }
.lv-dr { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.lv-pb { position: relative; width: 110px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; flex: none; }
.lv-pb i { position: absolute; inset: 0 auto 0 0; width: 6%; background: var(--notch-blue); transition: width var(--d, 2400ms) linear, background var(--m-base); }
.lv-dr.done .lv-pb i { background: var(--notch-green); }
.lv-dr.done .lv-ai { color: var(--notch-green); }

/* Lyrics */
.lv-lh { gap: 12px; }
.lv-ls { position: absolute; left: 0; right: 0; top: 56px; height: 108px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.lv-lt { transition: translate 500ms var(--ease-quint); }
.lv-ln { height: 36px; line-height: 36px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .45; color: #fff; transition: opacity 300ms; }
.lv-ln.done { opacity: .6; }
.lv-ln.cur { opacity: 1; }
.lv-ln.cur span { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #fff 50%, var(--notch-text-2) 50%); background-size: 200% 100%; background-position: 100% 0; animation: lv-kar 1.5s linear forwards; }
@keyframes lv-kar { to { background-position: 0 0; } }
.lv-ly.paused .lv-ln.cur span { animation-play-state: paused; }
.lv-ly.paused .bars b { animation-play-state: paused; }

/* Notch gestures */
.lv-tp { position: absolute; left: 646px; top: 214px; width: 220px; height: 110px; border-radius: 16px; background: rgba(28,29,34,.86); border: 1px solid #34353c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); cursor: pointer; }
.lv-tp:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.lv-f { position: absolute; top: 44px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 14px rgba(107,204,255,.6); opacity: 0; pointer-events: none; }
.lv-np { gap: 14px; }
.lv-np.lv-out { animation: lv-out 180ms var(--ease-inout) both; }
.lv-np.lv-in { animation: lv-in 320ms var(--ease-quint) backwards; }
@keyframes lv-out { to { translate: -60px 0; opacity: 0; } }
@keyframes lv-in { from { translate: 60px 0; opacity: 0; } }

/* Notifications */
.lv-bn { position: absolute; left: 850px; top: 44px; width: 262px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: rgba(40,42,50,.92); border: 1px solid rgba(255,255,255,.12); color: #f5f5f7; transform-origin: 50% 0;
  transition: translate 520ms var(--ease-quint), scale 520ms var(--ease-quint), opacity 420ms; animation: lv-rise 420ms var(--ease-quint) backwards; }
.lv-bn.go { translate: -225px -30px; scale: .2; opacity: 0; }
.lv-app { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--notch-green); color: #000; font-size: 17px; flex: none; }

/* Timer */
.lv-seg { display: flex; gap: 2px; width: max-content; margin: 0 auto; padding: 2px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); }
.lv-seg button { position: relative; height: 28px; padding: 0 14px; border-radius: 14px; font: 600 12px/1 -apple-system, system-ui, sans-serif; color: var(--notch-text-2); transition: background var(--m-base), color var(--m-base); }
.lv-seg button::after { content: ""; position: absolute; inset: -8px 0; }
.lv-seg button:hover { color: var(--notch-text); }
.lv-seg button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: var(--notch-text); }
.lv-tr { gap: 16px; margin-top: 16px; }
.lv-tn { flex: 1; font: 600 30px/1 -apple-system, system-ui, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* Up next */
.lv-q { display: flex; flex-direction: column; gap: 8px; }
.lv-qn { gap: 12px; }
.lv-ql { margin-top: 2px; }
.lv-qs { display: flex; flex-direction: column; gap: 4px; }
.lv-qr { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,.05);
  animation: lv-rise 360ms var(--ease-quint) calc(var(--j) * 70ms) backwards; }
.lv-qr .t1 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-qa { width: 24px; height: 24px; border-radius: 6px; flex: none; }

/* Watch */
.lv-wn { position: absolute; left: 590px; top: 110px; width: 332px; border-radius: 12px; overflow: hidden; background: #1c1d22; border: 1px solid #2f3036; color: #f5f5f7; }
.lv-wh { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-bottom: 1px solid #2a2b31; font-size: 12px; color: var(--notch-text-2); }
.lv-wh i { width: 10px; height: 10px; border-radius: 50%; background: #3a3b41; }
.lv-wh span { margin-left: 6px; }
.lv-wbody { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.lv-wbody b { font-size: 14px; }
.lv-wbody small { font-size: 12px; color: var(--notch-text-2); }
.lv-rg { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #26272c; cursor: pointer; }
.lv-rg::after { content: ""; position: absolute; inset: -5px; border-radius: 14px; border: 2px dashed rgba(10,132,255,.9); opacity: 0; pointer-events: none; transition: background var(--m-base); }
.lv-rg.pick::after { opacity: 1; animation: lv-pulse 1.4s var(--ease-inout) infinite; }
.lv-rg.on::after { opacity: 1; border-style: solid; background: rgba(10,132,255,.1); }
.lv-rg.done::after { border-color: var(--notch-green); }
.lv-rg:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 6px; }
.lv-pg { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.lv-pg i { position: absolute; inset: 0 auto 0 0; background: var(--notch-blue); transition: width 300ms linear; }
.lv-rg.done .lv-pg i { background: var(--notch-green); }
.lv-pn { min-width: 38px; text-align: right; font-size: 13px; font-weight: 600; }
.lv-mini { display: flex; align-items: center; gap: 6px; width: 96px; }
.lv-mini .lv-pg { height: 6px; }
.lv-mini .lv-pn { min-width: 30px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .lv-lock, .lv-w, .lv-ok, .lv-sl, .lv-bn, .lv-qr, .lv-np.lv-in, .lv-np.lv-out, .lv-ey, .lv-hop, .lv-cheer, .lv-sway,
  .lv-rg.pick::after, .lv-cbox.pop .lv-cre, .lv-ln.cur span { animation: none; }
  .lv-eq b { animation: none; scale: 1 .3; }
  .lv-lock, .lv-lock > *, .lv-cre g, .lv-bn, .lv-lt, .lv-dp i, .lv-pb i, .lv-pg i, .lv-eq b, .lv-wb b { transition: none; }
  .lv-ln.cur span { color: #fff; background: none; }
}