/* =========================================================================
   GETU Shopping - homepage component CSS
   -------------------------------------------------------------------------
   Ported verbatim from the reference's index.html inline <style> block
   (product tiles, category tiles, marquee, scroll-reveal). Loaded after
   getu-chrome.css, which already aliases the reference's --shadow-float /
   --shadow-raised / --ease-out / --ease-spring custom-property names onto
   #brx-header and .getu-vanilla-scope - the homepage <body> carries the
   latter class (see getu-chrome.php's body_class filter), so this file
   does not redeclare those aliases.

   .wish (wishlist heart) rules are intentionally omitted: the heart is not
   part of the ported homepage markup, so those rules would be dead CSS.

   Ports to production unchanged: no URLs, no ids, no environment
   assumptions.
   ========================================================================= */

/* Product card refinements */
.pcard .quick-add { transition: transform .35s var(--ease-spring), background-color .25s; }

/* Promo merchandising card */
.promo { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.promo:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.promo img { transition: transform .6s var(--ease-out); }
.promo:hover img { transform: scale(1.06); }

/* Category tile */
.tile { position: relative; overflow: hidden; border-radius: 1.25rem; box-shadow: var(--shadow-raised);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.tile img { transition: transform .7s var(--ease-out); }
.tile:hover img { transform: scale(1.07); }
.tile-overlay { background: linear-gradient(to top, rgba(20,6,10,.88) 0%, rgba(20,6,10,.35) 45%, rgba(20,6,10,.05) 100%); }

/* Spotlight tile: for product-on-white shots — wine stage + radial glow, image contained */
.tile-spotlight { background:
    radial-gradient(70% 55% at 50% 38%, rgba(200,164,93,.18) 0%, rgba(42,14,20,0) 60%),
    linear-gradient(160deg, #3A0F18 0%, #2A0E14 60%, #1E0A0F 100%); }
.tile-spotlight img { mix-blend-mode: normal; filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); }
.tile-spotlight .tile-overlay { background: linear-gradient(to top, rgba(20,6,10,.92) 0%, rgba(20,6,10,.25) 40%, rgba(20,6,10,0) 70%); }

/* Product card */
.pcard { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.pcard .pcard-cta { transition: transform .4s var(--ease-spring), opacity .3s ease, background-color .25s; }


.rule-gold { display: inline-flex; align-items: center; gap: .75rem; }
.rule-gold::before, .rule-gold::after { content: ""; height: 1px; width: 2.5rem; background: linear-gradient(to right, transparent, var(--gold), transparent); }

/* Marquee for brand strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Scroll / load reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  * { scroll-behavior: auto; }
}
