/* ═══════════════════════════════════════════════════════════════
   MOTION — Modern animations & micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ─── Cursor glow (desktop) ─── */
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(0, 245, 255, 0.08) 0%, rgba(255, 45, 149, 0.04) 35%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
  mix-blend-mode: screen;
}

body.cursor-ready .cursor-glow { opacity: 1; }
body.premium-app { position: relative; }

/* ─── Page load progress ─── */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 10001;
  background: var(--gradient-primary);
  background-size: 200% 100%;
  animation: progressShimmer 1.2s linear infinite;
  box-shadow: 0 0 12px var(--accent-glow), 0 0 24px rgba(255, 45, 149, 0.3);
  transition: width 0.3s ease, opacity 0.4s ease;
  border-radius: 0 2px 2px 0;
}

.page-progress.is-done {
  width: 100% !important;
  opacity: 0;
}

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Page transition overlay ─── */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.page-transition.is-active {
  opacity: 1;
  pointer-events: all;
}

/* ─── Shimmer text (headings) ─── */
.text-shimmer {
  background: linear-gradient(
    110deg,
    var(--text-primary) 0%,
    var(--text-primary) 40%,
    var(--accent-hover) 50%,
    var(--magenta) 55%,
    var(--text-primary) 65%,
    var(--text-primary) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 6s ease-in-out infinite;
}

@keyframes textShimmer {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}

/* ─── Glow wrap (animated border, no pseudo conflicts) ─── */
.glow-wrap {
  position: relative;
  --asym-y: 0px;
  transform: translateY(var(--asym-y));
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg), var(--accent), var(--magenta), var(--gold), var(--accent));
  animation: borderRotate 4s linear infinite;
}

.glow-wrap > .stat-card {
  transform: none;
}

.glow-wrap > .stat-card,
.glow-wrap > .premium-card {
  margin: 0;
  height: 100%;
  border-radius: var(--radius-lg);
}

.glow-wrap:hover > .stat-card {
  transform: translateY(-6px) rotate(-0.5deg);
}

/* ─── Animated glow border cards (standalone) ─── */
.card-glow-border {
  position: relative;
  isolation: isolate;
}

.card-glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0%,
    var(--accent) 10%,
    var(--magenta) 25%,
    var(--gold) 40%,
    transparent 55%,
    transparent 100%
  );
  z-index: -2;
  animation: borderRotate 4s linear infinite;
  opacity: 0.6;
}

.card-glow-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-lg);
  background: inherit;
  z-index: -1;
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

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

/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .card-glow-border::before { animation: borderSpin 4s linear infinite; }
  @keyframes borderSpin {
    to { transform: rotate(360deg); }
  }
}

/* ─── Stat icon pulse ring ─── */
.stat-card-icon {
  position: relative;
}

.stat-card-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0;
  animation: iconRing 3s ease-out infinite;
}

@keyframes iconRing {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

.stat-card:hover .stat-card-icon::after {
  animation-duration: 1.5s;
}

/* ─── Glass topbar upgrade ─── */
.topbar {
  background: rgba(5, 8, 22, 0.55) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(0, 245, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--magenta), transparent);
  opacity: 0.5;
  animation: topbarLine 4s ease-in-out infinite;
}

@keyframes topbarLine {
  0%, 100% { opacity: 0.3; transform: scaleX(0.6); }
  50% { opacity: 0.7; transform: scaleX(1); }
}

.topbar { position: sticky; }

/* ─── Sidebar nav active glow ─── */
.nav-item.active {
  box-shadow: inset 0 0 20px rgba(0, 245, 255, 0.06), 0 0 20px rgba(0, 245, 255, 0.08);
}

.nav-item.active i {
  filter: drop-shadow(0 0 6px var(--accent));
  animation: navIconPulse 2s ease-in-out infinite;
}

@keyframes navIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.nav-item {
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.5s ease;
}

.nav-item:hover::after {
  left: 120%;
}

/* ─── Button shine sweep ─── */
.btn-premium-primary, .btn-signin, .btn-generate {
  overflow: hidden;
}

.btn-premium-primary::before, .btn-signin::before, .btn-generate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3.5s ease-in-out infinite;
}

@keyframes btnShine {
  0%, 80%, 100% { left: -100%; }
  40% { left: 150%; }
}

/* ─── Quick action modern ─── */
.quick-action-btn {
  position: relative;
  overflow: hidden;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-muted), var(--magenta-muted));
  opacity: 0;
  transition: opacity 0.3s;
}

.quick-action-btn:hover::before { opacity: 1; }

.quick-action-btn > * { position: relative; z-index: 1; }

.quick-action-btn i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  font-size: 16px !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}

.quick-action-btn:hover i {
  transform: rotate(-12deg) scale(1.15);
  background: rgba(0, 245, 255, 0.2);
}

/* ─── Dashboard hero mesh ─── */
.dash-hero-main {
  position: relative;
}

.dash-hero-main::before {
  content: '';
  position: absolute;
  left: -20px;
  top: -20px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 245, 255, 0.12), transparent 70%);
  border-radius: 50%;
  animation: heroMesh 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes heroMesh {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.2); }
}

/* ─── Pills modern ─── */
.dash-hero-pill {
  backdrop-filter: blur(8px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.dash-hero-pill:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
}

/* ─── Premium card hover lift + shine ─── */
.premium-card, .vip-card, .stat-card {
  will-change: transform;
}

.premium-card-header, .vip-header {
  position: relative;
  overflow: hidden;
}

.premium-card-header::after, .vip-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.05), transparent);
  animation: headerShine 5s ease-in-out infinite;
}

@keyframes headerShine {
  0%, 70%, 100% { left: -100%; }
  35% { left: 150%; }
}

/* ─── Code blocks glow ─── */
code {
  transition: box-shadow 0.3s, border-color 0.3s;
}

code:hover {
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.2);
  border-color: var(--accent) !important;
}

/* ─── Badge pulse ─── */
.badge-premium {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-premium:hover {
  transform: scale(1.08);
}

/* ─── Footer links underline ─── */
.footer-links a {
  position: relative;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gradient-primary);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-links a:hover::after { width: 100%; }

/* ─── Auth brand animated lines ─── */
.auth-split-brand::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--accent), var(--magenta), transparent);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: brandLine 3s ease-in-out infinite;
}

@keyframes brandLine {
  0%, 100% { opacity: 0.3; height: 80px; }
  50% { opacity: 1; height: 160px; }
}

/* ─── Floating particles in app-bg ─── */
.app-bg .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: particleFloat var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
  25% { transform: translate(20px, -40px) scale(1.5); opacity: 0.6; }
  50% { transform: translate(-15px, -80px) scale(0.8); opacity: 0.3; }
  75% { transform: translate(30px, -50px) scale(1.2); opacity: 0.5; }
}

/* ─── Scanline overlay (subtle) ─── */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  opacity: 0.4;
}

/* ─── Char reveal for headings (JS adds spans) ─── */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotateX(-40deg);
  animation: charIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  animation-delay: calc(var(--ci, 0) * 0.03s);
}

@keyframes charIn {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ─── Modern page content entrance ─── */
.page-content.page-enter {
  animation: pageEnterModern 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pageEnterModern {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ─── Swal modern ─── */
.swal2-popup.swal-futura {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 245, 255, 0.1) !important;
  animation: swalPop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

@keyframes swalPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ─── Generate nav sparkle ─── */
.nav-item[href*="generate"] i {
  position: relative;
}

.nav-item[href*="generate"]:not(.active) i {
  filter: drop-shadow(0 0 4px rgba(255, 45, 149, 0.5));
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .text-shimmer,
  .card-glow-border::before,
  .btn-premium-primary::before,
  .stat-card-icon::after,
  .topbar::after,
  .particle { animation: none !important; }

  .text-shimmer {
    -webkit-text-fill-color: var(--text-primary);
    background: none;
  }

  .cursor-glow, .scanlines { display: none; }
}

@media (max-width: 1024px) {
  .bento-grid > .glow-wrap.bento-span-4,
  .bento-grid > .bento-cell.bento-span-4 { grid-column: span 6 !important; }
  .cursor-glow { display: none; }
}

@media (max-width: 768px) {
  .bento-grid > .glow-wrap,
  .bento-grid > .bento-cell { grid-column: span 12 !important; }
  .glow-wrap { grid-column: span 12 !important; }
}

@media (pointer: coarse) {
  .cursor-glow { display: none; }
}