/* ============================================================
   digivici — animations.css
   Keyframes, scroll-reveal, ambient background effects
   ============================================================ */

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays via CSS custom property */
.stagger-1 { transition-delay: 0ms !important; }
.stagger-2 { transition-delay: 80ms !important; }
.stagger-3 { transition-delay: 160ms !important; }
.stagger-4 { transition-delay: 240ms !important; }
.stagger-5 { transition-delay: 320ms !important; }
.stagger-6 { transition-delay: 400ms !important; }

/* ── Page Load Animations ─────────────────────────────────── */
.fade-in {
  animation: fadeIn 0.8s var(--ease-out-expo) both;
}

.fade-in-up {
  animation: fadeInUp 0.8s var(--ease-out-expo) both;
}

.fade-in-scale {
  animation: fadeInScale 0.8s var(--ease-out-expo) both;
}

.load-delay-1 { animation-delay: 100ms; }
.load-delay-2 { animation-delay: 200ms; }
.load-delay-3 { animation-delay: 350ms; }
.load-delay-4 { animation-delay: 500ms; }
.load-delay-5 { animation-delay: 650ms; }
.load-delay-6 { animation-delay: 800ms; }
.load-delay-7 { animation-delay: 950ms; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Background Orbs / Ambient ────────────────────────────── */
.bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}

.orb-1 {
  width: clamp(400px, 50vw, 700px);
  height: clamp(300px, 40vw, 500px);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--page-accent-1) 20%, transparent), transparent 70%);
  top: -20%;
  left: -10%;
  animation: orb-drift-1 35s ease-in-out infinite;
}

.orb-2 {
  width: clamp(350px, 45vw, 600px);
  height: clamp(300px, 35vw, 450px);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--page-accent-2) 15%, transparent), transparent 70%);
  top: 20%;
  right: -15%;
  animation: orb-drift-2 40s ease-in-out infinite;
}

.orb-3 {
  width: clamp(200px, 30vw, 400px);
  height: clamp(200px, 30vw, 400px);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--page-accent-1) 12%, transparent), transparent 70%);
  bottom: -10%;
  left: 30%;
  animation: orb-drift-3 45s ease-in-out infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, 30px) scale(1.05); }
  66%  { transform: translate(-20px, 50px) scale(0.95); }
}

@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-50px, 20px) scale(1.08); }
  66%  { transform: translate(30px, -40px) scale(0.96); }
}

@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.1); }
}

/* ── Grid / Dot Background ────────────────────────────────── */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

.bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent);
}

/* ── Noise Texture Overlay ────────────────────────────────── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
  z-index: 1;
}

/* ── Glow Border Animation ────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--page-accent-1) 0%, transparent),
                inset 0 0 0 0 color-mix(in srgb, var(--page-accent-1) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--page-accent-1) 20%, transparent),
                inset 0 0 20px color-mix(in srgb, var(--page-accent-1) 8%, transparent);
  }
}

.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ── Shimmer (loading skeleton) ───────────────────────────── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 400px 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* ── Underline Hover Link ─────────────────────────────────── */
.hover-link {
  position: relative;
  text-decoration: none;
}

.hover-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--page-accent-1);
  transition: right var(--dur-base) var(--ease-out-expo);
}

.hover-link:hover::after {
  right: 0;
}

/* ── Tilt / 3D Card ───────────────────────────────────────── */
.tilt-card {
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Number Counter (text reveal) ────────────────────────── */
.counter-text {
  font-variant-numeric: tabular-nums;
}

/* ── Typing Cursor ────────────────────────────────────────── */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--page-accent-1);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Parallax Container ───────────────────────────────────── */
.parallax-layer {
  will-change: transform;
}

/* ── Hero Gradient Ring ───────────────────────────────────── */
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.gradient-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  background: linear-gradient(var(--page-bg), var(--page-bg)) padding-box,
              linear-gradient(135deg, var(--page-accent-1), transparent 50%, var(--page-accent-2)) border-box;
  animation: ring-spin 20s linear infinite;
}

/* ── Stat Bar Separator ───────────────────────────────────── */
.stats-sep {
  width: 1px;
  height: 40px;
  background: var(--page-border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .stats-sep { display: none; }
}

/* ── Blog Image Gradients (placeholder) ──────────────────── */
.blog-img-1 { background: linear-gradient(135deg, #0f2a45, #1a0f3a, #00D4FF20); }
.blog-img-2 { background: linear-gradient(135deg, #1a0f2e, #2a1547, #A855F730); }
.blog-img-3 { background: linear-gradient(135deg, #0a2818, #1a3a20, #00F5B420); }
.blog-img-4 { background: linear-gradient(135deg, #2a0a1a, #1a0f20, #FF2D7820); }
.blog-img-5 { background: linear-gradient(135deg, #0a1a2a, #152035, #00AFDF20); }
.blog-img-6 { background: linear-gradient(135deg, #1a150a, #2a2010, #FFB84020); }

/* ── Academy Stars (Hero) ─────────────────────────────────── */
@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: star-twinkle ease-in-out infinite;
}