/* RCJPS V3, theme 1.15: the picture reel banner and the film pop-up (template-parts/hero-reel.php).
   Loaded on the Home page after home.css, and on the Kindergarten Home template after
   interior.css and pages.css. Moved here from the end of home.css (the "Theme 1.9"
   addition) so both pages share it. */

/* ============================================================
   Theme 1.9: the banner from the index-v2 mockup ("the reel").
   Ported from that page's styles with the theme's tokens: its
   valley green is the navy, its brass is the gold, and its
   Fraunces / Space Grotesk are Playfair Display / Montserrat.
   Everything is scoped to .hero-reel and .lb; the approved
   design's hero rules in home.css are left as they were.
   ============================================================ */
.hero.hero-reel {
    position: relative;
    --pane-count: 6;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dwell: 6000ms;
    display: block;
    /* Theme 1.17.1: a viewport tall, but never shorter than its text, so a short window
       (a laptop with the browser's bars, a half-height window) pushes the page down instead
       of running the heading under the fixed header and the buttons over the caption. */
    height: auto;
    min-height: max(620px, 100svh);
    background: var(--navy-deep);
    overflow: hidden;
    touch-action: pan-y;
}

.hero-reel .reel {
    position: absolute;
    inset: 0;
}

.hero-reel .frame {
    position: absolute;
    inset: 0;
    display: flex;
    visibility: hidden;
}

.hero-reel .frame.is-live,
.hero-reel .frame.is-out {
    visibility: visible;
}

.hero-reel .frame.is-live {
    z-index: 2;
}

.hero-reel .frame.is-out {
    z-index: 1;
}

/* The picture each frame is cut from. Shown whole until reel.js has built the panes. */
.hero-reel .frame-src {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Only the live frame's picture is in layout, so the others aren't fetched until the script warms them */
.hero-reel .frame.painted .frame-src,
.hero-reel .frame:not(.is-live) .frame-src {
    display: none;
}

/* Ken Burns rides on the frame so all panes stay seamed together */
.hero-reel .frame.is-live .drift {
    animation: reel-drift 11s linear forwards;
}

.hero-reel .drift {
    position: absolute;
    inset: 0;
    display: flex;
    transform-origin: 50% 50%;
}

@keyframes reel-drift {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.11);
    }
}

.hero-reel .pane {
    position: relative;
    flex: 1 1 0;
    overflow: hidden;
    transform: translateY(101%);
}

.hero-reel .frame.is-live .pane {
    animation: reel-pane-in 0.9s var(--ease) forwards;
    animation-delay: calc(var(--i) * 70ms);
}

/* The outgoing frame holds still underneath while the new one wipes down */
.hero-reel .frame.is-out .pane {
    transform: none;
}

.hero-reel .frame.instant .pane {
    animation: none;
    transform: none;
}

@keyframes reel-pane-in {
    to {
        transform: translateY(0);
    }
}

.hero-reel .pane-img {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: calc(100% * var(--pane-count));
    max-width: none;
    left: calc(-100% * var(--i));
    object-fit: cover;
    object-position: center;
}

.hero-reel .veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6, 14, 28, 0.72) 0%, rgba(6, 14, 28, 0.12) 34%, rgba(6, 14, 28, 0.58) 74%, rgba(6, 14, 28, 0.94) 100%),
        linear-gradient(96deg, rgba(6, 14, 28, 0.94) 0%, rgba(6, 14, 28, 0.86) 26%, rgba(6, 14, 28, 0.5) 52%, rgba(6, 14, 28, 0.06) 100%);
}

.hero-reel .hero-body {
    position: relative;
    z-index: 4;
    height: auto;
    min-height: max(620px, 100svh);
    max-width: 1360px;
    margin: 0 auto;
    /* The text is centred between the fixed header (119px: the top row and the menu bar) and
       the controls along the bottom, and stops short of the play seal on the right. */
    padding: 150px 212px 160px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-reel .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 26px;
    opacity: 1;
    animation: none;
}

.hero-reel .hero-eyebrow::before {
    content: '';
    width: 44px;
    height: 1px;
    background: var(--gold);
}

.hero-reel .hero-h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.02em;
    font-size: clamp(44px, 6.4vw, 96px);
    color: #fff;
    max-width: 13ch;
    margin-bottom: 26px;
}

.hero-reel .hero-h1 em {
    font-style: italic;
    color: var(--gold);
}

.hero-reel .hero-h1 .ln {
    display: block;
    overflow: hidden;
}

.hero-reel .hero-h1 .ln>span {
    display: block;
    transform: translateY(105%);
    animation: reel-rise 1s var(--ease) forwards;
}

.hero-reel .hero-h1 .ln:nth-child(2)>span {
    animation-delay: 0.1s;
}

.hero-reel .hero-h1 .ln:nth-child(3)>span {
    animation-delay: 0.2s;
}

@keyframes reel-rise {
    to {
        transform: translateY(0);
    }
}

.hero-reel .hero-sub {
    font-size: 16.5px;
    line-height: 1.75;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
    max-width: 44ch;
    margin-bottom: 38px;
    opacity: 0;
    animation: reel-fade 0.9s 0.5s forwards;
}

.hero-reel .hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 0;
    opacity: 0;
    animation: reel-fade 0.9s 0.65s forwards;
}

@keyframes reel-fade {
    to {
        opacity: 1;
    }
}

/* Buttons: the gold one plays, the outlined ones navigate */
.hero-reel .reel-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}

.hero-reel .reel-btn .tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
    transition: transform 0.3s var(--ease);
}

.hero-reel .reel-btn:hover {
    transform: translateY(-2px);
}

.hero-reel .reel-btn:hover .tri {
    transform: scale(1.25);
}

.hero-reel .reel-btn-brass {
    background: var(--gold);
    color: var(--navy-deep);
}

.hero-reel .reel-btn-brass:hover {
    background: var(--gold-light);
}

.hero-reel .reel-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-reel .reel-btn-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Controls along the bottom: caption, filmstrip, arrows */
.hero-reel .reel-ui {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px 34px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    opacity: 0;
    animation: reel-fade 0.9s 0.8s forwards;
}

.hero-reel .caption {
    flex: 0 1 30ch;
    min-width: 200px;
    max-width: 30ch;
}

.hero-reel .caption-idx {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.hero-reel .caption-txt {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.hero-reel .strip {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    /* The row's spare room comes off the caption (which wraps), not the filmstrip; the strip
       scrolls only if more pictures are added than fit */
    flex: 0 0 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 4px; /* room for the hover lift, which the overflow would otherwise clip */
}

.hero-reel .strip::-webkit-scrollbar {
    display: none;
}

.hero-reel .strip-btn {
    position: relative;
    flex: 0 0 auto;
    width: 78px;
    height: 52px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 3px;
    opacity: 0.42;
    filter: saturate(0.5);
    transition: opacity 0.35s, filter 0.35s, transform 0.35s var(--ease);
}

.hero-reel .strip-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-reel .strip-btn:hover {
    opacity: 0.85;
    transform: translateY(-3px);
}

.hero-reel .strip-btn.on {
    opacity: 1;
    filter: none;
}

.hero-reel .strip-btn.on::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--gold);
    border-radius: 3px;
}

.hero-reel .strip-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--gold);
    z-index: 2;
}

.hero-reel .strip-btn.on .strip-bar {
    animation: reel-fill var(--dwell, 6s) linear forwards;
}

.hero-reel.is-paused .strip-bar {
    animation-play-state: paused;
}

@keyframes reel-fill {
    to {
        width: 100%;
    }
}

.hero-reel .arrows {
    display: flex;
    gap: 8px;
    margin-left: 8px;
}

.hero-reel .arrow {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: none;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.hero-reel .arrow:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--navy-deep);
}

.hero-reel .arrow svg {
    width: 15px;
    height: 15px;
}

/* Rotating play seal — the hero's play control */
.hero-reel .seal {
    position: absolute;
    z-index: 6;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
    color: #fff;
    opacity: 0;
    animation: reel-fade 0.9s 0.9s forwards;
}

.hero-reel .seal-ring {
    position: absolute;
    inset: 0;
    animation: reel-spin 22s linear infinite;
}

.hero-reel .seal-ring text {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    fill: var(--gold);
}

@keyframes reel-spin {
    to {
        transform: rotate(360deg);
    }
}

.hero-reel .seal-core {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy-deep);
    display: grid;
    place-items: center;
    transition: transform 0.4s var(--ease), background 0.3s;
}

.hero-reel .seal:hover .seal-core {
    transform: scale(1.12);
    background: var(--gold-light);
}

.hero-reel .seal-core .tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 4px;
}

.hero-reel :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* The film: a full-screen <dialog>; the six shutters paint its backdrop */
.lb {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    z-index: 2000;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.lb::backdrop {
    background: transparent;
}

.lb-shutter {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
}

.lb-shutter i {
    flex: 1 1 0;
    background: var(--navy-deep);
    transform: translateY(-101%);
}

.lb[open] .lb-shutter i {
    animation: lb-shut-down 0.55s var(--ease) forwards;
    animation-delay: calc(var(--i) * 55ms);
}

@keyframes lb-shut-down {
    to {
        transform: translateY(0);
    }
}

.lb-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 84px 40px 40px;
    opacity: 0;
}

.lb[open] .lb-stage {
    animation: reel-fade 0.5s 0.5s forwards;
}

.lb-frame {
    position: relative;
    width: min(1180px, 100%);
    /* Replaced with the film's real ratio once metadata arrives */
    aspect-ratio: var(--ratio, 16 / 9);
    max-height: 100%;
    background: #000;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.lb-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.lb-load {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 16px;
    align-content: center;
    background: var(--navy-deep);
    text-align: center;
    padding: 24px;
}

.lb-load.gone {
    display: none;
}

.lb-load p {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.lb-load small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    max-width: 40ch;
    line-height: 1.6;
    display: block;
}

.lb-load small a {
    color: var(--gold);
}

/* Indeterminate: the file's index is at its end, so the browser reports no
   buffered range until the whole thing has arrived — there is no honest percentage. */
.lb-progress {
    width: min(320px, 60vw);
    height: 2px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.lb-progress i {
    display: block;
    height: 100%;
    width: 34%;
    background: var(--gold);
    animation: lb-sweep 1.5s var(--ease) infinite;
}

@keyframes lb-sweep {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(320%);
    }
}

.lb-bar {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    padding: 26px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    opacity: 0;
}

.lb[open] .lb-bar {
    animation: reel-fade 0.5s 0.55s forwards;
}

.lb-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.lb-close {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.25s;
}

.lb-close:hover {
    color: var(--gold);
}

.lb-close span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 14px;
    line-height: 1;
}

.lb :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* The page behind the film stays put */
html.lb-open,
html.lb-open body {
    overflow: hidden;
}

@media (max-width: 1180px) {
    .hero-reel .seal {
        width: 118px;
        height: 118px;
    }

    .hero-reel .seal-core {
        width: 56px;
        height: 56px;
    }

    .hero-reel .hero-body {
        padding-right: 182px;
    }

    /* Smaller thumbnails, so the six fit beside the caption and the arrows down to 900px */
    .hero-reel .strip-btn {
        width: 70px;
        height: 46px;
    }
}

@media (max-width: 900px) {
    .hero.hero-reel {
        --pane-count: 4;
    }
}

@media (max-width: 940px) {

    /* The caption, filmstrip and arrows no longer fit in one row: the caption goes on top
       and the filmstrip, with the arrows beside it, underneath. */
    .hero-reel .reel-ui {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'caption caption'
            'strip arrows';
        align-items: end;
        gap: 14px 16px;
    }

    .hero-reel .caption {
        grid-area: caption;
        min-width: 0;
    }

    .hero-reel .strip {
        grid-area: strip;
    }

    .hero-reel .arrows {
        grid-area: arrows;
        margin-left: 0;
    }

    .hero-reel .hero-body {
        padding-bottom: 210px;
    }
}

@media (max-width: 760px) {

    /* On a short screen the banner grows with its text instead of running under the header */
    .hero.hero-reel {
        height: auto;
        min-height: 100svh;
    }

    .hero-reel .hero-body {
        height: auto;
        min-height: 100svh;
        padding: 130px 24px 210px;
        justify-content: flex-end;
    }

    .hero-reel .hero-h1 {
        max-width: none;
    }

    /* The hero already carries a play button on small screens */
    .hero-reel .seal {
        display: none;
    }

    .hero-reel .reel-ui {
        padding: 0 24px 24px;
    }

    /* Swipe and the filmstrip cover this on touch */
    .hero-reel .arrows {
        display: none;
    }

    .hero-reel .caption-txt {
        font-size: 16px;
    }

    .hero-reel .caption {
        max-width: none;
    }

    .hero-reel .strip-btn {
        width: 62px;
        height: 42px;
    }

    .lb-stage {
        padding: 76px 16px 24px;
    }

    .lb-bar {
        padding: 20px 20px;
    }
}

@media (max-width: 640px) {

    /* The approved design's phone hero rules above don't apply to the reel */
    .hero-reel .hero-eyebrow {
        font-size: 10px;
        margin-bottom: 18px;
        white-space: normal;
    }

    .hero-reel .hero-h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .hero-reel .hero-sub {
        font-size: 15px;
        margin-bottom: 28px;
    }

    /* The approved design stacks its phone buttons; the mockup keeps them in a wrapping row */
    .hero-reel .hero-btns {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .hero-reel .reel-btn {
        padding: 13px 22px;
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-reel *,
    .hero-reel *::before,
    .hero-reel *::after,
    .lb *,
    .lb *::before,
    .lb *::after {
        animation-duration: 0.001s !important;
        animation-delay: 0s !important;
        transition-duration: 0.001s !important;
    }

    .hero-reel .pane,
    .hero-reel .hero-h1 .ln>span {
        transform: none;
    }

    .hero-reel .seal-ring {
        animation: none;
    }
}