/* ============================================================
   Athena Branded Loaders
   Full (flip-cascade) + 3 compact variants (shatter, rock, patrol)
   ============================================================ */

/* -----------------------------
   Shared loader tokens
   ----------------------------- */
:root {
  --loader-mint: #7DE2B8;
  --loader-lav: #B3B6F5;
  --loader-peach: #FFB3A7;
}

/* ═══════════════════════════════
   FULL — 3-helmet flip cascade
   ═══════════════════════════════ */
.athena-loader-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  perspective: 600px;
}

.athena-loader-full .flip-item {
  width: 28px;
  height: 28px;
  position: relative;
  transform-style: preserve-3d;
  animation: athenaFlipCascade 2.4s ease-in-out infinite;
}

.athena-loader-full .flip-item svg {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.athena-loader-full .flip-front { transform: rotateY(0deg); }
.athena-loader-full .flip-back  { transform: rotateY(180deg); }

.athena-loader-full .d1 { animation-delay: 0s; }
.athena-loader-full .d2 { animation-delay: 0.15s; }
.athena-loader-full .d3 { animation-delay: 0.3s; }

@keyframes athenaFlipCascade {
  0%, 15%  { transform: rotateY(0deg); }
  35%, 65% { transform: rotateY(180deg); }
  85%, 100%{ transform: rotateY(360deg); }
}

/* Size variants */
.athena-loader-full--sm .flip-item { width: 18px; height: 18px; }
.athena-loader-full--sm { gap: 4px; }

.athena-loader-full--lg .flip-item { width: 40px; height: 40px; }
.athena-loader-full--lg { gap: 10px; }

/* ═══════════════════════════════
   COMPACT SHATTER — 7 frames
   ═══════════════════════════════ */
.athena-loader-shatter {
  position: relative;
  width: 28px;
  height: 28px;
  perspective: 400px;
}

.athena-loader-shatter svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.athena-loader-shatter .sf1 { animation: athenaS7flip 8.4s ease-in-out infinite 0s; }
.athena-loader-shatter .sf2 { animation: athenaS7flip 8.4s ease-in-out infinite 1.2s; }
.athena-loader-shatter .sf3 { animation: athenaS7flip 8.4s ease-in-out infinite 2.4s; }
.athena-loader-shatter .sf4 { animation: athenaS7flip 8.4s ease-in-out infinite 3.6s; }
.athena-loader-shatter .sf5 { animation: athenaS7flip 8.4s ease-in-out infinite 4.8s; }
.athena-loader-shatter .sf6 { animation: athenaS7flip 8.4s ease-in-out infinite 6.0s; }
.athena-loader-shatter .sf7 { animation: athenaS7flip 8.4s ease-in-out infinite 7.2s; }

@keyframes athenaS7flip {
  0%      { opacity: 0; transform: rotateX(90deg); }
  3%      { opacity: 1; transform: rotateX(0deg); }
  11.3%   { opacity: 1; transform: rotateX(0deg); }
  14.28%  { opacity: 0; transform: rotateX(-90deg); }
  100%    { opacity: 0; transform: rotateX(-90deg); }
}

/* ═══════════════════════════════
   COMPACT ROCK — pendulum + color
   ═══════════════════════════════ */
.athena-loader-rock {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.athena-loader-rock svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 85%;
  animation: athenaRockSwing 1.4s ease-in-out infinite;
}

.athena-loader-rock svg path {
  animation: athenaColorShift 2.4s ease-in-out infinite;
}

@keyframes athenaRockSwing {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(18deg); }
}

@keyframes athenaColorShift {
  0%, 100% { fill: var(--loader-mint); }
  33%      { fill: var(--loader-lav); }
  66%      { fill: var(--loader-peach); }
}

/* ═══════════════════════════════
   COMPACT PATROL — stepped rotation + color
   ═══════════════════════════════ */
.athena-loader-patrol {
  width: 28px;
  height: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.athena-loader-patrol svg {
  width: 100%;
  height: 100%;
  animation: athenaPatrolSpin 3s infinite;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.athena-loader-patrol svg path {
  animation: athenaPatrolColor 3s infinite steps(1, end);
}

@keyframes athenaPatrolSpin {
  0%    { transform: rotate(0deg); }
  33.3% { transform: rotate(90deg); }
  66.6% { transform: rotate(180deg); }
  100%  { transform: rotate(270deg); }
}

@keyframes athenaPatrolColor {
  0%    { fill: var(--loader-mint); }
  33.3% { fill: var(--loader-peach); }
  66.6% { fill: var(--loader-lav); }
}

/* ═══════════════════════════════
   BUTTON LOADING STATE
   ═══════════════════════════════ */
.btn--loading,
.btn-mini--loading {
  position: relative;
  pointer-events: none;
  cursor: wait;
}

.btn--loading .btn-label,
.btn-mini--loading .btn-label {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.btn--loading .athena-loader-full,
.btn--loading .athena-loader-shatter,
.btn--loading .athena-loader-rock,
.btn--loading .athena-loader-patrol,
.btn-mini--loading .athena-loader-full,
.btn-mini--loading .athena-loader-shatter,
.btn-mini--loading .athena-loader-rock,
.btn-mini--loading .athena-loader-patrol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Scale compact loaders inside mini buttons */
.btn-mini--loading .athena-loader-shatter,
.btn-mini--loading .athena-loader-rock,
.btn-mini--loading .athena-loader-patrol {
  width: 22px;
  height: 22px;
}

.btn-mini--loading .athena-loader-shatter svg,
.btn-mini--loading .athena-loader-rock svg,
.btn-mini--loading .athena-loader-patrol svg {
  width: 22px;
  height: 22px;
}

/* Scale full loader inside standard buttons */
.btn--loading .athena-loader-full .flip-item {
  width: 20px;
  height: 20px;
}

.btn--loading .athena-loader-full {
  gap: 4px;
}

/* ═══════════════════════════════
   IMAGE LOADER OVERLAY (full loader)
   ═══════════════════════════════ */
.image-loader .athena-loader-full .flip-item {
  width: 32px;
  height: 32px;
}

.image-loader .athena-loader-full {
  gap: 8px;
}