/* Анімації. Вмикаються атрибутом <html data-motion="soft|wow">; без нього сайт статичний.
   Анімуємо лише transform і opacity — це рахує відеокарта, верстка не зсувається (CLS = 0).
   Системне «зменшити рух» (prefers-reduced-motion) вимикає все — блок у кінці файла. */

:root { --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- поява блоків при прокручуванні (клас .rv ставить motion.js) ---------- */
[data-motion] :is(.card, .machine, .step, .goods li, .job, .checks li, .faq details, .section h2, .section__sub, .form, .contact__list li) {
  transition: opacity .8s var(--ease), transform .55s var(--ease), box-shadow .35s ease;
}
[data-motion] .rv:not(.is-in) { opacity: 0; transform: translateY(24px); }

/* ---------- відгук на наведення ---------- */
@media (hover: hover) {
  [data-motion] :is(.card, .machine, .step, .goods li, .job):hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .13);
  }
  [data-motion] .card__ico, [data-motion] .machine__ico .i, [data-motion] .goods li .i { transition: transform .45s var(--spring); }
  [data-motion] .card:hover .card__ico { transform: scale(1.1) rotate(-6deg); }
  [data-motion] .machine:hover .machine__ico .i { transform: translateY(-3px) rotate(-8deg); }
  [data-motion] .goods li:hover .i { transform: scale(1.15); }

  [data-motion] .btn { transition: background .2s, border-color .2s, transform .25s var(--spring), box-shadow .25s; }
  [data-motion] .btn:not(.btn--ghost):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 10px 28px color-mix(in oklch, var(--accent) 45%, transparent);
  }
}
[data-motion] .btn:active { transform: scale(.97); }

/* ---------- питання: відповідь розгортається плавно (Chrome/Edge 131+, решта — як раніше) ---------- */
[data-motion] .faq details { interpolate-size: allow-keywords; }
[data-motion] .faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
}
[data-motion] .faq details[open]::details-content { block-size: auto; }
[data-motion] .faq summary::after { transition: transform .35s var(--ease); }
[data-motion] .faq details[open] summary::after { transform: rotate(180deg); }

/* ---------- «надіслано»: галочка, що пружинить ---------- */
[data-motion] .form__msg.is-ok::before {
  content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin-right: .45em; vertical-align: -.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cs-pop .6s var(--spring);
}
@keyframes cs-pop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- плавна зміна теми й мови (View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ========== «Вау»: жива кавова сцена на першому екрані ========== */
.hero__fx { display: none; }
[data-motion="wow"] .hero { position: relative; overflow: hidden; isolation: isolate; }
[data-motion="wow"] .hero__inner { position: relative; z-index: 1; }
[data-motion="wow"][data-scene="cup"] .hero__fx { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* «крема»: великі м'які плями, що повільно перетікають, як розводи в латте */
.blob {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 62%);
  background: radial-gradient(circle in oklch, color-mix(in oklch, var(--accent) 60%, transparent) 0%, transparent 62%);
  opacity: .5; will-change: transform;
  animation: cs-drift 26s ease-in-out infinite alternate;
}
.blob--1 { left: -35vmax; top: -40vmax; }
.blob--2 { right: -38vmax; bottom: -48vmax; animation-duration: 32s; animation-delay: -8s;
  background: radial-gradient(circle, color-mix(in srgb, var(--cream-2) 45%, transparent) 0%, transparent 60%);
  background: radial-gradient(circle in oklch, color-mix(in oklch, var(--cream-2) 50%, transparent) 0%, transparent 60%); }
.blob--3 { left: 30%; top: 10%; width: 45vmax; height: 45vmax; opacity: .35; animation-duration: 21s; animation-delay: -14s;
  background: radial-gradient(circle, color-mix(in srgb, var(--icon) 45%, transparent) 0%, transparent 60%);
  background: radial-gradient(circle in oklch, color-mix(in oklch, var(--icon) 50%, transparent) 0%, transparent 60%); }
@keyframes cs-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(9%, 7%, 0) scale(1.12) rotate(25deg); }
  100% { transform: translate3d(-6%, 11%, 0) scale(.95) rotate(-15deg); }
}

/* чашка латте згори: окремий блок у сітці першого екрана (лише «Вау») */
.hero__cup { display: none; }
[data-motion="wow"][data-scene="cup"] .hero__cup {
  display: block; position: relative; width: min(64vw, 260px); margin: 8px auto 0;
  perspective: 900px;
}
[data-motion="wow"][data-scene="cup"] .cup {
  display: block; width: 100%; height: auto; overflow: visible;
  /* легке погойдування + нахил за курсором (--px/--py від -0.5 до 0.5 ставить motion.js) */
  transform: rotateX(calc(var(--py, 0) * -14deg)) rotateY(calc(var(--px, 0) * 14deg));
  transition: transform .8s var(--ease);
  animation: cs-bob 7s ease-in-out infinite alternate;
}
@keyframes cs-bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
/* латте-арт обертається повільно й безкінечно — головний «гіпнотичний» рух */
.cup__art { transform-box: view-box; transform-origin: 200px 200px; animation: cs-spin 60s linear infinite; }
/* кільце пінки — назустріч, трохи швидше */
.cup__swirl { transform-box: view-box; transform-origin: 200px 200px; animation: cs-spin 38s linear infinite reverse; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
/* пара над чашкою: м'які розмиті смуги, що піднімаються й тануть */
/* пара стартує з центру чашки й не виходить далеко за неї — не перетинає кнопки й шапку */
.cup__steam { position: absolute; left: 22%; top: -12%; width: 56%; height: 62%; overflow: hidden; pointer-events: none; }
/* верх пари розчиняється, а не обрізається краєм блока */
.cup__steam { -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 95%); mask-image: linear-gradient(to top, #000 45%, transparent 95%); }
.cup__steam path {
  fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round;
  stroke-dasharray: 130 420; opacity: 0;
  animation: cs-steam 5.5s ease-in-out infinite;
}
.cup__steam path:nth-child(2) { animation-delay: -1.8s; animation-duration: 6.4s; }
.cup__steam path:nth-child(3) { animation-delay: -3.6s; animation-duration: 5s; }
@keyframes cs-steam {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  35%  { opacity: .42; }
  100% { stroke-dashoffset: -360; opacity: 0; }
}
/* на світлому першому екрані біла пара не видна — робимо її теплою кремовою */
[data-theme="light"] .cup__steam path, [data-theme="cappuccino"] .cup__steam path, [data-theme="raf"] .cup__steam path { stroke: var(--coffee-2); }
[data-theme="light"] .cup__steam, [data-theme="cappuccino"] .cup__steam, [data-theme="raf"] .cup__steam { opacity: .35; }

@media (min-width: 1000px) {
  /* десктоп: текст | чашка, переваги — рядком під ними */
  [data-motion="wow"][data-scene="cup"] .hero__inner { grid-template-columns: 1.15fr .85fr; grid-template-areas: "text cup" "adv adv"; row-gap: 40px; }
  [data-motion="wow"][data-scene="cup"] .hero__text { grid-area: text; }
  [data-motion="wow"][data-scene="cup"] .hero__cup { grid-area: cup; width: min(100%, 400px); margin: 0 auto; }
  [data-motion="wow"][data-scene="cup"] .hero__adv { grid-area: adv; grid-template-columns: repeat(4, 1fr); }
}

/* ========== «Вау» + сцена «Рідина»: жива поверхня кави на WebGL (fluid.js) ========== */
.hero__fluid { display: none; }
[data-motion="wow"][data-scene="fluid"] .hero { background: #1c100a; color: #fff; }
/* шари: полотно 0 → затінення 1 → текст 2 */
[data-motion="wow"][data-scene="fluid"] .hero__inner { z-index: 2; }
[data-motion="wow"][data-scene="fluid"] .hero__fluid { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* затінення під текстом: молочні розводи бувають світлими, а текст має читатися завжди */
[data-motion="wow"][data-scene="fluid"] .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* під текстом і кнопками (верхні ~70%) — щільніше, нижче, де «скляні» картки, — кава видніша */
  background: linear-gradient(180deg, rgba(14, 8, 5, .66), rgba(14, 8, 5, .58) 68%, rgba(14, 8, 5, .3));
}
@media (min-width: 1000px) {
  [data-motion="wow"][data-scene="fluid"] .hero::before {
    background: linear-gradient(90deg, rgba(14, 8, 5, .8) 0%, rgba(14, 8, 5, .55) 42%, rgba(14, 8, 5, .12) 72%, rgba(14, 8, 5, .25) 100%);
  }
}
/* кава завжди темна — тож текст першого екрана світлий у будь-якій темі */
[data-motion="wow"][data-scene="fluid"] .hero .hero__sub { color: rgba(255, 255, 255, .88); }
[data-motion="wow"][data-scene="fluid"] .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
/* переваги — «скло»: розмита кава просвічує крізь картки */
[data-motion="wow"][data-scene="fluid"] .hero .hero__adv li {
  background: rgba(20, 12, 8, .42); border-color: rgba(255, 255, 255, .16); box-shadow: none;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
[data-motion="wow"][data-scene="fluid"] .hero .ico { background: rgba(255, 255, 255, .12); color: #fff; }
/* слабкий пристрій (fluid.js знизив якість): без розмиття під картками — воно перераховується щокадру */
.fluid-lite[data-motion="wow"][data-scene="fluid"] .hero .hero__adv li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 12, 8, .66); }

/* світіння за курсором (лише миша; координати --mx/--my ставить motion.js) */
.glow {
  position: absolute; left: var(--mx, 70%); top: var(--my, 30%); width: 560px; height: 560px;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%);
  background: radial-gradient(circle in oklch, color-mix(in oklch, var(--accent) 34%, transparent), transparent 62%);
}
@media (hover: hover) and (pointer: fine) {
  [data-motion="wow"][data-scene="cup"] .hero:hover .glow { opacity: 1; }
  /* об'ємний нахил карток машин за курсором (--rx/--ry ставить motion.js) */
  /* .machines у селекторі — щоб переважити загальне правило наведення з :is(… .goods li …) */
  [data-motion="wow"] .machines .machine:hover {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  }
}

/* ========== Мікровзаємодії ========== */

/* заголовок першого екрана «наводиться на різкість» по словах (слова обгортає motion.js у .w з --i).
   Прозорість не чіпаємо — текст видно одразу, лише розмиття й легкий підйом */
[data-motion="wow"] .hero h1 .w { display: inline-block; animation: cs-focus 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes cs-focus { from { filter: blur(10px); translate: 0 .35em; } }

/* світлова пляма, що біжить по картці за курсором (--cx/--cy ставить motion.js) */
@media (hover: hover) and (pointer: fine) {
  [data-motion="wow"] :is(.card, .machine, .step, .job) { position: relative; }
  [data-motion="wow"] :is(.card, .machine, .step, .job)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
    background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 50%) in oklch, color-mix(in oklch, var(--accent) 18%, transparent), transparent 70%);
  }
  [data-motion="wow"] :is(.card, .machine, .step, .job):hover::after { opacity: 1; }

  /* «магнітні» головні кнопки: злегка тягнуться до курсора (--bx/--by ставить motion.js).
     Окрема властивість translate — не заважає transform від наведення й натискання */
  [data-motion="wow"] :is(.hero .btn, .header__cta) {
    translate: var(--bx, 0px) var(--by, 0px);
    transition: background .2s, border-color .2s, transform .25s var(--spring), box-shadow .25s, translate .35s var(--ease);
  }
}

/* ========== Анімації, прив'язані до прокручування (Chrome/Edge; інші — запасний варіант через motion.js) ========== */
/* «скляна» шапка: вміст, що проїжджає під нею, м'яко розмивається, а не просвічує силуетами */
[data-motion] .header { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }

/* тонка смужка прогресу читання під шапкою */
[data-motion] .header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--icon));
  background: linear-gradient(90deg in oklch, var(--accent), var(--icon));
  transform-origin: 0 50%; scale: 0 1;
}
@supports (animation-timeline: view()) {
  [data-motion] .header::after { animation: cs-progress linear both; animation-timeline: scroll(root); }
  @keyframes cs-progress { to { scale: 1 1; } }

  /* блоки випливають рівно в такт прокручуванню, а не за таймером.
     translate/scale — окремі властивості, тож transform від наведення продовжує працювати */
  [data-motion] :is(.card, .machine, .step, .goods li, .job, .checks li, .faq details, .section h2, .section__sub, .form, .contact__list li):not(.modal *, .hero *) {
    animation: cs-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
  }
  /* сусіди в ряду — легким каскадом */
  [data-motion] :is(.cards, .machines, .steps, .goods, .jobs, .checks) > :nth-child(3n+2) { animation-range: entry 8% entry 78%; }
  [data-motion] :is(.cards, .machines, .steps, .goods, .jobs, .checks) > :nth-child(3n) { animation-range: entry 16% entry 86%; }
  @keyframes cs-rise { from { opacity: 0; translate: 0 56px; scale: .96; } }

  /* паралакс першого екрана: чашка відпливає й повертається, текст м'яко відходить */
  [data-motion="wow"][data-scene="cup"] .hero__cup { animation: cs-cup-away linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
  @keyframes cs-cup-away { to { translate: 0 -70px; rotate: -20deg; scale: .9; opacity: .55; } }
  [data-motion="wow"] .hero__text { animation: cs-text-away linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  @keyframes cs-text-away { to { translate: 0 48px; opacity: .35; } }
}

/* ========== Фото: наближення при наведенні, «наїзд камери» при прокручуванні ========== */
[data-motion] :is(.card__img, .coffee__banner, .service__photo) img { transition: scale 1s var(--ease); }
@media (hover: hover) {
  [data-motion] .card:hover .card__img img { scale: 1.07; }
}
@supports (animation-timeline: view()) {
  [data-motion="wow"] :is(.coffee__banner, .service__photo) img {
    animation: cs-kenburns linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
  }
  @keyframes cs-kenburns { from { scale: 1.2; translate: 0 -5%; } to { scale: 1.04; translate: 0 4%; } }
}

/* ========== «Як це працює» — історія при прокручуванні (story.js ставить html.has-story) ========== */
.how__stage { display: none; }
.has-story .how__story { display: grid; gap: 20px; align-items: center; }
.has-story .how__stage {
  display: block; position: relative; width: min(62vw, 240px); aspect-ratio: 1; margin: 0 auto;
}
/* «порцелянова» тарілка під сценою */
.has-story .how__stage::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--cream-2) 75%);
  background: radial-gradient(circle at 35% 30% in oklch, var(--white), var(--cream-2) 75%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .14), inset 0 -8px 20px rgba(0, 0, 0, .05);
}
.how__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.how__ring circle { fill: none; stroke-linecap: round; }
.how__track { stroke: var(--cream-2); stroke-width: 1.5; }
.how__progress { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.how__scene { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; }
.how__main { font-size: clamp(64px, 18vw, 104px); color: var(--icon); stroke-width: 1.4; }
/* супутники повільно кружляють довкола головної іконки, але самі не перевертаються */
.how__orbit { position: absolute; inset: 0; animation: cs-spin 26s linear infinite; }
.how__sat {
  position: absolute; display: grid; place-items: center; width: 46px; height: 46px; font-size: 22px;
  border-radius: 50%; background: var(--white); color: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14); animation: cs-spin 26s linear infinite reverse;
}
.how__sat--a { top: 6%; right: 10%; }
.how__sat--b { bottom: 8%; left: 6%; }
/* у кожної сцени — свій маленький рух */
.how__scene[data-step="1"] .how__sat--a { animation-name: cs-spin-rev-pulse; }
@keyframes cs-spin-rev-pulse { 0% { rotate: 0deg; scale: 1; } 50% { scale: 1.12; } 100% { rotate: -360deg; scale: 1; } }
.how__scene[data-step="2"] .how__sat--b .i { animation: cs-twinkle 1.6s ease-in-out infinite; }
@keyframes cs-twinkle { 50% { opacity: .4; scale: .8; } }
.how__scene[data-step="3"] .how__main { animation: cs-drive 1.1s ease-in-out infinite alternate; }
@keyframes cs-drive { from { translate: -6px 0; rotate: -1deg; } to { translate: 6px -3px; rotate: 1deg; } }
.how__scene[data-step="4"] .how__sat--a .i { animation: cs-spin 3s linear infinite; }
.how__count {
  position: absolute; left: 50%; bottom: -4px; translate: -50% 0; padding: 4px 12px; border-radius: 999px;
  background: var(--coffee); color: var(--white); font-size: .85rem; letter-spacing: .08em; white-space: nowrap;
}
.how__count b { font-weight: 800; }

/* кроки: видимістю керує історія, тож поява «при прокручуванні» для них вимкнена */
.has-story .step { animation: none; transition: opacity .45s var(--ease), scale .45s var(--ease), box-shadow .45s; }
.has-story .step.is-active { box-shadow: 0 14px 34px rgba(0, 0, 0, .12), inset 4px 0 0 var(--accent); }

/* телефон: над сценою — один поточний крок (решта складені в ту саму клітинку й сховані) */
@media (max-width: 999px) {
  .has-story .steps { display: grid; grid-template-columns: 1fr; }
  .has-story .step { grid-area: 1 / 1; opacity: 0; visibility: hidden; scale: .96; }
  .has-story .step.is-active { opacity: 1; visibility: visible; scale: 1; }
}
/* десктоп: сцена ліворуч, усі кроки праворуч — неактивні приглушені */
@media (min-width: 1000px) {
  .has-story .how__story { grid-template-columns: .9fr 1.1fr; gap: 56px; }
  .has-story .how__stage { width: min(100%, 380px); }
  .has-story .steps { grid-template-columns: 1fr; gap: 12px; }
  /* неактивні — приглушені кольором, а не прозорістю: текст лишається читабельним (контраст ≥ 4.5:1) */
  .has-story .step { padding: 18px 20px 16px 74px; scale: .97; transform-origin: left center; }
  .has-story .step:not(.is-active) h3 { color: var(--muted); }
  .has-story .step:not(.is-active) .step__n { background: var(--cream-2); color: var(--text); }
  .has-story .step .step__n { transition: background .45s, color .45s; }
  .has-story .step .step__n { top: 18px; left: 18px; }
  .has-story .step.is-active { scale: 1; }
}

/* ---------- повага до системного «зменшити рух» ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-motion] *, [data-motion] *::before, [data-motion] *::after, [data-motion] *::details-content { animation: none !important; transition: none !important; }
  [data-motion] .header::after { display: none; }
  [data-motion] :is(.hero .btn, .header__cta) { translate: none; }
  [data-motion] .rv:not(.is-in) { opacity: 1; transform: none; }
  [data-motion] .hero__fx, [data-motion] .hero__fluid { display: none; }
  [data-motion] .cup { transform: none; }
}