/* Tline — визуальный эксперимент «портал во времени». Цвет эпохи (--c1, --c2) меняет сценарий по прокрутке:
   прошлое — янтарь, настоящее — фирменный зелёный Tline (#3AD531, Pantone 802 C), будущее — бирюза и фиолет. */
@font-face { font-family: 'Unbounded'; font-weight: 400; font-display: swap; src: url(fonts/unbounded-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 400; font-display: swap; src: url(fonts/unbounded-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+221E; }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap; src: url(fonts/unbounded-cyrillic-800-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap; src: url(fonts/unbounded-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+221E; }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+221E; }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/manrope-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+221E; }

:root {
  --bg: #04060a;
  --ink: #eaf6ee;
  --muted: rgba(234, 246, 238, 0.62);
  --line: rgba(234, 246, 238, 0.14);
  --c1: #3ad531;
  --c2: #14f1c5;
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --text: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --pad: clamp(18px, 4vw, 64px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--text); overflow-x: clip; }
/* тени под заголовками и кольца шире экрана: на телефоне без обрезки страница ездила бы вбок */
main { overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--c1); color: #000; }

/* сцена: портал WebGL и шлейф курсора — под всем, зерно плёнки — поверх */
#portal, #trail { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#portal { z-index: 0; }
#trail { z-index: 30; pointer-events: none; }
.grain { position: fixed; inset: -50%; z-index: 31; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.8s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); } }
.flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fff 0%, var(--c2) 18%, transparent 60%); mix-blend-mode: screen; }

/* курсор: кольцо и точка; на сенсорных экранах — обычный */
.cursor { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; mix-blend-mode: screen; }
.cursor i, .cursor b { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor i { width: 38px; height: 38px; border: 1.5px solid var(--c1); box-shadow: 0 0 18px var(--c1), inset 0 0 12px var(--c1); transition: width .25s, height .25s, border-color .4s; }
.cursor b { width: 5px; height: 5px; background: #fff; box-shadow: 0 0 10px var(--c2); }
.cursor.is-hot i { width: 74px; height: 74px; border-color: var(--c2); }
@media (hover: none), (pointer: coarse) { .cursor, #trail { display: none; } }
@media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } }

/* HUD: логотип, эпохи, часы портала, звук */
.hud { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 18px var(--pad);
  background: linear-gradient(rgba(4, 6, 10, .78), rgba(4, 6, 10, 0)); }
.hud__logo { display: flex; width: 112px; color: var(--c1); filter: drop-shadow(0 0 10px var(--c1)); transition: color .6s; }
.hud__logo svg, .foot__logo svg { width: 100%; height: auto; }
.hud__nav { display: flex; gap: 6px; margin-left: auto; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(4, 6, 10, .5); backdrop-filter: blur(10px); }
.hud__nav a { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--muted); transition: color .3s, background .3s; }
.hud__nav a:hover { color: var(--ink); }
.hud__nav a[aria-current] { color: #000; background: var(--c1); box-shadow: 0 0 22px var(--c1); }
.hud__clock { display: flex; flex-direction: column; align-items: flex-end; font: 600 15px/1.1 var(--display); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--c1); text-shadow: 0 0 12px var(--c1); min-width: 150px; }
.hud__clock small { font: 600 10px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-shadow: none; }
.hud__sound { display: flex; align-items: flex-end; gap: 3px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(4, 6, 10, .5); }
.hud__sound i { width: 3px; height: 6px; border-radius: 2px; background: var(--muted); margin-bottom: 13px; }
.hud__sound span { margin: 0 0 9px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.hud__sound[aria-pressed='true'] i { background: var(--c1); animation: eq .9s ease-in-out infinite alternate; }
.hud__sound[aria-pressed='true'] i:nth-child(2) { animation-delay: -.3s; } .hud__sound[aria-pressed='true'] i:nth-child(3) { animation-delay: -.6s; } .hud__sound[aria-pressed='true'] i:nth-child(4) { animation-delay: -.15s; }
.hud__sound[aria-pressed='true'] span { color: var(--ink); }
@keyframes eq { from { height: 4px; } to { height: 16px; } }

/* шкала времени справа: где вы на линии — прошлое внизу, будущее вверху */
.rail { position: fixed; right: calc(var(--pad) * .55); top: 22vh; bottom: 14vh; z-index: 10; width: 2px; pointer-events: none; }
.rail__track { position: absolute; inset: 0; background: linear-gradient(#3ad531, #ffb13b 55%, #26e0ff 85%, #8b5cff); opacity: .6; border-radius: 2px; }
.rail__marker { position: absolute; left: 50%; top: var(--p, 0%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c1); box-shadow: 0 0 16px var(--c1); }
.rail__marker b { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 800 12px/1 var(--display); color: var(--c1); white-space: nowrap; text-shadow: 0 0 10px var(--c1); }
.rail__label { position: absolute; right: 14px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); }
/* порядок путешествия по странице: настоящее (сверху) → прошлое → будущее */
.rail__label--now { top: 0; } .rail__label--past { top: 52%; } .rail__label--future { bottom: 0; }
@media (max-width: 900px) { .rail { display: none; } }

main, .foot { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 14px; font: 600 12px/1.3 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--c1); text-shadow: 0 0 14px var(--c1); }
.muted { color: var(--muted); }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
h2 { font-size: clamp(30px, 5vw, 68px); }
.sec-head { position: relative; z-index: 2; max-width: 760px; padding: 0 var(--pad); }
/* мягкая тень под текстом: свет портала не съедает буквы */
.sec-head::before, .hero__inner::before, .future__text::before { content: ''; position: absolute; inset: -18% -12%; z-index: -1; background: radial-gradient(closest-side, rgba(4, 6, 10, .72), rgba(4, 6, 10, 0)); pointer-events: none; }
.sec-head .muted { max-width: 560px; margin: 18px 0 0; font-size: 17px; }
.sec-head--center { margin: 0 auto; text-align: center; }
.sec-head--center .muted { margin-left: auto; margin-right: auto; }
.scr { color: var(--c2); text-shadow: 0 0 18px var(--c2); }

/* первый экран: кольца-циферблат со знаком, заголовок и прыжок */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--pad) 90px; text-align: center; }
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.dialring { position: relative; width: clamp(190px, 21vw, 290px); aspect-ratio: 1; margin-bottom: 22px; }
.dialring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* вращение — вокруг собственного центра кольца, а не угла холста SVG */
.dialring circle, .dialring .ticks { transform-box: fill-box; transform-origin: center; }
.dialring circle { fill: none; stroke: var(--c1); }
.dialring .r1 { stroke-width: 1; stroke-dasharray: 2 8; opacity: .8; animation: spin 40s linear infinite; }
.dialring .r2 { stroke-width: 2; stroke-dasharray: 120 40 20 40; opacity: .9; filter: drop-shadow(0 0 6px var(--c1)); animation: spin 14s linear infinite reverse; }
.dialring .r3 { stroke: var(--c2); stroke-width: 1; stroke-dasharray: 1 5; opacity: .7; animation: spin 24s linear infinite; }
.dialring .r4 { stroke-width: 6; stroke-dasharray: 3 14; opacity: .5; animation: spin 60s linear infinite reverse; }
.dialring .ticks line { stroke: var(--c1); stroke-width: 1.5; opacity: .75; }
.dialring .ticks line.big { stroke-width: 3; opacity: 1; }
.dialring .ticks { animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dialring__mark { position: absolute; inset: 27%; display: grid; place-items: center; color: var(--c1); filter: drop-shadow(0 0 18px var(--c1)) drop-shadow(0 0 40px var(--c1)); animation: float 6s ease-in-out infinite; }
.dialring__mark svg { width: 100%; height: auto; }
@keyframes float { 50% { transform: translateY(-8px) rotate(2deg); } }
.hero__title { font-size: clamp(32px, 6vw, 96px); text-transform: uppercase; background: linear-gradient(180deg, #fff 30%, var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(58, 213, 49, .35)); }
.hero__lead { max-width: 560px; margin: 22px auto 0; font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.hero__hint { position: absolute; bottom: 26px; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hero__hint i { width: 22px; height: 36px; border: 1.5px solid var(--muted); border-radius: 12px; position: relative; }
.hero__hint i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--c1); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* кнопки: «прыжок» — светящаяся капсула с бегущим кольцом */
.jump { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--c1); color: #021003; font: 800 15px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 0 40px var(--c1), 0 0 90px -10px var(--c1); overflow: hidden; isolation: isolate; transition: transform .25s, box-shadow .25s; }
.jump::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 70%, #fff 80%, transparent 90%); animation: spin 2.4s linear infinite; opacity: .7; }
.jump::after { content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: var(--c1); }
.jump i { width: 12px; height: 12px; border-radius: 50%; background: #021003; box-shadow: 0 0 0 4px rgba(2, 16, 3, .25); }
.jump:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 0 60px var(--c1), 0 0 140px -10px var(--c2); }
.ghost { display: inline-flex; align-items: center; min-height: 58px; padding: 0 26px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; text-decoration: none; background: rgba(4, 6, 10, .4); backdrop-filter: blur(8px); transition: border-color .3s, color .3s; }
.ghost:hover { border-color: var(--c1); color: var(--c1); }

/* манифест: слова загораются по прокрутке */
.manifest { position: relative; padding: 18vh var(--pad); max-width: 1180px; margin: 0 auto; }
.manifest__text { margin: 0; font: 800 clamp(26px, 4.2vw, 60px)/1.15 var(--display); letter-spacing: -.02em; }
.manifest__text span { opacity: .14; transition: opacity .2s, color .2s; }
.manifest__text span.on { opacity: 1; }
.manifest__text span.hot { color: var(--c1); text-shadow: 0 0 22px var(--c1); }
.counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 9vh; }
.counters div { padding: 22px 0 0; border-top: 1px solid var(--line); }
.counters b { display: block; font: 800 clamp(48px, 7vw, 104px)/1 var(--display); color: var(--c1); text-shadow: 0 0 30px var(--c1); }
.counters span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }

/* «Настоящее»: лента артефактов, едет вбок при прокрутке */
.now { position: relative; }
.now__pin { min-height: 100svh; display: flex; align-items: center; padding: 96px 0 40px; overflow: hidden; }
.ribbon { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding: 2vh var(--pad); width: max-content; will-change: transform; }
/* заголовок — первый кадр ленты */
.ribbon__intro { flex: none; width: clamp(300px, 34vw, 520px); padding: 0 2vw 0 0; }
.ribbon__intro h2 { font-size: clamp(30px, 3.6vw, 56px); }
.artifact { position: relative; flex: none; width: clamp(250px, 23vw, 350px); perspective: 900px; transform: perspective(1400px) rotateY(calc(var(--ry, 0deg) + (1 - var(--in, 1)) * -40deg)) translateZ(calc(var(--tz, 0px) + (1 - var(--in, 1)) * -520px)) scale(calc(.55 + .45 * var(--in, 1))); opacity: calc(var(--op, 1) * var(--in, 1)); }
/* --in — появление из глубины портала (0 → 1), --ry/--tz/--op — разворот «барабаном» в кадре; у каждого свой источник, они не спорят */
.artifact__stage { position: relative; aspect-ratio: 1 / .92; display: grid; place-items: center; transform-style: preserve-3d; transition: transform .25s ease-out; }
.artifact__portal { position: absolute; inset: 6% 6% 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 213, 49, .28), transparent 62%); box-shadow: 0 0 0 1px rgba(58, 213, 49, .25) inset; transform: translateZ(-60px); }
.artifact__portal::before, .artifact__portal::after { content: ''; position: absolute; inset: -4%; border-radius: 50%; border: 1px dashed var(--c1); opacity: .6; animation: spin 18s linear infinite; }
.artifact__portal::after { inset: 8%; border-style: solid; border-color: transparent var(--c2) transparent var(--c1); opacity: .8; animation-duration: 6s; animation-direction: reverse; }
.artifact__img { position: relative; width: 78%; height: 78%; object-fit: contain; transform: translateZ(50px); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(58, 213, 49, .25)); animation: hover 5s ease-in-out infinite; }
.artifact:nth-child(2n) .artifact__img { animation-delay: -1.7s; } .artifact:nth-child(3n) .artifact__img { animation-delay: -3.1s; }
@keyframes hover { 50% { transform: translateZ(50px) translateY(-14px); } }
.artifact__floor { position: absolute; left: 18%; right: 18%; bottom: 7%; height: 18px; border-radius: 50%; background: radial-gradient(var(--c1), transparent 70%); filter: blur(6px); opacity: .55; transform: translateZ(-20px) rotateX(70deg); }
.artifact__scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 0 46%, rgba(58, 213, 49, .22) 50%, transparent 54% 100%); background-size: 100% 260%; mix-blend-mode: screen; animation: scan 3.6s linear infinite; opacity: 0; transition: opacity .3s; }
.artifact:hover .artifact__scan { opacity: 1; }
@keyframes scan { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
.artifact__body { position: relative; padding: 4px 6px 0; }
.artifact__type { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c1); }
.artifact__name { margin: 6px 0 2px; font: 800 clamp(26px, 2.4vw, 36px)/1.05 var(--display); text-transform: uppercase; }
.artifact__ru { font-size: 14px; color: var(--muted); }
.artifact__hud { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.artifact__hud li { position: relative; padding-left: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.artifact__hud li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--c1); box-shadow: 0 0 6px var(--c1); }
.artifact__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.price { font: 800 22px/1 var(--display); color: var(--ink); white-space: nowrap; }
.buy { display: flex; gap: 8px; }
.buy a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .3s, color .3s, box-shadow .3s; }
.buy a:hover { border-color: var(--c1); color: var(--c1); box-shadow: 0 0 18px -4px var(--c1); }

/* хронодиск: модели по кругу, в центре — выбранная */
.dial { position: relative; padding: 16vh 0 14vh; }
.chrono { position: relative; width: min(860px, 92vw); aspect-ratio: 1; margin: 6vh auto 0; touch-action: pan-y; user-select: none; outline: none; border-radius: 50%; }
.chrono:focus-visible { outline: 2px solid var(--c1); outline-offset: 6px; }
.chrono__disc { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.chrono__disc::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--line);
  background: repeating-conic-gradient(from 0deg, rgba(234, 246, 238, .22) 0 .4deg, transparent .4deg 6deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); }
.chrono__disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(234, 246, 238, .12); }
/* кольца — украшение: лежат поверх моделей и иначе перехватывают нажатия */
.chrono__disc::before, .chrono__disc::after { pointer-events: none; }
.chrono__item { position: absolute; left: 50%; top: 50%; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -5.5%; padding: 0; border: 0; background: none; border-radius: 50%; }
.chrono__item img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px var(--glow, #3ad531)); transition: transform .3s, filter .3s; }
.chrono__item[data-era='past'] { --glow: #ffb13b; }
.chrono__item[data-era='past'] img { filter: sepia(.7) saturate(1.4) hue-rotate(-12deg) drop-shadow(0 0 10px #ffb13b); }
.chrono__item[aria-current] img { transform: scale(1.35); }
.chrono__core { position: absolute; z-index: 2; inset: 26%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 6, 10, .92) 55%, rgba(4, 6, 10, .2)); box-shadow: 0 0 0 1px var(--line), 0 0 80px -20px var(--c1) inset; padding: 6%; }
.chrono__core img { width: 58%; height: 46%; object-fit: contain; filter: drop-shadow(0 0 24px var(--c1)); }
.chrono__core .era { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c1); }
.chrono__core b { display: block; margin-top: 4px; font: 800 clamp(18px, 2.4vw, 30px)/1.1 var(--display); text-transform: uppercase; }
.chrono__core span { font-size: 13px; color: var(--muted); }
/* стрелки — под центром: видны вокруг выбранной модели, а не поверх неё */
.chrono__hands { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.chrono__hands line { stroke: var(--c1); stroke-linecap: round; opacity: .35; }
.chrono__hands .h { stroke-width: 3; } .chrono__hands .m { stroke-width: 2; } .chrono__hands .s { stroke: var(--c2); stroke-width: 1; opacity: .7; }
.chrono__hands circle { fill: var(--c1); }

/* «Прошлое»: капсула времени — сепия и мерцание старой плёнки; наведение возвращает цвет */
.past { position: relative; padding: 16vh 0 12vh; }
.capsule { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 18px; padding: 6vh var(--pad) 0; }
.relic { position: relative; padding: 18px 16px 16px; border: 1px solid rgba(255, 177, 59, .18); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 177, 59, .07), rgba(4, 6, 10, .6)); overflow: hidden; transition: border-color .4s, transform .4s; }
.relic img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: sepia(1) saturate(.8) contrast(1.1) brightness(.8); animation: flicker 4s steps(1) infinite; transition: filter .5s; }
.relic:nth-child(3n) img { animation-delay: -1.3s; } .relic:nth-child(4n) img { animation-delay: -2.6s; }
@keyframes flicker { 0%, 100% { opacity: .9; } 7% { opacity: .55; } 8% { opacity: .95; } 41% { opacity: .75; } 42% { opacity: .92; } }
.relic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); }
.relic b { display: block; margin-top: 10px; font: 800 18px/1.15 var(--display); text-transform: uppercase; color: #ffd9a0; }
.relic span { display: block; font-size: 13px; color: rgba(255, 217, 160, .6); }
.relic:hover { border-color: rgba(58, 213, 49, .6); transform: translateY(-4px); }
.relic:hover img { filter: none; animation: none; }
.relic:hover b { color: var(--ink); text-shadow: -2px 0 #ff2f6d, 2px 0 #26e0ff; }

/* «Будущее»: открытый портал и силуэты моделей, которых ещё нет */
.future { position: relative; min-height: 120svh; display: grid; place-items: center; padding: 14vh var(--pad); overflow: hidden; text-align: center; }
.future__portal { position: absolute; left: 50%; top: 50%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
.future__portal > i { position: absolute; inset: 0; border-radius: 50%; }
.future__portal > i:nth-child(1) { background: conic-gradient(from 0deg, var(--c1), var(--c2), #8b5cff, var(--c1)); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 57%, transparent 58%); mask: radial-gradient(circle, transparent 54%, #000 55%, #000 57%, transparent 58%); filter: blur(1px) drop-shadow(0 0 30px var(--c2)); animation: spin 9s linear infinite; }
.future__portal > i:nth-child(2) { inset: 12%; background: conic-gradient(from 90deg, transparent, var(--c2), transparent 30%, #8b5cff, transparent 60%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 62%, transparent 63%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 62%, transparent 63%); animation: spin 5s linear infinite reverse; }
.future__portal > i:nth-child(3) { inset: 28%; background: radial-gradient(circle, rgba(139, 92, 255, .35), rgba(38, 224, 255, .12) 45%, transparent 70%); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .7; } }
.future__ghosts { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.future__ghosts img { position: absolute; width: 16%; filter: blur(3px) brightness(.3) drop-shadow(0 0 30px #8b5cff); opacity: .8; }
.future__text { position: relative; z-index: 2; max-width: 760px; }
.future__lead { min-height: 3.4em; margin: 22px auto 34px; font-size: clamp(17px, 1.6vw, 22px); color: var(--ink); }
.future__lead::after { content: '▍'; color: var(--c2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.jump--future { background: linear-gradient(90deg, var(--c2), #8b5cff); color: #050314; }
.jump--future::after { background: linear-gradient(90deg, var(--c2), #8b5cff); }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 40px var(--pad) 50px; border-top: 1px solid var(--line); background: rgba(4, 6, 10, .85); font-size: 14px; }
.foot__logo { width: 92px; color: var(--c1); }
.foot p { margin: 0; }
.foot .muted { margin-left: auto; }

/* телефон: лента — столбиком, HUD — компактный */
@media (max-width: 760px) {
  .hud { gap: 12px; padding: 12px 16px; }
  .hud__nav { display: none; }
  .hud__clock { margin-left: auto; min-width: 0; font-size: 13px; }
  .hud__sound span { display: none; }
  .now__pin { padding-top: 90px; }
  .ribbon { flex-direction: column; align-items: stretch; width: auto; }
  .ribbon__intro { width: auto; padding: 0; }
  .artifact { width: 100%; }
  .counters { grid-template-columns: 1fr; }
  .chrono__item { width: 15%; margin: -7.5% 0 0 -7.5%; }
  .chrono__core { inset: 22%; }
  .foot .muted { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cursor, #trail { display: none; }
  body, a, button { cursor: auto; }
  /* лента не едет вбок — карточки переносятся рядами, все видны */
  .now__pin { overflow: visible; }
  .ribbon { flex-wrap: wrap; justify-content: center; width: auto; }
}