:root {
  color-scheme: light;
  --cream: #f4eddf;
  --ink: #392f2a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

main {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.75rem, 4vh, 3.25rem);
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}

.mandala {
  position: relative;
  width: min(72vmin, 46rem);
  aspect-ratio: 1;
}

.mandala__layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--layer-size, 100%);
  height: var(--layer-size, 100%);
  object-fit: contain;
  filter: drop-shadow(0 0 0.45rem rgba(28, 20, 16, 0.78));
  transform-origin: 50% 50%;
  translate: -50% -50%;
  animation-name: rotate-clockwise;
  animation-duration: 240s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.mandala__layer--1 { --layer-size: 100%; }
.mandala__layer--2 { --layer-size: 94.31%; }
.mandala__layer--3 { --layer-size: 80.41%; }
.mandala__layer--4 { --layer-size: 42.05%; }
.mandala__layer--5 { --layer-size: 16.36%; }

.mandala__layer--2,
.mandala__layer--4 {
  animation-name: rotate-counterclockwise;
}

.mandala__layer--2 { animation-duration: 210s; }
.mandala__layer--3 { animation-duration: 180s; }
.mandala__layer--4 { animation-duration: 155s; }
.mandala__layer--5 { animation-duration: 140s; }

.identity {
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.19em;
  line-height: 1.1;
  text-transform: uppercase;
}

p {
  margin: 0.85rem 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

@keyframes rotate-clockwise {
  to { transform: rotate(360deg); }
}

@keyframes rotate-counterclockwise {
  to { transform: rotate(-360deg); }
}

@media (max-width: 40rem) {
  .mandala {
    width: min(86vw, 32rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mandala__layer {
    animation-play-state: paused;
  }
}