@charset "UTF-8";

@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2 supports variations"),
    url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2-variations");
  font-weight: 100 1000;
}

@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-translate-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-blur {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --glow-radius {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --white-shadow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --debug: 0;
  --card-color: hsl(260deg 100% 3%);
  --text-color: hsl(260deg 10% 55%);
  --card-radius: 3.6vw;
  --card-width: 35vw;
  --border-width: 3px;
  --bg-size: 1;
  --hue: 0;
  --hue-speed: 1;
  --rotate: 0;
  --animation-speed: 4s;
  --interaction-speed: 0.55s;
  --glow-scale: 1.5;
  --scale-factor: 1;
  --glow-blur: 6;
  --glow-opacity: 1;
  --glow-radius: 100;
  --glow-rotate-unit: 1deg;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body.transition-page {
  background-color: var(--card-color);
  overflow: hidden;
  font-family: "Mona Sans", sans-serif;
}

.transition-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-card {
  width: min(480px, var(--card-width));
  aspect-ratio: 1.5/1;
  position: relative;
  border-radius: var(--card-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-card::before,
.transition-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
}

.transition-content {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--card-color);
  border-radius: calc(var(--card-radius) * 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  font-stretch: 150%;
  font-size: clamp(1.5vw, 1.5vmin, 32px);
  color: var(--text-color);
  padding: calc(var(--card-width) / 8);
  z-index: 2;
}

.transition-content span {
  display: inline-block;
  padding: 0.25em;
  border-radius: 4px;
  background: var(--text-color);
  color: black;
  margin-right: 8px;
  font-weight: 900;
}

.transition-content::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--card-radius) * 0.9);
  box-shadow: 0 0 20px black;
  mix-blend-mode: color-burn;
  z-index: -1;
  background: #292929
    radial-gradient(
      30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
      hsl(calc(var(--hue) * 1deg), 100%, 90%) 0%,
      hsl(calc(var(--hue) * 1deg), 100%, 80%) 20%,
      hsl(calc(var(--hue) * 1deg), 100%, 60%) 40%,
      transparent 100%
    );
  animation: hue-animation var(--animation-speed) linear infinite,
    rotate-bg var(--animation-speed) linear infinite;
  transition: --bg-size var(--interaction-speed) ease;
}

.transition-card:hover .transition-content {
  mix-blend-mode: darken;
  --text-color: white;
  animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
}

.glow {
  position: absolute;
  width: calc(var(--card-width) / 5);
  height: calc(var(--card-width) / 5);
  animation: rotate var(--animation-speed) linear infinite;
  transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
  transform-origin: center;
  border-radius: calc(var(--glow-radius) * 10vw);
}

.glow::after {
  content: "";
  position: relative;
  display: block;
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  background: hsl(calc(var(--hue) * 1deg), 100%, 60%);
  filter: blur(calc(var(--glow-blur) * 10px));
  border-radius: calc(var(--glow-radius) * 10vw);
  animation: hue-animation var(--animation-speed) linear infinite;
  transform: scaleY(calc(var(--glow-scale) / 1.1))
    scaleX(calc(var(--glow-scale) * 1.2))
    translateY(calc(var(--glow-translate-y) * 1%));
  opacity: var(--glow-opacity);
}

/* LINK FULL CARD */
.full-link {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* KEYFRAMES — STRICTEMENT IDENTIQUES */

@keyframes shadow-pulse {
  0%, 24%, 46%, 73%, 96% { --white-shadow: 0.5; }
  12%, 28%, 41%, 63%, 75%, 82%, 98% { --white-shadow: 2.5; }
  6%, 32%, 57% { --white-shadow: 1.3; }
  18%, 52%, 88% { --white-shadow: 3.5; }
}

@keyframes rotate-bg {
  0% { --bg-x: 0; --bg-y: 0; }
  25% { --bg-x: 100; --bg-y: 0; }
  50% { --bg-x: 100; --bg-y: 100; }
  75% { --bg-x: 0; --bg-y: 100; }
  100% { --bg-x: 0; --bg-y: 0; }
}

@keyframes rotate {
  from { --rotate: -70; --glow-translate-y: -65; }
  to { --rotate: 290; --glow-translate-y: -65; }
}

@keyframes hue-animation {
  0% { --hue: 0; }
  100% { --hue: 360; }
}