/* =========================================================
   Headworks — shared enhancement layer
   Consistent media sizing + richer slider / reveal motion.
   Loaded on every page after the page's inline styles.
   ========================================================= */

:root{
  --hw-ease-out: cubic-bezier(.16,1,.3,1);
  --hw-ease-soft: cubic-bezier(.22,.8,.28,1);
}

/* ---------- 1. CONSISTENT MEDIA SIZING ----------
   Every visual tile keeps its own aspect box and the media
   fills it edge to edge, so nothing stretches or letterboxes. */
.h-card .thumb,
.sw-card,
.w-item,
.stack .card,
.feed .post,
.filmstrip .frame,
.rw-tile,
.cs-grid .g,
.ph-cover,
.echo-track .poster{
  overflow:hidden;
  background:#141417;
}

.h-card .thumb img,
.h-card .thumb video,
.sw-card img,
.sw-card video,
.w-item img,
.w-item video,
.stack .card img,
.stack .card video,
.feed .post img,
.feed .post video,
.filmstrip .frame img,
.filmstrip .frame video,
.rw-tile img,
.rw-tile video,
.cs-grid .g img,
.cs-grid .g video,
.ph-cover img,
.ph-cover video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* keep the home work rail visually even */
.h-card .thumb{ aspect-ratio:4/3; border-radius:10px; }
.sw-card{ aspect-ratio:4/5; border-radius:14px; }
.filmstrip .frame{ aspect-ratio:16/9; border-radius:10px; }

/* posters must not be squashed while loading */
img[loading="lazy"]{ background:#141417; }

/* ---------- 2. SLIDER CHROME ---------- */
.hw-slider{ --hw-fade:56px; }
.hw-track{ scroll-behavior:smooth; }
.hw-track.dragging{ cursor:grabbing; scroll-behavior:auto; }
.hw-track:not(.dragging){ cursor:grab; }

/* any rail that drifts on its own must scroll instantly, not "smoothly" */
[data-hw-drift]{
  scroll-behavior:auto!important;
  scroll-snap-type:none!important;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
[data-hw-drift] > *{ scroll-snap-align:none!important; }

[data-hw-drift]::-webkit-scrollbar{ display:none; }
[data-hw-drift] > *{ opacity:1!important; transform:none!important; filter:none!important; }


/* staggered entry for slider items */
.hw-item{
  opacity:0;
  transform:translate3d(28px,18px,0) scale(.965);
  transition:opacity .8s var(--hw-ease-out), transform .9s var(--hw-ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.hw-item.in{ opacity:1; transform:none; }

/* progress bar gets a soft glow */
.hw-bar i{ transform-origin:left center; transition:transform .5s var(--hw-ease-soft); }

/* ---------- 3. ARCHIVE RAIL — continuous drift ---------- */
.sw-rail{
  cursor:grab;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.sw-rail.dragging{ cursor:grabbing; }
.sw-rail .sw-card{
  transition:transform .7s var(--hw-ease-soft), box-shadow .7s var(--hw-ease-soft);
}
.sw-rail:hover .sw-card{ opacity:.68; transition:opacity .5s var(--hw-ease-soft); }
.sw-rail .sw-card:hover{
  opacity:1;
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 40px 70px -40px rgba(0,0,0,1);
}

/* ---------- 4. SCROLL REVEAL ---------- */
.hw-rise{
  opacity:0;
  transform:translate3d(0,42px,0);
  transition:opacity .9s var(--hw-ease-out), transform 1s var(--hw-ease-out);
  transition-delay:calc(var(--d,0) * 1ms);
}
.hw-rise.hw-in{ opacity:1; transform:none; }

.hw-zoom{
  opacity:0;
  transform:scale(.92);
  filter:blur(10px);
  transition:opacity 1s var(--hw-ease-out), transform 1.1s var(--hw-ease-out), filter 1s var(--hw-ease-out);
  transition-delay:calc(var(--d,0) * 1ms);
}
.hw-zoom.hw-in{ opacity:1; transform:none; filter:none; }

.hw-slide-l{
  opacity:0; transform:translate3d(-46px,0,0);
  transition:opacity .9s var(--hw-ease-out), transform 1s var(--hw-ease-out);
  transition-delay:calc(var(--d,0) * 1ms);
}
.hw-slide-l.hw-in{ opacity:1; transform:none; }

/* ---------- 5. HOVER CRAFT ---------- */
.h-card{ transition:transform .7s var(--hw-ease-soft); }
.h-card:hover{ transform:translateY(-6px); }
.h-card .thumb{ transition:box-shadow .7s var(--hw-ease-soft); }
.h-card:hover .thumb{ box-shadow:0 50px 90px -50px rgba(0,0,0,.95); }

@media (prefers-reduced-motion: reduce){
  .hw-item,.hw-rise,.hw-zoom,.hw-slide-l{
    opacity:1!important; transform:none!important; filter:none!important; transition:none!important;
  }
  .sw-rail{ mask-image:none; }
}

/* even card title heights in horizontal rails */
.h-card h3{min-height:2.15em}
@media (max-width:720px){.h-card h3{min-height:0}}

/* ---------- 6. FLOATING WHATSAPP ---------- */
.hw-wa{
  position:fixed; left:22px; bottom:22px; z-index:9500;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 18px 40px -14px rgba(37,211,102,.85), 0 0 0 0 rgba(37,211,102,.45);
  transition:transform .5s var(--hw-ease-soft, cubic-bezier(.2,.8,.2,1)), box-shadow .5s ease;
  animation:hwWaPulse 2.6s ease-out infinite;
}
.hw-wa:hover{ transform:translateY(-4px) scale(1.07); }
.hw-wa svg{ width:30px; height:30px; fill:currentColor; }
@keyframes hwWaPulse{
  0%{ box-shadow:0 18px 40px -14px rgba(37,211,102,.85), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 18px 40px -14px rgba(37,211,102,.85), 0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 18px 40px -14px rgba(37,211,102,.85), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:600px){ .hw-wa{ left:16px; bottom:16px; width:52px; height:52px; } }
@media (prefers-reduced-motion: reduce){ .hw-wa{ animation:none; } }

/* ---------- 7. INTRO VIDEO (home) ---------- */
.hw-intro{ position:relative; width:100%; height:100vh; min-height:520px; overflow:hidden; background:#0c0c0f; }
.hw-intro video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hw-intro::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,15,.35) 0%,rgba(12,12,15,0) 30%,rgba(12,12,15,.85) 100%); pointer-events:none; }
.hw-intro .hw-intro-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#f2f1ed; opacity:.8; animation:hwCue 2s ease-in-out infinite; }
@keyframes hwCue{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,8px) } }