/* ==========================================================================
   Cross-document View Transitions — the site's real architecture: 4
   separate physical HTML pages (index/games/video/more), not an SPA. This
   single directive is what makes the browser itself snapshot the outgoing
   and incoming page on every same-origin navigation and cross-fade between
   them — no JS trigger needed, unlike document.startViewTransition() (the
   same-document API a previous version of this site used, wrapped in a
   hand-rolled fetch+innerHTML-swap engine to fake SPA behavior over what
   are really 4 separate documents). Plain <a href="page.html"> links
   already do the right thing under this rule by themselves. */
@view-transition {
  navigation: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Breakpoints (mobile-first)

   Mobile:   356px – 695px    (default styles below, no media query)
   Tablet:   696px – 1343px   → @media (min-width: 696px)
   Desktop:  1344px і ширше   → @media (min-width: 1344px)

   Ці значення — фіксовані пороги, які задав користувач (не з Figma;
   Figma-макети — 375/768/1440 — це референсні розміри полотна, а не самі
   пороги, і кілька разів уточнювались — поточна версія: tablet від 696px).
   CSS-змінні (var()) не працюють всередині умови @media — це обмеження
   самого CSS, не мій вибір, — тож пороги тут лише задокументовані як
   константи, а не оголошені як --токени. Використовуй ці самі
   literal-значення в кожному media query по всьому проєкту, щоб не
   розсинхронитись.

   Приклад для однієї секції:
     .section { ... }                                  // mobile, база
     @media (min-width: 696px)  { .section { ... } }    // tablet
     @media (min-width: 1344px) { .section { ... } }    // desktop

   ПРАВИЛО: Desktop/Tablet/Mobile у Figma — НЕ автоматично масштабовані
   копії одна одної. Вони можуть мати різний текст, іншу кількість рядків,
   інше розташування елементів, інші пропорції. При верстці чи оновленні
   будь-якого компонента:
     1. Ніколи не переносити структуру/розмітку з однієї версії (напр.
        Desktop) на інші breakpoints "за замовчуванням", вважаючи їх
        однаковими.
     2. Перед зміною чи створенням компонента перевіряти всі три версії
        окремо — якщо є розбіжність, відтворювати кожну версію такою,
        як вона є в дизайні, а не спільною для всіх.
     3. Якщо немає доступу до самого Figma-файлу (лише код/скріншот) —
        прямо запитати, чи однакова структура на всіх трьох breakpoints,
        перш ніж переносити зміни з одного на інші.
   ========================================================================== */

/* ==========================================================================
   Cinematic blur styling for the cross-document transition above

   Not Figma-sourced — a custom navigation effect. Under the @view-transition
   rule above, the browser automatically creates ::view-transition-old(root)
   (a snapshot of the outgoing page) and ::view-transition-new(root) (a
   snapshot of the incoming page) on every navigation and cross-fades
   between them by default. These rules replace that default cross-fade
   with the requested cinematic blur.

   Gated behind @supports (view-transition-name: root), a browser-capability
   check — not @media (prefers-reduced-motion: no-preference): that was
   tried first and is very likely why the blur wasn't showing for some
   visitors, since reduced-motion is an OS-level setting that would silently
   (and correctly, per spec) skip this whole block with no way to tell from
   the page itself that anything was being suppressed. Motion preference is
   handled separately below instead, where it can't swallow the whole
   effect.

   mix-blend-mode: normal is required here, not optional: the UA stylesheet
   sets mix-blend-mode: plus-lighter on every ::view-transition-old(*)/
   ::view-transition-new(*) by default (that's what makes the browser's own
   built-in cross-fade look clean rather than muddy when both snapshots
   overlap at partial opacity). Overriding `animation` alone doesn't touch
   that — it's a separate property the UA rule still wins on top of these
   custom keyframes unless it's explicitly reset here too, and left alone it
   additively brightens/color-shifts the overlap instead of a clean blur.

   Moved to the end of the file deliberately, not just appended by
   coincidence — same reason as every other end-of-file override in this
   codebase (see components.css): with equal selector specificity, the
   LATER rule in source order wins, so anything meant to be the final word
   on these pseudo-elements has to sit after every other rule that touches
   them, including the prefers-reduced-motion override right below it. */
@supports (view-transition-name: root) {
  /* Вимикаємо дефолтне світле змішування браузера (plus-lighter) */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    mix-blend-mode: normal;
    height: 100%;
    will-change: opacity, filter;
  }

  /* Стара сторінка плавно зникає і розмивається */
  ::view-transition-old(root) {
    animation-name: fade-out, blur-out;
  }

  /* Нова сторінка плавно проявляється з розмиття */
  ::view-transition-new(root) {
    animation-name: fade-in, blur-in;
  }
}

/* Окремі прості keyframes для чистоти рендерингу на GPU */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blur-out {
  from {
    filter: blur(0px);
  }
  to {
    filter: blur(12px);
  }
}

@keyframes blur-in {
  from {
    filter: blur(12px);
  }
  to {
    filter: blur(0px);
  }
}

/* Kept separate from the @supports block above, not nested inside it: this
   is the one place in the file where motion preference still applies to
   the page-transition effect — canceling the animation outright for
   anyone who has it set, without making that the ONLY way the blur can be
   disabled (which was the actual bug above). Not part of the literal spec
   for this fix, but consistent with every other custom animation in this
   project (Hero/NameFrame, page titles, Footer, etc.), all of which
   already respect prefers-reduced-motion — dropping it here silently would
   have been the one exception. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}