/* ─── ANIMATIONS.CSS ─────────────────────────────────────────
   Keyframes, scroll reveal, cursor, marquee, geometric spin
   ──────────────────────────────────────────────────────────── */

/* ─── Custom cursor ─── */
.cursor {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

.cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1px solid rgba(200, 149, 106, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: all 0.25s ease;
}

/* ─── Scroll reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Keyframes ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes lineAnim {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes crystalPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

/* ─── Hero entrance animations ─── */
.anim-fade-up-1 { opacity: 0; animation: fadeUp 1s ease 0.3s forwards; }
.anim-fade-up-2 { opacity: 0; animation: fadeUp 1s ease 0.5s forwards; }
.anim-fade-up-3 { opacity: 0; animation: fadeUp 1s ease 0.7s forwards; }
.anim-fade-up-4 { opacity: 0; animation: fadeUp 1s ease 0.9s forwards; }
.anim-fade-up-5 { opacity: 0; animation: fadeUp 1s ease 1.4s forwards; }

/* ─── Geo circles (hero decoration) ─── */
.geo-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: spinSlow linear infinite;
}

.geo-1 { width: 380px; height: 380px; border-color: rgba(200,149,106,0.15); animation-duration: 60s; }
.geo-2 { width: 280px; height: 280px; border-color: rgba(200,149,106,0.1);  animation-duration: 40s; animation-direction: reverse; }
.geo-3 { width: 180px; height: 180px; border-color: rgba(200,149,106,0.2);  animation-duration: 25s; }

/* ─── Scroll indicator line ─── */
.scroll-line {
  width: 40px;
  height: 1px;
  background: var(--amber);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ivory);
  animation: lineAnim 2s ease infinite;
}