/* ============================================================================
   home.css — the front door.
   ----------------------------------------------------------------------------
   Sits on clusterhack.css ("Aperture") and guide.css (page frame, .on-ch
   panels, .map-card, .dont, .guide-end). Nothing new in colour or type: the
   manifesto fixes both — navy is the dark hall before the reveal, mono is the
   workshop's totem, amber is the ON-AIR lamp and stays rare (live, deadline,
   winner, the one primary action).

   What is new is the signature: a stage that replays one evening in four
   scenes — 19:00 the door, 23:58 the gong, 00:15 the reveal, 09:00 the page —
   and a page structured by the same four hours underneath it.

   Prefixes: .home- .stage- .hour- .room-
   ========================================================================== */

/* ---- the rim: one framed panel holds the hero, like a window ------------- */
.home-panel{position:relative;margin:26px 0 8px;border:1px solid var(--hk-line);border-radius:var(--hk-radius-lg);
  background:linear-gradient(160deg,var(--hk-surface) 0%,var(--hk-bg-2) 70%);box-shadow:var(--hk-shadow-lg);overflow:hidden}
.home-noise{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:linear-gradient(rgba(233,238,249,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(233,238,249,.028) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(120% 120% at 100% 0%,rgba(0,0,0,.6),transparent 62%);
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,rgba(0,0,0,.6),transparent 62%)}
.home-glow{position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none}
.home-glow.a{width:300px;height:300px;right:-40px;top:-80px;background:rgba(255,138,61,.16)}
.home-glow.b{width:260px;height:260px;left:30%;bottom:-120px;background:rgba(85,211,222,.10)}
/* the workshop's totem, as texture: a block-letter banner at whisper opacity */
.home-banner{position:absolute;right:34px;top:18px;margin:0;font-family:var(--hk-mono);font-size:9px;line-height:1.05;
  letter-spacing:0;color:var(--hk-ink);opacity:.07;pointer-events:none;user-select:none;white-space:pre}
/* the panel's status bar */
.home-env{position:relative;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;padding:13px 34px;
  border-top:1px solid var(--hk-line);background:rgba(10,15,30,.55);font-family:var(--hk-mono);font-size:12.5px}
.home-env b{color:var(--hk-muted);font-weight:400}
.home-env .v{color:var(--hk-ink)} .home-env .v.a{color:var(--hk-amber)} .home-env .v.c{color:var(--hk-cyan)}
.home-env .keys{margin-left:auto;color:var(--hk-dim)}
.home-env kbd{font-family:var(--hk-mono);font-size:11px;color:var(--hk-muted);background:var(--hk-bg);
  border:1px solid var(--hk-line);border-radius:5px;padding:1px 5px}
/* the typed command that opens the page */
.home-cmd{font-family:var(--hk-mono);font-size:13px;line-height:1.8;color:var(--hk-muted);min-height:3.6em}
.home-cmd .p{color:var(--hk-amber)} .home-cmd .ok{color:var(--hk-live)} .home-cmd .t{color:var(--hk-dim)}
.home-cmd .hk-ln{white-space:pre-wrap;word-break:break-word}
/* hack.js appends the cursor after the typed lines; keep it on the last line */
.home-cmd .hk-ln:last-of-type{display:inline}

/* ---- hero ---------------------------------------------------------------- */
.home-hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;padding:42px 34px 34px}
.home-h1{font-family:var(--hk-sans);font-weight:700;letter-spacing:-.04em;line-height:1.0;
  font-size:clamp(36px,5.3vw,64px);color:var(--hk-ink);margin:16px 0 20px}
.home-h1 .dim{color:var(--hk-dim);font-weight:600}
.home-h1 .amber{color:var(--hk-amber);position:relative;display:inline-block}
/* hover "shipped": a one-beat glitch, the only wink on the page */
.home-h1 .amber:hover{animation:home-glitch .5s steps(2,end) 1}
@keyframes home-glitch{
  0%{text-shadow:2px 0 var(--hk-cyan),-2px 0 var(--hk-magenta);transform:translateX(0)}
  25%{text-shadow:-3px 0 var(--hk-cyan),3px 0 var(--hk-magenta);transform:translateX(1px)}
  50%{text-shadow:2px 0 var(--hk-magenta),-2px 0 var(--hk-cyan);transform:translateX(-1px)}
  75%{text-shadow:0 0 transparent;transform:translateX(0)}
  100%{text-shadow:none}}
.home-hero .hk-sub{max-width:52ch}
.home-hint{margin-top:16px}

/* ---- the stage: one evening, replayed ------------------------------------ */
.stage{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);
  overflow:hidden;box-shadow:var(--hk-shadow-lg)}
.stage-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--hk-line);
  font-family:var(--hk-mono);font-size:12px;color:var(--hk-muted);background:var(--hk-surface-2)}
.stage-bar .title{margin-left:6px;color:var(--hk-muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk .hk-pill.sandbox{color:var(--hk-muted)}
.home-hint a{color:var(--hk-muted)}
.stage-bar .hk-pill{margin-left:auto}
.stage-pause{appearance:none;background:transparent;border:1px solid var(--hk-line);border-radius:6px;color:var(--hk-muted);
  font-family:var(--hk-mono);font-size:10px;line-height:1;padding:4px 6px;cursor:pointer;margin-left:8px}
.stage-pause:hover,.stage-pause[aria-pressed="true"]{color:var(--hk-ink);border-color:var(--hk-faint)}
.stage-link{color:var(--hk-cyan)}
.stage-plain{font-family:var(--hk-sans);font-size:13.5px;color:var(--hk-muted);margin:1px 0 3px}
.stage-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:312px;font-family:var(--hk-mono);font-size:13px;line-height:1.7;color:var(--hk-muted)}
.stage-scene{grid-area:1/1;position:relative;min-width:0;padding:18px 20px;opacity:0;visibility:hidden;
  transition:opacity .5s var(--hk-ease),visibility 0s linear .5s}
.stage-scene.is-on{opacity:1;visibility:visible;transition-delay:0s}
/* No JS: the page is what remains, so the page is what shows. */
.stage:not(.is-live) .stage-scene:last-child{opacity:1;visibility:visible}
.stage-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.stage-t{color:var(--hk-ink);font-weight:600}
.stage-t .p{color:var(--hk-amber);margin-right:6px}
.stage-timer{color:var(--hk-amber);font-variant-numeric:tabular-nums}
.stage-card{background:var(--hk-bg-2);border:1px solid var(--hk-line);border-radius:var(--hk-radius-sm);padding:13px 14px}
.stage-card + .stage-card{margin-top:10px}
.stage-k{color:var(--hk-muted)}
.stage-v{color:var(--hk-ink)}
.stage-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px dashed var(--hk-line-2)}
.stage-row:first-of-type{border-top:0}
.stage-row .who{color:var(--hk-ink)}
.stage-row .act{color:var(--hk-cyan);white-space:nowrap}
.stage-warm{font-family:var(--hk-sans);font-size:14px;color:var(--hk-ink);line-height:1.55;margin:10px 0 4px}
.stage-warm cite{display:block;font-family:var(--hk-mono);font-style:normal;font-size:12px;color:var(--hk-muted);margin-top:6px}
.stage-quiet{color:var(--hk-muted);font-size:12px;margin-top:10px}
/* form state at 23:58 */
.stage-field{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--hk-line-2)}
.stage-field .k{color:var(--hk-muted);width:7ch;flex:none}
.stage-field .v{color:var(--hk-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-status{margin-top:12px;display:flex;align-items:center;gap:8px}
.stage-status .d{width:8px;height:8px;border-radius:50%;background:var(--hk-live);flex:none;
  box-shadow:0 0 0 3px rgba(90,208,140,.15)}
.stage-status .count{color:var(--hk-amber);font-variant-numeric:tabular-nums}
.stage-accepted{display:none;margin-top:12px;color:var(--hk-live)}
.stage-accepted a{color:var(--hk-cyan)}
.stage-scene.is-accepted .stage-status{display:none}
.stage-scene.is-accepted .stage-accepted{display:block}
/* the reveal: the only dramatic surface on the site — CRT scanlines and an ON-AIR lamp */
.stage-scene.reveal{background:var(--hk-deep);display:flex;flex-direction:column;justify-content:center;text-align:center}
.stage-scene.reveal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.stage-scene.reveal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 55%,rgba(255,138,61,.10),transparent 70%)}

.stage-scene.reveal .stage-head{position:absolute;top:18px;left:20px;right:20px;margin:0}
.stage-nom{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hk-muted)}
.stage-drum{height:18px;margin:8px 0 6px;color:var(--hk-faint);letter-spacing:.4em}
.stage-name{font-family:var(--hk-sans);font-weight:700;letter-spacing:-.03em;font-size:clamp(28px,3.4vw,40px);
  color:var(--hk-amber);line-height:1.05;margin:0 0 10px;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--hk-ease) 1.5s,transform .45s var(--hk-ease) 1.5s}
.stage-scene.reveal.is-on .stage-name{opacity:1;transform:none}
.stage-faces{display:flex;justify-content:center;gap:6px;margin:0 0 8px;opacity:0;transition:opacity .4s var(--hk-ease) 2.1s}
.stage-scene.reveal.is-on .stage-faces{opacity:1}
.stage-scene:not(.reveal) .stage-faces{justify-content:flex-start;opacity:1;transition:none}
.stage-face{width:26px;height:26px;border-radius:50%;background:var(--hk-surface-2);border:1px solid var(--hk-line);
  color:var(--hk-ink);font-size:10px;display:grid;place-items:center;letter-spacing:.02em}
.stage-team{color:var(--hk-muted);opacity:0;transition:opacity .4s var(--hk-ease) 2.3s}
.stage-scene.reveal.is-on .stage-team{opacity:1}
/* scene picker */
.stage-nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hk-line);background:var(--hk-surface-2)}
.stage-nav button{appearance:none;background:transparent;border:0;border-right:1px solid var(--hk-line);
  padding:10px 8px 11px;font-family:var(--hk-mono);font-size:12px;color:var(--hk-muted);cursor:pointer;
  position:relative;text-align:center;transition:color .15s var(--hk-ease)}
.stage-nav button:last-child{border-right:0}
.stage-nav button b{display:block;font-weight:600;color:var(--hk-muted)}
.stage-nav button[aria-pressed="true"]{color:var(--hk-ink)}
.stage-nav button[aria-pressed="true"] b{color:var(--hk-ink)}
.stage-nav button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--hk-cyan)}
.stage-nav button[aria-pressed="true"]::after{animation:stage-progress var(--stage-ms,5500ms) linear forwards}
.stage.is-paused .stage-nav button[aria-pressed="true"]::after{animation-play-state:paused}
@keyframes stage-progress{to{width:100%}}
.stage-nav button:focus-visible{outline:2px solid var(--hk-amber);outline-offset:-2px}

/* ---- the evening, hour by hour ------------------------------------------- */
.hour{display:grid;grid-template-columns:110px 1.15fr .85fr;gap:0 30px;padding:40px 0 8px;scroll-margin-top:72px;position:relative}
.hour + .hour{border-top:1px solid var(--hk-line-2)}
.hour-t{font-family:var(--hk-mono);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--hk-ink);line-height:1;padding-top:6px}
.hour-t small{display:block;font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--hk-dim);margin-top:8px}
.hour-t.gong{color:var(--hk-amber)}
.hour h3{font-family:var(--hk-sans);font-size:clamp(21px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--hk-ink);margin:0 0 12px}
.hour .guide-body p{max-width:58ch}
.hour .on-ch{position:static}

/* ---- rooms: what is live, what has a date -------------------------------- */
.room-list{display:grid;gap:12px}
.room{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--hk-surface);
  border:1px solid var(--hk-line);border-radius:var(--hk-radius);padding:16px 18px;transition:border-color .16s var(--hk-ease)}
.room:hover{border-color:var(--hk-faint)}
.room .when{font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-muted);min-width:14ch}
.room .when b{display:block;font-size:15px;font-weight:600;color:var(--hk-ink);font-variant-numeric:tabular-nums}
.room h3{font-family:var(--hk-sans);font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px;color:var(--hk-ink)}
.room .where{font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-muted)}
.room .gong{font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-muted);text-align:right;white-space:nowrap}
.room .gong b{display:block;color:var(--hk-amber);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}
.room-empty{border:1px dashed var(--hk-line);border-radius:var(--hk-radius);padding:22px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px}
.room-empty p{margin:0;font-family:var(--hk-mono);font-size:13.5px;color:var(--hk-muted);line-height:1.7}
.room-empty p .p{color:var(--hk-amber)}

/* ---- the wall ------------------------------------------------------------ */
.wall-cover{aspect-ratio:16/9;border-radius:var(--hk-radius-sm);border:1px solid var(--hk-line);background:var(--hk-bg-2);
  overflow:hidden;margin-bottom:12px;display:grid;place-items:center;font-family:var(--hk-mono);font-size:11px;color:var(--hk-faint)}
.wall-cover img{width:100%;height:100%;object-fit:cover;display:block}
.hk-pill.sandbox{color:var(--hk-dim);border-style:dashed}
.wall-empty{border:1px dashed var(--hk-line);border-radius:var(--hk-radius);padding:22px;font-family:var(--hk-mono);
  font-size:13.5px;color:var(--hk-muted);line-height:1.7}
.wall-empty .p{color:var(--hk-amber)}

/* the MCP band: the command box scrolls instead of stretching the grid */
.hk-band .in>*{min-width:0}
.hk-runbox pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
/* card-links keep their own radius under the shared focus rule */
.hk .map-card:focus-visible,.hk .room:focus-visible{border-radius:var(--hk-radius)}

/* ---- who / refusals reuse guide.css; only the facet label is new ---------- */
.map-card .facet{font-family:var(--hk-mono);font-size:12px;color:var(--hk-dim);display:block;margin:0 0 8px}

@media(max-width:960px){
  .home-hero{grid-template-columns:1fr;gap:30px;padding:30px 22px 26px}
  .home-banner{display:none}
  .home-env{padding:12px 22px}
  .home-env .keys{display:none}
  .hour{grid-template-columns:90px 1fr;gap:0 20px}
  .hour .on-ch{grid-column:2}
  .room{grid-template-columns:1fr;gap:8px}
  .room .gong{text-align:left}
}
@media(max-width:600px){
  .stage-row{flex-wrap:wrap;gap:2px 12px}
  .stage-row .act{white-space:normal;text-align:right;margin-left:auto}
  .stage-head{flex-wrap:wrap}
  .hour{grid-template-columns:1fr;padding-top:30px}
  .hour .on-ch{grid-column:auto}
  .hour-t{margin-bottom:10px}
  .stage-body{min-height:0}
  .stage-nav button{font-size:11px;padding:9px 4px 10px}
  .stage-nav button b{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .home-h1 .amber:hover{animation:none}
  .stage-scene{transition:none}
  .stage-name,.stage-faces,.stage-team{transition:none;opacity:1;transform:none}
  .stage-nav button[aria-pressed="true"]::after{animation:none;width:100%}
}

/* phones: the typed command yields to the sentence; the headline fits in three lines */
@media(max-width:600px){.home-cmd{display:none}}
@media(max-width:400px){.hk-wrap{padding:0 14px}.home-hero{padding:26px 16px 22px}.home-h1{font-size:31px}.stage-nav button{font-size:10px}}
html[lang="ru"] .home-h1{font-size:clamp(30px,4.5vw,54px)}