/* Playfair самохост: variable-файл Google (700 і 800 — той самий бінарник),
   тільки latin — гарнітура на сайті лише для латинських написів (LOUNGE,
   We Create); кирилиця йде гротеском. font-display:swap як і було в Google CSS */
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
  src:url(fonts/playfair-latin-bold.woff2) format("woff2");
}

:root{
  --cream:#f4efe8;
  --dark:#2a1810;
  --accent:#c98a3e;
  --font: "Helvetica Neue", Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  background:var(--cream);
  color:var(--dark);
  font-family:var(--font);
  overflow-x:clip;
}

.progress-bar{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:rgba(0,0,0,.08); z-index:100;
}
.progress-fill{
  height:100%; width:0%; background:var(--dark);
  transform-origin:left;
}

/* ===== МЕНЮ (той самий патерн, що й на ПЛЕТІНЦІ) =====
   Серпанок згори тримає меню читабельним уже на першому кадрі, не глушачи його;
   на скролі смуга ущільнюється і стає ще нижчою */
/* Кавово-коричнева, а не чорна: чорна панель зливалася б з темною кімнатою
   першого кадру. Ця світліша за кімнату (видно з першого кадру) і темніша за
   кремові секції далі — тож працює на обох фонах з тим самим кремовим текстом.
   Товщина стала — на скролі змінюється тільки глибина кольору */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:10px 32px;
  background:rgba(74,44,26,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(0,0,0,.28);
  transition:background .35s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(26,15,9,.92);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.nav__logo{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:700; font-size:20px; letter-spacing:.06em;
  color:#f4efe8; text-decoration:none; white-space:nowrap;
}
.nav__links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.nav__links a{
  color:#e8ded0; font-size:13.5px; font-weight:600; text-decoration:none;
  opacity:.85; white-space:nowrap; transition:opacity .2s ease, color .2s ease;
}
@media (hover: hover){
  .nav__links a:hover{ opacity:1; color:var(--accent); }
}

/* CTA = кавове зерно: еліпс під кутом (зерна не лежать рівно) + борозна */
.nav__cta{
  position:relative; flex-shrink:0; isolation:isolate;
  display:inline-flex; align-items:center;
  padding:10px 24px; border-radius:50%;
  background:linear-gradient(135deg,#7a4a2e 0%,#4a2c1a 55%,#33200f 100%);
  color:#f4efe8; text-decoration:none;
  font-size:12px; font-weight:700; white-space:nowrap;
  transform:rotate(-6deg);
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(244,239,232,.16);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover){
  .nav__cta:hover{ transform:rotate(-6deg) scale(1.06); }
}
/* z-index:-1 малює борозну ПОВЕРХ фону кнопки, але ПІД її текстом */
.nav__cta-crease{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:-1;
}
.nav__burger{
  display:none; width:34px; height:26px; padding:4px;
  border:none; background:none; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav__burger span{ display:block; height:2px; border-radius:2px; background:#f4efe8; }

@media (max-width:760px){
  /* блюр геть: панель висить над героєм, який щокадру скейлить два шари, і
     backdrop-filter пересемплював це кожен кадр — мікросмикання на скролі.
     Фон .92 і так майже непрозорий, різниці не видно */
  .nav{ padding:9px 18px; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav > .nav__cta{ display:none; }
}

.nav__overlay{
  position:fixed; inset:0; background:rgba(18,13,8,.5); z-index:290;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav__overlay.open{ opacity:1; pointer-events:auto; }
/* заблокований скрол/свайп сторінки, поки відкрите бічне меню (як на ПЛЕТІНЦІ) */
html.menu-open, body.menu-open{ overflow:hidden; overscroll-behavior:none; touch-action:none; }

.nav__mobile{
  position:fixed; top:0; right:0; bottom:0;
  width:78vw; max-width:320px; z-index:300;
  /* фото інжектиться скриптом при першому відкритті, щоб не тягнути його
     на старті наввипередки з героєм; колір — підкладка, поки воно не прийшло */
  background:#1a0f09 center/cover no-repeat;
  display:flex; flex-direction:column; gap:22px;
  padding:78px 28px 28px;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.nav__mobile.open{ transform:translateX(0); }
.nav__mobile a{ color:#f4efe8; font-size:22px; font-weight:600; text-decoration:none; }
/* margin-top:auto зганяє кнопку в самий низ панелі. Просто збільшити пункти
   недосить: дівчина п'є з горнятка, тобто стаканчик стоїть одразу під
   підборіддям — кнопка сіла б рівно на нього.
   max-width + перенос рядка обов'язкові: з nowrap кнопка була 277px і вилазила
   за панель (на 360px екрані — на 23px, на 320 — на 54), а вебв'ю Threads
   якраз вужчий за звичайний браузер. Заодно два рядки роблять еліпс круглішим —
   ближче до справжнього зерна */
.nav__mobile .nav__cta{
  align-self:flex-start; margin-top:auto;
  max-width:100%;
  white-space:normal; text-align:center; line-height:1.35;
  padding:12px 22px;
}
.nav__close{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:#f4efe8; font-size:26px; line-height:1;
  cursor:pointer;
}

/* ===== HERO (zoom-reveal — оригінальний прототип «вкусняшка») ===== */
.wrapper,
.content{
  position:relative; width:100%; z-index:1;
}
.content{ overflow-x:hidden; }
/* Скрізь по секціях: 100vh + 100svh наступним рядком. svh = висота з ВИДИМИМ
   адресним рядком, вона не змінюється при його зникненні — тож лейаут не
   стрибає посеред скролу (ignoreMobileResize рятує ScrollTrigger, але не CSS).
   Рядок з vh лишається фолбеком для старих браузерів */
.content .section{ width:100%; height:100vh; height:100svh; }
.content .section.hero-scene{
  position:relative;
  will-change:transform;
  background-color:#1c0f08;
  /* гори за вікном — самохост (був хотлінк на unsplash 2070px JPEG: зовнішня
     залежність у критичному кадрі + важкий декод на мобілці; цей шар ще й
     скейлиться до 2.4 під час напливу) */
  background-image:url(assets/hero-mountains.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* стаканчик LOUNGE поверх гір — окремий елемент, а не шар фону, щоб GSAP міг
   крутити його на 360° під час напливу */
/* will-change + backface-visibility обов'язкові для in-app браузерів (Threads,
   Instagram): там слабша композиція, і без власного GPU-шару оберт стаканчика
   смикається — він крутиться одночасно з напливом двох інших шарів */
.hero-cup{
  position:absolute; left:50%; top:50%;
  height:38%; width:auto;
  transform:translate(-50%,-50%);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.image-container{
  width:100%; height:100vh; height:100svh;
  position:absolute; top:0; left:0; right:0;
  z-index:2; perspective:500px; overflow:hidden;
}
.image-container img{
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* «We Create» / «The Future» are baked into hero-room.webp at the far left and
   right of the 3016×1697 frame. A portrait screen shows only the middle ~26%
   of the width, which slices those words into stray letter fragments at both
   edges. Crop tighter (clean band is 39%–59.7%) so they fall outside the frame
   entirely, then re-add the words below as real text. */
@media (max-width:760px){
  .image-container img{
    position:absolute; left:0; top:-15%;
    width:100%; height:130%;
    object-position:49.2% center;
  }
  /* the cup is sized off viewport height, so on a tall narrow screen it swells
     to ~70% of the porthole and buries the view — hold it to about a third */
  .hero-cup{ height:18%; }
}
.hero-line{ display:none; }
@media (max-width:760px){
  .hero-line{
    display:block; position:absolute; left:0; right:0; z-index:4;
    text-align:center; pointer-events:none;
    color:#f7f2ea; font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    font-weight:700; font-size:31px; line-height:1;
    text-shadow:0 2px 24px rgba(0,0,0,.75);
  }
  .hero-line small{ font-size:.6em; font-weight:700; }
  /* їде вниз слідом за брендом (той пішов з 3% на 8% через смугу меню); знизу
     запас до обода ілюмінатора ще великий — дуга починається аж на ~191px */
  .hero-line-top{ top:calc(19.5% - 44px); }
  /* tuck it into the bottom-right corner, clear of the porthole's arc: at
     x 220–370 the rim bottoms out around y 540–627, so sit below that */
  .hero-line-bot{
    top:auto; bottom:calc(17% - 15px); left:auto; right:5%; text-align:right;
  }
}
.hero-content{
  position:absolute; top:0; left:0; z-index:3;
  padding:60px 0 0 60px;
}
/* ---- стрічка-тікер героя ----
   Слова не лізуть на стаканчик, а тримають нижній край кадру: власна поверхня
   (градієнт + волосінь зверху) робить смугу свідомим елементом, а не текстом,
   що випадково ліг на фото. Капс гротеску тримає ритм з маркі у футері;
   кожне друге слово — контуром, крізь нього видно краєвид. */
.hero-ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  overflow:hidden; opacity:0; pointer-events:none;
  padding:18px 0;
  background:linear-gradient(180deg, rgba(18,13,8,0) 0%, rgba(18,13,8,.68) 42%, rgba(18,13,8,.88) 100%);
  border-top:1px solid rgba(247,242,234,.16);
}
/* дубльований набір + зсув рівно на половину доріжки = безшовний луп */
.hero-ticker-track{
  display:flex; align-items:center; gap:38px; width:max-content;
  animation:heroTicker 34s linear infinite;
}
.hero-ticker-track span{
  font-family:var(--font); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,3.4vw,56px); letter-spacing:-.01em;
  white-space:nowrap; color:#f4efe8;
}
.hero-ticker-track span.ghost{
  color:transparent; -webkit-text-stroke:1.5px rgba(244,239,232,.9);
}
.hero-ticker-track img{
  width:42px; height:42px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
@keyframes heroTicker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:760px){
  /* смуга нижча, кегль дрібніший, швидкість та сама — на вузькому екрані слово
     проходить повз швидше, і 34s читались би як ривок */
  .hero-ticker{ padding:12px 0; }
  .hero-ticker-track{ gap:22px; animation-duration:22s; }
  .hero-ticker-track span{ font-size:24px; }
  .hero-ticker-track span.ghost{ -webkit-text-stroke-width:1.2px; }
  .hero-ticker-track img{ width:26px; height:26px; }
}
/* 12%, а не 6%: бренд росте на скролі до 1.85 від ЦЕНТРУ, тобто верх іде вгору
   на ~57px — при 6% він заповзав під смугу меню.
   Темна обводка обов'язкова: після розкриття вікна бренд стає золотим і висить
   на засніжених горах, де без неї пливе. paint-order кладе обводку ПІД заливку,
   інакше вона з'їдає тонкі засічки Playfair */
.hero-brand{
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  z-index:4; color:#f7f2ea;
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-size:clamp(24px,3.6vw,56px); font-weight:700; letter-spacing:.10em;
  white-space:nowrap; pointer-events:none;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
  -webkit-text-stroke:1.2px rgba(12,8,5,.92);
  paint-order:stroke fill;
}
/* must come after the base .hero-brand — same specificity, so source order
   decides which one wins */
@media (max-width:760px){
  /* на маленькому кеглі золото на снігу пливе — темна обводка тримає літери.
     paint-order кладе її ПІД заливку, інакше обводка з'їдає тонкі засічки */
  /* 8% замість 3%: смуга меню має низ на 45–51px, і бренд лежав просто під нею.
     Обводка тонша за десктопну — кегль тут 30px, а не 52 */
  .hero-brand{
    top:8%; font-size:30px;
    -webkit-text-stroke:1px rgba(12,8,5,.92);
  }
}
.hero-eyebrow{
  color:#e8ded0; letter-spacing:.15em; font-size:13px; font-weight:600; margin-bottom:10px;
  opacity:0; transform:translateY(20px);
}
.hero-title{
  font-size:clamp(60px,14vw,190px);
  font-weight:800;
  color:#f7f2ea;
  line-height:.85;
  letter-spacing:-.02em;
  opacity:0; transform:translateY(40px);
}
.hero-card{
  position:absolute; left:60px; bottom:70px; z-index:2;
  max-width:260px; background:rgba(30,18,10,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15); border-radius:6px;
  padding:22px; color:#f0e8dd; font-size:15px; line-height:1.4;
  opacity:0; transform:translateY(30px);
}
.hero-card-right{
  left:auto; right:60px; max-width:300px; text-align:right;
}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#cbbfae; font-size:11px; letter-spacing:.2em;
  opacity:0;
}
.scroll-line{
  width:1px; height:28px; background:#cbbfae; overflow:hidden; position:relative;
}
.scroll-line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent);
  animation:scrollDrop 1.6s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}

/* ===== COLOR SWITCHER ===== */
.switcher{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px 60px 100px;
  text-align:center;
  position:relative;
}
.switcher-title{
  font-size:clamp(30px,5.4vw,64px);
  font-weight:800; line-height:1.08; letter-spacing:-.01em;
  margin-bottom:10px;
  max-width:900px;
}
.cup-stage{
  position:relative;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  margin:40px auto 0;
}
.cup-photo-wrap{
  position:relative; width:320px; flex-shrink:0;
}
.cup-photo{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.18));
}
.cup-photo-back{
  position:absolute; top:0; left:0; opacity:0;
}
.cup-photo-shadow{
  width:70%; height:22px; margin:-14px auto 0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.22), transparent 70%);
}
.swatches-block{
  position:absolute; left:100%; margin-left:34px; top:60%; margin-top:-10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  width:max-content;
}
.swatches{
  display:flex; align-items:flex-start; gap:14px;
}
.swatch{
  width:52px; padding:0; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:1; transform:scale(1); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.swatch img{ width:100%; height:auto; pointer-events:none; }
/* hover — тільки там, де є справжній курсор. На тачі :hover «залипає»: перший
   тап лише роздував свотч, а колір мінявся аж з другого */
@media (hover: hover){
  .swatch:hover{ transform:scale(1.12); }
}
.swatch.active{ transform:scale(1.22); }
.swatch-dot{
  width:6px; height:6px; border-radius:50%; background:transparent;
  transition:background .2s;
}
.swatch.active .swatch-dot{ background:#2a1810; }
.switcher-corner{
  position:absolute; left:270px; bottom:15px;
  font-size:13px; font-weight:700; line-height:1.4; text-align:left; color:#2a1810;
}
.switcher-caption{
  max-width:220px; font-size:13px; line-height:1.4; color:#4a382c; text-align:left;
}
.switcher-desc strong{
  display:block; font-size:15px; margin-bottom:-3px; color:#2a1810;
  position:relative; top:8px;
}

@media (max-width:900px){
  .switcher{ padding:80px 24px 60px; }
  .cup-stage{ flex-direction:column; gap:24px; }
  .cup-photo-wrap{ width:220px; margin:0 auto; }
  .swatches-block{
    position:static; margin-left:0; align-items:center; gap:16px;
    width:100%; max-width:280px;
  }
  .switcher-corner{
    position:static; order:2; text-align:center;
  }
  .switcher-caption{ max-width:260px; text-align:center; }
}

/* ===== CLOCK SECTION ===== */
.clock-section{
  min-height:100vh; min-height:100svh;
  position:relative;
  background:#f4efe8;
}
.clock-pin{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 20px;
}
.clock-pin h2{
  font-size:clamp(32px,6vw,64px); font-weight:800; margin-bottom:14px;
}
.clock-desc{
  max-width:480px; color:#5c4a3d; font-size:14px; margin-bottom:40px;
}
.clock-wrap{
  position:relative; width:min(90vw,700px); height:min(90vw,460px);
  display:flex; align-items:center; justify-content:center;
}
.clock-dial{
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #fffdfa 0%, #f9f5ee 62%, #efe6d9 100%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(42,24,16,.07),
    0 0 0 9px #f4efe8,
    0 0 0 10px rgba(42,24,16,.10);
  display:flex; align-items:center; justify-content:center; position:relative;
}
/* minute ticks — 60 hairlines hugging the rim */
.clock-dial::before{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from -0.35deg, rgba(42,24,16,.30) 0deg 0.7deg, transparent 0.7deg 6deg);
  /* closest-side + відлік від 100%: стоп-точки міряються по РАДІУСУ кола-градієнта,
     а не по боксу, тож 100% = радіус циферблата. Зі старим `50%` (та ще й від
     farthest-corner) кільце провалювалось усередину, на підписи */
  -webkit-mask:radial-gradient(circle closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px) calc(100% - 1px), transparent calc(100% - 1px));
  mask:radial-gradient(circle closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px) calc(100% - 1px), transparent calc(100% - 1px));
}
/* hour ticks — 12 longer, darker marks */
.clock-dial::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from -0.9deg, rgba(42,24,16,.62) 0deg 1.8deg, transparent 1.8deg 30deg);
  -webkit-mask:radial-gradient(circle closest-side, transparent calc(100% - 12px), #000 calc(100% - 12px) calc(100% - 1px), transparent calc(100% - 1px));
  mask:radial-gradient(circle closest-side, transparent calc(100% - 12px), #000 calc(100% - 12px) calc(100% - 1px), transparent calc(100% - 1px));
}
.clock-hand{
  position:absolute; left:50%; top:50%;
  transform-origin:top center; border-radius:999px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
/* hour hand: short and heavy */
.hand-major{
  width:5px; height:84px; background:#2a1810;
  transform:translateX(-50%) rotate(-135deg);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* minute hand: long and slim, in the accent tone */
.hand-minor{
  width:3px; height:118px; background:var(--accent);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.clock-pivot{
  position:absolute; left:50%; top:50%; width:11px; height:11px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%); box-shadow:0 0 0 5px #fbf8f3;
  transition:background .4s ease; z-index:2;
}
.clock-label{
  position:absolute; right:calc(50% + 22px); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.clock-label em{ font-style:normal; font-size:13px; font-weight:600; color:#2a1810; }
.clock-label-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  transition:background .4s ease;
}
.clock-caption{
  position:absolute; bottom:30px; font-size:10px; letter-spacing:.15em; color:#8a7a6a;
}

/* z-index обов'язковий: у розмітці стаканчики стоять ПЕРЕД циферблатом, тож без
   нього дифер малюється поверх них — на мобілці, де він ширший, нижні стаканчики
   заходили під нього */
.mini-cup{
  position:absolute; z-index:2; width:120px; padding:0; border:none; background:none; cursor:pointer;
  filter:grayscale(0) saturate(1); opacity:1; transform:scale(1) translateY(0);
  transition:filter .4s ease, opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.mini-cup img{
  width:100%; height:auto; display:block; pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.16));
}
@media (hover: hover){
  .mini-cup:hover{ transform:scale(1.08) translateY(-6px); }
}
/* .tapped обов'язковий: на тачі активний стаканчик ставить саме його, а не :hover,
   інакше сірими стають усі чотири разом із натиснутим */
.clock-wrap.hovering .mini-cup:not(:hover):not(.tapped){ filter:grayscale(1) saturate(.4); opacity:.5; }

.mini-tl{ left:0; top:2%; }
.mini-tr{ right:0; top:2%; }
.mini-bl{ left:0; bottom:2%; }
.mini-br{ right:0; bottom:2%; }

.clock-dot{
  position:absolute; left:50%; top:50%; width:15px; height:10px; border-radius:50%;
  background:linear-gradient(135deg,#7a4a2e,#4a2c1a);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.12);
  opacity:.85;
}
.clock-dot::after{
  content:""; position:absolute; top:50%; left:12%; right:12%; height:1.5px;
  background:rgba(0,0,0,.45); border-radius:2px; transform:translateY(-50%) rotate(-10deg);
}
/* beans ring the dial rim (radius 178 ≈ 150 dial + 28 gap) so they read as
   markers around the face instead of floating in empty space */
.dot-n{ transform:translate(-50%,-50%) translateY(-178px) rotate(12deg); }
.dot-s{ transform:translate(-50%,-50%) translateY(178px) rotate(-12deg); }
.dot-e{ transform:translate(-50%,-50%) translateX(178px) rotate(78deg); }
.dot-w{ transform:translate(-50%,-50%) translateX(-178px) rotate(102deg); }
.dot-ne{ transform:translate(-50%,-50%) translate(126px,-126px) rotate(45deg); }
.dot-nw{ transform:translate(-50%,-50%) translate(-126px,-126px) rotate(-45deg); }
.dot-se{ transform:translate(-50%,-50%) translate(126px,126px) rotate(-45deg); }
.dot-sw{ transform:translate(-50%,-50%) translate(-126px,126px) rotate(45deg); }

/* ===== ELEVATE / ROASTING VIDEO ===== */
.elevate{
  position:relative; height:100vh; height:100svh; overflow:hidden; background:#0c0805;
}
.elevate-video{
  position:absolute; left:0; width:100%;
  /* зріз верхньої некрасивої смуги кадру (розмите темне тло над барабаном):
     бокс вищий за секцію і зсунутий угору — overflow:hidden секції відрізає
     верхні ~15% відео. НЕ scale: він милив би картинку */
  top:-18%; height:118%;
  object-fit:cover; object-position:center center;
}
.elevate-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,6,3,.92) 0%, rgba(10,6,3,.6) 40%, rgba(10,6,3,.08) 68%);
}
.elevate-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 60px 90px; max-width:520px;
}
.elevate-eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:14px;
}
.elevate-desc{
  font-size:14px; line-height:1.6; color:#cabbab; max-width:320px; margin-bottom:30px;
}
.elevate-title{
  font-size:clamp(32px,5.4vw,72px); font-weight:800; color:#f7f2ea; line-height:1.05;
}
@media (max-width:720px){
  .elevate-content{ padding:0 24px 60px; max-width:none; }
  .elevate-desc{ max-width:none; }
}

/* ===== STATEMENT ===== */
.statement{
  height:220vh; height:220svh;
  position:relative;
  background:#1c0f08;
}
.statement-pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  padding:0 60px;
}
.statement-media{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 60% 40%, rgba(120,70,30,.35), transparent 60%),
    linear-gradient(120deg,#241208,#100804 80%);
}
.statement-cup-canvas{
  position:absolute;
  right:8%; top:54%;
  transform:translateY(-50%);
  width:clamp(340px,44vw,640px);
  height:auto;
  aspect-ratio:480/498;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 78%, transparent 100%);
  mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 78%, transparent 100%);
  pointer-events:none;
}
@media (max-width:720px){
  /* 48vh cap keeps the cup inside the pinned screen on short phones */
  .statement-cup-canvas{ position:static; transform:none; width:min(86vw,380px,48vh); margin:0 auto; }
}
.statement-text{
  position:relative; z-index:2;
  align-self:flex-start;
  margin-top:22vh;
  margin-left:13vw;
}
.statement-text h2{
  font-size:clamp(28px,4.6vw,58px); font-weight:800; color:#f7f2ea; line-height:1.07;
}
.statement-quote{
  position:relative; z-index:2; margin-left:auto; align-self:flex-start;
  margin-top:22vh; max-width:280px;
  color:#e8ded0; font-size:16px; text-align:right; line-height:1.4;
}

@media (max-width:720px){
  .hero{ flex-direction:column; }
  .hero-card,.hero-card-right{ position:static; max-width:none; margin:16px 20px; text-align:left; }
  .hero-content{ padding:40px 20px 0; }
  .cup-stage{ flex-direction:column; gap:24px; }
  .swatches{ flex-direction:row; }
  .clock-wrap{ height:min(120vw,520px); }
  .mini-cup{ width:78px; }
  .clock-dot{ display:none; }
  /* «золота година» reaches 100px from the centre, so the ring the ticks sit on
     has to clear that: widen the face to 272 AND pull the ticks in shorter
     (11px bite instead of 18) so the ring's inner edge lands at 125 — a 25px
     gap. Corner cups stay clear: at their inner edge (y±121 from centre) the
     arc is only ~62px wide. */
  .clock-dial{ width:278px; height:278px; box-shadow:0 18px 44px rgba(0,0,0,.10), inset 0 0 0 1px rgba(42,24,16,.07), 0 0 0 7px #f4efe8, 0 0 0 8px rgba(42,24,16,.10); }
  .hand-major{ height:78px; }
  .hand-minor{ height:108px; }
  /* циферблат вужчий (278), тож кільце міток ближче до центру — підпис треба
     підняти, інакше «LOUNGE COFFEE» впирається кутами у мітки */
  .clock-caption{ bottom:32px; }
  /* in the default «золота година» state the minute hand leaves the pivot at 45°
     down-left, straight into the label's tail — hold the label 20px off centre
     so it starts outside the hand's path */
  .clock-label{ right:calc(50% + 20px); }
  .clock-label em{ font-size:11px; }
  /* keep a tall scroll track + sticky pin: the frame scrub needs real scroll
     distance, otherwise start/end collapse onto the same point */
  .statement{ height:260vh; height:260svh; }
  .statement-pin{ position:sticky; top:0; height:100vh; height:100svh; flex-direction:column; justify-content:center; gap:20px; padding:40px 24px; }
  .statement-media{ position:static; inset:auto; background:none; }
  .statement-text{ margin-left:0; margin-top:0; }
  .statement-quote{ text-align:left; margin-left:0; margin-top:0; max-width:none; }
}

/* ===== FAQ ===== */
/* ===== MOOD ===== */
/* Фон той самий, що в .statement над нею — перехід згори безшовний, а знизу
   лишається чистий контраст із кремовим FAQ */
.mood{
  background:#1c0f08;
  padding:110px 24px;
}
.mood-stage{
  position:relative;
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  /* запас навколо плитки: під курсором вона нахиляється в 3D, і без полів
     кути виїжджали б за canvas */
  padding:40px 0;
}
.mood-stage canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.mood-figure{ margin:0; }
/* Розмір задає ця <img> — WebGL читає її getBoundingClientRect і лягає рівно
   туди ж. Сама вона ховається (opacity:0 зі скрипта) щойно сцена готова, але
   без JS/WebGL лишається видимою: холодний кадр як звичайне фото */
.mood-image{
  display:block;
  width:min(42vmin, 340px);
  height:auto;
  border-radius:2px;
}
.mood-hint{
  margin:22px auto 0; text-align:center;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  color:#e2d3bf; text-transform:uppercase;
}
.mood-hint span{ color:#c98a3e; }

@media (max-width:760px){
  /* кадр на всю ширину: бічних полів нема, overflow ріже виліт */
  .mood{ padding:70px 0 34px; overflow:hidden; }
  .mood-stage{ padding:0; max-width:none; }
  /* ⚠️ vmin тут НЕ годиться: на телефоні vmin рахується від ШИРИНИ (390), і
     42vmin давали плитку 164px — загублена марка посеред екрана.
     125vw, а не 100: кадр нахиляється вбік, і на 100vw дальній край
     відходив би від межі екрана — збоку зяяла б смуга фону. Запас 25%
     тримає кадр повнокровним у будь-якому нахилі, а зайве ріже canvas */
  .mood-image{ width:125vw; }
  /* кегль і трекінг підібрані так, щоб рядок ліг В ОДНУ строку на 390px:
     на 12px/.14em «ЙОГО» зривалось на другий рядок і висіло по центру */
  .mood-hint{ padding:0 20px; font-size:11px; letter-spacing:.08em; }
}

.faq{
  padding:140px 60px 110px;
  text-align:center;
  background:var(--cream);
}
.faq-head h2{
  font-size:clamp(32px,5vw,58px);
  font-weight:800; line-height:1.1; letter-spacing:-.01em;
  color:#3a2116;
}
.faq-divider{
  width:60px; height:2px; background:var(--accent);
  margin:22px auto;
}
.faq-desc{
  max-width:560px; margin:0 auto 60px;
  color:#6b5a4a; font-size:15px; line-height:1.65;
}
.faq-list{
  max-width:820px; margin:0 auto; text-align:left;
}
.faq-item{
  position:relative; z-index:1;
  border-top:1px solid rgba(42,24,16,.14);
  padding:26px 0;
}
.faq-item.open{ z-index:2; }
.faq-item:last-child{ border-bottom:1px solid rgba(42,24,16,.14); }
.faq-q{
  display:flex; align-items:center; gap:16px; cursor:pointer;
}
.faq-icon{
  width:20px; height:20px; flex-shrink:0; color:var(--dark);
}
.faq-question-text{
  flex:1; font-weight:700; font-size:17px; line-height:1.4;
}
.faq-chevron{
  width:16px; height:16px; flex-shrink:0; color:var(--dark);
  transition:transform .35s ease;
}
.faq-item.open .faq-chevron{ transform:rotate(180deg); }

/* answer floats over the items below instead of pushing them down, so the
   section never resizes/jitters as the accordion opens and closes; the open
   item is raised above its siblings (z-index) so the floating card fully
   covers whatever sits underneath instead of interleaving with it */
.faq-answer{
  position:absolute; left:0; right:0; top:100%;
  padding:14px 20px 18px 0;
  background:var(--cream);
  box-shadow:0 18px 30px rgba(42,24,16,.12);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  /* closing is instant: the card floats over the items below, so fading it out
     showed the answer and the questions underneath at the same time */
  transition:none;
}
.faq-item.open .faq-answer{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .3s ease, transform .35s ease;
}
.faq-answer p{
  max-width:600px; margin-left:36px; font-size:14.5px; line-height:1.75; color:#5c4a3d;
}

@media (max-width:720px){
  .faq{ padding:90px 24px 70px; }
  .faq-question-text{ font-size:15px; }
}

/* ===== CLOUDS ===== */
/* Фон чорний, як у прототипі: там контейнеру підкладали 32px-canvas, залитий
   дефолтним чорним (градієнт у демо закоментований) — хмари світяться туманом
   на темному, і це лягає під тон футера */
.clouds{
  position:relative;
  height:100vh; height:100svh;
  background:#05070a;
  overflow:hidden;
}
.clouds-canvas{
  position:absolute; inset:0;
  opacity:0; transition:opacity .8s ease;
}
/* Плашка на всю ширину, притиснута до самого низу — сідає на стик із футером.
   Фон градієнтом, а не суцільним: угорі прозорий, донизу набирає колір футера
   (#120d08), тож смуга не лежить на хмарах прямокутником, а виростає з них і
   без шва переходить у футер. Плашка потрібна саме тому, що хмарне море то
   біле, то темне — голі літери на ньому місцями тонули б */
.clouds-hint{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2; margin:0; padding:26px 20px 20px;
  text-align:center;
  background:linear-gradient(180deg, rgba(18,13,8,0) 0%, rgba(18,13,8,.85) 55%, #120d08 100%);
  color:#f4efe8; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  pointer-events:none;
  opacity:0; transition:opacity .8s ease;
}
.clouds-hint span{ color:#c98a3e; }
/* показуємо разом зі сценою — до першого кадру плашка висіла б на порожньому фоні */
.clouds.clouds-ready .clouds-hint{ opacity:1; }
/* ⚠️ Цей оверрайд мусить стояти САМЕ ТУТ, після базового правила. Спершу поклав
   його в мобільний блок .mood вище — специфічність однакова (0,1,0), медіа-запит
   її НЕ піднімає, тож вигравало базове 11px і «РОЗСТУПЛЯТЬСЯ» так і зривалось
   на другий рядок. Ті самі граблі, що вже були з .hero-brand */
@media (max-width:760px){
  .clouds-hint{ font-size:10px; letter-spacing:.04em; padding:26px 10px 18px; }
}
/* показуємо аж коли three намалював перший кадр — інакше в мить появи canvas
   блимає порожнім прямокутником */
.clouds.clouds-ready .clouds-canvas{ opacity:1; }
.clouds-canvas canvas{ display:block; }
/* без WebGL секція лишається просто темною смугою між FAQ і футером */
.clouds.clouds-off{ height:0; }

/* ===== FOOTER ===== */
.site-footer{
  background:#120d08; color:#f4efe8; overflow:hidden;
}
.footer-marquee{
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:30px 0;
  overflow:hidden;
}
.footer-marquee-track{
  display:flex; align-items:center; gap:44px; width:max-content;
  animation:footerMarquee 24s linear infinite;
}
.footer-marquee-track span{
  font-size:clamp(30px,5.6vw,68px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; white-space:nowrap;
}
.footer-marquee-track img{
  width:46px; height:46px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
@keyframes footerMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.footer-info{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:20px 60px;
  font-size:11px; letter-spacing:.04em; line-height:1.6; color:#a89a8a;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* це запрошення до дії, а не дрібний шрифт — має бути найгучнішим з трьох рядків
   футера: старий #8a7a6a давав лише ~4.7:1 на #120d08 і 11px мономи з розрядкою
   читались погано */
.footer-info-tag{
  font-family:"Courier New",monospace; letter-spacing:.12em; color:#e2d3bf;
  font-size:12px; white-space:nowrap;
}
.footer-info-right{ white-space:nowrap; color:#a89a8a; }
/* `auto 100%` = кадр масштабується по ВИСОТІ смуги, тож входить цілком і чоловік
   видно від голови до ніг без задирання висоти футера. Тримається правого краю:
   по центру він опинявся рівно під стікерами, а праворуч від них порожньо */
.footer-stickers-bg{
  position:relative;
  padding:40px 0;
}
/* Фото — окремий шар з МАСКОЮ, а не картинка під темним градієнтом. Різниця
   принципова: градієнт лише ПРИКРИВАВ фото, і на його лівому краю лишалось ~5%
   яскравого снігу — звідси видимий вертикальний шов. Маска ж стирає пікселі в
   нуль, тож кадр розчиняється у фоні безслідно.
   Ширина 540 = висота смуги × 1.5 (пропорція кадру), тож чоловік влазить цілком */
.footer-stickers-bg::before{
  content:""; position:absolute; top:0; right:0; bottom:0; width:540px;
  pointer-events:none; opacity:.92;
  background:url(assets/footer-photo.webp) center center/cover no-repeat;
  /* до 40% ширини кадру (x≈1116) фото зникає повністю; чоловік стоїть на 1170+,
     тож маска його не чіпає */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40%);
  mask-image:linear-gradient(90deg, transparent 0, #000 40%);
}
/* Дівчина — дзеркало чоловіка на лівому краю. Окремий елемент, а не псевдо:
   ::before зайнятий чоловіком, ::after — вертикальним гасінням.
   Кадр підібрано за ПОГЛЯДОМ: вона стоїть зліва й дивиться ВПРАВО, він справа
   й дивиться ВЛІВО — разом вони дивляться одне на одного крізь фішки.
   Маска дзеркальна до чоловікової: видно до 60%, далі розчиняється вправо.
   Дівчина займає x 16–39% кадру (у боксі 540 це 86–210) — маска її не чіпає */
.footer-photo-she{
  position:absolute; top:0; left:0; bottom:0; width:540px;
  pointer-events:none; opacity:.92;
  background:url(assets/footer-photo-she.webp) center center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, #000 60%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 60%, transparent 100%);
}
/* верхній і нижній зрізи кадру гасимо окремим шаром: горизонтальні межі шва не
   дають, бо збігаються з краями смуги */
.footer-stickers-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    #120d08 0%,
    rgba(18,13,8,0) 15%,
    rgba(18,13,8,0) 85%,
    #120d08 100%);
}
.footer-stickers{
  position:relative; z-index:1;
  max-width:680px; height:280px; margin:0 auto;
}
/* колір кожної фішки задається інлайново через --c/--t: це 4 кольори самого
   продукту (теракота / олива / графіт / бурштин), ті самі, що й кавові моменти
   на годиннику. Світла волосінь по контуру обов'язкова — без неї графітові
   фішки зливаються з темним футером і фото */
.sticker{
  position:absolute;
  background:var(--c,#f4efe8); color:var(--t,#1c1108);
  border-radius:999px; padding:11px 22px;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  box-shadow:0 12px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(244,239,232,.22);
  cursor:pointer;
  transform:rotate(var(--r,0deg));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover){
  .sticker:hover{ transform:rotate(var(--r,0deg)) scale(1.1); }
}
.sticker-round{
  border-radius:50%; width:60px; height:60px; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.sticker-round svg{ width:28px; height:28px; display:block; }

@media (max-width:720px){
  .footer-info{ flex-direction:column; padding:20px 24px; gap:8px; }
  .footer-info-tag{ white-space:normal; }
  /* на вузькому екрані кадр і так влазить майже повністю — лишаємо cover */
  /* на вузькому екрані кадр розтягуємо на всю смугу (він і так входить майже
     цілком), тож маска не потрібна — гасимо тільки верх/низ через ::after */
  .footer-stickers-bg{ padding:24px 0; }
  .footer-stickers-bg::before{
    width:auto; left:0;
    background:url(assets/footer-photo_m.webp) center 42%/cover no-repeat;
    -webkit-mask-image:none; mask-image:none;
  }
  /* на вузькому екрані чоловік розтягнутий на ВСЮ смугу — дівчина лягла б просто
     поверх нього. Двом кадрам поруч тут місця нема */
  .footer-photo-she{ display:none; }
  .footer-stickers{ height:220px; max-width:100%; }
}