/* Win2Partners — раскладка сайта (главная + Wintime).
   Дизайн в Figma нарисован на сетке 1440px; всё ниже выражено относительно этой
   ссылки, поэтому страница масштабируется вверх на больших экранах и перетекает
   на планшете/мобильном.
   Брейкпоинты: ≥1440 масштабирование · 1200–1440 гибкий десктоп · 768–1200 планшет · ≥375 мобильный. */

:root{
  --site-gutter:clamp(16px,2.78vw,40px);
  --site-col:min(560px,100%);
  --site-col-wide:min(1360px,100%);
  --site-col-text:min(704px,100%);
  --fs-marquee:clamp(64px,11.94vw,240px);
  --fs-hero:clamp(56px,8.9vw,178px);
  --fs-section:clamp(30px,3.89vw,78px);
  --fs-lead:clamp(16px,1.67vw,33px);
  --fs-body-lg:clamp(15px,1.25vw,25px);
  --hero-h:clamp(460px,55.5vw,1110px);
  /* Карусель подарков считается от нижней границы заголовка, а не от процента
     высоты экрана: при 900px и ниже плитка наезжала на вторую строку заголовка. */
  --orbit-tile:min(clamp(190px,26.6vw,383px),42vh);
  --orbit-top:calc(clamp(78px,5.4vw,108px) + 5vh + 2.2 * var(--fs-section)
    + 64px + var(--orbit-tile) / 2);
  --section-pad:clamp(100px,10.4vw,150px);
  /* Единый вертикальный ритм между блоками: 100 на мобильном, 140–150 выше. */
  --w2p-block:clamp(100px,10.4vw,150px);
}

.w2p-page{width:100%;display:flex;flex-direction:column;align-items:stretch}
.w2p-section{position:relative;overflow:clip;overflow-clip-margin:520px;
  background-color:var(--surface-page);display:flex;flex-direction:column;align-items:center;
  gap:clamp(32px,4.17vw,84px);padding:var(--section-pad) var(--site-gutter)}
/* Каталог идёт сразу за hero — 100px верхнего паддинга из макета читаются как
   мёртвый зазор после того, как диск hero в него ужался, поэтому он подтянут. */
.w2p-section--first{padding-top:clamp(20px,2.4vw,48px)}
.w2p-col{width:var(--site-col);display:flex;flex-direction:column;gap:16px}
.w2p-col--center{align-items:center;gap:12px}
.w2p-eyebrow{font-weight:700;font-size:14px;line-height:1;letter-spacing:var(--ls-label);
  color:var(--text-accent);text-transform:uppercase}
.w2p-cards{display:flex;flex-direction:column;gap:12px}
.w2p-display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:1.1;color:var(--text-primary);margin:0;text-wrap:pretty}
.w2p-display--section{font-size:var(--fs-section)}
.w2p-display--hero{font-size:var(--fs-hero);line-height:1}
.w2p-display--dim{color:rgba(249,249,249,.32)}
/* margin:0 обязателен: это <p>, и браузерный отступ в 1em отбрасывал подзаголовок
   от заголовка hero на лишние 24px поверх заданного макетом gap. */
.w2p-lead{font-weight:400;font-size:var(--fs-lead);line-height:1.3;
  color:var(--text-secondary);margin:0}
.w2p-body{font-weight:400;font-size:var(--fs-body-lg);line-height:1.3;color:var(--text-secondary);margin:0}
.w2p-center{text-align:center}

/* ---- появление: одно лёгкое всплытие на элемент, текст и карточки одинаково ---- */
.w2p-rise{opacity:0;transform:translateY(16px);
  transition:opacity 680ms var(--reveal-ease),transform 680ms var(--reveal-ease)}
.w2p-rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .w2p-rise{opacity:1!important;transform:none!important;transition:none}
}

/* ---- свечение: всегда нижний слой, всегда выходит за края ---- */
.w2p-glowfield{position:absolute;inset:0;overflow:visible;z-index:0;pointer-events:none}
.w2p-glow{position:absolute;opacity:var(--glow-opacity);scale:1.45;mix-blend-mode:screen;
  background:radial-gradient(closest-side,var(--accent-primary) 0%,rgba(243,64,13,.55) 42%,rgba(243,64,13,0) 100%);
  transform:rotate(-71.14deg)}
.w2p-above{position:relative;z-index:1}

/* ---- hero главной ---- */
.w2p-hero{position:relative;width:100%;height:var(--hero-h);overflow:hidden;
  background-color:var(--surface-page)}
.w2p-hero-disc{position:absolute;z-index:1;left:50%;top:-13.9vw;width:136.1%;height:66.7vw;
  min-height:var(--hero-h);transform:translateX(-50%);border-radius:50%;overflow:hidden;
  will-change:transform}
/* В макете артворк 1440×800 стоит в точке 294,200 внутри диска 1960×960 —
   то есть 73.5% × 83.3% в 15%,20.8%. Если растянуть арт на диск, фигура раздувается. */
.w2p-hero-plate{position:absolute;z-index:2;left:15%;top:20.83%;width:73.47%;height:83.33%;
  background-position:center 42%;background-size:cover;background-repeat:no-repeat}
/* Подложка заполняет диск, поэтому доходит до обоих краёв экрана (диск шире вьюпорта),
   и её режет нижняя дуга круга — эта дуга с чёрным под ней и есть форма первого экрана. */
.w2p-hero-back{position:absolute;inset:0;z-index:0;
  background:url(../assets/hero-clouds-wide.webp) center/cover no-repeat}
.w2p-hero-front{background-image:url(../assets/hero-panda-front.webp);pointer-events:none}
/* Отступ от ВЕРХНЕГО края диска (он отрицательный), чтобы верх первой строки попадал
   под фиксированную шапку, а не проходил сквозь лого. */
.w2p-marquee-rows{position:absolute;z-index:1;left:0;right:0;top:calc(13.9vw + 88px);
  display:flex;flex-direction:column;gap:0;font-size:var(--fs-marquee)}
.w2p-marquee{overflow:hidden;height:1.06em}
.w2p-marquee+.w2p-marquee{margin-top:-.16em}
.w2p-marquee>div{display:flex;width:max-content}
.w2p-marquee span{font-family:var(--font-display);font-weight:700;font-size:1em;line-height:1.06;
  letter-spacing:-.01em;color:var(--w2p-cream);text-transform:uppercase;white-space:nowrap;display:block}
@keyframes w2p-marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes w2p-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .w2p-marquee>div{animation:none!important}
}

/* ---- hero Wintime (покадровая прокрутка) ---- */
.w2p-crumb{display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(14px,1.9vw,30px);
  background:none;border:0;padding:0;font-family:var(--font-text);font-weight:400;
  font-size:var(--fs-body-lg);line-height:1;color:var(--text-primary);text-decoration:none;
  transition:opacity var(--duration-base) var(--ease-standard)}
.w2p-crumb:hover{opacity:.7;color:var(--text-primary)}
.w2p-crumb .w2p-arrow{width:clamp(30px,2.2vw,44px);height:clamp(30px,2.2vw,44px);
  color:var(--text-primary);background-color:rgba(255,255,255,.153)}
.w2p-vhero{position:relative;width:100%;z-index:0;height:300vh}
.w2p-vhero-pin{position:sticky;top:0;height:100vh;overflow:hidden;background-color:var(--surface-page)}
.w2p-vhero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:opacity}
.w2p-vhero-copy{position:absolute;left:var(--site-gutter);right:var(--site-gutter);top:14.7vh;
  display:flex;flex-direction:column;gap:8px;will-change:transform,opacity}
.w2p-vhero-note{position:absolute;left:var(--site-gutter);bottom:5vh;width:min(345px,60%)}
/* Блок модели начисления поднимается поверх последнего отрезка пина, чтобы оказаться
   на экране за пару секунд до конца ролика. */
.w2p-section--overhero{margin-top:-78vh;z-index:2}
/* Своей плашки нет — сквозь просвечивает цвет страницы, читается только свечение. */
.w2p-section--bare{background-color:transparent}

/* ---- тарифы ---- */
.w2p-tariffs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  width:var(--site-col-wide)}
.w2p-tariffs>.w2p-rise{display:flex}
.w2p-asterisk{position:absolute;left:68.8%;top:39%}

/* ---- подарки: круговая карусель по скроллу ---- */
.w2p-gifts{position:relative;width:100%}
.w2p-gifts-pin{position:sticky;top:0;height:100vh;overflow:hidden;background-color:var(--surface-page)}
/* Отступ от фиксированной шапки: пин начинается у верха вьюпорта, поэтому заголовку
   нужна высота хрома плюс воздух, иначе лого ложится на заголовок. */
.w2p-gifts-title{position:absolute;left:50%;top:calc(clamp(78px,5.4vw,108px) + 5vh);
  transform:translateX(-50%);width:min(800px,88%);display:flex;flex-direction:column;
  align-items:center;z-index:2}
.w2p-gifts-title .w2p-display{text-align:center;width:100%}
.w2p-gifts-title .w2p-display:first-child{white-space:nowrap}
.w2p-orbit{position:absolute;left:50%;top:var(--orbit-top);width:0;height:0;z-index:1}
/* Центрирование зашито в JS-трансформ (calc(-50% + …)), чтобы оно оставалось верным
   на обоих концах clamp — vw-марджин уплыл бы, как только clamp упрётся. */
.w2p-orbit-item{position:absolute;left:0;top:0;width:var(--orbit-tile);aspect-ratio:1;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  will-change:transform,opacity}
.w2p-orbit-caption{position:absolute;left:50%;
  top:calc(var(--orbit-top) + var(--orbit-tile) / 2 + 24px);width:min(340px,70vw);
  text-align:center;transform:translateX(-50%);z-index:2;font-weight:700;
  font-size:clamp(13px,1.25vw,22px);line-height:1;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-primary);white-space:nowrap;
  transition:opacity 200ms linear}

/* ---- закрывающее утверждение ---- */
/* Без max-height: если ограничить высоту, пока ширина растёт, процентные плашки
   отрываются от текста выше 1440. Секция держит фиксированное отношение 1440:800
   на любой ширине, поэтому композиция масштабируется как задумано. */
.w2p-statement{position:relative;width:100%;height:55.56vw;min-height:420px;overflow:clip;
  overflow-clip-margin:520px;background-color:var(--surface-page)}
.w2p-statement-copy{position:absolute;left:50%;top:11.25%;transform:translateX(-50%);
  width:min(1397px,97%);display:flex;flex-direction:column;align-items:center;z-index:1}
.w2p-statement-copy .w2p-display{text-align:center;width:100%}
/* Обе плашки позиционированы в ПРОЦЕНТАХ секции, никогда в px: освещённый кадр и
   кадр с выбитым фоном должны совмещаться на любой ширине вьюпорта. */
.w2p-statement-plate{position:absolute;left:13.4%;top:26.25%;width:72.57%;height:73.75%;
  z-index:3;background-image:url(../assets/statement-pig-front.webp);
  background-position:center bottom;background-size:cover;background-repeat:no-repeat;
  pointer-events:none}

@media (max-width:1200px){
  :root{--fs-marquee:clamp(52px,12.5vw,150px);--fs-section:clamp(28px,4.6vw,56px);
    --hero-h:clamp(420px,62vw,760px)}
  .w2p-tariffs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w2p-asterisk{display:none}
  :root{--orbit-tile:min(clamp(170px,30vw,300px),42vh)}
  .w2p-section--overhero{margin-top:-70vh}
}

@media (max-width:767px){
  :root{--fs-marquee:clamp(38px,15vw,60px);--fs-section:clamp(26px,7.5vw,34px);
    --fs-hero:clamp(44px,15vw,64px);--fs-lead:16px;--fs-body-lg:15px;--hero-h:78vh;
    --section-pad:100px;--w2p-block:100px}
  .w2p-hero-disc{width:190%;height:120vw;top:-22vw}
  .w2p-hero-plate{left:26.3%;top:20.83%;width:47.4%;height:83.33%}
  .w2p-marquee-rows{top:calc(22vw + 76px)}
  .w2p-tariffs{grid-template-columns:minmax(0,1fr)}
  /* Сноска у hero остаётся на мобильном, прижата к левому нижнему углу блока. */
  .w2p-vhero-note{left:var(--site-gutter);right:auto;top:auto;bottom:4vh;width:84%}
  .w2p-section--overhero{margin-top:-60vh}

  /* Подарки, мобильный: заголовок под шапкой, одна плитка по центру, подпись под ней. */
  .w2p-gifts-title{top:calc(clamp(78px,5.4vw,108px) + 8vh);width:88%}
  /* Только на мобильном первая строка переносится на две. */
  .w2p-gifts-title .w2p-display:first-child{white-space:normal}
  :root{--orbit-tile:52vw;
    --orbit-top:calc(clamp(78px,5.4vw,108px) + 8vh + 3.3 * var(--fs-section)
      + 28px + var(--orbit-tile) / 2)}

  /* Утверждение, мобильный: заголовок стопкой сверху, плашка на всю ширину под ним. */
  .w2p-statement{height:168vw;min-height:0;margin-top:-14vh;margin-bottom:12vh}
  .w2p-statement-plate{left:0;width:100%;top:46%;height:54%}
  .w2p-statement-copy{top:calc(clamp(78px,5.4vw,108px) + 8vh);width:88%}

  /* Строки каталога складываются: артворк сверху, затем заголовок + описание + шеврон в ряд. */
  .w2p-pc{min-height:0;padding:0;overflow:hidden}
  .w2p-pc-inner{flex-direction:column;gap:0;align-items:stretch}
  .w2p-pc-media{width:100%;height:148px;align-self:auto}
  .w2p-pc-media>span,.w2p-pc-media>span.is-cover{position:absolute;inset:0;left:0;top:0;
    width:100%;height:100%}
  .w2p-pc-body{flex-direction:row;align-items:center;gap:12px;padding:16px 52px 16px 16px;width:100%}
  .w2p-pc-text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
  /* шеврон — сосед .w2p-pc-inner, поэтому на мобильном он прижат в строку с текстом */
  .w2p-pc-arrow{position:absolute;right:16px;bottom:26px;top:auto}
}