:root {
    color-scheme: dark;
    --color-background-cinema: #121313;
    --color-surface-cinema: rgba(252, 255, 247, 0.08);
    --color-surface-cinema-strong: rgba(252, 255, 247, 0.12);
    --color-text-popcorn: #FCFFF7;
    --color-text-muted: rgba(252, 255, 247, 0.70);
    --color-accent-marquee-red: #E51B00;
    --color-accent-popcorn-yellow: #FFE900;
    --color-button-border-default: rgba(252, 255, 247, 0.24);
    --color-button-border-disabled: rgba(252, 255, 247, 0.12);
    --color-button-disabled-bg: rgba(252, 255, 247, 0.08);
    --color-button-disabled-text: rgba(252, 255, 247, 0.42);
    --color-button-shadow: rgba(0, 0, 0, 0.32);
    --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-button: var(--font-family-base);
    --font-size-button: 0.95rem;
    --font-weight-button: 700;
    --font-line-height-button: 1;
    --font-letter-spacing-button: 0;
    --size-button-height: 44px;
    --size-button-padding-x: 16px;
    --radius-button: 8px;
    --radius-panel: 8px;
    --motion-button: 160ms ease;
    --layout-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--color-background-cinema);
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 233, 0, 0.12), transparent 30rem),
        linear-gradient(180deg, rgba(229, 27, 0, 0.12), transparent 22rem),
        var(--color-background-cinema);
    color: var(--color-text-popcorn);
    font-family: var(--font-family-base);
}

button,
input,
a {
    font: inherit;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.popcorn-poster-link {
    display: block;
    color: inherit;
    cursor: zoom-in;
    text-decoration: none;
}

.popcorn-poster-link img {
    width: 100%;
    height: auto;
}

.popcorn-page {
    min-height: 100vh;
    padding: max(20px, env(safe-area-inset-top)) clamp(14px, 4vw, 44px) max(36px, env(safe-area-inset-bottom));
}

.popcorn-shell {
    width: min(100%, var(--layout-width));
    margin: 0 auto;
}

.popcorn-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(24px, 5vw, 56px);
}

.popcorn-brand {
    color: var(--color-accent-popcorn-yellow);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
}

.popcorn-breadcrumbs {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-bottom: 20px;
    color: var(--color-accent-popcorn-yellow);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.popcorn-breadcrumbs a,
.popcorn-breadcrumbs span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 2px 0;
    color: inherit;
    line-height: 1;
    text-decoration: none;
}

.popcorn-breadcrumbs a {
    cursor: pointer;
    pointer-events: auto;
}

.popcorn-breadcrumbs a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.popcorn-breadcrumbs span[aria-hidden="true"] {
    padding-inline: 1px;
    color: rgba(255, 233, 0, 0.48);
    pointer-events: none;
}

.popcorn-landing-logo {
    width: clamp(96px, 18vw, 150px);
}

.popcorn-landing-logo__button {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.popcorn-landing-logo__button:disabled {
    cursor: default;
}

.popcorn-landing-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.popcorn-nav__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.popcorn-kicker {
    margin: 0 0 8px;
    color: var(--color-accent-marquee-red);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.popcorn-title {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(2.4rem, 8vw, 6.2rem);
    line-height: 0.9;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.popcorn-text {
    max-width: 680px;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.55;
}

.oamn-button,
.oamn-icon-button {
    display: inline-flex;
    min-height: var(--size-button-height);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-accent-marquee-red);
    background: var(--color-accent-marquee-red);
    color: var(--color-text-popcorn);
    font-family: var(--font-family-button);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    letter-spacing: var(--font-letter-spacing-button);
    line-height: var(--font-line-height-button);
    text-decoration: none;
    box-shadow: 0 10px 24px var(--color-button-shadow);
    transition:
        background-color var(--motion-button),
        border-color var(--motion-button),
        color var(--motion-button),
        box-shadow var(--motion-button),
        transform var(--motion-button);
}

.oamn-button {
    gap: 8px;
    padding: 0 var(--size-button-padding-x);
    border-radius: var(--radius-button);
}

.oamn-button__icon {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    stroke-width: 2.2;
}

.oamn-button__icon--paypal {
    background-color: currentColor;
    mask: url("/shared/paypal.svg") center / contain no-repeat;
    -webkit-mask: url("/shared/paypal.svg") center / contain no-repeat;
}

.oamn-icon-button {
    width: var(--size-button-height);
    border-radius: 50%;
    cursor: pointer;
}

.oamn-button--secondary {
    border-color: var(--color-button-border-default);
    background: transparent;
    color: var(--color-text-popcorn);
}

.oamn-button:hover,
.oamn-icon-button:hover {
    border-color: var(--color-accent-popcorn-yellow);
    background: var(--color-accent-popcorn-yellow);
    color: var(--color-background-cinema);
    box-shadow: 0 14px 30px rgba(255, 233, 0, 0.18), 0 10px 24px var(--color-button-shadow);
}

.oamn-button:active,
.oamn-icon-button:active {
    border-color: var(--color-accent-popcorn-yellow);
    background: var(--color-accent-marquee-red);
    color: var(--color-text-popcorn);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34);
    transform: translateY(1px);
}

.oamn-button.is-active,
.oamn-icon-button.is-active,
.oamn-button[aria-pressed="true"],
.oamn-icon-button[aria-pressed="true"],
.oamn-button[aria-current="page"],
.oamn-icon-button[aria-current="page"] {
    border-color: var(--color-accent-popcorn-yellow);
    background: var(--color-background-cinema);
    color: var(--color-accent-popcorn-yellow);
}

.oamn-button:focus-visible,
.oamn-icon-button:focus-visible,
.popcorn-focus:focus-visible {
    outline: 3px solid var(--color-accent-popcorn-yellow);
    outline-offset: 3px;
}

.oamn-button:disabled,
.oamn-icon-button:disabled,
.oamn-button[aria-disabled="true"],
.oamn-icon-button[aria-disabled="true"] {
    border-color: var(--color-button-border-disabled);
    background: var(--color-button-disabled-bg);
    color: var(--color-button-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.popcorn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: clamp(44px, 8vw, 88px);
    padding-top: 20px;
    border-top: 1px solid var(--color-button-border-default);
    color: var(--color-text-muted);
}

@media (max-width: 820px) {
    .popcorn-landing-logo {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 720px) {
    .popcorn-nav,
    .popcorn-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .popcorn-nav__links {
        justify-content: flex-start;
    }
}