/* ============================================
   PORTFOLIO — DESIGN TOKENS
   Vlad Shiliaev
   ============================================ */

/* ============================================
   FONTS — self-hosted, local woff2 files
   ============================================ */

@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DotGothic16";
  src: url("fonts/DotGothic16-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colors --- */
  --bg:            #D8E7F4;
  --ink:           #2B2828;   /* Primary/Dark   — основной текст */
  --ink-secondary: #4E4848;   /* Primary/Secondary */
  --accent:        #E45020;   /* Accent */
  --accent-bright: #FF4800;   /* Brand Default */
  --grey:          #8F9198;   /* Dark Grey — приглушённые подписи */
  --silver:        #C2C4CB;
  --light-grey:    #E7E8EE;
  --white:         #FFFFFF;
  --divider:       #7F909E;

  /* --- Fonts --- */
  --mono: "Space Mono", monospace;
  --dot:  "DotGothic16", sans-serif;

  /* --- Layout --- */
  --wide:   1856px;  /* шапка, интро */
  --narrow: 1632px;  /* контент, скрины */
  --edge:   32px;    /* поля по краям */
}

/* ============================================
   RESET
   ============================================ */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

/* ============================================
   TYPE SCALE  (из переменных Figma)
   letterSpacing в Figma = % × 100, поэтому
   -13 → -0.13em,  4 → 0.04em  и т.д.
   ============================================ */

.t-case-title {           /* Case Title — 72/80 */
  font-family: var(--mono);
  font-size: clamp(40px, 3.75vw, 72px);
  line-height: 1.11;
  letter-spacing: -0.013em;
  font-weight: 400;
  margin: 0;
}

.t-display {              /* Display — 48/56 */
  font-size: clamp(32px, 2.5vw, 48px);
  line-height: 1.17;
  letter-spacing: -0.08em;
  font-weight: 400;
  margin: 0;
}

.t-heading {              /* Heading — 20/20 bold */
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 700;
  margin: 0;
}

.t-body {                 /* Body — 20/24 */
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.00125em;
  margin: 0;
}

.t-body-sm {              /* Body Small — 16/24 */
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.04em;
  margin: 0;
}

.t-caption {              /* Caption — 14/14 */
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
}

.t-micro {                /* Micro — 12/12 */
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.004em;
  margin: 0;
}

.t-tag {                  /* UI/Tag — DotGothic 16, разряжен */
  font-family: var(--dot);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.t-label {                /* UI/Label — DotGothic 18 */
  font-family: var(--dot);
  font-size: 18px;
  line-height: 0.89;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* цветовые модификаторы */
.c-grey      { color: var(--grey); }
.c-secondary { color: var(--ink-secondary); }
.c-accent    { color: var(--accent); }

/* ============================================
   CONTAINERS
   ============================================ */

.wrap-wide {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.wrap {
  width: 100%;
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 0 var(--edge);
}

/* ============================================
   SECTION DIVIDER  — [01]  название  статус
   ============================================ */

.divider {
  margin: 0;
}

.divider-line {
  position: relative;
  height: 1px;
}

/* The dotted rhythm lives on a pseudo-element (rather than
   .divider-line's own background) so the mask below — which
   clips its own box + descendants — can't also hide
   .divider-tick, a real child of .divider-line. */
.divider-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 0.5px 0.5px, var(--divider) 0.5px, transparent 0.5px);
  background-size: 3px 1px;
  background-repeat: repeat-x;
  /* Break the dotted rhythm around the tick: a 12px clear
     window (6px each side of center) with the dot pattern
     itself left untouched on either side. */
  -webkit-mask-image: linear-gradient(
    to right,
    black calc(50% - 6px),
    transparent calc(50% - 6px),
    transparent calc(50% + 6px),
    black calc(50% + 6px)
  );
  mask-image: linear-gradient(
    to right,
    black calc(50% - 6px),
    transparent calc(50% - 6px),
    transparent calc(50% + 6px),
    black calc(50% + 6px)
  );
}

.divider-tick {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
  width: 1px;
  height: 16px;
  background-image: radial-gradient(circle at .5px .5px, var(--divider) .5px, transparent .5px);
  background-size: 1px 3px;
  background-repeat: repeat-y;
}

.divider-labels {
  padding-top: 24px;
  display: grid;
  grid-template-columns: 50% 1fr auto;
  align-items: baseline;
}

.divider .num    { text-align: left; }
.divider .name   { text-align: left; }
.divider .status { text-align: right; }

/* ============================================
   RESPONSIVE-ONLY LINE BREAK
   ============================================ */

.mobile-only {
  display: none;
}

/* ============================================
   LOGO LINK
   Shared by every page's header (index, case pages,
   the wip/menu/back placeholders) — mark + name/tag
   stack, always a horizontal row with an 8px gap.
   Pages only ever override color (e.g. the light
   variant on wip.html) on top of this base layout.
   ============================================ */

.logo-block,
.logo-block:link,
.logo-block:visited,
.logo-block:hover,
.logo-block:active {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.logo-mark {
  width: 64px;
  height: 64px;
}

.logo-text > .t-tag {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 14px;
}

/* ============================================
   SITE FOOTER
   ============================================ */

.site-footer {
  margin-top: 96px;
  padding-bottom: 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-top: 35px;
}

.footer-avatar {
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
  height: auto;
}

.footer-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1526px;
  align-self: flex-end;
  margin-bottom: 24px;
}

.footer-heading {
  margin: 0;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.08em;
  color: var(--ink);
}

.footer-sub {
  margin: 12px 0 0;
  color: var(--ink);
}

.footer-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

.footer-links {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.footer-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link-label {
  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;
}

.footer-link-arrow {
  text-decoration: none;
}

.footer-link:hover {
  color: var(--accent);
}

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

.footer-copy {
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
}

/* ============================================
   FLOATING BACK BUTTON
   ============================================ */

.back-panel {
  position: fixed;
  left: 50%;
  bottom: calc(32px + env(safe-area-inset-bottom));
  z-index: 1000;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(26px);
  border-radius: 60px;
  padding: 8px;
  opacity: 0;
  transform: translate(-50%, 80px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.back-panel.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Fades the button/menu out of the way once the footer
   scrolls into view, so neither ever overlaps the footer
   content. Shared with .nav-panel below. */
.back-panel.is-footer-near,
.nav-panel.is-footer-near {
  opacity: 0;
  transform: translate(-50%, 80px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .back-panel {
    opacity: 1;
    transform: translate(-50%, 0);
    transition: none;
  }

  .back-panel.is-footer-near,
  .nav-panel.is-footer-near {
    transition: none;
  }
}

.back-btn {
  display: inline-block;
  background: var(--accent);
  border-radius: 96px;
  padding: 24px;
  font-family: "DotGothic16", "Space Mono", monospace;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: #FAFAFA;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.back-btn:hover {
  transform: scale(1.03);
}

/* ============================================
   FLOATING NAV MENU
   Top-level pages only (index, about, contact) —
   case pages use .back-panel instead. Shares the
   .is-footer-near fade behaviour above.
   ============================================ */

.nav-panel {
  position: fixed;
  left: 50%;
  bottom: calc(32px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(26px);
  border-radius: 60px;
  padding: 8px;
  transform: translate(-50%, 0);
}

.nav-item {
  display: inline-block;
  padding: 24px;
  border-radius: 96px;
  font-family: "DotGothic16", "Space Mono", monospace;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-item:hover {
  color: var(--accent);
}

.nav-item.is-active {
  background: var(--accent);
  color: #FAFAFA;
}

.nav-item.is-active:hover {
  color: #FAFAFA;
}

/* ============================================
   SPACING RHYTHM
   ============================================ */

.pause    { height: 64px; }   /* обычный зазор между блоками */
.pause-lg { height: 80px; }   /* увеличенный зазор (напр. после описания кейса) */
.breath   { height: 160px; }  /* дыхание между главами */

/* ============================================
   RESPONSIVE
   между 1100 и 1920 медиазапросов нет —
   всё тянется контейнерами и процентами
   ============================================ */

@media (max-width: 1100px) {
  :root { --edge: 24px; }
  .divider-labels { grid-template-columns: 50% 1fr auto; }
}

@media (max-width: 767px) {
  :root { --edge: 16px; }
  .t-body    { font-size: 16px; }
  .t-heading { font-size: 18px; }
  .breath    { height: 96px; }
  .pause     { height: 40px; }
  .pause-lg  { height: 50px; }

  /* --- Logo link (mark + name/tag) --- */
  .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;
    line-height: 14px;
  }

  /* --- Divider: two-line label layout --- */
  .divider-labels {
    padding-top: 21px;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto auto;
    column-gap: 4px;
    row-gap: 2px;
    align-items: start;
  }
  .divider .num    { grid-column: 1; grid-row: 1; text-align: center; }
  .divider .name   { grid-column: 1; grid-row: 2; text-align: center; }
  .divider .status { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: center; }
  .divider .num,
  .divider .name,
  .divider .status {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 12px;
  }

  /* --- Floating back button --- */
  .back-panel { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .back-btn   { padding: 16px; }

  /* --- Floating nav menu --- */
  .nav-panel { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .nav-item  { padding: 16px; }

  /* --- Responsive-only line break --- */
  .mobile-only {
    display: inline;
  }

  /* --- Site footer ---
     Order: heading → subline → links → ©2026 → avatar.
     .footer-content/.footer-nav are flattened via
     display: contents so every element becomes a direct
     flex child of .footer-inner and can be reordered/
     spaced independently with `order` + margin-top. */
  .site-footer {
    margin-top: 48px;
    padding-bottom: 0;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 343px;
    max-width: 100%;
    margin: 37px auto 0;
    text-align: center;
  }

  .footer-content {
    display: contents;
  }

  .footer-nav {
    display: contents;
  }

  .footer-heading {
    order: 1;
    margin: 0;
    font-size: 24px;
    line-height: 24px;
  }

  .footer-sub {
    order: 2;
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 15px;
  }

  .footer-links {
    order: 3;
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
  }

  .footer-link {
    font-size: 12px;
  }

  .footer-copy {
    order: 4;
    margin: 32px 0 0;
    font-size: 10px;
  }

  .footer-avatar {
    order: 5;
    flex: none;
    width: 200px;
    max-width: 200px;
    margin-top: 24px;
    margin-bottom: 0;
    transform: translateX(-16px);
  }
}

/* ============================================
   INDEX.HTML — page-specific styles
   Extracted verbatim from index.html's inline <style>,
   appended here (after everything above) so the source
   order — and therefore the cascade — stays identical to
   before, where this block sat right after the <link>
   to this file.
   ============================================ */

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

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

/* --- Header --- */
.site-header {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: var(--edge);
}

.header-left {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 296px;
}

.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;
  }
}

.logo-block { display: flex; align-items: center; gap: 8px; }
.logo-mark { width: 64px; height: 64px; }
.logo-text > .t-tag {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 14px;
}

/* --- Work list (right half) --- */
.work-list {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.work-row {
  display: grid;
  grid-template-columns: 50% 1fr auto;
  align-items: center;
  column-gap: 0;
}

.work-name,
.work-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}

.work-period {
  justify-content: flex-end;
  text-align: right;
}

.work-mark {
  width: 11px;
  height: 20px;
  flex-shrink: 0;
}

/* Work-list row tags — UI/Tag at 14/14 (smaller than the base .t-tag) */
.work-row .t-tag {
  font-size: 14px;
  line-height: 14px;
}

/* --- Fan --- */
.fan-wrap {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

.fan {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fan-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1380 / 880;
  container-type: inline-size;
}

/*
  Final left/top/width are set immediately.
  Reveal only animates transform + opacity:
  screens start translated onto avito-03's slot,
  then settle to translate(0) + their own rotation.
  Offsets use cqw (stage keeps aspect-ratio, so Y
  can be expressed in width units too).
*/
.fan-screen {
  position: absolute;
  height: auto;
  border: none;
  border-radius: 24px;
  box-shadow: 0 0 30.95px rgba(0, 0, 0, 0.18);
  transform-origin: center center;
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fan-screen--01 {
  left: 2.2464%;
  top: 35.9091%;
  width: 25%;
  z-index: 1;
  /* (643-31)/1380 cqw, (0-316)/1380 cqw */
  transform: translate(44.3478cqw, -22.8986cqw) rotate(0deg);
  transition-delay: 300ms;
}

.fan-screen--02 {
  left: 23.7681%;
  top: 5.9091%;
  width: 26.0870%;
  z-index: 2;
  /* (643-328)/1380 cqw, (0-52)/1380 cqw */
  transform: translate(22.8261cqw, -3.7681cqw) rotate(0deg);
  transition-delay: 100ms;
}

.fan-screen--03 {
  left: 46.5942%;
  top: 0;
  width: 27.1739%;
  z-index: 5;
  transform: translate(0, 0) rotate(0deg);
  transition-delay: 0ms;
}

.fan-screen--04 {
  left: 68.0435%;
  top: 7.6136%;
  width: 26.09%;
  z-index: 3;
  /* (643-939)/1380 cqw, (0-67)/1380 cqw */
  transform: translate(-21.4493cqw, -4.8551cqw) rotate(0deg);
  transition-delay: 200ms;
}

.fan.is-revealed .fan-screen--01 {
  opacity: 1;
  transform: translate(0, 0) rotate(-8deg);
}

.fan.is-revealed .fan-screen--02 {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.fan.is-revealed .fan-screen--03 {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.fan.is-revealed .fan-screen--04 {
  opacity: 1;
  transform: translate(0, 0) rotate(4deg);
}

/* After reveal settles, shorten transitions for hover spread */
.fan.is-revealed.is-settled .fan-screen {
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
  transition-delay: 0ms;
}

/* Hover spread — only after reveal has settled */
.fan.is-revealed.is-settled.is-hover .fan-screen--01 {
  transform: translate(-12px, 0) rotate(-9.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--02 {
  transform: translate(-12px, 0) rotate(-1.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--03 {
  transform: translate(12px, 0) rotate(1.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--04 {
  transform: translate(12px, 0) rotate(5.5deg);
}

/* --- Ozon Bank fan (desktop) --- */
.fan-screen--ozon-01 {
  left: -0.05%;
  top: 7.62%;
  width: 26%;
  z-index: 1;
  /* (46.68-(-0.05)) cqw, (4.55-7.62)*(880/1380) cqw */
  transform: translate(46.73cqw, -1.9577cqw) rotate(0deg);
  transition-delay: 300ms;
}

.fan-screen--ozon-02 {
  left: 23.13%;
  top: 0.13%;
  width: 27.17%;
  z-index: 2;
  /* (46.68-23.13) cqw, (4.55-0.13)*(880/1380) cqw */
  transform: translate(23.55cqw, 2.8186cqw) rotate(0deg);
  transition-delay: 100ms;
}

.fan-screen--ozon-03 {
  left: 46.68%;
  top: 4.55%;
  width: 27.17%;
  z-index: 4;
  transform: translate(0, 0) rotate(0deg);
  transition-delay: 0ms;
}

.fan-screen--ozon-04 {
  left: 71.29%;
  top: 6.82%;
  width: 26.09%;
  z-index: 3;
  /* (46.68-71.29) cqw, (4.55-6.82)*(880/1380) cqw */
  transform: translate(-24.61cqw, -1.4475cqw) rotate(0deg);
  transition-delay: 200ms;
}

.fan.is-revealed .fan-screen--ozon-01 {
  opacity: 1;
  transform: translate(0, 0) rotate(-8deg);
}

.fan.is-revealed .fan-screen--ozon-02 {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.fan.is-revealed .fan-screen--ozon-03 {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.fan.is-revealed .fan-screen--ozon-04 {
  opacity: 1;
  transform: translate(0, 0) rotate(4deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--ozon-01 {
  transform: translate(-12px, 0) rotate(-9.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--ozon-02 {
  transform: translate(-12px, 0) rotate(-1.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--ozon-03 {
  transform: translate(12px, 0) rotate(1.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--ozon-04 {
  transform: translate(12px, 0) rotate(5.5deg);
}

/* --- Ozon Bank widgets: three stacked cards that slide up
   from underneath, starting 600ms after the fan reveal
   begins (see settleFan() / WIDGETS_DELAY_MS in main.js).
   Fixed position — only opacity + translateY animate. */
.fan-widgets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fan-widget {
  position: absolute;
  height: auto;
  border: none;
  border-radius: 24px;
  box-shadow: 0 0 30.95px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fan-widget--01 { left: 42.75%; top: 68.15%; width: 24.86%; z-index: 5; transition-delay: 0ms; }
.fan-widget--02 { left: 42.75%; top: 77.70%; width: 24.86%; z-index: 6; transition-delay: 120ms; }
.fan-widget--03 { left: 42.75%; top: 87.24%; width: 24.86%; z-index: 7; transition-delay: 240ms; }

.fan-widgets.is-revealed .fan-widget {
  opacity: 1;
  transform: translateY(0);
}

/* After reveal settles, shorten the transition for hover spread */
.fan.is-revealed.is-settled .fan-widget {
  transition: transform 0.25s ease-out;
}

/* Hover spread — widgets slide apart instead of overlapping */
.fan.is-revealed.is-settled.is-hover .fan-widget--01 {
  transform: translateY(-8px);
}

.fan.is-revealed.is-settled.is-hover .fan-widget--02 {
  transform: translateY(0);
}

.fan.is-revealed.is-settled.is-hover .fan-widget--03 {
  transform: translateY(8px);
}

/* --- VK Play fan (desktop): two screens, stage 1330x948 --- */
.fan-stage--vk {
  aspect-ratio: 1330 / 948;
}

.fan-screen--vk-01 {
  left: 0.19%;
  top: 1.55%;
  width: 89.56%;
  z-index: 1;
  transform: translate(0, 0) rotate(0deg);
  transition-delay: 0ms;
}

.fan-screen--vk-02 {
  left: 73.45%;
  top: 17.51%;
  width: 27.07%;
  z-index: 2;
  transform: translateY(40px) rotate(0deg);
  transition-delay: 100ms;
}

.fan.is-revealed .fan-screen--vk-01 {
  opacity: 1;
  transform: translate(0, 0) rotate(-2deg);
}

.fan.is-revealed .fan-screen--vk-02 {
  opacity: 1;
  transform: translateY(0) rotate(2deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--vk-01 {
  transform: translate(-12px, 0) rotate(-3.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--vk-02 {
  transform: translate(12px, 0) rotate(3.5deg);
}

/* --- Rambler & Co fan (desktop): three screens, stage 1380x880 ---
   Stacks from rambler-02's position/rotation (the centre one).
   rambler-03 rises straight up instead of sliding in. */
.fan-screen--rambler-01 {
  left: 0.004%;
  top: 4.06%;
  width: 29.90%;
  height: 86.74%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  box-shadow: none;
  /* (13.01-0.004) cqw, (6.58-4.06)*(880/1380) cqw */
  transform: translate(13.006cqw, 1.6070cqw) rotate(0deg);
  transition-delay: 100ms;
}

.fan-screen--rambler-02 {
  left: 13.01%;
  top: 6.58%;
  width: 72%;
  z-index: 2;
  transform: translate(0, 0) rotate(0deg);
  transition-delay: 0ms;
}

.fan-screen--rambler-03 {
  left: 73.43%;
  top: 24.67%;
  width: 26.33%;
  height: 76%;
  object-fit: cover;
  object-position: top;
  box-shadow: none;
  z-index: 3;
  transform: translateY(40px) rotate(0deg);
  transition-delay: 200ms;
}

.fan.is-revealed .fan-screen--rambler-01 {
  opacity: 1;
  transform: translate(0, 0) rotate(-6deg);
}

.fan.is-revealed .fan-screen--rambler-02 {
  opacity: 1;
  transform: translate(0, 0) rotate(2deg);
}

.fan.is-revealed .fan-screen--rambler-03 {
  opacity: 1;
  transform: translateY(0) rotate(-2deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--rambler-01 {
  transform: translate(-12px, 0) rotate(-7.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--rambler-02 {
  transform: translate(12px, 0) rotate(3.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--rambler-03 {
  transform: translate(12px, 0) rotate(-3.5deg);
}

/* --- Vassa Zheleznova fan (desktop): two screens, stage 1380x880 ---
   Stacks from vs-01's position/rotation (the anchor).
   vs-02 rises straight up instead of sliding in. External
   link (not a case page) — see .fan[data-cursor-text] below. */
.fan-screen--vs-01 {
  left: 0%;
  top: 6.24%;
  width: 78.82%;
  z-index: 1;
  box-shadow: none;
  transform: translate(0, 0) rotate(0deg);
  transition-delay: 0ms;
}

.fan-screen--vs-02 {
  left: 59.00%;
  top: 0%;
  width: 44.52%;
  height: auto;
  z-index: 2;
  transform: translateY(40px) rotate(0deg);
  transition-delay: 100ms;
}

.fan.is-revealed .fan-screen--vs-01 {
  opacity: 1;
  transform: translate(0, 0) rotate(-3deg);
}

.fan.is-revealed .fan-screen--vs-02 {
  opacity: 1;
  transform: translateY(0) rotate(4deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--vs-01 {
  transform: translate(-12px, 0) rotate(-4.5deg);
}

.fan.is-revealed.is-settled.is-hover .fan-screen--vs-02 {
  transform: translate(12px, 0) rotate(5.5deg);
}

/* Cursor plate (pointer devices only) */
.cursor-plate {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  padding: 4px 6px;
  gap: 8px;
  background: var(--ink);
  color: #FAFAFA;
  pointer-events: none;
  z-index: 2147483647;
  border-radius: 0;
  white-space: nowrap;
  transform: translate(-9999px, -9999px);
}

.cursor-plate.is-active {
  display: inline-flex;
}

.cursor-plate .t-tag {
  color: #FAFAFA;
}

body.is-fan-hover .cursor-readout {
  opacity: 0 !important;
  visibility: hidden;
}

/* Coordinate readout: no cursor on touch, and the mobile
   layout has no room for it — hide entirely in both cases. */
@media (pointer: coarse), (max-width: 767px) {
  .coord-readout {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fan-screen {
    transition: none;
    transition-delay: 0ms;
  }

  .fan.is-revealed.is-settled.is-hover .fan-screen,
  .fan.is-revealed.is-settled .fan-screen {
    transition: none;
  }

  .fan-widget {
    transition: none;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Open-case text link — mobile only */
.fan-open {
  display: none;
}

@media (max-width: 1100px) {
  .header-left { gap: 48px; }
}

@media (max-width: 767px) {
  /* --- Layout --- */
  /* --edge is 16px via style.css; header top includes safe-area */

  /* --- Header (matches rambler mobile) --- */
  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  .header-left,
  .work-list {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .header-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  .site-header .clock {
    padding-top: 7px;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: -0.04em;
  }

  .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;
    line-height: 14px;
  }

  /* --- Work list --- */
  .work-list {
    gap: 20px;
  }

  .work-row {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto;
    align-items: center;
  }

  .work-name,
  .work-period {
    font-size: 14px;
    line-height: 16px;
    min-width: 0;
  }

  .work-name {
    white-space: nowrap;
    overflow: hidden;
  }

  .work-row .t-tag {
    font-family: var(--dot);
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 0;
  }

  /* Gap: work-list → avito section (pause after header) */
  .pause-to-avito {
    height: 48px;
  }

  /* Gap: between case sections (e.g. avito → ozon bank) */
  .pause-section {
    height: 48px;
  }

  /* Gap: section-label → previews */
  .pause-to-fan {
    height: 32px;
  }

  /* --- Fan: three-screen preview, scales with viewport ---
     .fan-stage grows with the viewport (up to 500px) while
     keeping the 343:310 proportions via aspect-ratio, so it
     no longer sits fixed-width with empty space on the
     sides between 375–767px. Positions are percentages of
     the stage box; the images keep their natural aspect
     ratio (height: auto) and are cropped by overflow: hidden.
     !important pins left/top/width/z-index/transform
     against the desktop .fan.is-revealed / .is-hover rules,
     which have higher selector specificity and would
     otherwise win the cascade even inside this media query. */
  .fan-wrap {
    width: 100%;
  }

  .fan-stage {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 343 / 310;
    overflow: hidden;
    margin: 0 auto;
  }

  /* Reveal: all three start stacked at avito-03's slot
     (rotate 0deg, opacity 0), then translate() out to their
     own position and rotate to their own angle. left/top/
     width stay fixed at each screen's final value — only
     transform + opacity animate. Offsets are in cqw (see
     .fan-stage's container-type: inline-size above) so they
     scale with the fluid stage instead of being fixed px. */
  .fan-screen {
    position: absolute;
    height: auto;
    border-radius: 8px;
    box-shadow: none !important; /* would otherwise get hard-clipped by overflow: hidden */
    opacity: 0 !important;
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .fan-screen--01 {
    display: none;
  }

  .fan-screen--02 {
    left: 7.58%;
    top: 5.16%;
    width: 37.90%;
    z-index: 1;
    /* 37.61 - 7.58, (0 - 5.16) * (310/343) */
    transform: translate(30.03cqw, -4.6636cqw) rotate(0deg) !important;
    transition-delay: 100ms !important;
  }

  .fan-screen--03 {
    left: 37.61%;
    top: 0%;
    width: 36.44%;
    z-index: 3;
    transform: translate(0, 0) rotate(0deg) !important;
    box-shadow: 0 0 9.53px rgba(0, 0, 0, 0.18) !important;
    transition-delay: 0ms !important;
  }

  .fan-screen--04 {
    left: 56.85%;
    top: 3.55%;
    width: 37.03%;
    z-index: 2;
    /* 37.61 - 56.85, (0 - 3.55) * (310/343) */
    transform: translate(-19.24cqw, -3.2085cqw) rotate(0deg) !important;
    transition-delay: 200ms !important;
  }

  .fan.is-revealed .fan-screen--02 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(-4deg) !important;
  }

  .fan.is-revealed .fan-screen--03 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(0deg) !important;
  }

  .fan.is-revealed .fan-screen--04 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(8deg) !important;
  }

  /* --- Ozon Bank: three-screen preview (mobile) ---
     ozon-01 and the widgets stack are desktop-only. */
  .fan-screen--ozon-01 {
    display: none;
  }

  .fan-widgets {
    display: none;
  }

  .fan-screen--ozon-02 {
    left: 11.37%;
    top: 0%;
    width: 36.44%;
    z-index: 1;
    /* 33.82 - 11.37, (7.74 - 0) * (310/343) */
    transform: translate(22.45cqw, 6.9953cqw) rotate(0deg) !important;
    transition-delay: 100ms !important;
  }

  .fan-screen--ozon-03 {
    left: 33.82%;
    top: 7.74%;
    width: 36.44%;
    z-index: 3;
    transform: translate(0, 0) rotate(0deg) !important;
    box-shadow: 0 0 9.53px rgba(0, 0, 0, 0.18) !important;
    transition-delay: 0ms !important;
  }

  .fan-screen--ozon-04 {
    left: 52.32%;
    top: 3.43%;
    width: 37.03%;
    z-index: 2;
    /* 33.82 - 52.32, (7.74 - 3.43) * (310/343) */
    transform: translate(-18.5cqw, 3.8953cqw) rotate(0deg) !important;
    transition-delay: 200ms !important;
  }

  .fan.is-revealed .fan-screen--ozon-02 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(0deg) !important;
  }

  .fan.is-revealed .fan-screen--ozon-03 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(0deg) !important;
  }

  .fan.is-revealed .fan-screen--ozon-04 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(4deg) !important;
  }

  /* --- VK Play: two-screen preview (mobile) --- */
  .fan-screen--vk-01 {
    left: 0.74%;
    top: 1.37%;
    width: 87.46%;
    z-index: 1;
    transform: translate(0, 0) rotate(0deg) !important;
    transition-delay: 0ms !important;
  }

  .fan-screen--vk-02 {
    left: 58.99%;
    top: 11.29%;
    width: 36.44%;
    z-index: 2;
    transform: translateY(40px) rotate(0deg) !important;
    transition-delay: 100ms !important;
  }

  .fan.is-revealed .fan-screen--vk-01 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(-2deg) !important;
  }

  .fan.is-revealed .fan-screen--vk-02 {
    opacity: 1 !important;
    transform: translateY(0) rotate(2deg) !important;
  }

  /* --- Rambler & Co: two-screen preview (mobile) ---
     rambler-01 is desktop-only. rambler-02 fades in in place
     (the anchor); rambler-03 rises straight up. */
  .fan-screen--rambler-01 {
    display: none;
  }

  .fan-screen--rambler-02 {
    left: 2.83%;
    top: 1.37%;
    width: 89.58%;
    height: 72.14%;
    object-fit: cover;
    object-position: top;
    z-index: 1;
    transform: translate(0, 0) rotate(0deg) !important;
    transition-delay: 0ms !important;
  }

  .fan-screen--rambler-03 {
    left: 58.52%;
    top: 10.15%;
    width: 40.08%;
    height: 89.68%;
    object-fit: cover;
    object-position: top;
    z-index: 2;
    transform: translateY(32px) rotate(0deg) !important;
    transition-delay: 100ms !important;
  }

  .fan.is-revealed .fan-screen--rambler-02 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(2deg) !important;
  }

  .fan.is-revealed .fan-screen--rambler-03 {
    opacity: 1 !important;
    transform: translateY(-8px) rotate(-2deg) !important;
  }

  /* --- Vassa Zheleznova: two-screen preview (mobile) ---
     vs-01 fades in in place (the anchor); vs-02 rises up. */
  .fan-screen--vs-01 {
    left: 0.73%;
    top: 9.42%;
    width: 76.10%;
    height: 61.98%;
    object-fit: cover;
    object-position: top;
    z-index: 1;
    transform: translate(0, 0) rotate(0deg) !important;
    transition-delay: 0ms !important;
  }

  .fan-screen--vs-02 {
    left: 40.91%;
    top: 13.55%;
    width: 53.83%;
    height: 83.77%;
    object-fit: cover;
    object-position: top;
    z-index: 2;
    transform: translateY(40px) rotate(0deg) !important;
    transition-delay: 100ms !important;
  }

  .fan.is-revealed .fan-screen--vs-01 {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(-3deg) !important;
  }

  .fan.is-revealed .fan-screen--vs-02 {
    opacity: 1 !important;
    transform: translateY(0) rotate(4deg) !important;
  }

  /* --- Open case link --- */
  .fan-open {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    margin-top: 16px;
    font-family: var(--dot);
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
  }

  .fan-open-label {
    text-decoration: underline dotted;
    text-decoration-color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .fan-open-arrow {
    text-decoration: none;
  }

  /* --- Fade-in reveal (label, preview, link) --- */
  .reveal-mobile {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-mobile.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .reveal-mobile {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fan-screen {
    opacity: 1 !important;
    transition: none !important;
  }

  .fan-screen--02 {
    transform: rotate(-4deg) !important;
  }

  .fan-screen--03 {
    transform: rotate(0deg) !important;
  }

  .fan-screen--04 {
    transform: rotate(8deg) !important;
  }

  .fan-screen--ozon-02 {
    transform: rotate(0deg) !important;
  }

  .fan-screen--ozon-03 {
    transform: rotate(0deg) !important;
  }

  .fan-screen--ozon-04 {
    transform: rotate(4deg) !important;
  }

  .fan-screen--vk-01 {
    transform: rotate(-2deg) !important;
  }

  .fan-screen--vk-02 {
    transform: rotate(2deg) !important;
  }

  .fan-screen--rambler-02 {
    transform: rotate(2deg) !important;
  }

  .fan-screen--rambler-03 {
    transform: translateY(-8px) rotate(-2deg) !important;
  }

  .fan-screen--vs-01 {
    transform: rotate(-3deg) !important;
  }

  .fan-screen--vs-02 {
    transform: rotate(4deg) !important;
  }
}