.holo--og { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --o: 0; position: relative; display: block; overflow: hidden; border-radius: 3.5% / 2.5%; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .1, 1), box-shadow .4s; }
.holo--og img { display: block; width: 100%; height: 100%; object-fit: cover; }
.holo--og .holo__glare { position: absolute; inset: 0; pointer-events: none; opacity: var(--o); transition: opacity .35s; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 28%, transparent 55%); mix-blend-mode: overlay; }
.holo--og.is-live { --o: 1; transition: transform .08s linear, box-shadow .4s; }
.holo--og .holo__shine { display: none; }
.holo--og .hf { position: absolute; inset: 0; pointer-events: none; opacity: .7; transition: opacity .35s; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.holo--og.is-live .hf, .holo--og.holo--big .hf { opacity: 1; }
.holo--og[data-rest="0"]:not(.is-live) .hf { opacity: 0; }
.holo--og .hf--desc { -webkit-mask-image: url(../assets/nft/244/holo/desc.png); mask-image: url(../assets/nft/244/holo/desc.png); }
.holo--og .hf--ring { -webkit-mask-image: url(../assets/nft/244/holo/ring.png); mask-image: url(../assets/nft/244/holo/ring.png); }
.holo--og[data-tier="Diamond"] .hf--art { -webkit-mask-image: url(../assets/nft/244/holo/diamond.png); mask-image: url(../assets/nft/244/holo/diamond.png); }
.holo--og[data-tier="Gold"] .hf--art { -webkit-mask-image: url(../assets/nft/244/holo/gold.png); mask-image: url(../assets/nft/244/holo/gold.png); }
.holo--og[data-tier="Silver"] .hf--art { -webkit-mask-image: url(../assets/nft/244/holo/silver.png); mask-image: url(../assets/nft/244/holo/silver.png); }
.holo--og[data-tier="Bronze"] .hf--art { -webkit-mask-image: url(../assets/nft/244/holo/bronze.png); mask-image: url(../assets/nft/244/holo/bronze.png); }
.holo--og .hf b, .holo--og .hf u, .holo--og .hf s { position: absolute; inset: 0; display: block; text-decoration: none; }
.holo--og .hf b { background: repeating-linear-gradient(115deg, hsl(0, 100%, 72%) 0%, hsl(50, 100%, 70%) 7%, hsl(120, 100%, 72%) 14%, hsl(190, 100%, 70%) 21%, hsl(260, 100%, 74%) 28%, hsl(320, 100%, 72%) 35%, hsl(360, 100%, 72%) 42%); background-size: 260% 260%; background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; filter: saturate(1.3); }
.holo--og[data-tier="Gold"] .hf b { background-image: repeating-linear-gradient(115deg, hsl(40, 100%, 62%) 0%, hsl(48, 100%, 80%) 8%, hsl(34, 90%, 52%) 16%, hsl(52, 100%, 88%) 24%, hsl(30, 85%, 48%) 32%, hsl(44, 100%, 70%) 42%); filter: saturate(1.1); }
.holo--og[data-tier="Silver"] .hf b { background-image: repeating-linear-gradient(115deg, hsl(210, 14%, 80%) 0%, hsl(220, 25%, 96%) 8%, hsl(205, 10%, 64%) 16%, hsl(230, 30%, 92%) 24%, hsl(210, 8%, 58%) 32%, hsl(215, 18%, 86%) 42%); filter: none; }
.holo--og[data-tier="Bronze"] .hf b { background-image: repeating-linear-gradient(115deg, hsl(22, 85%, 52%) 0%, hsl(30, 90%, 70%) 8%, hsl(14, 75%, 42%) 16%, hsl(34, 95%, 78%) 24%, hsl(18, 70%, 38%) 32%, hsl(26, 85%, 60%) 42%); filter: saturate(1.05); }
.holo--og .hf u { background: repeating-linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, 0) 54%, transparent 100%); background-size: 220% 220%; background-position: var(--mx) var(--my); mix-blend-mode: overlay; }
.holo--og .hf s { inset: -6%; background: url(../assets/nft/244/holo/sparks.png) center / 100% 100% no-repeat; mix-blend-mode: screen; transform: translate(calc((50% - var(--mx)) * .1), calc((50% - var(--my)) * .1)); }
.holo--og .hf--art b { opacity: .42; }
.holo--og .hf--desc b { opacity: .22; }
.holo--og .hf--desc u { opacity: .6; }
.holo--og .hf--desc s { opacity: .55; }
.holo--og .hf--ring b { opacity: .55; background-size: 200% 200%; }
.holo--og .hf--ring u { background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .85) 44%, rgba(255, 255, 255, .15) 52%, transparent 70%); background-size: 260% 260%; background-position: var(--mx) var(--my); mix-blend-mode: overlay; }
.holo--og[data-tier="Gold"] .hf--ring u, .holo--og[data-tier="Bronze"] .hf--ring u { mix-blend-mode: soft-light; }
.holo--og.holo--big { transition: transform .25s linear, box-shadow .4s; }
.holo--og.holo--big .holo__glare { opacity: 1; }