/* ============================================================
   RUKAST — Motion system
   One easing family: cubic-bezier(.16,1,.3,1)
   L1 page transition · L2 section reveal · L3 typography
   L4 product · L5 hover · L6 ambient · L7 seal
   Nothing here ever covers the product.
   ============================================================ */

/* ---------- L1 — page transition ---------------------------------------- */
/* Leaving: an ink layer wipes up over the page while the content settles
   back 6 px. Arriving: the layer is already gone, the new page rises.      */
html{background:var(--black)}

.veil{
  position:fixed;inset:0;z-index:300;
  background:var(--black);
  display:grid;place-items:center;
  pointer-events:none;
  clip-path:inset(100% 0 0 0);
  will-change:clip-path;
  transition:clip-path var(--t-leave) var(--e-inout);
}
.veil__mark{
  font-family:var(--font-display);font-weight:800;font-size:14px;
  letter-spacing:.42em;color:#fff;opacity:0;
  transform:translateY(8px);
  transition:transform var(--t-leave) var(--e-out),opacity .3s ease;
}
body.is-leaving .veil{clip-path:inset(0 0 0 0)}
body.is-leaving .veil__mark{opacity:.9;transform:none}
/* The entrance animation has to be cancelled first: a running animation
   outranks these declarations and the page would never dim on the way out. */
body.is-leaving main,
body.is-leaving .site-header{
  animation:none!important;
  opacity:.4;transform:translate3d(0,6px,0);
  transition:opacity var(--t-exit) var(--e-soft),transform var(--t-exit) var(--e-soft);
}

body.is-ready main{animation:pageIn var(--t-enter) var(--e-out) both}
body.is-ready .site-header{animation:fadeIn .7s var(--e-soft) both}
@keyframes pageIn{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- L2 — section reveal ------------------------------------------ */
.rv{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .85s var(--e-out),transform .85s var(--e-out);
  transition-delay:calc(var(--d,0) * 70ms);
}
.rv.is-inview{opacity:1;transform:none}

/* ---------- L3 — typography reveal (line masks) -------------------------- */
.rv-lines{display:block}
.rv-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rv-line > span{
  display:block;
  transform:translate3d(0,105%,0);
  transition:transform .9s var(--e-out);
  transition-delay:calc(var(--l,0) * var(--line-step,90ms) + var(--line-delay,60ms));
}
.is-inview .rv-line > span{transform:none}

/* ---------- L3b — wordmarks: one system, three characters ---------------- */
/* Shared: per-character mask reveal with stagger and a tracking settle.     */
.wm{transition:letter-spacing 1.6s var(--e-out) .3s}
.wm__c{overflow:hidden;vertical-align:bottom}
.wm__c > b{
  display:block;font-weight:inherit;
  transform:translate3d(0,102%,0);
  transition:transform .85s var(--e-out),color .9s var(--e-out),
             -webkit-text-stroke-color .9s var(--e-out);
  transition-delay:calc(var(--i,0) * 55ms + 240ms);
}
.is-inview .wm__c > b{transform:none}

/* CLASSIC — calm, sequential, a slow tracking settle */
.wm--classic .wm__c > b{color:rgba(255,255,255,.14);text-shadow:0 0 18px rgba(255,255,255,.04)}
.is-inview .wm--classic{letter-spacing:-.07em}

/* ZERO — technical: outline drawn first, then filled */
.wm--zero{letter-spacing:-.02em}
.is-inview .wm--zero{letter-spacing:-.055em}
.wm--zero .wm__c > b{
  color:transparent;
  -webkit-text-stroke:1.2px rgba(255,255,255,.3);
  transition-delay:calc(var(--i,0) * 70ms + 240ms);
}
.is-inview .wm--zero .wm__c > b{
  color:rgba(255,255,255,.085);
  -webkit-text-stroke-color:rgba(255,255,255,.15);
  transition-delay:calc(var(--i,0) * 70ms + 240ms),
                   calc(var(--i,0) * 70ms + 700ms),
                   calc(var(--i,0) * 70ms + 700ms);
}

/* FANTA — a touch more energy: shorter stagger, 3 px controlled overshoot */
.wm--fanta .wm__c > b{
  color:rgba(255,255,255,.19);
  text-shadow:0 0 18px rgba(255,255,255,.05);
  transition-timing-function:var(--e-pop);
  transition-duration:.78s;
  transition-delay:calc(var(--i,0) * 44ms + 240ms);
}
.is-inview .wm--fanta{letter-spacing:-.065em}


@keyframes wmSweep{
  0%{opacity:0;transform:translateX(-16%)}
  18%{opacity:.72}
  100%{opacity:0;transform:translateX(16%)}
}
@keyframes wmEcho{
  0%,100%{transform:translate(.07em,.05em)}
  50%{transform:translate(.03em,.02em)}
}

/* ---------- L3c — product chapter choreography ---------------------------
   One reading order, always the same:
   bottle 0 → index 150 → headline 250/370 → description 500 →
   figures 650 (+70 each) → technical notes 850 → action 1000.            */
.chapter__shot{--shot-delay:0s}
.chapter__copy h2{--line-delay:.25s;--line-step:120ms}

.chapter__no b,
.chapter__no span,
.chapter__lede,
.chapter .note-row,
.chapter .note-line,
.chapter__foot,
.chapter .spec-grid > div{
  opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);
}
.chapter__no i{transform:scaleX(0);transition:transform .6s var(--e-out) .26s}
.chapter__no b{transition-delay:.15s}
.chapter__no span{transition-delay:.36s}
.chapter__lede{transition-delay:.5s}
.chapter .spec-grid > div{transition-delay:calc(.65s + var(--i,0) * 70ms)}
.chapter .note-row{transition-delay:.85s}
.chapter .note-line{transition-delay:.93s}
.chapter__foot{transition-delay:1s}
.chapter.is-inview :is(.chapter__no b,.chapter__no span,.chapter__lede,
                       .note-row,.note-line,.chapter__foot),
.chapter.is-inview .spec-grid > div{opacity:1;transform:none}
.chapter.is-inview .chapter__no i{transform:scaleX(1)}

/* The frame settles around the product, never over it */
.frame__rule,.frame__index,.frame__caption,.frame__rings i{
  opacity:0;transition:opacity 1s var(--e-out);
}
.frame__rule{transform:scaleY(.7);transform-origin:center;
  transition:opacity 1s var(--e-out) .3s,transform 1.1s var(--e-out) .3s}
.frame__index{transition-delay:.42s}
.frame__caption{transition-delay:.52s}
.frame__rings i:nth-child(1){transition-delay:.6s}
.frame__rings i:nth-child(2){transition-delay:.7s}
.chapter.is-inview :is(.frame__rule,.frame__index,.frame__caption){opacity:1}
.chapter.is-inview .frame__rule{transform:scaleY(1)}
.chapter.is-inview .frame__rings i:nth-child(1){opacity:1}
.chapter.is-inview .frame__rings i:nth-child(2){opacity:.6}
.chapter--warm.is-inview .frame__rings i:nth-child(2){opacity:.5}

/* ---------- L6b — ambient: the environment moves, the product does not -- */
/* A single off-centre tonal layer drifts behind the scene. It is deliberately
   kept away from the glass: no halo, no sweep, nothing crossing the bottle. */
.chapter__visual::after{
  content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(42% 38% at 16% 20%,rgba(255,255,255,.34),transparent 70%);
  animation:tonalDrift 30s var(--e-inout) infinite;
}
.chapter--ink .chapter__visual::after{
  background:radial-gradient(40% 36% at 14% 78%,rgba(239,0,20,.14),transparent 72%);
  animation-duration:34s;
}
.chapter--warm .chapter__visual::after{
  background:radial-gradient(44% 40% at 18% 18%,rgba(255,243,214,.42),transparent 70%);
  animation-duration:28s;
}
@keyframes tonalDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3.5%,2.5%,0) scale(1.07)}
}

.frame__rings i{animation:ringBreath 24s var(--e-inout) infinite}
.frame__rings i:nth-child(2){animation-duration:30s;animation-direction:reverse}
@keyframes ringBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}

.frame__dot{animation:dotTravel 32s var(--e-inout) infinite}
@keyframes dotTravel{0%,100%{top:2%}50%{top:98%}}

/* ---------- L3d — logistics block ---------------------------------------
.truckviz__summary,.truckviz__diagram,.truckviz__stat,.truckviz__flow li,.truckviz__topline span{will-change:transform,opacity}
.truckviz__summary,.truckviz__diagram{opacity:0;transform:translate3d(0,18px,0);transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
.truckviz__stat,.truckviz__flow li,.truckviz__topline span{opacity:0;transform:translate3d(0,12px,0);transition:opacity .68s var(--e-out),transform .68s var(--e-out)}
.truck__cab,.truck__wheel,.truck__pallets i{will-change:transform,opacity}
.truckviz.is-inview .truckviz__summary,.truckviz.is-inview .truckviz__diagram{opacity:1;transform:none}
.truckviz.is-inview .truckviz__stat,.truckviz.is-inview .truckviz__flow li,.truckviz.is-inview .truckviz__topline span{opacity:1;transform:none}
.truckviz.is-inview .truckviz__stat{transition-delay:calc(var(--i,0) * 80ms + 120ms)}
.truckviz.is-inview .truckviz__topline span{transition-delay:calc(var(--i,0) * 65ms + .16s)}
.truckviz.is-inview .truckviz__flow li{transition-delay:calc(var(--i,0) * 70ms + .32s)}
.truckviz.is-inview .truck__pallets i{animation:palletIn .7s var(--e-pop) calc(.36s + var(--i,0) * 38ms) both}
.truckviz.is-inview .truck__wheel{animation:wheelIn .6s var(--e-pop) calc(.72s + var(--i,0) * 60ms) both}
.truckviz.is-inview .truck__cab{animation:cabIn .6s var(--e-pop) .6s both}
@keyframes palletIn{0%{opacity:0;transform:translate3d(0,12px,0) scale(.96)}100%{opacity:1;transform:none}}
@keyframes wheelIn{0%{opacity:0;transform:translateY(10px) scale(.88)}100%{opacity:1;transform:none}}
@keyframes cabIn{0%{opacity:0;transform:translate3d(8px,12px,0)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .truckviz__summary,.truckviz__diagram,.truckviz__stat,.truckviz__flow li,.truckviz__topline span,.truck__cab,.truck__wheel,.truck__pallets i{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important
  }
}

/* ---------- L4 — product ------------------------------------------------- */
/* The bottle is uncovered from the base up, settles once and then holds.
   Nothing ever passes over the glass afterwards.                          */
.scene__shot,.pdp-hero__shot,.chapter__shot{
  opacity:0;
  transform:scale(.965);
  /* The clip box is pushed far outside the image on every side except the
     one being uncovered. A tighter box cuts the drop-shadow and leaves a
     faint rectangle around the glass once the reveal has finished. */
  clip-path:inset(12% -160% -160% -160%);
  transition:opacity .7s var(--e-out) var(--shot-delay,.1s),
             transform var(--t-shot) var(--e-out) var(--shot-delay,.1s),
             clip-path var(--t-shot) var(--e-out) var(--shot-delay,.1s);
}
.is-inview .scene__shot,
.is-inview .pdp-hero__shot,
.chapter.is-inview .chapter__shot{opacity:1;transform:none;clip-path:inset(-160% -160% -160% -160%)}

.scene--red .scene__shot,.pdp-hero--red .pdp-hero__shot,.chapter .chapter__shot{
  filter:drop-shadow(0 30px 46px rgba(52,0,4,.45));
  animation:shotBreathRed 9s var(--e-inout) 1.6s infinite;
}
.scene--ink .scene__shot,.pdp-hero--ink .pdp-hero__shot,.chapter--ink .chapter__shot{
  filter:drop-shadow(0 34px 50px rgba(0,0,0,.62));
  animation:shotBreathInk 10s var(--e-inout) 1.6s infinite;
}
.scene--orange .scene__shot,.pdp-hero--orange .pdp-hero__shot,.chapter--warm .chapter__shot{
  filter:drop-shadow(0 30px 44px rgba(108,38,0,.46));
  animation:shotBreathOrange 8.5s var(--e-inout) 1.6s infinite;
}
@keyframes shotBreathRed{0%,100%{filter:drop-shadow(0 30px 46px rgba(52,0,4,.45))}50%{filter:drop-shadow(0 36px 58px rgba(52,0,4,.54))}}
@keyframes shotBreathInk{0%,100%{filter:drop-shadow(0 34px 50px rgba(0,0,0,.62))}50%{filter:drop-shadow(0 40px 64px rgba(0,0,0,.72))}}
@keyframes shotBreathOrange{0%,100%{filter:drop-shadow(0 30px 44px rgba(108,38,0,.46))}50%{filter:drop-shadow(0 36px 56px rgba(108,38,0,.56))}}


/* ---------- L6 — ambient ------------------------------------------------- */
.scene--red .scene__amb--a{animation:ambDrift 18s var(--e-inout) infinite}
.scene--red .scene__amb--b{animation:ambDrift 22s var(--e-inout) infinite reverse}
.scene--ink .scene__amb--a{animation:ambDrift 20s var(--e-inout) infinite}
.scene--ink .scene__amb--b{animation:ambDrift 26s var(--e-inout) infinite reverse}
.scene--orange .scene__amb--a{animation:ambDrift 19s var(--e-inout) infinite}
.scene--orange .scene__amb--b{animation:ambDrift 24s var(--e-inout) infinite reverse}
.cta__orb--a{animation:ambDrift 20s var(--e-inout) infinite}
.cta__orb--b{animation:ambDrift 26s var(--e-inout) infinite reverse}
@keyframes ambDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.2%,-2.4%,0) scale(1.06)}
}

/* Fanta bubbles — slow rise, low contrast, behind the glass */
.bubbles i{animation:bubbleRise var(--bt,26s) linear var(--bd,0s) infinite;opacity:0}
@keyframes bubbleRise{
  0%{transform:translate3d(0,0,0) scale(.9);opacity:0}
  12%{opacity:.5}
  80%{opacity:.35}
  100%{transform:translate3d(var(--bx,14px),-118vh,0) scale(1.06);opacity:0}
}

.scene__hint i{animation:hintLine 2.4s var(--e-inout) infinite}
@keyframes hintLine{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

.fab:hover .fab__pulse{animation:fabPulse 2.6s var(--e-inout) infinite}
@keyframes fabPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

/* ---------- L7 — “Верный знак” seal --------------------------------------- */
/* Type ring 26 s clockwise · hairline ring 38 s counter-clockwise · one dot
   on a 14 s orbit · ticks static · core breathing 1 → 1.015 over 8 s.
   Hover adds a second, paused rotation on top of the type ring — that is
   ~16 % faster with no jump, which changing animation-duration would cause. */
.seal__ring-text{animation:sealSpin 26s linear infinite;transform-origin:50% 50%}
.seal__ring-boost{
  animation:sealSpin 160s linear infinite;transform-origin:50% 50%;
  animation-play-state:paused;
}
.seal:hover .seal__ring-boost{animation-play-state:running}
.seal__ring-inner{animation:sealSpin 38s linear infinite reverse;transform-origin:50% 50%}
.seal__dot{animation:sealSpin 14s linear infinite;transform-origin:50% 50%}
.seal__core{animation:sealBreath 8s var(--e-inout) infinite}
@keyframes sealSpin{to{transform:rotate(360deg)}}
@keyframes sealBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.is-inview .seal__check{animation:sealCheck .9s var(--e-out) .35s forwards}
@keyframes sealCheck{to{stroke-dashoffset:0}}

/* ---------- Microinteractions -------------------------------------------- */
.acc[open] .acc__body{animation:accIn .45s var(--e-out) both}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.form__status:not([hidden]){animation:accIn .5s var(--e-out) both}

/* Mobile drawer choreography */
.nav__link,.nav .btn,.nav__foot{--drawer-delay:0ms}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .form__spinner{animation:spin 1.2s linear infinite!important}
  .rv{opacity:1!important;transform:none!important}
  .rv-line > span{transform:none!important}
  .wm__c > b{transform:none!important;opacity:1!important}
  .chapter__no b,.chapter__no span,.chapter__lede,.chapter .note-row,
  .chapter .note-line,.chapter__foot,.chapter .spec-grid > div,
  .frame__rule,.frame__index,.frame__caption,.frame__rings i,
  .bhero__mark{opacity:1!important;transform:none!important}
  .chapter__no i{transform:scaleX(1)!important}
  .frame__rings i:nth-child(2){opacity:.6!important}
  .scene__shot,.pdp-hero__shot,.chapter__shot{clip-path:none!important}
  .scene__shot,.pdp-hero__shot,.chapter__shot{opacity:1!important;transform:none!important}
  .seal__check{stroke-dashoffset:0!important}
  .bubbles{display:none!important}
  .veil{display:none!important}
}