/*! * holo.css — CSS holo-effect framework for Pokémon card images. * * Renders the real foil/etch overlay masks scraped by holo-miner as * light-blended, mouse-reactive shine/sparkle layers clipped to the card's * actual foil silhouette (mask-image), instead of a fake full-card gradient. * * Usage: see ../web/README.md */ @property --holo-pointer-x { syntax: ""; inherits: true; initial-value: 50; } @property --holo-pointer-y { syntax: ""; inherits: true; initial-value: 50; } @property --holo-pointer-from-center { syntax: ""; inherits: true; initial-value: 0; } .holo-card { /* --holo-pointer-{x,y,from-center} are deliberately NOT set here: leaving them unset lets each card inherit the shared, gyroscope-driven value from (see holo.js) unless its own pointer/touch interaction sets a local override; the @property initial-value above (50/50/0) is what applies when nothing -- gyro included -- is driving them at all. */ --holo-intensity: 1; --holo-foil-opacity: 0.85; --holo-etch-opacity: 0.9; --holo-glare-opacity: 0.65; --holo-max-tilt: 10deg; --holo-radius: 4.5% / 3.2%; position: relative; display: inline-block; width: 100%; max-width: 300px; perspective: 1200px; color-scheme: light dark; } .holo-card__rotator { position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: var(--holo-radius); overflow: hidden; background: #111; box-shadow: 0 1.2em 2.5em -1em rgba(0, 0, 0, 0.55); transform: rotateX(calc((var(--holo-pointer-y) - 50) * var(--holo-max-tilt) / -50)) rotateY(calc((var(--holo-pointer-x) - 50) * var(--holo-max-tilt) / 50)); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease; will-change: transform; } .holo-card.is-active .holo-card__rotator, html.holo-gyro-active .holo-card .holo-card__rotator { transition: transform 0.08s linear; box-shadow: 0 1.6em 3em -1em rgba(0, 0, 0, 0.65); } .holo-card__image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .holo-card__shine, .holo-card__etch, .holo-card__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; } /* * The scraped foil/etch PNGs are near-grayscale luminance maps at full alpha * (bright = strong foil at that pixel, dark = none) -- not alpha stencils. * mask-mode: luminance makes CSS masking use that brightness instead of the * (uniformly opaque) alpha channel, so the rainbow shine only shows through * where the card actually has foil. */ /* ---- foil shine layer: masked to the card's actual foil silhouette ---- */ .holo-card__shine { background-image: repeating-linear-gradient( 115deg, #ff00de 0%, #ff8f1f 8%, #ffee00 16%, #00ff85 24%, #00c3ff 32%, #6e00ff 40%, #ff00de 48% ); background-size: 250% 250%; background-position: calc(var(--holo-pointer-x) * 1%) calc(var(--holo-pointer-y) * 1%); mix-blend-mode: color-dodge; -webkit-mask-image: var(--holo-foil-mask, none); mask-image: var(--holo-foil-mask, none); mask-mode: luminance; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity 0.3s ease; } /* ---- etch sparkle layer: fine hatching masked to the etched foil area ---- */ .holo-card__etch { background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.95) 1px, transparent 1px, transparent 3px ), repeating-linear-gradient( 115deg, #ff00de 0%, #ffee00 20%, #00c3ff 40%, #ff00de 60% ); background-size: 5px 5px, 220% 220%; background-position: 0 0, calc(var(--holo-pointer-x) * -1%) calc(var(--holo-pointer-y) * 1%); mix-blend-mode: overlay; -webkit-mask-image: var(--holo-etch-mask, none); mask-image: var(--holo-etch-mask, none); mask-mode: luminance; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity 0.3s ease; } /* ---- universal glare: subtle glossy highlight that follows the pointer ---- */ .holo-card__glare { background: radial-gradient( circle at calc(var(--holo-pointer-x) * 1%) calc(var(--holo-pointer-y) * 1%), rgba(255, 255, 255, 0.85), transparent 55% ); mix-blend-mode: overlay; opacity: calc(var(--holo-pointer-from-center) * var(--holo-glare-opacity)); } /* * Turn layers on based on which masks are actually present (--has-foil / * --has-etch, set by holo.js from data-holo-foil / data-holo-etch) rather * than an enumerated list of mask-kind names -- the real data has far more * mask_kind values (REVERSE_LAMINATE, CAST_AND_CURE, COLD_FOIL_ETCHED, ...) * than the three you'd guess from a single set. */ .holo-card--has-foil .holo-card__shine { opacity: calc(var(--holo-foil-opacity) * var(--holo-intensity)); } .holo-card--has-etch .holo-card__etch { opacity: calc(var(--holo-etch-opacity) * var(--holo-intensity)); } /* ---- foil-type accents: tweak color temperature / pattern per real foil type ---- */ .holo-card--flat-silver .holo-card__shine { background-image: repeating-linear-gradient( 115deg, #c9d6e8 0%, #ffffff 10%, #9fb6d9 20%, #ffffff 30%, #c9d6e8 40% ); mix-blend-mode: soft-light; } .holo-card--sun-pillar .holo-card__shine { background-image: conic-gradient( from calc(var(--holo-pointer-x) * 3.6deg) at 50% 50%, #ffcf5c, #ff7a3d, #ffe08a, #ff7a3d, #ffcf5c ); background-position: center; background-size: 100% 100%; } .holo-card--sv-holo .holo-card__shine, .holo-card--sv-ultra .holo-card__shine { filter: saturate(1.15); } /* ---- opt-in idle animation for touch devices / showcase galleries ---- */ .holo-card--auto .holo-card__rotator { animation: holo-auto-sweep 7s ease-in-out infinite; } @keyframes holo-auto-sweep { 0%, 100% { --holo-pointer-x: 20; --holo-pointer-y: 30; --holo-pointer-from-center: 0.6; } 50% { --holo-pointer-x: 80; --holo-pointer-y: 70; --holo-pointer-from-center: 0.6; } } @media (hover: none) { .holo-card:not(.holo-card--auto) .holo-card__glare { opacity: calc(var(--holo-glare-opacity) * 0.4); } } @media (prefers-reduced-motion: reduce) { .holo-card__rotator { transition: none; transform: none !important; } .holo-card--auto .holo-card__rotator { animation: none; } }