/* Анимированный слой сайта 67МОТО.
   Приёмы взяты из библиотеки MotionSites и переложены на бренд:
   «Gold Standard» — вордмарк вырезан в чёрной плашке, сквозь буквы идёт фото, буквы открываются слева направо;
   «Cordex» — сцена, которую прокручивает скролл (мотоциклист едет через Смоленск, BSE, LEATT, 67МОТО).
   Без JavaScript всё видно статично; при «уменьшить движение» анимации выключены. */
:root{
  --teal:#22a8a8; --teal-2:#5fd0cc; --teal-d:#0f3b3d;
  --gold-1:#efe2cc; --gold-2:#d8c3a4; --gold-3:#a8906e;
  --top-h:92px;
  --expo:cubic-bezier(.16,1,.3,1); --quart:cubic-bezier(.76,0,.24,1);
}
@media (max-width:560px){:root{--top-h:76px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* полоса прогресса прокрутки под шапкой */
.m-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--teal) 0%,var(--teal-2) 40%,var(--gold-2) 75%,var(--gold-3));transform:scaleX(var(--p,0));transform-origin:0 50%}

/* ── 1. Вступительная плашка: «67МОТО» на фоне сайта, сквозь буквы идёт видео из зала ── */
.m-intro{position:relative;padding:6px 0 0;background:var(--bg);overflow:hidden}
.m-intro + .hero{padding-top:14px}
.m-band{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.m-word-box{position:relative;overflow:hidden}
/* видео лежит под плашкой; в буквах — средняя полоса кадра, где едет райдер: надпись клипа (верх) и логотип (низ) не попадают */
.m-word-video{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;object-position:50% 57%;background:#15191e;pointer-events:none}
.m-word{position:relative;display:block;width:100%;height:auto;overflow:hidden}
.m-word text{font-family:Unbounded,Manrope,"Segoe UI",sans-serif;font-weight:800;font-size:250px;letter-spacing:-.01em}
.m-word-plate{fill:var(--bg)}
.m-word-stroke{fill:none;stroke:var(--gold-2);stroke-width:1.4;opacity:.55}
.btn.teal{background:var(--teal);color:#041314}
.btn.teal:hover{background:var(--teal-2)}

/* стартовое состояние (класс ставит скрипт в <head>, страховка 2,6 с): буквы закрыты, пока скрипт не положит «крышки» */
.m-entering .m-word-video,.m-entering .m-word-stroke{opacity:0}

/* ── 2. «Маршрут 67»: сцена по скроллу ────────────────────────── */
.m-route{position:relative;padding:0;background:#030506}
.m-route-sticky{position:relative}
.m-scene{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:80vh}
.m-route:not(.m-ready) .m-scene{display:none}
.m-rider{filter:drop-shadow(0 0 10px #22a8a838)}
.m-chs{display:grid;gap:40px;padding-block:40px 80px}
.m-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:24px 48px;align-items:end}
.m-ch .eyebrow{margin-bottom:18px}
.m-ch h2{font-size:clamp(34px,4.4vw,66px);line-height:1.04;letter-spacing:-.05em;font-weight:400;margin:0;text-wrap:balance}
.m-ch p{margin:16px 0 0;max-width:46ch;color:#c9ccd0;font-size:15px;line-height:1.7}
.m-ch .m-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.m-ch .m-acts .btn{height:44px;padding:0 20px;font-size:13px}
.m-card{background:#0f1316b8;border:1px solid var(--border-2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:14px;padding:22px 22px 18px}
.m-card h3{margin:0 0 16px;font-size:20px;font-weight:600;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.m-card h3 small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2);font-weight:600}
.m-spec{display:flex;gap:10px;margin:0 0 12px;align-items:flex-start}
.m-spec::before{content:"";width:3px;height:14px;margin-top:4px;border-radius:2px;background:var(--teal);flex:none}
.m-spec small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.m-spec span{font-size:15px;font-weight:500}
.m-spec a{border-bottom:1px solid #5fd0cc66;transition:color .2s,border-color .2s}
.m-spec a:hover{color:var(--teal-2);border-color:var(--teal-2)}
.m-card .m-price{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.m-card .m-price b{font-size:22px;background:linear-gradient(95deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-card a.link-line{margin-top:16px;width:100%;gap:16px}
.m-route-nav{display:none}

/* живой режим включает скрипт: длинная дорожка, сцена прилипает к экрану */
/* прокрутка маршрута — 1,2 экрана (было 3,6: колесиком крутить слишком долго) */
.m-route.m-live{height:220vh;height:220svh}
.m-live .m-route-sticky{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));height:calc(100svh - var(--top-h));overflow:hidden}
.m-live .m-scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none}
.m-live .m-chs{position:absolute;inset:0;display:block;padding:0;pointer-events:none;
  background:linear-gradient(180deg,#030506e6 0%,#03050699 26%,transparent 46%)}
.m-live .m-ch{position:absolute;left:0;right:0;top:0;max-width:var(--max);margin-inline:auto;padding:clamp(24px,4vh,56px) var(--gut) 0;align-items:start;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.m-live .m-ch.on{opacity:1;visibility:visible;transition:opacity .55s ease;pointer-events:auto}
.m-live .m-ch > *{transform:translateY(16px);transition:transform .8s var(--expo)}
.m-live .m-ch.on > *{transform:none}
.m-live .m-ch.on > :nth-child(2){transition-delay:.08s}
.m-live .m-route-nav{position:absolute;left:50%;width:max-content;max-width:calc(100vw - 16px);bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;display:flex;gap:6px;padding:6px;border-radius:999px;background:#0b0d10b8;border:1px solid var(--border-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.m-route-nav button{position:relative;overflow:hidden;min-height:40px;padding:0 16px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted);white-space:nowrap;transition:color .25s}
.m-route-nav button span{position:relative;z-index:1}
.m-route-nav em{font-style:normal}
.m-route-nav button i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--teal);transform:scaleX(var(--f,0));transform-origin:0 50%}
.m-route-nav button.on{color:var(--ink);background:#ffffff12}
.m-route-nav button:hover{color:var(--ink)}
/* сцена: подсказки на мотоцикле и экипировке */
.m-hs{opacity:0;transition:opacity .5s ease}
.m-scene[data-ch="1"] .m-hs-bike,.m-scene[data-ch="2"] .m-hs-gear{opacity:1}
.m-hs circle.r{fill:none;stroke:var(--gold-2);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 50%;animation:m-hs 1.8s var(--expo) infinite}
@keyframes m-hs{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
.m-hs text{font-family:Manrope,"Segoe UI",sans-serif;font-size:20px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:#030506;stroke-width:5px;stroke-linejoin:round}
/* подписи на экипировке — ссылки в каталог; кликабельны, только когда видны */
.m-hs{pointer-events:none}
.m-scene[data-ch="2"] .m-hs-gear{pointer-events:auto}
.m-hs-link{cursor:pointer}
.m-hs-link .hit{fill:#030506b3;stroke:#ffffff26;transition:fill .2s,stroke .2s}
.m-hs-link text{transition:fill .2s}
.m-hs .ar{fill:var(--teal-2);font-size:15px}
.m-hs-link:hover .hit,.m-hs-link:focus-visible .hit{fill:#0f3b3de6;stroke:var(--teal-2)}
.m-hs-link:hover text,.m-hs-link:focus-visible text{fill:var(--teal-2)}
.m-hs-link:focus{outline:none}
/* стела «Смоленск»: огни бегут по контуру букв, буквы по очереди вспыхивают */
.m-stele-t{fill:#ecebe5;stroke:#2b2f35;stroke-width:3;paint-order:stroke;filter:drop-shadow(0 0 5px #fff1c070)}
.m-stele-t tspan{animation:m-lamp 4.8s infinite}
.m-stele-t tspan:nth-child(2){animation-delay:.15s}.m-stele-t tspan:nth-child(3){animation-delay:.3s}.m-stele-t tspan:nth-child(4){animation-delay:.45s}
.m-stele-t tspan:nth-child(5){animation-delay:.6s}.m-stele-t tspan:nth-child(6){animation-delay:.75s}.m-stele-t tspan:nth-child(7){animation-delay:.9s}.m-stele-t tspan:nth-child(8){animation-delay:1.05s}
@keyframes m-lamp{0%,24%,100%{fill:#ecebe5}6%{fill:#fff2b0}}
.m-stele-bulbs{fill:none;stroke:#fff3c4;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 7;animation:m-chase 1.4s linear infinite}
@keyframes m-chase{to{stroke-dashoffset:-14}}
/* логотипы брендов в тексте */
.m-logo{display:inline-block;width:auto;height:.8em;vertical-align:-.02em}
.m-logo.leatt{height:1.1em;vertical-align:-.26em}
.m-card h3 .m-logo{height:20px;vertical-align:-2px}
.m-card h3 .m-logo.leatt{height:26px;vertical-align:-6px}
.m-route-nav .m-logo{height:11px;vertical-align:-1px}
.m-route-nav .m-logo.leatt{height:16px;vertical-align:-4px}
/* на узких экранах подписей на райдере нет — те же ссылки кнопками в тексте главы */
.m-gear-links{display:none;flex-wrap:wrap;gap:8px;margin-top:14px}
.m-gear-links a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--border-2);border-radius:34px;font-size:12.5px;font-weight:600;background:#0b0d10b3}
.m-gear-links a::after{content:"↗";color:var(--teal-2)}
.m-gear-links a:hover{border-color:var(--teal-2)}
.m-scene text.m-sign{font-family:Unbounded,Manrope,sans-serif;font-weight:800}

@media (max-width:980px){
  .m-ch{grid-template-columns:1fr}
  .m-live .m-ch .m-card{display:none}
  .m-route-nav button{padding:0 11px;font-size:11px;letter-spacing:.02em}
  .m-hs text,.m-hs-link,.m-hs > path{display:none}
  .m-gear-links{display:flex}
}
@media (max-width:760px){
  /* на телефоне маршрут длиннее по прокрутке: один взмах пальцем — не полсцены */
  .m-route.m-live{height:760vh;height:760svh}
}
@media (max-width:560px){
  .m-live .m-ch h2{font-size:clamp(28px,8.4vw,36px)}
  .m-live .m-ch p{font-size:13.5px;line-height:1.6;margin-top:10px}
  .m-live .m-ch .m-acts{margin-top:14px}
  .m-route-nav button{padding:0 9px}
  .m-route-nav em{display:none}
  /* в главе LEATT на телефоне вместо абзаца — кнопки-ссылки на экипировку */
  .m-live .m-ch[data-i="2"] p{display:none}
  .m-gear-links{gap:6px;margin-top:12px}
  .m-gear-links a{height:30px;padding:0 10px;font-size:12px}
}
@media (max-height:620px) and (min-width:561px){.m-live .m-ch p{display:none}}

/* появление блоков при прокрутке: скрипт прячет только то, что ниже экрана */
.m-pre{opacity:0}

@media (prefers-reduced-motion:reduce){
  .m-hs circle.r{animation:none;opacity:0}
}