/* ==========================================================================
   Webzand Storm — home.css
   Colour film · side brand · band · marquee.
   Loaded only on the homepage sections and by the Storm Elementor widgets.
   ========================================================================== */

/* ------------------------------------------------------------ Colour film */
.wzs-film{ position:relative; --wzs-film-blue:var(--wzs-primary); }
.wzs-film__stage{ position:relative; overflow:hidden; background:var(--wzs-paper); }
.wzs-film__panel,.wzs-film__intro{ display:none; }

/* Stacked (phones, reduced motion, no JS, or pinning disabled):
   each family is a 70 / 30 split — structure blue over the family colour. */
.wzs-film__slide{
  position:relative; color:#fff; display:grid; grid-template-rows:auto auto;
  min-height:calc(100svh - var(--wzs-hh) - var(--wzs-tabbar-h));
}
.wzs-film__top{ background:var(--wzs-film-blue); padding:var(--wzs-s7) var(--wzs-pad) var(--wzs-s5); display:flex; flex-direction:column; gap:var(--wzs-s5); overflow:hidden; min-height:0; }
.wzs-film__bot{ background:var(--c); color:var(--on); display:flex; flex-direction:column; justify-content:center; padding:var(--wzs-s5) var(--wzs-pad) var(--wzs-s6); }
.wzs-film__head{ color:#fff; font-family:var(--wzs-font-head); font-weight:var(--wzs-hw); letter-spacing:-.02em; font-size:clamp(28px,3.4vw,52px); line-height:1; margin:0; }
.wzs-film__copy{ margin:0; font-size:14px; line-height:1.62; max-width:52ch; }
.wzs-film__cta{ margin-top:var(--wzs-s4); align-self:flex-start; --wzs-btn-bg:transparent; --wzs-btn-fg:currentColor; --wzs-btn-bd:currentColor; }
.wzs-film__cta:hover{ background:var(--on) !important; color:var(--c-hov,var(--c)) !important; border-color:var(--on) !important; }
.wzs-film__row{ --k:var(--k-d,6); --g:14px; --rh:clamp(96px,15vh,140px); display:flex; align-items:flex-end; justify-content:flex-start; gap:var(--g); height:var(--rh); margin-top:auto; overflow:hidden; }
/* One slot per product silhouette. film.js fades each slot out and back in on
   its own clock, swapping in another product of the family while it is off. */
/* Each slot gets a pixel size worked out from the row height (--rh), its own
   height share (--hf) and its silhouette's width ÷ height (--r), capped at one
   column of k. Slots pack from the bottom left. No percentage heights or
   aspect-ratio, so iOS Safari sizes them exactly like other browsers. */
.wzs-film__sil{ display:block; flex:0 0 auto; height:calc(var(--rh) * var(--hf,1)); width:calc(var(--rh) * var(--hf,1) * var(--r,.45)); max-width:calc((100% - (var(--k) - 1) * var(--g)) / var(--k)); min-width:0; position:relative; }
.wzs-film__sil .wzs-ico{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; color:#fff; transition:opacity .6s ease-in-out; }
.wzs-film__sil .wzs-ico--mask{ aspect-ratio:auto !important; -webkit-mask-position:left bottom; mask-position:left bottom; }
.wzs-film__sil .wzs-ico--img{ object-fit:contain; object-position:left bottom; }
.wzs-film__sil.is-dim .wzs-ico{ opacity:var(--dim,.2); }
.wzs-film__sil.is-off .wzs-ico{ opacity:0; }
.wzs-film__sil:not(.is-d){ display:none; }
@media (min-width:561px) and (max-width:1200px){
  .wzs-film__row{ --k:var(--k-t,4); }
  .wzs-film__sil.is-t{ display:block; } .wzs-film__sil:not(.is-t){ display:none; }
}
@media (max-width:560px){
  .wzs-film__row{ --k:var(--k-m,3); }
  .wzs-film__sil.is-m{ display:block; } .wzs-film__sil:not(.is-m){ display:none; }
}
.wzs-film__gal{ --gh:clamp(100px,15vh,140px); height:var(--gh); margin:0 calc(var(--wzs-pad) * -1); overflow:hidden; flex:0 0 auto; }
/* Seamless loop: every photo carries its own right gap, so the duplicated
   half is exactly 50% wide. Width comes from the height (4:3) in px terms. */
.wzs-film__track{ display:flex; width:max-content; height:100%; animation:wzs-marq 34s linear infinite; }
/* main.js measures each strip and drives it in exact pixels (the CSS
   animation above is only the no-JS fallback). Strips off screen pause. */
.is-idle > .wzs-film__track, .is-idle > .wzs-marq__t, .is-idle > .wzs-ab-strip__track{ animation-play-state:paused; }
/* Every photo box has an exact size and the photo is laid over it, so the
   photo file's own size can never stretch the strip (iOS Safari did that,
   which made the strip race and run out of photos). */
.wzs-film__track figure{ position:relative; height:100%; width:calc(var(--gh) * 4 / 3); flex:0 0 auto; overflow:hidden; margin:0 12px 0 0; }
.wzs-film__track img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
@media (max-width:820px){
  html{ scroll-snap-type:y proximity; }
  /* One family per screen: exactly the space between the header and the tab
     bar. The blue part takes what the colour block does not need, and the
     silhouettes grow into it, so there is no empty band. */
  .wzs-film__slide{
    grid-template-rows:minmax(0,1fr) auto; scroll-snap-align:start; scroll-snap-stop:always; scroll-margin-top:var(--wzs-hh);
    height:calc(100svh - var(--wzs-hh) - var(--wzs-tabbar-h)); min-height:0;
  }
  .wzs-film__top{ padding:var(--wzs-s5) var(--wzs-pad) var(--wzs-s4); gap:var(--wzs-s4); }
  .wzs-film__head{ font-size:clamp(26px,7.4vw,40px); }
  /* Compact silhouettes at the bottom left of the blue part, just above
     the photo strip. */
  .wzs-film__row{ --rh:clamp(80px,12vh,116px); flex:0 0 auto; margin-top:auto; }
  .wzs-film__gal{ --gh:clamp(84px,13vh,124px); }
  .wzs-film__bot{ padding:var(--wzs-s4) var(--wzs-pad) var(--wzs-s5); }
  .wzs-film__bot .wzs-film__copy{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .wzs-film__cta{ margin-top:var(--wzs-s3); }
}

/* Pinned (desktop, JS, motion allowed): the section becomes tall, the stage
   sticks to the viewport and film.js scrubs through the families. */
@media (min-width:821px){
  .wzs-film.is-pinned{ height:calc((var(--n,8) * 72vh) + 244vh); }
  .wzs-film.is-pinned .wzs-film__stage{ position:sticky; top:0; height:100vh; height:100svh; }
  .wzs-film.is-pinned .wzs-film__panel{ display:block; position:absolute; inset:0; z-index:4; will-change:clip-path; }
  .wzs-film.is-pinned .wzs-film__panel--l{ background:var(--wzs-film-blue); clip-path:var(--clip-l,inset(0 41.3% 0 0)); }
  .wzs-film.is-pinned .wzs-film__panel--r{ clip-path:var(--clip-r,inset(0 0 0 59.4%)); transition:background-color .5s linear; }
  .wzs-film.is-pinned .wzs-film__intro{
    display:flex; position:absolute; inset:0; z-index:3; background:var(--wzs-paper); align-items:flex-start; justify-content:center; text-align:center; pointer-events:none;
    padding:clamp(90px,15vh,180px) var(--wzs-pad) 0; opacity:var(--intro-o,1);
  }
  /* Centred under the header; film.js measures the chips here, so the two
     panels (and every other colour) grow out of exactly this position. */
  .wzs-film__introrow{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,40px); flex-wrap:wrap; width:100%; }
  .wzs-film__introcue{ color:var(--wzs-primary); font-size:clamp(11px,.92vw,14px); font-weight:600; letter-spacing:.14em; margin:0; white-space:nowrap; opacity:var(--cue-o,1); transition:opacity .3s; }
  .wzs-film.is-scrubbing .wzs-film__chips i,.wzs-film.is-scrubbing .wzs-film__introcue{ transition:none; }
  .wzs-film__chips{ display:flex; gap:clamp(6px,.8vw,13px); }
  .wzs-film__chips i{ display:block; width:clamp(10px,.85vw,14px); aspect-ratio:1/1; background:var(--c); opacity:var(--chips-o,1); transform:scaleY(var(--chips-s,1)); transition:opacity .3s, transform .36s cubic-bezier(.34,1.56,.64,1); }
  .wzs-film:not(.is-seen) .wzs-film__chips i,.wzs-film:not(.is-seen) .wzs-film__introcue{ opacity:0; transform:scaleY(0); }

  .wzs-film.is-pinned .wzs-film__slide{
    position:absolute; inset:0; z-index:5; display:block; min-height:0; padding-top:clamp(70px,10vh,140px);
    visibility:hidden; pointer-events:none;
  }
  .wzs-film.is-pinned .wzs-film__slide.is-active{ visibility:visible; pointer-events:auto; }
  .wzs-film.is-pinned .wzs-film__top,.wzs-film.is-pinned .wzs-film__bot{ display:contents; }
  .wzs-film.is-pinned .wzs-film__head{ position:absolute; left:var(--wzs-pad); top:clamp(96px,17vh,200px); font-size:clamp(24px,3.2vw,48px); }
  .wzs-film.is-pinned .wzs-film__copy{ position:absolute; top:clamp(96px,17vh,200px); left:61%; right:var(--wzs-pad); color:var(--on); font-size:clamp(12px,.92vw,15px); max-width:46ch; }
  .wzs-film.is-pinned .wzs-film__row{ --g:clamp(10px,1.7vw,32px); --rh:clamp(120px,20vh,210px); position:absolute; left:var(--wzs-pad); top:clamp(190px,32vh,380px); width:52%; height:var(--rh); margin:0; overflow:visible; }
  /* Same width as the catalog band: the full stage between the side paddings. */
  .wzs-film.is-pinned .wzs-film__gal{ --gh:clamp(120px,20vh,218px); position:absolute; left:var(--wzs-pad); right:var(--wzs-pad); bottom:clamp(56px,9vh,120px); height:var(--gh); margin:0; z-index:1; }
  .wzs-film.is-pinned .wzs-film__cta{ position:absolute; top:calc(clamp(96px,17vh,200px) + clamp(150px,20vh,240px)); left:61%; margin:0; color:var(--on); }

  /* slide choreography */
  .wzs-film.is-pinned .wzs-film__head{ opacity:0; transform:translateX(-54px); transition:opacity .5s var(--wzs-e-out), transform .5s var(--wzs-e-out); }
  .wzs-film.is-pinned .wzs-film__copy,.wzs-film.is-pinned .wzs-film__cta{ opacity:0; transform:translateY(24px); transition:opacity .5s var(--wzs-e-out) .05s, transform .5s var(--wzs-e-out) .05s, background-color var(--wzs-t-mid), color var(--wzs-t-mid); }
  .wzs-film.is-pinned .wzs-film__sil{ opacity:0; transform:translateY(55%) scaleY(.84); transform-origin:0 100%; transition:opacity .55s var(--wzs-e-out), transform .55s var(--wzs-e-out); }
  .wzs-film.is-pinned .wzs-film__gal{ opacity:0; transform:translateY(50px); transition:opacity .5s var(--wzs-e-out) .16s, transform .5s var(--wzs-e-out) .16s; }
  .wzs-film.is-pinned .is-active .wzs-film__head{ opacity:1; transform:none; }
  .wzs-film.is-pinned .is-active .wzs-film__copy,.wzs-film.is-pinned .is-active .wzs-film__cta{ opacity:1; transform:none; }
  .wzs-film.is-pinned .is-active .wzs-film__sil{ opacity:1; transform:none; transition-delay:var(--d,0s); }
  .wzs-film.is-pinned .is-active .wzs-film__gal{ opacity:1; transform:none; }
  .wzs-film.is-pinned .is-past .wzs-film__head,.wzs-film.is-pinned .is-past .wzs-film__copy,.wzs-film.is-pinned .is-past .wzs-film__cta{ transform:translateY(-60px); }
  .wzs-film.is-pinned .is-past .wzs-film__sil{ transform:translateY(-60%); }
  .wzs-film.is-pinned .is-past .wzs-film__gal{ transform:translateY(-44px); }
}
@media (min-width:821px) and (max-width:1200px){
  .wzs-film.is-pinned .wzs-film__row{ width:64%; }
  .wzs-film.is-pinned .wzs-film__copy{ left:auto; right:var(--wzs-pad); width:34%; }
  .wzs-film.is-pinned .wzs-film__cta{ left:calc(100% - var(--wzs-pad) - 34%); }
}
@media (prefers-reduced-motion:reduce){ .wzs-film__track{ animation:none; } .wzs-film__sil .wzs-ico{ transition:none; } }

/* ---------------------------------------------------- Scroll-down hint */
.wzs-scrollhint{
  position:fixed; z-index:60; left:calc((100vw - var(--wzs-rail,0px)) / 2); bottom:calc(var(--wzs-tabbar-h,0px) + env(safe-area-inset-bottom,0px) + clamp(64px,13vh,130px));
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px 12px; margin:0; border:0; background:none; cursor:pointer;
  color:#fff; mix-blend-mode:difference; font:600 11.5px/1 var(--wzs-font-body); letter-spacing:.22em; text-transform:uppercase;
  opacity:0; visibility:hidden; transform:translate(-50%,14px); transition:opacity .5s var(--wzs-e-out), transform .5s var(--wzs-e-out), visibility 0s .5s;
}
.wzs-scrollhint.is-ready{ opacity:.55; visibility:visible; transform:translate(-50%,0); transition:opacity .5s var(--wzs-e-out), transform .5s var(--wzs-e-out); animation:wzs-float 3.2s ease-in-out .6s infinite; }
.wzs-scrollhint.is-ready:hover,.wzs-scrollhint.is-ready:focus-visible{ opacity:.9; }
.wzs-scrollhint.is-ready.is-gone{ opacity:0; visibility:hidden; transform:translate(-50%,14px); animation:none; transition:opacity .4s, transform .4s, visibility 0s .4s; }
.wzs-scrollhint:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
.wzs-scrollhint__mouse{ position:relative; width:32px; height:52px; border:2px solid currentColor; border-radius:17px; }
.wzs-scrollhint__mouse i{ position:absolute; left:50%; top:9px; width:4px; height:10px; margin-left:-2px; border-radius:2px; background:currentColor; animation:wzs-wheel 1.8s cubic-bezier(.6,0,.4,1) infinite; }
.wzs-scrollhint__arrow{ width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-2px; animation:wzs-chev 1.8s ease-in-out infinite; }
@keyframes wzs-wheel{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 60%{ transform:translateY(16px); opacity:0; } 100%{ transform:translateY(16px); opacity:0; } }
@keyframes wzs-chev{ 0%,100%{ opacity:.25; transform:translateY(-2px) rotate(45deg); } 50%{ opacity:1; transform:translateY(2px) rotate(45deg); } }
@keyframes wzs-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
/* Phones/tablets stack the film (no full-screen intro), and the bottom tab
   bar sits where the hint would go — the content itself invites scrolling. */
@media (max-width:820px){ .wzs-scrollhint{ display:none; } }
@media (prefers-reduced-motion:reduce){ .wzs-scrollhint,.wzs-scrollhint__mouse i,.wzs-scrollhint__arrow{ animation:none !important; } }
html.wzs-preloading .wzs-scrollhint{ display:none; }

/* -------------------------------------------------------- Side brand */
.wzs-scolor{ background:var(--c); color:var(--on); }
.wzs-scolor__in{ padding:var(--wzs-sec) var(--wzs-pad); display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,72px); align-items:center; }
.wzs-scolor__in > *{ min-width:0; }
.wzs-scolor .wzs-eyebrow{ color:inherit; opacity:.85; }
.wzs-scolor h2{ color:inherit; margin:var(--wzs-s4) 0; max-width:14ch; }
.wzs-scolor p{ max-width:52ch; opacity:.92; font-size:clamp(15px,1.1vw,18px); }
.wzs-scolor .wzs-btn{ margin-top:var(--wzs-s5); }
.wzs-scolor__logo{ display:block; width:auto; height:auto; max-width:min(240px,60%); max-height:72px; object-fit:contain; object-position:left center; margin:0 0 var(--wzs-s5); }
.wzs-scolor__media{ min-width:0; }
.wzs-scolor__media:empty{ display:none; }
.wzs-scolor__slides{ box-shadow:var(--wzs-sh-3); }
@media (min-width:821px){ .wzs-scolor__in{ grid-template-columns:1fr 1fr; } }

/* ------------------------------------------------------------- Band */
.wzs-band{ background:var(--wzs-accent); color:var(--wzs-on-accent); }
.wzs-band__in{ padding:clamp(48px,6vw,110px) var(--wzs-pad); display:flex; gap:var(--wzs-s6); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.wzs-band h2{ color:inherit; max-width:16ch; }
.wzs-band__txt{ margin:12px 0 0; max-width:44ch; opacity:.9; }
.wzs-band .wzs-btn{ --on:var(--wzs-on-accent); --c:var(--wzs-accent); --c-hov:var(--wzs-accent); }
@media (max-width:520px){ .wzs-band__in{ flex-direction:column; align-items:flex-start; } }

/* ----------------------------------------------------------- Marquee */
.wzs-marq{ overflow:hidden; border-block:1px solid var(--wzs-line); }
.wzs-marq__t{ display:flex; width:max-content; padding:10px 0; animation:wzs-marq var(--dur,40s) linear infinite; }
.wzs-marq.is-reverse .wzs-marq__t{ animation-direction:reverse; }
.wzs-marq__t figure{ position:relative; width:clamp(170px,16vw,260px); height:calc(clamp(170px,16vw,260px) * 3 / 4); overflow:hidden; flex:0 0 auto; margin:0 10px 0 0; }
.wzs-marq__t img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.wzs-marq:hover .wzs-marq__t{ animation-play-state:paused; }
@keyframes wzs-marq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){ .wzs-marq__t{ animation:none; } }