/* Category carousel: rounded photo frame that rotates on its own with a cinematic wipe. */
.hero-carousel{position:relative;height:auto;min-width:0;aspect-ratio:1;border-radius:28px;overflow:hidden;isolation:isolate;background:#dfe8f1;border:0;box-shadow:0 34px 70px -28px #0b2d5566,0 10px 24px -12px #0b2d5533;touch-action:pan-y pinch-zoom;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.carousel-slides{position:absolute;inset:0}
.carousel-slide{position:absolute;inset:0;margin:0;visibility:hidden;z-index:0}
.carousel-slide.is-active{visibility:visible;z-index:2}
.carousel-slide.is-leaving{visibility:visible;z-index:1}
.carousel-media{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#dfe8f1}
.hero-carousel .hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:50% 58%;transition:none;will-change:transform}
.hero-visual.hero-carousel:hover .hero-photo{transform:none}
/* Soft vignette so the caption and top labels stay legible on bright skies. */
.carousel-media::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0b2d5526 0,transparent 22%,transparent 55%,#06182fbf 100%)}

.carousel-topline{position:absolute;top:20px;left:20px;right:20px;z-index:4;display:flex;justify-content:space-between;gap:12px;align-items:center;pointer-events:none}
.carousel-topline>span:first-child{padding:8px 13px;border-radius:999px;background:#ffffffe6;backdrop-filter:blur(8px);color:var(--navy);font-size:9px;font-weight:800;letter-spacing:1.3px;box-shadow:0 6px 16px #0b2d5520}
.carousel-concept{color:#fff;font-size:9px;background:#0b2d5566;backdrop-filter:blur(8px);border-radius:999px;padding:5px 10px}

.carousel-caption{position:absolute;z-index:3;left:20px;right:20px;bottom:38px;display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:20px;background:#0b2d55b3;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid #ffffff2b;color:#fff;box-shadow:0 18px 40px -12px #00122680}
.carousel-category{display:grid;place-items:center;flex-shrink:0;min-width:56px;height:56px;padding-inline:10px;border-radius:15px;background:linear-gradient(145deg,#2b84e6,#0754a0);box-shadow:inset 0 1px 0 #ffffff40,0 8px 18px #0754a066;font-weight:800;font-size:25px;letter-spacing:-.6px}
.carousel-caption>div{min-width:0;overflow:hidden;padding-block:2px}
.carousel-kicker{display:block;font-size:9px;font-weight:700;letter-spacing:1.4px;color:#b9d6f3;margin-bottom:2px}
.carousel-caption strong{display:block;font-size:20px;line-height:1.3;letter-spacing:-.4px;text-wrap:balance}
.carousel-ordinal{margin-left:auto;white-space:nowrap;font-size:11px;font-weight:700;color:#d6e8fa;font-variant-numeric:tabular-nums}

/* Story-style progress: one segment per category, the active one fills while it is shown. */
.carousel-progress{position:absolute;z-index:4;left:22px;right:22px;bottom:16px;display:flex;gap:6px}
.carousel-progress button{flex:1;height:14px;padding:5px 0;margin:0;border:0;background:none;cursor:pointer}
.carousel-progress span{display:block;position:relative;height:4px;border-radius:4px;background:#ffffff47;overflow:hidden}
.carousel-progress span::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:left center}
.carousel-progress .is-done span::after{transform:scaleX(1)}
.carousel-progress .is-progress span::after{animation:uda-progress var(--carousel-duration,2s) linear forwards}
.hero-carousel:not([data-autoplay=true]) .carousel-progress .is-progress span::after{animation-play-state:paused}
.carousel-progress button:hover span{background:#ffffff80}
.carousel-progress button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.carousel-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Cinematic transition: the incoming photo wipes in behind a light edge while the outgoing one recedes. */
.is-active .carousel-media{animation:uda-wipe-next var(--carousel-transition,.8s) cubic-bezier(.77,0,.18,1) both}
[data-direction=prev] .is-active .carousel-media{animation-name:uda-wipe-prev}
.is-active .carousel-media::after{content:'';position:absolute;top:-5%;bottom:-5%;left:0;width:3px;margin-left:-1px;z-index:2;pointer-events:none;background:linear-gradient(#fff0,#fff 30%,#dff0ff 70%,#fff0);box-shadow:0 0 22px 6px #6db7ff8c,0 0 60px 18px #0754a040;animation:uda-sweep-next var(--carousel-transition,.8s) cubic-bezier(.77,0,.18,1) both}
[data-direction=prev] .is-active .carousel-media::after{animation-name:uda-sweep-prev}
.is-active .hero-photo{animation:uda-kenburns calc(var(--carousel-duration,2s) + var(--carousel-transition,.8s)) cubic-bezier(.22,.61,.36,1) both}
[data-direction=prev] .is-active .hero-photo{animation-name:uda-kenburns-prev}
.is-leaving .hero-photo{transform:scale(1.02)}
.is-leaving .carousel-media{animation:uda-leave-next var(--carousel-transition,.8s) cubic-bezier(.77,0,.18,1) both}
[data-direction=prev] .is-leaving .carousel-media{animation-name:uda-leave-prev}
.is-leaving .carousel-caption{visibility:hidden}
.is-active .carousel-caption{animation:uda-caption-in .9s .2s cubic-bezier(.2,.8,.2,1) both}
.is-active .carousel-category{animation:uda-badge-in .9s .32s cubic-bezier(.2,.9,.25,1.15) both}
.is-active .carousel-caption strong,.is-active .carousel-kicker{animation:uda-text-rise .85s .42s cubic-bezier(.2,.8,.2,1) both}
.is-active .carousel-ordinal{animation:uda-fade-in .6s .6s ease both}
@keyframes uda-wipe-next{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes uda-wipe-prev{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes uda-sweep-next{0%{left:100%;opacity:1}85%{opacity:1}100%{left:0;opacity:0}}
@keyframes uda-sweep-prev{0%{left:0;opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes uda-kenburns{from{transform:scale(1.16) translateX(2.5%)}to{transform:scale(1.02) translateX(0)}}
@keyframes uda-kenburns-prev{from{transform:scale(1.16) translateX(-2.5%)}to{transform:scale(1.02) translateX(0)}}
@keyframes uda-leave-next{to{transform:translateX(-14%) scale(.94);filter:brightness(.45) saturate(.7)}}
@keyframes uda-leave-prev{to{transform:translateX(14%) scale(.94);filter:brightness(.45) saturate(.7)}}
@keyframes uda-caption-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes uda-badge-in{from{opacity:0;transform:perspective(420px) rotateY(-85deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes uda-text-rise{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes uda-fade-in{from{opacity:0}to{opacity:1}}
@keyframes uda-progress{to{transform:scaleX(1)}}

@media(max-width:800px){.hero-carousel{border-radius:24px}}
@media(max-width:540px){
  .hero-carousel{border-radius:22px}
  .carousel-topline{top:14px;left:14px;right:14px;gap:8px}
  .carousel-topline>span:first-child{font-size:8px;padding:7px 10px;letter-spacing:.9px}
  .carousel-concept{font-size:8px}
  .carousel-caption{left:12px;right:12px;bottom:30px;gap:11px;padding:10px 14px 10px 10px;border-radius:16px}
  .carousel-category{min-width:46px;height:46px;font-size:21px;border-radius:12px}
  .carousel-kicker{font-size:8px}
  .carousel-caption strong{font-size:16px}
  .carousel-ordinal{display:none}
  .carousel-progress{left:14px;right:14px;bottom:10px;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .carousel-slide *,.carousel-slide *::after{animation:none!important}
  .carousel-slide.is-leaving{visibility:hidden}
}