/* =========================================================================
   Close The Deal - motion and depth
   Added 2026-08-24.

   The site was structurally sound and visually inert: no hover feedback, no
   transitions, nothing that responded to the visitor. That reads as a brochure
   rather than a shop, which matters because WooCommerce is coming and people
   have to believe they can buy here.

   Everything below is progressive. If the CSS fails to load or JS is off, the
   page still renders exactly as it does now, just without the motion.
   ====================================================================== */

/* -------------------------------------------------------------------------
   0. Respect the setting first, not as an afterthought.
   Vestibular disorders are real and "prefers-reduced-motion" is the user
   telling us directly. Everything animated below is switched off here.
   ---------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* -------------------------------------------------------------------------
   1. Scroll reveal.
   Sections lift in as they enter view. Held deliberately small: 14px and
   0.5s. Big slow entrances feel impressive once and irritating by the third
   scroll.

   .ctd-reveal is added by JS only. Without JS the class never lands and
   nothing is ever hidden, so content can never be trapped invisible.
   ---------------------------------------------------------------------- */
.ctd-reveal {
  /* !important because WordPress block styles target .wp-block-group with
     higher specificity than this single class and were silently winning.
     Confirmed by probe: the rule applied to a bare div and not to a section.
     The reduced-motion block at the END of this file overrides it back. */
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1),
              transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.ctd-reveal.is-in { opacity: 1 !important; transform: none !important; }

/* Stagger children so a row of cards arrives in sequence, not as a slab. */
.ctd-reveal-stagger > * { transition-delay: 0ms; }
.ctd-reveal-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.ctd-reveal-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.ctd-reveal-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.ctd-reveal-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }

/* -------------------------------------------------------------------------
   2. Product images.
   These now link to the stores page, so they have to LOOK clickable. Lift,
   a slight zoom on the image itself, and a warm ring. This is the single
   biggest signal that the site is a shop and not a leaflet.
   ---------------------------------------------------------------------- */
.wp-block-gallery figure.wp-block-image {
  overflow: hidden;
  border-radius: 14px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease;
}
.wp-block-gallery figure.wp-block-image img {
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  display: block;
}
.wp-block-gallery figure.wp-block-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20,20,20,.18);
}
.wp-block-gallery figure.wp-block-image:hover img { transform: scale(1.06); }

/* Keyboard users get the same affordance, and a visible focus ring. */
.wp-block-gallery figure.wp-block-image a:focus-visible {
  outline: 3px solid #B84A26;
  outline-offset: 3px;
  border-radius: 14px;
}

/* -------------------------------------------------------------------------
   3. Cards lift on hover.
   Any block that already carries a shadow is treated as a card.
   ---------------------------------------------------------------------- */
.wp-block-column[style*="box-shadow"],
.wp-block-group[style*="box-shadow"] {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.wp-block-column[style*="box-shadow"]:hover,
.wp-block-group[style*="box-shadow"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,20,20,.05), 0 18px 40px rgba(20,20,20,.12) !important;
}

/* -------------------------------------------------------------------------
   4. Buttons.
   A button that does not move when you touch it feels dead.
   ---------------------------------------------------------------------- */
.wp-block-button__link {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(184,74,38,.30);
}
.wp-block-button__link:active { transform: translateY(0); }

/* -------------------------------------------------------------------------
   5. Navigation.
   An underline that grows from the left, rather than a colour flick.
   ---------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  transition: color .2s ease;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: #B84A26;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* -------------------------------------------------------------------------
   6. The stores list on /links/.
   Slide the row and animate its arrow, so it reads as a real destination.
   ---------------------------------------------------------------------- */
.ctd-links .ctd-lnk { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
.ctd-links .ctd-lnk:hover { transform: translateX(4px); box-shadow: 0 10px 26px rgba(0,0,0,.20); }
.ctd-links .ctd-lnk__go { transition: transform .25s ease; }
.ctd-links .ctd-lnk:hover .ctd-lnk__go { transform: translateX(5px); }
.ctd-links .ctd-lnk__logo img { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.ctd-links .ctd-lnk:hover .ctd-lnk__logo img { transform: scale(1.08); }

/* -------------------------------------------------------------------------
   7. Links inside body copy get a growing underline rather than a static one.
   ---------------------------------------------------------------------- */
.wp-block-post-content a:not(.wp-block-button__link),
main a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}


/* =========================================================================
   LAST ON PURPOSE. Equal specificity plus !important means whichever rule
   comes last wins, so the accessibility guard must sit at the end of the
   file to override the forced reveal rules above.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ctd-reveal { opacity: 1 !important; transform: none !important; }
}