/* ==========================================================================
   ДОФАМИН — анимации по референсу serotoninn.com.
   html.gs — GSAP/Lenis активны; без него работают CSS-фолбэки из shop.css.
   Изинг референса: cubic-bezier(.75, 0, .25, 1)
   ========================================================================== */
:root {
  --ref: cubic-bezier(0.75, 0, 0.25, 1);
  --film-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='343' height='254' viewBox='0 0 343 254'%3E%3Cpath fill='%23000' d='M10.3 35.6 L41.2 10.2 L102.9 20.3 L157.8 0.0 L212.7 15.2 L281.3 0.0 L332.7 20.3 L343.0 76.2 L336.1 132.1 L343.0 188.0 L325.9 233.7 L260.7 254.0 L198.9 238.8 L144.1 254.0 L82.3 243.8 L27.4 254.0 L0.0 208.3 L6.9 147.3 L0.0 91.4 Z'/%3E%3C/svg%3E");
}

/* ---------- лоадер (белый лист 150vh, уезжает вниз) ---------- */
#loader {
  position: fixed;
  top: 0;
  left: -1rem;
  z-index: 2000;
  width: calc(100% + 2rem);
  height: 150vh;
  height: 150lvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  background: #fff;
  color: var(--fg);
  transition: transform 0.8s var(--ref) 0.1s;
  will-change: transform;
}
#loader.loading-ended { transform: translateY(105%); }
#loader.loaded { pointer-events: none; }
html.no-gs #loader { display: none; }
.loader__logo {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: scaleY(1.12);
  transform-origin: top center;
}
.gs .header { opacity: 0; visibility: hidden; }
.gs body.loaded .header { opacity: 1; visibility: visible; }

/* ---------- шапка: .small при скролле, .hide над футером ---------- */
.header__logo a { display: inline-block; transform-origin: top center; transition: transform 0.6s ease 0.3s; }
.header.small .header__logo a { transform: scale(0.7); transition: transform 0.6s ease; }
.h-stack--off { transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s; }
.header.small .h-stack--off { transform: translateY(-14px); transition: transform 0.4s ease; }
.h-tag { transition: transform 0.4s ease 0.4s; }
.header.small .h-tag { transform: translateY(-14px); transition: transform 0.4s ease; }
.header__in { transition: transform 0.3s ease; }
.header.hide .header__in { transform: translateY(-200%); }
.header.hide { background: transparent; }

/* ---------- hover-link: клон последней буквы ---------- */
.hl { display: inline-block; white-space: nowrap; }
.hl .char { display: inline-block; }

/* ---------- ревилы (GSAP управляет transform) ---------- */
.gs .rv { opacity: 1; transform: none; transition: none; }
.gs .rv:not(.on) { visibility: hidden; }

/* ---------- карточки товара: вспышка второго кадра + «bag +» ---------- */
.gs .plc__img { transition: none; }
.gs .plc__img--2 { opacity: 0; }
.gs .plc.is-alt .plc__img--2 { opacity: 0; }
.plc__body { position: relative; }
.plc__top { transform-origin: top center; transition: transform 0.4s ease 0.1s; }
.plc__bag {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.4s ease;
  pointer-events: none;
}
.plc__bag b { font-weight: 600; color: var(--red); }
.plc__bag i { font-style: normal; font-weight: 400; color: var(--grey-dim); }
@media (hover: hover) and (pointer: fine) {
  .plc:hover .plc__top { transform: scaleY(0); transition: transform 0.4s ease; }
  .plc:hover .plc__bag { transform: scaleY(1); transition: transform 0.4s ease 0.1s; }
}

/* ---------- панели: тайминги референса ---------- */
.drawer { transition: transform 0.6s ease, visibility 0.6s; }
.veil { transition: opacity 0.6s ease, visibility 0.6s; }
.search-panel { transform: translateY(-105%); transition: transform 0.8s ease, visibility 0s 0.8s; }
body.search-open .search-panel { transform: translateY(0); transition: transform 0.8s ease, visibility 0s; }
.search-panel.closing { transform: translateY(105%); visibility: visible; transition: transform 0.8s ease, visibility 0s 0.8s; }
.navpanel { transition: transform 0.8s var(--ref), visibility 0.8s; }
.navpanel__list li { transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ref); }
body.nav-open .navpanel__list li { transform: scaleY(1); transition: transform 0.6s var(--ref) 0.4s; }
.navpanel__foot a { transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ref), color 0.25s ease; }
body.nav-open .navpanel__foot a { transform: scaleY(1); transition: transform 0.6s var(--ref) 0.7s, color 0.25s ease; }
.drawer__item.hide { height: 0 !important; opacity: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; border: 0 !important; transition: height 0.5s ease, opacity 0.3s ease, margin 0.5s ease, padding 0.5s ease; }

/* ---------- cookie-карточка: выезжает поворотом ---------- */
body .lgbar {
  transform: rotate(-90deg) translate(5rem, 20rem);
  transform-origin: right top;
  transition: transform 0.7s var(--ref), visibility 0s linear 0.5s, opacity 0s linear 0.5s;
}
body .lgbar.is-in { transform: rotate(0) translate(0, 0); transition: transform 0.8s var(--ref), visibility 0s, opacity 0s; }

/* ---------- кастомные курсоры-подписи ---------- */
.ccur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.ccur > span {
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(15deg);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ccur.visible > span { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
.ccur b { font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.ccur--fade > span { transform: translate(-50%, -50%); }
.ccur--fade.visible > span { transform: translate(-50%, -50%); }
@media (hover: none), (max-width: 1023px) { .ccur { display: none; } }

/* ---------- HERO: интро и занавес слайдов ---------- */
.gs .hero__slide { opacity: 1; visibility: visible; transition: none; transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; }
.gs .hero__slide.is-on { transform: none; }
.gs .hero__model, .gs .hero__half, .gs .hero__lead, .gs .hero__title, .gs .hero__word, .gs .hero__alias, .gs .hero__brand, .gs .hero__claim, .gs .hero__capw { transition: none; }
.gs .hero__model { transform: translateX(0); }
.gs .hero__bg { transition: none; transform: none; }
.gs .hero__half { transform: translate(-50%, 0); }
.gs .hero__lead, .gs .hero__alias, .gs .hero__claim { transform: none; }
.gs .hero__word { transform: scaleY(1.12); }
.gs .hero__title { transform-origin: 50% 100%; }
.hero__load {
  position: absolute;
  z-index: 5;
  right: var(--pad-x);
  top: 34%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--f-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero__loadn { font-size: clamp(56px, 6.4vw, 100px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; transform: scaleY(1.1); transform-origin: bottom right; }
.hero__loadt { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; color: var(--grey); }
.hero__loadt i { display: inline-block; width: 5px; height: 5px; background: var(--fg); }
html.no-gs .hero__load { display: none; }
.hero__split { --p: 1; }
.gs .hero__split {
  -webkit-mask-image: conic-gradient(from 0deg, #000 0deg calc(var(--p) * 1turn), transparent calc(var(--p) * 1turn) 1turn);
  mask-image: conic-gradient(from 0deg, #000 0deg calc(var(--p) * 1turn), transparent calc(var(--p) * 1turn) 1turn);
}
/* секции наезжают на запиненный hero */
.gs main > section:not(.hero) { position: relative; z-index: 2; }
.gs .sec, .gs .duo, .gs .manifest, .gs .film__top { background: var(--bg); }
.gs .space { z-index: 2; }

/* ---------- 03 кампания ---------- */
.gs .camp__bg { top: -10%; height: 120%; will-change: transform; }
.camp .lw { display: block; overflow: hidden; }
.camp .lw > span { display: block; }
.gs .camp__hint, .gs .camp__cta { transform-origin: bottom center; }

/* ---------- 04 категории: бесконечная лента ---------- */
.cats { position: relative; display: block; padding: 0 var(--pad-x); scroll-snap-type: none; }
.cats__list { display: flex; gap: 6px; }
html.no-gs .cats { overflow-x: auto; scrollbar-width: none; padding-right: 0; }
html.no-gs .cats::-webkit-scrollbar { display: none; }
html.no-gs .cats::after { content: ""; flex: 0 0 var(--pad-x); }
.gs .cats { overflow: hidden; }
.gs .cats__list { width: max-content; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.gs .cats__list.is-dragging { cursor: grabbing; }
.gs .cats__list.is-dragging .catc { pointer-events: none; }
.cats__scroll { position: relative; width: 250px; height: 1px; margin: 22px 0 0; background: rgba(10, 10, 10, 0.14); overflow: hidden; }
.cats__fill { position: absolute; left: 0; top: 0; width: 40%; height: 100%; background: var(--fg); }
html.no-gs .cats__scroll { display: none; }
.catc { will-change: transform; }
.catc img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.gs .catc img { transition: none; }
.gs .catc:hover img { transform: none; }
.catc__img--2 { opacity: 0; }

/* ---------- 05 категории (две вырезки) ---------- */
.duo__grid { position: relative; }
.gs .duo__lead, .gs .duo__t, .gs .duo__n { transform-origin: bottom center; }

/* ---------- «Пространство» ---------- */
.gs .space__spray { opacity: 1; filter: none; transition: none; will-change: transform, clip-path; }
.gs .space__t, .gs .space__lead, .gs .space__icons { transform-origin: bottom center; }

/* ---------- 07 фильм: пин + растущая рваная маска ---------- */
.film { padding: 70px 0 0; }
.film__top { position: relative; z-index: 2; padding: 0 var(--pad-x) 24px; }
.film__pin {
  --maskW: 30%;
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
html.no-gs .film__pin { --maskW: 64%; }
.film__stage {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  clip-path: none;
  transition: none;
  background: #0a0a0a;
  cursor: none;
  -webkit-mask: var(--film-mask) 50% 50% / var(--maskW) no-repeat;
  mask: var(--film-mask) 50% 50% / var(--maskW) no-repeat;
}
.film__stage:hover { clip-path: none; }
.film__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transform: scale(1.2); transform-origin: 50% 50%; will-change: transform; }
.film__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__play { z-index: 3; }
.film__meta { position: absolute; z-index: 3; left: 0; right: 0; bottom: 24px; margin: 0; display: flex; justify-content: center; gap: 20px; }
.film__tip { position: absolute; z-index: 3; left: var(--pad-x); bottom: 24px; margin: 0; font-family: var(--f-mono); font-size: 9px; text-transform: uppercase; color: var(--grey); }
.film__tip b { font-weight: 600; color: var(--red); }
.film__cursor { z-index: 4; }
@media (max-width: 1023px) { .film__pin { --maskW: 60%; } }
@media (max-width: 767px) { .film__pin { --maskW: 90%; } .film__tip { display: none; } }
/* футер наезжает на запиненный фильм: полноэкранный кадр футера убран, кадр — сам пин */
.gs .ft { position: relative; z-index: 3; margin-top: 0; }
.gs .ft__film { display: none; }
.gs .ft__band { margin-top: 0; }
.ft__hero { overflow: hidden; }
.ft__brand, .ft__model { will-change: transform; }
.gs .ft__sub { opacity: 0; }
.gs .ft__subt { transform-origin: 50% 100%; }
.ft__links a .char, .ft__bottom .char { display: inline-block; }
.gs .ft__links a .char, .gs .ft__bottom .char { opacity: 0; }

/* ---------- карточка товара ---------- */
.gs .pp-slide { overflow: hidden; }
.gs .pp-slide img { transform-origin: center; }
.gs .pp-acc__b { transition: grid-template-rows 0.5s ease; }
.pp-acc__t .char { display: inline-block; }
.gs .pp-labels span { transform-origin: bottom; }

/* ---------- мобилка ---------- */
@media (max-width: 860px) {
  .hero__load { top: auto; bottom: 30%; right: var(--pad-x); }
  .hero__loadn { font-size: 56px; }
  .cats__scroll { width: 60%; }
  .gs .hero__model { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  #loader { display: none; }
  .lgbar, .navpanel__list li, .navpanel__foot a { transition: none; }
}