/* HERO — design reference: 833 × 768 */

.hero {
    position: relative;
    isolation: isolate;
    min-height: 768px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--hero-text);
    /*background: var(--hero-background);*/
    text-align: center;
    background: linear-gradient(179.91deg, #05080f 44.51%, var(--background) 81.27%, var(--footer-blue) 97.24%);
    padding-bottom: 20px;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 550px;
    background:
        linear-gradient(to bottom, transparent 35%, color-mix(in oklab, var(--hero-background) 35%, transparent) 62%, var(--hero-background) 100%),
        url('../images/hero-bg.png') center top / cover no-repeat;
    pointer-events: none;
}

.hero-media-layer {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-background-media {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: center;
}

.hero-background-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(4, 8, 18, 0.72) 0%,
        rgba(4, 8, 18, 0.48) 45%,
        rgba(4, 8, 18, 0.18) 75%,
        rgba(4, 8, 18, 0.42) 100%
    );
}

.hero-inner {
    width: min(1200px, 100%);
    margin: 0 auto;
    padding: 240px 20px 0;
    position: relative;
    z-index: 1;
}

.hero h1 {
    margin: 0 auto;
    font-family: 'Oswald';
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
}

.hero-title-top { display: block; font-size: 50px; letter-spacing: 5px; }
.hero-title-name { display: block; font-size: 64px; letter-spacing: 4px; }

.hero .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 7px auto 7px;
    color: var(--hero-white);
    font-family: var(--hero-condensed-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.eyebrow::before, .eyebrow::after {
    content: "";
    width: 20px;
    height: 1px;
    background: color-mix(in oklab, var(--hero-gold) 50%, transparent);
}

.hero-orchestra-logo { width: 274px; max-width: 80%; height: 49px; object-fit: contain; margin: 0 auto; }

.trailer-button {
    position: absolute;
    right: 0px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    color: var(--hero-text);
    background: transparent;
    border: 0;
    font-family: 'Roboto';
    font-size: 18px;

    line-height: 1.4;
    cursor: pointer;
}

.trailer-play {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid currentColor;
    border-radius: 50%;
}
.trailer-play svg { width: 16px; height: 16px; margin-left: 3px; fill: currentColor; }
.trailer-button:hover { color: var(--hero-white); }
.hero a:focus-visible, .trailer-button:focus-visible, .header a:focus-visible {
    outline: 2px solid var(--hero-gold);
    outline-offset: 5px;
}

.hero-anniversary {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 16px;
    margin-top: 22px;
    background: linear-gradient(84.93deg, rgba(139, 10, 10, 0) -3.08%, #8b0a0a 28.42%, #8b0a0a 68.72%, rgba(139, 10, 10, 0) 97.29%);
}

.hero-anniversary h3 {
    font-family: "Oswald";
    font-weight: 500;
    font-size: 32px;
    line-height: 94%;
    text-align: center;
    text-transform: uppercase;
    background: radial-gradient(67.15% 72.15% at 50% 50%, #d9e6f2 0%, #d4af37 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0;
    margin: 12px;
}

.hero-program {
    position: relative;
    z-index: 1;
    width: min(700px, calc(100% - 32px));
    margin: 32px auto 60px;
}

.hero .hero-program-list {
    margin: 0;
    color: var(--hero-white);
    font-family: var(--hero-condensed-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
}

.hero-program-link {
    display: table;
    margin: 30px auto 25px;
    color: var(--hero-link);
    font-family: var(--hero-condensed-font);
    line-height: 24px;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 400;
    font-size: 28px;
    text-align: center;
}

.hero-ticket-button {
    --ticket-cta-animation: ticket-cta-gradient-angle linear infinite;
    --ticket-cta-duration: 3s;
    --ticket-cta-shadow-size: 2px;
    --ticket-cta-bg: #000;
    --ticket-cta-bg-subtle: #1a1818;
    --ticket-cta-fg: #fff;
    --ticket-cta-highlight: blue;
    --ticket-cta-highlight-subtle: #8484ff;
    --ticket-cta-gradient-angle-offset: 0deg;
    --ticket-cta-gradient-percent: 5%;
    --ticket-cta-gradient-shine: #fff;
    --ticket-cta-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    isolation: isolate;
    position: relative;
    overflow: hidden;
    min-width: 216px;
    margin-top: 28px;
    border: 1px solid transparent;
    border-radius: 17px;
    color: var(--ticket-cta-fg);
    background:
        linear-gradient(var(--ticket-cta-bg), var(--ticket-cta-bg)) padding-box,
        conic-gradient(
            from calc(var(--ticket-cta-gradient-angle) - var(--ticket-cta-gradient-angle-offset)),
            transparent,
            var(--ticket-cta-highlight) var(--ticket-cta-gradient-percent),
            var(--ticket-cta-gradient-shine) calc(var(--ticket-cta-gradient-percent) * 2),
            var(--ticket-cta-highlight) calc(var(--ticket-cta-gradient-percent) * 3),
            transparent calc(var(--ticket-cta-gradient-percent) * 4)
        ) border-box;
    box-shadow: inset 0 0 0 1px var(--ticket-cta-bg-subtle);
    transition:
        filter var(--ticket-cta-transition),
        transform var(--ticket-cta-transition),
        box-shadow var(--ticket-cta-transition),
        --ticket-cta-gradient-angle-offset var(--ticket-cta-transition),
        --ticket-cta-gradient-percent var(--ticket-cta-transition),
        --ticket-cta-gradient-shine var(--ticket-cta-transition);
}

@property --ticket-cta-gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --ticket-cta-gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --ticket-cta-gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --ticket-cta-gradient-shine {
    syntax: "<color>";
    initial-value: #fff;
    inherits: false;
}

.hero-ticket-button::before,
.hero-ticket-button::after,
.hero-ticket-button__label::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    pointer-events: none;
}

.hero-ticket-button::before {
    --size: calc(100% - var(--ticket-cta-shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--position) var(--position), #fff calc(var(--position) / 4), transparent 0)
        padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(from calc(var(--ticket-cta-gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
    opacity: 0.4;
}

.hero-ticket-button::after {
    --ticket-cta-animation: ticket-cta-shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(-50deg, transparent, var(--ticket-cta-highlight), transparent);
    mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
    clip-path: inset(0 round 360px);
    opacity: 0.6;
}

.hero-ticket-button__label {
    position: relative;
    z-index: 1;
}

.hero-ticket-button__label::before {
    --size: calc(100% + 8rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--ticket-cta-highlight);
    opacity: 0;
}

.hero-ticket-button__icon {
    position: relative;
    z-index: 1;
}

.hero-ticket-button,
.hero-ticket-button::before,
.hero-ticket-button::after {
    animation:
        var(--ticket-cta-animation) var(--ticket-cta-duration),
        var(--ticket-cta-animation) calc(var(--ticket-cta-duration) / 0.4) reverse paused;
    animation-composition: add;
}

.hero-ticket-button__label::before {
    animation: ticket-cta-breathe calc(var(--ticket-cta-duration) * 1.5) linear infinite;
}

.hero-ticket-button:is(:hover, :focus-visible) {
    --ticket-cta-gradient-percent: 20%;
    --ticket-cta-gradient-angle-offset: 95deg;
    --ticket-cta-gradient-shine: var(--ticket-cta-highlight-subtle);
}

.hero-ticket-button:is(:hover, :focus-visible),
.hero-ticket-button:is(:hover, :focus-visible)::before,
.hero-ticket-button:is(:hover, :focus-visible)::after {
    animation-play-state: running;
}

.hero-ticket-button:is(:hover, :focus-visible) .hero-ticket-button__label::before {
    opacity: 1;
}

.hero-ticket-button:active {
    translate: 0 1px;
}

@keyframes ticket-cta-gradient-angle {
    to { --ticket-cta-gradient-angle: 360deg; }
}

@keyframes ticket-cta-shimmer {
    to { rotate: 360deg; }
}

@keyframes ticket-cta-breathe {
    50% { scale: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ticket-button,
    .hero-ticket-button::before,
    .hero-ticket-button::after,
    .hero-ticket-button__label::before {
        animation: none;
        transition: none;
    }
}

.hero-trailer-dialog {
    width: min(1100px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100% - 32px);
    padding: 0;
    overflow: visible;
    border: 0;
    color: var(--hero-white);
    background: transparent;
}

.hero-trailer-dialog::backdrop {
    background: rgba(0, 0, 0, 0.88);
}

.hero-trailer-dialog.is-opening {
    animation: hero-trailer-open 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-trailer-dialog.is-closing {
    animation: hero-trailer-close 420ms cubic-bezier(0.65, 0, 0.78, 0) both;
}

.hero-trailer-dialog.is-opening::backdrop {
    animation: hero-trailer-backdrop-in 480ms ease both;
}

.hero-trailer-dialog.is-closing::backdrop {
    animation: hero-trailer-backdrop-out 420ms ease both;
}

.hero-trailer-dialog.is-opening .hero-trailer-dialog__content {
    animation: hero-trailer-reveal 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-trailer-dialog.is-closing .hero-trailer-dialog__content {
    animation: hero-trailer-collapse 420ms cubic-bezier(0.65, 0, 0.78, 0) both;
}

@keyframes hero-trailer-open {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hero-trailer-close {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hero-trailer-backdrop-in {
    from { background: rgba(0, 0, 0, 0); }
    to { background: rgba(0, 0, 0, 0.88); }
}

@keyframes hero-trailer-backdrop-out {
    from { background: rgba(0, 0, 0, 0.88); }
    to { background: rgba(0, 0, 0, 0); }
}

@keyframes hero-trailer-reveal {
    from {
        clip-path: inset(44% 44% round 18px);
        filter: blur(12px);
        transform: scale(0.94);
    }
    to {
        clip-path: inset(0 round 0);
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes hero-trailer-collapse {
    from {
        clip-path: inset(0 round 0);
        filter: blur(0);
        transform: scale(1);
    }
    to {
        clip-path: inset(44% 44% round 18px);
        filter: blur(12px);
        transform: scale(0.94);
    }
}

.hero-trailer-dialog__content {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

@media (prefers-reduced-motion: reduce) {
    .hero-trailer-dialog.is-opening,
    .hero-trailer-dialog.is-closing,
    .hero-trailer-dialog.is-opening::backdrop,
    .hero-trailer-dialog.is-closing::backdrop,
    .hero-trailer-dialog.is-opening .hero-trailer-dialog__content,
    .hero-trailer-dialog.is-closing .hero-trailer-dialog__content {
        animation-duration: 1ms;
    }
}

.hero-trailer-dialog__player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.hero-trailer-dialog__player[hidden] {
    display: none;
}

.hero-trailer-dialog__close {
    position: absolute;
    z-index: 1;
    top: -50px;
    right: 1px;
    /*display: grid;*/
    width: 42px;
    max-width:42px;
    height: 42px;
    place-items: center;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
}

.hero-trailer-dialog__close:hover,
.hero-trailer-dialog__close:focus-visible {
    background: rgba(0, 0, 0, 0.95);
}

.hero-trailer-dialog__close:focus-visible {
    outline: 2px solid var(--hero-gold);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .hero-trailer-dialog {
        width: calc(100% - 24px);
    }

    .hero-trailer-dialog__content {
        aspect-ratio: 16 / 10;
    }
}

/* DESKTOP */

@media (min-width: 1100px) {
    .hero { min-height: 900px; }
    .hero::before { height: 90vh; }
    .hero-inner { padding-top: 50vh; }
    .hero-title-top {
        font-size: 90px;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-align: center;
        color: #d9e6f2;
    }
    .hero-title-name {
        font-size: 120px;
        font-weight: 600;
        text-align: center;
        color: #d9e6f2;
    }
    .hero-orchestra-logo {
        width: 500px;
        height: auto;
        margin-top: 20px;
    }
    .hero-anniversary { margin-top: 22px; font-size: 32px; line-height: 32px; }
    .hero-program { margin-top: 38px; }
    .hero .hero-program-list {
        font-weight: 400;
        font-size: 26px;
        text-align: center;
        color: #fff;
        line-height: 36px;
    }
}

/* MOBILE */

@media (max-width: 760px) {
    .hero { min-height: 768px; }
    .hero::before { height: 510px; }
    .hero-inner { padding: 230px 16px 0; }
    .hero-title-top { font-size: 38px; letter-spacing: 3px; }
    .hero-title-name { font-size: 48px; letter-spacing: 2px; }
    .hero-orchestra-logo { width: 250px; height: 46px; }
    .trailer-button { position: static; margin-top: 14px; }
    .hero-anniversary { margin-top: 18px; font-size: 16px; line-height: 23px; }
    .hero-program { margin-top: 24px; margin-bottom: 40px; }
    .hero .hero-program-list { font-size: 15px; line-height: 23px; }
    .hero-program-list br { display: none; }
}