/* ============================================================================
   AD-Hero-26 — cinematic image-cycling hero with corner preview oval.

   Ported from a source-verified reverse-engineering of the shed.design
   settled homepage hero. See ../SHED_HERO_REFERENCE.md for the provenance of
   every timing, distance and easing value below. Retuning lives on the four
   custom properties module.html sets inline (--dwell, --wipe, --drift,
   --drift-distance) plus the module fields that drive them — this file
   should not need per-value edits for normal use.

   Scoping: every selector is class-based and prefixed `ad-hero26`, and this
   stylesheet is safe to have multiple module instances share on one page.
   ========================================================================= */

.ad-hero26 {
  --dwell: 5000ms;
  --wipe: 1000ms;
  --drift: 6000ms;
  --drift-distance: 4.5%;

  /* Outgoing thumbnail wipe. Fixed — not a GSAP-default accident here, a
     deliberate match to the reference's inherited 0.5s / power1.out. */
  --thumb-out: 500ms;

  /* expo.inOut. cubic-bezier cannot express an exponential; the usual
     stand-in cubic-bezier(0.87,0,0.13,1) is roughly 2.5x further along at
     the quarter point than the real curve. Kept only as a fallback — the
     @supports block below swaps in a sampled linear() that tracks
     expo.inOut to within a fraction of a percent. */
  --ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);

  /* GSAP power1.out is quad out, y = 2x - x², exactly expressible as a
     cubic-bezier at (1/3, 2/3, 2/3, 1) — not an approximation. */
  --ease-quad-out: cubic-bezier(0.33333, 0.66667, 0.66667, 1);
  --ease-entrance: cubic-bezier(0.9, 0, 0.1, 1);

  /* Universal corner inset above the 1024px breakpoint. */
  --edge: 0.75vw;
}

@supports (transition-timing-function: linear(0, 1)) {
  .ad-hero26 {
    --ease-expo-in-out: linear(
      0, 0.00098 5%, 0.00195 10%, 0.00391 15%, 0.00781 20%, 0.01563 25%,
      0.03125 30%, 0.0625 35%, 0.125 40%, 0.17678 42.5%, 0.25 45%,
      0.35355 47.5%, 0.5 50%, 0.64645 52.5%, 0.75 55%, 0.82322 57.5%,
      0.875 60%, 0.9375 65%, 0.96875 70%, 0.98438 75%, 0.99219 80%,
      0.99609 85%, 0.99805 90%, 0.99902 95%, 1
    );
  }
}

/* ------------------------------------------------------------------ shell --- */

.ad-hero26 {
  position: relative;
  /* Fallback for browsers without svh support. --ad-hero26-above is 0px
     until module.js measures how far the hero sits below the top of the
     page (e.g. a site header ahead of it in normal flow) and reports it
     back, so the module always shrinks to fit whatever viewport remains
     instead of running off the bottom of the screen. */
  height: calc(100vh - var(--ad-hero26-above, 0px));
  overflow: hidden;
  color: #fff;
  background: #0b0b0b;
  isolation: isolate;
  box-sizing: border-box;
}

.ad-hero26 *,
.ad-hero26 *::before,
.ad-hero26 *::after {
  box-sizing: border-box;
}

@supports (height: 100svh) {
  /* deliberate: avoids the mobile browser-chrome jump 100vh causes */
  .ad-hero26 { height: calc(100svh - var(--ad-hero26-above, 0px)); }
}

/* ------------------------------------------------------------ image stack --- */

.ad-hero26__assets {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Scroll parallax target: lags the page by --parallax-pct (40% in the
   reference) as the hero scrolls out, linear, scrubbed. */
.ad-hero26__assets-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Each slide is a full-bleed layer, hidden until it becomes current. The
   reveal is a clip-path inset animated on this element — not the figure or
   image — which is why the image itself never scales or fades. */
.ad-hero26__asset {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  clip-path: inset(0% 0% 100% 0%);
}

.ad-hero26__asset.is-current {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
}

/* Oversized and pulled up by the same amount so the downward drift never
   exposes an edge. Reference: top:-5%; height:105% for a 4.5% drift. */
.ad-hero26__asset-fig {
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 105%;
  margin: 0;
  will-change: transform;
}

.ad-hero26__asset-fig picture,
.ad-hero26__asset-fig img {
  display: block;
  width: 100%;
  height: 100%;
}

.ad-hero26__asset-fig img {
  object-fit: cover;
  /* Per-slide art direction, done client-side because HubSpot's image CDN
     has no focal-point crop parameter. Desktop focal point by default;
     swapped for the mobile focal point below 1024px, whether or not a
     distinct mobile image was supplied. */
  object-position: var(--focal-x-desktop, 50%) var(--focal-y-desktop, 50%);
}

@media (max-width: 1023px) {
  .ad-hero26__asset-fig img {
    object-position: var(--focal-x-mobile, 50%) var(--focal-y-mobile, 50%);
  }
}

/* Full-bleed invisible hit target for a slide's optional link. Only the
   current slide's link is ever in the tab order (module.js toggles
   tabindex on transition); the assets stack itself does not block clicks
   for slides without a link. */
.ad-hero26__asset-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  outline-offset: -4px;
}

.ad-hero26__asset-link:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: -4px;
}

/* ----------------------------------------------- the corner preview oval --- */

.ad-hero26__control {
  position: absolute;
  z-index: 500;
  display: flex;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  border: 3px solid #fff;
  border-radius: 999px;   /* reference: 16rem / 10vw — i.e. fully rounded */
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  /* Mobile / tablet: bottom-left corner, fixed pixel size, matching the
     desktop corner placement below. Deviates from the reference site, which
     centres the oval on mobile (see SHED_HERO_REFERENCE.md §7) — changed
     per request. */
  left: 20px;
  bottom: 20px;
  width: 140px;
  height: 86px;

  transform: scale(0);
  transition: transform 1s var(--ease-entrance) 0.5s;
}

.ad-hero26.is-ready .ad-hero26__control { transform: scale(1); }

.ad-hero26--no-preview .ad-hero26__control {
  /* Kept in the DOM and still animating (it drives the autoplay clock) but
     visually and interactively removed. opacity/visibility, not display,
     so its Web Animations keep ticking. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ad-hero26__control:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: 4px;
}

.ad-hero26__thumb {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Only the NEXT slide's thumbnail is ever shown. */
.ad-hero26__thumb.is-next {
  opacity: 1;
  z-index: 1;
}

/* Resting layer: desaturated. */
.ad-hero26__thumb-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* Countdown layers. The mask slides in from the left while its contents
   counter-slide from the right, so the colour image is uncovered in place,
   left to right, linearly, over exactly one dwell period. */
.ad-hero26__thumb-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  transform: translateX(-100%);
}

.ad-hero26__thumb-slide {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
}

.ad-hero26__thumb-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- a11y only --- */

.ad-hero26__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Breakpoint. Exactly one, matching the reference: min-width 1024px.
   ====================================================================== */

@media (min-width: 1024px) {

  /* Desktop: bottom-LEFT corner, fluid in vw.
     Reference: left/bottom .75vw; width 8.75vw; height 5.375vw (~1.63:1). */
  .ad-hero26__control {
    left: var(--edge);
    bottom: var(--edge);
    width: 8.75vw;
    height: 5.375vw;
  }
}

/* =========================================================================
   Reduced motion. Autoplay, drift and parallax are suppressed by module.js;
   this removes the entrance transitions and shows the preview in full
   colour with no timed reveal.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ad-hero26__control { transition: none; transform: scale(1); }

  .ad-hero26__thumb-mask,
  .ad-hero26__thumb-slide { transform: none; }
}