/* Home first screen: identity panel on the left, drifting wall of real test screenshots on the right.
   Colours come from the ember tokens in public-ui.css. */
.hero.home-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:0;padding:0;border-bottom:1px solid var(--color-rule);isolation:isolate}
.stage-panel{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:28px max(20px,env(safe-area-inset-right,0px)) 32px max(20px,env(safe-area-inset-left,0px));margin-top:-28px;background:var(--color-paper);border-radius:28px 28px 0 0;box-shadow:0 -24px 60px -20px #000}
.stage-panel>*{max-width:100%}

.stage-status{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:linear-gradient(#211f1d,#181715);box-shadow:inset 0 1px #ffffff12,0 0 0 1px #00000080;font-size:13px;color:var(--color-muted)}
.stage-status:hover{color:var(--color-ink)}
.stage-status i{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:stage-ping 2.4s ease-out infinite}
@keyframes stage-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ember) 70%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

.home-stage h1{display:flex;flex-direction:column;gap:12px;font-weight:600}
.hero-kicker{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--color-accent-text)}
.hero-line{font-size:clamp(30px,2.7vw,42px);line-height:1.18;letter-spacing:-.035em;text-wrap:balance;color:var(--color-ink)}
.hero-desc{color:var(--color-muted);max-width:30em}
.hero-count{margin-top:-10px;font-size:14px;color:var(--color-muted)}
.hero-count b{color:var(--color-ink);font-weight:500;font-variant-numeric:tabular-nums}
.home-stage .hero-actions{margin-top:0}
.home-stage .hero-primary{min-height:48px;padding:0 22px;gap:10px;font-size:15px}
.home-stage #view-tested{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:linear-gradient(#2a2724,#1c1a18);color:var(--color-ink);font-size:15px;font-weight:600;box-shadow:inset 0 1px #ffffff17,inset 0 -1px #00000059,0 0 0 1px #00000080,0 10px 24px -12px #000000d9}
.home-stage #view-tested:hover{background:linear-gradient(#322e2a,#211f1d)}

.stage-search{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;border-radius:14px;background:#100f0e;box-shadow:inset 0 1px 2px #000a,0 0 0 1px var(--color-rule),0 1px #ffffff0a;transition:box-shadow var(--dur-short) var(--ease-out)}
.stage-search:focus-within{box-shadow:inset 0 1px 2px #000a,0 0 0 1px color-mix(in srgb,var(--ember) 55%,transparent),0 0 24px -8px color-mix(in srgb,var(--ember) 60%,transparent)}
.stage-search svg{width:18px;height:18px;flex-shrink:0;stroke:var(--color-muted)}
.stage-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--color-ink);font-size:15px}
.stage-search input::placeholder{color:color-mix(in srgb,var(--color-ink) 40%,transparent)}

.stage-cats{display:flex;flex-wrap:wrap;gap:8px}
.stage-label{flex-basis:100%;font-size:12px;letter-spacing:.08em;color:color-mix(in srgb,var(--color-ink) 40%,transparent)}
.stage-cats button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;background:#1f1d1b;box-shadow:inset 0 1px #ffffff0d,0 0 0 1px #00000070;color:var(--color-muted);font-size:14px;transition:color var(--dur-short),background-color var(--dur-short)}
.stage-cats button:hover{color:var(--color-ink);background:#262320}
.stage-cats span{font-size:12px;color:color-mix(in srgb,var(--color-ink) 40%,transparent);font-variant-numeric:tabular-nums}

.home-stage .hero-links{margin-top:0;color:var(--color-muted)}
.stage-clock{display:flex;flex-direction:column;gap:2px;width:100%;padding-top:18px;border-top:1px solid var(--color-rule);font-size:14px}
.stage-clock strong{font-weight:500}
.stage-clock span{color:color-mix(in srgb,var(--color-ink) 40%,transparent);font-variant-numeric:tabular-nums}

/* Wall */
.stage-wall{position:relative;order:-1;height:clamp(300px,52vw,420px);overflow:hidden;min-width:0}
.stage-wall::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(var(--color-paper),transparent 12%,transparent 88%,var(--color-paper))}
.stage-wall{--stage-gap:16px;display:grid;grid-template-columns:32% 52% 32%;justify-content:center;gap:var(--stage-gap)}
.stage-col{display:flex;flex-direction:column;gap:var(--stage-gap);animation:stage-drift var(--t,110s) linear infinite;will-change:transform}
.stage-col:nth-child(1){margin-top:-180px}
.stage-col:nth-child(2){--t:140s;animation-direction:reverse}
.stage-col:nth-child(3){--t:95s;margin-top:-60px}
@keyframes stage-drift{to{transform:translateY(calc(-50% - var(--stage-gap) / 2))}}
.stage-wall:hover .stage-col,.stage-wall:focus-within .stage-col{animation-play-state:paused}
.stage-frame{position:relative;display:block;border:4px solid transparent;border-radius:16px;background:var(--bezel);box-shadow:var(--bezel-shadow);transition:box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.stage-frame img{display:block;width:100%;height:auto;aspect-ratio:1500/816;object-fit:cover;object-position:top;border-radius:12px;background:#0f0e0d}
.stage-frame:hover,.stage-frame:focus-visible{transform:translateY(-3px);box-shadow:inset 0 2px 1px -1px #ffffff26,0 0 0 1px #0009,0 0 0 1px #ffffff14,0 0 48px -10px color-mix(in srgb,var(--ember) 55%,transparent),0 30px 70px -30px #000000f2}
.stage-cap{position:absolute;left:12px;right:12px;bottom:12px;display:none;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:#141312d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px #ffffff12,0 0 0 1px #00000080;font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.stage-cap b{font-weight:600;white-space:nowrap}
.stage-cap em{flex:1;min-width:0;font-style:normal;color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-cap i{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--core);color:#1a1512;font-style:normal}
.stage-frame:hover .stage-cap,.stage-frame:focus-visible .stage-cap{opacity:1;transform:none}
.stage-note{display:none}

@media (min-width:64rem){
  .hero.home-stage{grid-template-columns:minmax(380px,.9fr) minmax(0,1.6fr);height:clamp(680px,calc(100dvh - 88px),980px)}
  .stage-panel{justify-content:center;margin-top:0;padding:40px 40px 32px max(20px,calc((100vw - 1320px) / 2));border-radius:0;border-right:1px solid var(--color-rule);box-shadow:24px 0 60px -30px #000}
  .stage-wall{--stage-gap:28px;order:0;display:block;height:auto}
  .stage-wall>.stage-col{position:absolute;top:0}
  .stage-wall>.stage-col:nth-child(1){left:28px;width:27%}
  .stage-wall>.stage-col:nth-child(2){left:calc(27% + 56px);width:40%}
  .stage-wall>.stage-col:nth-child(3){left:calc(67% + 84px);width:27%}
  .stage-frame{border-width:5px;border-radius:24px}
  .stage-frame img{border-radius:19px}
  .stage-cap{display:flex}
  .stage-note{display:block;position:absolute;z-index:2;right:20px;bottom:18px;padding:6px 12px;border-radius:999px;background:#151413cc;font-size:12px;color:color-mix(in srgb,var(--color-ink) 40%,transparent)}
}
@media (hover:none){.stage-cap{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .stage-col,.stage-status i{animation:none}
  .stage-frame,.stage-cap{transition:none}
}