/* =========================================================
   NEAR UP — GLOBAL ANIMATIONS (presentation only)

   Everything here animates only `opacity` and `transform`, so it
   never causes layout shift. All motion is disabled for users who
   set "reduce motion" (see the block at the bottom of this file).

   Speed: change the duration tokens below; every animation in this
   file reads from them.
========================================================= */

:root {
  --nu-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nu-dur-fast: 150ms;   /* button presses, small feedback */
  --nu-dur-base: 250ms;   /* hovers */
  --nu-dur-enter: 450ms;  /* product / section entrances */
  --nu-stagger: 50ms;     /* delay between neighbouring products */
}

@keyframes nu-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes nu-fade-in-scale {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes nu-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  65%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes nu-icon-shake {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  50%      { transform: rotate(10deg); }
  75%      { transform: rotate(-6deg); }
}

/* ---------------------------------------------------------
   1. HERO ENTRANCE
   Plays once when the homepage banner mounts.
--------------------------------------------------------- */
.Home-Banner {
  animation: nu-fade-in-scale 600ms var(--nu-ease-out) backwards;
}

/* ---------------------------------------------------------
   2. SECTION SCROLL-REVEAL
   Apply by wrapping a section in <Reveal> (Common-Component/Reveal).
   The component adds `.is-visible` once the section scrolls into view.
--------------------------------------------------------- */
.nu-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--nu-dur-enter) var(--nu-ease-out),
    transform var(--nu-dur-enter) var(--nu-ease-out);
}

.nu-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   2b. SITE-WIDE SECTION REVEAL (automatic)
   AutoReveal (mounted in layout.tsx) adds these classes to page
   sections that start below the fold, then removes them once the
   fade has finished. Opt out with data-no-reveal, opt in a non-section
   block with data-reveal.
--------------------------------------------------------- */
.nu-auto-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--nu-dur-enter) var(--nu-ease-out),
    transform var(--nu-dur-enter) var(--nu-ease-out);
}

.nu-auto-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   3. PRODUCTS LOADING / FILTERING
   The shop grid re-mounts cards after every load or filter change,
   so a mount animation plays each time. The first 8 items are
   staggered; everything after that enters together.
--------------------------------------------------------- */
.custom_col > .Product_Card,
.Product_Info_List_View,
.Product_Card {
  animation: nu-fade-up var(--nu-dur-enter) var(--nu-ease-out) backwards;
}

.custom_col:nth-child(2) > .Product_Card,
.Product_Info_List_View:nth-child(2) { animation-delay: calc(var(--nu-stagger) * 1); }
.custom_col:nth-child(3) > .Product_Card,
.Product_Info_List_View:nth-child(3) { animation-delay: calc(var(--nu-stagger) * 2); }
.custom_col:nth-child(4) > .Product_Card,
.Product_Info_List_View:nth-child(4) { animation-delay: calc(var(--nu-stagger) * 3); }
.custom_col:nth-child(5) > .Product_Card,
.Product_Info_List_View:nth-child(5) { animation-delay: calc(var(--nu-stagger) * 4); }
.custom_col:nth-child(6) > .Product_Card,
.Product_Info_List_View:nth-child(6) { animation-delay: calc(var(--nu-stagger) * 5); }
.custom_col:nth-child(7) > .Product_Card,
.Product_Info_List_View:nth-child(7) { animation-delay: calc(var(--nu-stagger) * 6); }
.custom_col:nth-child(n + 8) > .Product_Card,
.Product_Info_List_View:nth-child(n + 8) { animation-delay: calc(var(--nu-stagger) * 7); }

/* ---------------------------------------------------------
   4. PRODUCT CARD HOVER
   Hover-capable devices only, so touch screens never get a
   "stuck" hover state after a tap.
--------------------------------------------------------- */
@media (hover: hover) {
  .Product_Info_Card_2,
  .Product_Info_List_View .wishlist_cart_holder {
    transition:
      transform var(--nu-dur-base) var(--nu-ease-out),
      box-shadow var(--nu-dur-base) var(--nu-ease-out);
  }

  .Product_Info_Card_2:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(16, 35, 63, 0.1);
  }

  .Product_Info_Card_2 .card_img_holder img {
    transition: transform 400ms var(--nu-ease-out);
  }

  .Product_Info_Card_2:hover .card_img_holder img {
    transform: scale(1.05);
  }
}

/* ---------------------------------------------------------
   5. ADD-TO-CART / BUTTON FEEDBACK
   A quick press-down on click, plus a cart icon wiggle on hover.
--------------------------------------------------------- */
.Blue_Btn,
.Store_Product_Card .shop_btn,
.HeritageCard_wrapper .explore_btn {
  transition: transform var(--nu-dur-fast) ease-out;
}

.Blue_Btn:active,
.Store_Product_Card .shop_btn:active,
.HeritageCard_wrapper .explore_btn:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .Blue_Btn:hover .left_icon,
  .Product_Card .pc_add_btn:hover .pc_add_icon {
    animation: nu-icon-shake 500ms ease-in-out;
  }
}

/* ---------------------------------------------------------
   6. CART COUNT BADGE
   The header adds `.nu-bump` for a moment whenever the cart count
   changes (see useBumpOnChange). Change the 450ms here and BUMP_MS
   in useBumpOnChange.js together.
--------------------------------------------------------- */
.nu-bump {
  animation: nu-badge-bump 450ms var(--nu-ease-out);
}

/* ---------------------------------------------------------
   REDUCED MOTION — turns off everything above.
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .Home-Banner,
  .custom_col > .Product_Card,
  .Product_Info_List_View,
  .Product_Card,
  .nu-bump,
  .Blue_Btn .left_icon,
  .Product_Card .pc_add_icon {
    animation: none !important;
  }

  .nu-reveal,
  .nu-auto-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .Product_Info_Card_2:hover,
  .Product_Info_Card_2:hover .card_img_holder img,
  .Blue_Btn:active {
    transform: none;
  }
}