/* ─── CURSOR SECTION STYLES ───────────────────────────── */

.crs__section.crs--active {
  cursor: none;
}

.crs__cursor-dot {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.crs__cursor-dot.crs--dot-visible {
  opacity: 1;
}

.crs__cursor-dot.crs--dot-on-btn {
  opacity: 0;
}

.crs__tile {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.4,0.64,1);
}

.crs__tile.crs__tile--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--tile-rot));
}

/* Tile rotation variables */
.crs__tile-1 { --tile-rot: 45deg; }
.crs__tile-2 { --tile-rot: 90deg; }
.crs__tile-3 { --tile-rot: 135deg; }
.crs__tile-4 { --tile-rot: 180deg; }
.crs__tile-5 { --tile-rot: 225deg; }
.crs__tile-6 { --tile-rot: 270deg; }
.crs__tile-7 { --tile-rot: 315deg; }
.crs__tile-8 { --tile-rot: 360deg; }