.klock-demo {
    cursor: pointer;
}

.klock-demo.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: linear-gradient(to bottom, #07080c 0%, #10121a 45%, #181b24 100%);
}

.klock-demo.is-expanded .klock-demo-title {
    display: none;
}

.klock-demo.is-expanded .klock-canvas {
    flex-shrink: 0;
    overflow: visible;
    transform: scale(var(--demo-scale, 1));
    transform-origin: center center;
    transition: transform 0.25s ease;
}

body.klock-demo-expanded {
    overflow: hidden;
}

.klock-page.has-expanded-demo .klock-demos > .klock-demo:not(.is-expanded) {
    visibility: hidden;
}

.klock-page.has-expanded-demo .clock-controls {
    display: none;
}

.klock-page {
    margin: -1.5rem calc(-0.5 * var(--bs-gutter-x, 0.75rem));
    max-width: min(98vw, 78rem);
    margin-inline: auto;
}

.klock-demos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1rem;
    row-gap: 2rem;
}

.klock-demo-title {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-transform: lowercase;
}

.clock-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-inline: 0.25rem;
}

.clock-time-label {
    grid-column: 1;
    grid-row: 1;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.clock-time-slider {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

#useNowBtn {
    grid-column: 2;
    grid-row: 1;
}

.klock-canvas {
    --lamp-size: 0.65rem;
    --center-disk: 3.5rem;
    --ring-radius: calc(var(--center-disk) * 0.22);
    --beam-length: 15rem;
    --beam-width: 8.5rem;
    --backboard-size: min(20rem, 94%);
    --light-warm: 255, 236, 190;
    --light-hot: 255, 248, 220;

    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.5rem;
    background: linear-gradient(to bottom, #07080c 0%, #10121a 45%, #181b24 100%);
}

.clock-lamps {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.clock-backboard {
    --light-x: 50%;
    --light-y: 26%;
    --shadow-x: 50%;
    --shadow-y: 74%;

    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--backboard-size);
    height: var(--backboard-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at var(--light-x) var(--light-y), rgba(255, 236, 190, 0.14), transparent 50%),
        radial-gradient(circle at var(--shadow-x) var(--shadow-y), rgba(0, 0, 0, 0.48), transparent 54%),
        linear-gradient(155deg, #45301c 0%, #2a1d11 46%, #161009 100%);
    box-shadow:
        inset 0 0 2.5rem rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(72, 50, 30, 0.65);
    transition:
        --light-x 0.35s ease,
        --light-y 0.35s ease,
        --shadow-x 0.35s ease,
        --shadow-y 0.35s ease;
    z-index: 0;
}

.clock-hour-ticks {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.clock-hour-tick {
    position: absolute;
    width: 1.5px;
    height: 0.45rem;
    border-radius: 1px;
    background: linear-gradient(to top, rgba(170, 130, 85, 0.95), rgba(230, 195, 145, 0.55));
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.45);
}

.clock-lamp {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--lamp-angle)) translateY(calc(-1 * var(--ring-radius)));
    transform-origin: center center;
}

.lamp-beam-origin {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--beam-width);
    height: var(--beam-length);
    transform: translate(-50%, -100%);
    transform-origin: 50% 100%;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.clock-canvas-demo-1 .lamp-beam-origin {
    opacity: 0;
}

.clock-canvas-demo-1 .clock-lamp.is-active .lamp-beam-origin {
    opacity: 1;
}

.clock-canvas-demo-2 .lamp-beam-origin {
    opacity: var(--beam-strength, 0);
}

[data-klock-demo="2"] .klock-canvas {
    --beam-width: 17rem;
}

[data-klock-demo="5"] .klock-canvas {
    --beam-width: 34rem;
}

.clock-canvas-demo-3 {
    --spoke-inset: 4.35rem;
    --bulb-length: 4rem;
    --bulb-width: 0.42rem;
}

[data-klock-demo="6"] .klock-canvas {
    --spoke-inset: 3.15rem;
}

.clock-spokes {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.clock-canvas-demo-3 .clock-spoke {
    --bulb-strength: 0;

    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--spoke-angle)) translateY(calc(-1 * var(--spoke-inset)));
    transform-origin: center center;
    transition: --bulb-strength 0.35s ease;
}

.spoke-bulb {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--bulb-width);
    height: var(--bulb-length);
    transform: translate(-50%, calc(-1 * var(--bulb-length)));
}

.spoke-bulb-glass {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        to top,
        rgba(36, 24, 14, calc(0.55 + (1 - var(--bulb-strength)) * 0.35)) 0%,
        rgba(var(--light-warm), calc(0.08 + var(--bulb-strength) * 0.5)) 48%,
        rgba(var(--light-hot), calc(0.12 + var(--bulb-strength) * 0.82)) 100%
    );
    border: 1px solid rgba(88, 60, 34, calc(0.35 + (1 - var(--bulb-strength)) * 0.35));
    box-shadow:
        0 0 calc(0.15rem + var(--bulb-strength) * 1.35rem) rgba(var(--light-warm), calc(var(--bulb-strength) * 0.72)),
        inset 0 calc(var(--bulb-strength) * 0.35rem) calc(var(--bulb-strength) * 0.55rem) rgba(var(--light-hot), calc(var(--bulb-strength) * 0.35));
}

.spoke-bulb-filament {
    position: absolute;
    left: 50%;
    top: 8%;
    bottom: 38%;
    width: 1px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: rgba(var(--light-hot), calc(var(--bulb-strength) * 0.95));
    box-shadow: 0 0 calc(var(--bulb-strength) * 0.45rem) rgba(var(--light-warm), calc(var(--bulb-strength) * 0.85));
    opacity: calc(0.15 + var(--bulb-strength) * 0.85);
}

.lamp-beam {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
}

.lamp-disk {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--lamp-size);
    height: var(--lamp-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #080808;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 0.35rem rgba(0, 0, 0, 0.8);
}

@property --beam-strength {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --bulb-strength {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --light-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --light-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 26%;
}

@property --shadow-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --shadow-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 74%;
}

.clock-center-disk {
    --light-x: 50%;
    --light-y: 26%;
    --shadow-x: 50%;
    --shadow-y: 74%;

    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--center-disk);
    height: var(--center-disk);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at var(--light-x) var(--light-y), rgba(255, 236, 190, 0.3), transparent 42%),
        radial-gradient(circle at var(--shadow-x) var(--shadow-y), rgba(0, 0, 0, 0.52), transparent 46%),
        linear-gradient(145deg, #4a3420 0%, #2f2114 52%, #1a120b 100%);
    box-shadow:
        0 0 0 1px rgba(90, 62, 36, 0.55),
        0 0 1rem rgba(0, 0, 0, 0.85);
    transition:
        --light-x 0.35s ease,
        --light-y 0.35s ease,
        --shadow-x 0.35s ease,
        --shadow-y 0.35s ease;
    z-index: 3;
}