/* ZEE homepage hero slider. Load after style.css.
   Uses only transform + opacity for motion. Accent colours reuse the
   --green / --gold / --pink tokens from style.css. */

.zs-hero{
  --zs-accent:var(--green,#7dc01b);
  --zs-dwell:5000ms;
  --zs-fade:1200ms;
  --zs-zoom:1400ms;
  --zs-kb-from:1.02;               /* Ken Burns range. Lower --zs-kb-to (e.g. 1.05) if edge text clips */
  --zs-kb-to:1.08;
  position:relative;
  padding:0;                       /* beats the global `section{padding:84px 0}` */
  background:#050507;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line,rgba(255,255,255,.1));
}
.zs-hero[data-theme="sports"]{--zs-accent:var(--green,#7dc01b)}
.zs-hero[data-theme="energy"]{--zs-accent:var(--gold,#f2a900)}
.zs-hero[data-theme="amorous"]{--zs-accent:var(--pink,#e0207a)}

/* Reserves space before images load (no layout shift) */
.zs-viewport{
  position:relative;
  width:100%;
  aspect-ratio:1661/627;
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
  outline:none;
}
.zs-viewport:focus-visible{outline:2px solid var(--zs-accent);outline-offset:-4px}

/* ---------- slides ---------- */
.zs-slide{
  position:absolute;inset:0;
  margin:0;
  opacity:0;visibility:hidden;
  transform:scale(1.03);
  will-change:opacity,transform;
  backface-visibility:hidden;
}
/* Incoming slide fades in + settles, sitting ABOVE the outgoing one.
   The outgoing slide stays fully opaque underneath until the incoming
   one is done, so there is never a dark dip or flash mid-transition. */
.zs-slide.is-active{
  opacity:1;visibility:visible;z-index:2;transform:none;
  transition:opacity var(--zs-fade) cubic-bezier(.4,0,.2,1),
             transform var(--zs-zoom) cubic-bezier(.22,.8,.3,1);
}
.zs-slide.is-leaving{opacity:1;visibility:visible;z-index:1;transform:none}

.zs-slide picture,.zs-slide img{display:block;width:100%;height:100%}
.zs-slide img{
  object-fit:contain;              /* never crop banner artwork */
  transform:scale(var(--zs-kb-from));
  transform-origin:50% 50%;
  pointer-events:none;
  -webkit-user-drag:none;
}
/* Ken Burns across dwell + fade, continues while leaving */
.zs-slide.is-active img,.zs-slide.is-leaving img{
  animation:zs-kb calc(var(--zs-dwell) + var(--zs-fade) + 200ms) cubic-bezier(.3,.1,.4,1) forwards;
}
@keyframes zs-kb{from{transform:scale(var(--zs-kb-from))}to{transform:scale(var(--zs-kb-to))}}

/* ---------- accent glow edge ---------- */
.zs-edge{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;pointer-events:none;
  background-color:var(--zs-accent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  box-shadow:0 0 22px 2px var(--zs-accent);
  opacity:.9;
  transition:background-color .9s ease,box-shadow .9s ease;
}
.zs-edge::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:22%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-120%);
  animation:zs-glide 5s ease-in-out infinite;
}
@keyframes zs-glide{0%{transform:translateX(-120%)}60%,100%{transform:translateX(560%)}}

/* ---------- controls ---------- */
.zs-arrow{
  position:absolute;top:50%;z-index:5;
  width:48px;height:48px;margin-top:-24px;
  display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background:rgba(8,8,10,.38);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:scale(.9);
  transition:opacity .3s,transform .3s,background-color .3s,border-color .3s;
}
.zs-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zs-prev{left:clamp(10px,2vw,30px)}
.zs-next{right:clamp(10px,2vw,30px)}
.zs-hero:hover .zs-arrow,.zs-hero:focus-within .zs-arrow{opacity:.9;transform:none}
.zs-arrow:hover{background:var(--zs-accent);border-color:var(--zs-accent);color:#000;opacity:1}
.zs-arrow:focus-visible{opacity:1;transform:none;outline:2px solid #fff;outline-offset:2px}

.zs-nav{
  position:absolute;left:50%;bottom:clamp(8px,1.6vw,22px);z-index:5;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  padding:7px 14px;border-radius:999px;
  background:rgba(8,8,10,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.zs-dots{display:flex;align-items:center;gap:8px}
.zs-dot{
  position:relative;width:9px;height:9px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.4);cursor:pointer;overflow:hidden;
  transition:width .45s cubic-bezier(.22,.8,.3,1),background-color .3s;
}
.zs-dot::before{content:"";position:absolute;inset:-10px}   /* larger tap target */
.zs-dot:hover{background:rgba(255,255,255,.7)}
.zs-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.zs-dot.is-current{width:38px;background:rgba(255,255,255,.28)}
.zs-dot__fill{
  position:absolute;inset:0;border-radius:inherit;background:var(--zs-accent);
  transform:scaleX(0);transform-origin:left center;
}
.zs-dot.is-current .zs-dot__fill{animation:zs-fill var(--zs-dwell) linear forwards}
@keyframes zs-fill{to{transform:scaleX(1)}}

.zs-toggle{
  display:grid;place-items:center;width:22px;height:22px;padding:0;
  border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;opacity:.8;
  transition:opacity .2s,color .2s;
}
.zs-toggle:hover{opacity:1;color:var(--zs-accent)}
.zs-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zs-toggle svg{width:12px;height:12px;fill:currentColor}
.zs-toggle .i-play{display:none}
.zs-hero.is-manual-paused .zs-toggle .i-pause{display:none}
.zs-hero.is-manual-paused .zs-toggle .i-play{display:block}

/* ---------- pause (hover / focus / manual / hidden tab) ---------- */
.zs-hero.is-paused .zs-slide img,
.zs-hero.is-paused .zs-dot__fill,
.zs-hero.is-paused .zs-edge::after{animation-play-state:paused}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .zs-arrow{opacity:.75;transform:none;width:36px;height:36px;margin-top:-18px}
  .zs-arrow svg{width:16px;height:16px}
}
@media(max-width:640px){
  .zs-arrow{display:none}            /* swipe + dots on phones */
  .zs-nav{gap:8px;padding:5px 10px;bottom:6px}
  .zs-dots{gap:6px}
  .zs-dot{width:7px;height:7px}
  .zs-dot.is-current{width:26px}
  .zs-edge{height:2px}
}

/* ---------- reduced motion: no zoom, no sweep, plain crossfade ---------- */
@media(prefers-reduced-motion:reduce){
  .zs-slide{transform:none}
  .zs-slide.is-active{transition:opacity .4s linear!important}
  .zs-slide img,
  .zs-slide.is-active img,.zs-slide.is-leaving img{animation:none!important;transform:none}
  .zs-edge::after{display:none}
  .zs-dot.is-current .zs-dot__fill{animation:none;transform:scaleX(1)}
  .zs-dot,.zs-arrow{transition:none!important}
}