/* Elbuz Theme — motion (wave 4, docs/15 «Движение (волна 4)»).
   Three preset axes on <html> (style.* → data-*, applied live):
     data-motion  subtle (unset) / expressive / none — the level: timing tokens, decorative effects, page transitions, add-to-cart
     data-reveal  none (unset) / fade / slide-up / scale — sections and cards appear on scroll (js/elbuz_motion.js)
     data-hover   lift (unset) / scale / tilt / squish / spotlight / none — how a product card answers the pointer
   Durations, curves and distances are --et-motion-* tokens; a preset can override them in `tokens`
   (the level selectors below win over :root of the preset — set the level, then tune inside it).
   Content is visible without JS: only js/elbuz_motion.js hides a node (.et-reveal), and only one that is off screen.
   prefers-reduced-motion: reduce — no movement at all (end of file). */

:root {
  --et-motion-fast: 140ms;                         /* press, small state changes */
  --et-motion-medium: 260ms;                       /* hover, page transition */
  --et-motion-slow: 520ms;                         /* reveal, fly to cart */
  --et-motion-ease: cubic-bezier(0.2, 0, 0, 1);    /* standard: quick start, soft landing */
  --et-motion-ease-emphasis: cubic-bezier(0.2, 0, 0, 1); /* hover / fly; expressive overshoots */
  --et-motion-distance: 1rem;                      /* reveal slide-up offset */
  --et-motion-scale-from: 0.97;                    /* reveal scale start */
  --et-motion-stagger: 60ms;                       /* delay between cards revealed together */
  --et-motion-lift: 4px;                           /* hover lift */
  --et-motion-hover-scale: 1.02;                   /* hover scale */
  --et-motion-tilt: 4deg;                          /* hover 3D tilt, max */
  --et-motion-press: 0.97;                         /* :active scale of buttons */
}

html[data-motion="expressive"] {
  --et-motion-fast: 180ms;
  --et-motion-medium: 420ms;
  --et-motion-slow: 820ms;
  --et-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --et-motion-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
  --et-motion-distance: 3rem;
  --et-motion-scale-from: 0.9;
  --et-motion-stagger: 90ms;
  --et-motion-lift: 8px;
  --et-motion-hover-scale: 1.04;
  --et-motion-tilt: 9deg;
  --et-motion-press: 0.94;
}

html[data-motion="none"] {
  --et-motion-fast: 0ms;
  --et-motion-medium: 0ms;
  --et-motion-slow: 0ms;
  --et-motion-distance: 0px;
  --et-motion-scale-from: 1;
  --et-motion-stagger: 0ms;
  --et-motion-lift: 0px;
  --et-motion-hover-scale: 1;
  --et-motion-tilt: 0deg;
  --et-motion-press: 1;
}

/* ---------- Reveal on scroll (js/elbuz_motion.js adds .et-reveal to off-screen nodes, .is-revealed when they enter) ---------- */

html[data-reveal] .et-reveal {
  transition: opacity var(--et-motion-slow) var(--et-motion-ease), transform var(--et-motion-slow) var(--et-motion-ease);
  transition-delay: calc(var(--et-reveal-i, 0) * var(--et-motion-stagger));
}
html:is([data-reveal="fade"], [data-reveal="slide-up"], [data-reveal="scale"]) .et-reveal:not(.is-revealed) { opacity: 0; }
html[data-reveal="slide-up"] .et-reveal:not(.is-revealed) { transform: translateY(var(--et-motion-distance)); }
html[data-reveal="scale"] .et-reveal:not(.is-revealed) { transform: scale(var(--et-motion-scale-from)); }

/* ---------- Card hover (data-hover). Unset = lift as the card variant designs it; an explicit value wins over the variant ---------- */

html .et-card {
  transition: transform var(--et-motion-medium) var(--et-motion-ease-emphasis), box-shadow var(--et-motion-medium) var(--et-motion-ease),
    background-color var(--et-motion-fast) var(--et-motion-ease), border-color var(--et-motion-fast) var(--et-motion-ease);
}
/* (0,2,0): beats the base stylesheet, loses to a variant that designs no lift (minimal, spec, editorial) */
:where(html:not([data-hover])) .et-card:hover { transform: translateY(calc(-1 * var(--et-motion-lift))); }
html[data-hover="lift"] .et-card.et-card:hover { transform: translateY(calc(-1 * var(--et-motion-lift))); box-shadow: var(--et-shadow-xl); }
html[data-hover="scale"] .et-card.et-card:hover { transform: scale(var(--et-motion-hover-scale)); box-shadow: var(--et-shadow-xl); }
/* tilt: js/elbuz_motion.js sets --et-tilt-x / --et-tilt-y (-1…1) from the pointer */
html[data-hover="tilt"] .et-card { transition-duration: var(--et-motion-fast), var(--et-motion-medium), var(--et-motion-fast), var(--et-motion-fast); }
html[data-hover="tilt"] .et-card.et-card:hover {
  transform: perspective(60rem) rotateX(calc(var(--et-tilt-y, 0) * var(--et-motion-tilt))) rotateY(calc(var(--et-tilt-x, 0) * var(--et-motion-tilt)));
  box-shadow: var(--et-shadow-xl);
}
/* squish: the card stays, its photo hops with a squash (springy), the pedestal under it (media_bg=pedestal) gives way */
html[data-hover="squish"] .et-card.et-card:hover { transform: none; }
/* spotlight: the card or tile stays still, a radial light (--et-spot) follows the pointer (--mx/--my, js/elbuz_motion.js) */
html[data-hover="spotlight"] .et-card.et-card:hover { transform: none; }
html[data-hover="spotlight"] :is(.et-card, [data-et-spot]) { position: relative; isolation: isolate; }
html[data-hover="spotlight"] :is(.et-card, [data-et-spot])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%), var(--et-spot), transparent 60%);
  transition: opacity var(--et-motion-medium);
}
html[data-hover="spotlight"]:not([data-motion="none"]) :is(.et-card, [data-et-spot]):hover::after { opacity: 1; }
html[data-hover="squish"] .et-card:hover .et-card__image img { transform-origin: 50% 100%; animation: et-motion-squish calc(var(--et-motion-slow) * 0.9) var(--et-motion-ease); }
html[data-hover="squish"] .et-card:hover .et-card__image::before { transform: scale(1.05, 0.94); }
@keyframes et-motion-squish {
  0% { transform: none; }
  18% { transform: scale(1.08, 0.86); }
  42% { transform: translateY(-12%) scale(0.94, 1.07); }
  64% { transform: translateY(0) scale(1.05, 0.95); }
  82% { transform: scale(0.98, 1.02); }
  100% { transform: none; }
}
/* shine: the card lifts a little and a chrome glint runs across the photo once (white key glint, softer in dark mode) */
html[data-hover="shine"] .et-card.et-card:hover { transform: translateY(-3px); }
html[data-hover="shine"] .et-card__image { position: relative; }
html[data-hover="shine"] .et-card__image::after {
  content: ""; position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.15) 54%, transparent 62%);
  translate: -110% 0;
}
html.dark-theme[data-hover="shine"] .et-card__image::after { background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.18) 48%, transparent 60%); }
html[data-hover="shine"]:not([data-motion="none"]) .et-card:hover .et-card__image::after { translate: 110% 0; transition: translate 0.9s cubic-bezier(0.3, 0.6, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { html[data-hover="shine"] .et-card__image::after { display: none; } }

/* ---- data-hover="steam": the card lifts 4px and steam rises over the photo (three soft blobs of --et-steam in one ::after). For goods
   that are "hot" — cookware, coffee, tea, irons, humidifiers. Reduced motion / motion none — the lift only. ---- */
html[data-hover="steam"] .et-card.et-card:hover { transform: translateY(-4px); box-shadow: var(--et-shadow-md, var(--et-shadow)); }
html[data-hover="steam"] .et-card__image { position: relative; }
html[data-hover="steam"] .et-card__image::after {
  content: ""; position: absolute; z-index: 2; left: 34%; top: -2%; width: 32%; height: 46%; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 18% 40% at 22% 70%, var(--et-steam, rgb(120 110 100 / 0.35)), transparent 70%),
    radial-gradient(ellipse 20% 48% at 50% 58%, var(--et-steam, rgb(120 110 100 / 0.35)), transparent 70%),
    radial-gradient(ellipse 18% 40% at 78% 70%, var(--et-steam, rgb(120 110 100 / 0.35)), transparent 70%);
  filter: blur(6px);
}
html.dark-theme[data-hover="steam"] .et-card__image::after { --et-steam: rgb(255 236 214 / 0.32); }
html[data-hover="steam"]:not([data-motion="none"]) .et-card:hover .et-card__image::after { animation: et-steam 3.4s cubic-bezier(0.3, 0.2, 0.3, 1) infinite; }
@keyframes et-steam { 0% { transform: translate(0, 18%) scale(0.6, 0.7); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translate(6%, -40%) scale(1.4, 1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-hover="steam"] .et-card__image::after { display: none; } }

/* ---- data-hover="rgb": the product cut-out splits into a red and a cyan channel on hover (two coloured drop-shadows, --et-fx-r /
   --et-fx-c) with a short jitter of ±3px. Never on price, buttons or text. Reduced motion / motion none — no effect. ---- */
html[data-hover="rgb"]:not([data-motion="none"]) .et-card:hover .et-card__img-main {
  filter: drop-shadow(-4px 0 var(--et-fx-r, rgb(232 36 58 / 0.7))) drop-shadow(4px 0 var(--et-fx-c, rgb(0 151 168 / 0.7)));
  animation: et-rgb-jitter 0.36s steps(3, end) 1;
}
@keyframes et-rgb-jitter { 0% { translate: -3px 0; } 50% { translate: 3px 0; } 100% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html[data-hover="rgb"] .et-card:hover .et-card__img-main { filter: none; animation: none; } }
html[data-hover="none"] .et-card.et-card:hover,
html[data-motion="none"] .et-card.et-card:hover { transform: none; }
html[data-motion="none"][data-hover="squish"] .et-card:hover .et-card__image img { animation: none; }

/* Tiles of home sections follow the same axis */
html[data-hover="lift"] :is(.et-promo__card, .et-categories__item, .et-advantage):hover { transform: translateY(calc(-1 * var(--et-motion-lift))); }
html[data-hover="scale"] :is(.et-promo__card, .et-categories__item, .et-advantage):hover { transform: scale(var(--et-motion-hover-scale)); }
html[data-hover="squish"] :is(.et-promo__card, .et-categories__item, .et-advantage):hover img { transform-origin: 50% 100%; animation: et-motion-squish calc(var(--et-motion-slow) * 0.9) var(--et-motion-ease); }
html:is([data-hover="none"], [data-hover="tilt"], [data-motion="none"]) :is(.et-promo__card, .et-categories__item, .et-advantage):hover { transform: none; }
html[data-motion="none"] :is(.et-promo__card, .et-categories__item, .et-advantage):hover img { animation: none; }

/* Decorative tilt of [data-tilt] (hero slider, promo) — expressive only, same pointer variables */
html[data-motion="expressive"] [data-tilt]:not(.et-card):hover {
  transform: perspective(60rem) rotateX(calc(var(--et-tilt-y, 0) * var(--et-tilt-max, 3deg))) rotateY(calc(var(--et-tilt-x, 0) * var(--et-tilt-max, 3deg)));
  transition: transform var(--et-motion-fast) linear;
}

/* ---------- Buttons: press feedback and busy state ---------- */

html :is(.et-btn, .et-card__cart-btn, .et-buybox__cart-btn, [data-cart]) {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: var(--et-motion-fast);
  transition-timing-function: var(--et-motion-ease);
}
html :is(.et-btn, .et-card__cart-btn, .et-buybox__cart-btn, [data-cart]):active:not(:disabled) { transform: scale(var(--et-motion-press)); }
:is(.et-btn, .et-card__cart-btn, .et-buybox__cart-btn, [data-cart]):is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: 0.55; }
:is(.et-btn, .et-card__cart-btn, .et-buybox__cart-btn, [data-cart]):is(.is-adding, [aria-busy="true"]) { cursor: progress; }

/* ---------- Add to cart (js/elbuz_motion.js on et:cart:added) ---------- */

/* subtle: the badge pulses; expressive: a copy of the photo flies to the cart icon, then the badge pulses */
.et-motion-pulse { animation: et-motion-pulse var(--et-motion-slow) var(--et-motion-ease-emphasis); }
/* hover=squish: the cart badge catches the flying photo — squash, then a springy bounce */
.et-motion-catch { animation: et-motion-catch var(--et-motion-slow) var(--et-spring); }
@keyframes et-motion-catch {
  0% { transform: none; }
  25% { transform: translateY(3px) scale(1.35, 0.7); }
  55% { transform: translateY(-5px) scale(0.85, 1.2); }
  80% { transform: translateY(1px) scale(1.06, 0.95); }
  100% { transform: none; }
}
@keyframes et-motion-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.et-motion-fly {
  position: fixed;
  z-index: 2147483000;
  margin: 0;
  pointer-events: none;
  object-fit: cover;
  border-radius: var(--et-media-radius, var(--et-radius-sm));
  box-shadow: var(--et-shadow-lg);
  background: var(--et-surface);
}
.et-motion-fly--dot { border-radius: var(--et-radius-full); background: var(--et-accent); }

/* ---------- Page transitions (cross-document View Transitions; browsers without them just navigate) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: et-page; }
}
/* Scoped to the et-page type: the radial theme switch (theme-customizer.js, same-document) keeps its own rules */
html:active-view-transition-type(et-page)::view-transition-old(root) { animation: et-vt-out var(--et-motion-medium) var(--et-motion-ease) both; }
html:active-view-transition-type(et-page)::view-transition-new(root) { animation: et-vt-in var(--et-motion-medium) var(--et-motion-ease) both; }
html[data-motion="expressive"]:active-view-transition-type(et-page)::view-transition-old(root) { animation-name: et-vt-out-up; }
html[data-motion="expressive"]:active-view-transition-type(et-page)::view-transition-new(root) { animation-name: et-vt-in-up; }
/* The header stays in place; the product photo morphs from the card (name set on click, js/elbuz_motion.js) into the gallery */
html:active-view-transition-type(et-page) .et-header { view-transition-name: et-header; }
html[data-motion="expressive"]:active-view-transition-type(et-page) .et-gallery__slide:first-child .et-gallery__image { view-transition-name: et-product-media; }
html:active-view-transition-type(et-page)::view-transition-group(et-product-media) { animation-duration: var(--et-motion-slow); animation-timing-function: var(--et-motion-ease); }
html[data-motion="none"]::view-transition-group(*),
html[data-motion="none"]::view-transition-old(*),
html[data-motion="none"]::view-transition-new(*) { animation: none; }

@keyframes et-vt-out { to { opacity: 0; } }
@keyframes et-vt-in { from { opacity: 0; } }
@keyframes et-vt-out-up { to { opacity: 0; transform: translateY(calc(-0.5 * var(--et-motion-distance))); } }
@keyframes et-vt-in-up { from { opacity: 0; transform: translateY(var(--et-motion-distance)); } }

/* ---------- motion: none — decorative keyframes of the base stylesheet stop ---------- */

html[data-motion="none"] :is(.et-hero__slide-badge, .et-hero__slide-title, .et-hero__slide-text, .et-hero__slide-btn, .et-hero__slide-image img),
html[data-motion="none"] [data-cart].is-added i { animation: none; }
html[data-motion="none"] :is([data-magnetic], [data-parallax-mouse], [data-tilt]) { transform: none !important; }

/* ---------- Reduced motion: no movement at all (1ms, not none: transitionend / animationend still fire) ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .et-reveal { opacity: 1 !important; transform: none !important; }
  :is(.et-card, .et-promo__card, .et-categories__item, .et-advantage, [data-tilt], [data-magnetic], [data-parallax-mouse]):hover,
  :is(.et-btn, .et-card__cart-btn, .et-buybox__cart-btn, [data-cart]):active { transform: none !important; }
}