/* fxHero — see fx-hero.js. The stage keeps the slide shape; every slide sits on top of each other. */
.fx-hero-slides { position: relative; overflow: hidden; aspect-ratio: 1366 / 450; background: #111; }
@media (max-width: 767px) {
  /* phones: 2:1 to match the mobile image the admin makes (1000×500). A proper 2:1 mobile banner fills
     this edge-to-edge; any off-ratio image (e.g. a wide desktop banner reused here) is shown whole on a
     soft cream frame instead of being cropped */
  .fx-hero-slides { aspect-ratio: 2 / 1; background: #f6f1e7; }
  .fx-hero-slides .fx-hero-slide { background: #f6f1e7; }       /* each slide paints its own cream, so the frame never reveals the slide behind mid-transition */
  .fx-hero-slides .fx-hero-slide img { object-fit: contain; }   /* beats the base cover rule that follows */
}
.fx-hero-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; }
.fx-hero-slide.is-on { opacity: 1; pointer-events: auto; z-index: 2; }
.fx-hero-slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fx-hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 5; display: flex; justify-content: center; gap: 6px; }
.fx-hero-dots button { width: 22px; height: 3px; border: 0; padding: 0; border-radius: 1px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .3s, background .3s; }
.fx-hero-dots button.on { width: 34px; background: #fff; }

/* reveal: the next one wipes in from the side while its picture drifts (parallax); the old one eases back and dims */
.fx-eff-reveal .fx-hero-slide { transition: opacity 0s linear 1.25s; }
.fx-eff-reveal .fx-hero-slide.is-in { opacity: 1; z-index: 3; clip-path: inset(0 0 0 100%); transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1); }
.fx-eff-reveal .fx-hero-slide.is-in.is-back { clip-path: inset(0 100% 0 0); }
.fx-eff-reveal .fx-hero-slide.is-in.is-on { clip-path: inset(0 0 0 0); }
.fx-eff-reveal .fx-hero-slide.is-in img { transform: translateX(14%) scale(1.06); transition: transform 1.2s cubic-bezier(.77, 0, .18, 1); }
.fx-eff-reveal .fx-hero-slide.is-in.is-back img { transform: translateX(-14%) scale(1.06); }
.fx-eff-reveal .fx-hero-slide.is-in.is-on img { transform: translateX(0) scale(1); }
.fx-eff-reveal .fx-hero-slide.is-out { opacity: 1; z-index: 2; transition: opacity 0s linear 1.25s; }
.fx-eff-reveal .fx-hero-slide.is-out img { transition: transform 1.2s cubic-bezier(.77, 0, .18, 1), filter 1.2s; }
.fx-eff-reveal .fx-hero-slide.is-out:not(.is-on) img { transform: translateX(-10%) scale(1.04); filter: brightness(.7); }
.fx-eff-reveal .fx-hero-slide.is-out.is-back:not(.is-on) img { transform: translateX(10%) scale(1.04); }

/* stack: the old one sinks and dims, the next one glides in on top with a soft shadow edge */
.fx-eff-stack .fx-hero-slide { transition: opacity 0s linear 1.25s; }
.fx-eff-stack .fx-hero-slide.is-in { opacity: 1; z-index: 3; transform: translateX(100%); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); box-shadow: -30px 0 60px rgba(0,0,0,.35); }
.fx-eff-stack .fx-hero-slide.is-in.is-back { transform: translateX(-100%); box-shadow: 30px 0 60px rgba(0,0,0,.35); }
.fx-eff-stack .fx-hero-slide.is-in.is-on { transform: translateX(0); }
.fx-eff-stack .fx-hero-slide.is-out { opacity: 1; z-index: 2; }
.fx-eff-stack .fx-hero-slide.is-out img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), filter 1.2s; }
.fx-eff-stack .fx-hero-slide.is-out:not(.is-on) img { transform: scale(.92); filter: brightness(.55); }

/* slide: the plain glide (the normal one) */
.fx-eff-slide .fx-hero-slide { transition: opacity 0s linear 1.25s; }
.fx-eff-slide .fx-hero-slide.is-in { opacity: 1; z-index: 3; transform: translateX(100%); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.fx-eff-slide .fx-hero-slide.is-in.is-back { transform: translateX(-100%); }
.fx-eff-slide .fx-hero-slide.is-in.is-on { transform: translateX(0); }
.fx-eff-slide .fx-hero-slide.is-out { opacity: 1; z-index: 2; transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity 0s linear 1.25s; }
.fx-eff-slide .fx-hero-slide.is-out:not(.is-on) { transform: translateX(-100%); }
.fx-eff-slide .fx-hero-slide.is-out.is-back:not(.is-on) { transform: translateX(100%); }

/* fade: one melts into the next */
.fx-eff-fade .fx-hero-slide { transition: opacity 1.1s ease; }
.fx-eff-fade .fx-hero-slide.is-in { z-index: 3; }
.fx-eff-fade .fx-hero-slide.is-out { z-index: 2; }

/* circle: the next picture opens from a dot in the middle */
.fx-eff-circle .fx-hero-slide { transition: opacity 0s linear 1.25s; }
.fx-eff-circle .fx-hero-slide.is-in { opacity: 1; z-index: 3; clip-path: circle(0% at 50% 50%); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1); }
.fx-eff-circle .fx-hero-slide.is-in.is-on { clip-path: circle(80% at 50% 50%); }
.fx-eff-circle .fx-hero-slide.is-in img { transform: scale(1.12); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
.fx-eff-circle .fx-hero-slide.is-in.is-on img { transform: scale(1); }
.fx-eff-circle .fx-hero-slide.is-out { opacity: 1; z-index: 2; }
.fx-eff-circle .fx-hero-slide.is-out img { transition: filter 1.2s; } .fx-eff-circle .fx-hero-slide.is-out:not(.is-on) img { filter: brightness(.6); }

/* cube: the stage turns like a box, the next face comes round */
.fx-eff-cube { perspective: 1400px; }
.fx-eff-cube .fx-hero-slide { transition: opacity 0s linear 1.25s; backface-visibility: hidden; }
.fx-eff-cube .fx-hero-slide.is-in { opacity: 1; z-index: 3; transform-origin: left center; transform: translateX(100%) rotateY(-70deg); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
.fx-eff-cube .fx-hero-slide.is-in.is-back { transform-origin: right center; transform: translateX(-100%) rotateY(70deg); }
.fx-eff-cube .fx-hero-slide.is-in.is-on { transform: translateX(0) rotateY(0); }
.fx-eff-cube .fx-hero-slide.is-out { opacity: 1; z-index: 2; transform-origin: right center; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1), opacity 0s linear 1.25s; }
.fx-eff-cube .fx-hero-slide.is-out:not(.is-on) { transform: translateX(-100%) rotateY(70deg); }
.fx-eff-cube .fx-hero-slide.is-out.is-back { transform-origin: left center; } .fx-eff-cube .fx-hero-slide.is-out.is-back:not(.is-on) { transform: translateX(100%) rotateY(-70deg); }

/* blinds: strips of the old picture tip away one by one (built by fx-hero.js) */
.fx-hero-strips { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1200px; }
.fx-strip { position: absolute; top: 0; height: 100%; overflow: hidden; transform-origin: top center; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .8s; }
.fx-strip img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; }
.fx-hero-strips.is-go .fx-strip { transform: rotateX(-90deg) translateY(20px); opacity: 0; }

/* WebGL (ripple / pixel / wave) draws the change on a canvas over the slides */
.fx-hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .1s; }
.fx-hero-slides.is-gl .fx-hero-gl { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-hero-slide, .fx-hero-slide img { transition-duration: .01s !important; } }