:root{
  --bg:#0f142b;
  --text:#E7E0D2;
  --muted:rgba(231,224,210,.55);

  --ring: rgba(231,224,210,.86);
  --ringGlow: rgba(231,224,210,.28);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: #0f142b;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  overflow: hidden;
}

.stage{ position:relative; width:100vw; height:100vh; }

.outerMask{
  position:absolute; inset:0;
  background: transparent;
  pointer-events:none;
}

.square{
  position:absolute;
  inset:0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events:auto;
}

.quad{
  position: absolute;
  width: 50%;
  height: 50%;
  cursor: pointer;
}

.quad .label{
  position: absolute;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: lowercase;
  opacity: 0;
  transition: opacity 200ms ease;
  color: rgba(231,224,210,.85);
  pointer-events: none;
}

#q-worldviews .label{ top: 22px; left: 22px; }
#q-works .label{ top: 22px; right: 22px; }
#q-sounds .label{ bottom: 22px; left: 22px; }
#q-systems .label{ bottom: 22px; right: 22px; }

.quad:hover .label{ opacity: 1; }

#q-worldviews{ top:0; left:0; }
#q-works{ top:0; right:0; }
#q-sounds{ bottom:0; left:0; }
#q-systems{ bottom:0; right:0; }

/* Field layers: a giant radial gradient whose CENTER is pinned to the ring center */
.field{
  position: fixed;
  left: var(--ring-x, 50vw);
  top:  var(--ring-y, 50vh);
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 260ms ease;
  filter: blur(1px);
  will-change: opacity, transform;

  --c: 120, 90, 200;
  --a1: 0.14;
  --a2: 0.07;
  --a3: 0.03;

  background: radial-gradient(circle,
    rgba(var(--c), var(--a1)) 0%,
    rgba(var(--c), var(--a2)) 22%,
    rgba(var(--c), var(--a3)) 45%,
    rgba(var(--c), 0.00) 72%
  );

  transition:
    opacity 260ms ease,
    --c 520ms ease,
    --a1 520ms ease,
    --a2 520ms ease,
    --a3 520ms ease;
}

.field.active{
  opacity: var(--field-k, 1);
  animation: fieldBreath 24s ease-in-out infinite;
}

@keyframes fieldBreath{
  0%   { transform: translate(-50%,-50%) scale(0.98); opacity: 0.75; }
  50%  { transform: translate(-50%,-50%) scale(1.03); opacity: 0.90; }
  100% { transform: translate(-50%,-50%) scale(0.98); opacity: 0.75; }
}

.ring{
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate3d(-50%,-50%,0);
  width: 140px;
  height: 140px;
  z-index: 999;
  pointer-events: auto;
  opacity: 0;
}

.ring.ready{
  opacity: 1;
  transition: opacity 120ms ease;
}

.ring .outer{
  position:absolute; inset:0;
  border-radius:999px;
  border: 1px solid var(--ring);
  box-shadow: 0 0 22px var(--ringGlow);
}

.ring .outer{
  animation: pulseSlow 2.8s ease-in-out infinite;
}

.ring.hover .outer{
  animation: pulseFast 1.6s ease-in-out infinite;
}

@keyframes pulseSlow{
  0%{ transform: scale(1); opacity: .86; }
  50%{ transform: scale(1.045); opacity: .55; }
  100%{ transform: scale(1); opacity: .86; }
}

@keyframes pulseFast{
  0%{ transform: scale(1); opacity: .90; }
  50%{ transform: scale(1.06); opacity: .52; }
  100%{ transform: scale(1); opacity: .90; }
}

.ring.moving{
  transition:
    left 900ms cubic-bezier(.18,.95,.18,1),
    top  900ms cubic-bezier(.18,.95,.18,1);
  will-change: left, top;
}

.to-tl{ left: 0vw; top: 0vh; }
.to-tr{ left: 100vw; top: 0vh; }
.to-bl{ left: 0vw; top: 100vh; }
.to-br{ left: 100vw; top: 100vh; }

.to-center{ left: 50vw; top: 50vh; }

.layer{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 2;
}

.layer.origin-tl{ transform-origin: 0% 0%; }
.layer.origin-tr{ transform-origin: 100% 0%; }
.layer.origin-bl{ transform-origin: 0% 100%; }
.layer.origin-br{ transform-origin: 100% 100%; }

.layer.active{
  opacity: 1;
  pointer-events: auto;
}

.layer.exiting{
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.footerHint{
  position:absolute;
  bottom: 26px;
  left:50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .45;
  user-select:none;
  z-index: 7;
}

@media (prefers-reduced-motion: reduce){
  .ring.moving{ transition:none; }
  .ring.hover .outer,.ring.hover .inner{ animation:none; }
  .field.active{ animation:none; }
  .layer{ transition:none; }
}