/* File: assets/css/hero-media.css
   Homepage video hero, ported from Asanji Ventures (expand and static
   styles), plus the video slide used by "Video, then slides".
   Text over footage keeps light ink in both themes: the footage does not
   change with the theme, so neither does the ink on it. */

.amric-hero {
    --on-media: #fffaf2;
    --media-scrim-rgb: 28, 20, 14;          /* cocoa, not black */
    position: relative;
    isolation: isolate;
    color: var(--on-media);
    background: rgb(var(--media-scrim-rgb));
    margin-bottom: 30px;
}
.amric-hero__stage { position: relative; overflow: hidden; }
.amric-hero__frame {
    position: absolute; inset: 0; overflow: hidden;
    display: flex; align-items: flex-end;
    background: rgb(var(--media-scrim-rgb));
}
.amric-hero__video,
.amric-hero__still {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.amric-hero__still--motion { display: none; }
.is-still .amric-hero__video { display: none; }
.is-still .amric-hero__still--motion { display: block; }

.amric-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom,
        rgba(var(--media-scrim-rgb, 28, 20, 14), .35) 0%,
        rgba(var(--media-scrim-rgb, 28, 20, 14), .15) 40%,
        rgba(var(--media-scrim-rgb, 28, 20, 14), .92) 100%);
    opacity: calc(var(--scrim-opacity, .45) + var(--hero-dim, 0) + .35);
    pointer-events: none;
}

.amric-hero__inner {
    position: relative; z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 20px 56px;
    box-sizing: border-box;
}
.amric-hero__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    font: 700 .78rem/1 'Montserrat', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #F9A825;
}
.amric-hero__title {
    margin: 0 0 16px;
    max-width: 17ch;
    font: 800 clamp(2rem, 7vw, 4rem)/1.05 'Montserrat', sans-serif;
    color: var(--on-media);
    text-wrap: balance;
}
.amric-hero__lead {
    margin: 0 0 24px;
    max-width: 54ch;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 250, 242, .9);
}
.amric-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.amric-hero__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 12px 22px;
    border-radius: 999px;
    background: #F9A825; color: #1c140e;
    font: 700 .95rem/1 'Montserrat', sans-serif;
    text-decoration: none;
    border: 2px solid #F9A825;
    transition: background .2s, color .2s, transform .2s;
}
.amric-hero__btn:hover { background: #ffb935; color: #1c140e; transform: translateY(-2px); }
.amric-hero__btn--ghost { background: rgba(28, 20, 14, .25); color: var(--on-media); border-color: rgba(255, 250, 242, .55); }
.amric-hero__btn--ghost:hover { background: rgba(255, 250, 242, .12); color: var(--on-media); border-color: var(--on-media); }
.amric-hero__btn:focus-visible { outline: 3px solid #fffaf2; outline-offset: 3px; }

/* expand: the stage pins to the screen while the page scrolls under it;
   the clip creeps in, the scrim deepens and the words lift away. Every value
   comes from one progress number set in hero-media.js. */
.amric-hero--expand { height: 175vh; height: 175svh; }
.amric-hero--expand .amric-hero__stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
}
.amric-hero--expand .amric-hero__video,
.amric-hero--expand .amric-hero__still {
    transform: scale(var(--hero-zoom, 1));
    transform-origin: 50% 62%;
    will-change: transform;
}
.amric-hero--expand .amric-hero__inner {
    transform: translate3d(0, var(--hero-lift, 0px), 0);
    opacity: var(--hero-fade, 1);
    will-change: transform;
}
.amric-hero--expand .amric-hero__eyebrow { transform: translate3d(0, calc(var(--hero-lift, 0px) * .55), 0); }
.amric-hero--expand .amric-hero__title   { transform: translate3d(0, calc(var(--hero-lift, 0px) * .3), 0); }
.amric-hero--expand .amric-hero__lead    { transform: translate3d(0, calc(var(--hero-lift, 0px) * .16), 0); }

/* static: a fixed-height banner. The media is oversized so the slow drift
   never shows an edge. */
.amric-hero--static .amric-hero__stage { height: min(82vh, 720px); min-height: 460px; }
.amric-hero--static .amric-hero__video,
.amric-hero--static .amric-hero__still { height: 124%; top: -12%; will-change: transform; }

/* A clip inside the image slider (Video, then slides). */
.slide--video .amric-hero__video,
.slide--video .amric-hero__still { z-index: 0; }
.slide--video .amric-hero__scrim { opacity: calc(var(--scrim-opacity, .45) + .1); }
.slide--video .slide-content { z-index: 10; }

/* Pause/play for people who want the motion to stop (WCAG 2.2.2). */
.amric-hero__pause {
    position: absolute; right: 16px; bottom: 16px; z-index: 12;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 250, 242, .5);
    background: rgba(28, 20, 14, .45); color: #fffaf2;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.amric-hero__pause:focus-visible { outline: 3px solid #F9A825; outline-offset: 2px; }
.amric-hero__pause svg { width: 18px; height: 18px; fill: currentColor; }
.amric-hero--expand .amric-hero__pause { bottom: 24px; }

@media (min-width: 900px) {
    .amric-hero__inner { padding: 120px 32px 88px; }
}

@media (prefers-reduced-motion: reduce) {
    .amric-hero__video { display: none; }
    .amric-hero__still--motion { display: block; }
    .amric-hero--expand { height: auto; }
    .amric-hero--expand .amric-hero__stage { position: relative; height: min(82vh, 720px); }
    .amric-hero--expand .amric-hero__video, .amric-hero--expand .amric-hero__still,
    .amric-hero--expand .amric-hero__inner, .amric-hero--expand .amric-hero__eyebrow,
    .amric-hero--expand .amric-hero__title, .amric-hero--expand .amric-hero__lead { transform: none !important; opacity: 1; }
    .amric-hero--static .amric-hero__video, .amric-hero--static .amric-hero__still { height: 100%; top: 0; transform: none !important; }
}