/* ==========================================================================
   WMD Hero Watch Slider (2026-10-01) — the home hero, in place of the video.
   Standalone demo: /product-demo/watch-slider.html.

   Layers, back to front: backgrounds -> floating pieces -> watches -> copy,
   arrows, thumbnail hit-areas. The art is Carlos's 2000x1000 layered comp:
   .wmdws-canvas IS that canvas (always 2:1) and every watch / piece sits on it
   in canvas percentages, so the layers register exactly like the comp.

   Living inside Elementor + the theme: everything is scoped to .wmdws, images
   carry !important on their box (`.elementor img{height:auto;max-width:100%}`
   is 0-1-1 and beats a single class), and buttons / links / paragraphs are
   reset with two-class selectors (0-2-0) so the kit's `button` / `a` / `p`
   styles cannot reach them.
   ========================================================================== */

@property --wmdws-fade{syntax:'<percentage>';inherits:true;initial-value:100%}

.wmdws{
  --wmdws-ease:cubic-bezier(.65,0,.35,1);
  --wmdws-out:cubic-bezier(.22,1,.36,1);
  position:relative;
  /* The Elementor container around the hero (ab3fc1b) bleeds 20px past the
     viewport on each side (margin-left:-20px, width +40). The accordion never
     cared; the slider places its copy and arrows from its own edges, so on a
     phone they ended up 20px off-screen. Take the bleed back so the section is
     exactly the viewport wide (max() keeps a narrower parent untouched). */
  width:auto;
  margin-left:max(0px, calc((100% - 100vw) / 2));
  margin-right:max(0px, calc((100% - 100vw) / 2));
  /* Fill the screen from where the hero starts down to the fold. The hero
     starts BELOW the 40px black topbar (hero.css pulls it up under the nav row
     only), so --wmdws-pull is -40px with the global header; see the rule at the
     end. Static on purpose: correct on the first paint, no JS. */
  height:calc(100vh + var(--wmdws-pull, 0px));
  height:calc(100svh + var(--wmdws-pull, 0px));
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
  container-type:size;
  background:#15171a;
  color:#fff;
  font-family:'Poppins',sans-serif;          /* loaded site-wide */
  text-align:left;
  touch-action:pan-y;
}
.wmdws,.wmdws *,.wmdws *::before,.wmdws *::after{box-sizing:border-box}
body.wmd-hero-acc-on.wmdh-on .wmdws{--wmdws-pull:-40px}

/* ---- backgrounds: the new one fades in OVER the old (no dark dip) ---- */
.wmdws .wmdws-bgs{position:absolute;inset:0;z-index:0}
.wmdws .wmdws-bg{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  margin:0;border:0;border-radius:0;
  object-fit:cover;object-position:50% 100%;
  opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1);
}
.wmdws .wmdws-bg.is-active{opacity:1;z-index:2}
.wmdws .wmdws-bg.is-prev{opacity:1;z-index:1;transition:none}
/* top scrim: the transparent site header floats over the hero, and the art is
   brightest right where the wordmark sits (the light beam) */
.wmdws .wmdws-bgs::before{
  content:"";position:absolute;left:0;right:0;top:0;height:210px;z-index:3;
  background:linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0));
  pointer-events:none;
}
/* scrim behind the copy */
.wmdws .wmdws-bgs::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg, rgba(8,10,12,.28), rgba(8,10,12,0) 42%);
  pointer-events:none;
}

/* ---- the 2:1 art canvas: contained in the section, anchored at the bottom.
   Taller than 2:1 (most screens) leaves background above it, which is where
   the header floats; wider leaves background at the sides. ---- */
.wmdws .wmdws-canvas{
  position:absolute;z-index:1;bottom:0;left:50%;
  width:min(100cqw, 200cqh);height:min(50cqw, 100cqh);
  transform:translateX(-50%);
}
.wmdws .wmdws-els,.wmdws .wmdws-elgroup{position:absolute;inset:0}
.wmdws .wmdws-els{z-index:1;pointer-events:none}
.wmdws .wmdws-elgroup[hidden]{display:none}
.wmdws .wmdws-el{position:absolute;display:block;will-change:transform}
.wmdws .wmdws-el img{
  display:block;margin:0;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  animation:wmdws-float var(--fd,6s) ease-in-out var(--fdl,0s) infinite alternate;
}
@keyframes wmdws-float{
  from{translate:0 -.9cqh;rotate:-4deg}
  to{translate:0 .9cqh;rotate:4deg}
}

/* ---- watches: slider.js moves them between the main spot and the
   thumbnail slots (inline transform / opacity / --wmdws-fade) ---- */
.wmdws .wmdws-watch{
  position:absolute;z-index:2;display:block;
  transform-origin:0 0;will-change:transform,opacity;
  pointer-events:none;text-decoration:none;border:0;
}
.wmdws .wmdws-watch:not(.is-main){opacity:0}  /* no-JS state; JS writes inline */
.wmdws .wmdws-watch.is-main{z-index:3;pointer-events:auto}
.wmdws .wmdws-watch img{
  display:block;margin:0;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  /* thumbnails fade out at the bottom (the cutouts end flat at the canvas edge) */
  -webkit-mask-image:linear-gradient(#000 var(--wmdws-fade), transparent);
          mask-image:linear-gradient(#000 var(--wmdws-fade), transparent);
  /* hover = a slight grow anchored at the BOTTOM edge. It used to be a lift
     (translate -1.2%), but the cutouts end flat at the canvas edge, so lifting
     opened a gap under the bracelet: 8px at 1920, 11px at 2560 (Carlos,
     2026-10-01). Scaling from the bottom keeps that edge flush. */
  transform-origin:50% 100%;
  transition:scale .6s var(--wmdws-out);
}
.wmdws .wmdws-watch.is-main:hover img{scale:1.025}
.wmdws .wmdws-watch:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:-12px;border-radius:24px}

/* thumbnail hit-areas: the watches themselves fly into these slots */
.wmdws .wmdws-thumb{
  -webkit-appearance:none;appearance:none;
  position:absolute;z-index:4;top:44%;height:24%;width:9.5%;
  margin:0;padding:0;min-width:0;min-height:0;
  border:0;border-radius:14px;background:none;box-shadow:none;
  cursor:pointer;
}
.wmdws .wmdws-thumb:hover,.wmdws .wmdws-thumb:focus{background:none;box-shadow:none}
.wmdws .wmdws-thumb--1{left:74%}
.wmdws .wmdws-thumb--2{left:85.5%}
.wmdws .wmdws-thumb:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:6px}

/* ---- copy ---- */
.wmdws .wmdws-copy{
  position:absolute;z-index:3;left:6cqw;bottom:31cqh;
  width:min(27cqw, 440px);display:grid;
  text-shadow:0 1px 18px rgba(0,0,0,.22);
}
.wmdws .wmdws-slide{grid-area:1/1;align-self:end}
.wmdws .wmdws-slide:not(.is-active){visibility:hidden}
.wmdws .wmdws-mask{display:block;overflow:hidden;margin:0;padding:0}
.wmdws .wmdws-line{display:block;will-change:transform}
.wmdws .wmdws-slide:not(.is-active) .wmdws-line{transform:translateY(110%)}

.wmdws .wmdws-eyebrow{
  padding-bottom:14px;font-family:'Poppins',sans-serif;
  font-size:12px;line-height:1.4;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.wmdws .wmdws-title{
  margin:0;padding:0 0 .1em;font-family:'Poppins',sans-serif;
  font-size:clamp(30px, 3.4cqw, 60px);line-height:1.04;
  font-weight:600;letter-spacing:-.01em;text-transform:none;color:#fff;
}
.wmdws .wmdws-desc{
  margin:14px 0 0;padding:0;font-family:'Poppins',sans-serif;
  font-size:clamp(14px, 1.05cqw, 16px);line-height:1.65;
  font-weight:300;letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.88);
}
.wmdws .wmdws-ctawrap{margin-top:22px}
.wmdws .wmdws-cta,
.wmdws .wmdws-cta:visited{
  display:inline-flex;align-items:center;gap:10px;
  padding:0 0 6px;border-bottom:1px solid rgba(255,255,255,.45);
  font-family:'Poppins',sans-serif;color:#fff;text-decoration:none;
  font-size:12px;line-height:1.4;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .3s, gap .3s;
}
.wmdws .wmdws-cta:hover,.wmdws .wmdws-cta:focus{color:#fff;border-color:#fff;gap:14px;text-decoration:none}
.wmdws .wmdws-cta:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.wmdws .wmdws-cta svg{width:22px;height:11px;flex:none}

/* ---- arrows ---- */
.wmdws .wmdws-nav{position:absolute;z-index:4;left:6cqw;top:75cqh;display:flex;gap:20px}
.wmdws .wmdws-btn{
  -webkit-appearance:none;appearance:none;
  width:clamp(48px, 4.2cqw, 66px);height:auto;aspect-ratio:1;
  margin:0;padding:0;min-width:0;min-height:0;
  border:1.5px solid rgba(255,255,255,.85);border-radius:50%;
  background:transparent;color:#fff;box-shadow:none;
  font:inherit;line-height:1;text-transform:none;letter-spacing:normal;
  display:grid;place-items:center;cursor:pointer;
  transition:background .3s, color .3s, transform .3s;
}
.wmdws .wmdws-btn:focus{background:transparent;color:#fff;box-shadow:none}
.wmdws .wmdws-btn:hover{background:#fff;color:#16181b}
.wmdws .wmdws-btn:active{transform:scale(.94)}
.wmdws .wmdws-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.wmdws .wmdws-btn svg{display:block;width:34%;height:34%}

.wmdws .wmdws-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- intro on load, pure CSS: right on the first paint, no waiting for JS.
   slider.js drops .is-intro once it has played (or on the first slide change). */
@keyframes wmdws-rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes wmdws-watch-in{from{translate:0 30%;opacity:0}to{translate:0 0;opacity:1}}
.wmdws.is-intro .wmdws-slide.is-active .wmdws-line{animation:wmdws-rise .9s var(--wmdws-out) .15s both}
.wmdws.is-intro .wmdws-slide.is-active .wmdws-mask:nth-child(2) .wmdws-line{animation-delay:.22s}
.wmdws.is-intro .wmdws-slide.is-active .wmdws-mask:nth-child(3) .wmdws-line{animation-delay:.29s}
.wmdws.is-intro .wmdws-slide.is-active .wmdws-mask:nth-child(4) .wmdws-line{animation-delay:.36s}
.wmdws.is-intro .wmdws-watch.is-main img{animation:wmdws-watch-in 1.2s var(--wmdws-out) .1s both}

/* ---- narrower than 1100: no thumbnails, art shifted right of the copy ---- */
@container (max-width:1099px){
  .wmdws .wmdws-thumb{display:none}
  .wmdws .wmdws-canvas{left:60%}
  .wmdws .wmdws-copy{width:32cqw}
}

/* ---- phones and portrait tablets: copy on top (clear of the header row),
   watch below, flanked by the arrows ---- */
@container (max-width:767px) or (max-aspect-ratio:6/5){
  /* art height: whatever the copy (~330px incl. the header row) leaves free,
     capped by the width (a phone) and floored for very short screens */
  .wmdws .wmdws-canvas,.wmdws .wmdws-nav{--wmdws-ch:clamp(280px, calc(100cqh - 330px), 105cqw)}
  .wmdws .wmdws-canvas{left:50%;height:var(--wmdws-ch);width:calc(var(--wmdws-ch) * 2)}
  .wmdws .wmdws-bgs::after{background:linear-gradient(180deg, rgba(8,10,12,.66) 0%, rgba(8,10,12,.42) 34%, rgba(8,10,12,0) 58%)}
  .wmdws .wmdws-copy{
    left:20px;right:20px;top:calc(var(--wmdacc-headrow, 0px) + 22px);bottom:auto;
    width:auto;max-width:560px;
  }
  .wmdws .wmdws-slide{align-self:start}
  .wmdws .wmdws-eyebrow{padding-bottom:10px;font-size:11px}
  .wmdws .wmdws-title{font-size:30px}
  .wmdws .wmdws-desc{margin-top:10px;font-size:14px;line-height:1.6}
  .wmdws .wmdws-ctawrap{margin-top:14px}
  .wmdws .wmdws-nav{
    left:12px;right:12px;top:auto;bottom:calc(var(--wmdws-ch) * .38 - 22px);
    justify-content:space-between;pointer-events:none;
  }
  .wmdws .wmdws-btn{width:44px;pointer-events:auto;background:rgba(0,0,0,.12)}
}

@media (prefers-reduced-motion:reduce){
  .wmdws.is-intro .wmdws-slide.is-active .wmdws-line,
  .wmdws.is-intro .wmdws-watch.is-main img,
  .wmdws .wmdws-el img{animation:none}
  .wmdws .wmdws-bg{transition:none}
}