/* ============================================
   VK-PLAY.CSS — vk-play.html page-specific styles
   Mirrors ozon-bank.css's structure (fonts fade-in, header,
   hero, reveal helpers), then adds this page's own chapter
   layout: tournaments overview + special tournament page.
   Relies on tokens + shared rules in style.css (loaded first).
   Desktop only for now — no mobile breakpoint yet.
   ============================================ */

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 / .hero-link on
   ozon-bank.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 { scroll-margin-top: 96px; }

/* ============================================
   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 in this page's chapters.
   No border-radius and no box-shadow — the source WEBPs
   already have their own rounded corners baked in. */
.shot {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   CHAPTER 01 — rethinking tournaments
   Part A: vk-01, full width.
   Part B/C wrapper: vk-02 + vk-03 side by side, vk-04 below,
   with a two-shot column (vk-06 / vk-06-2) floating over the
   top-right corner of that wrapper.
   ============================================ */

.vk1-a {
  margin: 0;
}

.vk1-bc {
  position: relative;
  margin-top: 24px;
}

.vk1-b {
  display: flex;
  justify-content: space-between;
}

.vk1-b img:nth-child(1) { width: 22.67%; }
.vk1-b img:nth-child(2) { width: 74.39%; }

.vk1-c-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.vk1-c {
  width: 65.69%;
}

.vk1-col {
  width: 31.37%;
  display: flex;
  flex-direction: column;
}

.vk1-col img:nth-child(2) {
  margin-top: 24px;
}

/* Mobile-only screen (vk-04) — no home in the desktop grid,
   hidden here and slotted into the mobile stack instead. */
.vk1-mobile-shot {
  display: none;
}

.chapter-vk1 .reveal:nth-child(1) { transition-delay: 0s; }
.vk1-b .reveal:nth-child(1) { transition-delay: 0.1s; }
.vk1-b .reveal:nth-child(2) { transition-delay: 0.2s; }
.vk1-c.reveal { transition-delay: 0.3s; }
.vk1-col .reveal:nth-child(1) { transition-delay: 0.4s; }
.vk1-col .reveal:nth-child(2) { transition-delay: 0.5s; }

/* ============================================
   CHAPTER 02 — special tournament page
   Stage 1632x2318: full-width video on top, three
   screenshots side by side below it.
   Same corner-mask trick as ozon-bank.css's .flow-video-frame —
   a playing <video>'s hardware decode layer ignores border-radius/
   overflow:hidden/mask-image/clip-path entirely on real WebKit, so
   four opaque corner divs sit on top instead, each painted with a
   radial-gradient that reveals the video everywhere except the
   corner radius.
   ============================================ */

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

.vk2-video-frame {
  position: absolute;
  isolation: isolate;
  left: 0%;
  top: 0%;
  width: 100%;
  aspect-ratio: 1920 / 1365;
  --corner-r: 32px;
}

.vk2-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

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

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

.vk2-shot {
  position: absolute;
}

.vk2-shot--07  { left: 0%;     top: 52.11%;  width: 31.37%; }
.vk2-shot--08  { left: 34.31%; top: 52.11%;  width: 31.37%; }
.vk2-shot--09  { left: 68.63%; top: 52.11%;  width: 31.37%; }

.vk2-stage .reveal:nth-child(2) { transition-delay: 0.1s; }
.vk2-stage .reveal:nth-child(3) { transition-delay: 0.2s; }
.vk2-stage .reveal:nth-child(4) { transition-delay: 0.3s; }

/* ============================================
   REVEAL ON SCROLL
   Same timing/easing as 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) {
  /* Page-specific gaps (header→hero, hero→chapter 01) come straight
     from the Figma mobile mock — 48px, not style.css's site-wide
     mobile defaults (.pause 40px / .pause-lg 50px). Same pattern as
     ozon-bank.css. */
  .pause    { height: 48px; }
  .pause-lg { height: 48px; }

  /* --- Header (matches ozon-bank/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; }

  /* --- Hero: single left-aligned column (same pattern as ozon-bank.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 { scroll-margin-top: 48px; }

  /* --- Chapter 01 — rethinking tournaments: single stacked
     column, full width, fixed 24px gaps. The desktop side-by-side
     wrappers (.vk1-bc, .vk1-b, .vk1-c-wrap, .vk1-col) go
     display:contents so their images join .chapter-vk1's own flex
     gap instead of nesting one, and get an explicit `order` since
     vk-04 lives out of visual order in the DOM (it has no home in
     the desktop grid, so it's tacked onto the end of .vk1-b). ---*/
  .chapter-vk1 {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .vk1-bc,
  .vk1-b,
  .vk1-c-wrap,
  .vk1-col {
    display: contents;
  }

  .chapter-vk1 img,
  .vk1-b img:nth-child(1),
  .vk1-b img:nth-child(2) {
    width: 100%;
  }

  .vk1-col img:nth-child(2) {
    margin-top: 0;
  }

  .vk1-a            { order: 1; }
  .vk1-b img:nth-child(1) { order: 2; }
  .vk1-b img:nth-child(2) { order: 3; }
  .vk1-mobile-shot  { display: block; order: 4; }
  .vk1-c            { order: 5; }
  .vk1-col img:nth-child(1) { order: 6; }
  .vk1-col img:nth-child(2) { order: 7; }

  /* --- Chapter 02 — special tournament page: the absolute stage
     collapses into a plain flow stack with fixed 24px gaps,
     screenshots only — no video on mobile. --- */
  .vk2-stage {
    position: static;
    max-width: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .vk2-video-frame {
    display: none;
  }

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