/* ===== БАЗА ===== */
:root{
  --bg:#08080b;
  --bg-soft:#101016;
  --fg:#f4f4f7;
  --muted:#8a8a99;
  --accent:#4f8cff;          /* меняется при выборе цвета */
  --border:rgba(255,255,255,.08);
  --font: "Helvetica Neue", "Arial", system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .8s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--accent);transition:color .8s ease}
section{position:relative}

/* ===== ПРЕЛОАДЕР ===== */
.loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:6vw;
}
.loader__count{font-size:14vw;font-weight:800;line-height:.8;letter-spacing:-.03em}
.loader__word{font-size:2vw;letter-spacing:.5em;color:var(--muted);align-self:flex-end}

/* ===== ШАПКА ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,60px);
  mix-blend-mode:difference;
}
.nav__logo{font-weight:800;font-size:22px;letter-spacing:-.02em}
.nav__logo span{font-size:11px;vertical-align:super;opacity:.6}
.nav__links{display:flex;gap:32px;font-size:14px;color:var(--fg)}
.nav__links a{opacity:.7;transition:opacity .3s}
.nav__links a:hover{opacity:1}
.nav__cta{
  border:1px solid var(--fg);border-radius:100px;
  padding:10px 22px;font-size:14px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s, background .4s;
}
.nav__cta:hover{
  transform:scale(1.06);
  border-color:var(--accent);
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 45%,transparent);
}
@media(max-width:720px){.nav__links{display:none}}

/* ===== ГЕРОЙ ===== */
/* контейнер наплыва: внутри него герой «прилипает», сцена наезжает поверх */
.stack{position:relative;z-index:1}
.hero{
  height:100vh;min-height:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  position:sticky;top:0;z-index:1;         /* прилипает к верху, сцена наедет поверх */
}
.hero__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 45%,transparent) 0%, transparent 60%);
  filter:blur(40px);opacity:.4;transition:background .8s ease;z-index:1;
}
/* дышащий градиент-«пульс» — медленно расширяется и сжимается, как сердцебиение */
.hero__pulse{
  position:absolute;top:50%;left:50%;
  width:44vw;height:44vw;max-width:640px;max-height:640px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 60%,transparent) 0%, transparent 62%);
  filter:blur(30px);z-index:1;
  animation:pulse 2.4s ease-in-out infinite;
  transition:background .8s ease;
}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:.55}
  18%    {transform:translate(-50%,-50%) scale(1.08);opacity:.9}   /* удар */
  32%    {transform:translate(-50%,-50%) scale(.92);opacity:.6}
  46%    {transform:translate(-50%,-50%) scale(1.02);opacity:.75}  /* второй, слабее */
}
/* лёгкое зерно — «плёночная» глубина поверх градиентов */
.hero__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__video-wrap{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
}
.hero__video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;
}
/* затемняющий слой поверх видео — чтобы светлый текст читался */
.hero__dim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%, rgba(8,8,11,.15) 0%, rgba(8,8,11,.5) 72%),
    rgba(8,8,11,.28);
}
.hero__title{
  position:relative;z-index:3;
  font-size:clamp(48px,10vw,132px);font-weight:800;   /* меньше, чем было (было до 220px) */
  line-height:.86;letter-spacing:-.04em;
  mix-blend-mode:screen;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block}
.hero__title--outline>span{
  -webkit-text-stroke:1.5px var(--fg);
  color:transparent;
}
.hero__sub{
  position:relative;z-index:3;margin-top:28px;
  color:var(--fg);opacity:.85;font-size:clamp(14px,1.4vw,19px);
}
.hero__scroll{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:13px;letter-spacing:.2em;color:var(--muted);
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{50%{transform:translate(-50%,8px)}}
/* линия-эквалайзер: полоски пляшут в такт */
.hero__eq{
  position:absolute;bottom:84px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:flex-end;gap:5px;height:34px;
}
.hero__eq span{
  width:3px;height:100%;border-radius:3px;
  background:var(--accent);opacity:.7;
  transform-origin:bottom;
  animation:eq 1.1s ease-in-out infinite;
  transition:background .8s ease;
}
.hero__eq span:nth-child(1){animation-delay:-.9s}
.hero__eq span:nth-child(2){animation-delay:-.3s}
.hero__eq span:nth-child(3){animation-delay:-.6s}
.hero__eq span:nth-child(4){animation-delay:-.1s}
.hero__eq span:nth-child(5){animation-delay:-.7s}
.hero__eq span:nth-child(6){animation-delay:-.4s}
.hero__eq span:nth-child(7){animation-delay:-.95s}
.hero__eq span:nth-child(8){animation-delay:-.2s}
.hero__eq span:nth-child(9){animation-delay:-.5s}
.hero__eq span:nth-child(10){animation-delay:-.8s}
.hero__eq span:nth-child(11){animation-delay:-.15s}
.hero__eq span:nth-child(12){animation-delay:-.65s}
.hero__eq span:nth-child(13){animation-delay:-.35s}
.hero__eq span:nth-child(14){animation-delay:-.85s}
.hero__eq span:nth-child(15){animation-delay:-.25s}
@keyframes eq{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}

/* ===== ЗАГЛУШКА НАУШНИКОВ (пока нет фото) ===== */
.headphones{width:100%;aspect-ratio:1/1;position:relative}
.headphones img{width:100%;height:100%;object-fit:contain}
.headphones.is-placeholder::before{
  content:"";position:absolute;inset:8%;
  border-radius:50%;
  border:18px solid color-mix(in srgb,var(--accent) 70%,#fff 5%);
  box-shadow:0 0 80px color-mix(in srgb,var(--accent) 60%,transparent),
             inset 0 0 60px rgba(0,0,0,.6);
  transition:border-color .8s ease, box-shadow .8s ease;
}
.headphones.is-placeholder::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:22%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,#fff 5%),transparent 60%);
  border-radius:100px;
}
.headphones--big{width:clamp(280px,40vw,560px);margin:0 auto}
/* два наложенных фото для плавного кросс-фейда между цветами */
.headphones--big .color-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .6s ease;
}
.headphones--big .color-img.is-shown{opacity:1}

/* ===== STICKY-СЦЕНА ===== */
.scene{
  height:560vh;
  position:relative;z-index:2;             /* выше героя — наезжает поверх */
  background:var(--bg);                     /* плотный фон, чтобы накрыть герой */
  border-radius:38px 38px 0 0;              /* скруглённый верхний край карточки */
  box-shadow:0 -34px 70px rgba(0,0,0,.6);   /* мягкая тень сверху при наплыве */
}
.scene__sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:inherit;
}
.scene__product{
  position:absolute;inset:0;
  will-change:transform;transform-origin:center center;backface-visibility:hidden;
}
#rotateCanvas{
  display:block;width:100%;height:100%;
  object-fit:cover;
}
.scene__caption{
  position:absolute;max-width:min(280px,26vw);
  top:50%;transform:translateY(-50%);
  opacity:0;
}
.scene__caption[data-caption="0"]{left:4vw;top:26%}
.scene__caption[data-caption="1"]{right:4vw;top:52%;text-align:right}
.scene__caption[data-caption="2"]{left:4vw;top:78%}
.scene__num{color:var(--accent);font-weight:800;font-size:14px;letter-spacing:.1em}
.scene__caption h3{font-size:clamp(22px,2.6vw,38px);margin:8px 0 12px;letter-spacing:-.02em}
.scene__caption p{color:var(--muted);line-height:1.5}
@media(max-width:900px){
  .scene__caption{max-width:200px}
  .scene__caption[data-caption="0"]{left:3vw}
  .scene__caption[data-caption="1"]{right:3vw}
  .scene__caption[data-caption="2"]{left:3vw}
}

/* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */
.section-title{
  font-size:clamp(40px,8vw,110px);font-weight:800;
  line-height:.9;letter-spacing:-.04em;
  padding:0 clamp(20px,5vw,60px);
}

/* ===== BENTO ===== */
.features{padding:9vh 0}
.features .section-title{margin-bottom:6vh}
.bento{
  display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:clamp(300px,34vw,380px) 170px;   /* верхний ряд крупнее, нижний компактнее */
  padding:0 clamp(20px,5vw,60px);
}
.bento__cell{
  position:relative;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:22px;padding:28px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s;
}
.bento__cell:hover{transform:translateY(-6px);border-color:var(--accent)}
/* фоновая картинка/видео плитки + затемнение снизу, чтобы текст читался */
.bento__cell--img .bento__bg,
.bento__cell--video .bento__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.bento__cell--img::after,
.bento__cell--video::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(8,8,11,.92) 0%, rgba(8,8,11,.35) 45%, rgba(8,8,11,.15) 100%);
}
.bento__cell--img:hover .bento__bg{transform:scale(1.05)}
/* плитка «Комфорт»: приближаем и смещаем кадр на мужчину (он слева) */
.bento__cell--comfort .bento__bg{transform:scale(1.35);object-position:22% 30%}
.bento__cell--comfort:hover .bento__bg{transform:scale(1.42)}
.bento__cell--img > :not(.bento__bg),
.bento__cell--video > :not(.bento__bg){position:relative;z-index:2}
.bento__cell--big{grid-column:span 2}
.bento__cell--accent{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 30%,var(--bg-soft)),var(--bg-soft));
}
.bento__label{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:auto}
.bento__cell p{color:var(--muted);line-height:1.5;font-size:15px}
.bento__cell--big p{color:var(--fg);font-size:clamp(18px,2vw,26px);line-height:1.35}
.bento__num{font-size:clamp(40px,5vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1}
.bento__num i{font-size:.35em;font-style:normal;color:var(--muted);margin-left:4px}
.bento__cell .bento__num + p{margin-top:8px}
@media(max-width:720px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .bento__cell--big{grid-column:span 2}
}

/* ===== ЦВЕТА ===== */
.colors{padding:9vh 0;text-align:center;overflow:hidden}
.colors .section-title{margin-bottom:5vh}
.colors__stage{margin-bottom:4vh}
.colors__swatches{display:flex;gap:16px;justify-content:center}
.swatch{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:var(--c);border:2px solid transparent;
  outline:2px solid transparent;outline-offset:4px;
  transition:outline-color .3s, transform .3s;
}
.swatch:hover{transform:scale(1.12)}
.swatch.is-active{outline-color:var(--c)}
.colors__name{margin-top:24px;color:var(--muted);letter-spacing:.1em}

/* ===== ФИНАЛ ===== */
.buy{
  min-height:auto;padding:11vh 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.buy__glow{
  position:absolute;bottom:-20%;left:50%;transform:translateX(-50%);
  width:80vw;height:60vh;
  background:radial-gradient(ellipse, color-mix(in srgb,var(--accent) 40%,transparent), transparent 65%);
  filter:blur(50px);opacity:.5;transition:background .8s ease;
}
.buy__pretitle{position:relative;z-index:2;letter-spacing:.4em;color:var(--muted);margin-bottom:18px}
.buy__price{position:relative;z-index:2;font-size:clamp(56px,12vw,160px);font-weight:800;letter-spacing:-.04em;line-height:1}
.buy__btn{
  position:relative;z-index:2;margin:40px 0 26px;
  background:var(--accent);color:#08080b;font-weight:700;
  padding:20px 52px;border-radius:100px;font-size:18px;
  transition:background .8s ease, box-shadow .4s, transform .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);
}
.buy__btn:hover{
  transform:scale(1.06);
  box-shadow:0 12px 60px color-mix(in srgb,var(--accent) 65%,transparent);
}
.buy__note{position:relative;z-index:2;color:var(--muted);font-size:14px}

/* ===== ФУТЕР ===== */
.footer{
  display:flex;justify-content:space-between;
  padding:28px clamp(20px,5vw,60px);
  border-top:1px solid var(--border);
  color:var(--muted);font-size:14px;
}

/* появление при скролле — стартовое состояние */
.reveal{opacity:0;transform:translateY(40px)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *{animation:none!important}
}