/* Home slider styles, matching index.html. Markup is shared via hero-slider.html. */
    /* Hero — custom hand-rolled transition. Autoplay, pagination, arrows,
       swipe detection, and the visual transition are all implemented by
       initHeroSlider() below; the legacy Swiper class names are CSS hooks only.

       Slides are stacked absolutely on top of each other rather than moved
       along a track. Going from slide A to slide B:
         - B's .hero-bg circle-opens from its own center, growing over A's
           bg (which just sits there, unanimated, underneath).
         - A's .hero-fg slides out to the left; B's .hero-fg slides in from
           the right, overlapping mid-transition.
       Once the transition ends, A is dropped to the back (z-index) and its
       layers reset for its next turn. */
    /* aspect-ratio gives the stack its height — every .hero-slide is now
       position:absolute (needed so outgoing/incoming slides can overlap
       mid-transition), so the container no longer gets height for free from
       an in-flow <img> the way a plain document-flow image would. All
       desktop bg images share the same 1920x1080 export size.

       max-height caps how tall the hero gets on very wide/short-content
       viewports — at 16:9 a 2560px-wide screen would otherwise produce a
       ~1440px hero, taller than most monitors want a hero to be. Capping it
       lets object-fit:cover on .hero-bg-img crop the sides slightly instead
       of the section just growing without bound. */
    .hero-swiper { width:100%; position:relative; aspect-ratio:1920/1080; max-height:min(74vw, 760px); min-height:320px; }
    .hero-swiper .swiper-wrapper { position:absolute; inset:0; z-index:1; }
    /* Pagination used to get position:absolute/flex/centering for free from
       Swiper's own bundled CSS — now that the hero has no Swiper dependency,
       this rule supplies all of it directly. z-index above .swiper-wrapper
       (both slides in a transition sit at z-index 2/3) so the dots are
       always clickable, never covered by a slide layer. */
    .hero-swiper .swiper-pagination {
      position:absolute; left:0; right:0; bottom:24px; z-index:5;
      display:flex; align-items:center; justify-content:center; gap:8px;
      pointer-events:none;
    }

    .hero-slide {
      position:absolute; inset:0; overflow:hidden;
      z-index:1; visibility:hidden;
    }
    .hero-slide.is-active { z-index:2; visibility:visible; }

    .hero-slide-link { display:block; position:absolute; inset:0; color:inherit; }
    .hero-bg, .hero-fg { display:block; line-height:0; position:absolute; inset:0; }
    /* Content column is narrower than the full-bleed background — matches
       the design's 1118px content width inside a 1440px canvas (77.64%),
       centered via left/right/margin (not transform: the transition states
       below already animate .hero-fg's transform for the slide-in/out
       motion, so centering can't also live in transform without the two
       fighting over the same property). */
    .hero-fg { left:0; right:0; width:77.64%; margin:0 auto; }
    .hero-bg-img, .hero-fg-img { width:100%; height:100%; display:block; }
    .hero-bg-img { object-fit:cover; }
    .hero-fg-img {
      object-fit:contain;
      /* Per-slide content alignment: some slides' art already touches the
         bottom of its own canvas (e.g. the pistache platform) and should
         stay flush there; others have their copy centered in empty space
         and should stay centered. Controlled by data-fg-align on the slide. */
      object-position: center center;
    }
    .hero-slide[data-fg-align="bottom"] .hero-fg-img { object-position: center bottom; }

    /* Resting state: fully open/in-place, no transform. */
    .hero-bg { clip-path: circle(150% at 50% 50%); }
    .hero-fg { transform: translateX(0); }

    /* Transition-out state for the slide being left: fg exits left. */
    .hero-slide.is-leaving .hero-fg {
      transform: translateX(-100%);
      transition: transform 1.3s cubic-bezier(.22,.8,.3,1);
    }
    /* Transition-in state for the slide becoming active: bg circle-opens,
       fg enters from the right. Both start from their "closed"/offscreen
       state (applied via .is-entering-start, added then removed on the
       next frame so the transition actually runs) and animate to resting. */
    .hero-slide.is-entering-start .hero-bg { clip-path: circle(0% at 50% 50%); }
    .hero-slide.is-entering-start .hero-fg { transform: translateX(100%); }
    .hero-slide.is-entering .hero-bg {
      clip-path: circle(150% at 50% 50%);
      transition: clip-path 1.8s cubic-bezier(.22,1,.36,1);
    }
    .hero-slide.is-entering .hero-fg {
      transform: translateX(0);
      transition: transform 1.3s cubic-bezier(.22,.8,.3,1) .15s;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-slide, .hero-bg, .hero-fg { transition: none !important; }
      .hero-bg { clip-path: none !important; }
      .hero-fg { transform: none !important; }
    }

    /* Pagination: small circles, the active one stretches into an oval pill
       instead of just growing as a bigger circle. pointer-events re-enabled
       per-bullet since the row itself is pointer-events:none (so it never
       blocks clicks/drags on the slide underneath it outside the dots). */
    .hero-swiper .swiper-pagination-bullet {
      width:9px; height:9px; border-radius:9999px; flex:0 0 auto;
      background:rgba(255,255,255,.55); opacity:1; cursor:pointer;
      pointer-events:auto;
      transition: width .3s ease, background-color .3s ease;
    }
    .hero-swiper .swiper-pagination-bullet-active {
      width:26px; background:#fff;
    }

    /* Arrows: circular white-on-glass buttons, vertically centered over the
       slide, above the slide stack (z-index above the highest slide
       z-index of 3 used mid-transition) so they stay clickable throughout. */
    .hero-nav {
      position:absolute; top:50%; transform:translateY(-50%); z-index:6;
      display:inline-flex; align-items:center; justify-content:center;
      width:48px; height:48px; border-radius:9999px; border:none;
      background:rgba(255,255,255,.18); color:#fff;
      cursor:pointer; padding:0;
      transition: background-color .25s ease, transform .25s ease;
    }
    .hero-nav:hover { background:rgba(255,255,255,.32); }
    .hero-nav:active { transform:translateY(-50%) scale(.92); }
    .hero-nav svg { width:22px; height:22px; }
    .hero-nav-prev { left:24px; }
    .hero-nav-next { right:24px; }

    /* Phones: the mobile bg/fg exports are portrait (362x762, ~0.475
       aspect-ratio) — nothing like the desktop 16:9 pair — and the
       <source media="(max-width:700px)"> swap in hero-slider.html already
       points at them, so the container just needs to switch to matching
       proportions at the same breakpoint. .hero-fg goes back to full-width
       here too: the 1118/1440 desktop inset doesn't apply to art that was
       already composed edge-to-edge for a narrow phone canvas. */
    @media (max-width: 700px) {
      .hero-swiper {
        aspect-ratio: 362/762; max-height:none; min-height:0;
      }
      .hero-fg { width:100%; }
      .hero-swiper .swiper-pagination { bottom:16px; gap:6px; }
      .hero-swiper .swiper-pagination-bullet { width:7px; height:7px; }
      .hero-swiper .swiper-pagination-bullet-active { width:20px; }
      .hero-nav { width:36px; height:36px; }
      .hero-nav svg { width:18px; height:18px; }
      .hero-nav-prev { left:10px; }
      .hero-nav-next { right:10px; }
    }


/* Keep pagination and arrows keyboard- and touch-accessible. */
.hero-swiper .swiper-pagination-bullet { padding: 0; border: 0; position: relative; }
.hero-swiper .swiper-pagination-bullet::after { content: ""; position: absolute; width: 44px; height: 44px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.hero-swiper .swiper-pagination { gap: 35px; bottom: 26px; }
.hero-swiper .hero-nav { min-width: 44px; min-height: 44px; }
.hero-pause { position: absolute; z-index: 6; right: 16px; bottom: 16px; width: 44px; height: 44px; border: 1px solid #ffffff88; border-radius: 50%; color: #fff; background: #592437; cursor: pointer; }
@media (max-width: 600px) {
  .hero-pause { bottom: 58px; }
}