/* Home hero (owner: hero). Geometry — positions, sizes, SVG paths — is computed by src/js/pages/home.js
   (layout()); this file holds the look, the type scale (driven by --t) and the stack layout for phones.
   Layers, back to front: grid (0) · giant type (1) · blue field (2) · characters (4) ·
   islands (5–6) · grain (7) · wordmark + copy (8). */

/* The hero is a fixed-height stage: the first screen of the page (the sections below it scroll in after it).
   svh, not dvh: the page scrolls now, and a hero that follows the mobile URL bar would re-layout mid-scroll. */
.hero {
  --t: 1;                          /* type scale, set by layout() */
  --hero-paper: #FAFAF8;           /* = --surface-2: a touch lighter than the page so the panel reads */
  --hero-line: rgba(25, 27, 32, .045);
  position: relative;
  /* Fill the viewport minus 16px insets; the panel runs under the rail (content starts right of it). */
  margin: 0 calc(16px - var(--main-pad-right)) 0 calc(16px - var(--main-pad-left));
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
  min-height: 560px;
}
/* Desktop: the whole hero — islands included — fits the window. The panel takes the reference proportions,
   capped at the window height; layout() scales the reference composition uniformly to fit and centres it,
   the paper, blue field and islands filling any extra width to the panel edges. */
@media (min-width: 1100px) {
  /* layout() sets the exact height inline: min(window height − 32px, width × 992 / 1504). */
  .hero { min-height: 0; }
}

.hero__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background: var(--hero-paper);
  box-shadow: inset 0 0 0 1px rgba(25, 27, 32, .05);
}

/* Static grain over the visuals (below the copy). Never animated. */
.hero__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.hero__fx { position: absolute; inset: 0; pointer-events: none; }
.hero.is-parallax .hero__px { will-change: transform; }

/* Grid + crosshairs (inset -8px so the ±3px parallax never shows an edge). Lines fall on x,y = 60k. */
.hero__grid {
  position: absolute;
  inset: -8px;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--hero-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-line) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 8px 8px;
}
.hero__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(25, 27, 32, .34);
  stroke-width: 1;
}

/* Giant word. .hero__type is an anchor point (x = centre, y = cap top); the word is condensed with
   scaleX (Alumni Sans is wider than the reference lettering) and slanted with skewX — never italic. */
.hero__type { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; }
.hero__word {
  --sx: .74;
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: 465px;
  line-height: .6;                 /* line box ≈ cap height */
  letter-spacing: .012em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  transform-origin: 50% 50%;
  transform: translateX(-50%) skewX(-10deg) scaleX(var(--sx));
}
/* SKIN: printed ink as in the reference — a dark-to-grey gradient (near-black at «S», mid-grey at «N») with a
   faint even grain over it. The reference's embossed squiggle layer was dropped on 06.10.2026: the owner wanted
   the whole word as clean as its lower half, «только добавь немного зернистости». Static (never animated).

   The word is written as two spans, «S» + «KIN» (markup in js/pages/home.js): Alumni Sans gives the «S» the usual
   round-letter overshoot — .002em above the cap line and .008em below the baseline, which at these sizes lands as
   1px high and 2–4px low — and the owner reads that as a bigger «S» (06.10.2026, three times). .hero__skin-s
   squashes it back onto the flat letters' extents, and because a transformed descendant is dropped from an
   ancestor's `background-clip: text`, each half carries the ink and the grain itself. */
.hero__skin {
  display: inline-block;
  /* `background-clip: text` paints only inside the element's own box, and `line-height: .6` above makes that box
     shorter than the glyphs: without this the bottom of the «S» and the feet of «KIN» were sliced off flat
     (owner, 05.10.2026). The padding grows the painted area, the matching negative margin keeps the margin box —
     and so the line and the word's position — exactly as it was. The gradient runs horizontally, so taller
     padding does not move a single colour stop. (Both halves repeat it, for the same reason; an inline-block
     with this padding and margin contributes exactly what the plain text run did, so the line box, the baseline
     and the word's advance width are unchanged.) */
  padding: .3em 0;
  margin: -.3em 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__skin-s,
.hero__skin-kin {
  position: relative;
  display: inline-block;
  padding: .3em 0;
  margin: -.3em 0;
  background-image: linear-gradient(90deg, #1D1E22 0%, #222327 36%, #36383D 58%, #66686E 80%, #A2A4A9 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
/* One ramp across all four letters: advance widths of Alumni Sans 900 with the .012em letter-spacing above are
   «S» .417em, «KIN» 1.083em, «SKIN» 1.5em, so each half stretches the gradient to 1.5em (1.5 / its own width) and
   anchors it to the edge of the word it sits on. The two images then cover the identical span — the same colour
   at the same x as the single element painted, and no step at the seam. */
.hero__skin-s {
  background-size: 359.712% 100%;
  background-position: 0 0;
  /* Ink extents of Alumni Sans 900, rasterised at 8000px (em from the baseline, y down): «S» −.5929750…+.0078750,
     «K»/«I»/«N» −.5909750…−.0001250. scaleY(.5908500 / .6008500) about the point .47287em above the baseline maps
     the first pair onto the second. The span's box is 1.2em tall (line-height .6 + .3em padding top and bottom)
     with the baseline .9em below its top, so the origin is at .9 − .47287 = .4271em. Only y changes: the skewX
     and scaleX on .hero__word leave vertical extents alone, and the letter keeps its round apex and foot —
     nothing is cut flat. */
  transform: scaleY(.98336);
  transform-origin: 50% .4271em;
}
.hero__skin-kin {
  background-size: 138.504% 100%;
  background-position: 100% 0;
}
/* inline-block: the overlay shares its half's own line box, so its glyphs sit exactly on it. It repeats the
   padding above, so its own content box starts where the letters do — without it the overlay rode .3em high and
   the grain stopped in a straight line across the middle of the word (owner, 06.10.2026: «сделай верх таким же,
   как низ, только добавь немного зернистости»). One layer per half, not one over the whole word: the «S» layer
   rides inside the scaleY above, so the grain follows the squashed letter instead of leaving a ghost of the
   unsquashed one at its curves. Same tile, size and opacity on both halves — only the noise's phase differs at
   the seam, which a 120px tile of sub-pixel speckle does not show. */
.hero__skin-s::before,
.hero__skin-kin::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: .3em 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 120px 120px;              /* fine specks only — the squiggle layer was too busy */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .16;
}
/* AURA: a hairline ink outline with a transparent fill, as in the reference. */
.hero__aura {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #2A2C31;
}

/* Blue field (inset -12px for the ±5px parallax). */
.hero__field { position: absolute; inset: -12px; z-index: 2; }
.hero__field-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__field-svg circle { fill: var(--accent); }
.hero__field-main { fill: var(--accent); }
.hero__field-fringe--a { opacity: .6; }
.hero__field-fringe--b { opacity: .38; }

/* Characters: .hero__char carries the parallax transform, .hero__lift the 2px selection raise, .hero__rim
   the rim-light overlay (blue-only alpha, screen-blended, see dev/tools/make-rim-layers.ps1). */
.hero__char {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.hero__char.is-ready { opacity: 1; }
.hero__lift {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out);
}
.hero__img,
.hero__rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hero__rim {
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity var(--dur-med) var(--ease-out);
}
.hero[data-select='cs2'] .hero__char--cs2 .hero__lift,
.hero[data-select='dota2'] .hero__char--dota2 .hero__lift { transform: translateY(-2px); }
.hero[data-select='cs2'] .hero__char--cs2 .hero__rim,
.hero[data-select='dota2'] .hero__char--dota2 .hero__rim { opacity: .85; }

/* No wordmark of its own: the hero carried a small SKINAURA beside the rail until 06.10.2026, where it ran into
   the giant SKIN/AURA type behind it. The owner took it out — the rail's mark is the only brand on this screen. */

/* Copy — never moves. A soft paper scrim keeps it legible wherever art comes close. */
.hero__copy {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__copy::before {
  content: '';
  position: absolute;
  inset: 4% -6% -2%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(250, 250, 248, .78), rgba(250, 250, 248, .45) 62%, rgba(250, 250, 248, 0));
}

/* What the shop sells and the two games it sells them for, on one line between the two rules (owner
   2026-10-07). The sentence is set as the lead under the title is — the interface face, plain sentence case,
   no tracking — because a whole phrase at the eyebrow's .2em would turn into a ribbon of letters; the games
   keep the tracked capitals, which is what makes them read as a label at the end of the sentence. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18px * var(--t));
  max-width: 100%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: max(11px, calc(12px * var(--t)));
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
/* The rules take what the sentence leaves, up to the 80px they always had, and give way before the words do —
   so the line holds on one row down to the narrow stage and only wraps when a phone truly cannot hold it. */
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  flex: 1 1 auto;
  width: auto;
  min-width: 10px;
  max-width: calc(80px * var(--t));
  height: 1px;
  background: rgba(25, 27, 32, .42);
}
.hero__eyebrow-text { flex: 0 1 auto; min-width: 0; text-wrap: balance; }
.hero__eyebrow-shop {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.hero__eyebrow-games { white-space: nowrap; }
.hero__eyebrow-accent { color: var(--accent-ink); }

.hero__title {
  margin-top: calc(12px * var(--t));
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: calc(92px * var(--t));
  line-height: .82;
  letter-spacing: 0;
  color: var(--ink);
}
.hero__title-in { transform-origin: 50% 50%; }
.hero__line { display: block; white-space: nowrap; }

.hero__lead {
  margin-top: calc(12px * var(--t));
  max-width: 13.5em;
  font-size: max(16px, calc(22px * var(--t)));
  line-height: 1.36;
  color: var(--ink-2);
  text-wrap: balance;
}

.hero__cta.btn {
  margin-top: calc(14px * var(--t));
  min-width: max(208px, calc(268px * var(--t)));
  min-height: max(48px, calc(57px * var(--t)));
  padding: 0 24px;
  gap: 10px;
  /* Softer than an ordinary button (owner, 06.10.2026: «грубое скругление» next to the islands) — and it has to
     follow the height, which `min-height` above scales with --t. A fixed radius breaks at both ends: 24px on the
     48px button of a half-width window is exactly half its height, so it reads as a pill, while the same 24px on
     the 57px button of a full screen reads tight again. Held at 0.42 of the height instead, so the corner looks
     the same everywhere: 24px at the full size, 20px once the height floors at 48px. */
  border-radius: max(20px, calc(24px * var(--t)));
  font-size: max(15px, calc(17px * var(--t)));
  font-weight: 500;
}
.hero__cta.btn svg { width: 20px; height: 20px; }

/* Game islands: each link covers the panel and is clipped to its island (clip-path also limits hit
   testing), so the whole island is one target and nothing else is. Copy inside never moves. */
.hero__games { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.island {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: auto;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.island:focus-visible { outline: none; }
.island--cs2 { z-index: 2; color: var(--ink); }
.island--dota2 { z-index: 1; color: #FFFFFF; }
.island--cs2:hover { color: var(--ink); }
.island--dota2:hover { color: #FFFFFF; }

.island__shape { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.island__fill { transition: fill var(--dur-fast) var(--ease-out); }
.island--cs2 .island__fill { fill: var(--surface); }
.island--cs2:hover .island__fill { fill: #F3F7FF; }
.island--dota2 .island__fill { fill: var(--accent-strong); }
.island--dota2:hover .island__fill { fill: var(--accent-hover); }
/* Focus: a 2px contour 6px inside the island edge (clip + mask in the SVG), so it is never clipped
   by the panel. Blue on the light island, white on the blue one (both ≥ 3:1). */
.island__ring { opacity: 0; }
.island--cs2 .island__ring path { stroke: var(--accent); }
.island--dota2 .island__ring path { stroke: #FFFFFF; }
.island:focus-visible .island__ring { opacity: 1; }

.island__body {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-content: start;
}
.island--cs2 .island__body { column-gap: var(--gap, calc(20px * var(--t))); }
.island--dota2 .island__body { column-gap: var(--gap, calc(78px * var(--t))); }
.island[data-compact] .island__num { display: none; }
.island[data-compact] .island__body { column-gap: 0; }
.island__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: max(26px, calc(55px * var(--t)));
  line-height: .8;
  font-synthesis: none;
}
.island--cs2 .island__num { align-self: start; margin-top: calc(-10px * var(--t)); color: #8B9099; }
.island--dota2 .island__num { grid-row: 1 / span 2; align-self: center; margin-top: calc(14px * var(--t)); color: #C4DBFF; }
.island__name {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .78;
  font-synthesis: none;
  white-space: nowrap;
}
.island--cs2 .island__name { font-size: max(44px, calc(100px * var(--t))); }
.island--dota2 .island__name { font-size: max(40px, calc(77px * var(--t))); }
.island__sub {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: .55em;
  margin-top: calc(12px * var(--t));
  padding-left: calc(12px * var(--t));
  font-size: max(14px, calc(21px * var(--t)));
  line-height: 1.3;
  white-space: nowrap;
}
.island--cs2 .island__sub { color: var(--ink-2); }
.island--dota2 .island__sub { color: #FFFFFF; font-size: max(14px, calc(18.5px * var(--t))); }
.island__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .75; }

.island__arrow {
  position: absolute;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  transition: color var(--dur-fast) var(--ease-out);
}
.island__arrow svg {
  width: max(36px, calc(60px * var(--t)));
  height: max(36px, calc(60px * var(--t)));
  stroke-width: 1.1;
}
.island--cs2:hover .island__arrow { color: var(--accent-ink); }

/* Phones: copy first, characters as a cropped band, islands as two stacked blocks — all inside the
   panel. layout() sets the panel height and every position below the copy. */
@media (max-width: 767.98px) {
  .hero {
    margin: 0;
    height: auto;
    min-height: 0;
  }
  .hero__panel {
    position: relative;
    inset: auto;
    min-height: 640px;
    border-radius: var(--radius-lg);
  }
  .hero__copy {
    position: relative;
    padding: var(--copy-pt, 112px) 20px 0;
  }
  .hero__copy::before { inset: 30% -2% -4%; }
  .hero__eyebrow { font-size: 11px; gap: 12px; }
  .hero__eyebrow::before,
  .hero__eyebrow::after { max-width: 40px; }
  .hero__title { margin-top: 10px; font-size: clamp(40px, 13.4vw, 64px); }
  .hero__lead { margin-top: 12px; font-size: 17px; }
  .hero__cta.btn { margin-top: 18px; min-width: 216px; min-height: 52px; font-size: 16px; }

  .island--cs2 .island__body { column-gap: var(--gap, 12px); }
  .island--dota2 .island__body { column-gap: var(--gap, 22px); }
  .island__num { font-size: 26px; }
  .island--cs2 .island__num { margin-top: -6px; }
  .island--dota2 .island__num { margin-top: 8px; }
  .island--cs2 .island__name { font-size: 46px; }
  .island--dota2 .island__name { font-size: 42px; }
  .island__sub { margin-top: 8px; padding-left: 6px; font-size: 14px; }
  .island--dota2 .island__sub { font-size: 14px; }
  .island__arrow svg { width: 32px; height: 32px; stroke-width: 1.4; }
}

/* ==========================================================================
   Sections below the hero (owner: integrator). The order and the module contract live in src/js/pages/home.js
   (SECTIONS). This file holds the container rhythm, the conventions every block shares — .home-sec,
   .home-sec__head, .home-h2, .home-sec__lead, .home-sec__more. Each module block brings
   its own stylesheet: home-lab.css (float lab), home-flow.css (how it works + live feed), home-trust.css (reviews,
   FAQ), home-atmo.css (atmosphere). Same light language as the catalog: paper background, white surfaces,
   Alumni Sans 900 upright + .oblique for the titles, Golos Text for everything else.
   ========================================================================== */

/* One rhythm between all blocks: a grid row gap, so no block needs (or may add) outer margins of its own.
   Hidden slots of blocks still loading or left out take neither room nor a gap. The column is also the size
   container the block heads below are laid out by (= every block's width). */
.home-sections {
  --home-gap: clamp(40px, 28px + 1.2vw, 56px);
  container: home / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--home-gap);
  padding-top: clamp(32px, 20px + 1.5vw, 48px);
}
.home-sections > * { min-width: 0; }
/* (element + class: beats a block's own single-class rule, e.g. a margin-top: var(--home-gap) that would double
   the gap; side margins — the atmosphere band's bleed — stay the block's own) */
.home-sections > section { margin-block: 0; }

/* Block head — one pattern for every block (the float lab's): the title on the left; the lead (the block's
   description) to its right across the rest of the row, its last line on the title's baseline; head controls (a
   mode switch, the rating + arrows, a search) at the far right after it — on a line of their own, still on the
   right, when the row has no room for them. Under 900px of block width the lead drops under the title and the
   controls under the lead.
   Markup: <div class="home-sec__head"><div class="home-sec__titles"><h2 class="home-h2">…</h2>[lead]</div>[lead]
   [controls…]</div> — the lead may sit inside .home-sec__titles or right after it: the wrapper is display: contents,
   so the title and the lead are flex items of the head either way. A block without a lead shows the title alone. */
.home-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 32px;
  margin-bottom: 20px;
}
.home-sec__titles { display: contents; }
.home-sec__head .home-h2 { flex: 0 1 auto; min-width: 0; }
/* Like the catalog H1, one size down the scale; the slant hangs from the baseline. */
.home-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: clamp(2.75rem, 1.6rem + 2.8vw, 4.75rem);
  line-height: .84;
  letter-spacing: .004em;
  text-transform: uppercase;
  color: var(--ink);
}
.home-h2 .oblique { transform-origin: 0 100%; }
/* SKINAURA inside a heading: SKIN in ink, AURA drawn as a brand-blue outline — the wordmark's own idea (SKIN
   solid, AURA blue) at display size, the same treatment the hero gives the giant word and the live feed gives
   «Live». One accent, used the same way wherever the name is set large. */
.home-h2__aura {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1.5px, .028em) var(--accent);
  paint-order: stroke fill;
}
/* A line of its own under the title (and above the controls); the text itself kept to 58ch by the padding — a
   max-width would let a short title and the lead share a line. */
.home-sec__lead {
  flex: 1 1 100%;
  max-width: none;
  margin: 0;
  padding-right: max(0px, 100% - 58ch);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.home-sec__more { flex: none; }
.home-sec__more svg { margin-right: -4px; }

@container home (min-width: 900px) {
  .home-sec__head { align-items: last baseline; column-gap: clamp(32px, 4cqi, 64px); }
  .home-sec__head .home-h2 { flex: none; }
  /* ≥ 18em: the lead never thins out to a column; when the controls leave it less, they take a line of their own */
  .home-sec__head .home-sec__lead { flex: 1 1 18em; min-width: 0; padding-right: 0; }
  .home-sec__head > :not(.home-sec__titles, .home-sec__lead) { align-self: flex-end; margin-left: auto; }
}

/* ---- Phones ---- */
@media (max-width: 767.98px) {
  .home-sections { --home-gap: 36px; padding-top: 28px; }
  .home-sec__head { gap: 14px; margin-bottom: 20px; }
  .home-sec__lead { font-size: var(--fs-base); }
}