/* ============================================
   AVITO.CSS — avito.html page-specific styles
   Same structure as ozon-bank.css / rambler.css: fonts
   fade-in, header, hero, metrics row, reveal helpers, then
   this page's chapter layouts.
   Relies on tokens + shared rules in style.css (loaded first).
   ============================================ */

body {
  opacity: 1;
  transition: opacity 0.3s ease;
}
body.fonts-loading {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

.site-header {
  display: flex;
  align-items: flex-start;
  gap: 296px;
  padding-top: var(--edge);
}

.site-header .clock {
  margin: 0;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.blink { animation: blink-colon 1s steps(1, jump-end) infinite; }

@keyframes blink-colon {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .blink {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   HERO
   ============================================ */

.hero { display: flex; }
.hero-left, .hero-right { flex: 0 0 50%; max-width: 50%; }
.hero-right > .t-tag { margin-top: 40px; }
/* Fixed 656px, matching about.html's page-wide measure (CLAUDE.md §3).
   text-wrap: pretty keeps short words off their own line. */
.hero-right > .t-body-sm { margin-top: 12px; max-width: 656px; text-wrap: pretty; }

.hero-link {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.hero-link:hover {
  color: var(--accent);
  text-decoration-color: transparent;
}

/* Chapter number after each linked phrase — reads like the
   site's [tag] elements: a touch smaller and lighter. Kept
   inside the <a>, dimmed with opacity (not its own colour)
   so it still picks up the anchor's hover colour and the
   shared dotted underline. */
.hero-link-num {
  font-size: 0.82em;
  letter-spacing: -0.04em;
  opacity: 0.55;
}

#chapter-01,
#chapter-02,
#chapter-03,
#chapter-04,
#chapter-05,
#chapter-06,
#chapter-07 { scroll-margin-top: 96px; }

/* ============================================
   METRICS ROW — 5 equal columns
   ============================================ */

.metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--edge);
}

.metric {
  text-align: center;
}

.metric-value {
  margin: 0;
  font-family: var(--dot);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  color: var(--ink);
}

.metric-unit {
  font-family: var(--dot);
  font-size: 24px;
  vertical-align: top;
  margin-left: 16px;
}

.metric-label {
  margin: 8px 0 0;
}

.metrics .reveal-text:nth-child(1) { transition-delay: 0s; }
.metrics .reveal-text:nth-child(2) { transition-delay: 0.1s; }
.metrics .reveal-text:nth-child(3) { transition-delay: 0.2s; }
.metrics .reveal-text:nth-child(4) { transition-delay: 0.3s; }
.metrics .reveal-text:nth-child(5) { transition-delay: 0.4s; }

/* ============================================
   CHAPTER CONTAINERS
   Fluid, max-width 1632px (--narrow) — the reference width
   all percentage sizes below are computed against.
   ============================================ */

.case-container {
  width: 100%;
  max-width: var(--narrow);
  margin: 0 auto;
  position: relative;
}

/* No border-radius / box-shadow on screenshots — the source
   webps already carry rounded corners and are fully opaque
   (see CLAUDE.md §7). */

/* ============================================
   CHAPTERS 01, 03 & 05 — autoteka report / damage / ai in report
   .report-row is three phone screenshots across (31.3725% each).
   Ch. 01 & 03 follow it with a full-width desktop screenshot;
   ch. 05 stacks three .report-rows with a .pause between.
   The three-across row is a simple flow row (CLAUDE.md §4),
   not a scattered stage — plain flex with percentage widths.
   ============================================ */

.report-row {
  display: flex;
  justify-content: space-between;
}

.report-row img {
  width: 31.3725%;
  height: auto;
}

.report-row .reveal:nth-child(1) { transition-delay: 0s; }
.report-row .reveal:nth-child(2) { transition-delay: 0.1s; }
.report-row .reveal:nth-child(3) { transition-delay: 0.2s; }

.report-desk {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   CHAPTER 02 — millage
   Absolute-positioned stage, 1632 x 1110. The middle phone
   (milage-02, 512x1110 displayed) is full-height and sits at
   top 0; the two side phones are shorter and drop 161px
   (14.5045% of the 1110 stage height) to sit lower.
   ============================================ */

.milage-stage {
  position: relative;
  width: 100%;
  max-width: var(--narrow);
  aspect-ratio: 1632 / 1110;
  margin: 0 auto;
}

.milage-shot {
  position: absolute;
  height: auto;
}

.milage-shot--01 { left: 0%;      top: 14.5045%; width: 31.37%; }
.milage-shot--02 { left: 34.31%;  top: 0%;       width: 31.37%; }
.milage-shot--03 { left: 68.63%;  top: 14.5045%; width: 31.37%; }

/* Centre first, then the two flanks together. */
.milage-stage .reveal.milage-shot--02 { transition-delay: 0s; }
.milage-stage .reveal.milage-shot--01 { transition-delay: 0.1s; }
.milage-stage .reveal.milage-shot--03 { transition-delay: 0.1s; }

/* ============================================
   CHAPTER 04 — comparison
   Two independent flow rows (no absolute stage), .pause
   between. Row A: four smaller shots at 24.20%. Row B: three
   phone shots at ~31.37%. justify-content: space-between
   distributes the small inter-column gaps.
   ============================================ */

.compare-row {
  display: flex;
  justify-content: space-between;
}

.compare-row img {
  height: auto;
}

.compare-row--a img { width: 24.20%; }

.compare-row--b img { width: 31.37%; }
.compare-row--b img:last-child { width: 31.43%; }

.compare-row .reveal:nth-child(1) { transition-delay: 0s; }
.compare-row .reveal:nth-child(2) { transition-delay: 0.1s; }
.compare-row .reveal:nth-child(3) { transition-delay: 0.2s; }
.compare-row .reveal:nth-child(4) { transition-delay: 0.3s; }

/* ============================================
   CLOSING SECTION — more cases / NDA
   Divider (∞ instead of a number), then a Body Small (16/20)
   text block in the right half of the WIDE container (--wide,
   like the hero — not the --narrow chapters), starting at
   50% so it lines up with the hero title.
   ============================================ */

.more-cases-block {
  margin-left: 50%;
}

.more-cases-block .t-body-sm {
  color: var(--ink);
}

/* Deliberate fixed 256px from the closing block to the footer
   (per explicit request — not the site-wide 96px .site-footer
   margin, which is zeroed here on this page only). */
.tail-to-footer {
  height: 256px;
}

.site-footer {
  margin-top: 0;
}

/* ============================================
   REVEAL ON SCROLL
   Same timing/easing as the other case pages.
   ============================================ */

/* Screenshots load with the page — no scroll-triggered reveal. */
.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   MOBILE (<= 767px)
   ============================================ */

@media (max-width: 767px) {
  .pause        { height: 48px; }
  .pause-lg     { height: 48px; }
  .breath       { height: 48px; }
  .pause-to-case { height: 24px; }

  /* --- Header: logo left, clock right, stays a row --- */
  .site-header {
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .site-header .clock { padding-top: 7px; }

  .logo-mark { width: 40px; height: 40px; }
  .logo-text > .t-heading { font-size: 14px; line-height: 16px; }
  .logo-text > .t-tag { margin: 2px 0 0 0; font-size: 12px; }

  /* --- Hero: single left-aligned column --- */
  .hero {
    flex-direction: column;
    text-align: left;
    gap: 8px;
  }
  .hero-left, .hero-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .hero-left .t-body-sm {
    margin: 0;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0;
    color: var(--ink);
  }

  .hero-right .t-display { font-size: 40px; line-height: 48px; }
  .hero-right > .t-tag {
    margin-top: 32px;
    font-size: 12px;
    line-height: 14px;
  }
  .hero-right > .t-body-sm {
    font-size: 14px;
    line-height: 20px;
    max-width: none;
    /* clear gap between the four stacked paragraphs on mobile
       (desktop uses a tighter 12px) */
    margin-top: 24px;
  }

  #chapter-01,
  #chapter-02,
  #chapter-03,
  #chapter-04,
  #chapter-05,
  #chapter-06,
  #chapter-07 { scroll-margin-top: 48px; }

  /* --- Metrics: 2 columns --- */
  .metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
    column-gap: 32px;
  }

  /* value + caption left-aligned on mobile (desktop stays centred) */
  .metric {
    text-align: left;
  }

  .metric-value {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.04em;
  }

  .metric-label {
    margin-top: 12px;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: -0.04em;
  }

  /* 5 metrics in a 2-col grid — the lone item on the last row
     spans both columns (its content stays left-aligned like the
     rest). */
  .metrics .metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* --- Chapters 01/03/04/05/06/07 — every .case-container
     stacks as one full-width column. .report-row / .compare-row
     go display:contents so their images join the container's
     own 24px gap instead of nesting a second one. --- */
  .case-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .report-row,
  .compare-row {
    display: contents;
  }

  .report-row img {
    width: 100%;
  }

  .compare-row img {
    width: 100% !important;
  }

  /* Every chapter stacks as one full-width column: the inner
     .pause spacers collapse so all shots share .case-container's
     even 24px gap. */
  .case-container .pause {
    display: none;
  }

  /* Wide desktop screenshots (report-05-desk, damage-04) are
     unreadable at 343px — dropped on mobile, same as the
     desktop-only shots hidden elsewhere on the site. */
  .report-desk {
    display: none;
  }

  /* --- Closing section: full width, left-aligned like the hero. --- */
  .more-cases-block {
    margin-left: 0;
    text-align: left;
  }

  /* Closing "more cases / NDA" section — deliberate fixed
     spacing so the text sits evenly between the divider above
     and the footer below: 80px on each side (the 24px
     .pause-to-case above + 56px margin = 80). */
  .more-cases-body {
    margin-top: 56px;
  }

  .tail-to-footer {
    display: block;
    height: 80px;
  }

  .site-footer {
    margin-top: 0;
  }

  /* --- Chapter 02 — single stacked column (01, 02, 03). --- */
  .milage-stage {
    position: static;
    max-width: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .milage-shot {
    position: static;
    width: 100%;
  }
}