/* aeyv — the studio shell («Несущая»). index.html and 404.html. Loaded after css/base.css.
   Monochrome and silent: one live line of light on near-black. The only hue on these pages is a
   transmission's own colour (--tx), set inline on its row in the catalog.
   Tokens → page base → header → hero → catalog → contact → coda → footer → 404 → motion → print → view transitions
   (the opt-in itself is shared, in base.css) */

:root {
  color-scheme: dark;
  /* grounds */
  --void:  #08090a;
  --deep:  #0e0f11;
  --rule:  color-mix(in oklch, var(--text) 13%, transparent);
  /* text */
  --text:  #e4e6e3;
  --muted: #8e918d;
  --dim:   #565955;   /* decoration and the unlit phosphor ghost only, never text */
  /* the beam */
  --trace: #f2f5f1;
  --glow:  rgb(207 224 216 / .35);
  --noise: #3a3d3b;
  /* per transmission: overridden inline on each row */
  --tx:    var(--trace);
  /* type */
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-text: "Onest", "Segoe UI", system-ui, sans-serif;
  --fs-num:   clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --fs-addr:  clamp(1.125rem, .9rem + 1.2vw, 1.75rem);
  --fs-label: .875rem;
  --fs-meta:  .8125rem;
  --fs-lede:  clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-title: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --fs-body:  1.0625rem;
  --fs-coda:  1.125rem;
  /* layout */
  --gutter: clamp(16px, 5vw, 64px);
  --col-gap: clamp(12px, 2vw, 24px);
  --maxw: 1440px;
  --header-h: 56px;
  --section-pad: clamp(96px, 16vh, 200px);
  /* motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: 2px solid var(--trace);
}
@media (max-width: 759px) { :root { --header-h: 52px; } }

html, body { background: var(--void); color: var(--text); }
body { font: 400 var(--fs-body)/1.5 var(--f-text); }
::selection { background: var(--trace); color: var(--void); }
p { text-wrap: pretty; }

.skip { background: var(--trace); color: var(--void); font: 400 var(--fs-meta)/1.2 var(--f-mono); letter-spacing: .04em; }

/* text links: a 1 px underline, --rule at rest, --trace on hover and focus. No filled buttons. */
.sbar__nav a, .hero__go a, .tx__title a, .tx__act a, .contact__mail a, .sfoot a, .nosig__go a {
  text-decoration: underline 1px var(--rule); text-underline-offset: 6px; transition: text-decoration-color .2s, color .2s; }
.sbar__nav a:hover, .sbar__nav a:focus-visible, .hero__go a:hover, .hero__go a:focus-visible,
.tx__title a:hover, .tx__title a:focus-visible, .tx__act a:hover, .tx__act a:focus-visible,
.contact__mail a:hover, .contact__mail a:focus-visible, .sfoot a:hover, .sfoot a:focus-visible,
.nosig__go a:hover, .nosig__go a:focus-visible { text-decoration-color: var(--trace); color: var(--text); }

.label { font: 500 var(--fs-label)/1.3 var(--f-mono); letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ header */

.sbar-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.sbar { position: sticky; top: 0; z-index: 5; height: var(--header-h); margin-bottom: calc(-1 * var(--header-h));
  display: flex; align-items: center; gap: 24px;
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  transition: background-color .3s ease, box-shadow .3s ease; }
.sbar.is-scrolled, html.no-js .sbar { background: color-mix(in oklch, var(--void) 92%, transparent); box-shadow: inset 0 -1px 0 var(--rule); }
.sbar__mark { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--trace); }
.sbar__mark svg { display: block; width: 56px; height: 26px; overflow: visible; }
.sbar__nav { display: flex; align-items: center; gap: 4px; }
.sbar__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px;
  font: 400 .875rem/1 var(--f-mono); color: var(--muted); }
.sbar__readout { margin-left: auto; min-width: 8ch; text-align: right; white-space: nowrap;
  font: 400 .75rem/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .sbar { gap: 12px; } .sbar__nav a { padding-inline: 4px; } }

/* ------------------------------------------------------------------ hero: the carrier and the name */

.hero { position: relative; overflow: hidden; min-height: max(560px, 92svh); --line-y: 56%; --wm-w: min(44vw, 680px);
  --x0: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
@media (max-width: 759px) { .hero { min-height: max(520px, 86svh); --line-y: 46%; --wm-w: min(calc(100vw - 32px), 420px); } }
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: var(--line-y); height: 1px;
  background: var(--trace); box-shadow: 0 0 6px var(--glow); }
.wordmark { position: absolute; margin: 0; left: var(--x0); width: var(--wm-w);
  top: calc(var(--line-y) - var(--wm-w) / 3); color: var(--trace); filter: drop-shadow(0 0 6px var(--glow)); }
.wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.wordmark .mark path { stroke-width: 1.5px; }
.hero__text { position: absolute; left: var(--x0); right: var(--gutter);
  top: calc(var(--line-y) + var(--wm-w) * .11 + clamp(24px, 4svh, 56px)); }
.hero__lede { font: 400 var(--fs-lede)/1.3 var(--f-text); max-width: 22ch; margin: 0 0 20px; }
.hero__go a { font: 400 var(--fs-meta)/1 var(--f-mono); letter-spacing: .04em; color: var(--text);
  display: inline-flex; align-items: center; min-height: 44px; }
.hero__nojs { margin-top: 12px; max-width: 46ch; font: 400 var(--fs-meta)/1.5 var(--f-mono); color: var(--muted); }
/* the beam draws over the unlit ghost (line and name), never under it; the text stays on top */
.carrier { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.hero__text { z-index: 2; }
html.gl-on .carrier { opacity: 1; }
html.gl-on .hero::before { background: var(--dim); box-shadow: none; }   /* the unlit phosphor ghost */
html.gl-on .wordmark { color: var(--dim); filter: none; }
.wordmark.is-locked, html.gl-on .wordmark.is-locked { color: var(--trace); filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 2px var(--trace)); }

/* ------------------------------------------------------------------ «Передачи»: the catalog */

.log { padding-top: 0; scroll-margin-top: calc(var(--header-h) + 16px); }   /* «Передачи» lands below the header */
.log .label { grid-column: 1 / -1; margin-bottom: 24px; }
.log__list { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; }

.tx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  grid-template-areas: "sig sig sig sig sig sig sig sig sig sig sig sig"
                       "n n t t t t t f f f f f"
                       "n n l l l l l f f f f f"
                       "n n m m m m m f f f f f"
                       "n n a a a a a f f f f f";
  grid-template-rows: auto auto auto auto 1fr; padding-bottom: clamp(48px, 8vh, 96px); }
.tx--unknown { grid-template-areas: "sig sig sig sig sig sig sig sig sig sig sig sig"
                                    "n n l l l l l l l l l l";
  grid-template-rows: auto auto; }
@media (max-width: 759px) {
  .tx { grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas: "sig sig sig sig" "n t t t" "f f f f" "l l l l" "m m m m" "a a a a";
        grid-template-rows: auto; row-gap: 16px; }
  .tx--unknown { grid-template-areas: "sig sig sig sig" "n l l l"; }
}

/* the signature: the transmission's name in Morse. Without JS a plain 1 px line at its centre. */
.tx__sig { grid-area: sig; position: relative; display: block; height: 24px; margin-bottom: clamp(20px, 3vh, 32px); }
.tx__sig::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.tx__sig.has-svg::before { content: none; }
.tx__sig svg { display: block; width: 100%; height: 24px; overflow: visible; }
.tx__sig path { fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sig__g { transform: scaleY(.2); transform-origin: 0 0; transition: transform .35s var(--ease-out); }
.sig__base { stroke: var(--rule); transition: stroke .2s; }
.sig__head { stroke: var(--tx); opacity: 0; stroke-dasharray: 40 2000; stroke-dashoffset: 40; }
.sig__el { stroke: var(--tx); opacity: 0; }
.tx--unknown .tx__sig { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24'%3E%3Cpolyline points='0,12 13,12 15,10.5 17,13.5 19,12 46,12 47,11 49,14 51,9.5 53,12.5 55,12 92,12 94,13 95,11 97,12 131,12 133,10 134,13 136,12.5 138,12 171,12 172,13.5 174,11.5 176,12 207,12 209,11 210,12.5 212,12 240,12' fill='none' stroke='%233a3d3b' stroke-width='1'/%3E%3C/svg%3E") 0 50% / 240px 24px repeat-x; }
.tx--unknown .tx__sig::before { content: none; }

.tx__n { grid-area: n; font: 200 var(--fs-num)/.9 var(--f-mono); letter-spacing: -.02em; color: var(--muted);
  font-variant-numeric: tabular-nums; transition: color .2s; }
.tx__title { grid-area: t; font: 500 var(--fs-title)/1.1 var(--f-text); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 14px; }
.tx__title a { color: var(--text); }
.tx__line { grid-area: l; font: 400 var(--fs-body)/1.5 var(--f-text); max-width: 46ch; color: var(--text); }
.tx--unknown .tx__line { color: var(--muted); align-self: end; }
.tx--unknown .tx__n { font-size: var(--fs-title); align-self: end; }   /* an empty slot weighs less than a game */
.tx__meta { grid-area: m; margin-top: 14px; font: 400 var(--fs-meta)/1.45 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.tx__act { grid-area: a; display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; align-self: start; }
.tx__act a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 12px;
  font: 400 var(--fs-meta)/1 var(--f-mono); letter-spacing: .04em; color: var(--text); }
.tx__frame { grid-area: f; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; align-self: start;
  background: var(--deep); view-transition-name: var(--vt, none); }
.tx__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--rule); pointer-events: none; }
.tx__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 55%; }
.tx__mono { filter: grayscale(1) brightness(.9) contrast(1.05); }
.tx__color { clip-path: inset(0 0 100% 0); transition: clip-path .2s linear; }
@media (max-width: 759px) { .tx__title { margin-bottom: 0; } .tx__meta { margin-top: 0; } .tx__act { margin-top: -8px; } }

/* row states: pure CSS, fine pointers and keyboard */
.tx:not(.tx--unknown):hover .tx__n, .tx:not(.tx--unknown):focus-within .tx__n { color: var(--tx); }
.tx:hover .sig__g, .tx:focus-within .sig__g { transform: scaleY(1); }
.tx:hover .sig__head, .tx:focus-within .sig__head { animation: sig-run .9s linear both; }
@keyframes sig-run { 0% { opacity: 1; stroke-dashoffset: 40; } 99% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1000; } }
.tx:hover .tx__color, .tx:focus-within .tx__color { clip-path: inset(0); transition: clip-path .72s steps(24, end); }
.tx:active .sig__base { stroke: var(--tx); }
.tx:active .tx__sig::before { background: var(--tx); }
@media (hover: none) {
  .tx__color { clip-path: inset(0); }
  .tx:not(.tx--unknown):hover .tx__n, .tx:not(.tx--unknown):focus-within .tx__n { color: var(--muted); }
}

/* typed name (studio.js): the whole signature in the row's colour (reduced motion uses this alone) */
.tx.is-keyed .sig__base { stroke: var(--tx); }

/* the row you came back to: lit, then it cools (no JS) */
.tx:target .tx__n { animation: tx-lit-n 1.6s ease-out backwards; }
.tx:target .sig__base { animation: tx-lit-s 1.6s ease-out backwards; }
.tx:target .tx__sig::before { animation: tx-lit-b 1.6s ease-out backwards; }
@keyframes tx-lit-n { 0%, 40% { color: var(--tx); } 100% { color: var(--muted); } }
@keyframes tx-lit-s { 0%, 40% { stroke: var(--tx); } 100% { stroke: var(--rule); } }
@keyframes tx-lit-b { 0%, 40% { background-color: var(--tx); } 100% { background-color: var(--rule); } }
.tx { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ------------------------------------------------------------------ «Связь» */

.contact { padding-top: var(--section-pad); }
.contact > .wrap > * { grid-column: 1 / 8; }
@media (min-width: 760px) and (max-width: 1099px) { .contact > .wrap > * { grid-column: 1 / 11; } }
.contact .label { margin-bottom: 24px; }
.contact__line { font: 400 var(--fs-body)/1.5 var(--f-text); max-width: 46ch; margin-bottom: 18px; }
.addr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.addr__text { font: 400 var(--fs-addr)/1.2 var(--f-mono); color: var(--text); white-space: nowrap; -webkit-user-select: all; user-select: all; }
.copy { min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: var(--deep); cursor: pointer;
  font: 400 var(--fs-meta)/1 var(--f-mono); letter-spacing: .04em; color: var(--text);
  text-decoration: underline 1px var(--trace); text-underline-offset: 6px; }
.copy:hover { color: var(--trace); }
.copy__status { min-height: 1.5em; margin-top: 10px; font: 400 var(--fs-meta)/1.5 var(--f-mono); letter-spacing: .02em; color: var(--muted); }
.contact__mail a { display: inline-flex; align-items: center; min-height: 44px; font: 400 var(--fs-meta)/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); }

/* ------------------------------------------------------------------ coda and footer */

.coda-wrap { margin-top: var(--section-pad); margin-bottom: clamp(64px, 12vh, 140px); }
.coda { grid-column: 1 / 9; max-width: 46ch; font: 400 var(--fs-coda)/1.5 var(--f-text); color: var(--muted); }

.sfoot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; padding-block: 0 28px;
  font: 400 var(--fs-meta)/1.45 var(--f-mono); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sfoot__rule { flex: 0 0 100%; height: 1px; margin-bottom: 28px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='1'%3E%3Cpath d='M0 .5H4M8 .5H20M32 .5H36M48 .5H60M64 .5H68M72 .5H84M88 .5H100M112 .5H116M120 .5H124M128 .5H132M136 .5H148' stroke='%23000'/%3E%3C/svg%3E") 0 0 / 148px 1px no-repeat,
    linear-gradient(#000, #000) 176px 0 / calc(100% - 176px) 1px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='1'%3E%3Cpath d='M0 .5H4M8 .5H20M32 .5H36M48 .5H60M64 .5H68M72 .5H84M88 .5H100M112 .5H116M120 .5H124M128 .5H132M136 .5H148' stroke='%23000'/%3E%3C/svg%3E") 0 0 / 148px 1px no-repeat,
    linear-gradient(#000, #000) 176px 0 / calc(100% - 176px) 1px no-repeat; }
.sfoot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

/* ------------------------------------------------------------------ 404: no signal */

.nosig { position: relative; display: block; min-height: 70svh; padding-top: calc(var(--header-h) + clamp(48px, 10svh, 120px)); padding-bottom: 64px; }
.nosig::before { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 1px; background: var(--dim); }
.nosig .wrap > * { grid-column: 1 / 9; }
.nosig__h { font: 500 var(--fs-title)/1.1 var(--f-text); letter-spacing: -.01em; margin-bottom: 14px; }
.nosig__p { font: 400 var(--fs-body)/1.5 var(--f-text); color: var(--muted); margin-bottom: 8px; }
.nosig__go a { display: inline-flex; align-items: center; min-height: 44px; font: 400 var(--fs-meta)/1 var(--f-mono); letter-spacing: .04em; color: var(--text); }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  .sbar, .carrier, .sig__g, .sig__base, .tx__n { transition: none; }
  .tx:hover .sig__head, .tx:focus-within .sig__head { animation: none; }
  .tx__color { clip-path: inset(0); opacity: 0; transition: opacity .2s linear; }
  .tx:hover .tx__color, .tx:focus-within .tx__color { clip-path: inset(0); opacity: 1; transition: opacity .2s linear; }
  .tx:target .tx__n, .tx:target .sig__base, .tx:target .tx__sig::before { animation: none; }
  .tx:target .tx__n { color: var(--tx); }
  .tx:target .sig__base { stroke: var(--tx); }
  .tx:target .tx__sig::before { background: var(--tx); }
}
@media (prefers-reduced-motion: reduce) and (hover: none) { .tx__color { opacity: 1; } }

/* ------------------------------------------------------------------ print: a plain reception log */

@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .skip, .sbar, .carrier, .hero::before, .wordmark, .hero__go, .tx__frame, .tx__sig, .tx__act, .copy, .copy__status, .contact__mail, .sfoot { display: none !important; }
  .hero { min-height: 0; }
  .hero__text { position: static; padding: 0 0 16px; }
  .hero__text::before { content: "aeyv"; display: block; font: 400 1.5rem/1.2 var(--f-mono); margin-bottom: 8px; }
  .tx, .tx--unknown { display: block; padding-bottom: 14px; break-inside: avoid; }
  .tx__n, .tx__title a, .tx__line, .tx__meta, .contact__line, .addr__text, .coda, .label { color: #000 !important; }
  .tx__n { font-size: 1rem; }
  .tx__title a { text-decoration: none; }
  .tx__title a[href]::after { content: " — " attr(href); font: 400 .8rem var(--f-mono); }
  .contact { padding-top: 24px; }
  .contact .label::after { content: ": signal@aeyv.studio"; }
  .addr, .contact__line { display: none; }
  .coda-wrap { margin: 24px auto 0; }
}

/* ------------------------------------------------------------------ view transitions: the bridge to a game
   (opt-in, root dim/wake and timing: base.css). A catalog frame keeps its picture's aspect while it grows. */

::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; overflow: clip; }