/* ==========================================================================
   SYSTEM ANIMACJI I UX - jedyny centralny plik odpowiedzialny za animacje
   w calym sklepie (6 stron). Sterowany z panelu admina przez
   /api/settings/animations (patrz shop-core.js -> applyAnimationSettings()).

   ZASADY:
   - wylacznie transform/opacity (+ filter tam gdzie ma to sens - glow)
   - zero animowania width/height/top/left/margin/padding -> zero layout shift
   - mobile-first: hover TYLKO w @media (hover:hover) and (pointer:fine)
   - prefers-reduced-motion: reduce jest respektowane globalnie na samej gorze
   ========================================================================== */

:root{
  --anim-speed-fast: 150ms;
  --anim-speed-normal: 300ms;
  --anim-speed-slow: 550ms;
  --anim-ease: cubic-bezier(.22,.61,.36,1);
  --reveal-distance: 16px; /* nadpisywane per-element przez data-anim-intensity */
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION - jeden blok, dziala globalnie dla calego systemu.
   Animacje reveal/wejscia sa calkowicie wygaszane; interakcje (np. :active)
   zostaja jako minimalny feedback, ale bez duzych transformacji.
   ========================================================================== */
@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;
  }
  [data-anim-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   KEYFRAMES - 12 efektow z panelu admina (None jest po prostu brakiem
   animacji, wiec nie ma wlasnej klatki). Wszystkie uzywaja transform/opacity/
   filter, nigdy width/height/top/left/margin.
   ========================================================================== */
@keyframes anim-fade        { from{opacity:0;} to{opacity:1;} }
@keyframes anim-fade-up     { from{opacity:0; transform:translateY(var(--reveal-distance));} to{opacity:1; transform:translateY(0);} }
@keyframes anim-fade-down   { from{opacity:0; transform:translateY(calc(-1 * var(--reveal-distance)));} to{opacity:1; transform:translateY(0);} }
@keyframes anim-fade-left   { from{opacity:0; transform:translateX(var(--reveal-distance));} to{opacity:1; transform:translateX(0);} }
@keyframes anim-fade-right  { from{opacity:0; transform:translateX(calc(-1 * var(--reveal-distance)));} to{opacity:1; transform:translateX(0);} }
@keyframes anim-scale       { from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} }
@keyframes anim-pop         { 0%{opacity:0; transform:scale(.82);} 70%{opacity:1; transform:scale(1.05);} 100%{opacity:1; transform:scale(1);} }
@keyframes anim-bounce      { 0%{opacity:0; transform:translateY(calc(var(--reveal-distance) * 0.6)) scale(.94);} 55%{opacity:1; transform:translateY(-4px) scale(1.02);} 100%{opacity:1; transform:translateY(0) scale(1);} }
@keyframes anim-slide       { from{opacity:0; transform:translateX(calc(-1.5 * var(--reveal-distance)));} to{opacity:1; transform:translateX(0);} }
@keyframes anim-glow        { 0%,100%{filter:drop-shadow(0 0 0 rgba(255,106,26,0));} 50%{filter:drop-shadow(0 0 8px rgba(255,106,26,.55));} }
@keyframes anim-shake       { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-4px);} 40%{transform:translateX(4px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(3px);} }
@keyframes anim-badge-pulse { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
@keyframes anim-item-remove { from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(.9);} }

/* ==========================================================================
   SCROLL REVEAL - montowane przez JS (jeden IntersectionObserver, patrz
   shop-core.js). Element ma data-anim-reveal="<kategoria>" w HTML; JS
   dopisuje data-anim-effect/data-anim-speed/data-anim-intensity z configu
   admina i klase .is-visible przy pierwszym wejsciu w viewport.
   ========================================================================== */
[data-anim-reveal] { opacity: 0; }
[data-anim-reveal][data-anim-effect="none"] { opacity: 1; }

[data-anim-reveal].is-visible[data-anim-effect="fade"]        { animation: anim-fade var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="fade-up"]     { animation: anim-fade-up var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="fade-down"]   { animation: anim-fade-down var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="fade-left"]   { animation: anim-fade-left var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="fade-right"]  { animation: anim-fade-right var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="scale"]       { animation: anim-scale var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="pop"]         { animation: anim-pop var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="bounce"]      { animation: anim-bounce var(--anim-speed-slow) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="slide"]       { animation: anim-slide var(--anim-speed-normal) var(--anim-ease) forwards; }
[data-anim-reveal].is-visible[data-anim-effect="glow"]        { animation: anim-fade var(--anim-speed-normal) var(--anim-ease) forwards, anim-glow 1.4s var(--anim-ease) 1; }
[data-anim-reveal].is-visible[data-anim-effect="shake"]       { animation: anim-fade var(--anim-speed-fast) var(--anim-ease) forwards, anim-shake 420ms var(--anim-ease); }

[data-anim-speed="slow"]   { animation-duration: var(--anim-speed-slow) !important; }
[data-anim-speed="fast"]   { animation-duration: var(--anim-speed-fast) !important; }
[data-anim-intensity="subtle"] { --reveal-distance: 8px; }
[data-anim-intensity="normal"] { --reveal-distance: 16px; }
[data-anim-intensity="strong"] { --reveal-distance: 32px; }

/* Stagger list - JS dolicza animation-delay inline per element (patrz
   applyAnimationSettings) na bazie kolejnosci + opoznienia z configu. */

/* ==========================================================================
   PRZYCISKI - tap/active zawsze, hover tylko na urzadzeniach z myszka.
   ========================================================================== */
.btn, button {
  transition: transform var(--anim-speed-fast) var(--anim-ease),
              box-shadow var(--anim-speed-fast) var(--anim-ease),
              background-color var(--anim-speed-fast) var(--anim-ease);
}
.btn:active, button:active { transform: scale(0.96); }
.btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover, button:hover { transform: translateY(-1px); }
}
body.anim-buttons-off .btn:active, body.anim-buttons-off button:active { transform: none; }

/* "Dodaj do koszyka" - stan potwierdzenia (klasa dopisywana/usuwana przez JS,
   patrz playAddToCartFeedback() w shop-core.js) */
.btn.added { background-color: var(--ok, #7fbf6a) !important; border-color: var(--ok, #7fbf6a) !important; color: #10130d !important; }
.btn.is-loading { opacity: 0.7; animation: anim-fade 900ms var(--anim-ease) infinite alternate; }

/* Licznik koszyka - puls przy dodaniu pozycji */
#miniCartBadge.pulse { animation: anim-badge-pulse 420ms var(--anim-ease); }

/* ==========================================================================
   KARTY (produkty, pozycje koszyka, metody dostawy) - hover tylko desktop.
   ========================================================================== */
.product, .cart-item, .shipping-method-card {
  transition: transform var(--anim-speed-normal) var(--anim-ease),
              box-shadow var(--anim-speed-normal) var(--anim-ease),
              border-color var(--anim-speed-fast) var(--anim-ease);
}
.cart-item.cart-item-removing { animation: anim-item-remove 240ms var(--anim-ease) forwards; pointer-events: none; }
.cart-item .remove { transition: transform var(--anim-speed-fast) var(--anim-ease), color var(--anim-speed-fast) var(--anim-ease); }
.cart-item .remove:active { transform: scale(0.85); }
@media (hover: hover) and (pointer: fine) {
  .product:hover, .shipping-method-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
}
.product:active, .shipping-method-card:active { transform: scale(0.98); }

/* ==========================================================================
   MODALE - fade overlay + scale-in box.
   ========================================================================== */
.modal-overlay { animation: anim-fade var(--anim-speed-fast) var(--anim-ease); }
#modalContent { animation: anim-scale var(--anim-speed-normal) var(--anim-ease); }

/* ==========================================================================
   PAKIET 2A - warianty hover/press sterowane z panelu admina przez atrybuty
   data-* na <body> (ustawiane w JS z animation_config). Domyslne zachowanie
   .btn/.product (linie wyzej) zostaje jako fallback gdy admin nic nie ustawi
   albo endpoint configu zawiedzie - wiec brak configu nigdy nie psuje UX.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  body[data-btn-hover="scale"] .btn:hover, body[data-btn-hover="scale"] button:hover { transform: scale(1.03); }
  body[data-btn-hover="glow"] .btn:hover, body[data-btn-hover="glow"] button:hover { filter: drop-shadow(0 0 6px rgba(255,106,26,.55)); }
  body[data-btn-hover="none"] .btn:hover, body[data-btn-hover="none"] button:hover { transform: none; }
  body[data-card-hover="scale"] .product:hover { transform: scale(1.02); }
  body[data-card-hover="glow"] .product:hover { filter: drop-shadow(0 0 10px rgba(255,106,26,.35)); }
  body[data-card-hover="none"] .product:hover { transform: none; box-shadow: none; }
}
body[data-btn-press="press"] .btn:active, body[data-btn-press="press"] button:active { transform: scale(0.94) translateY(1px); }
body[data-btn-press="none"] .btn:active, body[data-btn-press="none"] button:active { transform: none; }
body[data-card-press="none"] .product:active { transform: none; }

/* Mini-cart: JS ustawia el.style.animation bezposrednio (nazwa efektu z
   configu + czas) przy otwarciu panelu i przy nowej pozycji - ten sam
   wzorzec co juz dziala w podgladzie panelu admina. */

#topNav.open { animation: anim-fade-down var(--anim-speed-fast) var(--anim-ease); }

/* ==========================================================================
   KOMUNIKATY (sukces/blad) - lekki fade, blad moze dostac shake (patrz JS).
   ========================================================================== */
.status-msg.show, .msg.ok, .msg.err { animation: anim-fade var(--anim-speed-fast) var(--anim-ease); }
.shake-error { animation: anim-shake 420ms var(--anim-ease); }

/* ==========================================================================
   GALERIA PRODUKTU.
   ========================================================================== */
.modal-gallery-main img { transition: opacity var(--anim-speed-fast) var(--anim-ease); }