:root {
    /* 2026 Color Palette (starting from 2025) */
    --black: #000000;
    --white: #ffffff;
    --bone: #ffecd9;
    --hollow: #2e2014;
    --pumpkin: #ff7913;
    --harvest: #f76046;
    --smile: #0d0703;
    --pumpkin-shadow: #ee6a2c;
    --halloween: #ffa25a;
    --blank: #f9f5e9;
    --pumpkin-dark: #bf5b0e;
    --magic: #efbfc5; /* glow color */
    --twilight: #e7e5dc;
    --dark-sky: #2d2d2d;
}

@font-face {
    font-family: 'Caveat Brush';
    src: url('/public/fonts/CaveatBrush-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sunday';
    src: url('/public/fonts/Sunday-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Sunday for big titles and headings, Caveat Brush for body text and movie titles */
body {
    font-family: 'Caveat Brush', cursive;
}

/* Styled outside this file, so these need the extra specificity */
body .nav-title,
body .watched-movies-container h1 {
    font-family: 'Sunday', cursive !important;
}

body .movie-type-breakdown,
body .key-title,
body .key-text,
body .movie-card .movie-title {
    font-family: 'Caveat Brush', cursive !important;
}

body {
    background-color: #120f0f;
    /* Transparent copy of 2026-background.png (lines only) so the color shows through */
    background-image: url('/assets/img/2026-background-lines.png');
    background-repeat: repeat;
    background-size: 525px;
    border: none;
}


@font-face {
    font-family: 'Stella';
    src: url('/public/fonts/Stella.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Anantason';
    src: url('/public/fonts/Anantason-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.nav-links,
.nav-dropdown-toggle,
.mobile-nav-link,
.mobile-nav-title,
.movie-id {
    font-family: 'Caveat Brush', cursive;
}

/* Calendar styles */
.calendar-title {
    margin-bottom: 0;

    h1 {
        /* Sunday runs wider than Stella, so this matches 2025's 8vw title width */
        font-size: 6.2vw;
        margin-bottom: -1rem;
    }

    h2 {
        font-size: 3.5vw;
        margin-bottom: -1rem;
    }
}

.key-legend {
    font-family: 'Caveat Brush', cursive;
    font-size: 3rem;
}

/* No "Key" heading, the instructions speak for themselves */
.key-title {
    display: none;
}

.key-icon {
    height: 0.9em;
}

/* "Click on any movie title..." instructions and the "2026 Release" label in the key */
body .key-content > .key-text,
body .key-item .key-text {
    font-size: 1.15rem;
    line-height: 1.25;
}

@media (max-width: 768px) {
    .calendar-title {
        margin-bottom: 0;
        padding: 0;
    }

    .calendar-title h1 {
        margin-bottom: 0.5rem;
        font-size: 3rem;
    }

    .calendar-title h2 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
}

h1 {
    font-family: 'Sunday', cursive;
    text-transform: uppercase;
    color: var(--white);

    text-shadow: 4px 4px 0px var(--black), 8px 8px 0px var(--smile), 12px 12px 0px var(--dark-sky);
}

h2 {
    font-family: 'Sunday', cursive;
    text-transform: uppercase;
    color: var(--twilight);
    text-shadow: 2px 2px 0px var(--black), 4px 4px 0px var(--smile), 6px 6px 0px var(--dark-sky);
}

.screening-date {
    font-family: 'Caveat Brush', cursive;
}

.movie-metadata {
    font-family: 'Caveat Brush', cursive;
    color: var(--bone);
}

.calendar-header-cell {
    background-color: var(--twilight);
    color: var(--black);
    font-family: 'Caveat Brush', cursive !important;
}

.calendar-cell {
    background-color: var(--blank);
    color: var(--black);
}

.calendar-cell.empty,
.calendar-cell.empty:hover {
    background-color: var(--twilight);
}

/* The blank squares before the 1st take turns with a pumpkin, a candy and the teeth, each
   wiggling in place. The image sits on a pseudo-element so it can rotate without turning
   the cell. */
.calendar-cell.lead-in {
    position: relative;
}

.calendar-cell.lead-in::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    animation: lead-in-wiggle 2.4s ease-in-out infinite;
}

.calendar-cell.lead-in-0::before {
    background-image: url('/assets/img/weening-bw-pumpkin.png');
    background-size: auto 60%;
}

.calendar-cell.lead-in-1::before {
    background-image: url('/assets/img/weening-candee.png');
    background-size: 65% auto;
}

.calendar-cell.lead-in-2::before {
    background-image: url('/assets/img/weening-bite-icon.png');
    background-size: auto 55%;
}

/* The teeth link to the bonus page. They're a real image rather than a background so
   the whole square can be a link. */
.calendar-cell.lead-in-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lead-in-bonus .lead-in-art {
    display: flex;
    width: 55%;
    animation: lead-in-wiggle 2.4s ease-in-out infinite;
    transition: scale 0.3s ease;
}

.lead-in-bonus:hover .lead-in-art,
.lead-in-bonus:focus-visible .lead-in-art {
    scale: 1.1;
}

.lead-in-bonus img {
    width: 100%;
    /* Roughen the teeth's clean vector lines to match the hand-drawn pumpkin and candy */
    filter: url(#lead-in-sketchy);
}

/* Offset each square so they don't wiggle in lockstep */
.calendar-cell.lead-in:nth-child(9)::before {
    animation-delay: -0.8s;
}

.calendar-cell.lead-in:nth-child(10)::before,
.calendar-cell.lead-in:nth-child(10) .lead-in-art {
    animation-delay: -1.6s;
}

@keyframes lead-in-wiggle {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-cell.lead-in::before,
    .lead-in-bonus .lead-in-art {
        animation: none;
    }
}

.calendar-cell:hover {
    background-color: var(--blank);
    border-color: var(--magic);
}

/* Today: a pumpkin-orange ring and glow (with a thin black outline, so it shows on the
   cream calendar and the dark posters alike), lifted over its neighbors so they don't cover
   the glow, and gently pulsing */
.calendar-cell.today {
    --today-glow: var(--pumpkin);
    --today-shadow: 0 0 0 2px var(--black), 0 0 14px 4px var(--today-glow),
        0 0 32px 10px color-mix(in srgb, var(--today-glow) 55%, transparent);
    position: relative;
    z-index: 2;
    background-color: var(--blank);
    border: 3px solid var(--today-glow);
    box-shadow: var(--today-shadow);
}

/* The date badge (on mobile, the day badge) turns orange too */
.calendar-cell.today .date,
.calendar-cell.today .day-info {
    color: var(--black);
    background: var(--today-glow);
    text-shadow: none;
}

.calendar-cell.halloween {
    background-color: var(--halloween);
    color: var(--black);
}

.date {
    color: var(--black) !important;
    font-family: 'Caveat Brush', cursive !important;
}

.weenie-btn {
    background-color: var(--pumpkin);
    color: var(--smile);
    font-family: 'Caveat Brush', cursive !important;
}

.weenie-btn:hover,
.single-movie:hover .weenie-btn {
    background-color: var(--pumpkin-shadow);
    color: var(--white);
}

.ween-btn {
    background-color: var(--dark-sky);
    color: var(--white);
    font-family: 'Caveat Brush', cursive !important;
}

.ween-btn:hover,
.single-movie:hover .ween-btn {
    background-color: var(--black);
    color: var(--white);
}

.new-release {
    position: relative;
    padding-left: 2.5rem;

    /* The ghost (see _release-ghost.liquid), which links to the year's releases */
    & .new-release-ghost {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        height: 2rem;
        width: 2rem;
        object-fit: contain;
    }
}

.mobile-layout {
    background-color: transparent;
}



@media (max-width: 768px) {
    .calendar-cell.empty.calendar-key {
        background-image: none;
    }
}

body {
    background-color: #120f0f;
    /* Transparent copy of 2026-background.png (lines only) so the color shows through */
    background-image: url('/assets/img/2026-background-lines.png');
    background-repeat: repeat;
    background-size: 525px;
    border: none;
}


@font-face {
    font-family: 'Stella';
    src: url('/public/fonts/Stella.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Anantason';
    src: url('/public/fonts/Anantason-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.nav-links,
.nav-dropdown-toggle,
.mobile-nav-link,
.mobile-nav-title,
.movie-id {
    font-family: 'Caveat Brush', cursive;
}

/* Calendar styles */
.calendar-title {
    margin-bottom: 0;

    h1 {
        /* Sunday runs wider than Stella, so this matches 2025's 8vw title width */
        font-size: 6.2vw;
        margin-bottom: -1rem;
    }

    h2 {
        font-size: 3.5vw;
        margin-bottom: -1rem;
    }
}

@media (max-width: 768px) {
    .calendar-title {
        margin-bottom: 0;
        padding: 0;
    }

    .calendar-title h1 {
        margin-bottom: 0.5rem;
        font-size: 3rem;
    }

    .calendar-title h2 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
}

h1 {
    font-family: 'Sunday', cursive;
    text-transform: uppercase;
    color: var(--white);

    text-shadow: 4px 4px 0px var(--black), 8px 8px 0px var(--smile), 12px 12px 0px var(--dark-sky);
}

h2 {
    font-family: 'Sunday', cursive;
    text-transform: uppercase;
    color: var(--twilight);
    text-shadow: 2px 2px 0px var(--black), 4px 4px 0px var(--smile), 6px 6px 0px var(--dark-sky);
}

.screening-date {
    font-family: 'Caveat Brush', cursive;
}

.movie-metadata {
    font-family: 'Caveat Brush', cursive;
    color: var(--bone);
}

.calendar-header-cell {
    background-color: var(--twilight);
    color: var(--black);
    font-family: 'Caveat Brush', cursive !important;
}

.calendar-cell {
    background-color: var(--blank);
    color: var(--black);
}

.calendar-cell.empty,
.calendar-cell.empty:hover {
    background-color: var(--twilight);
}

.calendar-cell:hover {
    background-color: var(--blank);
    border-color: var(--magic);
}

/* Today: a pumpkin-orange ring and glow (with a thin black outline, so it shows on the
   cream calendar and the dark posters alike), lifted over its neighbors so they don't cover
   the glow, and gently pulsing */
.calendar-cell.today {
    --today-glow: var(--pumpkin);
    --today-shadow: 0 0 0 2px var(--black), 0 0 14px 4px var(--today-glow),
        0 0 32px 10px color-mix(in srgb, var(--today-glow) 55%, transparent);
    position: relative;
    z-index: 2;
    background-color: var(--blank);
    border: 3px solid var(--today-glow);
    box-shadow: var(--today-shadow);
}

/* The date badge (on mobile, the day badge) turns orange too */
.calendar-cell.today .date,
.calendar-cell.today .day-info {
    color: var(--black);
    background: var(--today-glow);
    text-shadow: none;
}

.calendar-cell.halloween {
    background-color: var(--halloween);
    color: var(--black);
}

.date {
    color: var(--black) !important;
    font-family: 'Caveat Brush', cursive !important;
}

.weenie-btn {
    background-color: var(--pumpkin);
    color: var(--smile);
    font-family: 'Caveat Brush', cursive !important;
}

.weenie-btn:hover,
.single-movie:hover .weenie-btn {
    background-color: var(--pumpkin-shadow);
    color: var(--white);
}

.ween-btn {
    background-color: var(--dark-sky);
    color: var(--white);
    font-family: 'Caveat Brush', cursive !important;
}

.ween-btn:hover,
.single-movie:hover .ween-btn {
    background-color: var(--black);
    color: var(--white);
}

.new-release {
    position: relative;
    padding-left: 2.5rem;

    /* The ghost (see _release-ghost.liquid), which links to the year's releases */
    & .new-release-ghost {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        height: 2rem;
        width: 2rem;
        object-fit: contain;
    }
}

.mobile-layout {
    background-color: transparent;
}



.calendar-grid {
    position: relative;
    overflow: visible;
}


/* Ensure proper stacking order */
.calendar-title {
    position: relative;
    z-index: 2;
}

.calendar-wrapper {
    position: relative;
    z-index: 0;
}

.calendar-grid {
    position: relative;
    overflow: visible;
}



.calendar-title {
    position: relative;
    z-index: 2;
}

.calendar-wrapper {
    position: relative;
    z-index: 0;
}
/* Hand-drawn frame around the desktop calendar. border-image keeps the corners at their
   drawn shape and stretches only the edges, so it fits any calendar size. */
@media (min-width: 769px) {
    .calendar-wrapper {
        border: 36px solid transparent;
        border-image: url('/assets/img/2026-frame.png') 100 fill / 36px stretch;
        padding: 0.75rem;
    }

    /* Let the frame's fill show through instead of the dark grid background */
    #calendar-grid {
        background: transparent;
    }
}

/* The same hand-drawn frame around today's movies when there are several (a single
   movie uses the framed _movie-hero.liquid), cream fill and all */
.todays-movies-container {
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    border: 36px solid transparent;
    border-image: url('/assets/img/2026-frame.png') 100 fill / 36px stretch;
    padding: 0.5rem 1.5rem 1rem;
}

/* Dark text on the cream, without the glow-y shadows meant for the dark background */
.todays-movies-container :is(.todays-movies-title, .movie-id) {
    color: var(--black);
    text-shadow: none;
}

.todays-movies-container .todays-movies-date {
    color: var(--hollow);
    text-shadow: none;
}

.todays-movies-container .todays-movie-poster {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
    /* Full width rather than fit-content, which would collapse the percentage-sized multi-movie grid */
    .todays-movies-container {
        width: auto;
        max-width: calc(100% - 1rem);
        border-width: 22px;
        border-image-width: 22px;
        padding: 0.25rem 0.25rem 0.75rem;
    }
}

/* Ghost release icon: drop shadow, and on hover (or the focused mobile card) it grows a little and floats.
   The calendar key's ghost floats all the time. */
.new-release .new-release-ghost,
.key-icon {
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s ease;
}

.new-release:hover .new-release-ghost,
.single-movie:hover .new-release .new-release-ghost,
.poster-cell.in-focus .new-release .new-release-ghost {
    animation: ghost-float 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: no-preference) {
    .key-icon {
        animation: ghost-float-key 1.6s ease-in-out infinite;
    }

    /* Page title icons that stay animated: the 2026 Releases ghost floats like the key's,
       the Bonus Weens teeth chomp like the home page's Bonus Weens button, and the Events
       calendar swings like the home page's calendar button */
    .title-icon.title-float {
        animation: ghost-float-key 1.6s ease-in-out infinite;
    }

    .title-icon.title-swing {
        --calendar-rest: scale(1);
        transform-origin: 50% 8%;
        animation: calendar-swing 2s ease-in-out infinite;
    }

    .title-chomp > * {
        animation: var(--bite) 2s ease-in-out infinite;
    }
}

/* The Bonus Weens teeth (see _bite-jaws.liquid). Both jaws swing on the hinge at the back
   of the mouth, on the right, and snap shut twice, chattering like wind-up teeth. The gum
   between them squashes to keep its ends on the teeth, rather than tearing in half. Each
   piece names its animation in --bite, and each use of the teeth picks when to run them. */
.bite-jaws {
    aspect-ratio: 1;
    overflow: visible;
}

.bite-jaws > * {
    transform-box: view-box;
    transform-origin: 91.8% 52.7%;
}

.bite-jaws .upper-jaw {
    --bite: upper-bite;
}

.bite-jaws .lower-jaw {
    --bite: lower-bite;
}

.bite-jaws .gum {
    --bite: gum-bite;
    transform-origin: 0 0;
}

@keyframes upper-bite {
    0%, 50%, 100% { transform: rotate(0deg); }
    60%, 64% { transform: rotate(-15deg); }
    69% { transform: rotate(-6deg); }
    75%, 80% { transform: rotate(-15deg); }
}

@keyframes lower-bite {
    0%, 50%, 100% { transform: rotate(0deg); }
    60%, 64% { transform: rotate(15deg); }
    69% { transform: rotate(6deg); }
    75%, 80% { transform: rotate(15deg); }
}

/* Worked out from where the jaws carry the gum's ends at each angle */
@keyframes gum-bite {
    0%, 50%, 100% { transform: translate(0, 0) skewX(0deg) scale(1, 1); }
    60%, 64% { transform: translate(-15.2px, 99.7px) skewX(16.7deg) scale(1, 0.185); }
    69% { transform: translate(-6.1px, 39.9px) skewX(6.7deg) scale(1, 0.674); }
    75%, 80% { transform: translate(-15.2px, 99.7px) skewX(16.7deg) scale(1, 0.185); }
}

/* Ghosts that link to the year's releases grow a little under the pointer. This uses
   the scale property, which stacks on top of the ghosts' transform animations. */
.release-ghost[data-link],
.key-icon[data-link] {
    cursor: pointer;
    transition: transform 0.2s ease, scale 0.2s ease;
}

.release-ghost[data-link]:hover,
.key-icon[data-link]:hover {
    scale: 1.2;
}

@keyframes ghost-float {
    0%, 100% { transform: translateY(-50%) scale(1.15); }
    50% { transform: translateY(calc(-50% - 4px)) scale(1.15); }
}

@keyframes ghost-float-key {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .new-release:hover .new-release-ghost,
    .single-movie:hover .new-release .new-release-ghost,
    .poster-cell.in-focus .new-release .new-release-ghost {
        animation: none;
        transform: translateY(-50%) scale(1.15);
    }
}

/* Ticket stub with a movie's release year and runtime (see _ticket-stub.liquid): the same
   pink ticket as the ticket buttons, slightly askew. Sized in em, so a font-size scales it. */
.ticket-stub {
    display: flex;
    margin: 0;
    border: 18px solid transparent;
    border-image: url('/assets/img/weening-ticket-flat.png') 26 32 fill / 18px 22px stretch;
    padding: 0 4px;
    transform: rotate(-3deg);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s ease;
    color: var(--black);
    text-align: center;
}

.stub-half {
    flex: 1;
    line-height: 1.1;
}

/* Perforation between the halves */
.stub-half + .stub-half {
    border-left: 2px dashed rgba(0, 0, 0, 0.55);
}

.ticket-stub dt {
    font-size: 0.75em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
}

.ticket-stub dd {
    margin: 0;
    font-family: 'Sunday', cursive;
    font-size: 1.6em;
    white-space: nowrap;
}

/* This year's releases get the ghost from the calendar key, haunting the stub:
   it bobs and sways, fades as if passing through the paper, then lunges out with a "boo!" */
.stub-ghost {
    height: 1.15em;
    margin-left: 0.2em;
    vertical-align: -0.1em;
    filter: drop-shadow(0 0 4px rgba(239, 191, 197, 0.9));
}

@media (prefers-reduced-motion: no-preference) {
    .stub-ghost {
        animation: stub-ghost-haunt 4s ease-in-out infinite;
    }
}

@keyframes stub-ghost-haunt {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); opacity: 1; }
    15% { transform: translate(2px, -5px) rotate(5deg); }
    30% { transform: translate(-1px, -1px) rotate(-4deg); opacity: 0.35; }
    45% { transform: translate(1px, -6px) rotate(6deg); opacity: 1; }
    60% { transform: translate(0, -2px) rotate(-5deg); }
    68% { transform: translate(-2px, 2px) scale(0.9) rotate(-10deg); }
    74% { transform: translate(4px, -9px) scale(1.4) rotate(12deg); }
    80% { transform: translate(3px, -7px) scale(1.3) rotate(8deg); }
    90% { transform: translate(0, -2px) scale(1) rotate(-4deg); }
}

@media (prefers-reduced-motion: no-preference) {
    .calendar-cell.today {
        animation: today-pulse 2.4s ease-in-out infinite alternate;
    }
}

@keyframes today-pulse {
    from { box-shadow: var(--today-shadow); }
    to {
        box-shadow: 0 0 0 2px var(--black), 0 0 20px 7px var(--today-glow),
            0 0 44px 16px color-mix(in srgb, var(--today-glow) 45%, transparent);
    }
}

/* On mobile the card at the focus line gets its own lift shadow, so keep today's glow with it */
@media (max-width: 768px) {
    .mobile-layout .calendar-cell.poster-cell.today.in-focus {
        box-shadow: var(--today-shadow), 0 8px 24px rgba(0, 0, 0, 0.6);
    }
}

/* An add-to-calendar icon swings on its rings, then pops like it's been added
   (used by _button.liquid and the events' action buttons) */
@keyframes calendar-swing {
    0%, 45%, 100% { transform: var(--calendar-rest); }
    52% { transform: var(--calendar-rest) rotate(12deg); }
    60% { transform: var(--calendar-rest) rotate(-9deg); }
    67% { transform: var(--calendar-rest) rotate(5deg); }
    73% { transform: var(--calendar-rest) rotate(-2deg); }
    78% { transform: var(--calendar-rest); }
    85% { transform: var(--calendar-rest) scale(1.18); }
}