/* Cookie page extras: the interactive Analytics lever overlaid on the control-panel
   machine. The knob and shaft are separate layers driven by one animated --drop:
   the knob translates down, the shaft's top is clipped away in lockstep, so the knob
   looks like it's wiping the shaft down into the slot. Everything is sized as a
   fraction of the panel height (the machine is 1/3 of the screen), so it scales with
   the machine. TUNE the dials in the .lever block, then re-check on screen. */

@property --drop {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}
@property --knob-left {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}

.lever {
    /* ---- TUNING DIALS (fractions of the panel/machine height) ---- */
    --panel:   33.333svh;                       /* machine height = 1/3 of the screen */
    --shaft-h: calc(var(--panel) * 0.44);       /* shaft length */
    --shaft-w: calc(var(--panel) * 0.100);      /* shaft width (fits the slot) */
    --knob-w:  calc(var(--panel) * 0.150);      /* knob diameter */
    --sink:    25px;                            /* hide the shaft's bottom this much (tuck into the slot) */
    --lip:     calc(var(--panel) * 0.018);      /* how far the knob seats over the shaft top */
    --travel:  calc(var(--panel) * 0.41);       /* how far it drops on click (stop above "Analytics") */
    --base:    calc(var(--panel) * 0.48);       /* shaft bottom, up from the screen bottom (the slot) */
    --nudge-x: 0px;                             /* horizontal alignment over the slot */
    --knob-left-down: 50%;                      /* knob's left at full drop (50% = straight down) */
    --knob-rest: 50%;                           /* knob's left at rest */
    --shaft-left: 50%;                          /* shaft's left within the lever */
    /* -------------------------------------------------------------- */

    position: fixed;
    left: 50%;
    bottom: var(--base);
    width: calc(var(--knob-w) * 1.8);           /* generous click target */
    height: calc(var(--shaft-h) + var(--knob-w));
    transform: translateX(calc(-50% + var(--nudge-x)));
    padding: 0; border: 0; background: none; cursor: pointer;
    z-index: 60;                                /* above the machine */

    --drop: 0px;
    --knob-left: var(--knob-rest);
    transition: --drop .5s cubic-bezier(.34, 1.2, .5, 1),
                --knob-left .5s cubic-bezier(.34, 1.2, .5, 1);   /* slight overshoot = a satisfying clunk */
}
.lever.is-down { --drop: var(--travel); --knob-left: var(--knob-left-down); }

/* Per-lever alignment over each slot, and lean (TUNE these). */
.lever--analytics {
    --nudge-x: 0px;                             /* middle slot */
    --shaft-left: 53%;                          /* shaft nudged right */
    --knob-rest: 53%;
    --knob-left-down: 53%;                       /* straight down, knob also at 53% */
}
.lever--personalization {
    --nudge-x: 13svh;                           /* right slot */
    --base: calc(var(--panel) * 0.424);         /* sits ~20px lower than analytics (perspective) */
    --travel: calc(var(--panel) * 0.41 - 20px); /* drops 20px less, so the down knob lands higher (shaft follows) */
    --shaft-left: 55%;                          /* shaft nudged right */
    --sink: 44px;                               /* hide more of the bottom so it doesn't sit too low */
    --knob-rest: 56%;                           /* knob's resting position (nudged right onto the shaft) */
    --knob-left-down: 71%;                       /* knob leans right as it drops */
}

.lever__shaft {
    position: absolute;
    left: var(--shaft-left);
    bottom: 0;
    width: var(--shaft-w);
    height: var(--shaft-h);
    transform: translateX(-50%);
    clip-path: inset(var(--drop) 0 var(--sink) 0);   /* crop top as it descends; hide the bottom --sink */
}
.lever__knob {
    position: absolute;
    left: var(--knob-left);                     /* animates 50% -> --knob-left-down (perspective lean) */
    bottom: calc(var(--shaft-h) - var(--lip));  /* seat over the shaft's top lip */
    width: var(--knob-w);
    height: auto;
    transform: translate(-50%, var(--drop));    /* drop down, wiping the shaft */
}

/* Phones: the right lever needs a little less travel reduction. */
@media (max-width: 640px) {
    .lever--personalization { --travel: calc(var(--panel) * 0.41 - 17px); }
}

@media (prefers-reduced-motion: reduce) {
    .lever { transition-duration: 0s; }
}