/*
 * The clock of Dilu (face, marks, hands and the rim of arcs). Used by the clock home page and by the full page, so both look the same.
 * It is sized by --size (a length) on the element with the class "clock"; everything inside scales with it.
 */

/* the clock */
.clock { position: relative; width: var(--size); aspect-ratio: 1; flex-shrink: 0; }
.clock > * { position: absolute; }

.halo { inset: 0; pointer-events: none; }
.halo span { position: absolute; border: 1.5px solid var(--primary-200); border-radius: 50%; animation: pulse 6s ease-in-out infinite; }
.halo span:nth-child(1) { inset: -1.5%; }
.halo span:nth-child(2) { inset: -3.5%; animation-delay: -3s; }

.face {
    inset: 16.5%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #fff 0%, var(--surface) 55%, var(--key) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow), inset 0 0 0 calc(var(--size) * 0.045) var(--background);
    display: grid;
    place-items: center;
    pointer-events: none;
}
.mark {
    position: absolute;
    top: 63%;
    font-size: calc(var(--size) * 0.065);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--primary-200);
    user-select: none;
}

.dial { inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dial circle { fill: none; }
.ticks-min { stroke: var(--primary-200); stroke-width: 8; }
.ticks-hour { stroke: var(--text-muted); stroke-width: 16; }
.hands { filter: drop-shadow(0 3px 5px rgb(10 45 105 / 0.22)); }
.hand { transform-box: view-box; transform-origin: 50% 50%; }
.hand line { stroke: var(--primary-600); stroke-linecap: round; stroke-width: 26; }
.hand.minute line { stroke-width: 14; }

/* the hours: arcs of the rim, each one as wide as its part of the circle and no wider */
.arc { pointer-events: auto; cursor: pointer; outline: none; }
.arc-shape { fill: var(--primary-100); stroke: var(--primary-100); stroke-width: 16; stroke-linejoin: round; transition: fill 180ms ease-out, stroke 180ms ease-out; }
.arc-ring { fill: none; stroke: var(--text-strong); stroke-width: 26; stroke-linejoin: round; opacity: 0; }
.arc:focus-visible .arc-ring { opacity: 1; }
.arc-text-path { fill: none; stroke: none; }
.arc-label { fill: var(--text-strong); font-weight: 600; text-anchor: middle; pointer-events: none; user-select: none; transition: fill 180ms ease-out; }
.arc.is-active .arc-shape { fill: var(--primary-600); stroke: var(--primary-600); }
.arc.is-active .arc-label { fill: #fff; }

/* the parts come in one after the other */
.clock { animation: clock-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.arc { transform-box: view-box; transform-origin: 50% 50%; animation: arc-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.arc:nth-child(1) { animation-delay: 150ms; }
.arc:nth-child(2) { animation-delay: 230ms; }
.arc:nth-child(3) { animation-delay: 310ms; }
.arc:nth-child(4) { animation-delay: 390ms; }
.arc:nth-child(5) { animation-delay: 470ms; }
.arc:nth-child(6) { animation-delay: 550ms; }
@keyframes clock-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes arc-in { from { opacity: 0; transform: scale(0.92); } }


@media (prefers-reduced-motion: reduce) {
    .clock, .arc { animation: none; }
    .halo span { animation: none; }
    .arc-shape, .arc-label { transition: none; }
}

/* between the two views the clock does not disappear: the browser carries it from one page to the other (where it can) */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .hero-clock, .stage-wrap .clock { view-transition-name: dial; }
}