@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

:root {
	--backdrop: hsl(0 0% 60% / 0.15);
  --radius: 12px;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}
[data-explode] .wrapper {	
	transform-style: preserve-3d;
}
/*
  NOTE: This file originally applied global body layout intended for
  a standalone card demo (full-screen centered grid, overflow hidden).
  Those rules conflicted with normal pages like contact.html.
  They have been removed so pages can control their own layout.
*/

* {
  box-sizing: border-box;
}

.wrapper {
	position: relative;
}

body::before {
	content: "";
  background-image: url("https://assets.codepen.io/605876/code-icon-bg.svg");
  background-position: calc(var(--xp) * calc(var(--movement, 0) * -1px)) calc(var(--yp) * calc(var(--movement, 0) * -1px));
  position: fixed;
  inset: 0;
  filter: grayscale(1);
  opacity: var(--icon, 0);
}

.card-demo article {
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius) * 1px);
  width: 260px;
  position: relative;
	grid-template-rows: 1fr auto;
  box-shadow: 0 1rem 2rem -1rem black;
  padding: 1rem;
  display: grid;
  gap: 1rem;
  backdrop-filter: blur(calc(var(--cardblur, 5) * 1px));
}
main {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 120ch;
  max-width: calc(100vw - 2rem);
  position: relative;
}

[data-explode] main {
  transform: translate3d(0, 0, 200vmax);
}

article a {
  background: hsl(0 0% 0%);
	display: inline-block;
	color: white;
	text-decoration: none;
	font-weight: 140;
	text-align: center;
	padding: 0.75rem 1.5rem;
	position: relative;
}
h2 {
	font-weight: 100;
  font-size: 1.5rem;
  margin: 0;
}
.card__content span {
  font-size: 0.875rem;
  font-weight: 120;
  opacity: 0.5;
}
.card__content {
  color: hsl(0 0% 70%);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.card__content div {
  position: relative;
  display: grid;
  align-items: center;
}
.card__content svg {
  width: 80px;
}
.card__content div svg:not(:nth-of-type(1)) {
  position: absolute;
  top: 50%;
  left: 0;
  translate: calc(var(--index) * 40%) -50%;
  scale: calc(1 - (var(--index) * 0.2));
  z-index: calc(4 - var(--index));
  opacity: calc(4 / (2 * (var(--index) * 10)));
}
.card__content svg:nth-of-type(2) {
  --index: 1;
}
.card__content svg:nth-of-type(3) {
  --index: 2;
}
.card__content svg:nth-of-type(4) {
  --index: 3;
}


/* Make sure you offset the glow when in 3D mode with the offset provided from JS land */
[data-explode] [data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc((var(--x, 0) - var(--left, 0)) * 1px)
    calc((var(--y, 0) - var(--top, 0)) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--glow-opacity, 0.1)), transparent
  );
}
[data-explode] [data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc((var(--x, 0) - var(--left, 0)) * 1px)
    calc((var(--y, 0) - var(--top, 0)) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) 1), transparent 100%
  );
}
[data-explode] [data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc((var(--x, 0) - var(--left, 0)) * 1px)
    calc((var(--y, 0) - var(--top, 0)) * 1px),
    hsl(0 100% 100% / 1), transparent 100%
  );
}

[data-explode] .wrapper:not(:first-of-type) {
  display: none;
}

[data-explode] .wrapper {
  transform: rotateX(-24deg) rotateY(-50deg) translate3d(0, 0, -400px);
}

.dg.ac {
  transform: translate3d(0, 0, 200vmin);
}

.wrapper {
	position: relative;
}

.dummy {
	--border-size: calc(var(--border, 2) * 1px);
	--spotlight-size: calc(var(--size, 150) * 1px);
	--hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
  --glow-opacity: 1;
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	border-radius: calc(var(--radius) * 1px);
}

[data-explode] article {
  backdrop-filter: unset;
  opacity: 0.35;
}

.dummy__backdrop {
	border-radius: calc(var(--radius) * 1px);
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc((var(--x, 0) - var(--left, 0)) * 1px)
    calc((var(--y, 0) - var(--top, 0)) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--glow-opacity, 0.1)), transparent
  );
	background-color: var(--backup-border);
	transform: translate3d(0, 0, 200px);
}

.dummy__backdrop::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 200vmax;
	width: 200vmax;
	translate: -50% -50%;
	background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(((var(--x, 0) - var(--left, 0)) * 1px) + 100vmax - 130px)
    calc(((var(--y, 0) - var(--top, 0)) * 1px) + 100vmax - (260px * (3/4))),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--glow-opacity, 0.1)), transparent
  );
	z-index: -1;
	opacity: 0.35;
}
.dummy__glow::after,
.dummy__border::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 200vmax;
	width: 200vmax;
	translate: -50% -50%;
	background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(((var(--x, 0) - var(--left, 0)) * 1px) + 100vmax - 130px)
    calc(((var(--y, 0) - var(--top, 0)) * 1px) + 100vmax - (260px * (3/4))),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--glow-opacity, 0.1)), transparent
  );
	z-index: -1;
	opacity: 0.5;
}

.dummy__border, .dummy__glow {
	position: absolute;
	inset: 0;
	transform: translate3d(0, 0, 400px);
	border-radius: calc(var(--radius) * 1px);
}

.dummy__glow::before,
.dummy__border::before {
	content: "";
	position: absolute;
	background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc((var(--x, 0) - var(--left, 0)) * 1px)
    calc((var(--y, 0) - var(--top, 0)) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / 1), transparent 100%
  );
  background-color: var(--backup-border);
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}

.dummy__glow {
	border-radius: calc(var(--radius) * 1px);
	position: absolute;
	inset: 0;
	transform: translate3d(0, 0, 600px);
}
.dummy__glow::before {
	background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc((var(--x, 0) - var(--left, 0)) * 1px)
    calc((var(--y, 0) - var(--top, 0)) * 1px),
    hsl(0 100% 100% / 1), transparent 100%
  );
}
.dummy__glow::after {
	background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(((var(--x, 0) - var(--left, 0)) * 1px) + 100vmax - 130px)
    calc(((var(--y, 0) - var(--top, 0)) * 1px) + 100vmax - (260px * (3/4))),
    hsl(0 100% 100% / 1), transparent
  );
}
.dummy > * {
	transform-style: preserve-3d;
}
.wrapper > span ,
.dummy span {
	display: inline-block;
	position: absolute;
	bottom: 0;
	color: hsl(0 0% 80%);
	font-weight: 20;
	left: calc(100% + 4rem);
	white-space: nowrap;
	font-size: 1.25rem;
	transform: rotateY(50deg) rotateX(24deg) translate(-50%, 50%);
}

.wrapper:not(:nth-of-type(2)) > span::after,
:is(.dummy__glow, .dummy__border) span::after {
  content: "(pseudo)";
  font-size: 0.875rem;
  position: absolute;
  left: 100%;
  bottom: 0%;
  translate: 0.5rem 0%;
  opacity: 0.5;
}

.wrapper > span {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 250%);
}


[data-spread] .wrapper:first-of-type {
  opacity: 0.35;
}
[data-spread] .wrapper:nth-of-type(2) :is(.card__content, a, [data-glow] > [data-glow]),
[data-spread] .wrapper:nth-of-type(2) [data-glow]::before,
[data-spread] .wrapper:nth-of-type(2) [data-glow]::after {
  opacity: 0;
}
[data-spread] .wrapper:nth-of-type(3) :is(.card__content, a, [data-glow] > [data-glow]),
[data-spread] .wrapper:nth-of-type(3) [data-glow]::after {
  opacity: 0;
}

[data-spread] .wrapper:nth-of-type(4) :is(.card__content, a, [data-glow] > [data-glow]),
[data-spread] .wrapper:nth-of-type(4) [data-glow]::before {
  opacity: 0;
}
[data-spread] .wrapper:nth-of-type(3) article,
[data-spread] .wrapper:nth-of-type(4) article {
  background: transparent;
}

[data-spread] .wrapper:not(:first-of-type) article {
  --bg-spot-opacity: 0.5;
  --border-spot-opacity: 1;
  --border-light-opacity: 1;
}

[data-spread] main::before {
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
  --spotlight-size: calc(var(--size) * 1px);
  --bg-spot-opacity: 0.75;
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.1)), transparent
  );
  z-index: -1;
  opacity: 0.5;
  filter: blur(20px);
}

[data-spread] .wrapper {
  z-index: 2;
}


/* Glow specific styles */
[data-glow] {
  --border-size: calc(var(--border, 2) * 1px);
  --spotlight-size: calc(var(--size, 150) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.1)), transparent
  );
  background-color: var(--backdrop, transparent);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  border: var(--border-size) solid var(--backup-border);
  position: relative;
}

[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}

/* This is the emphasis light */
[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100%
  );
  z-index: 2;
  filter: brightness(2);
}
/* This is the spotlight */
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%
  );
  z-index: 2;
}

[data-glow] [data-glow] {
  position: absolute;
  inset: 0;
  will-change: filter;
}

[data-glow] > [data-glow] {
  border-radius: calc(var(--radius) * 1px);
  border-width: calc(var(--border-size) * 20);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
}

[data-glow] > [data-glow]::before {
  inset: -10px;
  border-width: 10px;
}

[data-glow] [data-glow] {
  border: none;
}

[data-glow] :is(a, button) {
  border-radius: calc(var(--radius) * 1px);
  border: var(--border-size) solid transparent;
}
[data-glow] :is(a, button) [data-glow] {
  background: none;
}
[data-glow] :is(a, button) [data-glow]::before {
  inset: calc(var(--border-size) * -1);
  border-width: calc(var(--border-size) * 1);
}