/* static/css/patterns.css */

/* =========================================
   1. THE DOT MATRIX (Top Layer)
   ========================================= */
/* 1. THE DOT MATRIX (Subtler Version) */
.bg-dot-pattern {
  /* Made dots smaller (1px) and spread them out more (40px) */
  background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
  background-size: 40px 40px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Added opacity to make them fade into the background */
  opacity: 0.3;
}

/* Dark mode dots - extremely faint */
.dark .bg-dot-pattern {
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px
  );
  opacity: 0.2; /* Very subtle */
}

/* =========================================
   2. THE FLOATING ORBS (The Playful Part)
   ========================================= */
/* =========================================
   2. THE AMBIENT SPOTLIGHT (The "Classy" Look)
   ========================================= */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* Behind dots, behind content */

  /* 
       This creates a single large glow at the top center.
       It blends Blue (#3b82f6) into the dark background.
    */
  background: radial-gradient(
    circle at 50% 0%,
    rgba(59, 130, 246, 0.15) 0%,
    /* Center Blue, low opacity */ rgba(59, 130, 246, 0.05) 30%,
    /* Fading out */ transparent 60%
  );
}

.dark .ambient-glow {
  /* In dark mode, we make it slightly stronger but still subtle */
  background: radial-gradient(
    circle at 50% -10%,
    rgba(59, 130, 246, 0.25) 0%,
    rgba(139, 92, 246, 0.15) 25%,
    /* Slight Purple tint */ transparent 60%
  );
}
/* Orb 1: Primary Blue (Top Left) */
.orb-1 {
  width: 400px;
  height: 400px;
  background: #3b82f6; /* Blue-500 */
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

/* Orb 2: Purple/Pink (Bottom Right) */
.orb-2 {
  width: 300px;
  height: 300px;
  background: #8b5cf6; /* Violet-500 */
  bottom: -50px;
  right: -50px;
  animation-delay: -5s;
}

/* Orb 3: Cyan (Centerish - hidden on mobile) */
.orb-3 {
  width: 200px;
  height: 200px;
  background: #06b6d4; /* Cyan-500 */
  top: 40%;
  right: 30%;
  animation-delay: -10s;
  opacity: 0.4;
}

/* Dark mode adjustments: make orbs dimmer so text is readable */
.dark .orb {
  opacity: 0.3;
}

/* =========================================
   3. ANIMATIONS
   ========================================= */
@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* =========================================
   4. NOISE (Kept from before for Bento Boxes)
   ========================================= */
.bg-noise {
  position: relative;
  overflow: hidden;
}
.bg-noise::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.bg-noise > * {
  position: relative;
  z-index: 1;
}

html {
  scroll-behavior: smooth;
}

/* Optional: Add some padding when jumping to an anchor 
   so the box isn't touching the very top of the screen */
#contact {
  scroll-margin-top: 2rem;
}

@keyframes bento-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bento-animate {
  animation: bento-fade-in 0.8s ease-out forwards;
  opacity: 0; /* Ensures they are hidden before the animation starts */
}