/* Home: the atmosphere band above the footer (owner: atmosphere; markup + behaviour: src/js/home/atmosphere.js).
   The hero's day composition (paper, ink SKIN, hairline AURA) told again at night: the CS2 street and the Dota 2
   map meet at a seam slanted at the brand's 10°, the giant SKIN/AURA word spans both and the seam runs exactly
   between its two halves (mountAtmosphere() measures --atmo-seam-x/-y). Layers, back to front: worlds (0) ·
   seam · shade · captions + marks (all .atmo__art) · grain (1) · copy (2).
   Sizes follow the band's own width (container units), so the band holds wherever it is placed. */

.atmo {
  --atmo-ink: #070A12;            /* the night: a touch deeper than the footer's #191B20, so the two read apart */
  --atmo-paper: #F5F5F3;          /* = --bg: the hero's paper, now the light */
  --atmo-dim: rgba(245, 245, 243, .84);
  --atmo-hair: rgba(245, 245, 243, .4);
  container: atmo / inline-size;
  /* No vertical margins: the gap above is the home blocks' row gap (home.css .home-sections).
     mountAtmosphere(): on windows wider than the page column the band spans <main>, edge-aligned with the
     footer below it (0 elsewhere). */
  margin-left: calc(-1 * var(--atmo-bleed-l, 0px));
  margin-right: calc(-1 * var(--atmo-bleed-r, 0px));
}

.atmo__panel {
  --atmo-seam-x: 50%;             /* set by mountAtmosphere() */
  --atmo-seam-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(480px, 40cqi + 80px, 820px);
  display: grid;
  border-radius: var(--radius-xl);
  background: var(--atmo-ink);
  color: var(--atmo-paper);
}

/* Static film grain over the art, under the copy (the hero's grain, in light specks). Never animated. */
.atmo__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  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 1 0 0 0 0 1 0 0 0 0 1 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;
}

/* ---- the two worlds ---- */
.atmo__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.atmo__world { position: absolute; overflow: hidden; }
/* CS2: the band's left part (past the seam's top overhang), so the street can be framed on its arch rather
   than cropped to the panel's width. */
.atmo__world--cs2 { top: 0; bottom: 0; left: 0; right: calc(100% - var(--atmo-seam-x) - 160px); }
/* Dota: everything right of the seam. The wrapper is slanted about the seam point; .atmo__plate slants it
   back (same origin height → the picture itself stays upright) and reaches far enough left to fill the
   wrapper's lower-left overhang. */
.atmo__world--dota2 {
  top: 0;
  bottom: 0;
  left: var(--atmo-seam-x);
  right: -240px;
  transform: skewX(-10deg);
  transform-origin: 0 var(--atmo-seam-y);
}
.atmo__plate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -240px;
  right: 240px;
  transform: skewX(10deg);
  transform-origin: 0 var(--atmo-seam-y);
}
/* 24px above and below for the drift. */
.atmo__img {
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: calc(100% + 48px);
  max-width: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  /* the user's daylight pictures, graded to the band's night here (the files stay as given): darker and a touch
     cooler, the sun's warmth kept, so the light copy reads over them */
  filter: brightness(.6) contrast(1.06) saturate(.96);
}
.atmo__img--cs2 { object-position: 50% 58%; }    /* the A-site street, its arch and the palms */
.atmo__img--dota2 { object-position: 58% 50%; }  /* the river crossing between the two sides */
.atmo.is-drifting .atmo__img { will-change: transform; }

/* The seam: a hairline on the boundary, slanted like the type. */
.atmo__seam {
  position: absolute;
  top: -40px;
  bottom: -40px;
  left: var(--atmo-seam-x);
  width: 1px;
  background: rgba(245, 245, 243, .34);
  transform: skewX(-10deg);
  transform-origin: 0 calc(var(--atmo-seam-y) + 40px);
}

/* Night shade: a soft pool of dark behind the copy and a vignette at the edges — keeps the lead and the CTA at
   AA over any part of either picture. */
.atmo__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 60% at 50% 56%, rgba(7, 10, 18, .66) 0%, rgba(7, 10, 18, .4) 60%, rgba(7, 10, 18, 0) 100%),
    linear-gradient(180deg, rgba(7, 10, 18, .6) 0%, rgba(7, 10, 18, 0) 28%, rgba(7, 10, 18, 0) 64%, rgba(7, 10, 18, .62) 100%);
}

/* World captions «01 CS2» / «02 DOTA 2» — the hero islands' numbering, top corners. */
.atmo__cap {
  position: absolute;
  top: clamp(24px, 2.6cqi, 40px);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(-10deg);
  transform-origin: 0 100%;
}
.atmo__cap--cs2 { left: clamp(24px, 3cqi, 48px); }
.atmo__cap--dota2 { right: clamp(28px, 3cqi, 52px); }
.atmo__num { font-size: clamp(18px, 1.5cqi, 26px); color: #AAB8D4; }
.atmo__name { font-size: clamp(26px, 2.3cqi, 40px); color: var(--atmo-paper); }

/* Crosshairs in the bottom corners (the hero grid's marks). */
.atmo__mark {
  position: absolute;
  bottom: clamp(26px, 2.8cqi, 42px);
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--atmo-hair), var(--atmo-hair)) center / 100% 1px no-repeat,
    linear-gradient(var(--atmo-hair), var(--atmo-hair)) center / 1px 100% no-repeat;
}
.atmo__mark--l { left: clamp(28px, 3cqi, 52px); }
.atmo__mark--r { right: clamp(28px, 3cqi, 52px); }

/* ---- copy ---- */
.atmo__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(64px, 6.4cqi, 104px) clamp(20px, 5cqi, 80px) clamp(48px, 5.2cqi, 88px);
  text-align: center;
}

/* SA monogram between two hairlines (the hero eyebrow's lines). */
.atmo__crest {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--atmo-paper);
}
.atmo__crest::before,
.atmo__crest::after {
  content: '';
  width: clamp(40px, 5cqi, 88px);
  height: 1px;
  background: var(--atmo-hair);
}
.atmo__crest .monogram.monogram--sa { width: 46px; }

.atmo__title {
  margin-top: clamp(16px, 1.6cqi, 24px);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: clamp(2.5rem, 1.1rem + 3.4cqi, 5rem);
  line-height: .86;
  letter-spacing: .004em;
  text-transform: uppercase;
  color: var(--atmo-paper);
}
.atmo__title-in { transform-origin: 50% 100%; }
.atmo__line { white-space: nowrap; }

/* Giant word: the hero's SKIN/AURA (line box ≈ cap height, condensed with scaleX, slanted about its centre),
   inverted for the night — SKIN in the paper's light running into steel blue, AURA a hairline. */
.atmo__word {
  --sx: .8;
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 2.6cqi, 44px);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: 26cqi;
  line-height: .6;
  letter-spacing: .012em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  transform: skewX(-10deg) scaleX(var(--sx));
  transform-origin: 50% 50%;
}
/* Both halves carry the same vertical padding, cancelled by the margin, for two reasons: `background-clip: text`
   paints only inside the element's own box, and `line-height: .6` above makes that box shorter than the glyphs —
   without it the bottom of the «S» was sliced off flat (owner, 06.10.2026, the same fault as the hero's word).
   AURA needs no painting area of its own, but it keeps the identical box so the two flex items stay aligned. */
.atmo__skin,
.atmo__aura { padding: .3em 0; margin: -.3em 0; }
.atmo__skin {
  display: inline-block;
  color: var(--atmo-paper);
  -webkit-text-fill-color: transparent;
}
/* SKIN is written as two spans, «S» + «KIN» (markup in js/home/atmosphere.js), for the reason the hero's word is
   (home.css .hero__skin-s): Alumni Sans gives the «S» the round-letter overshoot, the owner reads it as a bigger
   letter, and the squash that removes it has to be a transform — which drops the span from an ancestor's
   `background-clip: text`, so each half paints its own slice of the word's ink. Advance widths with the .012em
   letter-spacing above: «S» .417em, «KIN» 1.083em, «SKIN» 1.5em — each half stretches the gradient to 1.5em and
   anchors it to the edge of the word it sits on, so the two images cover the identical span and the ramp reads
   as one, with no step at the seam. The constants are the hero's: the same face, weight and letter-spacing. */
.atmo__skin-s,
.atmo__skin-kin {
  display: inline-block;
  padding: .3em 0;
  margin: -.3em 0;
  background-image: linear-gradient(90deg, #F5F5F3 0%, #EEF1F6 34%, #CCD7EA 62%, #93A9D0 86%, #7690BE 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.atmo__skin-s {
  background-size: 359.712% 100%;
  background-position: 0 0;
  /* scaleY(.5908500 / .6008500) about the point .47287em above the baseline, which the span's 1.2em box
     (line-height .6 + .3em padding top and bottom, baseline .9em from the top) puts at .4271em from its top —
     see home.css .hero__skin-s for the measured ink extents. The band's skewX/scaleX do not touch y, and the
     letter keeps its round apex and foot. */
  transform: scaleY(.98336);
  transform-origin: 50% .4271em;
}
.atmo__skin-kin {
  background-size: 138.504% 100%;
  background-position: 100% 0;
}
.atmo__aura {
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 245, 243, .86);
}

.atmo__lead {
  max-width: 46ch;
  margin-top: clamp(26px, 3cqi, 48px);
  font-size: clamp(1rem, .86rem + .36cqi, 1.1875rem);
  line-height: 1.5;
  color: var(--atmo-dim);
  text-wrap: balance;
}

/* One quiet CTA: a hairline button, the arrow in its own light tile (blue on hover). */
.atmo__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  margin-top: clamp(22px, 2.2cqi, 32px);
  padding: 5px 5px 5px 22px;
  border: 1px solid rgba(245, 245, 243, .5);
  border-radius: 14px;
  background: rgba(7, 10, 18, .32);
  color: var(--atmo-paper);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.atmo__cta-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--atmo-paper);
  color: var(--ink);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.atmo__cta-icon svg { width: 20px; height: 20px; }
.atmo__cta:hover { color: var(--atmo-paper); border-color: var(--atmo-paper); background: rgba(7, 10, 18, .5); }
.atmo__cta:hover .atmo__cta-icon { background: var(--accent-strong); color: #FFFFFF; transform: translate(1px, -1px); }
.atmo__cta:active .atmo__cta-icon { transform: none; }
.atmo__cta:focus-visible {
  outline: none;
  border-color: var(--atmo-paper);
  box-shadow: 0 0 0 2px var(--atmo-ink), 0 0 0 4px var(--atmo-paper);
}

/* ---- narrow bands (portrait tablets with the rail) ---- */
@container atmo (max-width: 819.98px) {
  .atmo__word { font-size: 28cqi; }
  .atmo__lead { max-width: 40ch; }
}

/* ---- phones: stacked. CS2 above, Dota below, SKIN over AURA with the seam between the lines (rising a little to
   the right, like the hero's island boundary on phones). ---- */
@container atmo (max-width: 599.98px) {
  .atmo__panel { min-height: 0; border-radius: var(--radius-lg); }
  .atmo__copy { padding: 84px 20px 92px; }
  .atmo__world--cs2 { right: 0; bottom: auto; height: calc(var(--atmo-seam-y) + 80px); }
  .atmo__world--dota2 {
    top: var(--atmo-seam-y);
    bottom: -80px;
    left: 0;
    right: 0;
    transform: skewY(-6deg);
    transform-origin: var(--atmo-seam-x) 0;
  }
  .atmo__plate {
    top: -80px;
    bottom: 0;
    left: 0;
    right: 0;
    transform: skewY(6deg);
    transform-origin: var(--atmo-seam-x) 0;
  }
  .atmo__img--cs2 { object-position: 46% 60%; }
  .atmo__img--dota2 { object-position: 58% 50%; }
  .atmo__seam {
    top: var(--atmo-seam-y);
    bottom: auto;
    left: -40px;
    right: -40px;
    width: auto;
    height: 1px;
    transform: skewY(-6deg);
    transform-origin: calc(var(--atmo-seam-x) + 40px) 0;
  }
  .atmo__shade {
    background:
      radial-gradient(70% 46% at 50% 50%, rgba(7, 10, 18, .58) 0%, rgba(7, 10, 18, .3) 60%, rgba(7, 10, 18, 0) 100%),
      linear-gradient(180deg, rgba(7, 10, 18, .45) 0%, rgba(7, 10, 18, 0) 22%, rgba(7, 10, 18, .2) 60%, rgba(7, 10, 18, .78) 100%);
  }
  .atmo__cap { top: 26px; }
  .atmo__cap--cs2 { left: 22px; }
  .atmo__cap--dota2 { top: auto; right: 24px; bottom: 30px; }
  .atmo__num { font-size: 18px; }
  .atmo__name { font-size: 28px; }
  .atmo__mark--r { display: none; }
  .atmo__mark--l { left: 24px; bottom: 34px; }

  .atmo__crest { gap: 14px; }
  .atmo__crest::before,
  .atmo__crest::after { width: 36px; }
  .atmo__crest .monogram.monogram--sa { width: 40px; }
  .atmo__title { font-size: clamp(2.5rem, 12.4cqi, 3.5rem); line-height: .84; }
  .atmo__line { display: block; }
  .atmo__word {
    --sx: .84;
    flex-direction: column;
    align-items: center;
    row-gap: .1em;
    margin-top: 30px;
    font-size: 46cqi;
  }
  .atmo__lead { margin-top: 30px; font-size: var(--fs-md); }
  .atmo__cta { width: 100%; justify-content: space-between; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .atmo__cta,
  .atmo__cta-icon { transition: none; }
  .atmo__cta:hover .atmo__cta-icon { transform: none; }
}

/* Forced colours: the art and the outlined word drop out; the copy and a framed CTA remain. */
@media (forced-colors: active) {
  .atmo__art,
  .atmo__word,
  .atmo__panel::after { display: none; }
  .atmo__panel { border: 1px solid CanvasText; }
  .atmo__cta { border-color: LinkText; }
}