/* Flap board uses "Helvetica Neue LT Std" (900) from fonts-lt-std.css via styles.css or flap.html. */

/* Scoped split-flap board (homepage hero + flap.html demo) */
.studio13-flap {
  --perspective: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 8rem;
}

.studio13-flap .board {
  display: flex;
  gap: 0.5ch;
  flex-direction: column;
  text-transform: uppercase;
  font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial,
    ui-sans-serif, sans-serif;
  font-weight: 900;
  padding: 6px;
  background: #000;
}

.studio13-flap .flip-line {
  display: flex;
  gap: 0.5ch;
}

.studio13-flap .flip-line--blank .flip {
  --color: transparent;
}

.studio13-flap .flip-line--blank .flip > div {
  color: transparent !important;
  text-shadow: none;
  background: radial-gradient(
      100% 100% at 50% 100%,
      hsl(0 0% 55% / 0.18),
      transparent
    ),
    hsl(0 0% 14%);
}

.studio13-flap .flip-line--blank .flip::before,
.studio13-flap .flip-line--blank .flip::after {
  opacity: 0.9;
}

.studio13-flap .flip.flip--blank-card > div {
  color: transparent !important;
  background: radial-gradient(
      100% 100% at 50% 100%,
      hsl(0 0% 55% / 0.18),
      transparent
    ),
    hsl(0 0% 14%);
}

.studio13-flap .flip.flip--blank-card::before,
.studio13-flap .flip.flip--blank-card::after {
  opacity: 0.9;
}

.studio13-flap .flip.flip--blank-card {
  --color: transparent;
}

.studio13-flap .flip > div:nth-of-type(2) {
  z-index: 2;
  transform: rotateX(-180deg);
  backface-visibility: hidden;
}

.studio13-flap .flip div:nth-of-type(3) {
  z-index: 3;
  backface-visibility: hidden;
}

.studio13-flap .flip {
  --font-level: 8;
  font-size: clamp(1.35rem, 4vw, 2.5rem);
  color: var(--color, #f5f5f5);
  width: 1.5ch;
  line-height: 1.2;
  display: inline-block;
  height: 1lh;
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  perspective: calc(var(--perspective, 1) * 1em);
}

.studio13-flap .flip::before,
.studio13-flap .flip::after {
  content: "";
  position: absolute;
  width: calc(10% - 0.05em);
  height: calc(20% - 0.05em);
  background: color-mix(in oklch, #333, #f5f5f5 15%);
  top: 50%;
  translate: 0 -50%;
}

.studio13-flap .flip::before {
  left: 0;
}

.studio13-flap .flip::after {
  right: 0;
}

.studio13-flap .flip div {
  position: absolute;
  transform-style: preserve-3d;
  overflow: hidden;
  inset: 0;
  background: radial-gradient(
      100% 100% at 50% 100%,
      hsl(0 0% 60% / 0.2),
      #0000
    ),
    hsl(0 0% 15%);
}

.studio13-flap .flip div:nth-of-type(odd) {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 40%,
    calc(90% + 0.025em) 40%,
    calc(90% + 0.025em) 48%,
    calc(10% - 0.025em) 48%,
    calc(10% - 0.025em) 40%,
    0 40%
  );
}

.studio13-flap .flip div:nth-of-type(even) {
  clip-path: polygon(
    0 60%,
    calc(10% - 0.025em) 60%,
    calc(10% - 0.025em) 52%,
    calc(90% + 0.025em) 52%,
    calc(90% + 0.025em) 60%,
    100% 60%,
    100% 100%,
    0 100%
  );
}

/* Standalone demo page */
.flap-demo-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
}