/* ============================================================
   QWeb Studio v3 — Keyframes & @property
   The Space Journey
   ============================================================ */

/* @property for animatable gradient angle */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ----------------------------------------------------------------
   Keyframes
   ---------------------------------------------------------------- */

@keyframes spin-border {
  to { --border-angle: 360deg; }
}

@keyframes starfield-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50%      { transform: scaleY(0.7); opacity: 0.6; }
}

@keyframes float-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes char-flash {
  0%   { text-shadow: 0 0 8px rgba(123, 97, 255, 0.8), 0 0 16px rgba(0, 212, 255, 0.4); }
  100% { text-shadow: none; }
}

/* Orb pulse */
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Cursor interactive pulse */
@keyframes cursor-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* Screen flash (used by orb/door reveals) */
@keyframes screen-flash {
  0%   { opacity: 0.1; }
  100% { opacity: 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;
  }

  .stars { animation: none !important; }
  .scroll-arrow { animation: none !important; }
  .badge-dot { animation: none !important; }
  .orb-glow { animation: none !important; }
  .door-border { animation: none !important; }

  .split-edge { display: none !important; }
  .path-bg { opacity: 1 !important; background: var(--bg-space) !important; }

  .orb { display: none; }
  .stat-reveal { opacity: 1 !important; transform: none !important; }

  .space-door { display: none; }
  .service-card { opacity: 1 !important; }
  .service-card[data-revealed] { opacity: 1 !important; }
}