/* What a collectible does in the inspector by its format (format-interactions.js, docs/collectible-formats.md,
   Inspector interactions). Everything here is laid over or beside the picture, never drawn into it, and sized to
   the picture as it is drawn (`object-fit: contain`), which the script measures. A rule that lets something out of
   the picture's box outranks trading-card.css's `overflow: hidden` by naming `.trading-card` and coming after it. What moves by itself stands
   still under `html.motion-reduced`. */

.format-subtitle[hidden] { display: none; }

/* Paper Note: a click folds the sheet; the packet it folds into is paper-unfold.css's, laid over the sheet. */
.format-paper-note { cursor: pointer; }

/* Hearthstone Card: played, the frame burns gold and the card glows the green of one that can be played. */
.format-hearthstone > .card-art > img { transition: filter .35s ease-out, transform .35s ease-out; }
.trading-card.format-hearthstone.is-played > .card-art { overflow: visible; }
.format-hearthstone.is-played > .card-art > img { transform: scale(1.02); filter: drop-shadow(0 0 2px #ffd85a) drop-shadow(0 0 3px #ffcf3a) drop-shadow(0 0 16px #4ee36a); animation: format-played 1.8s ease-in-out infinite; }
@keyframes format-played { 50% { filter: drop-shadow(0 0 2px #ffe58a) drop-shadow(0 0 5px #ffcf3a) drop-shadow(0 0 26px #6cff86); } }
.motion-reduced .format-hearthstone > .card-art > img { transition: none; animation: none; }

/* 90's RTS Unit Portrait: what the unit says when it is clicked, as a game's subtitle under its portrait. */
.format-subtitle { margin: 0; text-align: center; font: 700 16px/1.3 'Sora', system-ui, sans-serif; color: #ffe66d; text-shadow: -1px -1px 0 #1a1208, 1px -1px 0 #1a1208, -1px 1px 0 #1a1208, 1px 1px 0 #1a1208, 0 2px 4px #0009; }
.format-subtitle.is-spoken { animation: format-spoken .3s ease-out; }
@keyframes format-spoken { from { opacity: 0; transform: translateY(4px); } }
.motion-reduced .format-subtitle.is-spoken { animation: none; }

/* Windows 95 Error Message: the window opened again over itself, down and to the right each time. */
.trading-card.format-windows > .card-art { overflow: visible; }
.format-window > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.format-window > .object-finishes { -webkit-mask: var(--picture-mask) center / contain no-repeat; mask: var(--picture-mask) center / contain no-repeat; }
.format-window { z-index: 6; position: absolute; object-fit: contain; pointer-events: none; transform: translate(calc(var(--step) * 14px), calc(var(--step) * 18px)); filter: drop-shadow(2px 3px 2px #0006); animation: format-window-open .16s ease-out; }
@keyframes format-window-open { from { opacity: 0; transform: translate(calc(var(--step) * 14px - 6px), calc(var(--step) * 18px - 8px)); } }
.motion-reduced .format-window { animation: none; }

/* Minitel Screen: the page comes in from the top, a line every third of a second, as 1200 baud painted it. */
.format-minitel > .card-art > img.is-loading { animation: format-minitel-load 8.3s steps(25, end) forwards; }
@keyframes format-minitel-load { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Pog and Ancient Coin: the picture turns over on its own axis to a back the size of the picture, as the coins
   of the wallet turn (wallet.css). The front and the back each hide their back face. */
.trading-card.format-turnable > .card-art { overflow: visible; perspective: 900px; transform-style: preserve-3d; }
.format-turnable > .card-art > img:not(.format-reverse), .format-reverse { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.45, .05, .3, 1); }
.format-reverse { position: absolute; box-sizing: border-box; object-fit: contain; pointer-events: none; transform: rotateY(180deg); }
.format-turnable.is-turned > .card-art > img:not(.format-reverse) { transform: rotateY(180deg); }
.format-turnable.is-turned > .card-art > .format-reverse { transform: rotateY(360deg); }
.format-turnable { cursor: pointer; }
.motion-reduced .format-turnable > .card-art > img:not(.format-reverse), .motion-reduced .format-reverse { transition: none; }
/* A Pog's back: plain kraft cardboard, a printed ring, the maker's mark worn off. */
.format-pog-back { border-radius: 50%; border: 3px solid #b8945f; background: radial-gradient(circle at 50% 50%, #0000 58%, #a67c4a33 59% 61%, #0000 62%), repeating-linear-gradient(37deg, #0000 0 3px, #00000008 3px 4px), repeating-linear-gradient(-52deg, #0000 0 5px, #ffffff0a 5px 6px), radial-gradient(circle at 38% 32%, #d8b887, #b58f58 70%, #9c7746); box-shadow: inset 0 0 18px #5a3d1a55; }
/* The slammer that turns it: a heavy metal disc dropped from above the Pog, then slid off it. */
.format-slammer { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 36% 30%, #ffffffd0, #0000 28%), conic-gradient(from 20deg, #cfd3da, #5d6470 18%, #e6e9ee 32%, #6f7784 48%, #d8dce3 62%, #585f6b 78%, #cfd3da); box-shadow: inset 0 0 0 4px #2b2f36, inset 0 0 0 7px #9aa1ac, 0 14px 22px #0009; }
.format-slammer.is-dropping { animation: format-slam .38s cubic-bezier(.5, 0, 1, .6) forwards; }
.format-slammer.is-leaving { animation: format-slam-off .5s ease-out forwards; }
@keyframes format-slam { from { opacity: 0; transform: translateY(-160%) scale(1.35) rotate(-18deg); } 30% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes format-slam-off { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(70%, 55%) rotate(28deg); } }

/* Photo Mug: steam rising from the rim, four wisps out of step with each other. */
.trading-card.format-mug > .card-art { overflow: visible; }
.format-steam { position: absolute; pointer-events: none; }
.format-steam[hidden] { display: none; }
.format-steam i { position: absolute; bottom: 0; width: 22%; height: 55%; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #ffffffb0, #ffffff40 50%, #0000 72%); filter: blur(6px); opacity: 0; animation: format-steam 4.2s ease-out infinite; }
.format-steam i:nth-child(1) { left: 8%; animation-delay: 0s; }
.format-steam i:nth-child(2) { left: 32%; height: 65%; animation-delay: 1.1s; }
.format-steam i:nth-child(3) { left: 54%; animation-delay: 2.3s; }
.format-steam i:nth-child(4) { left: 72%; height: 48%; animation-delay: 3.1s; }
@keyframes format-steam { 0% { opacity: 0; transform: translate(0, 0) scale(.6, .8); } 20% { opacity: .55; } 100% { opacity: 0; transform: translate(-30%, -140%) scale(1.5, 1.2); } }

/* The objects (#1065): the voodoo doll and the Bratz. What a click lays over or beside the picture
   is placed by the script in the art's box, where the picture is drawn, and may run out past it; an object that
   answers a click takes the pointer's hand. */
.trading-card:is(.format-voodoo, .format-bratz) > .card-art { overflow: visible; }
.trading-card[data-format-interaction][role="button"] { cursor: pointer; }
.format-pin, .format-flash { position: absolute; box-sizing: border-box; pointer-events: none; }

/* Voodoo Doll: a pin where the click landed, its coloured head leaning the way the hand pushed it in. */
.format-pin { width: 3px; height: 36px; margin: -36px 0 0 -1px; border-radius: 2px; background: linear-gradient(#f4f4f4, #8d8d8d); transform-origin: 50% 100%; transform: rotate(var(--lean)); filter: drop-shadow(1px 2px 2px #0008); animation: format-pin-in .18s ease-out; }
.format-pin::before { content: ''; position: absolute; top: -9px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9, var(--head) 42%, #0006); }
@keyframes format-pin-in { from { transform: rotate(var(--lean)) translateY(-40%) scale(1.3); opacity: 0; } }
.motion-reduced .format-pin { animation: none; }

/* Bratz Figurine: the flash, and the pose it is caught in. */
.format-bratz > .card-art > img { transform-origin: 50% 100%; transition: transform .3s ease-out; }
.format-bratz[data-pose="1"] > .card-art > img { transform: rotate(-5deg) skewX(3deg); }
.format-bratz[data-pose="2"] > .card-art > img { transform: scale(1.05) translateY(-3%); }
.format-bratz[data-pose="3"] > .card-art > img { transform: rotate(5deg) translateX(4%); }
.format-bratz[data-pose="4"] > .card-art > img { transform: scale(.97) skewX(-4deg); }
.format-flash { border-radius: 50%; background: radial-gradient(circle, #fff, #fffa 35%, #0000 68%); opacity: 0; }
.format-flash.is-firing { animation: format-flash .45s ease-out; }
@keyframes format-flash { from { opacity: 1; } }
.motion-reduced .format-bratz > .card-art > img { transition: none; }