/*
 * KosaQ — animations (storefront + admin).
 * Everything here only runs when the visitor's device allows motion
 * (prefers-reduced-motion: no-preference), and only animates opacity / transform,
 * so it stays smooth on phones. animations.js adds `motion-ok` to <html> when it is
 * safe to hide content until it scrolls into view; without JS nothing is hidden.
 */
:root {
  --ease-out: cubic-bezier(.22, .8, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes kq-fade-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kq-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes kq-rise-in   { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kq-slide-l   { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes kq-ring      { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14px, 12px) scale(1.06); } }
@keyframes kq-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kq-bump      { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes kq-pulse     { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes kq-ripple    { to { transform: scale(4); opacity: 0; } }
@keyframes kq-grow-y    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kq-grow-x    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kq-sheen     { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- page entrance ---------- */
  .motion-ok #main { animation: kq-fade-in .45s ease backwards; }
  .motion-ok .site-header .brand { animation: kq-slide-l .6s var(--ease-out) backwards; }

  /* ---------- sticky header gains a soft shadow once you scroll ---------- */
  .site-header { transition: box-shadow .3s ease; }
  .site-header.is-scrolled { box-shadow: 0 8px 24px rgba(17, 17, 17, .07); }

  /* ---------- home hero: panels rise in one after the other ---------- */
  .motion-ok .hero-panel { animation: kq-rise-in .8s var(--ease-out) backwards; }
  .motion-ok .hero-panel:nth-child(2) { animation-delay: .12s; }
  .motion-ok .hero-panel__copy > * { animation: kq-fade-up .7s var(--ease-out) backwards; }
  .motion-ok .hero-panel__copy > *:nth-child(1) { animation-delay: .25s; }
  .motion-ok .hero-panel__copy > *:nth-child(2) { animation-delay: .35s; }
  .motion-ok .hero-panel__copy > *:nth-child(3) { animation-delay: .45s; }
  .motion-ok .hero-panel__copy > *:nth-child(4) { animation-delay: .55s; }
  .hero-panel__ring { animation: kq-ring 14s ease-in-out infinite; will-change: transform; }
  .hero-panel:nth-child(2) .hero-panel__ring { animation-duration: 17s; animation-direction: reverse; }
  .hero-panel__media { animation: kq-float 7s ease-in-out infinite; }
  .hero-panel .btn { position: relative; overflow: hidden; }
  .hero-panel .btn::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
  .hero-panel .btn:hover::after { animation: kq-sheen .8s ease; }

  /* ---------- scroll reveal ---------- */
  /* existing product/category cards use .fade-in; others get .reveal from animations.js.
     `translate` (not `transform`) is used so the hover lift on cards keeps working. */
  .motion-ok .reveal, .js-anim.motion-ok .fade-in {
    opacity: 0; transform: none; translate: 0 22px;
    transition: opacity .7s var(--ease-out) var(--rd, 0s), translate .7s var(--ease-out) var(--rd, 0s),
                transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  }
  .motion-ok .reveal.is-in, .js-anim.motion-ok .fade-in.is-visible { opacity: 1; translate: none; }
  .js-anim .product-card.fade-in.is-visible:hover,
  .js-anim .cat-card.fade-in.is-visible:hover { transform: translateY(-6px); }
  .motion-ok .reveal--left { translate: -26px 0; }
  .motion-ok .reveal--zoom { translate: none; scale: .96; transition-property: opacity, scale, transform, box-shadow; }
  .motion-ok .reveal--zoom.is-in { scale: none; }

  /* ---------- cards & images ---------- */
  .cat-card__media img, .cat-card__media > * { transition: transform .6s var(--ease-out); }
  .cat-card:hover .cat-card__media img, .cat-card:hover .cat-card__media > * { transform: scale(1.06); }
  .product-card__img { transition: transform .6s var(--ease-out); }
  .product-card:hover .product-card__img { transform: scale(1.07); }
  .trust__icon { transition: transform .35s var(--ease-spring), background-color .25s; }
  .trust__item:hover .trust__icon { transform: translateY(-3px) rotate(-6deg); background: var(--gold); }
  .bundle-banner__grid > * { transition: transform .45s var(--ease-out); }
  .bundle-banner:hover .bundle-banner__grid > *:nth-child(odd)  { transform: translateY(-6px); }
  .bundle-banner:hover .bundle-banner__grid > *:nth-child(even) { transform: translateY(6px); }

  /* ---------- buttons, pills, links ---------- */
  .btn, .cart-pill, .btn-kq, .pill, .page-btn, .icon-btn { transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease-spring), box-shadow .2s; }
  .btn:hover, .cart-pill:hover, .btn-kq:hover { transform: translateY(-2px); }
  .btn:active, .cart-pill:active, .btn-kq:active, .icon-btn:active, .pill:active, .page-btn:active { transform: translateY(0) scale(.96); }
  .btn, .btn-kq { position: relative; overflow: hidden; }
  .kq-ripple { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); pointer-events: none; animation: kq-ripple .55s ease-out forwards; }
  .shop-nav a { transition: border-color .25s, color .2s; }
  .site-footer a { transition: color .2s, padding-left .2s; }
  .footer-grid ul a:hover, .footer-grid li a:hover { padding-left: 4px; }

  /* ---------- cart badge bump + WhatsApp pulse ---------- */
  .cart-badge.is-bumping { animation: kq-bump .5s var(--ease-spring); }
  .wa-float { transition: transform .25s var(--ease-spring), background-color .2s, color .2s; }
  .wa-float:hover { transform: translateY(-3px) scale(1.04); }
  .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold); z-index: -1; animation: kq-pulse 1.8s ease-out 2.5s 3; pointer-events: none; }

  /* ---------- product page ---------- */
  .motion-ok .gallery, .motion-ok .product-info { animation: kq-fade-up .7s var(--ease-out) backwards; }
  .motion-ok .product-info { animation-delay: .1s; }
  .gallery__main img.is-swapping { animation: kq-fade-in .35s ease; }
  .gallery__thumb { transition: transform .2s var(--ease-spring), box-shadow .2s; }
  .gallery__thumb:hover { transform: translateY(-2px); }
  .swatch { transition: transform .2s var(--ease-spring), box-shadow .2s; }
  .swatch:hover { transform: scale(1.12); }
  details[open] > :not(summary) { animation: kq-fade-up .35s var(--ease-out); }

  /* ---------- cart & checkout ---------- */
  .motion-ok .cart-table tbody tr { animation: kq-fade-up .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
  .pay-panel { animation: kq-fade-up .35s var(--ease-out); }
  .option { transition: border-color .2s, background-color .2s, transform .2s var(--ease-spring), box-shadow .2s; }
  .option:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17, 17, 17, .06); }
  .motion-ok .step-card { animation: kq-fade-up .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .motion-ok .success-hero { animation: kq-rise-in .8s var(--ease-out) backwards; }

  /* ---------- account & auth ---------- */
  .motion-ok .auth-card { animation: kq-rise-in .7s var(--ease-out) backwards; }
  .account-nav a { transition: background-color .2s, color .2s, padding-left .2s; }
  .account-nav a:hover { padding-left: 18px; }
  .motion-ok .stat { animation: kq-fade-up .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

  /* ---------- Bootstrap drawers: their contents slide in one by one ---------- */
  .offcanvas.showing .offcanvas-body > *, .offcanvas.show .offcanvas-body > * { animation: kq-fade-up .45s var(--ease-out) backwards; }
  .offcanvas .offcanvas-body > *:nth-child(2) { animation-delay: .05s; }
  .offcanvas .offcanvas-body > *:nth-child(3) { animation-delay: .1s; }
  .offcanvas .offcanvas-body > *:nth-child(4) { animation-delay: .15s; }
  .offcanvas .offcanvas-body > *:nth-child(5) { animation-delay: .2s; }
  .offcanvas .offcanvas-body > *:nth-child(n+6) { animation-delay: .25s; }
  .mobile-menu__links a { transition: padding-left .2s, color .2s; }
  .mobile-menu__links a:hover { padding-left: 8px; }
  .mini-cart .offcanvas-title svg { animation: kq-bump .6s var(--ease-spring) .2s backwards; }
  .back-to-top { transition: transform .25s var(--ease-spring), background-color .2s, color .2s, opacity .3s; }
  .back-to-top:hover { transform: translateY(-3px); }
  .modal.fade .modal-dialog { transition: transform .3s var(--ease-spring); transform: scale(.94); }
  .modal.show .modal-dialog { transform: none; }

  /* ---------- admin ---------- */
  .motion-ok .admin-content .panel, .motion-ok .admin-content .alert { animation: kq-fade-up .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
  .motion-ok .admin-side .side-link { animation: kq-slide-l .45s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
  .side-link { transition: background-color .2s, color .2s, padding-left .2s; }
  .side-link:hover { padding-left: 16px; }
  .motion-ok .chart__bar { transform-origin: bottom; animation: kq-grow-y .8s var(--ease-out) backwards; animation-delay: calc(.2s + var(--i, 0) * 60ms); }
  .motion-ok .hbar__fill { transform-origin: left; animation: kq-grow-x .9s var(--ease-out) .25s backwards; }
  .table-wrap tbody tr { transition: background-color .2s; }
}

/* Never animate for people who asked their device to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-panel__ring, .hero-panel__media, .wa-float::before { animation: none !important; }
}