/* racever landing — mobile-first, fluid scaling.
   Design base: 390×2000.
   Trick: html font-size = (min(100vw, 430px) / 390), so 1rem ≈ 1 design-px.
   Then every value below is in rem and equals the Figma number. */

/* Drop PariMatchRegular.woff2 (and optional .woff) into assets/fonts/.
   Until then the page falls back to Oswald (visually close, condensed display).
   Supports .woff2 (preferred), .woff, .ttf, .otf — adjust src list if your file
   has a different extension. */
@font-face {
  font-family: 'PariMatchRegular';
  src: url('assets/fonts/PariMatchRegular.woff2') format('woff2'),
       url('assets/fonts/PariMatchRegular.woff')  format('woff'),
       url('assets/fonts/PariMatchRegular.ttf')   format('truetype'),
       url('assets/fonts/PariMatchRegular.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: calc(min(100vw, 430px) / 390);
  -webkit-text-size-adjust: 100%;
}

:root {
  --bg: #000;
  --fg: #fff;
  --accent: #f505c7;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute is implemented in browsers as `display: none`,
   but any author rule with an explicit `display` (e.g. `display: flex`) wins
   the cascade and the element stays visible. Reinforce `[hidden]` once,
   globally, so `el.hidden = true` is reliable everywhere in this project. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
}

.page {
  width: 100%;
  max-width: 430px;
  position: relative;
  background: var(--bg);
  line-height: 1.25;
  overflow: hidden;
}

/* <picture> stays as the default inline wrapper. The inner <img> is
   position:absolute, so its containing block walks up past picture (which is
   not positioned) and resolves to the nearest positioned ancestor — the
   .img-slot, which has explicit width and height. Percentages on the img
   then resolve correctly against the slot. */

/* Reserve hero canvas height: 839/390 of width */
.page::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: calc(839 / 390 * 100%);
}

/* ============================================================
   HERO REGION — design y=0..839
   ============================================================ */

.bar--mid {
  position: absolute;
  left: 0;
  right: 0;
  top: 592rem;
  height: 30rem;
  background: var(--bg);
  z-index: 3;
}

/* Sticky top bar — pinned to viewport, centered within .page max-width.
   position: fixed (not sticky) because .page has overflow:hidden which
   would break a sticky child. */
.bar--top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 430px;
  height: 48rem;
  background: var(--bg);
  z-index: 100;
}

.logo {
  position: absolute;
  left: 15rem;
  top: 9rem;
  font-family: 'PariMatchRegular', 'Oswald', 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 24rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  z-index: 4;
}
.logo__accent { color: var(--accent); }

.arrow,
.caption--hero1,
.caption--hero2 {
  position: absolute;
}

/* Image slots — clip the inner <img> to a smaller "window" of the natural photo,
   matching the exact crop/zoom used in Figma. The inner <img> dimensions and
   offsets are taken verbatim from the Figma source. */
.img-slot {
  position: absolute;
  overflow: hidden;
  z-index: 1;
}
.img-slot img {
  display: block;
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/* MOZA cockpit — Figma: container 400×312 at (-5, 48);
   inner image w=100% h=128.21% top=-28.21% (reveals lower portion of source). */
.img-slot--moza {
  left: -5rem;
  top: 48rem;
  width: 400rem;
  height: 312rem;
}
.img-slot--moza img {
  left: 0;
  top: -28.21%;
  width: 100%;
  height: 128.21%;
}

/* Banner / track — Figma: container 776×232 at (-77, 360);
   inner image w=140.06% h=234.23% top=-117.85% — heavy zoom on cars. */
.img-slot--banner {
  left: -77rem;
  top: 360rem;
  width: 776rem;
  height: 232rem;
}
.img-slot--banner img {
  left: 0;
  top: -117.85%;
  width: 140.06%;
  height: 234.23%;
}

/* TV screenshot — Figma: container 390×217 at (0, 622); standard cover. */
.img-slot--tv {
  left: 0;
  top: 622rem;
  width: 390rem;
  height: 217rem;
}
.img-slot--tv img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each arrow wrapper = bounding box of the rotated stroke.
   Inner <img> = the SVG's natural (un-rotated) dimensions, then rotated.
   This matches the Figma source exactly. */
.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.arrow img {
  display: block;
  flex: none;
}

.arrow--13 {
  left: 251.12rem;
  top: 70.57rem;
  width: 125.05rem;
  height: 236.2rem;
}
.arrow--13 img {
  width: 235.618rem;
  height: 123.947rem;
  transform: rotate(90.27deg);
}

.arrow--14 {
  left: 109.28rem;
  top: 339.9rem;
  width: 179.45rem;
  height: 195.5rem;
}
.arrow--14 img {
  width: 224.652rem;
  height: 41rem;
  transform: rotate(-131.45deg);
}

.arrow--08 {
  left: 237rem;
  top: 603rem;
  width: 167.43rem;
  height: 112.17rem;
  z-index: 4;
}
.arrow--08 img {
  width: 110rem;
  height: 166rem;
  transform: rotate(90.75deg);
}

.caption--hero1 {
  left: 45rem;
  top: 314rem;
  margin: 0;
  font-size: 20rem;
  letter-spacing: -0.05em;
  color: var(--fg);
  white-space: nowrap;
  z-index: 2;
}
.caption--hero1 strong { font-weight: 700; }

.caption--hero2 {
  left: 11rem;
  top: 595rem;
  margin: 0;
  font-size: 20rem;
  letter-spacing: -0.05em;
  color: var(--fg);
  white-space: nowrap;
  z-index: 4;
}

/* ============================================================
   FLOWING CONTENT — design y=839+
   ============================================================ */
.section {
  position: relative;
  padding: 14rem 15rem 0;
  color: var(--fg);
}

.section h2 {
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 32rem;
  letter-spacing: -0.05em;
  line-height: 1.1;
}
.section h2.accent { color: var(--accent); }

.body {
  margin-top: 12rem;
  font-size: 12rem;
  line-height: 1.4;
}
.body p { margin: 0 0 10rem; }
.body strong { font-weight: 700; }

.accent { color: var(--accent); }

/* ARENA 14 composite block under "Трек у Львові" */
.arena-mark {
  position: relative;
  margin-top: 4rem;
  height: 84rem;
}
.arena-mark__racever {
  position: absolute;
  left: 14rem;
  top: 18rem;
  font-family: 'PariMatchRegular', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 40rem;
  line-height: 1;
  color: var(--fg);
  z-index: 1;
}
.arena-mark__arena {
  position: absolute;
  left: 134rem;
  top: 0;
  font-family: 'PariMatchRegular', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 70rem;
  line-height: 1;
  color: var(--fg);
  z-index: 2;
}
.arena-mark__arena .accent { color: var(--accent); }

.page > .section:last-of-type {
  padding-bottom: 60rem;
}