/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =============================================================================
   BLUE MOON — HORIZON EFFECTS PORT  (v1.0)
   Paste this at the BOTTOM of your child theme's style.css
   (Appearance → Theme File Editor → woodmart-child → style.css)

   Ported 1:1 from the Shopify Horizon theme's assets/base.css:
     • equal-height product cards
     • animated holographic border on card hover  (product-holo-shift)
     • animated holographic border on the inner image
     • sheen sweep across card + image
     • image zoom on hover
     • holographic stroke on Add to Cart
     • prism gradient on header links (Horizon's header-gradient-shift)
     • scroll-reveal fade-up  (needs the functions.php JS)
     • cross-page View Transitions + product-image morph

   PERFORMANCE NOTE: Horizon leaves the gradient animation running on every
   card at all times (invisible, but still compositing). This version pauses
   it and only runs it while a card is actually hovered — same look, far less
   work on a 30-product shop page.
============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS  — change colours / speed / radius here, nothing else
----------------------------------------------------------------------------- */
:root {
  --bmh-holo-1: #0066ff;
  --bmh-holo-2: #ffd700;
  --bmh-holo-3: #00cc66;
  --bmh-holo-4: #0066ff;

  --bmh-card-radius: 18px;
  --bmh-image-radius: 18px;
  --bmh-card-border-width: 2px;
  --bmh-image-border-width: 2px;
  --bmh-image-spacing: 10px;
  --bmh-image-scale: 1.03;
  --bmh-holo-speed: 3s;

  --bmh-title-lines: 3;

  /* header prism (Horizon --header-prism-*) */
  --bmh-prism-1: rgb(98 153 249);
  --bmh-prism-2: #3573df;
  --bmh-prism-3: #10b981;
  --bmh-prism-4: rgb(78 58 230);
}

@keyframes bmh-holo-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* -----------------------------------------------------------------------------
   7. HEADER PRISM  (Horizon's header-gradient-shift)
----------------------------------------------------------------------------- */
.whb-header .wd-nav > li > a,
.whb-header .wd-header-nav a,
.whb-header .wd-tools-element > a {
  transition: color 0.25s ease, filter 0.25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .whb-header .wd-nav > li > a:hover,
  .whb-header .wd-nav > li.current-menu-item > a,
  .whb-header .wd-header-nav a:hover {
    background-image: linear-gradient(
      120deg,
      var(--bmh-prism-1),
      var(--bmh-prism-2),
      var(--bmh-prism-3),
      var(--bmh-prism-4),
      var(--bmh-prism-1)
    );
    background-size: 250% 100%;
    background-position: 0 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: bmh-holo-shift 4.2s linear infinite;
    filter: drop-shadow(0 0 8px rgb(125 249 255 / 0.28));
  }

  .whb-header .wd-tools-element > a:hover .wd-tools-icon,
  .whb-header .wd-tools-element > a:focus-visible .wd-tools-icon {
    color: var(--bmh-prism-1);
    animation: bmh-icon-cycle 2.2s linear infinite;
    filter:
      drop-shadow(0 0 4px rgb(0 213 255 / 0.45))
      drop-shadow(0 0 10px rgb(103 69 254 / 0.35));
  }
}

@keyframes bmh-icon-cycle {
  0%   { color: var(--bmh-prism-1); }
  25%  { color: var(--bmh-prism-2); }
  50%  { color: var(--bmh-prism-3); }
  75%  { color: var(--bmh-prism-4); }
  100% { color: var(--bmh-prism-1); }
}

/* -----------------------------------------------------------------------------
   8. SCROLL REVEAL  (paired with the JS in functions.php)
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .bmh-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  .bmh-reveal.bmh-reveal-ready {
    opacity: 0;
    transform: translateY(24px);
  }

  .bmh-reveal.bmh-reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------------------
   9. PAGE TRANSITIONS  (cross-document View Transitions)
   Chrome / Edge / Opera and Safari 18.2+. Firefox simply ignores all of this
   and navigates normally — nothing breaks.
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* The header stays put while the content cross-fades */
  .whb-header {
    view-transition-name: bmh-header;
  }

  #main-content {
    view-transition-name: bmh-main;
  }

  ::view-transition {
    pointer-events: none;
  }

  ::view-transition-old(bmh-main) {
    animation: bmh-vt-out 0.2s ease both;
  }

  ::view-transition-new(bmh-main) {
    animation: bmh-vt-in 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  /* --- the morph: card image → product page hero image --- */

  /* Destination. KEEP THIS SELECTOR IN SYNC with BMH_HERO in functions.php */
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-of-type img {
    view-transition-name: bmh-product-media;
  }

  /* Source: the JS tags the image inside the card you clicked */
  .bmh-vt-media {
    view-transition-name: bmh-product-media;
  }

  /* Release the hero's name when leaving a product page for another product,
     otherwise two elements claim the same name and the browser bails out */
  .bmh-vt-off {
    view-transition-name: none !important;
  }

  ::view-transition-group(bmh-product-media) {
    z-index: 5;
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  ::view-transition-old(bmh-product-media),
  ::view-transition-new(bmh-product-media) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
  }
}

@keyframes bmh-vt-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}

@keyframes bmh-vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* BMH fix 2026-08-05: naming .whb-header for view transitions makes it a
   stacking context, which trapped WoodMart's mega-dropdowns (z380) behind
   #main-content. Rank the whole header above the content. CSS-only, safe. */
.whb-header {
  position: relative;
  z-index: 391;
}