/* ============================================================
   The Reel — homepage hero film (.reel-)
   Home's first screen: one headline and a 41-second muted loop that opens
   on Aimavrik, then meets Catalyst and VoxAudit, with a link to each below
   it. The former hero, "A business, running", follows unchanged as
   Section 2.

   The film frame is fixed dark (the film's own ground, so it never
   flashes white while loading); everything around it follows the theme
   tokens. Zero CLS: the frame reserves its 16:9 box before any media
   arrives. Controller: assets/js/experiences/reel.js.
   ============================================================ */

.reel {
    position: relative;
    padding: 112px 0 40px;
    text-align: center;
}

.reel-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* One width for the frame and its caption row: as large as the first
       screen allows, so the headline, the film and the product names all
       land above the fold on common laptop heights. */
    --reel-w: min(100%, 1120px, max(560px, calc((100vh - 360px) * 16 / 9)));
}

@supports (height: 100svh) {
    .reel-inner {
        --reel-w: min(100%, 1120px, max(560px, calc((100svh - 360px) * 16 / 9)));
    }
}

.reel-title {
    font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.045em;
    color: var(--text-primary);
    margin: 0 0 28px;
}

.reel-line {
    display: block;
}

.reel-frame {
    position: relative;
    width: var(--reel-w);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #08080C;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    isolation: isolate;
}

.reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* The film's controls, bottom right: pause/play, then full screen.
   Pause/play is WCAG 2.2.2 (moving content that starts on its own and runs
   past five seconds must be pausable), with the day-stream's .hos-pause
   semantics: aria-pressed="true" while paused. Full screen is a web
   control: hidden on phones, and wherever the browser can't do it. */
.reel-controls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    gap: 8px;
}

.reel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #F4F4F7;
    background: rgba(8, 8, 12, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.reel-btn[hidden] {
    display: none;
}

.reel-btn:hover,
.reel-btn:focus-visible {
    border-color: rgba(169, 155, 255, 0.85);
    background: rgba(8, 8, 12, 0.78);
}

.reel-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.reel-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.reel-toggle .reel-ic-play,
.reel-toggle[aria-pressed="true"] .reel-ic-pause {
    display: none;
}

.reel-toggle[aria-pressed="true"] .reel-ic-play {
    display: block;
}

.reel-max .reel-ic-min,
.reel-is-full .reel-max .reel-ic-max {
    display: none;
}

.reel-is-full .reel-max .reel-ic-min {
    display: block;
}

/* Full screen: the film fills the screen, letterboxed on its own dark ground
   so no edge of it is cropped. (Two rule sets: an unknown pseudo-class would
   drop a combined selector list in the browser that doesn't know it.) */
.reel-frame:fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.reel-frame:fullscreen .reel-video {
    object-fit: contain;
}

.reel-frame:fullscreen .reel-controls {
    right: 24px;
    bottom: 24px;
}

.reel-frame:-webkit-full-screen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.reel-frame:-webkit-full-screen .reel-video {
    object-fit: contain;
}

.reel-frame:-webkit-full-screen .reel-controls {
    right: 24px;
    bottom: 24px;
}

/* The caption row: Catalyst and VoxAudit, in the order the film meets
   them — Catalyst left, VoxAudit right. */
.reel-products {
    width: var(--reel-w);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    margin-top: 18px;
}

.reel-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0 4px;
    text-align: left;
}

.reel-product:last-child {
    align-items: flex-end;
    text-align: right;
}

.reel-product-line {
    text-wrap: pretty;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.reel-product-name {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

/* Text alternative for the film (WCAG 1.2.1). There is no global
   .sr-only utility in this codebase; each experience scopes its own. */
.reel-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Section 2 — the former hero no longer sits under the fixed header, so it
   does not need the header-clearing top padding .hero carries. Content,
   spacing inside it, and behaviour are untouched. */
.reel + .hero {
    padding-top: 88px;
}

/* The site-wide sticky mobile CTA stays off the first screen, as it did
   when the day-stream hero opened the page (hos.css .hos-hide-sticky). */
.reel-hide-sticky .mobile-sticky-cta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

@media (max-width: 767px) {
    .reel {
        padding: 112px 0 28px;
    }

    .reel-title {
        margin-bottom: 22px;
    }

    .reel-frame {
        border-radius: var(--radius-lg);
    }

    .reel-controls {
        right: 8px;
        bottom: 8px;
    }

    .reel-btn {
        width: 32px;
        height: 32px;
    }

    .reel-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Full screen is a web control; phones play the film inline. */
    .reel-max {
        display: none;
    }

    .reel-products {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 16px;
    }

    .reel-product,
    .reel-product:last-child {
        align-items: flex-start;
        text-align: left;
    }

    .reel + .hero {
        padding-top: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reel-btn,
    .reel-hide-sticky .mobile-sticky-cta {
        transition: none;
    }
}