/* The deck measures every slide so rotation never moves the content below it. */
@layer components {
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .hero--carousel { display: block; padding: 0; }
    .hero__deck { display: grid; min-height: inherit; }
    .hero__slide { grid-area: 1 / 1; position: relative; isolation: isolate; min-width: 0; min-height: inherit; display: flex; flex-direction: column; justify-content: center; padding: 110px 5.1% 135px; visibility: hidden; opacity: 0; pointer-events: none; background: var(--stage); transition: opacity .6s ease, visibility .6s; }
    .hero__slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
    .hero__media picture, .hero__image { width: 100%; height: 100%; }
    .hero__image { object-fit: cover; object-position: center; }
    .hero__video { position: absolute; inset: 0; }
    .hero__title { font-size: clamp(60px, 6.8vw, 112px); line-height: 1.02; letter-spacing: -.07em; font-weight: 550; text-wrap: balance; }
    .hero__title > span { color: var(--headline-secondary); }
    .hero__ambience { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
    .hero__ambience i { position: absolute; width: 3px; height: 3px; left: 64%; top: 10%; border-radius: 50%; background: var(--particle-color); opacity: .35; animation: var(--particle-animation); }
    .hero__ambience i:nth-child(2n) { left: 74%; top: 28%; animation-delay: -4s; }
    .hero__ambience i:nth-child(3n) { left: 85%; top: 45%; animation-delay: -8s; }
    .hero__ambience i:nth-child(4n) { left: 94%; top: 64%; animation-delay: -12s; }
    .hero__ambience i:nth-child(5n) { left: 55%; top: 72%; animation-delay: -6s; }
    .hero__slide:not(.hero__slide--brand) .hero__content { max-width: 760px; }
    .hero__slide:not(.hero__slide--brand) .hero__title { font-size: clamp(48px, 5.3vw, 83px); line-height: 1.08; }
    .hero__slide--center .hero__content { margin-inline: auto; text-align: center; }
    .hero__slide--center .hero__description { margin-inline: auto; }
    .hero__slide--center .hero__actions { justify-content: center; }
    .hero__caption { position: absolute; bottom: 88px; left: 5.1%; right: 5.1%; font-size: 9px; letter-spacing: .18em; color: var(--stage-muted); }
    .hero__controls { position: absolute; z-index: 3; bottom: 25px; right: 5.1%; left: 5.1%; display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
    .hero__control, .hero__dot { border: 1px solid #ffffff50; color: #fff; background: #09132480; min-width: 42px; min-height: 42px; border-radius: 50%; display: inline-grid; place-items: center; }
    .hero__control { font-size: 12px; }
    .hero__control:hover, .hero__dot:hover { background: #ffffff25; }
    .hero__controls :focus-visible { outline: 2px solid white; outline-offset: 3px; }
    .hero__dots { display: flex; align-items: center; }
    .hero__dot { border: 0; background: transparent; min-width: 30px; }
    .hero__dot span { width: 6px; height: 6px; border-radius: 10px; background: #ffffff70; transition: width .25s, background .25s; }
    .hero__dot[aria-current] span { width: 22px; background: #fff; }
    .hero__controls .motion-button { margin-left: 7px; color: #fff; border-color: #ffffff50; background: #09132480; min-height: 42px; }
    .hero-fallback { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; background: var(--panel); }
    .hero-fallback a { color: var(--accent); }
}
@layer tokens {
    /* These tokens belong to the slide, independent of the chosen site theme. */
    .hero__slide:not(.hero__slide--brand) {
        --stage: #11232a; --on-stage: #ffffff; --headline-secondary: #e1c895;
        --stage-muted: #e0e3df; --stage-dim: #cbd8d7; --stage-line: #dbe8e755;
        --signal: #e1c895; --grid-opacity: 0;
        --hero-shade: linear-gradient(90deg, #061321f0 0%, #0a1725de 25%, #10212b99 52%, #12252c12 100%);
    }
    .hero__slide.hero__slide--editorial { --headline-secondary: #b8d2ff; --signal: #b8d2ff; }
    .hero__slide.hero__slide--valentine { --headline-secondary: #f4c5ca; --signal: #f4c5ca; }
    .hero__slide.hero__slide--carnival { --headline-secondary: #e6c9ff; --signal: #e6c9ff; }
    .hero__slide.hero__slide--mimosa { --headline-secondary: #f7dc77; --signal: #f7dc77; }
    .hero__ambience--snow { --particle-color: #fff; --particle-animation: hero-snow 16s linear infinite; }
    .hero__ambience--glimmer { --particle-color: #f4d89e; --particle-animation: hero-glimmer 5s ease-in-out infinite; }
}
@keyframes hero-snow { from { transform: translate(-12px, -170px); } to { transform: translate(12px, 550px); } }
@keyframes hero-glimmer { 0%, 100% { opacity: .1; transform: scale(.5); } 50% { opacity: .6; transform: scale(1.4); } }
@layer responsive {
    .hero.hero--carousel { padding: 0; }
    @media (min-width: 1800px) { .hero__slide { padding-inline: 90px; } }
    @media (max-width: 1100px) { .hero__title { font-size: clamp(60px, 8.1vw, 90px); } }
    @media (max-width: 700px) {
        .hero__slide { padding: 105px 26px 145px; justify-content: flex-start; }
        .hero__title, .hero__slide:not(.hero__slide--brand) .hero__title { font-size: clamp(35px, 8.6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -.06em; overflow-wrap: anywhere; }
        .hero__slide .hero__image { object-position: 63% center; opacity: .55; }
        .hero__slide--brand .hero__image { opacity: 1; }
        .hero__caption { left: 26px; right: 26px; bottom: 91px; font-size: 7px; letter-spacing: .1em; }
        .hero__controls { left: 21px; right: 21px; justify-content: flex-start; bottom: 24px; }
        .hero__controls .motion-button { margin-left: auto; }
        .hero__slide--center .hero__actions { margin-inline: auto; }
    }
    @media (max-width: 374px) { .hero__slide { padding-left: 21px; padding-right: 21px; } .hero__title, .hero__slide:not(.hero__slide--brand) .hero__title { font-size: 34px; } }
    @media (prefers-reduced-motion: reduce) { .hero__slide, .hero__dot span { transition: none; } .hero__slide .hero__media { background: none; } }
}