/* Main menu title: sunlit brick lettering standing on a rampart. */

/* ---------------------------------------------------------------------------
   THE DIAL: bump --title-dial by one with every deploy.

   It moves the sun. The long shadow swings round, the lit side of the
   bricks follows the light, the sun glow changes side and the green shifts
   between morning teal and evening lime. If the title looks the same after
   a refresh, the browser is still serving the previous build.

   Steps follow the golden ratio, so any bump moves the shadow by at
   least 57 degrees and no two nearby dials look alike.
   --------------------------------------------------------------------------- */
.menu-title {
    --title-dial: 3;
}

.menu-title {
    /* 0..1 time of day. The sun stays above the wall, so shadows only fall
       between down-right (15deg) and down-left (165deg). */
    --title-t: mod(var(--title-dial) * 0.618034, 1);
    --title-cast: calc(15deg + var(--title-t) * 150deg);
    --title-cast-x: cos(var(--title-cast));
    --title-cast-y: sin(var(--title-cast));
    --title-step-x: calc(var(--title-cast-x) * 0.017em);
    --title-step-y: calc(var(--title-cast-y) * 0.017em);
    --title-hue: calc(166 - var(--title-t) * 26);

    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    margin: 0;
    font-family: "Segoe UI Black", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Arial Black", system-ui, sans-serif;
    font-size: clamp(2.35rem, 8vw, 4rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    animation: menu-title-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Sun glow, on the opposite side from the shadow. */
.menu-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(50% - var(--title-cast-x) * 40%);
    top: calc(32% - var(--title-cast-y) * 32%);
    width: 1.5em;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, hsl(calc(var(--title-hue) - 100) 95% 74% / 0.34), hsl(calc(var(--title-hue) - 100) 90% 60% / 0.1) 55%, transparent);
    pointer-events: none;
}

/* Rampart the lettering stands on. The ends fade so merlon phase never shows. */
.menu-title::after {
    content: "";
    grid-area: 2 / 1;
    width: 86%;
    height: 0.14em;
    margin-top: 0.1em;
    background:
        repeating-linear-gradient(90deg, hsl(var(--title-hue) 48% 46%) 0 0.16em, transparent 0 0.28em) top / 100% 0.08em no-repeat,
        linear-gradient(hsl(var(--title-hue) 48% 46%), hsl(var(--title-hue) 48% 46%)) bottom / 100% 0.06em no-repeat;
    filter: drop-shadow(calc(var(--title-step-x) * 3) calc(var(--title-step-y) * 3) 0 hsl(var(--title-hue) 55% 17%));
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

/* Two copies of the word share one grid cell so their glyphs line up
   exactly: depth behind, brick face on top. */
.menu-title-depth,
.menu-title-face {
    grid-area: 1 / 1;
    margin-inline-end: -0.02em;
    text-align: center;
}

.menu-title-depth {
    user-select: none;
    color: hsl(var(--title-hue) 55% 28%);
    text-shadow:
        calc(var(--title-step-x) * 1) calc(var(--title-step-y) * 1) 0 hsl(var(--title-hue) 52% 26%),
        calc(var(--title-step-x) * 2) calc(var(--title-step-y) * 2) 0 hsl(var(--title-hue) 52% 24%),
        calc(var(--title-step-x) * 3) calc(var(--title-step-y) * 3) 0 hsl(var(--title-hue) 54% 22%),
        calc(var(--title-step-x) * 4) calc(var(--title-step-y) * 4) 0 hsl(var(--title-hue) 54% 20%),
        calc(var(--title-step-x) * 5) calc(var(--title-step-y) * 5) 0 hsl(var(--title-hue) 56% 18%),
        calc(var(--title-step-x) * 6) calc(var(--title-step-y) * 6) 0 hsl(var(--title-hue) 58% 15%),
        calc(var(--title-step-x) * 10) calc(var(--title-step-y) * 10) 0.04em hsl(var(--title-hue) 80% 3% / 0.6),
        calc(var(--title-step-x) * 16) calc(var(--title-step-y) * 16) 0.1em hsl(var(--title-hue) 80% 3% / 0.4),
        calc(var(--title-step-x) * 24) calc(var(--title-step-y) * 24) 0.18em hsl(var(--title-hue) 80% 3% / 0.25),
        0 0 0.5em hsl(var(--title-hue) 70% 45% / 0.35);
}

/* Bricks via background-clip: bed joints every course, head joints drawn
   as conic quadrants and offset half a brick on alternate courses. */
.menu-title-face {
    --brick-h: 0.24em;
    --brick-w: 0.56em;
    --mortar: 0.032em;
    --mortar-color: hsl(var(--title-hue) 70% 10% / 0.42);

    background:
        repeating-linear-gradient(180deg, transparent 0 calc(var(--brick-h) - var(--mortar)), var(--mortar-color) 0 var(--brick-h)),
        conic-gradient(at var(--mortar) var(--brick-h), transparent 75%, var(--mortar-color) 0) 0 0 / var(--brick-w) calc(var(--brick-h) * 2),
        conic-gradient(at var(--mortar) var(--brick-h), transparent 75%, var(--mortar-color) 0) calc(var(--brick-w) / 2) var(--brick-h) / var(--brick-w) calc(var(--brick-h) * 2),
        linear-gradient(calc(var(--title-cast) + 90deg), hsl(var(--title-hue) 78% 80%), hsl(var(--title-hue) 60% 56%) 45%, hsl(var(--title-hue) 62% 36%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@keyframes menu-title-rise {
    from {
        opacity: 0;
        transform: translateY(0.12em) scale(0.97);
    }
}

@media (max-width: 520px) {
    .menu-title {
        font-size: clamp(2rem, 11.5vw, 3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-title {
        animation: none;
    }
}