/* THR3 — palette from the sigil: void black, blood copper, molten gold */
:root {
  --void: #050000;
  --abyss: #0a0002;
  --blood: #300000;
  --ember: #701000;
  --copper: #a04018;
  --amber: #e0a020;
  --gold: #f0f040;
  --flare: #ffff60;
  --soft-gold: rgba(240, 240, 64, 0.35);
  --soft-ember: rgba(160, 40, 16, 0.4);
  --node-idle: rgba(240, 200, 48, 0.045);
  --node-near: rgba(255, 220, 64, 0.22);
  --node-lit: rgba(255, 240, 96, 0.85);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: transparent;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

body.revealed {
  cursor: none;
}

#void {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 48%, #1a0505 0%, transparent 55%),
    radial-gradient(ellipse 120% 100% at 50% 100%, #200808 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #120202 0%, var(--void) 70%);
  overflow: hidden;
}

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Slow breathing aurora behind everything */
#aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      rgba(112, 16, 0, 0.18) 40deg,
      transparent 80deg,
      rgba(240, 180, 32, 0.08) 120deg,
      transparent 160deg,
      rgba(80, 8, 0, 0.22) 200deg,
      transparent 240deg,
      rgba(224, 160, 32, 0.1) 280deg,
      transparent 320deg,
      rgba(48, 0, 0, 0.2) 360deg
    );
  filter: blur(48px);
  animation: spin-slow 48s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

body.revealed #aurora {
  animation-duration: 12s;
  opacity: 1;
  filter: blur(32px) saturate(1.4);
}

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

#grain {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-shift 0.4s steps(3) infinite;
}

@keyframes grain-shift {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-1%, 1%);
  }
  66% {
    transform: translate(1%, -1%);
  }
  100% {
    transform: translate(0, 0);
  }
}

#vignette {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.92) 100%);
}

#bloom {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle 28vmin at var(--mx, 50%) var(--my, 50%), rgba(240, 200, 48, 0.07), transparent 55%);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

/* —— Central sigil —— */
#orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vmin, 480px);
  height: min(72vmin, 480px);
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  perspective: 900px;
}

.sigil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(48vmin, 320px);
  height: min(36vmin, 240px);
  transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    scale(var(--sc, 1));
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  filter: drop-shadow(0 0 12px rgba(112, 16, 0, 0.55)) drop-shadow(0 0 40px rgba(240, 200, 48, 0.18));
  animation: float-sigil 6.66s ease-in-out infinite;
  will-change: transform, filter;
  pointer-events: auto;
  cursor: none;
}

.sigil img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  animation: pulse-glow 3.33s ease-in-out infinite;
}

.sigil .core {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 14%;
  height: 18%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 120, 0.55) 0%, rgba(240, 180, 32, 0.15) 45%, transparent 70%);
  filter: blur(4px);
  pointer-events: auto;
  mix-blend-mode: screen;
  animation: core-breathe 3.33s ease-in-out infinite;
}

@keyframes float-sigil {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    filter: brightness(1) contrast(1.05);
  }
  50% {
    filter: brightness(1.12) contrast(1.1);
  }
}

@keyframes core-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(160, 40, 16, 0.25);
  box-shadow:
    0 0 30px rgba(112, 16, 0, 0.25),
    inset 0 0 40px rgba(240, 160, 32, 0.04);
  animation: halo-spin 22s linear infinite;
  pointer-events: none;
}

.halo.delay {
  width: 88%;
  height: 88%;
  border-color: rgba(240, 200, 48, 0.12);
  animation-duration: 33s;
  animation-direction: reverse;
}

.halo.delay2 {
  width: 100%;
  height: 100%;
  border-color: rgba(80, 8, 0, 0.35);
  border-style: dashed;
  animation-duration: 48s;
}

@keyframes halo-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  opacity: 0.4;
}

.ring.r1 {
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%) rotateX(68deg);
  border-color: rgba(160, 40, 16, 0.35);
  animation: ring-tilt 9s ease-in-out infinite;
}

.ring.r2 {
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%) rotateY(62deg);
  border-color: rgba(240, 180, 32, 0.18);
  animation: ring-tilt 12s ease-in-out infinite reverse;
}

.ring.r3 {
  width: 84%;
  height: 84%;
  transform: translate(-50%, -50%) rotateX(50deg) rotateZ(30deg);
  border-color: rgba(112, 16, 0, 0.3);
  animation: ring-tilt 15s linear infinite;
}

@keyframes ring-tilt {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.55;
  }
}

/* —— Hidden nodes (equilateral triangle) —— */
.node {
  position: fixed;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--node-idle) 0%, transparent 70%);
  box-shadow: none;
  z-index: 12;
  cursor: none;
  opacity: 1;
  transition:
    background 0.6s ease,
    box-shadow 1.2s ease,
    transform 0.4s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: node-whisper 9.99s ease-in-out infinite;
}

.node::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(240, 200, 48, 0.04);
  opacity: 0.5;
}

.node.near {
  background: radial-gradient(circle, var(--node-near) 0%, transparent 72%);
  box-shadow: 0 0 18px rgba(240, 200, 48, 0.15);
  transform: scale(1.35);
  animation: none;
}

.node.lit {
  background: radial-gradient(circle, var(--node-lit) 0%, rgba(224, 120, 24, 0.35) 40%, transparent 72%);
  box-shadow:
    0 0 24px rgba(255, 240, 96, 0.55),
    0 0 60px rgba(160, 40, 16, 0.4);
  transform: scale(1.5);
  animation: node-lit-pulse 1.11s ease-in-out infinite;
}

@keyframes node-whisper {
  0%,
  90%,
  100% {
    filter: brightness(1);
  }
  93% {
    filter: brightness(2.4);
  }
  96% {
    filter: brightness(1);
  }
}

@keyframes node-lit-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.4);
  }
}

/* Lines that appear when nodes light */
#tri-lines {
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}

#tri-lines svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

#tri-lines line {
  stroke: rgba(240, 200, 48, 0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 220, 64, 0.6));
  stroke-dasharray: 8 6;
  animation: dash-flow 1.5s linear infinite;
}

@keyframes dash-flow {
  to {
    stroke-dashoffset: -28;
  }
}

/* —— Custom cursor —— */
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.25s ease;
}

#cursor .c-ring {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(240, 200, 48, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(160, 40, 16, 0.35);
  transition:
    transform 0.18s ease,
    border-radius 0.35s ease,
    border-color 0.25s ease,
    width 0.2s ease,
    height 0.2s ease,
    margin 0.2s ease;
}

#cursor .c-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--flare);
}

#cursor .c-tri {
  position: absolute;
  width: 0;
  height: 0;
  margin: -10px 0 0 -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 16px solid rgba(240, 200, 48, 0.55);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(255, 220, 64, 0.6));
}

#cursor.hot .c-ring {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-color: rgba(255, 240, 96, 0.75);
  border-radius: 4px;
  transform: rotate(45deg);
}

#cursor.hot .c-tri {
  opacity: 1;
  transform: scale(1);
}

#cursor.click .c-ring {
  transform: scale(0.7);
  border-color: var(--copper);
}

/* —— Reveal state —— */
#reveal {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

body.revealed #reveal {
  opacity: 1;
}

#reveal .mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vmin, 720px);
  height: min(90vmin, 720px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(240, 200, 48, 0.06) 0deg 2deg,
      transparent 2deg 40deg
    ),
    radial-gradient(circle, transparent 28%, rgba(112, 16, 0, 0.25) 45%, transparent 70%);
  animation: mandala-spin 18s linear infinite;
  mask-image: radial-gradient(circle, black 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 20%, transparent 72%);
}

@keyframes mandala-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#reveal .clone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(28vmin, 180px);
  height: min(21vmin, 135px);
  margin: calc(min(21vmin, 135px) / -2) 0 0 calc(min(28vmin, 180px) / -2);
  background: url("../images/thr3-logo4.png") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(240, 200, 48, 0.45));
  opacity: 0.85;
  animation: orbit-clone 9.99s linear infinite;
  transform-origin: center center;
}

#reveal .clone:nth-child(2) {
  animation-delay: -3.33s;
  filter: drop-shadow(0 0 16px rgba(160, 40, 16, 0.55)) hue-rotate(-8deg);
}

#reveal .clone:nth-child(3) {
  animation-delay: -6.66s;
  filter: drop-shadow(0 0 16px rgba(255, 220, 64, 0.4)) hue-rotate(12deg);
}

@keyframes orbit-clone {
  from {
    transform: rotate(0deg) translateX(min(32vmin, 220px)) rotate(0deg) scale(0.72);
  }
  to {
    transform: rotate(360deg) translateX(min(32vmin, 220px)) rotate(-360deg) scale(0.72);
  }
}

#reveal .beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 45vmin;
  margin-left: -1px;
  background: linear-gradient(to top, transparent, rgba(255, 240, 96, 0.55), transparent);
  transform-origin: bottom center;
  filter: blur(0.5px);
  opacity: 0.7;
}

body.revealed .sigil {
  filter: drop-shadow(0 0 20px rgba(255, 240, 96, 0.65)) drop-shadow(0 0 60px rgba(160, 40, 16, 0.55));
  animation: float-sigil 3.33s ease-in-out infinite, reveal-throb 3.33s ease-in-out infinite;
}

@keyframes reveal-throb {
  0%,
  100% {
    --sc: 1;
  }
  50% {
    --sc: 1.06;
  }
}

body.revealed .halo {
  border-color: rgba(240, 200, 48, 0.45);
  box-shadow:
    0 0 50px rgba(240, 200, 48, 0.25),
    inset 0 0 60px rgba(255, 200, 48, 0.08);
}

/* Flash burst at unlock */
.burst-flash {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 250, 180, 0.85), rgba(160, 40, 16, 0.4) 35%, transparent 70%);
  animation: flash-out 1.4s ease-out forwards;
}

@keyframes flash-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Click ripples */
.ripple {
  position: fixed;
  border-radius: 50%;
  border: 1px solid rgba(240, 200, 48, 0.55);
  pointer-events: none;
  z-index: 15;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-out 0.9s ease-out forwards;
}

@keyframes ripple-out {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-color: rgba(160, 40, 16, 0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #grain {
    animation: none;
  }

  html,
  body {
    cursor: auto;
  }

  #cursor {
    display: none;
  }
}

@media (max-width: 600px) {
  .sigil {
    width: min(70vmin, 280px);
    height: min(52vmin, 210px);
  }

  .node {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
  }
}