/* ============================================================
   AKIRA.MEDIA — Landing / Homepage Stylesheet
   Page-specific styles for the root landing page.
   Extends the shared base (akiramedia.css).
   ============================================================ */

/* === Sticky-footer layout ===
   Only affects the homepage (this stylesheet is loaded here alone).
   Body becomes a flex column so the footer is pushed to the bottom of
   the viewport when the content is shorter than the screen, and flows
   naturally below the content when it isn't. The fixed background
   layers (body::before / ::after) are position:fixed, so they don't
   participate in this flex layout. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* === Content reveal ===
   Hidden until the preloader finishes, then faded in (the preloader
   script adds .visible). flex-grow fills the space between banner and
   footer so the footer sits at the bottom. */
#landingWrap {
    opacity: 0;
    transition: opacity 0.6s ease;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#landingWrap.visible {
    opacity: 1;
}

/* Footer keeps its height at the bottom of the column */
footer {
    flex-shrink: 0;
}

/* === Banner ===
   Colours for .title h1 / .subtitle h2 are themed by the base
   stylesheet (whitesmoke on light, black on dark). Sizing/font
   live here since the gallery's own sizing sits in gallery.css. */
.banner {
    text-align: center;
    padding: 45px 20px 10px;
}

.title h1 {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 3.5rem;
    margin: 0;
    letter-spacing: 2px;
}

.subtitle h2 {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 1.4rem;
    margin: 10px 0 0;
    opacity: 0.85;
}

/* === Landing container ===
   Horizontally centred (margin:0 auto). As a flex column that grows to
   fill #landingWrap, it occupies the space between the banner and the
   footer; justify-content:center centres the cards if they ever don't
   fill it. The row and cards grow to fill it at all widths — see the
   fill block below. */
.landing-container {
    max-width: 80vw;
    margin: 0 auto;
    padding: 60px 20px 60px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* === Fill available height ===
   The row grows to fill the container and each card fills its column, so
   the cards use the full height between banner and footer instead of
   sitting at their fixed min-height. On desktop the two cards share one
   flex line side by side; on mobile they stack onto two lines and
   align-content:stretch splits the row's height evenly between them. The
   min-height on .landing-card stays a floor for very short screens. */
.landing-container .row {
    flex: 1 1 auto;
    align-content: stretch;
}

.landing-card {
    height: 100%;
}

/* === Selectable section cards ===
   Whole card is an <a>, so the entire block is clickable. Dark
   translucent surface with blur to match the comment badges /
   modal panels used elsewhere on the site; reads well over both
   the light (blue) and dark (mauve) backgrounds. */
.landing-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    min-height: 320px;
    padding: 30px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    color: whitesmoke;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease,
                box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-card:hover {
    background: rgba(0, 0, 0, 0.58);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.landing-card:active {
    transform: translateY(-2px);
}

/* Keyboard focus ring for accessibility */
.landing-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

/* === Card text === */
.landing-card-title {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 2.4rem;
    margin: 0 0 8px;
    color: whitesmoke;
}

.landing-card-text {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 1rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

/* === Section card scrolling mosaic ===
   DB images tile a card and scroll behind a dark overlay so the label
   stays readable. The image set is rendered twice in the markup;
   translateY(-50%) lands exactly on the start of the duplicate, so the
   loop is seamless. Gallery scrolls up; Mixes reverses to scroll down.
   Decorative only (aria-hidden).

   Each card is tuned independently via the custom properties below —
   edit the Gallery and Mixes blocks separately. Image COUNTS live in
   index.php ($galleryTileCount / $mixCoverLimit / $mixTileTarget). */

/* Gallery card controls */
.gallery-card {
    --mosaic-columns: 6;          /* tile density (grid columns) */
    --mosaic-speed: 10s;          /* one full scroll loop; lower = faster */
    --mosaic-overlay: 0.5;        /* dark overlay opacity (readability) */
    --mosaic-overlay-hover: 0.25; /* overlay opacity on hover */
}

/* Mixes card controls */
.mixes-card {
    --mosaic-columns: 3;
    --mosaic-speed: 10s;
    --mosaic-overlay: 0.5;
    --mosaic-overlay-hover: 0.25;
}

.card-mosaic {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.card-mosaic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--mosaic-overlay, 0.5));
    z-index: 1;
    transition: background-color 0.25s ease;
}

.card-mosaic-track {
    display: grid;
    grid-template-columns: repeat(var(--mosaic-columns, 6), 1fr);
    width: 100%;
    animation: mosaicScroll var(--mosaic-speed, 15s) linear infinite;
}

/* Mixes scrolls in the opposite direction (downward) */
.mixes-card .card-mosaic-track {
    animation-direction: reverse;
}

.card-mosaic-track img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

@keyframes mosaicScroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* Keep the label above the mosaic and overlay */
.landing-card-inner {
    position: relative;
    z-index: 2;
}

/* Brighten the images slightly on hover */
.landing-card:hover .card-mosaic::after {
    background: rgba(0, 0, 0, var(--mosaic-overlay-hover, 0.35));
}

/* Hold the mosaic still for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .card-mosaic-track {
        animation: none;
    }
}

/* === Mobile === */
@media (max-width: 768px) {
    .title h1 {
        font-size: 2.4rem;
    }

    .subtitle h2 {
        font-size: 1.1rem;
    }

    .landing-container {
        padding: 28px 20px;
    }

    .landing-card {
        min-height: 180px;
        padding: 24px;
    }

    .landing-card-title {
        font-size: 2rem;
    }
}