.spiral-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* adjust as needed */
}


.triangle {
  width: 120px;
  height: 120px;
  transform-origin: center center;
  transition: transform 0.5s ease-out;
  image-rendering: crisp-edges;
  will-change: transform, filter;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
  background-color: transparent;
  cursor: url('cursor-icon.png'), pointer;
}

.main-space {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.spiral-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
  margin: -16vh auto 0 auto; /* nudges spiral upward across screens */
}
.spacer {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spiral-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

@keyframes spinStage2 {
  from { transform: rotate(360deg); }
  to   { transform: rotate(1080deg); }
}

@keyframes spinStage3 {
  0% {
    transform: rotate(1080deg);
    filter: blur(1.5px) brightness(1.3);
  }
  100% {
    transform: rotate(1980deg);
    filter: blur(1.5px) brightness(1.3);
  }
}

/* Flicker effect using opacity and box-shadow pulses */
@keyframes bgFlicker {
  0%   { opacity: 0; box-shadow: none; }
  5%   { opacity: 0.2; box-shadow: 0 0 4px rgba(0,255,255,0.2); }
  9%   { opacity: 0.7; box-shadow: 0 0 25px rgba(0,255,255,0.9); }
  12%  { opacity: 0.1; box-shadow: 0 0 3px rgba(0,255,255,0.1); }
  17%  { opacity: 0; box-shadow: none; }
  26%  { opacity: 0.5; box-shadow: 0 0 10px rgba(0,255,255,0.6); }
  31%  { opacity: 0.8; box-shadow: 0 0 30px rgba(0,255,255,1); }
  44%  { opacity: 0.1; box-shadow: 0 0 6px rgba(0,255,255,0.2); }
  56%  { opacity: 0; box-shadow: none; }
  67%  { opacity: 0.9; box-shadow: 0 0 40px rgba(0,255,255,0.8); }
  74%  { opacity: 0.3; box-shadow: 0 0 8px rgba(0,255,255,0.3); }
  86%  { opacity: 0.6; box-shadow: 0 0 20px rgba(0,255,255,0.7); }
  100% { opacity: 1; box-shadow: 0 0 14px rgba(0,255,255,0.6); }
}
@keyframes spiralFlicker {
  0%   { opacity: 0; filter: none; }
  3%   { opacity: 1; filter: blur(2px) brightness(1.3); }
  11%  { opacity: 0.6; filter: blur(1px) brightness(1); }
  17%  { opacity: 0; filter: none; }
  23%  { opacity: 0.9; filter: blur(0.5px) brightness(0.8); }
  31%  { opacity: 0.2; filter: none; }
  38%  { opacity: 1; filter: blur(2px) brightness(1.2); }
  50%  { opacity: 0; filter: none; }
  59%  { opacity: 0.7; filter: blur(1px) brightness(1.1); }
  67%  { opacity: 0.1; filter: none; }
  74%  { opacity: 1; filter: blur(3px) brightness(1.4); }
  88%  { opacity: 0.3; filter: blur(0.5px) brightness(0.9); }
  100% { opacity: 1; filter: blur(1px) brightness(1.2); }
}




.flicker {
  animation: bgFlicker 5s linear forwards;
}

.flicker img {
  animation: spiralFlicker 5s linear forwards;
}




/* Start fast blur spin */
.spin-sequence {
  animation:
    spinStage1 1s linear forwards,
    spinStage2 1s linear 1s forwards,
    spinStage3 0.2s linear 2s infinite;
  filter: blur(1.5px) brightness(1.3);
}

.spin-sequence {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

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

@keyframes slowStop {
  from { transform: rotate(0deg); }
  to { transform: rotate(30deg); }
}