/* ===== Модалка КУПИТЬ ===== */
.buy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.buy-modal[hidden] { display: none; }
.buy-overlay { position: absolute; inset: 0; background: rgba(49, 33, 24, .45); backdrop-filter: blur(3px); }
.buy-card { position: relative; width: min(440px, 86vw); background: #FAF5F1; border-radius: 12px; padding: 44px 40px 30px; font-family: 'Tenor Sans', sans-serif; box-shadow: 0 24px 80px rgba(60, 25, 8, .35); animation: buyIn .35s cubic-bezier(.22,1,.36,1); }
@keyframes buyIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.buy-title { font-size: 26px; letter-spacing: .08em; color: #C35B3F; margin-bottom: 26px; }
.buy-row { display: flex; align-items: center; gap: 16px; padding: 14px 10px; font-size: 21px; color: #313131; text-decoration: none; border-radius: 8px; transition: background .25s, transform .25s; }
.buy-row img { width: 36px; height: 36px; }
.buy-letu { position: relative; display: inline-flex; width: 36px; height: 36px; flex-shrink: 0; }
.buy-letu img { width: 36px; height: 36px; }
.buy-letu-glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 23px !important; height: 12px !important; }
.buy-row:hover { background: #F1E5DC; transform: translateX(4px); }
.buy-legal { margin: 18px 4px 0; color: #75695f; font-family: 'Geometria', sans-serif; font-size: 12px; line-height: 1.45; }
.buy-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 20px; color: #8a7a6e; cursor: pointer; padding: 8px; outline: none; -webkit-tap-highlight-color: transparent; transition: color .2s; }
.buy-close:hover { color: #C35B3F; }
.buy-close:focus { outline: none; box-shadow: none; }
@media (any-hover: hover) {
  .buy-close:focus-visible { outline: 2px solid #C35B3F; outline-offset: 3px; border-radius: 4px; }
}
body.modal-open { overflow: hidden; }
/* ===== Карусель ароматов ===== */
.bottle-stage .bottle-fallback, .bottle-stage .bottle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.car-arrow { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border: 0; background: none; cursor: pointer; padding: 0; }
.car-arrow[disabled] { opacity: .4; pointer-events: none; }
.car-prev { left: -69px; } .car-next { right: -69px; }
.car-arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  border-top: 2px solid #C35B3F; border-right: 2px solid #C35B3F; transform: translate(-50%, -50%) rotate(45deg); transition: transform .3s, border-color .3s; }
.car-prev::before { transform: translate(-50%, -50%) rotate(-135deg); }
.car-next:hover::before { transform: translate(-30%, -50%) rotate(45deg); }
.car-prev:hover::before { transform: translate(-70%, -50%) rotate(-135deg); }
.car-arrow:focus-visible::before { border-color: #7c2d12; }
.fade-swap { transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1),
  filter .65s ease; }
.fade-swap.out { opacity: 0; transform: translate(var(--sx, 0px), 12px) skewX(var(--sk, 0deg)); filter: blur(9px); }
/* канвас вязкой среды: флакон + полётное поле направо через описание аромата
   (CSS-габариты = sim 1250×1083 × 0.82 — блок ужат под один экран) */
.fluid-canvas { position: absolute; left: 705px; top: 5660px; width: 1025px; height: 888px; pointer-events: none; }
/* смыв описания рукой воды (только листание вперёд): --washP каждый кадр
   ставит app.js по фронту листа из бреши — маска съедает буквы ровно под
   янтарём, блок сносит и смазывает по направлению потока */
.n624.washing {
  transition: none;
  -webkit-mask-image: linear-gradient(99deg, transparent calc(var(--washP, 0) * 118% - 18%), #000 calc(var(--washP, 0) * 118% + 1%));
  mask-image: linear-gradient(99deg, transparent calc(var(--washP, 0) * 118% - 18%), #000 calc(var(--washP, 0) * 118% + 1%));
  transform: translateX(calc(var(--washP, 0) * 54px)) skewX(calc(var(--washP, 0) * -4deg));
  filter: blur(calc(var(--washP, 0) * 3px));
  will-change: transform, filter;
}
/* новый текст осаждается, когда вода прошла: проявление из мокрого стекла */
@keyframes washResolve {
  from { opacity: 0; filter: blur(8px); transform: translateX(-14px); }
  to   { opacity: 1; filter: none;      transform: none; }
}
.n624.wash-in { animation: washResolve .6s cubic-bezier(.25,.5,.3,1) both; }
/* побуквенный каскад подписи аромата */
.cl { display: inline-block; transition: opacity .36s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .36s ease; }
.cl.out-l.gone { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
.cl.in-l { opacity: 0; transform: translateY(14px); filter: blur(4px); }
.cl.in-l.here { opacity: 1; transform: none; filter: none; }
.bottle-fallback { transition: opacity .5s ease; }
/* ===== Зерно хиро ===== */
.hero-grain { left: 0; top: 0; width: 1920px; height: 1043px; mix-blend-mode: soft-light; pointer-events: none; }
body:not(.webgl-on) .hero-grain { display: none; }
/* ===== Туман хиро ===== */
.hero-fog { left: 0; top: 0; width: 1920px; height: 1043px; pointer-events: none; }
body:not(.webgl-on) .hero-fog { display: none; }
/* ===== Reveal-анимации (только при body.anim — не reduced-motion) ===== */
body.anim .rv { opacity: 0; transform: translateY(calc(26px + var(--ty, 0px))); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
body.anim .rv.in { opacity: 1; transform: translateY(var(--ty, 0px)); }
body.anim .rv-letters span { display: inline-block; opacity: 0; transform: translateY(.16em);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
body.anim .rv-letters.in span { opacity: 1; transform: none; }
/* ===== Каскад хиро ===== */
body.anim .n594, body.anim .nav-link, body.anim .n609, body.anim .n610 { opacity: 0; transform: translateY(16px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
body.anim.hero-in .n594 { opacity: 1; transform: none; }
body.anim.hero-in .nav-link { opacity: 1; transform: none; transition-delay: .15s; }
body.anim.hero-in .n609 { opacity: 1; transform: none; transition-delay: .3s; }
body.anim.hero-in .n610 { opacity: 1; transform: none; transition-delay: .45s; }
/* ===== Hover статики ===== */
.btn { transition: background .3s, letter-spacing .3s; }
.btn:hover { background: #A94A30; }
.btn:hover span { letter-spacing: .02em; }
.nav-link { transition: color .25s; }
.nav-link:hover { color: #C35B3F; }
a.t.shop:hover, a.t.n645:hover, a.t.n646:hover, a.t.n640:hover { color: #C35B3F; transition: color .25s; }
@media (prefers-reduced-motion: reduce) { .bottle-fallback, .fade-swap { transition: none; } }