/* Zoombask shared animation layer — vanilla CSS, no dependencies.
   Motion language: restrained white + gold (Vengeance-style LOOK only;
   no library code, no React/Tailwind/Framer/GSAP). Transform/opacity only.
   This file is loaded AFTER styles.css, so its rules win ties.
   SAFETY: the .zb-reveal hidden pre-state applies ONLY when JS has added
   class "zb-js" to <html> (see animations.js). A page missing the script
   tag therefore still shows all of its content. */

:root {
  --zb-gold: #c9a227;
  --zb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* entrances, reveals */
  --zb-ease-hover: cubic-bezier(0.4, 0, 0.2, 1);   /* hovers, taps, underlines */
  --zb-dur-hero: 0.6s;
  --zb-dur-reveal: 0.5s;
  --zb-dur-hover: 0.3s;
  --zb-dur-sheen: 0.5s;
  --zb-stagger: 0.07s;   /* 70ms between siblings, capped at 6 items */
  --zb-rise: 16px;      /* entrance travel; 12px on screens < 480px wide */
  --zb-lift: -4px;      /* card hover lift */
}

/* ---------- 1. Scroll reveal (.zb-reveal -> .zb-in) ---------- */
/* Pre-state is gated behind html.zb-js: without the script, no hiding. */
html.zb-js .zb-reveal {
  opacity: 0;
  transform: translateY(var(--zb-rise));
  transition: opacity var(--zb-dur-reveal) var(--zb-ease-out),
              transform var(--zb-dur-reveal) var(--zb-ease-out);
}
html.zb-js .zb-reveal.zb-in {
  opacity: 1;
  transform: none;
}
@media (max-width: 479px) {
  html.zb-js .zb-reveal {
    transform: translateY(12px);
  }
}

/* ---------- 2. Stagger delays for .zb-stagger direct children ----------
   DELAY ONLY — never opacity/transform. This is deliberate: several pages
   already give stagger children their own hidden state via the legacy
   `.reveal` class (hidden until app.js adds `.visible`). Adding a second
   hidden state here would double-animate / fight it. The delay below simply
   staggers whichever reveal mechanism already owns the child:
   .zb-reveal children (animations.js adds .zb-in) or legacy .reveal
   children (app.js adds .visible). The :not() guards drop the delay the
   moment the child is revealed, so hover/press transitions on that child
   are never delayed and taps are never slowed. Gated behind html.zb-js so
   a page without animations.js gets no delay at all. */
html.zb-js .zb-stagger > :nth-child(1):not(.zb-in):not(.visible) { transition-delay: 0s; }
html.zb-js .zb-stagger > :nth-child(2):not(.zb-in):not(.visible) { transition-delay: 0.07s; }
html.zb-js .zb-stagger > :nth-child(3):not(.zb-in):not(.visible) { transition-delay: 0.14s; }
html.zb-js .zb-stagger > :nth-child(4):not(.zb-in):not(.visible) { transition-delay: 0.21s; }
html.zb-js .zb-stagger > :nth-child(5):not(.zb-in):not(.visible) { transition-delay: 0.28s; }
html.zb-js .zb-stagger > :nth-child(6):not(.zb-in):not(.visible) { transition-delay: 0.35s; }
/* Children 7+ deliberately get no delay: total stagger spread caps at ~0.35s. */

/* ---------- 3. Gold underline sweep on nav links (header + footer) ---------- */
.mainnav a,
.foot-nav a {
  position: relative;
}
.mainnav a::after,
.foot-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--zb-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--zb-dur-hover) var(--zb-ease-hover);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .mainnav a:hover::after,
  .mainnav a:focus-visible::after,
  .foot-nav a:hover::after,
  .foot-nav a:focus-visible::after {
    transform: scaleX(1);
  }
  /* Retract right-to-left on leave: origin flips while the mouse is out. */
  .mainnav a:not(:hover):not(:focus-visible)::after,
  .foot-nav a:not(:hover):not(:focus-visible)::after {
    transform-origin: right center;
  }
}

/* ---------- 4. Gold primary-button sheen + press feedback ---------- */
/* Sheen: a soft WHITE band over the gold button only — no new colour.
   Scoped to .btn-primary; secondary/text buttons get no sheen. The hero
   promo's own pre-existing ::after sheen (higher-specificity selector in
   styles.css) is untouched and keeps its existing behaviour. */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-150%);
  transition: transform var(--zb-dur-sheen) var(--zb-ease-hover);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after,
  .btn-primary:focus-visible::after {
    transform: translateX(250%);
  }
}
/* Press feedback: instant scale, never on the click path, no delay.
   .wl-btn/.cmp-btn keep their own :active scale (higher specificity);
   .btn keeps its own transition + :active scale from styles.css. */
button:not(.wl-btn):not(.cmp-btn):not(.btn) {
  transition: transform 0.15s var(--zb-ease-hover);
}
button:not(.wl-btn):not(.cmp-btn):not(.btn):active,
.btn:active {
  transform: scale(0.98);
}

/* ---------- 5. Product-card entrance + hover lift ----------
   Card class names come from products.js (read-only): the card renderer
   emits `<div class="product-card p-compact" ...>`. Popup stagger classes
   (pd-bd-in, pd-sheet-in, pd-btn-in, ...) are NOT touched here; the popup
   animation stays exactly as-is.
   Entrance is CSS-only, on insertion, transform/opacity only. Fill mode is
   `backwards` (not `both`) so that once the entrance finishes it no longer
   overrides the hover lift below. NOTE: because this is CSS-only it runs
   on insertion, not on scroll-into-view; cards below the fold animate on
   load (unseen). products.js was not edited, per the task constraints. */
@keyframes zbAnim-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-card {
  animation: zbAnim-card-in var(--zb-dur-reveal) var(--zb-ease-out) backwards;
  transition: transform var(--zb-dur-hover) var(--zb-ease-hover);
}
.product-card:hover {
  animation: none;
}
/* First-viewport batch stagger, capped at 6 cards / ~0.35s spread. */
#productGrid > .product-card:nth-child(1) { animation-delay: 0s; }
#productGrid > .product-card:nth-child(2) { animation-delay: 0.07s; }
#productGrid > .product-card:nth-child(3) { animation-delay: 0.14s; }
#productGrid > .product-card:nth-child(4) { animation-delay: 0.21s; }
#productGrid > .product-card:nth-child(5) { animation-delay: 0.28s; }
#productGrid > .product-card:nth-child(6) { animation-delay: 0.35s; }

/* Hover lift: -4px, transform only. The shadow change is the ::after
   layer's opacity — box-shadow itself is never transitioned and never
   changed on hover (the hover rules below pin it to the base value, so
   the only shadow motion is the ::after fade). The ::after shadow sits
   outside the card, so overflow is opened here and the image's top
   corners re-rounded (the image wrapper already clips its own content);
   absolutely-positioned badges/buttons sit 8px inset, so nothing spills. */
.product-card {
  overflow: visible;
}
.product-card .p-img {
  border-radius: 12px 12px 0 0;
}
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 28px rgba(20, 40, 30, 0.14);
  opacity: 0;
  transition: opacity var(--zb-dur-hover) var(--zb-ease-hover);
  pointer-events: none;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover,
  .product-card:focus-visible {
    transform: translateY(var(--zb-lift));
    box-shadow: 0 1px 4px rgba(120, 90, 30, 0.07);
  }
  .product-card:hover::after,
  .product-card:focus-visible::after {
    opacity: 1;
  }
}

/* ---------- 6. prefers-reduced-motion ----------
   Scoped to THIS layer's selectors only — other layers' animations
   (including the popup stagger classes) are deliberately untouched. */
@media (prefers-reduced-motion: reduce) {
  html.zb-js .zb-reveal,
  html.zb-js .zb-reveal.zb-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.zb-js .zb-stagger > * {
    transition-delay: 0s !important;
  }
  .product-card {
    animation: none !important;
    transition: none !important;
  }
  .product-card::after {
    opacity: 0 !important;
    transition: none !important;
  }
  .mainnav a::after,
  .foot-nav a::after,
  .btn-primary::after {
    transition: none !important;
    transform: none !important;
  }
  .btn-primary::after {
    display: none !important;
  }
}