/* Destination Spotlight on the night band: a cinematic photo stage with story bars and a thumbnail rail, then a video reel. */
@keyframes dmo-stage-bar { to { transform: scaleX(1); } }
@keyframes dmo-stage-drift { from { transform: scale(1); } to { transform: scale(1.07); } }

.dmo-stage { --dmo-stage-interval: 7s; display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 16px; }
.dmo-stage.is-single { grid-template-columns: minmax(0, 1fr); }

.dmo-stage-main {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; touch-action: pan-y;
    border-radius: 28px; background: #0f1e33;
    box-shadow: 0 0 0 1px #ffffff14, 0 48px 90px -48px #000000d9;
}
/* Shade the top and bottom edges so bars, caption and controls stay legible on any image. */
.dmo-stage-main::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, #050b14a6 0, #050b1400 24%, #050b1400 58%, #050b14cc 100%);
}

.dmo-stage-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.035); transition: opacity .9s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.dmo-stage-slide.is-active { z-index: 1; opacity: 1; transform: none; }
.dmo-stage-media { position: absolute; inset: 0; }
.dmo-stage-slide.is-active .dmo-stage-media { animation: dmo-stage-drift 14s ease-out both; }
.dmo-stage-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Banners often carry their own text, so the original is contained and a blurred copy fills the frame. */
.dmo-stage-media > .dmo-media-backdrop { object-fit: cover; filter: blur(28px) brightness(.5) saturate(1.15); transform: scale(1.18); visibility: hidden; }
.dmo-stage-media.is-media-loaded > .dmo-media-backdrop { visibility: visible; }
.dmo-stage-media.is-media-loaded > .dmo-media-fallback,
.dmo-stage-media.is-image-missing > .dmo-media-backdrop,
.dmo-stage-media > img[hidden] { display: none; }
.dmo-stage .dmo-media-fallback {
    display: flex; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: radial-gradient(ellipse at 30% 20%, #1c3554 0, #0f1e33 70%); color: #6f86a1;
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.dmo-stage .dmo-media-fallback svg { width: 56px; height: 46px; opacity: .7; }

.dmo-stage-link { position: absolute; inset: 0; z-index: 2; }
.dmo-stage-bars { position: absolute; top: 20px; inset-inline: 24px; z-index: 3; display: flex; gap: 6px; pointer-events: none; }
.dmo-stage-bars i { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: #ffffff38; }
.dmo-stage-bars i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .dmo-stage-bars i::after { transform-origin: right; }
.dmo-stage-bars i.is-done::after { transform: scaleX(1); }
.dmo-stage-bars i.is-active::after { animation: dmo-stage-bar var(--dmo-stage-interval) linear forwards; }
.dmo-stage.is-paused .dmo-stage-bars i.is-active::after { animation-play-state: paused; }

.dmo-stage-caption { position: absolute; bottom: 24px; inset-inline-start: 28px; z-index: 3; display: flex; align-items: baseline; gap: 18px; color: #fff; pointer-events: none; }
.dmo-stage-count { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: #ffffff99; font-variant-numeric: tabular-nums; }
.dmo-stage-count b { font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.dmo-stage-kind { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #ffffffd9; }
.dmo-stage-kind:not(:empty)::before { content: ''; display: inline-block; width: 28px; height: 1px; margin-inline-end: 12px; vertical-align: middle; background: #ffffff80; }

.dmo-stage-controls { position: absolute; bottom: 20px; inset-inline-end: 22px; z-index: 4; display: flex; gap: 8px; }
.dmo-stage-btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff3d; border-radius: 50%;
    background: #0b162659; color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, border-color .2s;
}
.dmo-stage-btn:hover { background: #ffffff2e; border-color: #ffffff73; }
.dmo-stage-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dmo-stage-btn .icon-play { fill: currentColor; stroke: none; }
[dir="rtl"] .dmo-stage-btn:not(.dmo-stage-toggle) svg { transform: scaleX(-1); }
.dmo-stage-toggle .icon-play, .dmo-stage-toggle[aria-pressed="true"] .icon-pause { display: none; }
.dmo-stage-toggle[aria-pressed="true"] .icon-play { display: block; }

/* The rail matches the stage height and scrolls inside it. */
.dmo-stage-rail { position: relative; min-width: 0; }
.dmo-stage-track {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; mask-image: linear-gradient(180deg, #000 82%, #0000);
}
.dmo-stage-track::-webkit-scrollbar { display: none; }
.dmo-stage-thumb {
    position: relative; flex: 0 0 auto; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 0; border-radius: 16px;
    background: #15263d; cursor: pointer; opacity: .5; filter: saturate(.6); transition: opacity .35s, filter .35s, box-shadow .35s;
}
.dmo-stage-thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* Shown only when the thumbnail image fails, which then hides itself. */
.dmo-stage-thumb-num {
    position: absolute; inset: 0; display: grid; place-items: center; color: #6f86a1;
    background: radial-gradient(ellipse at 30% 20%, #1c3554 0, #0f1e33 75%); font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 20px; font-weight: 600;
}
.dmo-stage-thumb:hover { opacity: .85; filter: none; }
.dmo-stage-thumb:hover img { transform: scale(1.06); }
.dmo-stage-thumb[aria-current="true"] { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px #fff, 0 12px 26px -14px #000; }
.dmo-stage :is(a, button):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.dmo-stage-link:focus-visible { outline-offset: -6px; border-radius: 28px; }

/* Video reel: its own row under the photo stage. YouTube's 4:3 thumbnails are cropped to 16:9, which trims their letterbox. */
.dmo-reel { margin-top: 40px; }
.dmo-reel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dmo-reel-title { display: inline-flex; align-items: center; gap: 10px; color: #eef0fb; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.dmo-reel-title svg { width: 14px; height: 14px; fill: #ff8990; }
.dmo-reel-title em { padding-inline-start: 12px; border-inline-start: 1px solid #ffffff33; color: #93a3b6; font-family: 'Space Grotesk', 'Inter', sans-serif; font-style: normal; letter-spacing: .04em; }
.dmo-reel-nav { display: flex; gap: 8px; }
.dmo-reel-nav .dmo-stage-btn:disabled { opacity: .3; cursor: default; }
.dmo-reel.is-static .dmo-reel-nav { visibility: hidden; }
.dmo-reel-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.dmo-reel-track::-webkit-scrollbar { display: none; }
.dmo-reel.is-pair .dmo-reel-track { grid-auto-columns: calc((100% - 16px) / 2); }
.dmo-reel.is-single .dmo-reel-track { grid-auto-columns: min(100%, 560px); }
/* Without photos the reel follows the header directly, and a lone video takes the full stage frame. */
.dmo-spotlight-header + .dmo-reel { margin-top: 0; }
.dmo-spotlight-header + .dmo-reel.is-single .dmo-reel-track { grid-auto-columns: 100%; }
.dmo-spotlight-header + .dmo-reel.is-single .dmo-reel-card { border-radius: 28px; box-shadow: 0 0 0 1px #ffffff14, 0 48px 90px -48px #000000d9; }
.dmo-spotlight-header + .dmo-reel.is-single .dmo-reel-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; box-shadow: 0 0 0 10px #ffffff0f; }
.dmo-spotlight-header + .dmo-reel.is-single .dmo-reel-play svg { width: 30px; height: 30px; }
.dmo-spotlight-header + .dmo-reel.is-single .dmo-reel-index { display: none; }
.dmo-reel-card {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; border-radius: 20px; scroll-snap-align: start;
    background: radial-gradient(ellipse at 30% 20%, #1c3554 0, #0f1e33 75%); cursor: pointer; box-shadow: 0 0 0 1px #ffffff14;
}
.dmo-reel-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.dmo-reel-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #050b1400 45%, #050b14b3 100%); }
.dmo-reel-play {
    position: absolute; inset: 50% auto auto 50%; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
    background: #ffffff26; border: 1px solid #ffffff59; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), background .25s;
}
.dmo-reel-play svg { width: 20px; height: 20px; margin-inline-start: 3px; fill: #fff; }
.dmo-reel-index { position: absolute; bottom: 14px; inset-inline-start: 16px; z-index: 1; color: #fff; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dmo-reel-card:is(:hover, :focus-visible) img { transform: scale(1.06); }
.dmo-reel-card:is(:hover, :focus-visible) .dmo-reel-play { transform: scale(1.12); background: #fc5b62; border-color: #fc5b62; }
.dmo-reel-card:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

@media (max-width: 991px) {
    .dmo-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .dmo-stage-track { position: relative; inset: auto; flex-direction: row; overflow: auto hidden; scroll-snap-type: x mandatory; mask-image: linear-gradient(90deg, #000 85%, #0000); }
    .dmo-stage-thumb { width: 132px; scroll-snap-align: start; border-radius: 14px; }
    .dmo-reel-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 575px) {
    .dmo-stage-main { aspect-ratio: 4 / 3; border-radius: 22px; }
    .dmo-stage-bars { top: 14px; inset-inline: 16px; gap: 4px; }
    .dmo-stage-caption { bottom: 18px; inset-inline-start: 18px; gap: 12px; }
    .dmo-stage-count b { font-size: 22px; }
    .dmo-stage-kind:not(:empty)::before { width: 16px; margin-inline-end: 8px; }
    .dmo-stage-controls { bottom: 14px; inset-inline-end: 14px; gap: 6px; }
    .dmo-stage-btn { width: 40px; height: 40px; }
    .dmo-stage-thumb { width: 112px; }
    .dmo-reel { margin-top: 28px; }
    .dmo-reel-track, .dmo-reel.is-pair .dmo-reel-track { grid-auto-columns: 78%; gap: 12px; }
    .dmo-reel.is-single .dmo-reel-track { grid-auto-columns: 100%; }
    .dmo-reel-card { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .dmo-stage-slide, .dmo-stage-thumb, .dmo-stage-thumb img, .dmo-reel-card img, .dmo-reel-play { transition: none; }
    .dmo-stage-slide { transform: none; }
    .dmo-stage-slide.is-active .dmo-stage-media { animation: none; }
}