/* css/devkit-bg.css — Animated Background & Reveal System */

/* ═══════════════════════════════════════
   ANIMATED BACKGROUND LAYERS
═══════════════════════════════════════ */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(0,255,178,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,178,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridDrift 30s linear infinite;
}

@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}

.bg-orb1 {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,178,0.06) 0%, transparent 70%);
  top: -200px; left: -200px;
  animation: orbFloat1 20s ease-in-out infinite;
  filter: blur(40px);
}

.bg-orb2 {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,106,255,0.07) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  animation: orbFloat2 25s ease-in-out infinite;
  filter: blur(50px);
}

.bg-orb3 {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.05) 0%, transparent 70%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation: orbFloat3 18s ease-in-out infinite;
  filter: blur(60px);
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(80px, 60px) scale(1.1); }
  66%  { transform: translate(-40px, 100px) scale(0.9); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-100px, -80px) scale(1.15); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -60%) scale(1.2); opacity: 1; }
}

.bg-scan {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}

.bg-noise {
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ═══════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--t-ease), transform 0.6s var(--t-ease);
}

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

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--t-ease), transform 0.5s var(--t-ease);
}

.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }
.reveal-stagger.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 480ms; }
.reveal-stagger.visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 560ms; }

/* ═══════════════════════════════════════
   ENTRY KEYFRAMES
═══════════════════════════════════════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* ═══════════════════════════════════════
   PAGE TRANSITION CURTAIN
═══════════════════════════════════════ */
.page-curtain {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--void) 0%, #0D1A0F 100%);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 999;
  pointer-events: none;
}

.page-curtain.in {
  animation: curtainIn 0.4s var(--t-ease) forwards;
}

.page-curtain.out {
  animation: curtainOut 0.4s var(--t-ease) forwards;
  transform-origin: right;
}

@keyframes curtainIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes curtainOut {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ═══════════════════════════════════════
   BUTTON RIPPLE
═══════════════════════════════════════ */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,255,178,0.25);
  transform: scale(0);
  animation: rippleExpand 0.6s linear;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}