/* Sections of the home page. Footage zones (hero, works) keep light ink. */

.on-media-ink, .hero, .iris.works, html.on-media .topbar {
  --text: #f4f2ed; --muted: rgba(244, 242, 237, 0.78); --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.3);
  --bg: #0b0b0c; --lt-ripple: 255 255 255; --link: #ffffff; --btn-bg: #f4f2ed; --btn-ink: #0b0b0c;
}
html.on-media .topbar .brand { background: rgba(5, 5, 6, 0.6); }

/* ================================================================ 01 HERO */
.hero-wrap { position: relative; height: 200vh; height: 200svh; }
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #050506; color: var(--text); isolation: isolate; }
.hero-media { position: absolute; inset: 0; transform-origin: 50% 62%; will-change: transform; }
.hero-layer { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.hero-layer img, .hero-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hero-layer video { opacity: 0; transition: opacity 0.25s linear; }
.hero-layer video.ready { opacity: 1; }
.hero-layer.on { opacity: 1; transform: none; z-index: 2; transition: opacity 0.14s linear, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-layer.enter { opacity: 0; transform: translate3d(var(--dx, 0), 0, 0) scale(1.15); transition: none; }
.hero-layer.leave { opacity: 1; z-index: 1; transform: translate3d(var(--dx, 0), 0, 0) scale(1.09); transition: transform 0.7s cubic-bezier(0.5, 0, 0.9, 0.6); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.85;
  background:
    linear-gradient(0deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.55) 34%, rgba(5, 5, 6, 0.08) 62%, rgba(5, 5, 6, 0.38) 100%),
    linear-gradient(90deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 62%);
}
/* the statement row sits on its own dark floor: ≥ 4.5:1 for the small text on any frame, even a bright one */
.hero::after {
  content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(clamp(170px, 30vh, 300px) + var(--tsb-bottom)); pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 5, 6, 0.9) 0%, rgba(5, 5, 6, 0.82) 45%, rgba(5, 5, 6, 0.5) 72%, rgba(5, 5, 6, 0) 100%);
}
@media (max-width: 767px) { .hero::after { height: calc(min(52vh, 440px) + var(--tsb-bottom)); background: linear-gradient(0deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.84) 50%, rgba(5, 5, 6, 0.45) 78%, rgba(5, 5, 6, 0) 100%); } }
.hero-in {
  position: absolute; z-index: 4; left: var(--gutter); right: calc(var(--gutter) + var(--tsb-right));
  bottom: calc(clamp(26px, 6vh, 64px) + var(--tsb-bottom)); will-change: transform, opacity;
}
.hero-rec { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.05em; color: var(--muted); margin-bottom: clamp(10px, 1.8vh, 20px); min-width: 0; }
.hero-rec .rec-dot { animation: rec 1.6s steps(1) infinite; }
.hero-tc { color: var(--text); font-variant-numeric: tabular-nums; }
.hero-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@keyframes rec { 50% { opacity: 0.2; } }
/* one hierarchy: the name is the wordmark; the statement is the second level (≈1/5 of it); one action */
.hero-name { margin: 0; font-size: clamp(52px, 10.4vw, 172px); line-height: 0.9; max-width: 11.5em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35); }
html[data-theme='A'] .hero-name { font-size: clamp(40px, 7.7vw, 132px); line-height: 1.02; letter-spacing: -0.02em; }
.hero-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 48px;
  margin-top: clamp(16px, 2.8vh, 32px); padding-top: clamp(14px, 2.2vh, 24px); border-top: 1px solid var(--line);
}
.hero-copy { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 10px clamp(24px, 3vw, 48px); align-items: start; max-width: 980px; }
.hero-line { font-family: var(--f-display); font-weight: var(--line-w, 400); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(19px, 1.65vw, 27px); line-height: 1.22; margin: 0; max-width: 21ch; }
.hero-sub { margin: 0; max-width: 46ch; color: rgba(244, 242, 237, 0.88); font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.55; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.hero-line { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
/* the slate (timecode + shot) floats over the frame itself: its own dark chip keeps the small mono text ≥ 4.5:1 */
.hero-slate { display: inline-flex; align-items: center; gap: 12px; min-width: 0; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(5, 5, 6, 0.82); color: rgba(244, 242, 237, 0.94); }
.hero-slate .hero-src { color: rgba(244, 242, 237, 0.84); }
.hero-cta { justify-self: end; }
.hero-strip { margin-left: auto; display: flex; gap: 4px; width: min(220px, 18vw); flex: none; }
.hero-strip i { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.22); border-radius: 2px; overflow: hidden; }
.hero-strip b { display: block; height: 100%; background: var(--rec); transform: scaleX(0); transform-origin: 0 50%; }
.hero-strip i.on b { animation: segfill var(--hold, 3s) linear forwards; }
.hero-strip i.done b { transform: scaleX(1); background: rgba(255, 255, 255, 0.7); }
@keyframes segfill { to { transform: scaleX(1); } }

/* ================================================================ 02 WHAT I DO — formation */
.fm { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; height: 700vh; height: 700svh; background: var(--bg); --dir: #a46ee8; }
.fm > .clip-head { position: absolute; left: 0; right: 0; top: -26px; }
.fm-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--stage-bg); }
.fm-stage { position: absolute; inset: 0 var(--tsb-right) var(--tsb-bottom) 0; perspective: var(--persp, 1500px); perspective-origin: 50% 46%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transform-origin: 50% 50%; }
.fm-stage.dragging { cursor: grabbing; }
.fm-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.fm-card {
  position: absolute; left: calc(var(--cw, 220px) * -0.5); top: calc(var(--ch, 275px) * -0.5);
  width: var(--cw, 220px); height: var(--ch, 275px); border-radius: 12px; overflow: hidden;
  background: var(--card-bg); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: var(--card-shadow); cursor: pointer; opacity: 0;
}
.fm-card .media { position: absolute; inset: 0; will-change: transform; }
.fm-card img, .fm-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; max-width: none; }
.fm-card video { opacity: 0; transition: opacity 0.35s ease; }
.fm-card video.on { opacity: 1; }
.fm-card .shade { position: absolute; inset: 0; background: var(--shade); opacity: 0; pointer-events: none; will-change: opacity; }

.fm-seq { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.45s ease; }
.fm-seq.on { opacity: 1; transition-delay: 0.15s; }
.fm-mon { position: absolute; left: 0; top: 0; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-strong); }
.fm-mon-l { position: absolute; left: 0; bottom: 100%; padding-bottom: 8px; display: flex; gap: 14px; font-size: 11px; letter-spacing: 0.12em; color: var(--muted); white-space: nowrap; text-transform: uppercase; }
.fm-mon-l b { color: var(--text); font-weight: 500; }
.fm-mon-l .rec { color: var(--rec); }
.fm-tl { position: absolute; left: 0; right: 0; top: 0; }
.fm-ruler { position: absolute; left: 0; right: 0; height: 20px; overflow: hidden; border-bottom: 1px solid var(--line); }
.fm-ruler i { position: absolute; top: 0; bottom: 0; left: -200px; width: calc(100% + 400px); will-change: transform;
  background-image: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 100px), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 20px);
  background-size: 100% 100%, 100% 7px; background-position: 0 0, 0 100%; background-repeat: no-repeat; }
.fm-tl .lane { position: absolute; left: 0; right: 0; background: color-mix(in oklab, var(--text) 3%, transparent); border-top: 1px solid var(--line); }
.fm-tl .lane span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 10px; color: var(--muted); background: var(--bg); padding: 2px 6px; border-radius: 4px; z-index: 2; }
.fm-tl .ph { position: absolute; width: 2px; margin-left: -1px; top: 0; background: var(--rec); }
.fm-tl .ph::before { content: ''; position: absolute; left: -6px; top: -2px; width: 14px; height: 12px; background: var(--rec); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.fm-ghost { position: absolute; left: 0; top: 0; border-radius: 4px; border: 1px dashed var(--line-strong); will-change: transform; }

.fm-chrome { position: absolute; inset: 0 var(--tsb-right) var(--tsb-bottom) 0; pointer-events: none; z-index: 2; }
.fm-chrome a, .fm-chrome button { pointer-events: auto; }
/* a persistent head: «02 Що я роблю 01/06 · кільце» + the direction as the screen title (same slot as the h2) */
.fm-head { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 230px); top: clamp(70px, 11vh, 118px); --fn: clamp(34px, 4.3vw, 70px); }
.fm-head .kick { margin-bottom: clamp(10px, 1.6vh, 18px); }
.fm-head .kick i { transition: background-color 0.4s; }
.fm-idx { display: inline-flex; gap: 10px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line-strong); color: var(--muted); }
.fm-idx .fm-n { color: var(--text); font-variant-numeric: tabular-nums; }
.fm-idx .fm-form::before { content: '· '; }
.fm-slot { display: grid; }
.fm-slot > * { grid-area: 1 / 1; }
.fm-head .sec-h { margin: 0; will-change: transform, opacity; }
.fm-title { opacity: 0; will-change: transform, opacity; text-shadow: 0 2px 30px color-mix(in oklab, var(--bg) 70%, transparent); }
.fm-name-mask { position: relative; overflow: hidden; height: calc(var(--fn) * 1.2); }
.fm-name { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: var(--fn); line-height: 1.12; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
.fm-name::after { content: ''; display: inline-block; width: 0.26em; height: 0.26em; border-radius: 3px; background: var(--dir); margin-left: 0.28em; vertical-align: 0.14em; transition: background-color 0.4s; }
.fm-cap { position: absolute; left: var(--gutter); bottom: clamp(22px, 5vh, 56px); width: min(540px, 40vw); }
.fm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.fm-more { display: inline-flex; gap: 8px; }
.fm-more:empty { display: none; }
.fm-name.out { transform: translateY(-105%); opacity: 0; }
.fm-name.in { transform: translateY(105%); opacity: 0; transition: none; }
.fm-text { margin: 0 0 16px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--text); max-width: 44ch; }
.fm-rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; }
.fm-rail { transition: top 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.fm.is-seq .fm-rail { top: clamp(84px, 12vh, 120px); transform: none; }
.fm-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; border: 0; background: none; cursor: pointer; padding: 7px 0; min-height: 34px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: right; }
.fm-rail button i { order: 2; width: 18px; height: 8px; border-radius: 2px; background: var(--c); opacity: 0.45; transition: width 0.35s var(--ease-out), opacity 0.3s; }
.fm-rail button span { transition: color 0.3s; }
.fm-rail button[aria-current='true'] { color: var(--text); }
.fm-rail button[aria-current='true'] i { width: 34px; opacity: 1; }
.fm-rail button:hover { color: var(--text); }
.fm-info { position: absolute; right: var(--gutter); bottom: clamp(22px, 5vh, 56px); max-width: 34vw; text-align: right; display: grid; gap: 2px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.fm-info-t { color: var(--text); font-family: var(--f-ui); font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; margin: 0; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: opacity 0.4s; }
.fm-marks { position: absolute; left: 0; top: 0; width: 1px; height: 100%; pointer-events: none; }
.fm-marks i { position: absolute; left: 0; width: 1px; height: 1px; }

/* ================================================================ 03 HOW I WORK — text → timeline */
.proc { position: relative; z-index: 2; background: var(--bg); }
.proc-head { padding-top: clamp(84px, 15vh, 170px); padding-bottom: clamp(8px, 3vh, 32px); }
.proc-lead { color: var(--muted); max-width: 46ch; margin: 0; font-size: clamp(15px, 1.2vw, 18px); }
.proc-t2t { --t2t-inset-right: var(--tsb-right); --t2t-inset-bottom: var(--tsb-bottom); --t2t-inset-top: 52px; }
.proc-t2t .t2t-hint { bottom: calc(22px + var(--tsb-bottom)); margin-left: calc(var(--tsb-right) / -2); }
.proc-t2t .t2t-monitor { --text: #f1efea; --muted: #a3a097; --line-strong: rgba(255, 255, 255, 0.2); }
.proc-toggle { position: absolute; z-index: 6; top: 74px; left: calc((100% - var(--tsb-right)) / 2); transform: translateX(-50%); max-width: calc(100% - 24px); }
.proc-toggle .seg { background: color-mix(in oklab, var(--bg) 90%, transparent); border-color: var(--line-strong); }
.proc-toggle .seg button { font-size: 13.5px; padding: 8px 16px; min-height: 38px; white-space: nowrap; }

/* ================================================================ 04 360 · VR · AR */
.imm { position: relative; z-index: 2; background: var(--bg-2); padding: 0 0 clamp(80px, 14vh, 160px); }
.imm > .clip-head { margin-bottom: clamp(70px, 12vh, 140px); }
.imm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.imm-copy p { max-width: 46ch; font-size: clamp(15px, 1.15vw, 17px); }
.imm-copy .sec-h { font-size: clamp(40px, 6vw, 96px); }
.imm-try { color: var(--muted); font-family: var(--f-mono); font-size: 13px !important; letter-spacing: 0.04em; }
.stage.sphere { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; color: #fff; }
.stage.sphere[data-mode='inside'], .stage.sphere[data-mode='planet'] { cursor: grab; touch-action: none; }
.stage.sphere.dragging { cursor: grabbing; }
.stage.sphere canvas, .s360-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.stage.sphere.is-fs { position: fixed; inset: 0; z-index: 160; max-height: none; aspect-ratio: auto; border-radius: 0; border: 0; height: 100vh; height: 100dvh; }
.stage.sphere:fullscreen { max-height: none; aspect-ratio: auto; border-radius: 0; border: 0; }
.ov { position: absolute; pointer-events: none; transition: opacity 0.35s, transform 0.35s; z-index: 2; }
.ov[hidden] { display: none; }
.ov.off { opacity: 0; }
.enter { inset: auto 0 clamp(16px, 4%, 28px) 0; display: flex; justify-content: center; }
.enter .btn { pointer-events: auto; }
.tag-equi { top: 12px; left: 12px; font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,.8); background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; }
.chip { left: 50%; bottom: clamp(16px, 5%, 32px); transform: translateX(-50%); font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px; white-space: nowrap; background: rgba(11,11,12,.6); border: 1px solid rgba(255,255,255,.18); }
.chip.off { transform: translate(-50%, 8px); }
.compass { left: 12px; bottom: 12px; display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 6px 12px 6px 6px; }
.compass svg { width: 46px; height: 46px; display: block; }
.compass .read { font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.82); min-width: 9.5ch; }
.compass .read b { color: #fff; font-weight: 500; font-size: 13px; }
.tools { top: 12px; right: 12px; display: flex; gap: 8px; }
.ibtn { pointer-events: auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.ibtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ibtn[hidden] { display: none; }
.ibtn[aria-pressed='true'] { background: #fff; color: #000; }
.loading { top: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.85); display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.5); border-radius: 999px; padding: 5px 12px 5px 8px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.imm-ctl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; }
.imm-clips { display: flex; gap: 8px; flex-wrap: wrap; }
.imm-clips .clip { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); min-height: 44px; transition: border-color 0.15s; }
.imm-clips .clip:hover { border-color: var(--line-strong); }
.imm-clips .clip[aria-pressed='true'] { border-color: var(--text); }
.imm-clips .clip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; transition: transform 0.6s; }
.imm-clips .clip:hover img { transform: rotate(-30deg); }
.imm-clips .t { display: block; font-weight: 600; font-size: 13px; line-height: 1.2; }
.imm-clips .s { display: none; }
.imm-credit { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ================================================================ 05 SELECTED WORKS — iris */
.iris.works { position: relative; z-index: 2; height: calc(100vh + var(--steps, 5) * 100vh); height: calc(100svh + var(--steps, 5) * 100svh); background: #000; color: var(--text); }
.iris-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #050506; }
.iris-sticky::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 2; pointer-events: none; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); }
.iris-sticky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 2; pointer-events: none; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7)); }
.iris-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iris-media { position: absolute; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.iris-media video { width: 2px; height: 2px; }
.iris-fallback { position: absolute; inset: 0; }
.iris-fallback > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.works-top { position: absolute; z-index: 3; left: var(--gutter); top: clamp(76px, 11vh, 120px); }
.works-h { font-size: clamp(34px, 4.6vw, 72px); margin: 0; }
.iris-title { position: absolute; z-index: 3; left: var(--gutter); right: calc(var(--gutter) + var(--tsb-right) + 40px); bottom: calc(clamp(30px, 8vh, 90px) + var(--tsb-bottom)); pointer-events: none; }
.iris-title .in { will-change: opacity, transform; }
.iris-idx { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 12px; }
.iris-name { margin: 0; max-width: 18ch; font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(28px, 4.6vw, 72px); line-height: 1.04; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.iris-meta { margin-top: 12px; font-size: 14px; color: var(--muted); }
.iris-rail { position: absolute; z-index: 3; right: calc(var(--tsb-right) + 12px); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; }
.iris-rail button { width: 32px; height: 32px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.iris-rail button i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.65); transition: background-color 0.25s, transform 0.25s; }
.iris-rail button[aria-current='true'] i { background: #fff; transform: scale(1.3); }
.works-hook { position: absolute; z-index: 3; right: calc(var(--gutter) + var(--tsb-right)); bottom: calc(clamp(30px, 8vh, 90px) + var(--tsb-bottom)); }
.iris-hint { position: absolute; z-index: 3; left: 50%; bottom: calc(16px + var(--tsb-bottom)); transform: translateX(-50%); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: opacity 0.4s; pointer-events: none; }

/* ================================================================ 06 LAB */
.lab { position: relative; z-index: 2; background: var(--bg); padding-bottom: clamp(70px, 12vh, 140px); }
.lab > .clip-head { margin-bottom: clamp(70px, 12vh, 140px); }
.lab-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 0 clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 5vh, 56px); }
.lab-head .kick { grid-column: 1 / -1; }
.lab-head .sec-h { margin: 0; }
.lab-lead { margin: 0 0 8px; color: var(--muted); max-width: 40ch; font-size: clamp(15px, 1.15vw, 17px); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(14px, 2vw, 24px); align-items: start; }
.lab-card { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); transition: transform 0.45s var(--ease-out), border-color 0.3s; }
.lab-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.lab-pf { margin-top: clamp(0px, 8vw, 110px); }
.lab-prev { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.lab-pf .lab-prev { aspect-ratio: 4 / 3; }
.lab-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.lab-ar .lab-prev img { animation: kb 14s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-2%, 1%, 0); } }
.pf-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s; }
.lab-pf.live .pf-gl { opacity: 1; }
.pf-tag { position: absolute; left: 12px; top: 12px; font-size: 10.5px; letter-spacing: 0.1em; color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; padding: 4px 9px; }
.ar-hud { position: absolute; inset: 0; color: #8ff3ff; font-size: 10.5px; letter-spacing: 0.06em; }
.ar-c { position: absolute; width: 22px; height: 22px; border: 2px solid currentColor; opacity: 0.85; }
.ar-c.tl { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
.ar-c.tr { right: 14px; top: 14px; border-left: 0; border-bottom: 0; }
.ar-c.bl { left: 14px; bottom: 14px; border-right: 0; border-top: 0; }
.ar-c.br { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.ar-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(143, 243, 255, 0.9), transparent); box-shadow: 0 0 18px rgba(143, 243, 255, 0.7); animation: scan 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes scan { 0% { transform: translateY(0); } 50% { transform: translateY(var(--scan-h, 300px)); } 100% { transform: translateY(0); } }
.lab-ar .lab-prev { --scan-h: calc(min(100vw, 760px) * 0.5); }
.ar-read { position: absolute; right: 44px; top: 18px; text-align: right; line-height: 1.5; text-shadow: 0 0 8px rgba(0,0,0,.8); }
.ar-read b { font-weight: 500; }
.lab-body { padding: clamp(18px, 2vw, 26px); display: grid; gap: 8px; }
.lab-body h3 { margin: 0; font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(22px, 2vw, 30px); }
.lab-body p { margin: 0 0 6px; color: var(--muted); max-width: 48ch; }
.lab-body .link-arrow { justify-self: start; }

/* ================================================================ 07 CONSULTING */
.learn { position: relative; z-index: 2; background: var(--bg-2); padding-bottom: clamp(80px, 14vh, 160px); }
.learn > .clip-head { margin-bottom: clamp(70px, 12vh, 140px); }
.learn-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(18px, 4vh, 40px); align-items: start; }
.learn h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(22px, 2vw, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.learn p { max-width: 48ch; }
.learn-free p { font-size: clamp(16px, 1.3vw, 19px); margin: 0 0 24px; }
.tag { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; line-height: 1.2; }
.learn-free .tag { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tracks { list-style: none; padding: 0; margin: 18px 0 18px; display: grid; gap: 6px; }
.tracks li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px; }
.tracks .tr { display: grid; place-items: center; font-size: 11px; color: var(--muted); background: var(--surface); border-radius: 6px; }
.tracks .clip { width: max(var(--w), min(100%, 300px)); display: grid; gap: 2px; padding: 11px 14px; border-radius: 6px; border-left: 3px solid var(--c); background: color-mix(in oklab, var(--c) 20%, var(--surface)); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out); }
.tracks .clip b { font-weight: 650; }
.tracks .clip span { color: var(--muted); font-size: 14px; }
.js .tracks:not(.in) .clip { transform: scaleX(0.04); }
.tracks li:nth-child(2) .clip { transition-delay: 0.08s; }
.tracks li:nth-child(3) .clip { transition-delay: 0.16s; }
.tracks li:nth-child(4) .clip { transition-delay: 0.24s; }
.learn-note { color: var(--muted); font-size: 14px; }

/* ================================================================ 08 ABOUT */
.about { position: relative; z-index: 2; background: var(--bg); padding-bottom: clamp(50px, 8vh, 100px); overflow: hidden; }
.about > .clip-head { margin-bottom: clamp(70px, 12vh, 140px); }
.about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.about .sec-h { font-size: clamp(38px, 5vw, 80px); }
.about-copy p { font-size: clamp(16px, 1.25vw, 19px); max-width: 50ch; }
.collage { position: relative; aspect-ratio: 5 / 5.4; }
.cl-f { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; transform: rotate(var(--r)); border-radius: 10px; overflow: hidden; background: #000; box-shadow: var(--card-shadow); will-change: transform; }
.cl-f img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cl-f figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; font-size: 10px; color: #fff; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; }
.marquee { margin-top: clamp(56px, 10vh, 120px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(14px, 2vh, 22px) 0; display: grid; gap: clamp(8px, 1.4vh, 14px); overflow: hidden; }
.mq-row { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: mq 60s linear infinite; will-change: transform; }
.mq-rev { animation-direction: reverse; animation-duration: 72s; }
.mq-row li { white-space: nowrap; font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(24px, 3.2vw, 48px); line-height: 1.15; display: flex; align-items: center; }
.mq-row li::after { content: ''; width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--rec); margin: 0 0.9em; }
.mq-rev li { color: var(--muted); }
.marquee.paused .mq-row, .marquee.still .mq-row { animation-play-state: paused; }
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }

/* ================================================================ 09 CONTACT */
.contact { position: relative; z-index: 2; background: var(--bg-2); padding-bottom: clamp(80px, 12vh, 140px); }
.contact > .clip-head { margin-bottom: clamp(70px, 12vh, 140px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.contact-h { font-size: clamp(52px, 6.4vw, 112px); margin-bottom: 18px; }
.contact-lead { font-size: clamp(17px, 1.5vw, 22px); margin: 0 0 30px; color: var(--muted); }
.channels { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.channels a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color 0.2s, background-color 0.2s; }
.channels a:hover { border-color: var(--text); }
.brief-card { display: grid; gap: 8px; padding: clamp(20px, 2.2vw, 28px); border-radius: 18px; text-decoration: none; background: var(--surface); border: 1px solid var(--line-strong); transition: transform 0.45s var(--ease-out); }
.brief-card:hover { transform: translateY(-3px); }
.brief-card .kick { margin: 0; }
.brief-card b { font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.brief-card > span:not(.kick):not(.link-arrow) { color: var(--muted); }
.brief-card .link-arrow { justify-self: start; margin-top: 6px; }
.quick { margin-top: 14px; padding: clamp(20px, 2.2vw, 28px); border-radius: 18px; border: 1px solid var(--line); display: grid; gap: 12px; }
.quick-h { margin: 0; font-weight: 700; }
.quick label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.quick input { min-height: 46px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); padding: 0 12px; font: inherit; font-size: 16px; }
.quick input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
.quick-err { margin: 0; color: var(--rec); font-size: 14px; }
.quick-ok { margin: 0; font-size: 12.5px; color: var(--muted); }
.quick .btn { justify-self: start; }

/* ================================================================ FOOTER */
.foot { position: relative; z-index: 2; background: var(--bg); padding: clamp(28px, 6vh, 64px) 0 calc(28px + var(--tsb-bottom)); border-top: 1px solid var(--line); overflow: hidden; }
.foot-word { padding: 0 calc(var(--gutter) + var(--tsb-right)) 0 var(--gutter); font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); letter-spacing: var(--display-ls); font-size: clamp(40px, 9.6vw, 170px); line-height: 0.95; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--line-strong); margin-bottom: clamp(18px, 3vh, 32px); }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13px; color: var(--muted); }
.foot-row a { color: var(--muted); }
.foot-row a:hover { color: var(--text); }

/* ================================================================ phone */
@media (max-width: 767px) {
  /* phone hero: its own composition — the name on top of the frame's lower third, statement, then the action */
  .hero-in { bottom: calc(20px + var(--tsb-bottom)); }
  .hero-strip { display: none; }
  .hero-rec { font-size: 11px; }
  .hero-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-line { font-size: 19px; }
  .hero-sub { font-size: 14.5px; }
  .hero-cta { justify-self: start; }
  .fm-head { top: 58px; right: var(--gutter); --fn: clamp(24px, 7.2vw, 36px); }
  .fm-head .sec-h { font-size: clamp(36px, 10.5vw, 54px); }
  .fm-head .kick { font-size: 10.5px; gap: 7px; letter-spacing: 0.06em; white-space: nowrap; }
  .fm-idx { margin-left: 2px; padding-left: 9px; gap: 6px; }
  .fm-hook { font-size: 14.5px; }
  .fm-cap { left: var(--gutter); right: var(--gutter); width: auto; bottom: 16px; }
  .fm-text { font-size: 14.5px; margin: 0 0 12px; }
  .fm-rail, .fm.is-seq .fm-rail { display: none; }
  .fm-info, .fm-hint { display: none; }
  .proc-toggle { top: 56px; }
  .proc-toggle .seg button { font-size: 12px; padding: 7px 10px; min-height: 36px; }
  .proc-t2t { --t2t-inset-top: 40px; }
  .imm-grid, .lab-grid, .learn-grid, .about-grid, .contact-grid, .lab-head { grid-template-columns: minmax(0, 1fr); }
  .stage.sphere { aspect-ratio: 4 / 5; max-height: 70svh; }
  .compass .read { display: none; }
  .compass { padding: 5px; }
  .imm-ctl { flex-direction: column; align-items: stretch; }
  .imm-ctl .seg { align-self: flex-start; }
  .lab-pf { margin-top: 0; }
  .ar-read { right: 40px; }
  .works-top { top: 64px; }
  .iris-name { font-size: clamp(26px, 8vw, 38px); }
  .works-hook { left: var(--gutter); right: auto; bottom: calc(14px + var(--tsb-bottom)); }
  .iris-title { bottom: calc(64px + var(--tsb-bottom)); right: 48px; }
  .iris-hint { display: none; }
  .collage { order: 2; }
  .channels a { padding: 0 14px; }
  .btn-xl { min-height: 56px; font-size: 17px; width: 100%; }
  .clip-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layer, .hero-layer.on, .hero-layer.leave { transition: opacity 0.6s linear; transform: none !important; }
  .lab-ar .lab-prev img, .ar-scan, .hero-rec .rec-dot, .spin { animation: none; }
  .tracks .clip { transition: none; }
  .js .tracks:not(.in) .clip { transform: none; }
}

/* reserve the scroll length of the lazy text→timeline before it mounts (same as t2t.css) */
.proc-t2t { height: 560vh; }
@media (max-width: 767px) { .proc-t2t { height: 520vh; } }
@media (prefers-reduced-motion: reduce) { .proc-t2t { height: 360vh; } }
/* short screens (landscape phones, small laptop windows): the hero copy must fit */
@media (max-height: 620px) {
  .hero-name { font-size: clamp(40px, 13vh, 120px); }
  .hero-sub { display: none; }
  .hero-tag { margin: 10px 0 14px; }
}

/* ================================================================ v1 additions */
/* about: frames in depth; the one under the cursor comes forward and plays */
.cl-f { transition: box-shadow 0.4s; }
.cl-f.hot { z-index: 5; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.14); }
.cl-f video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0; transition: opacity 0.35s; }
.cl-f video.on { opacity: 1; }
.cl-f figcaption { z-index: 1; }
/* marquee: stops under the cursor, the brand you point at lights up */
.marquee.hovered .mq-row { animation-play-state: paused; }
.mq-row li { transition: color 0.25s; }
.marquee.hovered .mq-row li { color: var(--muted); }
.marquee.hovered .mq-row li:hover { color: var(--text); }
/* footer: the wordmark fits the width (JS sets the size; this is the no-JS fallback) */
.foot-word { font-size: clamp(32px, 8.2vw, 150px); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: clamp(18px, 3vh, 30px); padding-bottom: clamp(16px, 2.6vh, 26px); border-bottom: 1px solid var(--line); }
.foot-nav a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; }
.foot-nav a:hover { color: var(--accent); }
html[data-theme='A'] .foot-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .foot-nav { gap: 2px 18px; } .foot-nav a { font-size: 14.5px; } }

/* Unbounded is a wide display face — the heads get their own scale */
html[data-theme='A'] .sec-h { font-size: clamp(34px, 5vw, 76px); letter-spacing: -0.02em; line-height: 1.04; }
html[data-theme='A'] .imm-copy .sec-h { font-size: clamp(34px, 4.4vw, 68px); }
html[data-theme='A'] .contact-h { font-size: clamp(40px, 5vw, 76px); }
html[data-theme='A'] .about .sec-h { font-size: clamp(34px, 4.2vw, 64px); }
html[data-theme='A'] .works-h { font-size: clamp(30px, 3.6vw, 56px); }
html[data-theme='A'] .fm-head { --fn: clamp(28px, 3.3vw, 52px); }
html[data-theme='A'] .iris-name { font-size: clamp(26px, 3.8vw, 60px); }
@media (max-width: 767px) {
  html[data-theme='A'] .fm-head { --fn: clamp(20px, 6.2vw, 30px); }
  html[data-theme='A'] .sec-h, html[data-theme='A'] .contact-h, html[data-theme='A'] .imm-copy .sec-h, html[data-theme='A'] .about .sec-h { font-size: clamp(27px, 9.2vw, 44px); }
  html[data-theme='A'] .fm-head .sec-h { font-size: clamp(27px, 8.6vw, 44px); }
  html[data-theme='A'] .hero-name { font-size: clamp(30px, 10.6vw, 52px); }
}

/* «Що я роблю»: the stage light takes the colour of the direction (the same chip as in the title and the rail) */
@property --dir { syntax: '<color>'; inherits: true; initial-value: #a46ee8; }
.fm { transition: --dir 0.9s ease; }
.fm-sticky::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 56% 50%, color-mix(in oklab, var(--dir) 15%, transparent) 0%, transparent 72%);
}
@media (max-width: 767px) { .fm-sticky::before { background: radial-gradient(90% 40% at 50% 46%, color-mix(in oklab, var(--dir) 16%, transparent) 0%, transparent 75%); } }
@media (prefers-reduced-motion: reduce) { .fm { transition: none; } }
/* tablets / small laptops: the statement and its subline stack, the action stays on the right */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fm-head { right: calc(var(--gutter) + 190px); }
}
@media (max-width: 400px) { .fm-idx .fm-form { display: none; } }