/* ════════════════════════════════════════════════════════
   E2X MOTION SYSTEM — micro-interactions premium
   ────────────────────────────────────────────────────────
   Rules:
   • Only transform + opacity (zero layout reflow)
   • Enter: 200–280ms spring  |  Exit: 120–160ms ease-in
   • Every animation has a cause → effect relationship
   • prefers-reduced-motion block at the bottom
════════════════════════════════════════════════════════ */

/* ── EXTRA EASING TOKENS ─────────────────────────────── */
:root {
  --spring:   cubic-bezier(.34,1.56,.64,1);   /* overshoots → natural pop  */
  --ease-out: cubic-bezier(0,0,.2,1);          /* decelerates → enters      */
  --ease-in:  cubic-bezier(.4,0,1,1);          /* accelerates → exits       */
  --dur-micro: .13s;
  --dur-fast:  .20s;
  --dur-med:   .28s;
}

/* ══════════════════════════════════════════════════════
   1. KEYFRAMES
══════════════════════════════════════════════════════ */
@keyframes shimmerBtn {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%)  skewX(-20deg); }
}
@keyframes toastSpring {
  0%   { transform: translateX(64px) scale(.88); opacity: 0; }
  65%  { transform: translateX(-5px) scale(1.02); opacity: 1; }
  100% { transform: translateX(0)    scale(1);    opacity: 1; }
}
@keyframes popIn {
  0%   { transform: scale(.6);    opacity: 0; }
  70%  { transform: scale(1.08);  opacity: 1; }
  100% { transform: scale(1);     opacity: 1; }
}
@keyframes heartBeat {
  0%,100% { transform: scale(1); }
  30%     { transform: scale(1.35); }
  60%     { transform: scale(.9); }
}
@keyframes badgePop {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.5); }
  70%     { transform: scale(.88); }
}
@keyframes slideIndicator {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(62,142,99,.35); }
  50%     { box-shadow: 0 0 0 6px rgba(62,142,99,0); }
}
@keyframes checkDraw {
  from { stroke-dashoffset: 40; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes modalEnter {
  from { transform: scale(.92) translateY(14px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   2. SHIMMER — primary CTA buttons
══════════════════════════════════════════════════════ */
.btn-green,
.mbtn-green,
.mbtn-blue,
.btn-buy,
.auth-submit,
.adm-btn.primary {
  overflow: hidden;
  position: relative;
}
.btn-green::before,
.mbtn-green::before,
.mbtn-blue::before,
.btn-buy::before,
.auth-submit::before,
.adm-btn.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.btn-green:hover::before,
.mbtn-green:hover::before,
.mbtn-blue:hover::before,
.btn-buy:hover::before,
.auth-submit:hover::before,
.adm-btn.primary:hover::before {
  animation: shimmerBtn .55s var(--ease-out) forwards;
}

/* ══════════════════════════════════════════════════════
   3. SPRING PRESS — all interactive elements
══════════════════════════════════════════════════════ */
.btn-green:active,
.btn-outline:active  { transform: scale(.95) !important; transition: transform var(--dur-micro) !important; }

.mbtn:active         { transform: scale(.95) translateY(0) !important; transition: transform var(--dur-micro) !important; }

.btn-buy:active      { transform: scale(.94) !important; transition: transform var(--dur-micro) !important; }

.auth-submit:active  { transform: scale(.96) !important; transition: transform var(--dur-micro) !important; }

.adm-btn:active      { transform: scale(.94) !important; transition: transform var(--dur-micro) !important; }

.h-btn:active        { transform: scale(.93) !important; transition: transform var(--dur-micro) !important; }

.card-fav:active     { animation: heartBeat .3s var(--spring) !important; }

.btn-peek:active     { transform: scale(.88) !important; }

/* ══════════════════════════════════════════════════════
   4. ICON MICRO-MOVEMENT inside buttons
══════════════════════════════════════════════════════ */
/* Arrow / next icons: nudge right */
.btn-green i.fa-arrow-right,
.auth-submit i.fa-arrow-right,
.adm-btn i.fa-arrow-right,
.btn-buy i.fa-cart-plus {
  transition: transform var(--dur-fast) var(--spring);
  display: inline-block;
}
.btn-green:hover i.fa-arrow-right,
.auth-submit:hover i.fa-arrow-right,
.adm-btn:hover i.fa-arrow-right {
  transform: translateX(3px);
}
.btn-buy:hover i.fa-cart-plus {
  transform: rotate(-12deg) scale(1.15);
}

/* Eye icon on peek button rotates */
.btn-peek i {
  transition: transform var(--dur-fast) var(--spring);
  display: inline-block;
}
.btn-peek:hover i { transform: scale(1.2); }

/* Save icon on adm-btn.primary */
.adm-btn.primary i.fa-save,
.adm-btn.primary i.fa-check {
  transition: transform var(--dur-fast) var(--spring);
  display: inline-block;
}
.adm-btn.primary:hover i.fa-save  { transform: translateY(-2px); }
.adm-btn.primary:hover i.fa-check { transform: scale(1.2); }

/* ══════════════════════════════════════════════════════
   5. CARDS — premium hover lift + price highlight
══════════════════════════════════════════════════════ */
.card {
  transition:
    box-shadow var(--dur-med) var(--ease-out),
    transform  var(--dur-med) var(--ease-out),
    border-color var(--dur-med);
}
.card:hover {
  box-shadow:
    0 22px 52px rgba(0,0,0,.13),
    0 0 0 1.5px rgba(62,142,99,.18) !important;
  transform: translateY(-8px) !important;
  border-color: rgba(62,142,99,.22) !important;
}
/* Price subtle scale on card hover */
.card-price {
  display: inline-block;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--spring);
}
.card:hover .card-price {
  color: var(--green-dark);
  transform: scale(1.04);
}
/* Category badge pop */
.card-cat {
  display: inline-block;
  transition: letter-spacing var(--dur-fast);
}
.card:hover .card-cat { letter-spacing: .8px; }

/* Buy button icon lift on card hover */
.card:hover .btn-buy {
  box-shadow: 0 4px 12px rgba(62,142,99,.3);
}

/* ══════════════════════════════════════════════════════
   6. FOCUS RINGS — keyboard + screen reader friendly
══════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Remove default outline for mouse users */
:focus:not(:focus-visible) { outline: none; }

/* Input glow on focus */
.inp-wrap input:focus,
.auth-card input:focus,
#ck-nome:focus, #ck-email:focus, #ck-cep:focus,
.adm-form-grid input:focus,
.adm-form-grid textarea:focus,
.adm-form-grid select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(62,142,99,.13) !important;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast) !important;
}

/* ══════════════════════════════════════════════════════
   7. TOAST — springier entrance
══════════════════════════════════════════════════════ */
.toast { animation: toastSpring .4s var(--ease-out) both !important; }
.toast i {
  animation: popIn .35s var(--spring) .05s both;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════
   8. MODALS — spring open
══════════════════════════════════════════════════════ */
.overlay.show > .modal,
.overlay.show > .ck-modal {
  animation: modalEnter .32s var(--spring) both;
}
.adm-overlay.show .adm-modal {
  animation: modalEnter .3s var(--spring) both;
}

/* ══════════════════════════════════════════════════════
   9. NAV CATEGORY — animated underline indicator
══════════════════════════════════════════════════════ */
.nav-item {
  position: relative;
}
.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--green);
  border-radius: 2px 2px 0 0;
  transition: left var(--dur-fast) var(--ease-out),
              right var(--dur-fast) var(--ease-out);
}
.nav-item.active::after,
.nav-item:hover::after { left: 10px; right: 10px; }

/* ══════════════════════════════════════════════════════
   10. ADMIN SIDEBAR — sliding left-bar indicator
══════════════════════════════════════════════════════ */
.adm-link {
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast),
              transform var(--dur-micro) !important;
}
.adm-link::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--green);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform var(--dur-fast) var(--spring);
}
.adm-link.on::before  { transform: scaleY(1); }
.adm-link:hover       { transform: translateX(3px); }
.adm-link.on:hover    { transform: none; }
.adm-link i           { transition: transform var(--dur-fast) var(--spring); }
.adm-link:hover i     { transform: scale(1.15); }

/* ══════════════════════════════════════════════════════
   11. ADMIN STAT CARDS — lift on hover
══════════════════════════════════════════════════════ */
.stat-card {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) !important;
  cursor: default;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}
.stat-card .s-icon {
  transition: transform var(--dur-med) var(--spring);
}
.stat-card:hover .s-icon { transform: scale(1.12) rotate(-5deg); }

/* ══════════════════════════════════════════════════════
   12. TABLE ROWS — smooth hover
══════════════════════════════════════════════════════ */
tr td { transition: background .12s; }
.tbl-btn { transition: all var(--dur-fast), transform var(--dur-micro) var(--spring) !important; }
.tbl-btn:active { transform: scale(.88) !important; }

/* ══════════════════════════════════════════════════════
   13. MOBILE NAV TABS — active indicator pill
══════════════════════════════════════════════════════ */
.mob-tab { position: relative; overflow: hidden; }
.mob-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2.5px;
  background: var(--green);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--spring);
}
.mob-tab.active::before { transform: scaleX(1); }
.mob-tab i {
  transition: transform var(--dur-fast) var(--spring),
              color var(--dur-fast);
}
.mob-tab.active i { transform: translateY(-2px) scale(1.08); }

/* ══════════════════════════════════════════════════════
   14. CART BADGE — pop on change
══════════════════════════════════════════════════════ */
.notif-badge, .mbadge {
  transition: transform var(--dur-micro);
}

/* ══════════════════════════════════════════════════════
   15. TRUST ITEMS — icon animate on section enter
══════════════════════════════════════════════════════ */
.trust-item {
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) !important;
}
.trust-item:hover { transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════
   16. HERO BUTTONS — pulse on load, shimmer, spring press
══════════════════════════════════════════════════════ */
.hx-cta {
  animation: pulseGreen 2.5s ease 1.5s 3;
  overflow: hidden;
  position: relative;
}
.hx-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.hx-cta:hover::before {
  animation: shimmerBtn .55s var(--ease-out, cubic-bezier(0,0,.2,1)) forwards;
}
.hx-cta:active {
  transform: scale(.96) !important;
  transition: transform .12s !important;
}
.hx-wpp:active {
  transform: scale(.96) !important;
  transition: transform .12s !important;
}

/* ══════════════════════════════════════════════════════
   17. FILTER TAGS — pop entrance
══════════════════════════════════════════════════════ */
.ftag {
  animation: popIn .25s var(--spring) both;
  display: inline-flex;
}

/* ══════════════════════════════════════════════════════
   18. CHECKOUT STEPS — progress pips animate
══════════════════════════════════════════════════════ */
.ck-step.on {
  animation: popIn .3s var(--spring) both;
}

/* ══════════════════════════════════════════════════════
   19. TOGGLE SWITCH — spring thumb
══════════════════════════════════════════════════════ */
.toggle::after {
  transition: transform .22s var(--spring),
              background .15s !important;
}
.toggle:active::after { transform: scaleX(1.25); }
.toggle.on:active::after { transform: translateX(18px) scaleX(1.25); }

/* ══════════════════════════════════════════════════════
   20. USER SECTION TABS & AUTH TABS — slide indicator
══════════════════════════════════════════════════════ */
.usr-tab, .auth-tab {
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast),
              transform var(--dur-micro) !important;
}
.usr-tab:active, .auth-tab:active { transform: scale(.95); }

/* ══════════════════════════════════════════════════════
   REDUCED MOTION — disable all motion for accessibility
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}