/* ==========================================================================
   Mouldshop Parallax Image (TASK-0126) - Paragraph/Mouldshop_ParallaxImage/Default.cshtml
   Motion: mouldshop-parallax.js. Registered in MouldshopHead.cshtml.

   FULL BLEED FROM INSIDE THE CONTAINER. The section divider (TASK-0062) is full-bleed by
   STRUCTURE: the row template emits it outside [data-swift-container]. A paragraph cannot do
   that - it renders inside a column inside the container - so it breaks out:
       width: 100vw; margin-inline: calc(50% - 50vw)
   100vw INCLUDES the scrollbar (mouldshop-news-banner.css records the 7.5px-per-side
   overhang that produced), so the page's <main> clips horizontal overflow, ONLY on a page
   that carries a parallax (:has). overflow-x: clip, not hidden: clip makes no scroll
   container, so sticky elements inside <main> keep working and no scrollbar can appear.
   The breakout centres on the COLUMN, so it is exact in a 1-column row at any container
   width; the item type's description says to place it in one.

   MOTION RANGE, ONE SOURCE. --ms-parallax-k (move, a fraction of the frame height) and
   --ms-parallax-z (zoom, added to scale 1) are set here per Strength; the script READS them
   from the computed style, so the oversize below and the motion can never disagree.
   Slower / Reverse (operator 2026-09-25: "scroll is weak", "should start on top of the image"):
   the image is k taller than the frame and travels the WHOLE k over the scroll - Slower from its
   bottom edge up to its top edge (the image lags the page), Reverse from its TOP edge down to its
   bottom edge (the image runs ahead of the page). The layer sits k above the frame; translateY
   0..k*H moves it down. Superseded wording kept below for the record:
   was - the image is oversized by exactly k of the frame (k/2 above, k/2 below)
   and moves at most k/2 either way, so no edge ever shows. Zoom never goes below scale 1.
   Fixed: the image is a viewport-tall layer the script holds at the viewport top; the frame
   clips it. Not background-attachment: fixed, which iOS ignores.

   STILL = the same crop. The script adds .is-live only on a fine pointer with no reduced-motion
   request; without it (phones, tablets, reduced motion, no JS) nothing moves and Slower / Reverse
   hold the centre of their travel (a fixed CSS transform, below).

   COLOUR (DEC-0063 / DEC-0071): Text colour "Row" emits no class - the text inherits the row.
   Light / Dark override it. The button beats the scheme's link rule (DEC-0071 point 2).
   ========================================================================== */

main:has(.ms-parallax) { overflow-x: clip; }

.ms-parallax {
  --ms-parallax-k: .5;
  --ms-parallax-z: .2;
  --ms-parallax-vh: 60;
  --ms-parallax-min: 360px;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: max(var(--ms-parallax-min), calc(var(--ms-parallax-vh) * 1vh));
  height: max(var(--ms-parallax-min), calc(var(--ms-parallax-vh) * 1svh));
}

/* Height */
.ms-parallax--h-small  { --ms-parallax-vh: 40;  --ms-parallax-min: 280px; }
.ms-parallax--h-medium { --ms-parallax-vh: 60;  --ms-parallax-min: 360px; }
.ms-parallax--h-large  { --ms-parallax-vh: 80;  --ms-parallax-min: 440px; }
.ms-parallax--h-full   { --ms-parallax-vh: 100; --ms-parallax-min: 520px; }

/* Strength */
/* Operator 2026-09-25, "weak - almost not noticeable, even at Strong": was .1/.2/.3 (move) and
   .08/.15/.25 (zoom). Now the move is the full travel, not half of it, and larger. */
.ms-parallax--str-subtle { --ms-parallax-k: .25; --ms-parallax-z: .1;  }
.ms-parallax--str-medium { --ms-parallax-k: .5;  --ms-parallax-z: .2;  }
.ms-parallax--str-strong { --ms-parallax-k: .8;  --ms-parallax-z: .35; }

/* The image layer */
.ms-parallax__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ms-parallax--fx-slow .ms-parallax__media,
.ms-parallax--fx-reverse .ms-parallax__media {
  inset-block: calc(var(--ms-parallax-k) * -100%) 0;
  /* Still (no motion / no JS): the middle of the travel. The percentage is of the LAYER, which is
     (1 + k) frames tall, so k/2 of the frame is k / (1 + k) * 50% of the layer. */
  transform: translateY(calc(var(--ms-parallax-k) / (1 + var(--ms-parallax-k)) * 50%));
}
.ms-parallax.is-live.ms-parallax--fx-fixed .ms-parallax__media {
  inset: 0 0 auto 0;
  height: max(100vh, 100%);
}
.ms-parallax.is-live .ms-parallax__media {
  will-change: transform;
}

.ms-parallax__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* Scrim - strength arrives as --ms-parallax-scrim (0 - .8) from the template */
.ms-parallax__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ms-parallax__scrim--dark  { background: rgb(0 0 0 / var(--ms-parallax-scrim, .4)); }
.ms-parallax__scrim--light { background: rgb(255 255 255 / var(--ms-parallax-scrim, .4)); }
.ms-parallax__scrim--gradient {
  background: linear-gradient(to top,
    rgb(0 0 0 / var(--ms-parallax-scrim, .4)) 0%,
    rgb(0 0 0 / calc(var(--ms-parallax-scrim, .4) * .5)) 45%,
    rgb(0 0 0 / 0) 80%);
}

/* The text layer - inside the site container */
.ms-parallax__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(1.5rem, 5vw, 4rem);
}
.ms-parallax__content--y-top    { align-items: flex-start; }
.ms-parallax__content--y-middle { align-items: center; }

.ms-parallax__inner {
  width: 100%;
  max-width: var(--ms-page-width, calc(100% - 2rem));
  margin-inline: auto;
  display: flex;
  justify-content: flex-start;
}
.ms-parallax__content--x-center .ms-parallax__inner { justify-content: center; }
.ms-parallax__content--x-right  .ms-parallax__inner { justify-content: flex-end; }

.ms-parallax__text {
  max-width: min(40rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  text-align: start;
}
.ms-parallax__content--x-center .ms-parallax__text { align-items: center; text-align: center; }
.ms-parallax__content--x-right  .ms-parallax__text { align-items: flex-end; text-align: end; }

.ms-parallax__title {
  margin: 0;
  font-family: var(--ms-font-head, inherit);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 300;
  color: inherit;
}
.ms-parallax__title strong { font-weight: 700; }

.ms-parallax__body {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
}

/* Text colour picks - beat the scheme on the text and on the heading */
.ms-parallax__content--tone-light,
[data-dw-colorscheme] .ms-parallax .ms-parallax__content--tone-light .ms-parallax__title.ms-parallax__title {
  color: var(--ms-white, #FFFFFF);
}
.ms-parallax__content--tone-dark,
[data-dw-colorscheme] .ms-parallax .ms-parallax__content--tone-dark .ms-parallax__title.ms-parallax__title {
  color: var(--ms-ink, #0e1a33);
}

/* The button: .ms-btn .ms-btn--primary (mouldshop-buybox.css). Inside a schemed row vendor's
     [data-dw-colorscheme]:not([data-dw-colorscheme=""]) a:not(.btn):not(.page-link):not(.dropdown-item)
   is 0,5,1 and would repaint its white label in the scheme foreground. This is 0,6,1 with the
   same :not() chain (the mouldshop-category-nav.css pattern). */
[data-dw-colorscheme] .ms-parallax a.ms-parallax__btn:not(.btn):not(.page-link):not(.dropdown-item),
[data-dw-colorscheme] .ms-parallax a.ms-parallax__btn:not(.btn):not(.page-link):not(.dropdown-item):hover {
  color: var(--ms-white, #FFFFFF);
  text-decoration: none;
}

/* Reduced motion: whatever the script does, the layer holds its still frame. */
@media (prefers-reduced-motion: reduce) {
  .ms-parallax__media { transform: none !important; }
  .ms-parallax--fx-slow .ms-parallax__media,
  .ms-parallax--fx-reverse .ms-parallax__media {
    transform: translateY(calc(var(--ms-parallax-k) / (1 + var(--ms-parallax-k)) * 50%)) !important;
  }
}