/* ================================
   LANDING PAGE (index.html)
   Loaded after styles.css. Text keeps the site-wide Body Text style (Rosario
   Regular, clamp() sizing) but is recolored light for this dark page;
   "enter site" is slightly smaller and a lightened site blue.

   Layers, back to front (z-index):
     background image 1 < haze 5 < fog 10 < video 15 < text 20
   ================================ */

/* ----- Settings you can tune -----
   Fog: raise a value for more fog, lower it for less.
   Phones override some of these in the mobile block at the bottom of this file. */
:root {
    --fog-haze: 0.00;          /* flat white veil over the whole screen */
    --fog-opacity: .80;        /* fog image strength */
    --fog-duration: 750s;      /* time for one drift cycle: LOWER = FASTER */

    /* Desktop fog fade: full strength from the top of the screen down to --fog-fade-start,
       then thinning evenly to --fog-bottom-opacity at the bottom edge (distance = thicker fog). */
    --fog-fade-start: 25%;         /* fog stays at full strength down to here */
    --fog-bottom-opacity: 0.20;    /* strength at the very bottom of the screen (1 = no fade) */

    --bg-blur: 0px;                /* background image blur: raise for softer, 0 = sharp */

    --landing-text: #e6e6e6;       /* light text for the dark page */
    --landing-link: #9db8d6;       /* "enter site": a lightened tint of the site blue, rgb(58,100,147) */
}

body {
    background: #000; /* fallback while the background image loads */
}

/* ----- Layout -----
   Desktop: video on the left (column 1), text on the right (column 2),
   the pair vertically centered in the browser window.
   Both columns are placed explicitly, so the DOM order (text first, which is
   what makes mobile stack text above video) doesn't affect the desktop layout.
   The text column is only as wide as its longest line; the video takes
   the rest, up to 720px, so it shrinks gracefully in narrower windows. */
.landing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    min-height: 100vh;  /* fallback for older browsers */
    min-height: 100dvh; /* tracks the visible area as browser bars show/hide */
    display: grid;
    grid-template-columns: minmax(0, 720px) max-content; /* text column hugs its text */
    justify-content: center; /* video + text sit together, centered on the page */
    align-items: center;
    align-content: center;
    column-gap: 3rem; /* space between video and text: adjust to taste */
}

/* ----- Background image (behind everything) ----- */
.landing-bg {
    position: fixed;
    inset: 0;
    overflow: hidden; /* clips the oversized image to the window */
    z-index: 1;
    pointer-events: none;
}

.landing-bg-img {
    position: absolute;
    inset: calc(var(--bg-blur) * -4); /* oversize so blurred edges stay off-screen */
    width: calc(100% + var(--bg-blur) * 8);
    height: calc(100% + var(--bg-blur) * 8);
    object-fit: cover;        /* fills the window, cropping as needed */
    object-position: center;
    filter: blur(var(--bg-blur));
}

/* ----- Video (in front of the fog, behind the text) ----- */
.landing-video-block {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 720px;
    min-width: 0;
    position: relative;
    z-index: 15;
}

.landing-video-link {
    display: block;
    line-height: 0; /* removes stray inline gap beneath the video */
}

.landing-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* ----- Haze: flat translucent white over the whole window ----- */
.fog-haze {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, var(--fog-haze));
    z-index: 5;
    pointer-events: none;
}

/* ----- Fog -----
   .fog-fade is a screen-sized, fixed box holding the drifting strip. The desktop
   top-to-bottom fade is a mask on this box (not on the very wide strip itself). */
.fog-fade {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--fog-fade-start), rgba(0, 0, 0, var(--fog-bottom-opacity)) 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 var(--fog-fade-start), rgba(0, 0, 0, var(--fog-bottom-opacity)) 100%);
}

/* The strip: oversized so the fog fills the window with room to drift.
   The fog image is white wisps with transparency, so it needs no blend mode. */
.fog-track {
    position: absolute; /* inside .fog-fade, which is exactly the screen's size */
    top: -30%;
    left: -25%;
    height: 160%;
    display: flex;
    pointer-events: none;
    will-change: transform;
    opacity: var(--fog-opacity);
    animation: fog-drift var(--fog-duration) linear infinite;
}

.fog-track img {
    display: block;
    flex-shrink: 0;
    height: 100%;
    width: 150vw;
    max-width: none;
    object-fit: cover;
}

.fog-track img.flip {
    transform: scaleX(-1);
}

/* The strip holds 4 images (original, flipped, original, flipped), so sliding it by
   50% of its own width (= exactly 2 images) lands on an identical frame, and the loop
   restarts invisibly. Every seam is a mirror join. */
@keyframes fog-drift {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Respect visitors who ask their device for less motion: fog stays, but still */
@media (prefers-reduced-motion: reduce) {
    .fog-track {
        animation: none;
    }
}

/* ----- Text: centered lines. Every piece of text links to home.html. ----- */
.landing-text {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.landing-text a {
    position: relative;
    z-index: 20; /* text sits above the fog and the video */
    display: block;
    text-decoration: none;
}

/* The two lines: light text for the dark page, tight line spacing */
.landing-text a.landing-lines {
    color: var(--landing-text);
    line-height: 1.25;
}

/* "enter site": slightly smaller, lightened site blue, with extra space above it */
.landing-text a.landing-enter {
    color: var(--landing-link);
    margin-top: 1.1em;
    font-size: 0.875em;
    line-height: 1.25;
}

/* ----- Mobile (≤768px): single column, centered -----
   Order: the two lines, then the video, then "enter site". */
@media (max-width: 768px) {
    /* PHONE-ONLY SETTINGS. Anything set here overrides the matching desktop value
       in the :root block at the top of this file, for phones only. */
    :root {
        /* Phone fog speed (lower = faster). On phones the fog tiles keep the image's natural
           shape (see below), so one drift cycle covers about 6,700px on a typical phone and
           needs a longer duration than desktop for the same on-screen pace.
           If you change the fog image's shape, retune this. */
        --fog-duration: 650s;

        --fog-opacity: .9;     /* fog strength on phones */
        --fog-haze: 0.00;      /* flat white veil on phones */
        --bg-blur: 0px;        /* background image blur on phones */
    }

    /* No top-to-bottom fog fade on phones (desktop only). */
    .fog-fade {
        -webkit-mask-image: none;
                mask-image: none;
    }

    /* Phone fog tiles: natural proportions, NO cropping. On desktop the tiles are forced
       to 150vw wide, which suits a landscape window; on a tall narrow phone that crops each
       tile down to a thin center slice of the image, which then repeats. width: auto lets
       each tile keep the image's own shape so the whole fog image is used. */
    .fog-track img {
        width: auto;
    }

    .landing {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.25rem;
        /* min-height (100dvh) and align-content: center are inherited from the base
           rule, so the whole block (text, video, "enter site") is vertically centered */
        padding: 1.25rem 1rem 2rem;
    }

    /* Dissolve the wrapper so its two links become separate grid items */
    .landing-text {
        display: contents;
    }

    .landing-text a.landing-lines {
        grid-column: 1;
        grid-row: 1;
        text-align: center;
    }

    .landing-video-block {
        grid-column: 1;
        grid-row: 2;
        margin: 0 auto;
    }

    .landing-text a.landing-enter {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0;
        text-align: center;
    }
}