/* Первый экран использует Onest, палитру и кнопки-пилюли основного сайта. */
:root{font-family:Onest,Arial,sans-serif;color:#18130d;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}

/* Масло красит не только сцену: фон всей страницы уводится в его сторону,
   а поверх ложится заливка от краёв вьюпорта — без формы и видимой границы,
   поэтому это читается как смена света в кадре, а не как ещё одно пятно. */
:root{background:color-mix(in srgb,var(--oil-wash) 9%,#f0eee8)}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.18;background:radial-gradient(140% 100% at 100% 26%,var(--oil-wash),transparent 58%),radial-gradient(120% 92% at 0% 100%,var(--oil-wash),transparent 62%)}
/* Ширина по шапке сайта (`min(1560px, 93vw)` в style.css), а не по узкому
   контейнеру main-content: так первый экран занимает лист целиком. */
.hero{--text:#2f2b26;--accent:#c9a24a;--gold:#f0d688;position:relative;width:min(1560px,calc(100vw - 56px));min-height:740px;height:100svh;margin:auto;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:2%;padding:52px 0 26px;color:var(--text)}

/* Левая колонка: логотип крупно, затем то же обещание, что на главной сайта. */
.copy{z-index:2;padding:0 26px 0 clamp(24px,4vw,80px);transform:translateY(-18px)}
.wordmark{margin:0 0 clamp(22px,1.8vw,28px);font-size:clamp(46px,5.2vw,76px);font-weight:900;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--oil-accent,var(--accent))}
h1{margin:0;font-size:clamp(28px,3.1vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.02em}
h1 .accent{color:var(--oil-accent,var(--accent))}
.description{max-width:540px;margin:24px 0 34px;font-size:clamp(14px,1.2vw,17px);line-height:1.65;color:#2f2b26c7}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-title-mobile,.hero-eyebrow-mobile,.catalog-arrow,.product-text-mobile{display:none}
.oil-info{display:contents}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:210px;padding:16px 30px;border-radius:999px;border:2px solid var(--text);font-size:15px;font-weight:600;line-height:1;text-decoration:none;box-shadow:0 10px 24px #2f2b2614;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.btn-primary{background:var(--text);color:var(--gold)}
.hero .btn-primary:hover,.hero .btn-primary:focus-visible{transform:scale(1.03);background:#3d3730;border-color:#3d3730;color:var(--gold)}
.btn-secondary{background:transparent;color:var(--text)}
/* Не инверсия, как на сайте, а тот же мягкий отклик, что у основной кнопки. */
.hero .btn-secondary:hover,.hero .btn-secondary:focus-visible{transform:scale(1.03);background:#2f2b260d;border-color:#3d3730;color:var(--text)}

.composition{position:relative;height:100%;min-height:540px;max-height:900px;isolation:isolate}
.sun{position:absolute;top:18%;left:1%;width:92%;aspect-ratio:1;border-radius:49% 51% 47% 53%;background:#ddbd64;opacity:.77;transform:rotate(-14deg);z-index:-1}
/* Бутылка занимает 86% высоты сцены — размер задаёт высота канваса, не ширина. */
#bottle,.poster{position:absolute;inset:3% 0 11%;width:100%;height:86%;object-fit:contain;z-index:1}
#bottle{touch-action:pan-y;cursor:ns-resize}
#bottle canvas{display:block;width:100%;height:100%}
.poster{pointer-events:none}
.poster[hidden]{display:none}
.bottle-shadow{position:absolute;bottom:10%;left:32%;width:34%;height:16px;border-radius:50%;background:var(--oil-ink,#56452b);filter:blur(12px);opacity:.16}
:focus-visible{outline:2px solid var(--oil-accent,var(--accent));outline-offset:5px}

@media(min-width:851px) and (max-width:1199px){
  .copy{padding-left:20px}
}
@media(max-width:850px){
  .hero{width:min(1560px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:100svh;gap:28px;padding:48px 0 30px}
  .copy{padding:0;transform:none}
  .wordmark{margin-bottom:20px;font-size:clamp(42px,8vw,60px)}
  h1{font-size:clamp(28px,4.7vw,38px)}
  .description{margin:22px 0 30px;font-size:15px}
  .actions{gap:12px}
  .btn{flex:1 1 44%;min-width:0;font-size:15px}
  .composition{height:560px;min-height:0;flex:none}
  /* У нижнего края сцены стоит переключатель масел: ссылка в историю уходит
     из абсолютного угла в поток, иначе они наезжают друг на друга. */
  .hero .story-jump{position:static;align-self:flex-start}
}
/* Телефон. Узкая колонка с названием и ценой поверх бутылки на такой ширине
   превращалась в ленту из двух-трёх букв, поэтому сцена делится надвое:
   сверху бутылка, снизу полоса высотой --stage-foot под подпись и переключатель. */
@media(max-width:700px){
  .hero{gap:20px;padding:40px 0 26px}
  .wordmark{margin-bottom:14px;font-size:clamp(34px,9.5vw,44px)}
  h1{font-size:clamp(26px,7vw,32px)}
  .description{margin:16px 0 18px;font-size:15px}
  .actions{gap:10px;flex-wrap:nowrap}
  .btn{flex:1 1 0;padding:15px 14px;font-size:14px;white-space:nowrap}
  /* Бутылка считается и от высоты экрана, и от ширины: в альбомной ориентации
     одна высота вьюпорта оставила бы от сцены узкую полоску. */
  .composition{--stage-foot:176px;height:calc(clamp(210px,max(31svh,44vw),320px) + var(--stage-foot))}
  /* Высота задаётся явно: у постера `height:auto` берётся из пропорций картинки,
     нижний inset он игнорирует и вылезает за сцену. */
  #bottle,.poster,.backdrop{inset:0 0 auto;height:calc(100% - var(--stage-foot))}
}
/* Ниже 360 px две кнопки в строку упираются друг в друга — они встают столбиком. */
@media(max-width:360px){
  .actions{flex-wrap:wrap}
  .btn{flex:1 1 100%}
}
@media(min-width:851px) and (max-height:780px){
  .hero{padding-top:44px;min-height:680px}
  .copy{transform:translateY(-10px)}
  .wordmark{margin-bottom:22px}
  .description{margin:18px 0 26px}
}