/* Homepage video fades into the hero behind the existing bottom wash. */
.page-index .hero-photo { z-index: -4; }
.page-index .hero:has(.hero-background-video.is-ready) .hero-photo { opacity: 0; }
.page-index .hero-background-video {
    position: absolute;
    inset: 0 0 0 auto;
    width: 77%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    -webkit-mask-image: url('../images/home-hero-video-mask.svg'), linear-gradient(180deg, transparent, #000 18%);
    mask-image: url('../images/home-hero-video-mask.svg'), linear-gradient(180deg, transparent, #000 18%);
    -webkit-mask-size: cover, 100% 100%;
    mask-size: cover, 100% 100%;
    -webkit-mask-position: center 42%, center;
    mask-position: center 42%, center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
    z-index: -3;
    opacity: 0;
    transition: opacity .3s ease;
}
.page-index .hero-background-video.is-ready { opacity: 1; }
.page-index .hero-video-toggle {
    position: absolute;
    top: 50%;
    left: 61.5%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    padding: 0;
    border: 1px solid #ffffff52;
    border-radius: 50%;
    background: #071b10b3;
    color: #fff;
    box-shadow: 0 6px 24px #03120e26;
    cursor: pointer;
    isolation: isolate;
}
.page-index .hero-video-text-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: currentColor;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    animation: hero-video-ring-spin 18s linear infinite;
}
.page-index .hero-video-core {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #97b21d;
    color: #071b10;
    pointer-events: none;
    transition: background .2s ease;
}
.page-index .hero-video-core svg { width: 25px; height: 25px; }
.page-index .hero-video-toggle .hero-video-play-icon { transform: translateX(-2px); }
.page-index .hero-video-toggle .hero-video-ring-pause,
.page-index .hero-video-toggle .hero-video-pause-icon,
.page-index .hero-video-toggle[data-playing="true"] .hero-video-ring-play,
.page-index .hero-video-toggle[data-playing="true"] .hero-video-play-icon { display: none; }
.page-index .hero-video-toggle[data-playing="true"] .hero-video-ring-pause,
.page-index .hero-video-toggle[data-playing="true"] .hero-video-pause-icon { display: block; }
.page-index .hero-video-toggle[hidden] { display: none !important; }
.page-index .hero-video-toggle:hover .hero-video-core { background: #b1cc39; }
.page-index .hero-video-toggle:is(:hover,:focus-visible,[data-playing="true"]) .hero-video-text-ring { animation-play-state: paused; }
.page-index .hero-video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@keyframes hero-video-ring-spin {
    to { transform: rotate(360deg); }
}
@media (min-width: 1650px) {
    .page-index .hero-background-video { width: 68%; }
    .page-index .hero-video-toggle { left: 66%; }
}
@media (min-width: 701px) and (max-width: 900px) {
    .page-index .hero:has([data-hero-background-video]) .hero-copy > p { max-width: calc(61.5vw - 112px); }
}
@media (max-width: 700px) {
    .page-index .hero-background-video {
        top: 0;
        right: 0;
        width: 100%;
        height: 314px;
        object-position: center 27%;
        -webkit-mask-position: center 27%, center;
        mask-position: center 27%, center;
    }
    .page-index .hero-video-toggle { top: 157px; left: 50%; width: 112px; height: 112px; }
    .page-index .hero:has([data-hero-background-video]) .hero-inner { padding-top: 234px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-index .hero-background-video { transition: none; }
    .page-index .hero-video-text-ring { animation: none; }
    .page-index .hero-video-core { transition: none; }
}
@media print {
    .page-index .hero:has(.hero-background-video.is-ready) .hero-photo { opacity: 1; }
    .page-index .hero-background-video,
    .page-index .hero-video-toggle { display: none !important; }
}