/* THE KALEIDOSCOPE ROOM — one shard, mirrored eight times, never repeats. */

@property --hue {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

:root {
  --kd-bg: #05010a;
}

body.kaleidoscope {
  background: var(--kd-bg);
  color: #f4e9ff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  overflow: hidden;
}

.kd-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}
.kd-header h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  background: linear-gradient(90deg, #ff2fd6, #ffe62f, #2fe0ff, #ff2fd6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-shift 8s linear infinite;
}
.kd-header p {
  max-width: 40ch;
  margin: 0.75rem auto 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

@keyframes hue-shift {
  from { background-position: 0% 0; }
  to   { background-position: 300% 0; }
}

/* the scope itself: a circular window, eight identical wedges of the
   same underlying pattern, alternately mirrored and rotated 45deg apart.
   because every wedge samples the SAME local gradient, the reflections
   line up into real kaleidoscope symmetry. */
.scope {
  width: min(80vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 10px #1a0e22, 0 0 80px 20px rgba(255, 47, 214, 0.35);
  animation: rotate-scope 50s linear infinite;
}

@keyframes rotate-scope {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wedge {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
  background:
    radial-gradient(circle at 85% 15%, #ffe62f 0%, transparent 32%),
    radial-gradient(circle at 70% 75%, #ff2fd6 0%, transparent 36%),
    radial-gradient(circle at 25% 60%, #2fe0ff 0%, transparent 30%),
    radial-gradient(circle at 40% 20%, #6dff2f 0%, transparent 26%),
    conic-gradient(from var(--hue), #2a0033, #05010a 60%);
  animation: hue-cycle 14s linear infinite;
}

@keyframes hue-cycle {
  from { --hue: 0deg; }
  to   { --hue: 360deg; }
}

.wedge:nth-child(1) { transform: rotate(0deg); }
.wedge:nth-child(2) { transform: rotate(45deg) scaleX(-1); }
.wedge:nth-child(3) { transform: rotate(90deg); }
.wedge:nth-child(4) { transform: rotate(135deg) scaleX(-1); }
.wedge:nth-child(5) { transform: rotate(180deg); }
.wedge:nth-child(6) { transform: rotate(225deg) scaleX(-1); }
.wedge:nth-child(7) { transform: rotate(270deg); }
.wedge:nth-child(8) { transform: rotate(315deg) scaleX(-1); }

.scope-wrap {
  display: block;
  cursor: pointer;
}
.kd-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* click the scope — it spins the other way, much faster, until you
   click again */
.scope-wrap:has(.kd-toggle:checked) .scope {
  animation-duration: 4s;
  animation-direction: reverse;
}

.scope::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
  pointer-events: none;
}

.kd-hint {
  position: relative;
  z-index: 2;
  max-width: 40ch;
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.7;
}