/* ==========================================================================
   BikeFYP — движение на началната страница
   Класът .motion се слага в <head>, преди страницата да се покаже, и само ако
   посетителят не е избрал намалено движение. Всички начални състояния са под
   .motion, затова без JavaScript или при намалено движение всичко се вижда веднага.
   Появяването ползва отделните свойства translate, scale и rotate, а не transform,
   за да не се бие с ефектите при посочване, които вече ползват transform.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- Лента за прогрес при превъртане ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0); /* motion.js */
  will-change: transform;
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Хедърът се скрива при превъртане надолу и се връща при превъртане нагоре ---------- */
.motion .header { transition: box-shadow .25s ease, transform .5s var(--ease-out); }
.motion .header.is-hidden { transform: translate3d(0, -100%, 0); }

/* ---------- Думи и букви, които изплуват отдолу ---------- */
.w {
  display: inline-block;
  overflow: hidden;
  padding: .12em .02em .16em;
  margin: -.12em -.02em -.16em;
  vertical-align: top;
}
.w__i { display: inline-block; }
.motion .w__i { translate: 0 112%; rotate: 4deg; }
.motion .split.is-in .w__i {
  translate: none;
  rotate: none;
  transition: translate 1.1s var(--ease-out), rotate 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 65ms);
}

/* ---------- Hero: завеса при зареждане и текст за всеки слайд ---------- */
.motion .hero {
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 1.6s var(--ease-io) .1s;
}
.motion .hero:not(.is-in) { clip-path: inset(7% 4% 7% 4% round 28px); }
.motion .hero:not(.is-in) .hero__slide.is-active .hero__img { transform: scale(1.32); }
.motion .hero.is-intro .hero__img { transition: transform 3s var(--ease-out), opacity .6s ease; }

/* Слайдът се движи по-бавно от страницата, а текстът излиза нагоре и изчезва (transform и opacity от motion.js). */
.motion .hero__slide,
.motion .hero__content { will-change: transform; }

.hero { --hd: .3s; }
.hero.is-intro { --hd: .75s; }
.motion .hero__slide .w__i { transition: translate 0s linear .8s, rotate 0s linear .8s; }
.motion .hero.is-in .hero__slide.is-active .w__i {
  translate: none;
  rotate: none;
  transition: translate 1.15s var(--ease-out), rotate 1.15s var(--ease-out);
  transition-delay: calc(var(--hd) + .12s + var(--i, 0) * 70ms);
}
.motion .hero__slide :is(.hero__kicker, .hero__text, .hero__cta > *) {
  --fx: 0s;
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0s linear .8s, translate 0s linear .8s,
    transform .5s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.motion .hero.is-in .hero__slide.is-active :is(.hero__kicker, .hero__text, .hero__cta > *) {
  translate: none;
  transition: opacity .9s ease var(--fx), translate 1.1s var(--ease-out) var(--fx),
    transform .5s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.motion .hero.is-in .hero__slide.is-active .hero__kicker { opacity: .9; --fx: var(--hd); }
.motion .hero.is-in .hero__slide.is-active .hero__text { opacity: .92; --fx: calc(var(--hd) + .45s); }
.motion .hero.is-in .hero__slide.is-active .hero__cta > * { opacity: 1; --fx: calc(var(--hd) + .6s); }
.motion .hero.is-in .hero__slide.is-active .hero__cta > * + * { --fx: calc(var(--hd) + .7s); }
.motion .hero__nav { transition: opacity .8s ease 1.4s, translate 1s var(--ease-out) 1.4s; }
.motion .hero:not(.is-in) .hero__nav { opacity: 0; translate: 0 16px; }

/* ---------- Появяване при превъртане ---------- */
.motion :is(.usp__list > li, .track > li, .values__list > li, .series, .soon > *, .sec-head__aside, .block__foot) {
  transition: opacity .9s ease, translate 1.2s var(--ease-out), scale 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.motion :is(.usp__list > li, .values__list > li, .soon > *):not(.is-in) { opacity: 0; translate: 0 28px; }
.motion .track > li:not(.is-in) { opacity: 0; translate: 0 72px; scale: .94; }
.motion .series:not(.is-in) { opacity: 0; translate: 0 40px; }
.motion #main .sec-head:not(.is-in) .sec-head__aside { opacity: 0; translate: 24px 0; }
.motion #main .sec-head .sec-head__aside { transition-delay: .25s; }
.motion .block__panel:not(.is-in) .block__foot { opacity: 0; translate: 0 18px; }
.motion .block__panel .block__foot { transition-delay: .7s; }

/* Иконите се изрисуват (контурите им са с pathLength="1"). */
.motion :is(.usp__list > li, .values__list > li) .icon:not(.icon--sm) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-io);
  transition-delay: calc(var(--d, 0s) + .25s);
}
.motion :is(.usp__list > li, .values__list > li).is-in .icon:not(.icon--sm) { stroke-dashoffset: 0; }

/* Големи снимки: отварят се като завеса отдолу нагоре, а снимката се отдалечава. */
.motion :is(.explore > .xcard, .btiles > .btile, .block__photo) {
  clip-path: inset(0 0 0 0 round var(--r));
  transition: clip-path 1.35s var(--ease-io);
  transition-delay: var(--d, 0s);
}
.motion :is(.explore > .xcard, .btiles > .btile, .block__photo):not(.is-in) { clip-path: inset(100% 0 0 0 round var(--r)); }
.motion :is(.xcard, .btile, .block__photo) > img:not(.btile__logo) {
  transition: transform .9s var(--ease-out), scale 1.8s var(--ease-out), translate .9s var(--ease-out), filter .5s ease;
  transition-delay: 0s, var(--d, 0s), 0s, 0s;
}
.motion :is(a.xcard, a.btile, a.block__photo) > img:not(.btile__logo) { translate: var(--px, 0) var(--py, 0); }
.motion :is(.xcard, .btile, .block__photo):not(.is-in) > img:not(.btile__logo) { scale: 1.35; }
.motion :is(.xcard__title, .xcard__go, .btile__logo, .btile__sub, .block__photo-text) {
  transition: opacity .8s ease, translate 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + .55s);
}
.motion :is(.xcard, .btile, .block__photo):not(.is-in) :is(.xcard__title, .xcard__go, .btile__logo, .btile__sub, .block__photo-text) {
  opacity: 0;
  translate: 0 24px;
}

/* Голямата дума в блока: буквите изплуват една по една и думата се плъзга при превъртане. */
.motion .block__word { will-change: transform; } /* плъзгането идва от motion.js */
.ch { display: inline-block; overflow: hidden; padding-block: .1em; margin-block: -.1em; vertical-align: top; }
.ch__i { display: inline-block; }
.motion .ch__i { translate: 0 105%; }
.motion .block__panel.is-in .ch__i {
  translate: none;
  transition: translate 1.2s var(--ease-out);
  transition-delay: calc(.1s + var(--i, 0) * 45ms);
}

/* Велосипедът влиза в кадър като в движение и после следва мишката. */
.motion .block__bike {
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform .9s var(--ease-out), translate 1.5s var(--ease-out) .25s, rotate 1.5s var(--ease-out) .25s, opacity .6s ease .25s;
}
.motion .block__panel:not(.is-in) .block__bike { opacity: 0; translate: -22% 0; rotate: -5deg; }
.motion .block__panel:hover .block__bike { transform: translate3d(calc(var(--px, 0) + 8px), var(--py, 0), 0); }

/* Тъмните карти „Нови обяви“: велосипедите влизат отляво. */
.motion .ncard__bike { transition: transform .5s ease, translate 1.4s var(--ease-out), rotate 1.4s var(--ease-out); transition-delay: 0s, calc(var(--d, 0s) + .2s), calc(var(--d, 0s) + .2s); }
.motion .track > li:not(.is-in) .ncard__bike { translate: -38% 0; rotate: -4deg; }

/* ---------- Наклон и отблясък на картите (само с мишка) ---------- */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out), background-color .2s ease;
}
.tilt.is-tilting { transition: transform .15s linear; }
.glare {
  position: absolute; inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .2), rgb(255 255 255 / 0) 45%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.tilt.is-tilting .glare { opacity: 1; }

/* Магнитни бутони: следват мишката с няколко пиксела. */
.magnetic { transition: transform .5s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease; }

/* ---------- Бягащ надпис ---------- */
.kinetic {
  overflow: hidden;
  padding-block: clamp(28px, 4vw, 56px);
  background: transparent;
  user-select: none;
}
.kinetic__row {
  display: flex;
  overflow: hidden;
  transform-origin: 50% 50%; /* наклонът идва от motion.js */
  will-change: transform;
}
.kinetic__track { display: flex; flex: none; will-change: transform; }
.kinetic__group { display: flex; flex: none; align-items: center; }
.kinetic__word {
  padding-inline: clamp(14px, 1.6vw, 26px);
  font-family: var(--f-cond);
  font-size: clamp(64px, 10.5vw, 168px);
  font-weight: 900;
  font-style: italic;
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
/* Шрифтът има припокриващи се контури. При прозрачен текст в буквите се виждат вътрешни линии,
   затова текстът е в цвета на фона, а контурът е двойно по-дебел и се рисува под него. */
.kinetic__word--outline { color: var(--bg); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.kinetic__dot {
  flex: none;
  width: clamp(12px, 1.3vw, 20px);
  height: clamp(12px, 1.3vw, 20px);
  border-radius: 50%;
  background: var(--accent);
}
.kinetic__row--small { margin-top: clamp(4px, .6vw, 10px); }
.kinetic__row--small .kinetic__word { font-size: clamp(36px, 5vw, 80px); color: var(--muted); }
.kinetic__row--small .kinetic__word--outline { color: var(--bg); -webkit-text-stroke: 2.4px var(--muted); }
.kinetic__row--small .kinetic__dot { width: clamp(8px, .8vw, 12px); height: clamp(8px, .8vw, 12px); background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .kinetic__row--small { display: none; }
}

/* ---------- Банерът се разгръща до целия екран ---------- */
/* Мащабът на банера и движението на снимката идват от motion.js (само transform, без прерисуване). */
.motion .banner,
.motion .banner > :is(img, video) { will-change: transform; }
/* Без плавен преход на transform: motion.js го сменя на всеки кадър и преходът започваше отначало всеки път. */
.motion .banner > .bgvideo { transition: opacity .6s ease; }
.motion .banner__content > :not(.banner__title) {
  transition: opacity .9s ease .5s, translate 1.1s var(--ease-out) .5s,
    transform .5s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.motion .banner:not(.is-in) .banner__content > :not(.banner__title) { opacity: 0; translate: 0 24px; }

/* ---------- Смяна на изгледа: каталог и страница на продукт ---------- */
@media (prefers-reduced-motion: no-preference) {
  .header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out .32s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
  ::view-transition-group(product-photo) { animation-duration: .75s; animation-timing-function: var(--ease-out); }
  ::view-transition-old(product-photo),
  ::view-transition-new(product-photo) { animation-duration: .45s; height: 100%; object-fit: contain; }
}
@keyframes vt-out { to { opacity: 0; scale: .985; } }
@keyframes vt-in { from { opacity: 0; translate: 0 28px; } }

/* На телефон снимките са над текста, затова не се уголемяват, за да не го закриват. */
@media (max-width: 767px) {
  .motion .hero:not(.is-in) .hero__slide.is-active .hero__img { transform: none; }
  .motion :is(.xcard, .btile, .block__photo):not(.is-in) > img { scale: 1; }
}