.archive-cursor,
.archive-transition-layer,
.archive-click-pulse,
.archive-click-sprinkles {
    pointer-events: none;
}

.archive-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    display: none;
    width: 1px;
    height: 1px;
    opacity: 0;
    transform: translate3d(var(--archive-cursor-x, -40px), var(--archive-cursor-y, -40px), 0);
    transition: opacity 60ms linear;
}

.archive-cursor::before,
.archive-cursor::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    clip-path: polygon(0 0, 0 78%, 24% 60%, 40% 100%, 54% 94%, 37% 56%, 70% 56%);
}

.archive-cursor::before {
    width: 21px;
    height: 29px;
    background: #000;
}

.archive-cursor::after {
    top: 2px;
    left: 2px;
    width: 16px;
    height: 23px;
    background: #fff;
}

.archive-cursor-glyph {
    position: absolute;
    top: 3px;
    left: 3px;
    display: none;
    min-width: 23px;
    height: 23px;
    place-items: center;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    background: #c0c0c0;
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
    color: #000;
    font: bold 14px/1 "MS Sans Serif", Tahoma, Arial, sans-serif;
}

html.archive-cursor-shuffling .archive-cursor::before,
html.archive-cursor-shuffling .archive-cursor::after { display: none; }

html.archive-cursor-shuffling .archive-cursor-glyph { display: grid; }

.archive-transition-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    visibility: hidden;
    background: var(--archive-fx-bg, #000);
    background-size: var(--archive-fx-size, auto);
    filter: var(--archive-fx-filter, none);
    opacity: 0;
    overflow: hidden;
    transform-origin: var(--archive-click-x) var(--archive-click-y);
}

.archive-transition-layer::before,
.archive-transition-layer::after {
    position: absolute;
    inset: -20%;
    content: "";
}

.archive-transition-layer::before {
    background: var(--archive-fx-before, transparent);
    background-size: var(--archive-before-size, auto);
    mix-blend-mode: var(--archive-before-blend, difference);
}

.archive-transition-layer::after {
    background: var(--archive-fx-after, transparent);
    background-size: var(--archive-after-size, auto);
    mix-blend-mode: var(--archive-after-blend, exclusion);
}

.archive-click-pulse {
    position: fixed;
    top: var(--archive-click-y);
    left: var(--archive-click-x);
    z-index: 2147483646;
    width: 12px;
    height: 12px;
    border: 2px solid var(--archive-pulse-a, #fff);
    box-shadow:
        0 0 0 2px #000,
        0 0 0 4px var(--archive-pulse-b, #ff006e),
        0 0 0 6px var(--archive-pulse-c, #00e5ff);
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    animation: archive-click-pulse var(--archive-transition-duration, 440ms) steps(8, end) forwards;
}

.archive-click-sprinkles {
    position: fixed;
    top: var(--archive-sprinkle-y);
    left: var(--archive-sprinkle-x);
    z-index: 2147483644;
    width: 1px;
    height: 1px;
}

.archive-click-sprinkles i {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 3px;
    height: 6px;
    background: var(--archive-sprinkle-color);
    box-shadow: 1px 1px 0 rgb(0 0 0 / .45);
    animation: archive-click-sprinkle 400ms cubic-bezier(.16, .78, .28, 1) var(--archive-sprinkle-delay) forwards;
}

.archive-click-sprinkles i:nth-child(3n) {
    width: 5px;
    height: 2px;
}

.archive-click-sprinkles i:nth-child(4n) {
    width: 3px;
    height: 3px;
}

html.archive-is-leaving .archive-transition-layer {
    visibility: visible;
    animation-name: var(--archive-layer-animation, archive-fx-circle);
    animation-duration: var(--archive-transition-duration, 440ms);
    animation-timing-function: steps(10, end);
    animation-fill-mode: forwards;
}

html.archive-is-leaving .archive-transition-layer::before {
    animation-name: var(--archive-before-animation, archive-texture-storm);
    animation-duration: var(--archive-transition-duration, 440ms);
    animation-timing-function: steps(9, end);
    animation-fill-mode: forwards;
}

html.archive-is-leaving .archive-transition-layer::after {
    animation-name: var(--archive-after-animation, archive-texture-shear-x);
    animation-duration: var(--archive-transition-duration, 440ms);
    animation-timing-function: steps(9, end);
    animation-fill-mode: forwards;
}

html.archive-is-leaving body > .desktop,
html.archive-is-leaving body > .desktop-shell {
    transform-origin: var(--archive-click-x) var(--archive-click-y);
    animation-name: var(--archive-page-animation, archive-page-dissolve);
    animation-duration: var(--archive-transition-duration, 440ms);
    animation-timing-function: steps(9, end);
    animation-fill-mode: forwards;
}

/* Twenty shuffle-bag variants. */
html.archive-transition-pixel-bloom {
    --archive-layer-animation: archive-fx-circle;
    --archive-page-animation: archive-page-dissolve;
    --archive-before-animation: archive-texture-storm;
    --archive-after-animation: archive-texture-shear-x;
    --archive-fx-bg: repeating-conic-gradient(from 45deg, #000 0 12.5%, #fff 0 25%, #ff006e 0 37.5%, #00e5ff 0 50%);
    --archive-fx-size: 12px 12px;
    --archive-fx-before: repeating-linear-gradient(0deg, transparent 0 7px, #fff 7px 10px, transparent 10px 21px, #000 21px 28px);
    --archive-fx-after: repeating-linear-gradient(90deg, transparent 0 5%, #ff006e 5% 7%, transparent 7% 12%, #00e5ff 12% 14%, transparent 14% 20%);
}

html.archive-transition-hard-iris {
    --archive-layer-animation: archive-fx-diamond;
    --archive-page-animation: archive-page-shrink;
    --archive-before-animation: archive-texture-zoom;
    --archive-after-animation: archive-texture-rotate;
    --archive-fx-bg: repeating-radial-gradient(circle, #fff 0 3px, #000 3px 8px);
    --archive-fx-before: linear-gradient(45deg, #000 0 48%, #fff 48% 52%, #000 52%);
    --archive-fx-after: repeating-conic-gradient(#fff 0 4%, transparent 4% 9%);
    --archive-pulse-b: #fff;
    --archive-pulse-c: #fff;
}

html.archive-transition-venetian {
    --archive-layer-animation: archive-fx-noise;
    --archive-page-animation: archive-page-crush-y;
    --archive-before-animation: archive-texture-scan-y;
    --archive-after-animation: archive-texture-shear-x;
    --archive-fx-bg: repeating-linear-gradient(0deg, #000 0 7px, #d8ff44 7px 12px, #fff 12px 15px, #000 15px 25px);
    --archive-fx-before: repeating-linear-gradient(0deg, transparent 0 18px, #fff 18px 23px);
    --archive-fx-after: repeating-linear-gradient(90deg, transparent 0 12%, #000080 12% 15%, transparent 15% 24%);
    --archive-pulse-b: #d8ff44;
    --archive-pulse-c: #000080;
}

html.archive-transition-crt-fold {
    --archive-layer-animation: archive-fx-slit-h;
    --archive-page-animation: archive-page-crush-y;
    --archive-before-animation: archive-texture-scan-y;
    --archive-after-animation: archive-texture-fade;
    --archive-fx-bg: #001d12;
    --archive-fx-before: repeating-linear-gradient(0deg, rgba(216,255,68,.9) 0 2px, transparent 2px 6px);
    --archive-fx-after: radial-gradient(circle at center, #d8ff44 0 1%, transparent 28%);
    --archive-pulse-b: #d8ff44;
    --archive-pulse-c: #00ff77;
}

html.archive-transition-chroma-shear {
    --archive-layer-animation: archive-fx-wipe-left;
    --archive-page-animation: archive-page-kick-right;
    --archive-before-animation: archive-texture-shear-x;
    --archive-after-animation: archive-texture-shear-y;
    --archive-fx-bg: linear-gradient(90deg, #ff004c 0 33%, #00e5ff 33% 66%, #fff 66%);
    --archive-fx-before: repeating-linear-gradient(90deg, #000 0 4%, transparent 4% 9%);
    --archive-fx-after: repeating-linear-gradient(0deg, transparent 0 13px, #fff 13px 16px);
}

html.archive-transition-checker-surge {
    --archive-layer-animation: archive-fx-zoom-spin;
    --archive-page-animation: archive-page-zoom;
    --archive-before-animation: archive-texture-zoom;
    --archive-after-animation: archive-texture-rotate;
    --archive-fx-bg: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 18px 18px;
    --archive-fx-before: repeating-conic-gradient(transparent 0 25%, #ff3157 0 50%) 0 0 / 48px 48px;
    --archive-fx-after: radial-gradient(circle, transparent 0 30%, #00e5ff 31% 33%, transparent 34%);
}

html.archive-transition-diagonal-cut {
    --archive-layer-animation: archive-fx-diagonal;
    --archive-page-animation: archive-page-kick-left;
    --archive-before-animation: archive-texture-shear-y;
    --archive-after-animation: archive-texture-scan-x;
    --archive-fx-bg: linear-gradient(135deg, #000 0 45%, #fff 45% 52%, #ff5a00 52%);
    --archive-fx-before: repeating-linear-gradient(135deg, transparent 0 15px, #000 15px 21px);
    --archive-fx-after: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 18px);
    --archive-pulse-b: #ff5a00;
    --archive-pulse-c: #fff;
}

html.archive-transition-white-flash {
    --archive-layer-animation: archive-fx-noise;
    --archive-page-animation: archive-page-negative;
    --archive-before-animation: archive-texture-fade;
    --archive-after-animation: archive-texture-zoom;
    --archive-fx-bg: #fff;
    --archive-fx-before: repeating-radial-gradient(circle, #000 0 1px, transparent 1px 5px);
    --archive-fx-after: linear-gradient(90deg, transparent, #000, transparent);
    --archive-pulse-b: #000;
    --archive-pulse-c: #fff;
}

html.archive-transition-negative-burn {
    --archive-layer-animation: archive-fx-circle;
    --archive-page-animation: archive-page-negative;
    --archive-before-animation: archive-texture-rotate;
    --archive-after-animation: archive-texture-storm;
    --archive-fx-bg: repeating-radial-gradient(circle at center, #ff4d00 0 4px, #000 4px 12px, #fff 12px 14px);
    --archive-fx-before: conic-gradient(from 90deg, transparent, #fff, transparent, #000);
    --archive-fx-after: repeating-linear-gradient(25deg, transparent 0 8px, #ff4d00 8px 14px);
    --archive-pulse-b: #ff4d00;
    --archive-pulse-c: #fff;
}

html.archive-transition-barcode {
    --archive-layer-animation: archive-fx-wipe-right;
    --archive-page-animation: archive-page-crush-x;
    --archive-before-animation: archive-texture-scan-x;
    --archive-after-animation: archive-texture-shear-x;
    --archive-fx-bg: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 5px, #000 5px 13px, #fff 13px 15px);
    --archive-fx-before: repeating-linear-gradient(90deg, transparent 0 17px, #ff006e 17px 21px);
    --archive-fx-after: repeating-linear-gradient(0deg, transparent 0 25px, #00e5ff 25px 29px);
}

html.archive-transition-tunnel {
    --archive-layer-animation: archive-fx-zoom-spin;
    --archive-page-animation: archive-page-zoom;
    --archive-before-animation: archive-texture-rotate;
    --archive-after-animation: archive-texture-zoom;
    --archive-fx-bg: repeating-radial-gradient(circle at var(--archive-click-x) var(--archive-click-y), #000 0 14px, #5b24ff 14px 26px, #fff 26px 29px);
    --archive-fx-before: conic-gradient(from 0deg at center, transparent 0 10%, #00e5ff 10% 12%, transparent 12% 22%, #ff006e 22% 24%, transparent 24%);
    --archive-fx-after: radial-gradient(circle at center, transparent 0 18%, #fff 19% 20%, transparent 21% 38%, #000 39% 42%, transparent 43%);
    --archive-pulse-b: #5b24ff;
}

html.archive-transition-photocopy {
    --archive-layer-animation: archive-fx-noise;
    --archive-page-animation: archive-page-photocopy;
    --archive-before-animation: archive-texture-scan-y;
    --archive-after-animation: archive-texture-fade;
    --archive-fx-bg: repeating-radial-gradient(circle, #000 0 1px, #fff 1px 4px);
    --archive-fx-size: 5px 5px;
    --archive-fx-filter: grayscale(1) contrast(5);
    --archive-fx-before: repeating-linear-gradient(0deg, transparent 0 19px, #000 19px 23px);
    --archive-fx-after: linear-gradient(100deg, transparent 0 43%, #fff 45% 52%, transparent 54%);
    --archive-pulse-b: #000;
    --archive-pulse-c: #fff;
}

html.archive-transition-quadrant {
    --archive-layer-animation: archive-fx-diamond;
    --archive-page-animation: archive-page-tilt;
    --archive-before-animation: archive-texture-rotate;
    --archive-after-animation: archive-texture-shear-y;
    --archive-fx-bg: conic-gradient(from 45deg at center, #000 0 25%, #ff3157 0 50%, #fff 0 75%, #0047ff 0);
    --archive-fx-before: repeating-conic-gradient(transparent 0 8%, #fff 8% 10%);
    --archive-fx-after: linear-gradient(90deg, transparent 49%, #000 49% 51%, transparent 51%);
    --archive-pulse-b: #ff3157;
    --archive-pulse-c: #0047ff;
}

html.archive-transition-horizontal-tear {
    --archive-layer-animation: archive-fx-slit-h;
    --archive-page-animation: archive-page-kick-left;
    --archive-before-animation: archive-texture-shear-x;
    --archive-after-animation: archive-texture-scan-y;
    --archive-fx-bg: repeating-linear-gradient(0deg, #000 0 8px, #fff 8px 10px, #7aff00 10px 16px, #000 16px 31px);
    --archive-fx-before: repeating-linear-gradient(0deg, transparent 0 22px, #ff006e 22px 28px);
    --archive-fx-after: linear-gradient(90deg, #00e5ff, transparent 35%, #fff 65%, #000);
    --archive-pulse-b: #7aff00;
}

html.archive-transition-vertical-tear {
    --archive-layer-animation: archive-fx-slit-v;
    --archive-page-animation: archive-page-kick-right;
    --archive-before-animation: archive-texture-shear-y;
    --archive-after-animation: archive-texture-scan-x;
    --archive-fx-bg: repeating-linear-gradient(90deg, #000 0 7px, #fff 7px 9px, #ffea00 9px 15px, #000 15px 27px);
    --archive-fx-before: repeating-linear-gradient(90deg, transparent 0 18px, #0047ff 18px 25px);
    --archive-fx-after: linear-gradient(0deg, #ff3157, transparent 40%, #fff 60%, #000);
    --archive-pulse-b: #ffea00;
    --archive-pulse-c: #0047ff;
}

html.archive-transition-radar {
    --archive-layer-animation: archive-fx-circle;
    --archive-page-animation: archive-page-tilt;
    --archive-before-animation: archive-texture-rotate;
    --archive-after-animation: archive-texture-zoom;
    --archive-fx-bg: #00180f;
    --archive-fx-before: repeating-radial-gradient(circle at center, transparent 0 28px, rgba(95,255,129,.9) 29px 31px, transparent 32px 58px);
    --archive-fx-after: conic-gradient(from 0deg at center, rgba(95,255,129,.9), transparent 15%, transparent 100%);
    --archive-before-blend: screen;
    --archive-after-blend: screen;
    --archive-pulse-b: #5fff81;
    --archive-pulse-c: #fff;
}

html.archive-transition-mosaic {
    --archive-layer-animation: archive-fx-noise;
    --archive-page-animation: archive-page-shrink;
    --archive-before-animation: archive-texture-zoom;
    --archive-after-animation: archive-texture-shear-x;
    --archive-fx-bg: repeating-conic-gradient(#ff3157 0 12.5%, #0047ff 0 25%, #ffea00 0 37.5%, #000 0 50%) 0 0 / 24px 24px;
    --archive-fx-before: repeating-conic-gradient(transparent 0 25%, #fff 0 50%) 0 0 / 9px 9px;
    --archive-fx-after: repeating-linear-gradient(45deg, transparent 0 17px, #00e5ff 17px 23px);
}

html.archive-transition-red-room {
    --archive-layer-animation: archive-fx-wipe-down;
    --archive-page-animation: archive-page-drop;
    --archive-before-animation: archive-texture-scan-y;
    --archive-after-animation: archive-texture-shear-x;
    --archive-fx-bg: #a40000;
    --archive-fx-before: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 9px);
    --archive-fx-after: linear-gradient(135deg, transparent 0 42%, #fff 43% 45%, transparent 46%);
    --archive-pulse-b: #ff0000;
    --archive-pulse-c: #fff;
}

html.archive-transition-blue-screen {
    --archive-layer-animation: archive-fx-wipe-up;
    --archive-page-animation: archive-page-shrink;
    --archive-before-animation: archive-texture-fade;
    --archive-after-animation: archive-texture-scan-x;
    --archive-fx-bg: #0000aa;
    --archive-fx-before: repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.75) 23px 25px);
    --archive-fx-after: repeating-linear-gradient(90deg, transparent 0 15%, #fff 15% 16%, transparent 16% 30%);
    --archive-pulse-b: #fff;
    --archive-pulse-c: #00e5ff;
}

html.archive-transition-static-collapse {
    --archive-layer-animation: archive-fx-noise;
    --archive-page-animation: archive-page-crush-y;
    --archive-before-animation: archive-texture-storm;
    --archive-after-animation: archive-texture-scan-y;
    --archive-fx-bg: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 3px 3px;
    --archive-fx-filter: grayscale(1) contrast(8);
    --archive-fx-before: repeating-linear-gradient(12deg, transparent 0 4px, #fff 4px 5px);
    --archive-fx-after: linear-gradient(0deg, transparent 0 48%, #fff 49% 51%, transparent 52%);
    --archive-pulse-b: #fff;
    --archive-pulse-c: #fff;
}

@keyframes archive-fx-circle {
    0% { clip-path: circle(0 at var(--archive-click-x) var(--archive-click-y)); opacity: 0; background-size: 2px 2px; }
    18% { opacity: .95; }
    100% { clip-path: circle(180vmax at var(--archive-click-x) var(--archive-click-y)); opacity: 1; background-size: 64px 64px; }
}

@keyframes archive-fx-diamond {
    0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); opacity: 0; }
    20% { opacity: 1; }
    100% { clip-path: polygon(50% -120%, 220% 50%, 50% 220%, -120% 50%); opacity: 1; }
}

@keyframes archive-fx-wipe-left {
    0% { clip-path: inset(0 100% 0 0); opacity: .4; }
    100% { clip-path: inset(0); opacity: 1; }
}

@keyframes archive-fx-wipe-right {
    0% { clip-path: inset(0 0 0 100%); opacity: .4; }
    100% { clip-path: inset(0); opacity: 1; }
}

@keyframes archive-fx-wipe-up {
    0% { clip-path: inset(100% 0 0); opacity: .4; }
    100% { clip-path: inset(0); opacity: 1; }
}

@keyframes archive-fx-wipe-down {
    0% { clip-path: inset(0 0 100%); opacity: .4; }
    100% { clip-path: inset(0); opacity: 1; }
}

@keyframes archive-fx-slit-h {
    0% { clip-path: inset(49.7% 0); opacity: .7; filter: brightness(5); }
    45% { clip-path: inset(44% 0); opacity: 1; }
    100% { clip-path: inset(0); opacity: 1; filter: var(--archive-fx-filter, none); }
}

@keyframes archive-fx-slit-v {
    0% { clip-path: inset(0 49.7%); opacity: .7; filter: brightness(5); }
    45% { clip-path: inset(0 44%); opacity: 1; }
    100% { clip-path: inset(0); opacity: 1; filter: var(--archive-fx-filter, none); }
}

@keyframes archive-fx-diagonal {
    0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); opacity: .8; }
    100% { clip-path: polygon(0 0, 240% 0, 100% 240%, 0 100%); opacity: 1; }
}

@keyframes archive-fx-zoom-spin {
    0% { opacity: 0; transform: scale(.02) rotate(-45deg); }
    20% { opacity: 1; }
    100% { opacity: 1; transform: scale(1.75) rotate(14deg); }
}

@keyframes archive-fx-noise {
    0% { opacity: 0; background-size: 2px 2px; filter: contrast(1); }
    24% { opacity: .9; }
    100% { opacity: 1; background-size: 76px 76px; filter: var(--archive-fx-filter, contrast(3)); }
}

@keyframes archive-texture-storm {
    0% { opacity: 0; transform: translate(0) skew(0); }
    28% { opacity: 1; transform: translate(-4%, 3%) skew(-8deg); }
    64% { transform: translate(7%, -5%) scale(1.3) skew(15deg); }
    100% { opacity: 0; transform: translate(-12%, 9%) scale(1.8) skew(-24deg); }
}

@keyframes archive-texture-scan-x {
    0% { opacity: 0; background-position: -100vw 0; }
    20% { opacity: 1; }
    100% { opacity: .15; background-position: 100vw 0; }
}

@keyframes archive-texture-scan-y {
    0% { opacity: 0; background-position: 0 -100vh; }
    20% { opacity: 1; }
    100% { opacity: .15; background-position: 0 100vh; }
}

@keyframes archive-texture-rotate {
    0% { opacity: 0; transform: rotate(-35deg) scale(.2); }
    25% { opacity: 1; }
    100% { opacity: .1; transform: rotate(160deg) scale(2.2); }
}

@keyframes archive-texture-zoom {
    0% { opacity: 0; transform: scale(.08); }
    20% { opacity: 1; }
    100% { opacity: .1; transform: scale(3.5); }
}

@keyframes archive-texture-shear-x {
    0% { opacity: 0; transform: translateX(-45%) scaleX(.2); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translateX(45%) scaleX(3); }
}

@keyframes archive-texture-shear-y {
    0% { opacity: 0; transform: translateY(-45%) scaleY(.2); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translateY(45%) scaleY(3); }
}

@keyframes archive-texture-fade {
    0% { opacity: 0; transform: scale(.85); }
    35% { opacity: 1; }
    100% { opacity: .08; transform: scale(1.4); }
}

@keyframes archive-page-dissolve {
    0% { filter: none; opacity: 1; transform: scale(1); }
    42% { filter: grayscale(.8) contrast(3); opacity: .78; transform: scale(1.008); }
    100% { filter: invert(1) contrast(8) blur(4px); opacity: 0; transform: scale(.96); }
}

@keyframes archive-page-shrink {
    0% { filter: none; opacity: 1; transform: scale(1) rotate(0); }
    100% { filter: contrast(5); opacity: 0; transform: scale(.16) rotate(-8deg); }
}

@keyframes archive-page-crush-x {
    0% { filter: none; opacity: 1; transform: scaleX(1); }
    72% { filter: grayscale(1) contrast(5); opacity: .7; transform: scaleX(.08); }
    100% { filter: invert(1); opacity: 0; transform: scaleX(0); }
}

@keyframes archive-page-crush-y {
    0% { filter: none; opacity: 1; transform: scaleY(1); }
    72% { filter: grayscale(1) contrast(5); opacity: .7; transform: scaleY(.04); }
    100% { filter: brightness(6); opacity: 0; transform: scaleY(0); }
}

@keyframes archive-page-kick-left {
    0% { filter: none; opacity: 1; transform: translateX(0) skewX(0); }
    100% { filter: contrast(6); opacity: 0; transform: translateX(-24%) skewX(-14deg); }
}

@keyframes archive-page-kick-right {
    0% { filter: none; opacity: 1; transform: translateX(0) skewX(0); }
    100% { filter: invert(1) contrast(6); opacity: 0; transform: translateX(24%) skewX(14deg); }
}

@keyframes archive-page-tilt {
    0% { filter: none; opacity: 1; transform: perspective(900px) rotateY(0) rotateX(0); }
    100% { filter: saturate(0) contrast(5); opacity: 0; transform: perspective(900px) rotateY(28deg) rotateX(-16deg) scale(.86); }
}

@keyframes archive-page-drop {
    0% { filter: none; opacity: 1; transform: translateY(0) rotate(0); }
    100% { filter: grayscale(1) contrast(7); opacity: 0; transform: translateY(24%) rotate(3deg) scale(.92); }
}

@keyframes archive-page-zoom {
    0% { filter: none; opacity: 1; transform: scale(1); }
    100% { filter: blur(7px) contrast(5); opacity: 0; transform: scale(1.75); }
}

@keyframes archive-page-negative {
    0% { filter: none; opacity: 1; transform: scale(1); }
    40% { filter: invert(1) grayscale(1) contrast(4); opacity: .9; }
    100% { filter: invert(1) contrast(10); opacity: 0; transform: scale(.98); }
}

@keyframes archive-page-photocopy {
    0% { filter: grayscale(1) contrast(1); opacity: 1; transform: translate(0); }
    55% { filter: grayscale(1) contrast(8); opacity: .75; transform: translate(-5px, 3px); }
    100% { filter: grayscale(1) contrast(14); opacity: 0; transform: translate(9px, -6px) scale(1.03); }
}

@keyframes archive-click-pulse {
    0% { width: 12px; height: 12px; opacity: 1; transform: translate(-50%, -50%) rotate(0); }
    48% { width: 100px; height: 100px; opacity: .85; transform: translate(-50%, -50%) rotate(90deg); }
    100% { width: 220px; height: 220px; opacity: 0; transform: translate(-50%, -50%) rotate(210deg); }
}

@keyframes archive-click-sprinkle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0) scale(1);
    }
    68% { opacity: 1; }
    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--archive-sprinkle-dx)),
                calc(-50% + var(--archive-sprinkle-dy))
            )
            rotate(var(--archive-sprinkle-turn))
            scale(.25);
    }
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.archive-cursor-enabled body,
    html.archive-cursor-enabled a,
    html.archive-cursor-enabled button,
    html.archive-cursor-enabled label,
    html.archive-cursor-enabled [role="button"] {
        cursor: none !important;
    }

    html.archive-cursor-enabled input,
    html.archive-cursor-enabled textarea,
    html.archive-cursor-enabled [contenteditable="true"] {
        cursor: text !important;
    }

    .archive-cursor { display: block; }
    html.archive-cursor-visible:not(.archive-cursor-native) .archive-cursor { opacity: 1; }
    html.archive-cursor-action .archive-cursor::after { background: #c0c0c0; }

    html.archive-cursor-down:not(.archive-cursor-shuffling) .archive-cursor {
        transform: translate3d(
            calc(var(--archive-cursor-x, -40px) + 1px),
            calc(var(--archive-cursor-y, -40px) + 1px),
            0
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .archive-cursor,
    .archive-transition-layer,
    .archive-click-pulse,
    .archive-click-sprinkles { display: none !important; }
}