style.css

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap");

/* =========================================
   Cascade Layers Order
   ========================================= */
@layer reset, base, components;

/* =========================================
   Reset
   ========================================= */
@layer reset {
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
}

/* =========================================
   Base
   ========================================= */
@layer base {
    :root {
        /* Colors */
        --color-white: whitesmoke;
        --color-black: #000;
        --border-dark: #333;
        --glare-strong: rgba(255, 255, 255, 0.1);
        --glare-weak: rgba(255, 255, 255, 0.05);
        --metal-1: #bbb;
        --metal-2: #ccc;
        --metal-3: #999;
        /* Label typography */
        --label-font-size: 0.5rem;
        /* Matte black palette (not glossy): subtle tonal steps */
        --matte-black-1: #232323;
        --matte-black-2: #262626;
        --matte-black-3: #2c2c2c;
        --matte-black-ring: #303030;
        --matte-vignette: radial-gradient(circle at 35% 40%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 25%, rgba(0, 0, 0, 0.15) 78%, rgba(0, 0, 0, 0.25) 100%);

        /* Sizing (Baerwald-based, scalable) */
        /* Scale: pixels per millimeter (tweak to resize whole scene) */
        --mm: 1px;

        /* Physical recorded groove band (IEC) */
        --inner-record-mm: 60.3;
        --outer-record-mm: 146.1;

        /* Record groove band radii and groove detail */
        --record-radius: calc(var(--outer-record-mm) * var(--mm));
        --groove-inner-r: calc(var(--inner-record-mm) * var(--mm));
        --groove-outer-r: calc(var(--outer-record-mm) * var(--mm));
        /* Base groove spacing (legacy single track) */
        --groove-line: 1px;
        /* visible ring thickness */
        --groove-gap: 1px;
        /* gap between rings */
        /* Multi-track groove spacing to break uniformity */
        --groove-line-1: 1px;
        --groove-gap-1: 1.25px;
        --groove-line-2: 0.5px;
        --groove-gap-2: 1.75px;
        --groove-line-3: 0.75px;
        --groove-gap-3: 1.35px;
        --groove-alpha-1: 0.042;
        --groove-alpha-2: 0.028;
        --groove-alpha-3: 0.032;

        /* Record diameter = 2 * outer null radius */
        --record-diameter-mm: calc(2 * var(--outer-record-mm));
        --record-size: calc(var(--record-diameter-mm) * var(--mm));

        /* Platter slightly larger than record */
        --platter-overhang-mm: 2;
        --platter-size: calc((var(--record-diameter-mm) + (2 * var(--platter-overhang-mm))) * var(--mm));
        /* helper for responsive scaling */
        --platter-diameter-mm: calc(var(--record-diameter-mm) + (2 * var(--platter-overhang-mm)));
        --platter-radius: calc(var(--platter-size) / 2);

        /* Label derived from inner recorded radius minus allowances */
        --record-clearance-mm: 9;
        --label-radius-mm: calc(var(--inner-record-mm) - var(--record-clearance-mm));
        --label-diameter-mm: calc(2 * var(--label-radius-mm));
        /* ≈ 102.6 mm */
        --label-size: calc(var(--label-diameter-mm) * var(--mm));

        /* Spindle hole ~7.2mm */
        --spindle-diameter-mm: 7.2;
        --spindle-size: calc(var(--spindle-diameter-mm) * var(--mm));

        /* Arm and cartridge sizes (mm-based) */
        --arm-base-mm: 50;
        --arm-base-size: calc(var(--arm-base-mm) * var(--mm));
        --arm-bar-width-mm: 8;
        --arm-bar-width: calc(var(--arm-bar-width-mm) * var(--mm));
        /* Effective tonearm length (pivot center to stylus tip) in mm */
        --eff-length-mm: 232.8;
        /* Mounting distance (pivot-to-spindle) in mm */
        --pivot-to-spindle-mm: 215;
        --mount-distance: calc(var(--pivot-to-spindle-mm) * var(--mm));
        /* Mount angle control (degrees). */
        --mount-angle: 30deg;
        /* Direction from platter center to pivot, computed at runtime */
        --mount-cos: calc(cos(var(--mount-angle)));
        --mount-sin: calc(-1 * sin(var(--mount-angle)));
        /* Arm bar visual length, matched to effective length at the current scale. If your stylus graphic extends
              beyond the bar end, subtract that offset in mm from this value. */
        --arm-bar-length: calc(var(--eff-length-mm) * var(--mm));

        /* Tonearm decorative shoulder geometry */
        --arm-shoulder-width-mm: 15;
        --arm-shoulder-height-mm: 30;

        /* Cartridge styling */
        --cart-width-mm: 16;
        --cart-height-mm: 26;
        --cart-radius-mm: 2;
        --cart-width: calc(var(--cart-width-mm) * var(--mm));
        --cart-height: calc(var(--cart-height-mm) * var(--mm));
        --cart-radius: calc(var(--cart-radius-mm) * var(--mm));
        --cart-color-1: #1e1e1e;
        --cart-color-2: #0f0f0f;
        --cart-accent: #d0d0d0;
        --stylus-length-mm: 10;
        --stylus-length: calc(var(--stylus-length-mm) * var(--mm));
        --stylus-angle: 23.7deg;
        /* Cartridge overlap: lift cartridge upward to fully cover arm tube end (addresses exposed bottom-right corner) */
        --cart-attach-overlap-mm: 3;
        --cart-attach-overlap: calc(var(--cart-attach-overlap-mm) * var(--mm));

        /* Pivot cap visuals */
        --pivot-cap-size-mm: 42;
        --pivot-cap-offset-mm: 4;

        /* Animation timings */
        --spin-duration: 1s;
        --teeter-duration: 1.3333333333s;
        --move-duration: 50s;
        --move-init-duration: 1s;
        --spin-delay: 2s;
        --move-init-delay: 1s;
        --move-delay: 2s;

        /*
        ==========================================
        Tonearm rotation geometry (stylus tip target)
        ==========================================
        Goal: rotate until the stylus tip (effective length endpoint) reaches the inner recorded radius (debug green ring).

        Definitions:
            d        = pivot-to-spindle-mm
            L        = eff-length-mm (pivot center to stylus tip)
            R_outer  = outer-record-mm (outer groove radius)
            R_inner  = inner-record-mm (inner groove radius / start of clearance)

        Law of cosines (tip geometry):
            cos(θ) = (d^2 + L^2 - R^2) / (2 d L)
            θ = acos( (d^2 + L^2 - R^2) / (2 d L) )

        Rotation convention (0deg points downward):
            rotate = 90deg - (mount-angle + θ)

        Implementation approach (modern CSS):
            - Expose intermediate cos ratios for clarity.
            - Use acos() directly to obtain θ (requires CSS trig support).
        */
        /* Law-of-cosines ratios (cos θ) for outer & inner radii (unitless). */
        --lawcos-outer: calc(((var(--pivot-to-spindle-mm) * var(--pivot-to-spindle-mm)) + (var(--eff-length-mm) * var(--eff-length-mm)) - (var(--outer-record-mm) * var(--outer-record-mm))) / (2 * var(--pivot-to-spindle-mm) * var(--eff-length-mm)));
        --lawcos-inner: calc(((var(--pivot-to-spindle-mm) * var(--pivot-to-spindle-mm)) + (var(--eff-length-mm) * var(--eff-length-mm)) - (var(--inner-record-mm) * var(--inner-record-mm))) / (2 * var(--pivot-to-spindle-mm) * var(--eff-length-mm)));
        --arm-theta-outer: acos(var(--lawcos-outer));
        --arm-theta-inner: acos(var(--lawcos-inner));
        --arm-rotate-start: calc(90deg - (var(--mount-angle) + var(--arm-theta-outer)));
        --arm-rotate-end: calc(90deg - (var(--mount-angle) + var(--arm-theta-inner)));

        /* Chassis (wooden base) sizing: add a margin around platter */
        --chassis-margin-mm: 40;
        /* extra mm around platter edge */
        --chassis-diameter-mm: calc(var(--platter-diameter-mm) + 2 * var(--chassis-margin-mm));
        --chassis-size: calc(var(--chassis-diameter-mm) * var(--mm));

        /* Rectangular chassis sizing (wooden plinth) */
        --chassis-margin-x-mm: 70;
        /* widened for pivot space */
        --chassis-margin-y-mm: 50;
        /* vertical extra space */
        --chassis-width-mm: calc(var(--platter-diameter-mm) + 2 * var(--chassis-margin-x-mm));
        --chassis-height-mm: calc(var(--platter-diameter-mm) + 2 * var(--chassis-margin-y-mm));
        --chassis-width: calc(var(--chassis-width-mm) * var(--mm));
        --chassis-height: calc(var(--chassis-height-mm) * var(--mm));
        --chassis-radius: 14px;
        /* corner radius */

        /* Off-center platter offsets (positive moves platter right/down) */
        --platter-offset-x-mm: -25;
        /* shift platter left (negative) */
        --platter-offset-y-mm: 0;
        /* keep vertical centered for now */
        --platter-offset-x: calc(var(--platter-offset-x-mm) * var(--mm));
        --platter-offset-y: calc(var(--platter-offset-y-mm) * var(--mm));

        /* Refined wood palette & grain control */
        --wood-base-deep: #3f2714;
        --wood-base-mid: #59351b;
        --wood-base-warm: #674221;
        --wood-base-light: #7b5230;
        --wood-grain-light-alpha: 0.08;
        --wood-grain-dark-alpha: 0.12;
        --wood-noise-alpha: 0.04;
        --wood-knot-alpha: 0.22;
    }

    body {
        height: 100svh;
        background: var(--color-white);
        overflow: clip;
    }

    /* Visually hidden, still accessible */
    .sr-only {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap;
        clip-path: inset(50%);
        border: 0;
        padding: 0;
        margin: -1px;
    }

    /* Play/Pause toggle button */
    .play-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 10;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 8px 12px;
        border-radius: 999px;
        font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        cursor: pointer;
        user-select: none;
    }

    .play-toggle__text {
        display: inline-block;
    }

    .play-toggle__text.pause {
        display: none;
    }

    /* Checked state shows Pause */
    #play-toggle:checked+.play-toggle .play-toggle__text.play {
        display: none;
    }

    #play-toggle:checked+.play-toggle .play-toggle__text.pause {
        display: inline-block;
    }
}

/* =========================================
   Components: Record Player (block)
   ========================================= */
@layer components {
    .record-player {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--chassis-width);
        height: var(--chassis-height);
    }

    .record-player__platter {
        background-color: var(--color-white);
        width: var(--platter-size);
        aspect-ratio: 1;
        border-radius: 50%;
        /* center the platter relative to the .record-player anchor */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% + var(--platter-offset-x))) translateY(calc(-50% + var(--platter-offset-y)));
        display: grid;
        justify-items: center;
        align-items: center;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    /* Debug visuals are only shown when parent has .debug class */
    .record-player.debug .record-player__platter::before,
    .record-player.debug .record-player__platter::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        pointer-events: none;
        z-index: 6;
    }

    .record-player.debug .record-player__platter::before {
        width: calc(2 * var(--outer-record-mm) * var(--mm));
        height: calc(2 * var(--outer-record-mm) * var(--mm));
        border: 2px dashed rgba(0, 188, 212, 0.8);
    }

    .record-player.debug .record-player__platter::after {
        width: calc(2 * var(--inner-record-mm) * var(--mm));
        height: calc(2 * var(--inner-record-mm) * var(--mm));
        border: 2px dashed rgba(139, 195, 74, 0.9);
    }

    .record-player__record {
        /* exact record size derived from Baerwald nulls and scale */
        width: var(--record-size);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--color-black);
        /* position relative inside the platter so transforms originate at center */
        position: relative;
        display: grid;
        justify-items: center;
        align-items: center;
        /* Layered gradients:
           1) Inner mask to keep center label area flat (black) up to inner groove radius.
           2) Repeating fine grooves from inner to outer recorded radius, mm-based spacing.
           3) Soft highlight near inner band edge.
           4) Soft outer rim lift near the recorded edge. */
        background-image:
            /* Outer cap: hide grooves beyond recorded band */
            radial-gradient(circle at center,
                rgba(0, 0, 0, 0) 0 var(--groove-outer-r),
                var(--color-black) calc(var(--groove-outer-r) + 0.2px)),
            /* Inner cap: keep center flat to inner groove radius */
            radial-gradient(circle at center,
                var(--color-black) 0 var(--groove-inner-r),
                rgba(0, 0, 0, 0) calc(var(--groove-inner-r) + 0.2px)),
            /* Multi-track grooves with varied spacing to avoid regularity */
            repeating-radial-gradient(circle at center,
                rgba(255, 255, 255, var(--groove-alpha-1)) var(--groove-inner-r) calc(var(--groove-inner-r) + var(--groove-line-1)),
                rgba(0, 0, 0, 0) calc(var(--groove-inner-r) + var(--groove-line-1)) calc(var(--groove-inner-r) + var(--groove-line-1) + var(--groove-gap-1))),
            repeating-radial-gradient(circle at center,
                rgba(255, 255, 255, var(--groove-alpha-2)) var(--groove-inner-r) calc(var(--groove-inner-r) + var(--groove-line-2)),
                rgba(0, 0, 0, 0) calc(var(--groove-inner-r) + var(--groove-line-2)) calc(var(--groove-inner-r) + var(--groove-line-2) + var(--groove-gap-2))),
            repeating-radial-gradient(circle at center,
                rgba(255, 255, 255, var(--groove-alpha-3)) var(--groove-inner-r) calc(var(--groove-inner-r) + var(--groove-line-3)),
                rgba(0, 0, 0, 0) calc(var(--groove-inner-r) + var(--groove-line-3)) calc(var(--groove-inner-r) + var(--groove-line-3) + var(--groove-gap-3))),
            /* Inner and outer soft shading for depth */
            radial-gradient(circle at center,
                rgba(255, 255, 255, 0.05) var(--groove-inner-r),
                rgba(255, 255, 255, 0.02) calc(var(--groove-inner-r) + 6px),
                rgba(255, 255, 255, 0.0) calc(var(--groove-inner-r) + 14px)),
            radial-gradient(circle at center,
                rgba(255, 255, 255, 0.0) calc(var(--groove-outer-r) - 24px),
                rgba(255, 255, 255, 0.04) calc(var(--groove-outer-r) - 8px),
                rgba(255, 255, 255, 0.06) var(--groove-outer-r));
        overflow: clip;
    }

    /* Spindle hole */
    .record-player__record::before {
        content: "";
        position: absolute;
        background-color: var(--color-bg);
        box-shadow: 0 0 5px black;
        width: var(--spindle-size);
        aspect-ratio: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: 1;
    }

    /* Label radius debug ring only when .debug */
    .record-player.debug .record-player__record::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(2 * var(--label-radius-mm) * var(--mm));
        height: calc(2 * var(--label-radius-mm) * var(--mm));
        border: 1px dashed rgba(255, 152, 0, 0.9);
        border-radius: 50%;
        pointer-events: none;
        z-index: 7;
    }

    .record-player__label {
        /* matte dark gray with subtle tonal variation and softened vignette */
        background:
            linear-gradient(135deg, var(--matte-black-2) 0%, var(--matte-black-1) 50%, var(--matte-black-3) 100%),
            var(--matte-vignette);
        width: var(--label-size);
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        border-radius: 50%;
        overflow: hidden;
        /* lighter diffuse inner glow + faint outer halo */
        box-shadow:
            inset 0 0 4px rgba(255, 255, 255, 0.05),
            inset 0 0 12px rgba(255, 255, 255, 0.04),
            0 0 8px rgba(255, 255, 255, 0.05),
            0 0 22px rgba(255, 255, 255, 0.035);
    }

    .record-player__label::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 42%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 35%, rgba(0, 0, 0, 0.25) 80%, rgba(0, 0, 0, 0.45) 100%);
        mix-blend-mode: normal;
        opacity: 1;
        pointer-events: none;
    }

    .record-player__label::after {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        right: 4%;
        transform: translateY(-50%);
        background: #fff;
        color: #111;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        font-weight: 600;
        font-size: var(--label-font-size);
        letter-spacing: 0.12ch;
        padding: 0.1em 0.3em;
        display: inline-block;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }

    /* Glare overlay */
    .record-player__glare {
        height: 100%;
        width: 100%;
        filter: blur(2vh);
        /* softens the glare edges */
        pointer-events: none;
        /* non-interactive decorative layer */
        user-select: none;
        /* anchor glare to platter center */
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Glare shapes simulate reflection */
    .record-player__glare::before {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        background-color: var(--glare-strong);
        clip-path: polygon(100% 0, 100% 50%, 0 50%, 0 100%);
        /* a soft diagonal glare */
    }

    .record-player__glare::after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        background-color: var(--glare-weak);
        clip-path: polygon(0 0, 50% 0, 50% 100%, 100% 100%);
        /* a softer diagonal glare */
    }

    /* Tonearm pivot */
    .record-player__pivot {
        width: var(--arm-base-size);
        height: var(--arm-base-size);
        /* subtle metal look and shadow for depth */
        background-image: linear-gradient(180deg, #ddd, #bfbfbf);
        border-radius: 50%;
        position: absolute;
        /* position pivot from platter center by mounting distance to the right */
        top: 50%;
        left: 50%;
        /* center the pivot circle on its origin, then offset by mount distance at 45° to top-right */
        translate: calc(var(--platter-offset-x) + var(--mount-distance) * var(--mount-cos) - 50%) calc(var(--platter-offset-y) + var(--mount-distance) * var(--mount-sin) - 50%);
        /* uses independent transform longhand to compose with transform animations */
        display: grid;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }

    .record-player__pivot::before {
        /* visual pivot cap */
        content: "";
        width: calc(var(--pivot-cap-size-mm) * var(--mm));
        height: calc(var(--pivot-cap-size-mm) * var(--mm));
        background: rgb(197, 196, 196);
        border-radius: 50%;
        position: absolute;
        top: calc(var(--pivot-cap-offset-mm) * var(--mm));
        left: calc(var(--pivot-cap-offset-mm) * var(--mm));
    }

    /* Debug: effective length L (pivot center to stylus tip) */
    .record-player.debug .record-player__pivot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: var(--arm-bar-length);
        border-left: 1px dashed rgba(0, 0, 255, 0.7);
        z-index: 14;
        pointer-events: none;
    }


    /* Main arm element that extends from the pivot */
    .record-player__arm {
        position: absolute;
        left: 50%;
        top: 50%;
        height: var(--arm-bar-length);
        width: var(--arm-bar-width);
        background-image: linear-gradient(to right, var(--metal-1), var(--metal-2) 40%, var(--metal-3));
        /* anchor arm's top center at pivot center so length extends outward from true pivot */
        transform: translateX(-50%);
        transform-origin: top center;
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
        outline: none;
    }

    .record-player__arm::before {
        /* decorative shoulder on the arm */
        content: "";
        position: absolute;
        width: calc(var(--arm-shoulder-width-mm) * var(--mm));
        height: calc(var(--arm-shoulder-height-mm) * var(--mm));
        /* move shoulder above the arm tube using its own height */
        top: calc(-1 * var(--arm-shoulder-height-mm) * var(--mm));
        left: 50%;
        transform: translateX(-50%);
        clip-path: polygon(0% 50%, 25% 100%, 75% 100%, 100% 50%, 100% 0, 0 0);
        background-image: linear-gradient(to bottom, transparent 45%, rgba(255, 255, 255, 0.04) 55%), linear-gradient(to right, #222, #111);
        pointer-events: none;
        z-index: 5;
    }

    .record-player__cartridge {
        content: "";
        display: block;
        /* display: none; */
        position: absolute;
        /* center the cartridge horizontally at arm tip */
        left: 50%;
        transform: translateX(-50%) rotate(var(--stylus-angle));
        transform-origin: top center;
        /* place directly below the arm end */
        width: var(--cart-width);
        height: var(--cart-height);
        /* Lift cartridge slightly upward to overlap arm tube and hide exposed corner */
        bottom: calc(-1 * var(--cart-height) + var(--cart-attach-overlap));
        border-radius: var(--cart-radius);
        /* slightly tapered front with beveled shoulders */
        clip-path: polygon(8% 0%, 92% 0%, 100% 35%, 100% 100%, 0 100%, 0 35%);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0 40%, rgba(0, 0, 0, 0.12) 60% 100%),
            linear-gradient(to right, var(--cart-color-1), var(--cart-color-2));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        pointer-events: none;
        outline: none;
    }

    .record-player.debug .record-player__cartridge {
        outline: 1px dashed rgba(0, 0, 255, 0.7);
        outline-offset: -1px;
    }

    /* Debug: static dashed line from pivot toward spindle (mount distance labeled d) */
    .record-player.debug::before,
    .record-player.debug::after {
        pointer-events: none;
    }

    .record-player.debug::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--mount-distance);
        height: 0;
        border-top: 1px dashed rgba(255, 0, 0, 0.7);
        /* rotate along negative mount angle so it points from center to pivot */
        transform: rotate(calc(-1 * var(--mount-angle)));
        transform-origin: left center;
        z-index: 15;
        left: calc(50% + var(--platter-offset-x));
        top: calc(50% + var(--platter-offset-y));
    }

    .record-player.debug::after {
        content: "d";
        position: absolute;
        top: 50%;
        left: 50%;
        /* rotate to align with line, then translate half its length */
        transform: rotate(calc(-1 * var(--mount-angle))) translateX(calc(var(--mount-distance) / 2)) translateY(-50%);
        transform-origin: left center;
        font: 600 10px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        color: rgba(255, 0, 0, 0.85);
        background: rgba(255, 255, 255, 0.6);
        padding: 0 2px;
        border-radius: 2px;
        z-index: 16;
        left: calc(50% + var(--platter-offset-x));
        top: calc(50% + var(--platter-offset-y));
    }

    /* CSS-only control: animations are present but paused by default so the
       checkbox can toggle animation-play-state. */

    .record-player .record-player__record {
        /* record continuously spins but starts paused */
        animation: spin var(--spin-duration) infinite linear var(--spin-delay);
        animation-play-state: paused;
        transform-origin: 50% 50%;
    }

    .record-player .record-player__glare::before {
        animation: teeter var(--teeter-duration) linear infinite;
        animation-play-state: paused;
        transform-origin: 50% 50%;
    }

    .record-player .record-player__glare::after {
        animation: teeter-flip var(--teeter-duration) linear infinite;
        animation-play-state: paused;
        transform-origin: 50% 50%;
    }

    .record-player .record-player__pivot {
        /* run an initial move then long move; both start paused */
        animation: move-init var(--move-init-duration) 1 forwards var(--move-init-delay), move var(--move-duration) infinite linear var(--move-delay);
        animation-play-state: paused, paused;
        transform-origin: 50% 50%;
    }

    /* When checked, set all related animations to running (play) */
    #play-toggle:checked~main .record-player .record-player__record,
    #play-toggle:checked~main .record-player .record-player__glare::before,
    #play-toggle:checked~main .record-player .record-player__glare::after,
    #play-toggle:checked~main .record-player .record-player__pivot {
        animation-play-state: running !important;
    }
}

/* =========================================
   Accessibility: Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    @layer components {

        .record-player__record,
        .record-player__label {
            animation: none !important;
        }

        .record-player__glare {
            filter: none;
        }

        .record-player__glare::before,
        .record-player__glare::after {
            animation: none !important;
        }

        .record-player__pivot {
            animation: none !important;
        }
    }
}

/* =========================================
   Responsive: scale by viewport to fit
   ========================================= */
@media (max-width: 480px) {
    @layer base {
        :root {
            /* Smaller on phones: reduce overall size */
            --mm: calc(72vmin / var(--platter-diameter-mm));
            --label-font-size: clamp(8px, 2vmin, 11px);
        }
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    @layer base {
        :root {
            /* Enlarge on tablets */
            --mm: calc(100vmin / var(--platter-diameter-mm));
            --label-font-size: clamp(10px, 1.8vmin, 14px);
        }
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    @layer base {
        :root {
            /* Short landscape screens (phones) */
            --mm: calc(60vmin / var(--platter-diameter-mm));
        }
    }
}

/* Medium desktop: scale up from base size */
@media (min-width: 769px) and (max-width: 1199px) {
    @layer base {
        :root {
            --mm: calc(55vmin / var(--record-diameter-mm));
            --label-font-size: clamp(11px, 1.4vmin, 15px);
        }
    }
}

/* Large desktop: even larger presentation */
@media (min-width: 1200px) {
    @layer base {
        :root {
            --mm: calc(62vmin / var(--record-diameter-mm));
            --label-font-size: clamp(12px, 1.2vmin, 16px);
        }
    }
}

/* =========================================
   Animations
   ========================================= */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* a small positive rotation to simulate teetering */
@keyframes teeter {
    0% {
        transform: rotate(0deg);
    }

    35% {
        transform: rotate(2.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* a small negative rotation to simulate teetering */
@keyframes teeter-flip {
    0% {
        transform: rotate(0deg);
    }

    35% {
        transform: rotate(-2.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes move-init {
    from {
        rotate: 0deg;
    }

    to {
        rotate: var(--arm-rotate-start);
    }
}

@keyframes move {
    0% {
        rotate: var(--arm-rotate-end);
    }

    97%,
    100% {
        rotate: var(--arm-rotate-end);
    }
}

@layer components {
    .record-player__chassis {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--chassis-width);
        height: var(--chassis-height);
        transform: translate(-50%, -50%);
        border-radius: var(--chassis-radius);
        background: var(--wood-base-mid);
        /* solid color only */
        box-shadow:
            0 0 0 3px rgba(0, 0, 0, 0.35),
            0 6px 18px -4px rgba(0, 0, 0, 0.55),
            0 20px 42px -12px rgba(0, 0, 0, 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.08),
            /* subtle top highlight */
            inset 0 -3px 6px rgba(0, 0, 0, 0.5),
            /* bottom dark edge */
            inset 0 0 10px rgba(0, 0, 0, 0.5),
            inset 0 0 3px rgba(255, 255, 255, 0.05);
        overflow: hidden;
    }

    .record-player__chassis::before,
    .record-player__chassis::after {
        content: none;
        /* remove pattern layers */
        background: none;
    }
}