/* Shared by the home and splash pages: colours, the background, and the clock panel. */

:root {
    --color-text: #ffffff;
    --color-bg: #26262b;
    /* What you see when the daily image doesn't load (see html::before below):
       hard-edged circles and diagonal bands on a deep blue-violet, colourful and
       sharp-edged so the glass panels over them show off their blur. Sized in vmin,
       so it keeps its shapes on any screen. Top layer first. */
    --bg-art:
        radial-gradient(circle at 80% 20%, #ffb347 0 13vmin, transparent calc(13vmin + 1px)),
        radial-gradient(circle at 16% 78%, #ff5e8a 0 24vmin, transparent calc(24vmin + 1px)),
        radial-gradient(circle at 64% 88%, #2ec4b6 0 9vmin, transparent calc(9vmin + 1px)),
        linear-gradient(115deg, transparent 37%, #7b5cff 37% 51%, transparent 51% 56%, #2ec4b6 56% 59%, transparent 59%),
        linear-gradient(160deg, #1c1a3a, #3a1c4f 55%, #0f2f45);
    /* Glass (see .glass below). The tint is what makes it "tinted" rather than
       clear glass: raise its alpha for more opaque, more readable panels. */
    --glass-tint: rgba(59, 59, 59, 0.25);
    --glass-backdrop: blur(14px) saturate(170%) brightness(0.95);
}

html {
    height: 100%;
    background-color: var(--color-bg);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text);
}

body {
    margin: 0;
    min-height: 100%;
    box-sizing: border-box;
}

/* The background, in two layers fixed behind the page: the daily image (::after)
   over the art (::before). The page starts plain dark grey; the art fades in
   slowly after a second, so if the image arrives in time (it nearly always does,
   and covers the art) the art is never seen, and if it doesn't, the art takes over
   gently instead of flashing. */
html::before,
html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
}

html::before {
    background: var(--bg-art);
    animation: art-in 4s ease-in-out 1s both;
}

html::after {
    background: url("/api/image/daily") center / cover no-repeat;
}

@keyframes art-in {
    from {
        opacity: 0;
    }
}

[hidden] {
    display: none !important;
}

/* Tinted glass, after Apple's Liquid Glass ("Tinted" setting) minus the refraction:
   a frosted, saturated backdrop under a light tint, lit from the top left. On top
   of the tint, a faint sheen on the upper half; a bright inner rim on the top and
   left edges, a dim one on the others; a soft shadow lifting it off the
   background; and (::before) a hairline border, bright at the lit corners and
   fading out along the edges. Takes its shape from the element's border-radius. */
.glass {
    position: relative;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), transparent 50%) var(--glass-tint);
    backdrop-filter: var(--glass-backdrop);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 1px 0 1px rgba(255, 255, 255, 0.08),
        inset 0 -1px 1px rgba(255, 255, 255, 0.06),
        0 6px 24px rgba(0, 0, 0, 0.22);
}

.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.02) 65%, rgba(255, 255, 255, 0.16));
    /* Keep only the 1px padding ring. */
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* The clock panel: time and date on the left, the weather on the right.
   Filled by startClockPanel() in /js/common.js. Sizes are in em, so setting the
   panel's font-size scales all of it. */
.clock-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.125em 1em;
    padding: 0.75em 1em;
    border-radius: 0.875em;
    cursor: default;
    user-select: none;
}

.clock-panel .clock {
    font-size: 3em;
    line-height: 1.1;
}

.clock-panel .date {
    font-size: 1.05em;
}

.clock-panel .weather {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 1.6em;
    text-align: right;
}

.clock-panel .location {
    display: block;
    /* Inside .weather, so relative to its 1.6em. */
    font-size: 0.625em;
}

/* Three pulsing dots while the weather loads. Inline and sized in em, so it sits
   in the text line like a word and the box keeps its height when the weather
   replaces it. */
.loader {
    display: inline-block;
    vertical-align: middle;
    width: 2.5em;
    aspect-ratio: 5;
    --_g: no-repeat radial-gradient(circle closest-side, #fff 90%, #0000);
    background:
        var(--_g) 0% 50%,
        var(--_g) 50% 50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: loader 1s infinite linear;
}

@keyframes loader {
    33% {
        background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%
    }
}