/* ============================================================
   MERIDIAN — MOTION LAYER FOR THE TEMPLATED PRODUCT PAGES
   Loaded after scrollcraft.css and miles-light.css; order matters,
   several rules here win on source order.

   Nothing in this file hides content. The reveal states come from
   scrollcraft.css and only apply to elements that meridian-motion.js
   has marked, so a page where that script never runs is simply the
   static page it was before.

   Reduced motion: miles-light.css already collapses every transition
   and animation to .01ms, and the engine drops translation and never
   starts the pointer devices. Nothing extra is needed here.
   ============================================================ */

/* ---- reveal groups -------------------------------------------------
   A marked container stays put and lets its children carry the stagger.
   Without this the container fades as one block while its children fade
   inside it, and the two read as a flicker. */
[data-sc-in][data-sc-stagger] { opacity: 1; transform: none; }

@media print {
  [data-sc-in], [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---- gold CTA ------------------------------------------------------
   Lift, a deeper shadow, and one pass of light across the fill. The
   sheen sits at z-index -1 inside the button's own stacking context, so
   it paints over the gold and under the label: the navy text keeps its
   9.80:1 the whole way through. */
.m-btn-gold {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out), filter 220ms;
}
.m-btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.6) 50%, transparent 64%);
  transform: translateX(-130%);
}
.m-btn-ghost {
  transition: transform 220ms var(--sc-ease-out), border-color 220ms, background-color 220ms;
}
.m-btn-gold:active { transform: translateY(0) scale(.98); }
.m-btn-ghost:active { transform: scale(.98); }

@media (hover: hover) {
  .m-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -14px rgba(199,149,69,.9);
  }
  .m-btn-gold:hover::after { transform: translateX(130%); transition: transform 720ms var(--sc-ease-out); }
  .m-btn-ghost:hover { background-color: var(--m-gold-wash); transform: translateY(-1px); }
  .m-btn-gold:hover:active { transform: translateY(0) scale(.98); }
}

/* ---- cards ---------------------------------------------------------
   These are not links, so they do not lift: a card that rises under the
   pointer promises a click it cannot deliver. A gold rule draws across
   the top edge and the shadow deepens instead.

   The transition list repeats opacity and transform on purpose. These
   cards are stagger children, and a shorter list here would replace the
   engine's reveal transition rather than add to it. */
.cols > .card:not([style*="border-left"]) {
  position: relative; overflow: hidden;
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out),
              box-shadow 260ms var(--sc-ease-out), border-color 260ms;
}
.cols > .card:not([style*="border-left"])::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--m-gold-edge);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 420ms var(--sc-ease-out);
}
@media (hover: hover) {
  .cols > .card:not([style*="border-left"]):hover { box-shadow: var(--m-shadow-lg); border-color: var(--m-rule-2); }
  .cols > .card:not([style*="border-left"]):hover::before { transform: scaleX(1); }
}

/* ---- what's inside -------------------------------------------------
   The row under the pointer takes the gold wash, as a reading aid in a
   list that runs to a dozen lines. */
.journey li {
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out),
              background-color 220ms;
}
@media (hover: hover) {
  .journey li:hover { background-color: var(--m-gold-wash); }
}

/* ---- offer ---------------------------------------------------------
   The price box carries the engine's pointer spotlight. The light is an
   absolutely positioned layer, so the box has to clip it to its radius. */
.pricebox { overflow: hidden; }