/* ==========================================================================
   MOTOLECTRON STOREFRONT — INTERACTION LAYER (Apple-style feedback)
   Loaded right after homepage.css on every storefront page.

   Adds press / hover / focus feedback plus the auth-modal open, close and
   Log in <-> Sign up flip motion. It changes no colours, shapes or type:
   the dark racing look from DESIGN.md is untouched.

   Press and hover use the individual `scale` / `translate` properties so they
   compose with the `transform`s pages already set (skewed buttons, card lifts,
   the floating hero product) instead of overriding them. Press timing is driven
   by custom properties, so `:active` only flips variables and never has to
   restate (or fight) an element's own `transition` list.
   ========================================================================== */

:root {
  --ix-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* hover, colour, shadow      */
  --ix-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* springy release after press */
  --ix-sheet:    cubic-bezier(0.32, 0.72, 0, 1);   /* modal open (sheet curve)   */
  --ix-press-btn:  0.96;
  --ix-press-icon: 0.9;
  --ix-press-card: 0.985;
  --ix-focus-ring: 0 0 0 4px var(--moto-red-glow, rgba(255, 31, 31, 0.22));
}

/* --------------------------------------------------------------------------
   A. Interactive elements: hygiene + one transition language
   -------------------------------------------------------------------------- */
.button-submit,
.btn-view-all,
.shop-sale-btn,
.btn-confirm,
.btn-cancel,
.auth-social-row .btn,
.news-carousel-btn,
.notif-mark-all-btn,
.resend-otp-btn,
.reset-method-tab,
.theme-segment-btn,
.category-filter,
.btn-fav-add-cart,
.btn-fav-view,
.btn-remove-fav,
.btn-create-collection,
.btn-delete-collection,
.profile-dropdown-link,
.swatch-item,
.hero-pagination-dot,
.otp-digit-box,
#authBtn,
.user-profile,
.icon-link,
.mic-btn,
.hamburger-btn,
.close-modal-btn,
.reveal-btn,
.reveal-btn-forgot,
.product-wishlist-btn,
.btn-back-to-top,
.dropdown-toggle,
.logo-link,
.category-tile,
.product-card,
.news-card,
.brand-logo-card,
.partner-panel,
.payment-panel,
.pay-logo,
.cta-link,
.auth-link-red,
.notif-dropdown-footer,
.site-footer a {
  -webkit-tap-highlight-color: transparent; /* no grey flash on mobile taps */
  touch-action: manipulation;               /* no 300 ms double-tap delay   */
  --ix-scale-dur: 320ms;
  --ix-scale-ease: var(--ix-spring);
}

/* Elements whose stylesheet sets no transition of its own get the shared one.
   `all` keeps any colour/border/transform hover they already have; the later
   entries give scale (press) and translate (hover lift) their own timing. */
.button-submit,
.btn-view-all,
.shop-sale-btn,
.btn-confirm,
.btn-cancel,
.auth-social-row .btn,
.news-carousel-btn,
.notif-mark-all-btn,
.resend-otp-btn,
.reset-method-tab,
.theme-segment-btn,
.category-filter,
.btn-fav-add-cart,
.btn-fav-view,
.btn-remove-fav,
.btn-create-collection,
.btn-delete-collection,
.profile-dropdown-link,
.swatch-item,
.otp-digit-box,
#authBtn,
.user-profile,
.icon-link,
.mic-btn,
.hamburger-btn,
.close-modal-btn,
.reveal-btn,
.reveal-btn-forgot,
.product-wishlist-btn,
.btn-back-to-top,
.dropdown-toggle,
.logo-link,
.category-tile,
.news-card,
.brand-logo-card,
.partner-panel,
.payment-panel,
.pay-logo,
.cta-link,
.auth-link-red,
.notif-dropdown-footer,
.site-footer a {
  transition:
    all 220ms var(--ix-ease-out),
    transform 300ms var(--ix-ease-out),
    scale var(--ix-scale-dur) var(--ix-scale-ease),
    translate 200ms var(--ix-ease-out),
    outline-color 0s, outline-width 0s, outline-style 0s, outline-offset 0s; /* focus rings appear instantly */
}

/* homepage.css declares this one with !important, so it has to be restated
   here to give the press its own timing; the `all` part keeps its hover feel. */
.product-card {
  transition:
    all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    scale var(--ix-scale-dur) var(--ix-scale-ease),
    translate 200ms var(--ix-ease-out),
    outline-color 0s, outline-width 0s, outline-style 0s, outline-offset 0s !important;
}

/* --------------------------------------------------------------------------
   B. Press feedback (quick down, springy up)
   -------------------------------------------------------------------------- */
/* Buttons & pills */
.button-submit,
.btn-view-all,
.shop-sale-btn,
.btn-confirm,
.btn-cancel,
.auth-social-row .btn,
.news-carousel-btn,
.notif-mark-all-btn,
.resend-otp-btn,
.reset-method-tab,
.theme-segment-btn,
.category-filter,
.btn-fav-add-cart,
.btn-fav-view,
.btn-remove-fav,
.btn-create-collection,
.btn-delete-collection,
.profile-dropdown-link,
.swatch-item,
.hero-pagination-dot,
.otp-digit-box,
#authBtn,
.user-profile {
  --ix-press: var(--ix-press-btn);
}

/* Icon buttons */
.icon-link,
.mic-btn,
.hamburger-btn,
.close-modal-btn,
.reveal-btn,
.reveal-btn-forgot,
.product-wishlist-btn,
.btn-back-to-top,
.dropdown-toggle,
.logo-link {
  --ix-press: var(--ix-press-icon);
}

/* Cards & tiles */
.category-tile,
.product-card,
.news-card,
.brand-logo-card,
.partner-panel,
.payment-panel,
.pay-logo {
  --ix-press: var(--ix-press-card);
}

.button-submit:active,
.btn-view-all:active,
.shop-sale-btn:active,
.btn-confirm:active,
.btn-cancel:active,
.auth-social-row .btn:active,
.news-carousel-btn:active,
.notif-mark-all-btn:active,
.resend-otp-btn:active,
.reset-method-tab:active,
.theme-segment-btn:active,
.category-filter:active,
.btn-fav-add-cart:active,
.btn-fav-view:active,
.btn-remove-fav:active,
.btn-create-collection:active,
.btn-delete-collection:active,
.profile-dropdown-link:active,
.swatch-item:active,
.hero-pagination-dot:active,
.otp-digit-box:active,
#authBtn:active,
.user-profile:active,
.icon-link:active,
.mic-btn:active,
.hamburger-btn:active,
.close-modal-btn:active,
.reveal-btn:active,
.reveal-btn-forgot:active,
.product-wishlist-btn:active,
.btn-back-to-top:active,
.dropdown-toggle:active,
.logo-link:active,
.category-tile:active,
.product-card:active,
.news-card:active,
.brand-logo-card:active,
.partner-panel:active,
.payment-panel:active,
.pay-logo:active {
  scale: var(--ix-press);
  --ix-scale-dur: 90ms;   /* press-in is quick; release falls back to the spring */
  --ix-scale-ease: ease-out;
}

/* Text links: a soft dim instead of a squash (their translateX hovers stay) */
.cta-link:active,
.auth-link-red:active,
.notif-dropdown-footer:active,
.site-footer a:active {
  opacity: 0.65;
  transition-duration: 90ms;
}

/* Never squash something that cannot be pressed */
:is(button, a, [role="button"]):is(:disabled, [aria-disabled="true"], .is-disabled):active {
  scale: 1;
  translate: 0;
  opacity: unset;
}

/* --------------------------------------------------------------------------
   C. Hover polish — only where the page gives the element no hover motion yet
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .button-submit:hover,
  .auth-social-row .btn:hover,
  .theme-segment-btn:hover,
  .news-carousel-btn:hover,
  .btn-back-to-top:hover,
  .btn-confirm:hover,
  .btn-cancel:hover,
  #authBtn:hover,
  .user-profile:hover {
    translate: 0 -1px;
  }

  .icon-link:hover,
  .mic-btn:hover,
  .hamburger-btn:hover,
  .close-modal-btn:hover,
  .reveal-btn:hover,
  .reveal-btn-forgot:hover,
  .dropdown-toggle:hover {
    translate: 0 -1px;
    filter: brightness(1.2);
  }

  /* Pressing while hovered should still read as "down" */
  .button-submit:hover:active,
  .auth-social-row .btn:hover:active,
  .theme-segment-btn:hover:active,
  .news-carousel-btn:hover:active,
  .btn-back-to-top:hover:active,
  .btn-confirm:hover:active,
  .btn-cancel:hover:active,
  #authBtn:hover:active,
  .user-profile:hover:active,
  .icon-link:hover:active,
  .mic-btn:hover:active,
  .hamburger-btn:hover:active,
  .close-modal-btn:hover:active,
  .reveal-btn:hover:active,
  .reveal-btn-forgot:hover:active,
  .dropdown-toggle:hover:active {
    translate: 0;
  }
}

/* --------------------------------------------------------------------------
   D. Focus: a visible ring for keyboard users only, brand red + soft glow
   -------------------------------------------------------------------------- */
.button-submit:focus-visible,
.btn-view-all:focus-visible,
.shop-sale-btn:focus-visible,
.btn-confirm:focus-visible,
.btn-cancel:focus-visible,
.auth-social-row .btn:focus-visible,
.news-carousel-btn:focus-visible,
.notif-mark-all-btn:focus-visible,
.resend-otp-btn:focus-visible,
.reset-method-tab:focus-visible,
.theme-segment-btn:focus-visible,
.category-filter:focus-visible,
.btn-fav-add-cart:focus-visible,
.btn-fav-view:focus-visible,
.btn-remove-fav:focus-visible,
.btn-create-collection:focus-visible,
.btn-delete-collection:focus-visible,
.profile-dropdown-link:focus-visible,
.swatch-item:focus-visible,
.hero-pagination-dot:focus-visible,
.otp-digit-box:focus-visible,
#authBtn:focus-visible,
.user-profile:focus-visible,
.icon-link:focus-visible,
.mic-btn:focus-visible,
.hamburger-btn:focus-visible,
.close-modal-btn:focus-visible,
.reveal-btn:focus-visible,
.reveal-btn-forgot:focus-visible,
.product-wishlist-btn:focus-visible,
.btn-back-to-top:focus-visible,
.dropdown-toggle:focus-visible,
.logo-link:focus-visible,
.category-tile:focus-visible,
.product-card:focus-visible,
.news-card:focus-visible,
.brand-logo-card:focus-visible,
.cta-link:focus-visible,
.auth-link-red:focus-visible,
.notif-dropdown-footer:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--moto-red, #ff1f1f);
  outline-offset: 2px;
  box-shadow: var(--ix-focus-ring);
}

/* Mouse/touch focus shows no ring (the press feedback is the response) */
.button-submit:focus:not(:focus-visible),
.btn-view-all:focus:not(:focus-visible),
.shop-sale-btn:focus:not(:focus-visible),
.auth-social-row .btn:focus:not(:focus-visible),
.theme-segment-btn:focus:not(:focus-visible),
.swatch-item:focus:not(:focus-visible),
.hero-pagination-dot:focus:not(:focus-visible),
#authBtn:focus:not(:focus-visible),
.user-profile:focus:not(:focus-visible),
.icon-link:focus:not(:focus-visible),
.close-modal-btn:focus:not(:focus-visible),
.reveal-btn:focus:not(:focus-visible),
.dropdown-toggle:focus:not(:focus-visible),
.logo-link:focus:not(:focus-visible) {
  outline: none;
}

/* Auth inputs: the ring lives on the field wrapper, on the brand red
   (replaces homepage.css's off-palette #ff0000 focus border) */
.login-ui-form .inputForm {
  transition:
    border-color 200ms var(--ix-ease-out),
    box-shadow 200ms var(--ix-ease-out),
    background-color 200ms var(--ix-ease-out);
}

.login-ui-form .inputForm:focus-within,
.auth-modal .login-ui-form .inputForm:focus-within,
.auth-modal .inputForm:focus-within {
  /* homepage.css forces a grey ring inside .auth-modal with !important; match it */
  border-color: var(--moto-red, #ff1f1f) !important;
  box-shadow: var(--ix-focus-ring) !important;
}

.login-ui-form .inputForm .input:focus,
.login-ui-form .inputForm .input:focus-visible {
  outline: none;
  box-shadow: none;
}

.otp-digit-box:focus,
.otp-digit-box:focus-visible {
  outline: none;
  border-color: var(--moto-red, #ff1f1f);
  box-shadow: var(--ix-focus-ring);
}

/* --------------------------------------------------------------------------
   E. Auth modal motion: fade + scale open, soft close, Log in <-> Sign up flip
      Class choreography lives in home/homepage.js (activateAuthTab /
      closeAuthModal / openLoginModal). The flip-in class stays on a card
      until the next flip or close so the open animation cannot restart.
   -------------------------------------------------------------------------- */
.auth-modal-overlay {
  perspective: 1400px; /* shared vanishing point for the card flips */
}

.auth-modal-overlay.show {
  animation: authOverlayIn 280ms var(--ix-ease-out) both;
}

.auth-modal-overlay.show.is-closing {
  animation: authOverlayOut 200ms var(--ix-ease-out) both;
  pointer-events: none;
}

/* Open: the repeated class beats homepage.css's `modalPop … !important` */
.auth-modal-overlay.show .auth-modal.auth-modal {
  animation: authCardIn 420ms var(--ix-sheet) both !important;
  transform-origin: center center !important;
}

.auth-modal-overlay.show.is-closing .auth-modal.auth-modal {
  animation: authCardOut 200ms var(--ix-ease-out) both !important;
}

/* Flip: two half-turns. Right = the right edge recedes (Sign up), left = mirror (Log in). */
.auth-modal-overlay.show .auth-modal.auth-flip-out-right,
.auth-modal-overlay.show .auth-modal.auth-flip-out-left,
.auth-modal-overlay.show .auth-modal.auth-flip-in-right,
.auth-modal-overlay.show .auth-modal.auth-flip-in-left {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transform-origin: center center !important;
}

.auth-modal-overlay.show .auth-modal.auth-flip-out-right {
  animation: authFlipOutRight 260ms cubic-bezier(0.4, 0, 1, 1) both !important;
}

.auth-modal-overlay.show .auth-modal.auth-flip-in-right {
  animation: authFlipInRight 260ms var(--ix-ease-out) both !important;
}

.auth-modal-overlay.show .auth-modal.auth-flip-out-left {
  animation: authFlipOutLeft 260ms cubic-bezier(0.4, 0, 1, 1) both !important;
}

.auth-modal-overlay.show .auth-modal.auth-flip-in-left {
  animation: authFlipInLeft 260ms var(--ix-ease-out) both !important;
}

/* A closing overlay wins over a flip that is still in flight */
.auth-modal-overlay.show.is-closing .auth-modal.auth-modal.auth-modal {
  animation: authCardOut 200ms var(--ix-ease-out) both !important;
}

@keyframes authOverlayIn {
  from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}

@keyframes authOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes authCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes authCardOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}

@keyframes authFlipOutRight {
  from { opacity: 1;   transform: rotateY(0deg) scale(1); }
  to   { opacity: 0.5; transform: rotateY(90deg) scale(0.98); }
}

@keyframes authFlipInRight {
  from { opacity: 0.5; transform: rotateY(-90deg) scale(0.98); }
  to   { opacity: 1;   transform: rotateY(0deg) scale(1); }
}

@keyframes authFlipOutLeft {
  from { opacity: 1;   transform: rotateY(0deg) scale(1); }
  to   { opacity: 0.5; transform: rotateY(-90deg) scale(0.98); }
}

@keyframes authFlipInLeft {
  from { opacity: 0.5; transform: rotateY(90deg) scale(0.98); }
  to   { opacity: 1;   transform: rotateY(0deg) scale(1); }
}

/* --------------------------------------------------------------------------
   F. Reduced motion: keep the feedback, drop the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .button-submit:active,
  .btn-view-all:active,
  .shop-sale-btn:active,
  .btn-confirm:active,
  .btn-cancel:active,
  .auth-social-row .btn:active,
  .news-carousel-btn:active,
  .notif-mark-all-btn:active,
  .resend-otp-btn:active,
  .reset-method-tab:active,
  .theme-segment-btn:active,
  .category-filter:active,
  .btn-fav-add-cart:active,
  .btn-fav-view:active,
  .btn-remove-fav:active,
  .btn-create-collection:active,
  .btn-delete-collection:active,
  .profile-dropdown-link:active,
  .swatch-item:active,
  .hero-pagination-dot:active,
  .otp-digit-box:active,
  #authBtn:active,
  .user-profile:active,
  .icon-link:active,
  .mic-btn:active,
  .hamburger-btn:active,
  .close-modal-btn:active,
  .reveal-btn:active,
  .reveal-btn-forgot:active,
  .product-wishlist-btn:active,
  .btn-back-to-top:active,
  .dropdown-toggle:active,
  .logo-link:active,
  .category-tile:active,
  .product-card:active,
  .news-card:active,
  .brand-logo-card:active,
  .partner-panel:active,
  .payment-panel:active,
  .pay-logo:active {
    scale: 1;
    opacity: 0.75; /* still an acknowledgement, without motion */
  }

  .button-submit:hover,
  .auth-social-row .btn:hover,
  .theme-segment-btn:hover,
  .news-carousel-btn:hover,
  .btn-back-to-top:hover,
  .btn-confirm:hover,
  .btn-cancel:hover,
  #authBtn:hover,
  .user-profile:hover,
  .icon-link:hover,
  .mic-btn:hover,
  .hamburger-btn:hover,
  .close-modal-btn:hover,
  .reveal-btn:hover,
  .reveal-btn-forgot:hover,
  .dropdown-toggle:hover {
    translate: 0;
  }

  .auth-modal-overlay.show,
  .auth-modal-overlay.show.is-closing {
    animation-duration: 150ms;
  }

  /* Incoming cards fade in, outgoing / closing cards fade out; nothing rotates */
  .auth-modal-overlay.show .auth-modal.auth-modal,
  .auth-modal-overlay.show .auth-modal.auth-flip-in-right,
  .auth-modal-overlay.show .auth-modal.auth-flip-in-left {
    animation-name: authFadeIn !important;
    animation-duration: 150ms !important;
  }

  .auth-modal-overlay.show .auth-modal.auth-flip-out-right,
  .auth-modal-overlay.show .auth-modal.auth-flip-out-left,
  .auth-modal-overlay.show.is-closing .auth-modal.auth-modal,
  .auth-modal-overlay.show.is-closing .auth-modal.auth-modal.auth-modal {
    animation-name: authFadeOut !important;
    animation-duration: 150ms !important;
  }

  @keyframes authFadeIn {
    from { opacity: 0; transform: none; }
    to   { opacity: 1; transform: none; }
  }

  @keyframes authFadeOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: none; }
  }
}