/* Chapters: each project gets its own full-screen chapter.
   On desktop the chapters stack: the next one slides over the previous,
   which settles back slightly. --enter, --cover and --leave are set by app.js
   from the scroll position; every rule still reads correctly at their defaults. */

/* ---------- Hero handoff (desktop only, driven by --leave) ---------- */
.hero { --leave: 0; }
@media (min-width: 901px) and (min-aspect-ratio: 6/5) and (prefers-reduced-motion: no-preference) {
  .brand-scene, .hero-byline {
    opacity: calc(1 - var(--leave) * 1.25);
    translate: 0 calc(var(--leave) * -48px);
  }
  .project-card.is-left .card-depth {
    translate: calc(var(--leave) * -26%) calc(var(--leave) * 30px);
    opacity: calc(1 - var(--leave) * 1.5);
  }
  .project-card.is-right .card-depth {
    translate: calc(var(--leave) * 26%) calc(var(--leave) * 30px);
    opacity: calc(1 - var(--leave) * 1.5);
  }
  .project-card.is-center .card-depth {
    scale: calc(1 + var(--leave) * .16);
    translate: 0 calc(var(--leave) * -6%);
  }
  .gallery-toolbar { opacity: calc(1 - var(--leave) * 2); }
}

/* ---------- Hero fits the screen ----------
   The hero composition (wordmark, byline, project screens, toolbar) is laid out in
   container units, so its size follows the hero's width. On wide but short screens that
   pushed the projects below the fold. Capping the width by the available height keeps
   the whole composition on the first screen; on standard screens nothing changes. */
@media (min-width: 901px) and (min-aspect-ratio: 6/5) {
  :root { --hero-fit: min(1660px, calc(100vw - 64px), calc((100svh - 130px) / .57)); }
  .hero { --composition-width: var(--hero-fit); width: var(--hero-fit); }
  /* Keep the logo and navigation aligned with the wordmark's edges. */
  .site-header { width: var(--hero-fit); }
}

/* ---------- Showroom floor under the hero screens ----------
   The screens stand on a surface: a floor plane slightly lighter than the background,
   a soft band of light along the horizon where they meet it, and a faint reflection of
   each screen. Reflections use -webkit-box-reflect (Chrome, Edge, Safari); Firefox shows
   the floor and horizon without them. */
@media (min-width: 901px) and (min-aspect-ratio: 6/5) {
  /* Studio backdrop, matched to the reference: neutral charcoal, lit from the left and
     center (#191919), falling off toward the right and top (#101010), and fading into the
     page background where the hero ends. Full-bleed behind the header and hero. */
  .hero::before {
    display: block; content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: -60px; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: auto;
    background:
      linear-gradient(#10101000 72%, var(--bg) 100%),
      radial-gradient(ellipse 62% 70% at 34% 52%, #1b1b1b, #161616 45%, #121212 72%, #0e0e0e 100%);
  }
  .stage-light { display: none; }
  /* Floor profile sampled from the reference: a lit band right at the base of the
     screens (#363636–#3d3d3d for the first ~35px), dropping to #1a1a1a by ~55px and to
     the background by ~80px; brightest in the middle, fading gradually to the sides.
     The plane starts behind the screens, so the band begins at their bottom edge. */
  .project-stage::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    left: -7%; right: -7%; top: 84%; height: 62%;
    background:
      linear-gradient(90deg, #fff0 4%, #ffffff14 28%, #ffffff24 50%, #ffffff14 72%, #fff0 96%) top / 100% 1px no-repeat,
      linear-gradient(180deg, #404040 0, #3d3d3d 60px, #383838 72px, #2f2f2f 84px, #1c1c1c 102px, #161616 128px, #14141400 170px);
    -webkit-mask: linear-gradient(90deg, #0000 0%, #0009 10%, #000 30%, #000 70%, #0009 90%, #0000 100%);
    mask: linear-gradient(90deg, #0000 0%, #0009 10%, #000 30%, #000 70%, #0009 90%, #0000 100%);
  }
  .project-card .screen-frame {
    -webkit-box-reflect: below 4px linear-gradient(#0000 0%, #0000 62%, #ffffff36 100%);
  }
  .project-card.is-left .screen-frame, .project-card.is-right .screen-frame {
    -webkit-box-reflect: below 4px linear-gradient(#0000 0%, #0000 68%, #ffffff33 100%);
  }
  /* Contact shadow: each screen presses lightly into the lit floor. */
  .project-card .card-depth::after {
    content: ''; position: absolute; left: 6%; right: 6%; bottom: -10px; height: 18px; z-index: -1;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, #000c, #0000 70%);
    pointer-events: none;
  }
}
@media (min-width: 901px) and (min-aspect-ratio: 6/5) and (prefers-reduced-transparency: reduce) {
  .project-card .screen-frame { -webkit-box-reflect: none; }
}

/* ---------- Color discipline in the hero ----------
   The real projects bring their own palettes (SinaFit gold, Trace teal, Glide blue).
   The side screens are shown in black and white so the hero stays black, silver and
   orange; the featured screen keeps its color, and a side screen regains color on
   hover or keyboard focus. */
.project-card .screen-button > img { transition: filter 600ms var(--ease-out); }
.project-card.is-left .screen-button > img,
.project-card.is-right .screen-button > img { filter: grayscale(1) brightness(.88) contrast(1.06); }
.project-card.is-left:focus-within .screen-button > img,
.project-card.is-right:focus-within .screen-button > img { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .project-card.is-left:hover .screen-button > img,
  .project-card.is-right:hover .screen-button > img { filter: none; }
}

/* ---------- Chapters, shared ---------- */
.chapters { position: relative; }
.chapter { background: var(--bg); border-top: 1px solid var(--line); position: relative; }
.chapter-inner {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: clamp(40px, 5vw, 96px); align-items: center;
}
.chapter-media { perspective: 1600px; min-width: 0; }
.chapter-shot {
  display: block; width: 100%; padding: 2px; border: 1px solid #858585; border-radius: 3px;
  background: #262626; box-shadow: 0 30px 60px -10px #000c, 0 2px 0 #d3cdc04d;
  transform-origin: 50% 100%; position: relative;
}
.chapter-shot > img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top left; background: #151515;
}
/* Full-length captures scroll inside the frame as the visitor scrolls (--pan from app.js). */
.chapter-shot { overflow: hidden; }
.chapter-shot > img.is-tall { object-position: 50% calc(var(--pan, 0) * 100%); }
.chapter[data-project="glide"] .chapter-shot > img {
  transform-origin: 28% 30%; scale: calc(1 + var(--pan, 0) * .14);
}
.chapter-shot::after {
  content: 'Closer look ↗'; position: absolute; right: 22px; bottom: 22px;
  padding: 12px 16px; background: #e7e7e7; color: #181818; border-radius: 3px;
  font-size: 13px; font-weight: 600; opacity: 0; translate: 0 6px;
  transition: opacity 160ms ease, translate 200ms var(--ease-out); pointer-events: none;
}
.chapter-shot:focus-visible { outline-offset: 6px; }
.chapter-copy { min-width: 0; max-width: 520px; }
.chapter-num {
  font-family: Archivo, 'Arial Black', sans-serif; font-weight: 900;
  font-size: clamp(56px, 6vw, 96px); line-height: .9; letter-spacing: -.04em;
  color: var(--accent); margin: 0 0 18px; font-variant-numeric: tabular-nums;
}
.chapter-copy h3 {
  font-size: clamp(44px, 4.6vw, 76px); font-weight: 500; line-height: 1;
  letter-spacing: -.035em; margin: 0; text-wrap: balance;
}
.chapter-kind { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.chapter-live {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.chapter-live[hidden] { display: none; }
.chapter-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); box-shadow: 0 0 0 0 #e3321b66;
}
.chapter-live strong { color: var(--text); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .chapter-live::before { animation: live-pulse 2.4s cubic-bezier(.23,1,.32,1) infinite; }
  @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 #e3321b66; } 70%, 100% { box-shadow: 0 0 0 7px #e3321b00; } }
}
.chapter-lede { font-size: 17px; line-height: 1.65; color: var(--text); margin: 28px 0 0; max-width: 46ch; text-wrap: pretty; }
.chapter-facts { margin: 30px 0 0; display: grid; }
.chapter-facts > div {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.chapter-facts > div:last-child { border-bottom: 1px solid var(--line); }
.chapter-facts dt { font-size: 13px; color: var(--muted); }
.chapter-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.chapter-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.chapter-visit {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 48px; padding: 0 18px; background: var(--text); color: #161616;
  border-radius: 3px; font-size: 14px; font-weight: 600;
}
.chapter-visit > span { font-size: 19px; }
.chapter-more {
  min-height: 48px; padding: 0; border: 0; background: none; color: var(--text);
  font-size: 14px; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.chapter-rail { display: none; }

@media (hover: hover) and (pointer: fine) {
  .chapter-shot:hover::after, .chapter-shot:focus-visible::after { opacity: 1; translate: 0 0; }
  .chapter-visit:hover { background: #fff; }
  .chapter-more:hover { color: #fff; }
}

/* ---------- Desktop: stacking, scroll-driven chapters ---------- */
@media (min-width: 901px) and (min-height: 600px) {
  .chapter {
    position: sticky; top: 0; height: 100svh; min-height: 600px;
    display: flex; align-items: center; overflow: clip;
    --enter: 1; --cover: 0;
  }
  .chapter-inner { padding-left: clamp(110px, 9vw, 150px); }
  /* Dwell: each chapter holds still while its screenshot scrolls, then the next slides over. */
  .chapter + .chapter { margin-top: 90svh; }
  /* SinaFit shows a still screenshot, so it doesn't pause; Trace slides over it right away. */
  #chapter-trace { margin-top: 0; }
  /* The last chapter's dwell must be in-flow content, not padding: a pinned (sticky)
     element is released at its container's content edge, so padding left a blank screen. */
  .chapters::after { content: ''; display: block; height: 90svh; }
  .chapter-rail {
    display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 140px;
    z-index: 5; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  }
  .chapter-rail.is-live { opacity: 1; }
  .rail-inner {
    position: sticky; top: calc(50svh - 62px); margin-left: 32px;
    display: grid; grid-template-columns: 2px auto; gap: 16px;
  }
  .rail-track { position: relative; background: var(--line); }
  .rail-fill {
    position: absolute; inset: 0; background: var(--accent);
    transform-origin: top; scale: 1 var(--progress, 0);
  }
  .rail-inner ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
  .rail-inner li { font-size: 13px; color: #797979; transition: color 200ms ease; }
  .rail-inner li.is-active { color: var(--text); }
}
@media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .chapter-inner {
    transform-origin: 50% 30%;
    scale: calc(1 - var(--cover) * .07);
    opacity: calc(1 - var(--cover) * .7);
  }
  .chapter-shot {
    transform: rotateX(calc((1 - var(--enter)) * 16deg))
               translateY(calc((1 - var(--enter)) * 70px))
               scale(calc(.9 + var(--enter) * .1));
  }
  .chapter-copy > * {
    opacity: calc(var(--enter) * 1.8 - .6);
    translate: 0 calc((1 - var(--enter)) * 36px);
  }
}

/* ---------- Tablet and phone: calm stacked chapters ---------- */
@media (max-width: 900px), (max-height: 599px) {
  .chapter { padding-block: 64px; }
  .chapter-inner { grid-template-columns: 1fr; gap: 32px; }
  .chapter-copy { max-width: 620px; }
}
@media (max-width: 767px) {
  .chapter { padding-block: 52px; }
  .chapter-num { font-size: 52px; margin-bottom: 12px; }
  .chapter-copy h3 { font-size: 44px; }
  .chapter-lede { font-size: 16px; margin-top: 22px; }
  .chapter-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .chapter-actions { gap: 22px; }
  .chapter-shot > img { aspect-ratio: 16 / 11; }
}

/* ---------- Card to detail morph (View Transitions) ---------- */
::view-transition-group(project-shot) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
::view-transition-old(project-shot), ::view-transition-new(project-shot) { height: 100%; object-fit: cover; object-position: top left; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; }

/* ---------- Live metal (metal.js) ---------- */
.metal-gl {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  clip-path: polygon(21.5% 5.4%,83.8% 8.6%,50% 75%,99% 91.2%,3.6% 94.2%,45.7% 32.9%,7.2% 32.6%);
  filter: drop-shadow(6px 14px 14px #0009);
}
.has-metal-gl .metal-z { opacity: 0; }
.has-metal-gl .z-shine { display: none; }

/* ---------- One light for the whole page ----------
   app.js moves a single light (the cursor, phone tilt, or a slow idle drift) and writes
   its position into --lx / --ly on each lit element. The metal Z reads the same light. */
@property --lx { syntax: '<percentage>'; inherits: true; initial-value: -40%; }
@property --ly { syntax: '<percentage>'; inherits: true; initial-value: 40%; }
@media (prefers-reduced-motion: no-preference) {
  /* Orange type that catches the light: chapter numbers and "real." */
  .has-light .lit-text {
    background: radial-gradient(circle at var(--lx) var(--ly), #fff2ef 0, #ffaa98 9%, #ee4a31 24%, var(--accent) 42%, #b5220e 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .has-light .chapter-num.lit-text { background-size: 100% 100%; }
  /* A rim of light travels along the screenshot frames. */
  .has-light .chapter-shot::before {
    content: ''; position: absolute; inset: -1.5px; border-radius: 3px; padding: 1.5px; z-index: 2;
    background: radial-gradient(circle 420px at var(--lx) var(--ly), #fbfbfb, #eeeeee8c 28%, #fff0 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  }
  /* A faint sheen on the glass of the screenshot itself. */
  .has-light .chapter-shot > img {
    -webkit-mask: radial-gradient(circle 900px at var(--lx) var(--ly), #000 0, #000d 60%, #000c 100%);
  }
}

/* ---------- Try it live (Trace) and download (Glide) ---------- */
.live-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--accent); border-radius: 3px; background: #0f0f0f;
  box-shadow: 0 30px 60px -10px #000c, 0 0 0 4px #e3321b1f;
}
.live-stage > iframe {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0;
  transform: scale(var(--fit, .5)); transform-origin: 0 0;
  opacity: 0; transition: opacity 300ms ease;
}
.live-stage.is-ready > iframe { opacity: 1; }
.live-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 14px; color: var(--muted); }
.chapter-shot[hidden] { display: none; }
.chapter-try[aria-pressed="true"] { color: var(--accent); }
.chapter-download[hidden] { display: none; }
.chapter-download { display: inline-flex; align-items: center; }
/* The live app needs desktop room; smaller screens keep the "Open Trace" link instead. */
@media (max-width: 900px), (max-height: 599px) { .chapter-try { display: none; } }

/* ---------- Closer look: scroll the whole live page inside the viewer ---------- */
.detail-preview.is-scroll {
  display: block; padding: 0; align-self: start;
  max-height: min(74dvh, 860px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-color: #565656 #0a0a0a; scrollbar-width: thin;
}
.detail-preview.is-scroll > img { max-height: none; height: auto; width: 100%; }
.detail-preview.is-scroll.is-loading::before { inset: 0; }
@media (max-width: 767px) { .detail-preview.is-scroll { max-height: 52dvh; } }

/* ---------- Hero screen labels ----------
   The labels under the hero screens used to sit in space reserved by the old carousel
   controls. Without them they overlapped the toolbar in the tablet-shaped layout (for
   example a 1043 × 879 window). The desktop layout already hides them and "Explore work"
   covers their job, so only phones keep the single label under the featured screen. */
@media (min-width: 768px) { .project-caption { display: none; } }

/* ---------- Phone: switch the project in front ---------- */
.hero-dots { display: none; }
@media (max-width: 767px) {
  .hero-dots { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
  .hero-dots > button {
    width: 36px; height: 36px; padding: 0; border: 0; background: none;
    display: grid; place-items: center;
  }
  .hero-dots > button::before {
    content: ''; width: 6px; height: 6px; border-radius: 3px; background: #5c5c5c;
    transition: width 300ms var(--ease-out), background-color 300ms ease;
  }
  .hero-dots > button[aria-pressed="true"]::before { width: 20px; background: var(--accent); }
  .hero-dots > button:focus-visible { outline-offset: -4px; }
}

/* ---------- Simplified hero toolbar ---------- */
.gallery-note { margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px), (max-aspect-ratio: 6/5) {
  .gallery-toolbar { min-height: 0 !important; flex-wrap: nowrap; padding-block: 12px 14px; margin-top: 14px; }
  .explore-work { margin-left: auto; }
}
@media (max-width: 420px) { .gallery-note { white-space: normal; max-width: 180px; line-height: 1.5; } }
.hero-tagline { font-size: max(13px, 1.03vw) !important; }
.about-copy p { font-size: 16px; }
.capability-list { font-size: 13px; }
.text-link { font-size: 14px; min-height: 44px; }
.contact-intro { margin: 0; font-size: 15px; color: var(--muted); }
.telegram-link { font-size: 14px; min-height: 44px; align-items: center; }
#copy-contact { font-size: 14px; min-height: 44px; }
#copy-status { font-size: 13px; }
.site-footer > span, .site-footer > a:last-child { font-size: 13px; }
.site-footer > a:last-child, .site-footer .logo { min-height: 44px; display: inline-flex; align-items: center; }
.footer-motion {
  margin-left: auto; border: 0; background: none; padding: 0; min-height: 44px;
  font-size: 13px; color: var(--muted);
}
.footer-motion:hover { color: var(--text); }
.footer-motion:disabled { opacity: .55; cursor: default; }
.site-footer > .footer-motion + a { margin-left: 0 !important; }
.detail-kind { font-size: 14px; color: var(--muted); margin: -10px 0 22px; }
.detail-copy > p:not(.detail-kind):not(.detail-source) { font-size: 15px !important; }
.detail-tags span { font-size: 12px; }
.detail-inside h3 { font-size: 13px; }
.detail-inside li { font-size: 14px; }
.detail-source, .detail-bottom > span, #detail-counter, .detail-top-label { font-size: 12px !important; }
.detail-share #copy-project { font-size: 13px; }
.close-detail { font-size: 13px; min-height: 44px; }
.project-caption { font-size: 12px; }
::selection { background: var(--accent); color: #000; }
.skip-link { color: #000; font-weight: 600; }
html { scrollbar-color: #474747 var(--bg); }
@media (max-width: 767px) {
  .screen-chrome { font-size: 11px; }
  .project-caption > span { font-size: 11px; }
  .site-footer { gap: 12px 20px; }
  .footer-motion { margin-left: 0; }
  .contact-intro { font-size: 14px; }
}