/* ══════════════════════════════════════════════════════════
   SUPER THEME — PREMIUM EFFECTS
   Loaded after theme.css — enhances without breaking anything
══════════════════════════════════════════════════════════ */

/* ─── Aurora Orb Keyframes ──────────────────────────────── */
@keyframes aurora1 {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(4%,9%) scale(1.15); }
  50%  { transform: translate(-3%,5%) scale(0.9); }
  75%  { transform: translate(7%,-4%) scale(1.1); }
}
@keyframes aurora2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-7%,-4%) scale(1.2); }
  66% { transform: translate(5%,7%) scale(0.85); }
}
@keyframes aurora3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40% { transform: translate(5%,-7%) scale(1.1); }
  80% { transform: translate(-4%,3%) scale(0.95); }
}
@keyframes aurora4 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-5%,-5%) scale(1.2); }
}
@keyframes aurora5 {
  0%,100% { transform: translate(0,0) scale(1); }
  30% { transform: translate(8%,3%) scale(1.1); }
  70% { transform: translate(-3%,-7%) scale(0.9); }
}

/* ─── Aurora Orb Base ───────────────────────────────────── */
.aorb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}
.aorb-1 {
  width: clamp(400px, 65vw, 900px);
  height: clamp(400px, 65vw, 900px);
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  top: -25%; left: -15%;
  opacity: 0.22;
  animation: aurora1 16s ease-in-out infinite;
}
.aorb-2 {
  width: clamp(350px, 55vw, 750px);
  height: clamp(350px, 55vw, 750px);
  background: radial-gradient(circle, var(--secondary) 0%, transparent 65%);
  top: 5%; right: -15%;
  opacity: 0.2;
  animation: aurora2 20s ease-in-out infinite;
}
.aorb-3 {
  width: clamp(300px, 45vw, 650px);
  height: clamp(300px, 45vw, 650px);
  background: radial-gradient(circle, #10b981 0%, transparent 65%);
  bottom: -10%; left: 10%;
  opacity: 0.16;
  animation: aurora3 24s ease-in-out infinite;
}
.aorb-4 {
  width: clamp(250px, 35vw, 500px);
  height: clamp(250px, 35vw, 500px);
  background: radial-gradient(circle, #ec4899 0%, transparent 65%);
  top: 35%; left: 38%;
  opacity: 0.1;
  animation: aurora4 18s ease-in-out infinite;
}
.aorb-5 {
  width: clamp(200px, 28vw, 400px);
  height: clamp(200px, 28vw, 400px);
  background: radial-gradient(circle, #f59e0b 0%, transparent 65%);
  bottom: 15%; right: 5%;
  opacity: 0.09;
  animation: aurora5 22s ease-in-out infinite;
}
.dark .aorb-1 { opacity: 0.16; }
.dark .aorb-2 { opacity: 0.14; }
.dark .aorb-3 { opacity: 0.11; }
.dark .aorb-4 { opacity: 0.07; }
.dark .aorb-5 { opacity: 0.06; }

/* ─── Particle Canvas ───────────────────────────────────── */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}
.dark #hero-particles { opacity: 0.35; }

/* ─── Glass Card: Accent Glow on Hover ──────────────────── */
.glass-card,
.testimonial-card {
  transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}
.glass-card:hover,
.testimonial-card:hover {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.35),
    0 0 28px rgba(var(--accent-rgb), 0.14),
    0 22px 44px rgba(0, 0, 0, 0.28) !important;
}

/* Top accent shimmer line on card hover */
.glass-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--secondary) 65%, transparent 100%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 2;
}
.glass-card:hover::after,
.testimonial-card:hover::after {
  opacity: 1;
}

/* ─── Button Shimmer ────────────────────────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(300%) skewX(-20deg); }
}
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent);
  transform: translateX(-150%) skewX(-20deg);
  animation: shimmer 4s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}

/* ─── Wave Section Divider ──────────────────────────────── */
.wave-bottom {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
  line-height: 0;
}
.wave-bottom svg {
  display: block;
  width: 100%;
  height: 55px;
}
@media (min-width: 768px) {
  .wave-bottom svg { height: 80px; }
}

/* ─── Stat Counter Glow ─────────────────────────────────── */
@keyframes statglow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.3)); }
  50%     { filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.7)); }
}
[data-counter] {
  display: inline-block;
  animation: statglow 3s ease-in-out infinite;
}

/* ─── Gradient Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--accent), var(--secondary));
  border-radius: 3px;
}

/* ─── Animated Reading Progress Bar ────────────────────── */
@keyframes gradmove {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
#reading-progress {
  background: linear-gradient(90deg, var(--accent), var(--secondary), #10b981, var(--accent)) !important;
  background-size: 300% 100% !important;
  animation: gradmove 3s linear infinite;
}

/* ─── Hero Badge Ambient Glow ───────────────────────────── */
.hero-badge {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.18),
    0 0 24px rgba(var(--accent-rgb), 0.1);
}

/* ─── TOC Active Link ───────────────────────────────────── */
#toc-nav a.toc-active {
  color: var(--accent) !important;
  font-weight: 600;
}

/* ─── Prose Blockquote (premium) ────────────────────────── */
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-style: normal;
  position: relative;
}
.prose blockquote p {
  font-style: normal;
}
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after {
  content: none;
}

/* ─── Callout Variants ───────────────────────────────────── */
/* Usage in HTML editor: wrap in <blockquote class="callout-info"> etc. */
.prose .callout-info,
.prose blockquote.callout-info {
  border-left-color: #06b6d4;
  background: rgba(6, 182, 212, 0.07);
}
.prose .callout-warning,
.prose blockquote.callout-warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.07);
}
.prose .callout-tip,
.prose blockquote.callout-tip {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.07);
}
.prose .callout-danger,
.prose blockquote.callout-danger {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.07);
}

/* ─── Respect prefers-reduced-motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aorb,
  [data-counter],
  #reading-progress,
  .btn-primary::after {
    animation: none !important;
  }
  #hero-particles { display: none; }
}