/* Coin materials and camera are independent of the surrounding hero palette. */
[data-coin="audd"] {
    color-scheme: light;
    --brand-primary: #4500ff;
    --brand-secondary: #1a0f5c;
    --blue-100: #e7e1ff;
    --blue-200: #cecbf8;
    --blue-300: #6b5cd7;
    --blue-400: #5a2bf0;
    --blue-800: #2a12a8;
    --ink: #231b3e;
    --muted: #786f8c;
    --float-duration: 7s;
    --shine-duration: 9s;
    --backdrop: #f7f5fc;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
}
[data-coin="nzdsc"] {
    color-scheme: light;
    --brand-primary: #171717;
    --brand-secondary: #080808;
    --carbon-100: #eeeeee;
    --carbon-200: #bdbdbd;
    --carbon-300: #686868;
    --carbon-400: #383838;
    --carbon-800: #101010;
    --ink: #292929;
    --muted: #7c7c7c;
    --float-duration: 7s;
    --shine-duration: 9s;
    --backdrop: #f8f8f8;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
}
[data-coin="audd"] .coin-ground-shadow {
    position: absolute;
    left: 28%;
    top: 90%;
    width: 60%;
    height: 7%;
    background: radial-gradient(ellipse, rgba(26, 15, 92, 0.72) 0%, rgba(26, 15, 92, 0.42) 30%, rgba(26, 15, 92, 0.14) 58%, transparent 75%);
    opacity: 0.78;
    filter: blur(9px);
    border-radius: 50%;
    pointer-events: none;
    animation: coin-shadow var(--float-duration) ease-in-out infinite;
}
[data-coin="nzdsc"] .coin-ground-shadow {
    position: absolute;
    left: 28%;
    top: 90%;
    width: 60%;
    height: 7%;
    background: radial-gradient(ellipse, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.42) 30%, rgba(8, 8, 8, 0.14) 58%, transparent 75%);
    opacity: 0.78;
    filter: blur(9px);
    border-radius: 50%;
    pointer-events: none;
    animation: coin-shadow var(--float-duration) ease-in-out infinite;
}
[data-coin] .coin-float {
    --layer-gap: min(32cqw, 30cqh, 220px);
    perspective: 2200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    position: absolute;
    width: min(62cqw, 58cqh, 470px);
    aspect-ratio: 1;
    left: 43%;
    top: 43%;
    margin: 0;
    translate: -50% -50%;
    animation: coin-float var(--float-duration) ease-in-out infinite;
}
[data-coin] .coin-assembly {
    position: absolute;
    inset: 0;
    transform: rotateX(calc(24deg + var(--tilt-x))) rotateY(calc(-23deg + var(--tilt-y))) rotateZ(-13deg);
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
}
[data-coin] .coin-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    backface-visibility: hidden;
}
[data-coin="audd"] .coin-base {
    transform: translateZ(calc(-2 * var(--layer-gap))) rotateX(24deg) rotateY(12deg);
    background: linear-gradient(135deg, var(--blue-800), var(--brand-secondary));
    border: 1px solid var(--blue-300);
    box-shadow:
        0 3px #2a12a8,
        0 6px #2a12a8,
        0 9px #1a0f5c,
        0 12px #1a0f5c,
        0 15px 2px #1a0f5c;
}
[data-coin="nzdsc"] .coin-base {
    transform: translateZ(calc(-2 * var(--layer-gap))) rotateX(24deg) rotateY(12deg);
    background: linear-gradient(135deg, var(--carbon-800), var(--brand-secondary));
    border: 1px solid var(--carbon-300);
    box-shadow:
        0 3px #101010,
        0 6px #101010,
        0 9px #080808,
        0 12px #080808,
        0 15px 2px #080808;
}
[data-coin="audd"] .coin-base:after {
    content: "";
    position: absolute;
    inset: 6%;
    border: 1px solid #baa0ff16;
    border-radius: 50%;
}
[data-coin="nzdsc"] .coin-base:after {
    content: "";
    position: absolute;
    inset: 6%;
    border: 1px solid #c8c8c816;
    border-radius: 50%;
}
[data-coin="audd"] .coin-glass {
    opacity: 0.62;
    transform: translateZ(calc(-1 * var(--layer-gap))) rotateX(16deg) rotateY(8deg);
    background: linear-gradient(135deg, var(--blue-200), var(--blue-300) 60%, var(--blue-400));
    border: 1px solid var(--blue-200);
    box-shadow:
        0 2px #cecbf8,
        0 5px #6b5cd7,
        0 8px #6b5cd7,
        0 10px #5a2bf0,
        inset 3px 3px 32px #e7e1ff40;
}
[data-coin="nzdsc"] .coin-glass {
    opacity: 0.62;
    transform: translateZ(calc(-1 * var(--layer-gap))) rotateX(16deg) rotateY(8deg);
    background: linear-gradient(135deg, var(--carbon-200), var(--carbon-300) 60%, var(--carbon-400));
    border: 1px solid var(--carbon-200);
    box-shadow:
        0 2px #bdbdbd,
        0 5px #686868,
        0 8px #686868,
        0 10px #383838,
        inset 3px 3px 32px #eeeeee40;
}
[data-coin] .coin-glass:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(155deg, transparent 30%, #ffffff33 30.3%, #ffffff08 58%, transparent 58.2%);
}
[data-coin="audd"] .coin-coin {
    background: var(--brand-primary);
    transform: translateZ(15px);
    box-shadow:
        0 2px #5a2bf0,
        0 4px #5a2bf0,
        0 6px #5a2bf0,
        0 8px #2a12a8,
        0 10px #2a12a8,
        0 12px #2a12a8,
        0 14px 1px #1a0f5c,
        14px 32px 28px #1a0f5c30;
}
[data-coin="nzdsc"] .coin-coin {
    background: var(--brand-primary);
    transform: translateZ(15px);
    box-shadow:
        0 2px #383838,
        0 4px #383838,
        0 6px #383838,
        0 8px #101010,
        0 10px #101010,
        0 12px #101010,
        0 14px 1px #080808,
        14px 32px 28px #08080830;
}
[data-coin="audd"] .coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(ellipse at 26% 16%, #e7e1ff26, transparent 52%), linear-gradient(155deg, transparent 40%, #1a0f5c45), var(--brand-primary);
}
[data-coin="nzdsc"] .coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(ellipse at 26% 16%, #eeeeee26, transparent 52%), linear-gradient(155deg, transparent 40%, #08080845), var(--brand-primary);
}
[data-coin="audd"] .coin-face:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 2px, #e7e1ff0a 2.5px, transparent 3px);
    pointer-events: none;
}
[data-coin="nzdsc"] .coin-face:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 2px, #eeeeee0a 2.5px, transparent 3px);
    pointer-events: none;
}
[data-coin] .coin-mark {
    position: absolute;
    inset: 13%;
    width: 74%;
    height: 74%;
    transform: rotate(13deg);
    transform-origin: 50% 50%;
}
[data-coin] .coin-shine {
    position: absolute;
    inset: -55%;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 42%, #ffffff00 45%, #ffffff24 49%, #ffffff38 50%, #ffffff00 55%, transparent 58%);
    transform: translateX(-90%);
    mix-blend-mode: screen;
    animation: coin-shine var(--shine-duration) ease-in-out infinite;
    animation-delay: 1s;
}
[data-coin="audd"] .coin-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid #cecbf880;
    box-shadow:
        inset 2px 3px 3px #cecbf84a,
        inset -2px -3px 5px #1a0f5c70,
        inset 0 0 0 5px #4500ff,
        inset 0 0 0 6px #6b5cd799;
    pointer-events: none;
}
[data-coin="nzdsc"] .coin-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid #bdbdbd80;
    box-shadow:
        inset 2px 3px 3px #bdbdbd4a,
        inset -2px -3px 5px #08080870,
        inset 0 0 0 5px #171717,
        inset 0 0 0 6px #68686899;
    pointer-events: none;
}
/* Scale the whole projected scene so depth, edges and the floor shadow keep their proportions. */
[data-coin] {
    --coin-display-scale: 0.85;
    scale: var(--coin-display-scale);
    transform-origin: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-height: 360px;
    container-type: size;
    isolation: isolate;
    touch-action: pan-y;
}
[data-coin],
[data-coin] * {
    box-sizing: border-box;
}
@keyframes coin-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
@keyframes coin-shine {
    0%,
    12% {
        transform: translateX(-90%);
    }
    38%,
    100% {
        transform: translateX(90%);
    }
}
@keyframes coin-shadow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.78;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.52;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-coin] * {
        animation: none;
        transition: none;
    }
    [data-coin] .coin-shine {
        display: none;
    }
    [data-coin] .coin-assembly {
        transform: rotateX(24deg) rotateY(-23deg) rotateZ(-13deg);
    }
}

/*
 * Two coins shown together, as a pair standing on the page rather than floating over their layers:
 * no base, glass or ground shadow, and the face struck flat in the currency's own colour.
 */
.coin-pair [data-coin] {
    --coin-display-scale: 1;
}
.coin-pair [data-coin] .coin-assembly,
.coin-pair [data-coin] .coin-mark {
    transform: none;
}
.coin-pair [data-coin] .coin-base,
.coin-pair [data-coin] .coin-glass,
.coin-pair [data-coin] .coin-ground-shadow {
    display: none;
}
.coin-pair [data-coin="audd"] .coin-face {
    background: var(--brand-primary);
}
.coin-pair [data-coin="audd"] .coin-face::before {
    display: none;
}
.coin-pair [data-coin="audd"] .coin-mark g {
    filter: none;
}
.coin-pair [data-coin="audd"] .coin-mark rect {
    fill: #fff;
}
.coin-pair [data-coin="audd"] .coin-coin {
    box-shadow:
        0 2px rgba(0, 0, 0, 0.25),
        0 4px rgba(0, 0, 0, 0.2),
        0 6px rgba(0, 0, 0, 0.15);
}
.coin-pair [data-coin="nzdsc"] .coin-face {
    background: radial-gradient(ellipse at 26% 16%, #eeeeee40, transparent 52%), linear-gradient(155deg, #ffffff12 10%, transparent 40%, #08080870), #1c1c1c;
}
.coin-pair [data-coin="nzdsc"] .coin-mark {
    opacity: 0.72;
}
.coin-pair [data-coin="nzdsc"] .coin-mark g {
    filter: none;
}
.coin-pair [data-coin="nzdsc"] .coin-mark path {
    fill: #fff;
}
.coin-pair [data-coin="nzdsc"] .coin-coin {
    box-shadow:
        0 2px #383838,
        0 4px #383838,
        0 6px #686868,
        0 8px #101010,
        0 10px #101010,
        0 12px #101010,
        0 14px 1px #080808;
}
.coin-pair [data-coin] .coin-float {
    animation: none;
}