/* ═══════════════════════════════════════════════════════════════════════
   dc-motion.css, 5 Oct 2026. The shared motion layer for the editorial
   pages (wholesale, faq, journal). Paired with /js/dc-motion.js.

   PROGRESSIVE: nothing is hidden unless <html> carries .dcm, which the
   script only adds when it runs AND the reader has not asked for reduced
   motion. A blocked script leaves every word and photo visible.

   Every class here is dcm- prefixed (see the page CSS collision note in
   LOAD-DaisyCo.md). No pills, no cards, no gradient blobs: he reads those
   as generated.
   ═══════════════════════════════════════════════════════════════════════ */

/* headline words rise out of a mask */
/* the mask needs room round each word or tight serif headlines lose the tails of
   y, g, p and the swash of italics; padding grows the mask, the matching negative
   margin keeps the layout exactly where it was */
.dcm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .1em .3em;margin:-.14em -.1em -.3em}
.dcm-w > span{display:inline-block}
.dcm .dcm-split .dcm-w > span{transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.dcm .dcm-split.dcm-in .dcm-w > span{transform:none}

/* plain fade and lift */
.dcm [data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.dcm [data-rv].dcm-in{opacity:1;transform:none}

/* photos open like a shutter, then settle from a slight zoom */
.dcm-clip{overflow:hidden;position:relative}
.dcm-clip img{display:block;width:100%;height:100%;object-fit:cover}
/* the clip sits on the IMAGE, never the frame: a frame clipped to nothing has no
   visible area, so IntersectionObserver never reports it and it never opens */
.dcm .dcm-clip img{clip-path:inset(100% 0 0 0);transform:scale(1.14);
  transition:clip-path 1.3s cubic-bezier(.77,0,.18,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
.dcm .dcm-clip.dcm-in img{clip-path:inset(0 0 0 0);transform:scale(1.0001)}
/* parallax rides on the wrapper's custom property so it never fights the zoom */
[data-parallax] img{translate:0 var(--dcm-py,0px)}
/* overscan: the image is taller than its frame by the drift distance top and bottom,
   or the drift slides it off the edge and a strip of background shows */
.dcm [data-parallax] img{height:calc(100% + 2 * var(--dcm-pa,40px));margin-top:calc(-1 * var(--dcm-pa,40px))}

/* a hairline that draws itself across */
.dcm-rule{height:1px;background:currentColor;opacity:.18;transform-origin:left center}
.dcm .dcm-rule{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.77,0,.18,1)}
.dcm .dcm-rule.dcm-in{transform:none}

/* the colourway ticker */
.dcm-marquee{overflow:hidden;white-space:nowrap;user-select:none}
.dcm-marquee-track{display:inline-flex;animation:dcmMarq 46s linear infinite}
.dcm-marquee:hover .dcm-marquee-track{animation-play-state:paused}
@keyframes dcmMarq{to{transform:translateX(-50%)}}

/* the primary button: square ink block, arrow that slides on hover */
.dcm-btn{display:inline-flex;align-items:center;gap:.9rem;background:#2A2724;color:#FBF7F5!important;
  text-decoration:none!important;padding:1.05rem 1.6rem 1.05rem 1.7rem;border-radius:0;
  font:500 .9rem/1 Inter,system-ui,sans-serif;letter-spacing:.02em;min-height:48px;
  transition:background .3s ease;will-change:transform}
.dcm-btn:hover{background:#4A3F44}
.dcm-btn .dcm-arr{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;
  transition:width .35s cubic-bezier(.16,1,.3,1)}
.dcm-btn .dcm-arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.dcm-btn:hover .dcm-arr{width:30px}
/* the quiet one: words with a line under them that wipes on hover */
.dcm-link{display:inline-flex;align-items:center;gap:.6rem;color:#2A2724!important;text-decoration:none!important;
  font:500 .9rem/1.2 Inter,system-ui,sans-serif;padding:.4rem 0;position:relative;min-height:44px}
.dcm-link::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:currentColor;
  transform-origin:right;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.dcm-link:hover::after{transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  .dcm-marquee-track{animation:none}
  [data-parallax] img{translate:none}
}

/* base.css sets overflow-x:hidden on BOTH html and body, which turns body into a
   scroll container that never scrolls, and position:sticky then never sticks.
   clip hides the sideways spill the same way without creating a scroller. Only
   the pages that load this file get it; the shop pages are untouched. */
@supports (overflow:clip){ html,body{overflow-x:clip} }