/* ============================================================
   EPSILON DIARY — ANIMATIONS.CSS
   All @keyframes definitions for the animation system
   ============================================================ */

/* ── Page & Loader ───────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Float / Oscillation (Hero widget idle loops) ─────────── */
@keyframes float-a {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}

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

@keyframes float-c {
  0%, 100% { transform: translateY(2px); }
  50%       { transform: translateY(-3px); }
}

@keyframes float-d {
  0%, 100% { transform: translateY(-1px); }
  50%       { transform: translateY(3px); }
}

/* ── Pulse Ring (Notification badge) ─────────────────────── */
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.8; }
  80%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

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

/* ── Slide Up ─────────────────────────────────────────────── */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up-sm {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Scale In ─────────────────────────────────────────────── */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-in-spring {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Widget Entrance ──────────────────────────────────────── */
@keyframes widget-entrance {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Shake (form validation error) ────────────────────────── */
@keyframes shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(7px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
  90%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* ── Chart Bar (scaleY from 0 — transform-origin: bottom) ─── */
@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Spin (button loading) ────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Counter Tick ─────────────────────────────────────────── */
@keyframes number-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Orbit (Coming Soon animated visual) ─────────────────── */
@keyframes orbit-cw {
  from { transform: rotate(0deg) translateX(48px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(48px) rotate(-360deg); }
}

@keyframes orbit-ccw {
  from { transform: rotate(0deg) translateX(64px) rotate(0deg); }
  to   { transform: rotate(-360deg) translateX(64px) rotate(360deg); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Section heading letter-spacing collapse ─────────────── */
@keyframes heading-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
    letter-spacing: 0.08em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: -0.02em;
  }
}

/* ── Hero word stagger classes ────────────────────────────── */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: slide-up 0.6s var(--ease-out) forwards;
}

/* ── Widget idle animation classes ──────────────────────────*/
.widget-float-a {
  animation: float-a 3.5s ease-in-out infinite;
}

.widget-float-b {
  animation: float-b 3.8s ease-in-out infinite 0.5s;
}

.widget-float-c {
  animation: float-c 4.1s ease-in-out infinite 1.1s;
}

.widget-float-d {
  animation: float-d 3.3s ease-in-out infinite 0.7s;
}

/* ── Notification ping ────────────────────────────────────── */
.ping-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  animation: ping 2s var(--ease-standard) infinite;
}

/* ── Bar chart animation ──────────────────────────────────── */
.chart-bar {
  transform-origin: bottom;
  animation: bar-grow 1s var(--ease-out) forwards;
}

/* ── Donut SVG draw ───────────────────────────────────────── */
.donut-progress {
  stroke-dashoffset: 100;
  animation: donut-draw 1.2s var(--ease-out) forwards 0.3s;
}

@keyframes donut-draw {
  to { stroke-dashoffset: var(--dash-end); }
}

/* ── Coming Soon orbit container ─────────────────────────── */
.orbit-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin: var(--space-5) auto;
}

.orbit-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(74, 155, 199, 0.3);
  animation: none;
}

.orbit-ring-outer {
  inset: -20px;
  border-color: rgba(203, 221, 233, 0.5);
}

.orbit-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  box-shadow: var(--shadow-raised);
}

.orbit-dot-1 {
  animation: orbit-cw 4s linear infinite;
}

.orbit-dot-2 {
  background: var(--color-secondary);
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  animation: orbit-ccw 6s linear infinite 1s;
}

.orbit-dot-3 {
  background: var(--color-primary);
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  animation: orbit-cw 3s linear infinite 2s;
}

/* ── Pulse ring animation (outer ring of orbit center) ────── */
.pulse-ring-anim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  animation: pulse-ring 2.5s var(--ease-standard) infinite;
}

.pulse-ring-anim:nth-child(2) {
  animation-delay: 0.8s;
}