/* Hero lab: the three preview variants of the home hero (/lab/hero-a, -b, -c). Loaded after knobs.css. */

/* Lab banner and switcher in the hero copy */

/* Chart with an HTML layer on top */
.lc-host { position: relative; }
.lc { position: relative; flex: 1; display: flex; min-width: 0; }
.lc .lab-chart { flex: 1; }
.lc-over { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lc-marks, .lc-fx { position: absolute; inset: 0; }
.lc-fx-item { position: absolute; transform: translate(-50%, -50%); }
.lab-chart .c-future { fill: var(--c-area, rgba(124,77,255,.22)); opacity: .35; }
.lab-chart .c-bars rect { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.lab-chart .c-bars rect.on { opacity: .75; transform: scaleY(1); }
.lab-chart .c-head { stroke-width: 2; }
.lab-chart .c-ghost { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lab-chart .c-ghost.g-prev { stroke: #8f89a3; stroke-dasharray: 4 4; opacity: .7; }
.lab-chart .c-ghost.g-best { stroke: #d9a21b; opacity: .85; }
.lab-chart .c-ghost.g-before { stroke: #8f89a3; opacity: .55; }

/* Under-chart controls */
.lab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.lab-bar .grow { flex: 1; }
.lab-btn { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--neutral-6); background: #fff; font: 500 13px var(--f-ui); color: var(--neutral-12); cursor: pointer; }
.lab-btn:hover { border-color: var(--brand-9); color: var(--brand-11); }
.lab-btn.primary { background: var(--brand-9); border-color: var(--brand-9); color: #fff; }
.lab-btn.primary:hover { background: var(--brand-10); color: #fff; }
.lab-btn:focus-visible { outline: 2px solid var(--brand-9); outline-offset: 2px; }
.lab-btn[hidden] { display: none; }
.lab-clock { font: 500 12px var(--f-code); color: var(--neutral-11); font-variant-numeric: tabular-nums; }
.sy-stats b { font-variant-numeric: tabular-nums; }
.sy-stats b.bump { animation: lab-bump .35s ease-out; }
@keyframes lab-bump { 40% { transform: scale(1.12); } }
.sy-stats b { display: inline-block; transform-origin: left center; }

/* A · Slow motion */
.lc-cap { display: flex; align-items: center; min-height: 30px; margin: 0 0 6px; padding: 5px 10px; border-radius: 8px; background: #f4f1ff; color: #3a2a7a; font: 500 13px/1.35 var(--f-ui); transition: background .25s, color .25s; }
.lc-cap:not(.on) { color: transparent; }
.lc-cap.on { animation: cap-in .3s ease-out; }
@keyframes cap-in { from { opacity: .3; transform: translateY(-3px); } }
.lc-cap.bad { background: #fde8e8; color: #b42323; }
.lc-cap.good { background: #e3f6ee; color: #0e7a5a; }
.fx-loss { font: 600 12px var(--f-code); color: #d13415; text-shadow: 0 1px 0 #fff, 0 0 4px #fff; white-space: nowrap; animation: fx-rise 1.4s ease-out forwards; }
.fx-dot { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; animation: fx-pop 1s ease-out forwards; }
@keyframes fx-rise { from { opacity: 0; transform: translate(-50%, -30%); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -260%); } }
@keyframes fx-pop { from { opacity: 1; transform: translate(-50%, -50%) scale(.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -30px))) scale(1.2); } }
.fx-up { font: 600 11px var(--f-code); color: var(--brand-11); background: #fff; padding: 1px 5px; border-radius: 4px; box-shadow: 0 2px 6px rgba(55,0,135,.2); white-space: nowrap; animation: fx-rise 1.6s ease-out forwards; }

/* B · Cause and effect */
.lb-explain { min-height: 38px; margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: #f4f1ff; font: 400 13px/1.4 var(--f-ui); color: #3a2a7a; transition: background .2s; }
.lb-explain b { font-weight: 600; }
.lc-mark { position: absolute; width: 0; height: 0; transform: translate(-50%, -100%); opacity: 0; transition: opacity .2s; }
.lc-mark.on { opacity: 1; }
.lc-mark.up { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #642dff; margin-top: -4px; }
.lc-tag { position: absolute; right: 4px; transform: translateY(-50%); padding: 1px 6px; border-radius: 4px; font: 600 11px var(--f-code); background: #fff; white-space: nowrap; transition: top .18s ease-out, box-shadow .2s; }
.lc-tag.t-max { color: #7c4dff; box-shadow: inset 0 0 0 1px #c9b8ff; }
.lc-tag.t-min { color: #0e7a5a; box-shadow: inset 0 0 0 1px #a6dcc9; right: 64px; }
.lc-cap-zone { position: absolute; top: 0; bottom: 5%; background: rgba(229,72,77,.10); border-left: 1px solid rgba(229,72,77,.3); border-right: 1px solid rgba(229,72,77,.3); opacity: 0; transition: opacity .2s; }
.lc-cap-zone.on { opacity: 1; }
[data-focus] .lab-chart .c-area, [data-focus] .lab-chart .c-bars, [data-focus] .lab-chart .c-inst, [data-focus] .lab-chart .c-max, [data-focus] .lab-chart .c-min, [data-focus] .lc-mark, [data-focus] .lc-tag { transition: opacity .2s, stroke-width .2s; }
[data-focus] .lab-chart .c-area, [data-focus] .lab-chart .c-bars { opacity: .35; }
[data-focus] .lab-chart .c-inst { opacity: .75; }
[data-focus] .lab-chart .c-max, [data-focus] .lab-chart .c-min, [data-focus] .lc-mark, [data-focus] .lc-tag { opacity: .25; }
[data-focus=trigger] .lc-mark.on { opacity: 1; transform: translate(-50%, -100%) scale(1.5); }
[data-focus=trigger] .lab-chart .c-inst { opacity: 1; }
[data-focus=minI] .lab-chart .c-min, [data-focus=minI] .lc-tag.t-min { opacity: 1; stroke-width: 3; }
[data-focus=maxI] .lab-chart .c-max, [data-focus=maxI] .lc-tag.t-max { opacity: 1; stroke-width: 3; }
[data-focus=maxI] .lab-chart .c-bars { opacity: 1; }
[data-focus=cpu] .lab-chart .c-inst, [data-focus=ram] .lab-chart .c-inst { opacity: 1; }
[data-focus=cpu] .sy-stats .st-cost, [data-focus=ram] .sy-stats .st-cost { background: #f4f1ff; box-shadow: 0 0 0 2px #c9b8ff; }
.sy-stats > div { border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: background .2s, box-shadow .2s; }
.lb-delta { display: block; min-height: 16px; font: 600 12px var(--f-code); opacity: 0; transition: opacity .3s; }
.lb-delta.on { opacity: 1; }
.lb-delta.good { color: #0e7a5a; }
.lb-delta.bad { color: #c4282c; }
.lb-delta.same { color: var(--neutral-10); }
.lb-unit { display: block; font: 400 11px var(--f-code); color: #6b5fa0; }
.knob-wrap.lit, .v-synth [data-knob].lit { border-radius: 12px; background: rgba(124,77,255,.10); box-shadow: 0 0 0 2px rgba(124,77,255,.25); }
.sy-legend .lg-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #642dff; border-radius: 0; background: none; }
.sy-legend .lg-before { width: 14px; height: 0; border-top: 2px solid #8f89a3; border-radius: 0; opacity: .7; }
.sy-legend .lg-prev { width: 14px; height: 0; border-top: 2px dashed #8f89a3; border-radius: 0; }
.sy-legend .lg-best { width: 14px; height: 0; border-top: 2px solid #d9a21b; border-radius: 0; }

/* C · Arcade */
.sy-lcd.arc { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; min-width: 168px; }
.sy-lcd .lcd-grade { min-width: 22px; text-align: center; font: 600 22px var(--f-code); font-style: normal; }
.sy-lcd .lcd-sub { flex-basis: 100%; text-align: right; font: 500 11px var(--f-code); letter-spacing: .1em; opacity: .8; }
.sy-lcd.flash { animation: lcd-flash .5s steps(2) 3; }
@keyframes lcd-flash { 50% { background: #c9f2cf; box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 0 16px rgba(120,230,140,.8); } }
.pp-themes button .stars { margin-left: 6px; letter-spacing: 1px; color: #d9a21b; font-size: 11px; }
.pp-themes button[aria-pressed=true] .stars { color: #ffd66b; }
.lc-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.8); padding: 10px 18px; border-radius: 12px; background: rgba(28,22,48,.92); color: #fff; text-align: center; opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.3,1.6,.5,1); white-space: nowrap; }
.lc-banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lc-banner b { display: block; font: 500 28px/1.1 var(--f-code); letter-spacing: .08em; }
.lc-banner span { font: 400 12px var(--f-ui); opacity: .85; }
.lc-banner.perfect { background: linear-gradient(135deg, #642dff, #b14dff); box-shadow: 0 10px 30px -8px rgba(100,45,255,.7); }
.lc-banner.best { background: linear-gradient(135deg, #b8860b, #d9a21b); }
.fx-conf { width: 7px; height: 11px; border-radius: 2px; animation: fx-conf 1.6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes fx-conf { from { opacity: 1; transform: translate(-50%, -50%) rotate(0); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); } }
.lc-combo { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 6px; background: #ff6b4a; color: #fff; font: 600 12px var(--f-code); letter-spacing: .06em; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.lc-combo.on { opacity: 1; transform: scale(1); }
.lc-run { position: absolute; top: 8px; left: 8px; font: 500 11px var(--f-code); color: var(--neutral-11); background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 4px; }
.lab-near { font-weight: 500; color: var(--neutral-12); }
.lab-btn.pulse { animation: lab-pulse 1.3s ease-in-out infinite; }
@keyframes lab-pulse { 50% { box-shadow: 0 0 0 5px rgba(102,46,255,.22); } }
.knob-wrap.nudge, [data-knob].nudge { animation: lab-nudge 1.2s ease-in-out 2; border-radius: 12px; }
@keyframes lab-nudge { 50% { background: rgba(124,77,255,.16); box-shadow: 0 0 0 3px rgba(124,77,255,.35); } }

@media (max-width: 520px) {
  .lc-cap { font-size: 12px; }
  .lc-banner b { font-size: 22px; }
  .lab-btn { height: 34px; padding: 0 12px; }
  .lc-tag.t-min { right: 56px; }
  .sy-lcd.arc { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-chart .c-bars rect, .lc-banner, .lc-combo, .lc-cap, .lc-tag { transition: none; animation: none; }
  .lab-chart .c-bars rect.on { transform: none; }
  .sy-stats b.bump, .sy-lcd.flash, .lab-btn.pulse, .knob-wrap.nudge, [data-knob].nudge { animation: none; }
}
@media (max-width: 520px) { .sy-lcd.arc { padding: 6px 10px; gap: 6px; } .sy-lcd.arc b { font-size: 22px; } .sy-lcd .lcd-grade { font-size: 18px; } }
/* Customers kept waiting (slow answers), stacked on the lost ones: they cost money too */
.lab-chart .c-bars rect.c-wait { fill: #f5a524; }
.lg-wait { background: #f5a524; opacity: .75; }
.sy-unit { width: 100%; font: 500 11px var(--f-code); color: var(--neutral-10); margin-bottom: 2px; }