* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

body:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -6px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bg-layer {
    position: fixed;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    z-index: -1;
}

.bg-layer.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bg-layer {
        transition: none;
    }
}

#stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    gap: 1.5vw;
}

.logo-inner {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
    opacity: 0;
    animation: pop-in 0.5s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

/* Palette colors are set as custom properties on #stage by index.js on each
   render, so both the SVG logo and the HTML tagline text below inherit them.
   One color per word (not per letter) keeps each word readable. fill styles
   the SVG wordmark, color styles the HTML tagline text. */
.word-part.c0 { fill: var(--pal-0, #282722); color: var(--pal-0, #282722); }
.word-part.c1 { fill: var(--pal-1, #282722); color: var(--pal-1, #282722); }
.word-part.c2 { fill: var(--pal-2, #282722); color: var(--pal-2, #282722); }

/* BARRIES itself always stays white or black (see pickLogoColor in
   index.js), never a palette color, so it's always legible. */
.word-primary { fill: var(--logo-color, #282722); }

/* Random tagline text, either above or below the logo (never both), set by
   index.js on each render. Baloo 2 was picked to echo the wordmark's
   rounded, heavy letterforms. font-size is computed and set inline by
   index.js so the line's rendered width matches the logo's; the value here
   is only a fallback for the instant before that JS runs. white-space:nowrap
   keeps it a single line, both for looks and so index.js can measure its
   true (unwrapped) width. */
.tagline {
    width: 100%;
    text-align: center;
    font-family: 'Baloo 2', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 8vw;
    /* Baloo 2 reserves a ~1.6x line box (for accents/descenders this
       all-caps text never uses) while the capitals themselves are only
       ~0.64em tall, so the default line-height leaves a huge gap of
       invisible space around the text — on top of #stage's own `gap`.
       This tightens the box to the glyphs' actual height. */
    line-height: 0.5;
    opacity: 0.8;
}

.tagline:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .logo-inner {
        animation: none;
        opacity: 1;
    }
}

@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    70% {
        opacity: 1;
        transform: scale(1.06);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
}

/* Without this the link falls back to the browser default (blue, underlined),
   clashing with .hint's deliberately muted, uppercase style. */
.hint a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.35);
    text-underline-offset: 0.2em;
}

.hint a:hover,
.hint a:focus-visible {
    color: rgba(0, 0, 0, 0.6);
    text-decoration-color: currentColor;
}