/* ==========================================================================
   AGTEH — unified motion system
   Loaded globally via base.html. Opacity+transform only, smooth easing,
   one-shot scroll reveals, stagger, count-up, cart/AI micro-interactions.
   Respects prefers-reduced-motion.
   ========================================================================== */

/* ── Base easing tokens ── */
:root {
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 200ms;
    --dur-ui: 300ms;
    --dur-reveal: 600ms;
}

/* ── Scroll reveal (one-shot, opacity + transform) ──
   Content is hidden ONLY when .js is present (added by motion.js immediately).
   No-JS → everything stays visible. */
.js .reveal,
.js .reveal-up,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale {
    opacity: 0;
    transition:
        opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal-up    { transform: translateY(32px); }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-scale { transform: scale(0.94); }

.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ── Stagger container: children animate with incremental delay ── */
.js .stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 550ms var(--ease-out),
        transform 550ms var(--ease-out);
    transition-delay: var(--stagger-delay, 0ms);
    will-change: opacity, transform;
}
.stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero: sequential reveal on first paint (not scroll) ── */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-seq > * {
    opacity: 0;
    animation: heroRise 650ms var(--ease-out) forwards;
    animation-delay: var(--hero-delay, 0ms);
}

/* ── Header entrance ── */
@keyframes headerDrop {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.header-anim {
    animation: headerDrop 500ms var(--ease-out) both;
}

/* ── Nav link underline indicator ── */
.nav-underline {
    position: relative;
}
.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: #f47920;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-ui) var(--ease-soft);
    border-radius: 2px;
}
.nav-underline:hover::after,
.nav-underline.active::after {
    transform: scaleX(1);
}

/* ── Catalog dropdown: smooth open + item stagger ── */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity var(--dur-ui) var(--ease-soft),
        transform var(--dur-ui) var(--ease-soft),
        visibility 0s linear var(--dur-ui);
}
.group:hover > .dropdown-menu,
.dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity var(--dur-ui) var(--ease-soft),
        transform var(--dur-ui) var(--ease-soft),
        visibility 0s;
}
/* item stagger — items fade/slide in after the container opens */
.dropdown-menu > * > a,
.dropdown-menu .dd-item {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.group:hover > .dropdown-menu > * > a,
.group:hover > .dropdown-menu .dd-item,
.dropdown-menu.open > * > a,
.dropdown-menu.open .dd-item {
    opacity: 1;
    transform: translateY(0);
}
.group:hover > .dropdown-menu > * > a:nth-child(1),
.dropdown-menu.open > * > a:nth-child(1)  { transition-delay: 20ms; }
.group:hover > .dropdown-menu > * > a:nth-child(2),
.dropdown-menu.open > * > a:nth-child(2)  { transition-delay: 40ms; }
.group:hover > .dropdown-menu > * > a:nth-child(3),
.dropdown-menu.open > * > a:nth-child(3)  { transition-delay: 60ms; }
.group:hover > .dropdown-menu > * > a:nth-child(4),
.dropdown-menu.open > * > a:nth-child(4)  { transition-delay: 80ms; }
.group:hover > .dropdown-menu > * > a:nth-child(5),
.dropdown-menu.open > * > a:nth-child(5)  { transition-delay: 100ms; }
.group:hover > .dropdown-menu > * > a:nth-child(6),
.dropdown-menu.open > * > a:nth-child(6)  { transition-delay: 120ms; }
.group:hover > .dropdown-menu > * > a:nth-child(7),
.dropdown-menu.open > * > a:nth-child(7)  { transition-delay: 140ms; }
.group:hover > .dropdown-menu > * > a:nth-child(8),
.dropdown-menu.open > * > a:nth-child(8)  { transition-delay: 160ms; }
.group:hover > .dropdown-menu > * > a:nth-child(9),
.dropdown-menu.open > * > a:nth-child(9)  { transition-delay: 180ms; }
.group:hover > .dropdown-menu > * > a:nth-child(10),
.dropdown-menu.open > * > a:nth-child(10) { transition-delay: 200ms; }
.group:hover > .dropdown-menu > * > a:nth-child(n+11),
.dropdown-menu.open > * > a:nth-child(n+11) { transition-delay: 220ms; }

/* ── Category card hover ── */
.cat-card {
    transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-soft);
}
.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(244, 121, 32, 0.35);
}
.cat-card:active {
    transform: translateY(-2px);
    transition-duration: 100ms;
}
.cat-card .cat-img {
    transition: transform 450ms var(--ease-out);
}
.cat-card:hover .cat-img {
    transform: scale(1.05);
}

/* ── Product card hover ── */
.product-card {
    transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-soft);
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.product-card .card-img {
    transition: transform 450ms var(--ease-out);
}
.product-card:hover .card-img {
    transform: scale(1.04);
}

/* ── Generic link/CTA hover helpers ── */
.cta-arrow {
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease-soft);
}
a:hover > .cta-arrow,
button:hover > .cta-arrow,
.group:hover .cta-arrow {
    transform: translateX(3px);
}

/* ── Button press feedback ── */
.btn-press {
    transition: transform 150ms var(--ease-soft), box-shadow 200ms var(--ease-soft), opacity 200ms var(--ease-soft);
}
.btn-press:hover {
    transform: translateY(-1px);
}
.btn-press:active {
    transform: scale(0.97);
}

/* ── Cart counter bump ── */
@keyframes cartBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.cart-bump {
    animation: cartBump 420ms var(--ease-out);
}

/* ── Add-to-cart button success state ── */
.btn-added {
    background: #16a34a !important;
    transition: background 200ms ease;
}

/* ── AI assistant idle + open/close ── */
@keyframes aiIdle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.ai-idle {
    animation: aiIdle 3.4s ease-in-out infinite;
}
#ai-chat-window {
    transform-origin: bottom left;
}
#ai-chat-window.chat-anim-in {
    animation: chatIn 260ms var(--ease-out) both;
}
#ai-chat-window.chat-anim-out {
    animation: chatOut 200ms var(--ease-out) both;
}
@keyframes chatIn {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chatOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(12px) scale(0.95); }
}
.ai-msg {
    animation: msgIn 260ms var(--ease-out) both;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── "Как заказать" step number reveal ── */
@keyframes stepPop {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}
.step-num.visible {
    animation: stepPop 380ms var(--ease-out) both;
}

/* ── Footer reveal (mild) ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.footer-reveal {
    animation: fadeUp 600ms var(--ease-out) both;
}

/* ── Callback modal: smooth open/close (fade + slide) ── */
#callbackModal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 280ms var(--ease-soft),
        visibility 0s linear 280ms;
}
#callbackModal.modal-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 280ms var(--ease-soft),
        visibility 0s;
}
#callbackModal .modal-backdrop {
    opacity: 0;
    transition: opacity 280ms var(--ease-soft);
}
#callbackModal.modal-open .modal-backdrop {
    opacity: 1;
}
#callbackModal .modal-panel {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition:
        opacity 280ms var(--ease-out),
        transform 280ms var(--ease-out);
}
#callbackModal.modal-open .modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Floating callback button: entrance + pulse ── */
.callback-fab {
    animation: fabRise 600ms var(--ease-out) both;
    animation-delay: 400ms;
}
@keyframes fabRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion: disable everything ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
    .stagger > *, .hero-seq > * {
        opacity: 1 !important;
        transform: none !important;
    }
}