.foil-sample:where(.astro-a25qvhbc){--px: .5;--py: .38;--tilt: 8;display:block;border-radius:1.1rem;color:var(--sylph-text);perspective:900px}.foil-sample__tilt:where(.astro-a25qvhbc){display:flex;height:100%;flex-direction:column;overflow:hidden;border-radius:inherit;background:var(--sylph-surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--sylph-brand) 35%,transparent),0 16px 36px #00000052;transform:rotateX(calc((.5 - var(--py)) * var(--tilt) * 1deg)) rotateY(calc((var(--px) - .5) * var(--tilt) * 1deg));transition:transform .16s ease}.foil-sample__art:where(.astro-a25qvhbc){position:relative;aspect-ratio:3 / 4;overflow:hidden;background:#101614}.foil-sample__art:where(.astro-a25qvhbc) img:where(.astro-a25qvhbc){width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:translate(calc((var(--px) - .5) * 6px),calc((var(--py) - .5) * 6px)) scale(1.05)}.foil-sample__foil:where(.astro-a25qvhbc),.foil-sample__glare:where(.astro-a25qvhbc),.foil-sample__grain:where(.astro-a25qvhbc){position:absolute;inset:0;pointer-events:none}.foil-sample__meta:where(.astro-a25qvhbc){padding:.85rem .95rem 1rem;background:var(--sylph-surface)}.foil-sample__name:where(.astro-a25qvhbc){font-size:1.05rem;font-weight:650;line-height:1.25}.foil-sample__label:where(.astro-a25qvhbc){font-size:.875rem}.foil-sample__method:where(.astro-a25qvhbc){color:var(--sylph-text-muted);font-size:.75rem}.foil-sample:where(.astro-a25qvhbc)[data-variant=tilt]{--tilt: 14}.foil-sample:where(.astro-a25qvhbc)[data-variant=tilt] .foil-sample__foil:where(.astro-a25qvhbc){opacity:.22;background:conic-gradient(from 90deg,#14332c,#5ac8c5,#d7dee6,#c9bdd8,#a3e5b3,#14332c);background-size:220% 220%;background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);mix-blend-mode:color-dodge;transition:opacity .18s ease}.foil-sample:where(.astro-a25qvhbc)[data-variant=tilt]:hover .foil-sample__foil:where(.astro-a25qvhbc){opacity:.48}.foil-sample:where(.astro-a25qvhbc)[data-variant=tilt] .foil-sample__glare:where(.astro-a25qvhbc){opacity:0;background:linear-gradient(115deg,transparent 42%,rgb(255 255 255 / .38) 50%,transparent 58%);background-size:240% 240%;background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);mix-blend-mode:overlay;transition:opacity .18s ease}.foil-sample:where(.astro-a25qvhbc)[data-variant=tilt]:hover .foil-sample__glare:where(.astro-a25qvhbc){opacity:.42}.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer] .foil-sample__tilt:where(.astro-a25qvhbc){transform:none}.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer]:hover .foil-sample__tilt:where(.astro-a25qvhbc){transform:translateY(-6px) rotateX(6deg) rotateY(-6deg)}.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer] .foil-sample__art:where(.astro-a25qvhbc) img:where(.astro-a25qvhbc){transform:none}.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer] .foil-sample__foil:where(.astro-a25qvhbc){opacity:0;background:linear-gradient(105deg,transparent 28%,rgb(90 200 197 / .5) 40%,rgb(255 255 255 / .45) 50%,rgb(186 170 210 / .35) 60%,transparent 72%);background-size:240% 100%;background-position:100% 0;mix-blend-mode:color-dodge}.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer]:hover .foil-sample__foil:where(.astro-a25qvhbc){opacity:.8;animation:foil-sample-sweep 1.6s ease-in-out infinite alternate}.foil-sample:where(.astro-a25qvhbc)[data-variant=physical]{--tilt: 10}.foil-sample:where(.astro-a25qvhbc)[data-variant=physical] .foil-sample__foil:where(.astro-a25qvhbc){opacity:.34;transition:opacity .18s ease;background:linear-gradient(125deg,transparent 6%,rgb(20 51 44 / .85) 16%,rgb(90 200 197 / .9) 30%,rgb(163 229 179 / .85) 42%,rgb(215 222 230 / .5) 52%,rgb(186 170 210 / .8) 64%,rgb(122 156 196 / .75) 76%,transparent 90%),repeating-linear-gradient(115deg,rgb(90 200 197 / .4) 0 1px,rgb(186 170 210 / .32) 1px 2px,transparent 2px 7px);background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);mix-blend-mode:overlay}.foil-sample:where(.astro-a25qvhbc)[data-variant=physical]:hover .foil-sample__foil:where(.astro-a25qvhbc){opacity:.55}.foil-sample:where(.astro-a25qvhbc)[data-variant=physical] .foil-sample__glare:where(.astro-a25qvhbc),.foil-sample:where(.astro-a25qvhbc)[data-variant=physical]:hover .foil-sample__glare:where(.astro-a25qvhbc){opacity:0}.foil-sample:where(.astro-a25qvhbc)[data-variant=physical] .foil-sample__grain:where(.astro-a25qvhbc){opacity:.2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");mix-blend-mode:overlay}.foil-sample:where(.astro-a25qvhbc)[data-variant=soft]{--tilt: 5}.foil-sample:where(.astro-a25qvhbc)[data-variant=soft] .foil-sample__foil:where(.astro-a25qvhbc){opacity:.28;background:radial-gradient(circle at calc(var(--px) * 100%) calc(var(--py) * 100%),rgb(163 229 179 / .9),transparent 34%),linear-gradient(115deg,transparent 20%,rgb(90 200 197 / .7) 40%,rgb(215 222 230 / .45) 50%,rgb(186 170 210 / .35) 60%,transparent 78%);mix-blend-mode:soft-light;transition:opacity .18s ease}.foil-sample:where(.astro-a25qvhbc)[data-variant=soft]:hover .foil-sample__foil:where(.astro-a25qvhbc){opacity:.82}.foil-sample:where(.astro-a25qvhbc)[data-variant=soft] .foil-sample__glare:where(.astro-a25qvhbc){opacity:.14;background:radial-gradient(circle at calc(var(--px) * 100%) calc(var(--py) * 100%),white,transparent 26%);mix-blend-mode:soft-light;transition:opacity .18s ease}.foil-sample:where(.astro-a25qvhbc)[data-variant=soft]:hover .foil-sample__glare:where(.astro-a25qvhbc){opacity:.7}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=soft] .foil-sample__foil:where(.astro-a25qvhbc){opacity:.28;background-image:linear-gradient(125deg,transparent 8%,rgb(255 77 109 / .8) 22%,rgb(255 214 10 / .75) 38%,rgb(61 255 200 / .75) 52%,rgb(76 201 240 / .75) 66%,rgb(179 136 255 / .75) 80%,transparent 94%);background-size:180% 180%;background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);mix-blend-mode:soft-light}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=soft]:hover .foil-sample__foil:where(.astro-a25qvhbc){opacity:.62}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=soft] .foil-sample__glare:where(.astro-a25qvhbc),.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=soft]:hover .foil-sample__glare:where(.astro-a25qvhbc){opacity:0}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=tilt] .foil-sample__foil:where(.astro-a25qvhbc){background:conic-gradient(from 90deg,#ff4d6d,#ffd60a,#3dffc8,#4cc9f0,#b388ff,#ff4d6d)}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=shimmer] .foil-sample__foil:where(.astro-a25qvhbc){background-image:linear-gradient(105deg,transparent 28%,rgb(255 0 180 / .55) 40%,rgb(255 220 0 / .5) 50%,rgb(0 220 255 / .55) 60%,transparent 72%);background-size:240% 100%;background-position:100% 0}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=physical] .foil-sample__foil:where(.astro-a25qvhbc){opacity:.34;filter:none;mix-blend-mode:overlay;background:linear-gradient(125deg,transparent 6%,rgb(255 77 109 / .85) 18%,rgb(255 214 10 / .8) 34%,rgb(61 255 200 / .8) 50%,rgb(76 201 240 / .8) 64%,rgb(179 136 255 / .8) 78%,transparent 92%),repeating-linear-gradient(115deg,rgb(255 80 160 / .4) 0 1px,rgb(80 220 255 / .32) 1px 2px,transparent 2px 7px);background-position:calc(var(--px) * 100%) calc(var(--py) * 100%)}.foil-sample:where(.astro-a25qvhbc)[data-rainbow][data-variant=physical]:hover .foil-sample__foil:where(.astro-a25qvhbc){opacity:.55;filter:none}@keyframes foil-sample-sweep{0%{background-position:100% 0}to{background-position:0% 0}}@media(prefers-reduced-motion:reduce){.foil-sample__tilt:where(.astro-a25qvhbc),.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer]:hover .foil-sample__tilt:where(.astro-a25qvhbc),.foil-sample__art:where(.astro-a25qvhbc) img:where(.astro-a25qvhbc){transform:none;transition:none}.foil-sample:where(.astro-a25qvhbc)[data-variant=shimmer]:hover .foil-sample__foil:where(.astro-a25qvhbc){animation:none;opacity:.35}}
