/* ══════════════════════════════════════════════════════
   AVTR MOTION IDENTITY SYSTEM
   Tokens · Keyframes · Components
   ══════════════════════════════════════════════════════ */

/* ── Animation Tokens ────────────────────────────────── */
:root {
  --avtr-load-dur:     2.4s;
  --avtr-settle-dur:   0.7s;
  --avtr-ease-smooth:  cubic-bezier(0.45, 0, 0.55, 1);
  --avtr-ease-settle:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Keyframes ───────────────────────────────────────── */

/* AI Core Reactor — logo pulse (scale + brightness glow, no hue shift) */
@keyframes avtr-core-pulse {
  0%, 100% { transform: scale(1);    filter: brightness(1)    drop-shadow(0 0 6px  rgba(91,94,244,0.45)); }
  50%       { transform: scale(1.05); filter: brightness(1.14) drop-shadow(0 0 18px rgba(91,94,244,0.78)); }
}

/* AI Core Reactor — outer ring continuous spin */
@keyframes avtr-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* AI Core Reactor — ambient radial glow flicker (offset from pulse for unsynced feel) */
@keyframes avtr-glow-breathe {
  0%, 100% { opacity: 0.28; }
  55%      { opacity: 0.62; }
}

/* Success settle — one-shot */
@keyframes avtr-settle {
  0%   { transform: scale(1.1);  filter: brightness(1.3)  saturate(1.5); opacity: 0.8; }
  55%  { transform: scale(0.97); filter: brightness(1.05) saturate(1.1); opacity: 1; }
  100% { transform: scale(1);    filter: brightness(1)    saturate(1);   opacity: 1; }
}

/* Card enter — result images appearing */
@keyframes avtr-card-enter {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* CTA glow breathe */
@keyframes avtr-cta-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(91,94,244,0.30); }
  50%       { box-shadow: 0 6px 32px rgba(91,94,244,0.52), 0 0 0 5px rgba(91,94,244,0.07); }
}

/* ── Brand Config Vars ───────────────────────────────── */
:root {
  --avtr-logo-mono-light: url('/static/logo/avtr-logo-mono-light.png');
  --avtr-logo-mono-dark:  url('/static/logo/avtr-logo-mono-dark.png');
  --avtr-logo-grad-light: url('/static/logo/avtr-logo-gradient-light.png');
  --avtr-icon-grad:       url('/static/logo/avtr-icon-gradient.png');
}

/* ── Hero Brand Mark ─────────────────────────────────── */
.avtr-hero-mark-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.avtr-hero-mark {
  width: 60px;
  height: auto;
  display: block;
}

/* ── AI Core Reactor — main generation loader ─────────── */
.ai-loader {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-loader-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,94,244,0.38) 0%, rgba(124,92,252,0.18) 48%, transparent 72%);
  animation: avtr-glow-breathe 1.8s ease-in-out infinite;
  pointer-events: none;
}

.ai-loader-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: avtr-ring-spin 2.5s linear infinite;
  filter: blur(0.4px);
  pointer-events: none;
}

.avtr-brand-loader {
  width: 44px;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  will-change: transform, filter;
  animation: avtr-core-pulse 1.3s ease-in-out infinite;
}

/* Mini loader for inline slot spinners */
.avtr-mini-loader {
  width: 32px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
  will-change: transform, filter;
  animation: avtr-core-pulse 1.3s ease-in-out infinite;
}

/* ── Settle — applied via JS after generation ─────────── */
.avtr-settle {
  animation: avtr-settle var(--avtr-settle-dur) var(--avtr-ease-settle) forwards !important;
}

/* ── Result card entrance ────────────────────────────── */
.avtr-card-enter {
  animation: avtr-card-enter 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── CTA glow — opt-in class, added to specific hero CTAs ── */
.avtr-glow-cta {
  animation: avtr-cta-glow 3.5s ease-in-out infinite;
}

/* ── Slot image entrance (fires when has-image class applied) ── */
.slot-card.has-image .slot-img {
  animation: avtr-card-enter 0.5s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

/* Stagger first 5 cards slightly for polished page load */
.slots-grid .slot-card:nth-child(1).has-image .slot-img { animation-delay: 0.05s; }
.slots-grid .slot-card:nth-child(2).has-image .slot-img { animation-delay: 0.10s; }
.slots-grid .slot-card:nth-child(3).has-image .slot-img { animation-delay: 0.15s; }
.slots-grid .slot-card:nth-child(4).has-image .slot-img { animation-delay: 0.20s; }
.slots-grid .slot-card:nth-child(5).has-image .slot-img { animation-delay: 0.25s; }

/* Preview / results grid card entrance */
.result-card {
  animation: avtr-card-enter 0.4s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}
.results-grid .result-card:nth-child(1) { animation-delay: 0.00s; }
.results-grid .result-card:nth-child(2) { animation-delay: 0.06s; }
.results-grid .result-card:nth-child(3) { animation-delay: 0.12s; }
.results-grid .result-card:nth-child(4) { animation-delay: 0.18s; }

/* ── Footer logo ─────────────────────────────────────── */
.avtr-footer-logo {
  height: 18px;
  width: auto;
  display: block;
  margin: 0 auto 10px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.avtr-footer-logo:hover { opacity: 0.75; }

/* Dark-mode footer logo switch */
@media (prefers-color-scheme: dark) {
  .avtr-footer-logo-light { display: none; }
  .avtr-footer-logo-dark  { display: block; }
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .avtr-footer-logo-light { display: block; }
  .avtr-footer-logo-dark  { display: none; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .avtr-brand-loader,
  .avtr-mini-loader,
  .ai-loader-ring,
  .ai-loader-glow,
  .avtr-settle,
  .avtr-card-enter,
  .btn-primary {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}