/* ──────────────────────────────────────────────────────────────────────────
   base.css — universal CSS shared by ALL pages (index + 5 case pages)
   Phase 1 of CSS extraction. See AGENTS.md and CLAUDE.md.

   Contents:
     1. Webfonts (Inter, latin + cyrillic)
     2. Reset + box-sizing
     3. :root variables (colors, fonts, layout grid)
     4. html, body
     5. Topnav (desktop)
     6. ASCII logo (.ascii-shine, .ascii-cursor + keyframes)
     7. Burger button + mobile menu overlay

   Page-local <style> blocks override this file (load order: base.css first,
   then inline <style>). Page-specific sidebars, hero, project cards,
   case sections, etc. stay in each HTML's own <style>.

   Path note: paths are relative to this file (assets/styles/base.css),
   so '../fonts/...' resolves to assets/fonts/...
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. WEBFONTS ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter-Variable-Cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter-Variable-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { height: auto; }

/* ── 3. ROOT VARIABLES ── */
:root {
  --bg: #131010;
  --border: #1a1a1a;
  --text: #ffffff;
  --muted: #7a7a7a;
  --green: #2de08a;
  --card-soft: #1a1a1a;
  --hover-bg: #2e2e2e;
  --text-secondary: #ccc;
  --text-tertiary: #999;
  --text-faint: rgba(255,255,255,0.3);
  --cursor: #777;
  --border-strong: #555;
  --hover-outline: rgba(255,255,255,0.2);
  --ls-loose: 0.18em;
  --ls-tight: 0.05em;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sans: 'Inter', sans-serif;
  /* Layout sizing — single source of truth for both .layout and .hero-block */
  --side: clamp(
    220px,
    calc((min(100vw, var(--grid-max)) - 800px) / 2),
    260px
  );
  --main: minmax(0, 800px);
  --grid-cols: var(--side) var(--main) var(--side);
  --grid-max: 1320px;
}

/* ── LIGHT THEME (site-wide; toggled via html[data-theme="light"]) ── */
html[data-theme="light"] {
  --bg: #fafafa;
  --text: #131010;
  --text-secondary: #555555;
  --text-tertiary: #777777;
  --muted: #8a8a8a;
  --border: #f3f3f3;
  --border-strong: #c8c8c8;
  --hover-bg: #f0f0f0;
  --card-soft: #fafafa;
  --text-faint: rgba(0,0,0,0.3);
  --cursor: #999999;
  --hover-outline: rgba(0,0,0,0.2);
}

/* theme toggle + contact CTA buttons (header) — shared by all pages */
.theme-toggle {
  --theme-btn-bg: #171515;
  --theme-btn-text: #f7f2ef;
  --theme-btn-border: rgba(255,255,255,0.28);
  --theme-btn-shadow-light: rgba(255,255,255,0.06);
  --theme-btn-shadow-dark: rgba(0,0,0,0.68);
  --theme-btn-shadow-light-hover: rgba(255,255,255,0.035);
  --theme-btn-shadow-dark-hover: rgba(0,0,0,0.82);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--theme-btn-bg);
  border: 1px solid var(--theme-btn-border);
  color: var(--theme-btn-text);
  cursor: pointer;
  border-radius: 4px;
  transition: transform 100ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background: rgba(255,255,255,0.002);
  box-shadow:
    inset 1px 1px 0 3px var(--theme-btn-shadow-light),
    inset -1px -1px 0 3px var(--theme-btn-shadow-dark);
  pointer-events: none;
}
.theme-toggle:hover {
  transform: translate(1px, 1px);
  --theme-btn-shadow-light: var(--theme-btn-shadow-light-hover);
  --theme-btn-shadow-dark: var(--theme-btn-shadow-dark-hover);
  background: #24201f;
  border-color: var(--hover-outline);
  color: #ffffff;
}
.theme-toggle:active {
  transform: translate(1px, 1px) scale(0.98);
}
.theme-toggle:focus {
  outline: none;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.theme-ico-moon { display: none; }
html[data-theme="light"] .theme-ico-sun { display: none; }
html[data-theme="light"] .theme-ico-moon { display: inline; }
html[data-theme="light"] .theme-toggle {
  --theme-btn-bg: #ffffff;
  --theme-btn-text: #000000;
  --theme-btn-border: rgba(0,0,0,0.52);
  --theme-btn-shadow-light: rgba(255,255,255,0.75);
  --theme-btn-shadow-dark: rgba(0,0,0,0.1);
  --theme-btn-shadow-light-hover: rgba(255,255,255,0.56);
  --theme-btn-shadow-dark-hover: rgba(0,0,0,0.18);
}
html[data-theme="light"] .theme-toggle:hover {
  background: #f7f7f7;
  border-color: var(--hover-outline);
  color: #000000;
}

.topnav-links .topnav-contact-cta {
  --cta-bg: #171515;
  --cta-text: #f7f2ef;
  --cta-border: rgba(255,255,255,0.28);
  --cta-shadow-light: rgba(255,255,255,0.06);
  --cta-shadow-dark: rgba(0,0,0,0.68);
  --cta-shadow-light-hover: rgba(255,255,255,0.035);
  --cta-shadow-dark-hover: rgba(0,0,0,0.82);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 102px;
  height: 32px;
  padding: 6px 8px;
  gap: 4px;
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
  border-radius: 4px;
  color: var(--cta-text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  transition: transform 100ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.topnav-links .topnav-contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background: rgba(255,255,255,0.002);
  box-shadow:
    inset 1px 1px 0 3px var(--cta-shadow-light),
    inset -1px -1px 0 3px var(--cta-shadow-dark);
  pointer-events: none;
}
.topnav-links .topnav-contact-cta:hover {
  transform: translate(1px, 1px);
  --cta-shadow-light: var(--cta-shadow-light-hover);
  --cta-shadow-dark: var(--cta-shadow-dark-hover);
  background: #24201f;
  border-color: var(--hover-outline);
  color: #ffffff;
}
.topnav-links .topnav-contact-cta:active {
  transform: translate(1px, 1px) scale(0.98);
}
html[data-theme="light"] .topnav-links .topnav-contact-cta {
  --cta-bg: #ffffff;
  --cta-text: #000000;
  --cta-border: rgba(0,0,0,0.52);
  --cta-shadow-light: rgba(255,255,255,0.75);
  --cta-shadow-dark: rgba(0,0,0,0.1);
  --cta-shadow-light-hover: rgba(255,255,255,0.56);
  --cta-shadow-dark-hover: rgba(0,0,0,0.18);
}
html[data-theme="light"] .topnav-links .topnav-contact-cta:hover {
  background: #f7f7f7;
  border-color: var(--hover-outline);
  color: #000000;
}
.topnav .topnav-links { gap: 12px; }

/* ── 4. HTML/BODY ── */
html, body {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  overflow-x: clip;
}

* { min-width: 0; }

/* ── 5. TOP NAV ── */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  z-index: 200;
  font-size: 16px;
  line-height: 1.5;
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms var(--ease-out), opacity 120ms var(--ease-out), background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.topnav.is-hidden {
  transform: translateY(calc(-100% - 1px));
  opacity: 0;
  pointer-events: none;
}
.topnav-left { display: flex; align-items: center; gap: 16px; }
.topnav-links { display: flex; gap: 32px; }
.topnav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--sans);
  border-radius: 0px;
  transition: background 150ms var(--ease-out);
}
.topnav-links a:hover { background: var(--hover-bg); }
.topnav-links a img { width: 24px; height: 24px; flex-shrink: 0; image-rendering: pixelated; }

@media (min-width: 901px) {
  .topnav {
    left: calc(
      max(0px, calc((100vw - var(--grid-max)) / 2)) + var(--side)
    );
    right: auto;
    width: min(
      800px,
      calc(min(100vw, var(--grid-max)) - var(--side) - var(--side))
    );
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

/* ── 6. ASCII LOGO ── */
.ascii-shine {
  font-family: var(--sans);
  font-size: clamp(14px, 0.5vw + 12px, 18px);
  font-weight: 700;
  letter-spacing: clamp(0.1em, 0.05em + 0.2vw, 0.2em);
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--border-strong) 0%, var(--border-strong) 30%, #aaa 50%, var(--border-strong) 70%, var(--border-strong) 100%);
  background-size: 400% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: none;
  white-space: nowrap;
  cursor: default;
}
.ascii-shine:hover {
  color: var(--text);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  animation: none;
}
.ascii-cursor { font-family: var(--sans); font-size: clamp(14px, 0.5vw + 12px, 18px); color: var(--cursor); margin-left: -0.2em; animation: ascii-blink 0.7s step-end infinite; }
.ascii-cursor.done { animation: none; opacity: 0; }
@keyframes ascii-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ascii-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── 7. BURGER + MOBILE MENU OVERLAY ── */
.burger-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; color: var(--text); cursor: pointer; padding: 0; border-radius: 0; transition: background .15s; }
.burger-btn:hover { background: var(--hover-bg); }
.menu-overlay { display: none; position: fixed; inset: 0; top: 64px; background: rgba(0,0,0,0.5); z-index: 140; }

@media (hover: none), (pointer: coarse) {
  .topnav-links a:hover,
  .burger-btn:hover {
    background: transparent;
  }

  .theme-toggle:hover,
  .topnav-links .topnav-contact-cta:hover {
    transform: none;
  }

  .theme-toggle:hover {
    --theme-btn-shadow-light: rgba(255,255,255,0.06);
    --theme-btn-shadow-dark: rgba(0,0,0,0.68);
    background: var(--theme-btn-bg);
    border-color: var(--theme-btn-border);
    color: var(--theme-btn-text);
  }

  html[data-theme="light"] .theme-toggle:hover {
    --theme-btn-shadow-light: rgba(255,255,255,0.75);
    --theme-btn-shadow-dark: rgba(0,0,0,0.1);
    background: var(--theme-btn-bg);
    border-color: var(--theme-btn-border);
    color: var(--theme-btn-text);
  }

  .topnav-links .topnav-contact-cta:hover {
    --cta-shadow-light: rgba(255,255,255,0.06);
    --cta-shadow-dark: rgba(0,0,0,0.68);
    background: var(--cta-bg);
    border-color: var(--cta-border);
    color: var(--cta-text);
  }

  html[data-theme="light"] .topnav-links .topnav-contact-cta:hover {
    --cta-shadow-light: rgba(255,255,255,0.75);
    --cta-shadow-dark: rgba(0,0,0,0.1);
    background: var(--cta-bg);
    border-color: var(--cta-border);
    color: var(--cta-text);
  }

  .ascii-shine:hover {
    color: transparent;
    background: linear-gradient(90deg, var(--border-strong) 0%, var(--border-strong) 30%, #aaa 50%, var(--border-strong) 70%, var(--border-strong) 100%);
    background-size: 400% auto;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

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

  .ascii-cursor {
    animation: none;
  }
}

/* Cross-document navigation: keep the framed layout still and crossfade only. */
@view-transition { navigation: auto; }

.topnav {
  view-transition-name: site-header;
}

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

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

::view-transition-old(root),
::view-transition-old(site-header) {
  animation: page-fade-out 140ms var(--ease-out) both;
}

::view-transition-new(root),
::view-transition-new(site-header) {
  animation: page-fade-in 180ms var(--ease-out) both;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-old(site-header) {
    animation: page-fade-out 90ms var(--ease-out) both;
  }

  ::view-transition-new(root),
  ::view-transition-new(site-header) {
    animation: page-fade-in 120ms var(--ease-out) both;
  }
}

/* First-viewport entrance: structural frames stay still; only content settles. */
.hero-itsme,
.hero-about-copy,
.hero-contact-content,
.hero-brands-mobile,
.sidebar-l > .brand-list,
.hero-status-side,
.case-mobile-meta .case-meta {
  transition:
    opacity 480ms var(--ease-out),
    transform 560ms var(--ease-out);
}

#cases > .project-card:first-of-type .project-tag,
#cases > .project-card:first-of-type .project-title,
#cases > .project-card:first-of-type .project-stats,
.case-header-meta .case-tag,
.case-header-meta .case-title {
  transition:
    opacity 360ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.hero-about-copy:nth-child(2),
.hero-brands-mobile,
.hero-status-side {
  transition-delay: 40ms;
}

.hero-about-copy:nth-child(3) {
  transition-delay: 80ms;
}

.hero-contact-content,
.case-mobile-meta .case-meta {
  transition-delay: 80ms;
}

#cases > .project-card:first-of-type .project-title,
.case-header-meta .case-title {
  transition-delay: 40ms;
}

#cases > .project-card:first-of-type .project-stats {
  transition-delay: 80ms;
}

html.motion-entry-pending .hero-itsme,
html.motion-entry-pending .hero-about-copy,
html.motion-entry-pending .hero-contact-content,
html.motion-entry-pending .hero-brands-mobile,
html.motion-entry-pending .sidebar-l > .brand-list,
html.motion-entry-pending .hero-status-side,
html.motion-entry-pending #cases > .project-card:first-of-type .project-tag,
html.motion-entry-pending #cases > .project-card:first-of-type .project-title,
html.motion-entry-pending #cases > .project-card:first-of-type .project-stats,
html.motion-entry-pending .case-header-meta .case-tag,
html.motion-entry-pending .case-header-meta .case-title,
html.motion-entry-pending .case-mobile-meta .case-meta {
  opacity: 0.01;
  transform: translate3d(0, 6px, 0);
  will-change: opacity, transform;
}

html.motion-entry-pending .hero-contact-content {
  transform: translate3d(0, 4px, 0);
}

/* Cross-document navigation already crossfades the page root. */
html.motion-entry-cross-document .hero-itsme,
html.motion-entry-cross-document .hero-about-copy,
html.motion-entry-cross-document .hero-contact-content,
html.motion-entry-cross-document .hero-brands-mobile,
html.motion-entry-cross-document .sidebar-l > .brand-list,
html.motion-entry-cross-document .hero-status-side,
html.motion-entry-cross-document #cases > .project-card:first-of-type .project-tag,
html.motion-entry-cross-document #cases > .project-card:first-of-type .project-title,
html.motion-entry-cross-document #cases > .project-card:first-of-type .project-stats,
html.motion-entry-cross-document .case-header-meta .case-tag,
html.motion-entry-cross-document .case-header-meta .case-title,
html.motion-entry-cross-document .case-mobile-meta .case-meta {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero-itsme,
  .hero-about-copy,
  .hero-contact-content,
  .hero-brands-mobile,
  .sidebar-l > .brand-list,
  .hero-status-side,
  #cases > .project-card:first-of-type .project-tag,
  #cases > .project-card:first-of-type .project-title,
  #cases > .project-card:first-of-type .project-stats,
  .case-header-meta .case-tag,
  .case-header-meta .case-title,
  .case-mobile-meta .case-meta {
    transition: opacity 120ms var(--ease-out);
    transition-delay: 0ms;
    transform: none;
  }

  html.motion-entry-pending .hero-itsme,
  html.motion-entry-pending .hero-about-copy,
  html.motion-entry-pending .hero-contact-content,
  html.motion-entry-pending .hero-brands-mobile,
  html.motion-entry-pending .sidebar-l > .brand-list,
  html.motion-entry-pending .hero-status-side,
  html.motion-entry-pending #cases > .project-card:first-of-type .project-tag,
  html.motion-entry-pending #cases > .project-card:first-of-type .project-title,
  html.motion-entry-pending #cases > .project-card:first-of-type .project-stats,
  html.motion-entry-pending .case-header-meta .case-tag,
  html.motion-entry-pending .case-header-meta .case-title,
  html.motion-entry-pending .case-mobile-meta .case-meta {
    opacity: 0.01;
    transform: none;
    will-change: opacity;
  }
}

/* Content reveal keeps layout grids and their borders fully rendered. */
.motion-reveal {
  opacity: 0.01;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 360ms var(--ease-out),
    transform 420ms var(--ease-out);
}

html.motion-reveal-preparing .motion-reveal {
  transition: none;
}

.motion-reveal-delay-1 {
  transition-delay: 50ms;
}

.motion-reveal-delay-2 {
  transition-delay: 100ms;
}

.motion-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal {
    transform: none;
    transition: opacity 120ms var(--ease-out);
    transition-delay: 0ms;
  }
}

@media (max-width: 900px) {
  .ascii-shine,
  .ascii-cursor {
    font-size: 16px;
  }

  .brand-name {
    font-size: 0 !important;
  }

  .brand-name::after {
    content: 'KOMYSHAN';
    font-size: 16px;
    letter-spacing: 0.08em;
  }
}