/*
frontpage-hero.css
Sealand Press — front-page hero

The original brand blue is:
#141531

This hero is deliberately independent from the onepager hero.
*/


/* ==========================================================
1. FONTS
========================================================== */

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

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

/* ==========================================================
   2. FRONT-PAGE HERO VARIABLES
   ========================================================== */

:root {
    --frontpage-blue: #141531;
    --frontpage-text: #ededed;
}


/* ==========================================================
   3. HERO / BACKGROUND
   ========================================================== */

.frontpage-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    background: var(--frontpage-blue);
    color: var(--frontpage-text);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;
}


/* ----------------------------------------------------------
   BACKGROUND MEDIA
   ---------------------------------------------------------- */

.frontpage-hero__media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
}


.frontpage-hero__video,
.frontpage-hero__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
}


/* Video — intentionally very close to original hero.css */

.frontpage-hero__video {
    display: block;

    object-fit: cover;
    object-position: center center;

    filter:
        brightness(.95)
        blur(1.5px);

    animation:
        frontpage-slow-zoom
        22s
        ease-in-out
        infinite
        alternate;

    will-change: transform;
}


/* Still image */

.frontpage-hero__image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    filter:
        grayscale(100%)
        brightness(.95)
        blur(1.5px);

    animation:
        frontpage-slow-zoom
        22s
        ease-in-out
        infinite
        alternate;

    will-change: transform;
}


/* ----------------------------------------------------------
   BLUE COLOUR TREATMENT
   ----------------------------------------------------------

   A subtle colour layer keeps the video tied to the Sealand
   blue without crushing the photographic detail.
*/

.frontpage-hero__tint {
    position: absolute;
    inset: 0;

    z-index: 1;

    background: var(--frontpage-blue);

    opacity: .16;

    mix-blend-mode: color;

    pointer-events: none;
}


/* ----------------------------------------------------------
   INTERACTIVE BLUE OVERLAY
   ---------------------------------------------------------- */

.frontpage-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;
    user-select: none;

    background: transparent;
}


/* ----------------------------------------------------------
   GHOST LIGHT
   ---------------------------------------------------------- */

.frontpage-hero__ghost {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;
    user-select: none;

    background: transparent;
}


/* No additional vignette on the video.
   The original video treatment did not use one. */

/* ==========================================================
4. HERO CONTENT
========================================================== */

.frontpage-hero__content {
    position: relative;
    z-index: 100 !important;

    width: min(92vw, 900px);
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 5rem 1.5rem 7rem;
}


/* ==========================================================
5. SVG LOGO
========================================================== */

.frontpage-hero__logo {
    display: block;

    width: min(70vw, 420px);
    height: auto;
    max-height: 34vh;

    margin: 0 auto 0.2rem;

    opacity: .72;

    /*
     * Prevent inherited theme rules from affecting the inline SVG.
     */
    overflow: visible;
    text-decoration: none;
    border: 0;
    box-shadow: none;

    /*
     * The SVG contains text using these font-family names.
     * Keeping the font declarations here as well as in the SVG
     * makes the logo robust against theme CSS.
     */
}

.frontpage-hero__logo .cls-1,
.frontpage-hero__logo .cls-2 {
    font-family:
        'TimesNewerRoman',
        'Times New Roman',
        Times,
        serif !important;

    font-weight: 400 !important;
}

.frontpage-hero__logo .cls-4 {
    font-family:
        'TimesNewRoman',
        'Times New Roman',
        Times,
        serif !important;

    font-weight: 400 !important;
}


/*
Do not allow generic theme rules for SVG text/tspan to introduce
spacing, transforms or inherited colour.
*/

.frontpage-hero__logo text,
.frontpage-hero__logo tspan {
    letter-spacing: normal;
    text-decoration: none;
}


/* ==========================================================
6. BASELINE
========================================================== */

.frontpage-hero__baseline {
    width: min(90vw, 720px);
    margin: 0 auto;

    color: var(--frontpage-text);

    font-family:
        'TimesNewerRoman',
        'Times New Roman',
        Times,
        serif;

    font-size: clamp(1.15rem, 2vw, 1.8rem);
    font-weight: 400;
    line-height: 1.35;

    text-align: center;

    opacity: .80;
}


/* ==========================================================
7. SCROLL CUE
========================================================== */

.frontpage-hero__scroll {
    position: absolute;
    z-index: 110 !important;

    left: 50%;
    bottom: 1.5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3.5rem;

    transform: translateX(-50%);

    color: rgba(237, 237, 237, .70);
    text-decoration: none !important;

    font-family:
        'Times New Roman',
        Times,
        serif;

    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1;

    opacity: .75;

    cursor: pointer;
    user-select: none;

    transition:
        color .3s ease,
        opacity .3s ease,
        transform .3s ease;
}

.frontpage-hero__scroll:visited {
    color: rgba(237, 237, 237, .70);
}

.frontpage-hero__scroll:hover,
.frontpage-hero__scroll:focus-visible {
    color: #fff;
    opacity: 1;

    transform: translateX(-50%) translateY(5px);
}

.frontpage-hero__scroll:focus-visible {
    outline: 1px solid rgba(255, 255, 255, .55);
    outline-offset: 5px;
}


/* ==========================================================
8. ANIMATION
========================================================== */

@keyframes frontpage-slow-zoom {
    0%,
    100% {
        transform: scale(1.02);
    }

    50% {
        transform: scale(1.07);
    }
}


/* ==========================================================
9. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .frontpage-hero__video,
    .frontpage-hero__image {
        animation: none;
        transform: scale(1.02);
    }

    .frontpage-hero__scroll {
        transition: none;
    }
}


/* ==========================================================
10. MOBILE
========================================================== */

@media (max-width: 600px) {
    .frontpage-hero__content {
        width: 100%;
        min-height: 100svh;

        padding:
            4rem
            1.25rem
            6rem;
    }

    .frontpage-hero__logo {
        width: min(86vw, 430px);
        max-height: 28vh;
        margin-bottom: 1.5rem;
    }

    .frontpage-hero__baseline {
        width: min(90vw, 500px);

        font-size: clamp(1.05rem, 4.5vw, 1.35rem);
        line-height: 1.35;
    }

    .frontpage-hero__scroll {
        bottom: 1rem;
        font-size: 2rem;
    }

    .frontpage-hero__video,
    .frontpage-hero__image {
        object-position: center center;
    }
}


/* ==========================================================
11. SMALL PHONES
========================================================== */

@media (max-width: 380px) {
    .frontpage-hero__content {
        padding:
            3rem
            1rem
            5rem;
    }

    .frontpage-hero__logo {
        width: 88vw;
        margin-bottom: 1.25rem;
    }

    .frontpage-hero__baseline {
        font-size: 1rem;
    }
}