/* Each slide waits for a decoded frame, then crossfades over its predecessor. */
.campaign:not(.custom-hero)>.hero-carousel{position:absolute;inset:0}
.hero-carousel{position:relative;isolation:isolate;overflow:hidden;touch-action:pan-y;background:var(--surface-soft,#ece5dc)}
.hero-carousel-layer{position:absolute;inset:0;opacity:0;z-index:0;pointer-events:none;transition:opacity .55s cubic-bezier(.22,.61,.36,1)}
.hero-carousel-layer.is-current{opacity:1;z-index:1;pointer-events:auto}
.hero-carousel-layer.is-entering{opacity:1;z-index:2;pointer-events:auto}
.hero-carousel-layer[aria-hidden="true"]{pointer-events:none}
.hero-carousel-layer>img,.hero-carousel-layer>video{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-carousel-layer>video{object-fit:contain;background:#101b2d}
.campaign.custom-hero>.hero-carousel{flex:none;width:100%;aspect-ratio:16/9}
.campaign.custom-hero>.hero-carousel .hero-carousel-layer>img{object-fit:contain;filter:none}
.hero-carousel-controls{position:absolute;z-index:3;inset-inline:10px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:5px;pointer-events:none}
.campaign.video-hero .hero-carousel-controls{bottom:auto;top:10px}
.hero-carousel-controls>button,.hero-carousel-dots{pointer-events:auto;background:#121922d4;color:#fff;backdrop-filter:blur(8px)}
.hero-carousel-controls>button{min-width:34px;height:34px;border:1px solid #ffffff45;border-radius:50%;padding:0;font-size:24px;display:grid;place-items:center;line-height:1}
.hero-carousel-controls>.hero-carousel-pause{font-size:17px;margin-inline-start:5px}
.hero-carousel-controls>button:hover{background:#202b3af2}
.hero-carousel-dots{display:flex;align-items:center;justify-content:center;gap:0;border:1px solid #ffffff45;border-radius:20px;min-height:34px;padding:0 5px}
.hero-carousel-dot{width:22px;height:30px;display:grid;place-items:center;padding:0;border:0}
.hero-carousel-dot:before{content:"";display:block;width:6px;height:6px;border-radius:10px;background:#ffffff80;transition:width .3s,background .3s}
.hero-carousel-dot[aria-current="true"]:before{width:16px;background:#fff}
.hero-carousel-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-carousel-controls[hidden],.hero-carousel-controls [hidden]{display:none}
:root[data-theme="dark"] .campaign:not(.custom-hero)>.hero-carousel .hero-carousel-layer>img{filter:brightness(.7) saturate(.78)}
[dir="rtl"] .hero-carousel-arrow{transform:scaleX(-1)}
@media(max-width:760px){.campaign:not(.custom-hero)>.hero-carousel .hero-carousel-layer>img{object-position:60% center}.hero-carousel-controls{bottom:8px;inset-inline:8px}.campaign.video-hero .hero-carousel-controls{top:8px}.hero-carousel-dot{width:18px}}
@media(max-width:380px){.hero-carousel-controls{gap:3px}.hero-carousel-controls>button{min-width:30px;width:30px;height:30px}.hero-carousel-dots{padding:0 3px;min-height:30px}.hero-carousel-dot{width:15px;height:28px}.hero-carousel-dot[aria-current="true"]:before{width:13px}}
:root[data-motion="off"] .hero-carousel-layer,:root[data-motion="off"] .hero-carousel-dot:before{transition:none}
@media(prefers-reduced-motion:reduce){:root:not([data-motion="on"]) .hero-carousel-layer,:root:not([data-motion="on"]) .hero-carousel-dot:before{transition:none}}
