/* ============================================
   OZON-BANK.CSS — ozon-bank.html page-specific styles
   Mirrors rambler.css's structure (fonts fade-in, header,
   hero, reveal helpers), then adds this page's own chapter
   layout: metrics row, application-flow blocks, scattered
   widget cards, and the side-quests grid.
   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). */
.hero-right > .t-body-sm { margin-top: 12px; max-width: 656px; text-wrap: pretty; }

/* Inline links in the hero copy — jump to the chapter dividers.
   Same treatment as .footer-link in style.css: dotted underline
   that drops away as the colour goes to --accent on hover. */
.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;
}

/* Landing offset for the .hero-link jumps, so the divider sits
   below the top edge rather than flush against it. */
#chapter-01,
#chapter-02,
#chapter-03 { scroll-margin-top: 96px; }

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

.metrics {
  display: grid;
  grid-template-columns: repeat(6, 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; }
.metrics .reveal-text:nth-child(6) { transition-delay: 0.5s; }

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

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

/* Shared look for every screenshot / mockup image in this
   page's chapters. No border-radius and no box-shadow here —
   the source PNGs/WEBPs already have their own rounded
   corners baked in (no transparency around them), so a
   border-radius doubled the corners and a box-shadow drew a
   visible hard edge around the opaque rectangle. */
.shot {
}

/* ============================================
   CHAPTER 01 — application flow
   Block A: single centred placeholder slot.
   Block B: three screenshots in a row, 152px below.
   ============================================ */

/* Confirmed on real iOS: a playing <video>'s hardware decode layer
   ignores border-radius / overflow:hidden / mask-image / clip-path /
   box-shadow-overlay entirely — long-standing WebKit bug, not
   something any clipping (or clip-adjacent) technique can touch
   (desktop devtools look fine because that's Blink, not real
   WebKit). So the video stays a plain rectangle — untouched — and
   four small opaque divs sit in its corners instead, each painted
   with a radial-gradient: transparent inside the corner radius
   (video shows through), solid page background beyond it (covers
   the video's square corner). Pure background paint, no clip-path/
   mask/overflow involved anywhere, so the bug can't apply to it. */
.flow-video-frame {
  position: relative;
  isolation: isolate;
  width: 31.3725%;
  margin: 0 auto;
  aspect-ratio: 496 / 1080;
  --corner-r: 32px;
}

.flow-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.flow-video-corner {
  position: absolute;
  width: var(--corner-r);
  height: var(--corner-r);
  z-index: 2;
  pointer-events: none;
}

.flow-video-corner--tl {
  top: 0;
  left: 0;
  background: radial-gradient(circle at 100% 100%, transparent var(--corner-r), var(--bg) var(--corner-r));
}
.flow-video-corner--tr {
  top: 0;
  right: 0;
  background: radial-gradient(circle at 0% 100%, transparent var(--corner-r), var(--bg) var(--corner-r));
}
.flow-video-corner--bl {
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 100% 0%, transparent var(--corner-r), var(--bg) var(--corner-r));
}
.flow-video-corner--br {
  bottom: 0;
  right: 0;
  background: radial-gradient(circle at 0% 0%, transparent var(--corner-r), var(--bg) var(--corner-r));
}

.flow-row {
  display: flex;
  justify-content: space-between;
  margin-top: 9.3137%;
}

.flow-row img {
  width: 31.3725%;
}

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

/* ============================================
   CHAPTER 02 — widgets
   Container 1632x1110. widget-stand (the phone screen) sits
   centred in the middle; six cards scatter to its left/right,
   none of them crossing into the centre column. Height comes
   from the padding-bottom trick (not aspect-ratio) so every
   absolutely-positioned child's top/left percentages resolve
   reliably against a definite pixel height in every browser.
   ============================================ */

.chapter-widgets {
  height: 0;
  padding-bottom: 68.0147%; /* 1110 / 1632 */
}

/* widget-stand.webp is a 3x export (1536x3324) of a
   512x1108 slot — the same slot size as .flow-video —
   so its exact size/position is known, not just "auto". */
.widget-stand {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 31.37%;
  height: auto;
  z-index: 1;
}

.widget-card {
  position: absolute;
}

.widget-card--01 { left: 0%;        top: 26.5766%; width: 26.9608%; }
.widget-card--02 { left: 0.7353%;   top: 49.6396%; width: 30.6373%; }
.widget-card--03 { left: 3.1863%;   top: 75.9459%; width: 23.2843%; }
.widget-card--04 { left: 69.3627%;  top: 24.0541%; width: 30.6373%; }
.widget-card--05 { left: 73.0392%;  top: 48.6486%; width: 26.9608%; }
.widget-card--06 { left: 71.0784%;  top: 71.7117%; width: 23.2843%; }

.chapter-widgets .reveal:nth-child(1) { transition-delay: 0s; }
.chapter-widgets .reveal:nth-child(2) { transition-delay: 0.1s; }
.chapter-widgets .reveal:nth-child(3) { transition-delay: 0.2s; }
.chapter-widgets .reveal:nth-child(4) { transition-delay: 0.3s; }
.chapter-widgets .reveal:nth-child(5) { transition-delay: 0.4s; }
.chapter-widgets .reveal:nth-child(6) { transition-delay: 0.5s; }
.chapter-widgets .reveal:nth-child(7) { transition-delay: 0.6s; }

/* ============================================
   CHAPTER 03 — side quests
   Container 1632x3458. Three rows, side-04 spans rows 2-3.
   ============================================ */

.side-stage {
  position: relative;
  width: 100%;
  max-width: 1632px;
  aspect-ratio: 1632 / 3458;
  margin: 0 auto;
}

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

.side-shot--01 { left: 0%;     top: 0%;     width: 31.37%; }
.side-shot--02 { left: 34.31%; top: 0%;     width: 31.37%; }
.side-shot--03 { left: 68.63%; top: 0%;     width: 31.37%; }
.side-shot--04 { left: 0%;     top: 33.49%; width: 65.69%; }
.side-shot--05 { left: 68.63%; top: 33.49%; width: 31.37%; }
.side-shot--06 { left: 68.63%; top: 66.95%; width: 31.37%; }

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

/* ============================================
   REVEAL ON SCROLL
   Same timing/easing as rambler.html's .reveal / .reveal-text.
   ============================================ */

/* 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)
   Page-specific gaps (header→hero, hero→metrics, between
   chapters, divider→content) come straight from the Figma
   mobile mock — they land on 48px/24px, not the site-wide
   .pause/.pause-lg/.breath defaults, so they're overridden
   here. .pause-to-case is a modifier only used on this page.
   ============================================ */

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

  /* --- Header (matches rambler mobile): logo left, clock right,
     stays a row — without this it falls back to style.css's
     generic .site-header mobile rule (column, 48px gap), meant
     for the homepage's logo+work-list header, not this one. --- */
  .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 (same pattern as rambler.css) --- */
  .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;
  }

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

  /* --- Metrics: 2 columns x 3 rows --- */
  .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;
  }

  /* --- Chapter 01 — application flow: single stacked column ---
     .flow-row becomes display:contents so its three images join
     .case-container's own 24px gap instead of nesting a second one. */
  .case-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .flow-video-frame {
    width: 100%;
  }

  /* Corner-mask trick still doesn't hold up cleanly on mobile —
     leaving the video square there rather than fighting it further. */
  .flow-video-corner {
    display: none;
  }

  .flow-row {
    display: contents;
  }

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

  /* --- Chapter 02 — widgets: single stacked column, reordered
     to 01-02-03, stand, 04-05-06 (left-to-right reading order,
     flattened). widget-stand has no .reveal class and always
     shows immediately, same as on desktop. */
  .chapter-widgets {
    height: auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .widget-stand,
  .widget-card {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }

  .widget-card--01 { order: 1; }
  .widget-card--02 { order: 2; }
  .widget-card--03 { order: 3; }
  .widget-stand    { order: 4; }
  .widget-card--04 { order: 5; }
  .widget-card--05 { order: 6; }
  .widget-card--06 { order: 7; }

  .chapter-widgets .reveal.widget-card--01 { transition-delay: 0s; }
  .chapter-widgets .reveal.widget-card--02 { transition-delay: 0.1s; }
  .chapter-widgets .reveal.widget-card--03 { transition-delay: 0.2s; }
  .chapter-widgets .reveal.widget-card--04 { transition-delay: 0.3s; }
  .chapter-widgets .reveal.widget-card--05 { transition-delay: 0.4s; }
  .chapter-widgets .reveal.widget-card--06 { transition-delay: 0.5s; }

  /* --- Chapter 03 — side quests: single stacked column.
     side-04 (the wide desktop-only spread) is dropped — it has
     no mobile crop in the design, same treatment as the
     desktop-only screens hidden in the homepage fan previews. */
  .side-stage {
    position: static;
    max-width: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

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

  .side-shot--04 {
    display: none;
  }
}