/* ─── Keyframes ───────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%       { box-shadow: 0 4px 28px 0 rgba(255,255,255,0.06); }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(8px, -10px) scale(1.01); }
  66%       { transform: translate(-6px, 6px) scale(0.99); }
}

/* ─── Hero Items ──────────────────────────────────────────── */
.hero-item {
  opacity: 0;
  animation: fadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-d0 { animation-delay: 0.08s; }
.hero-d1 { animation-delay: 0.20s; }
.hero-d2 { animation-delay: 0.35s; }
.hero-d3 { animation-delay: 0.50s; }
.hero-d4 { animation-delay: 0.62s; }
.hero-d5 { animation-delay: 0.78s; }

/* ─── Utility: shimmer / pulse ───────────────────────────── */
.hero-shimmer {
  background-size: 200% auto;
  animation: shimmer 3.5s linear infinite;
  animation-delay: 1s;
}
.cta-pulse {
  animation: pulseGlow 2.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* ─── Aurora Blobs (legacy, kept for other pages) ─────────── */
.aurora-blob-1 { animation: float 20s ease-in-out infinite; }
.aurora-blob-2 { animation: float 18s ease-in-out infinite; animation-delay: -5s; }
.aurora-blob-3 { animation: float 22s ease-in-out infinite; animation-delay: -3s; }

/* ─── Scroll Animations ──────────────────────────────────── */
.scroll-animate {
  opacity: 0;
  transform: translateY(16px);
  /* Note: transition-delay is set via JS data-delay attr for stagger */
  transition: opacity  0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-divider {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.5s ease,
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-animate-divider.visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ─── Bento Grid (legacy, other pages) ──────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.bento-c4  { grid-column: span 4; }
.bento-c5  { grid-column: span 5; }
.bento-c7  { grid-column: span 7; }
.bento-c12 { grid-column: span 12; }
.bento-row-break { grid-column: 1 / -1; }

@media (max-width: 1023px) {
  .bento-c4, .bento-c5, .bento-c7, .bento-c12 { grid-column: span 6; }
}
@media (max-width: 639px) {
  .bento-c4, .bento-c5, .bento-c7, .bento-c12 { grid-column: span 12; }
}

.bento-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover { transform: translateY(-2px); }
.bento-card > * { position: relative; z-index: 1; }

.bento-card-featured {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.5rem;
}
.bento-featured-text { flex: 1; }
@media (max-width: 639px) {
  .bento-card-featured { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ─── Button Glow ────────────────────────────────────────── */
.btn-glow {
  transition: transform 180ms ease, box-shadow 200ms ease, background-color 150ms ease;
}
.btn-glow:hover {
  transform: translateY(-1px) scale(1.012);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.10);
}
.btn-glow:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
.btn-glow:focus-visible {
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 3px;
}

/* nav scroll / active states */
.nav-scrolled {
  background-color: rgba(3, 3, 3, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.nav-link.nav-active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}

/* ─── Background Patterns ────────────────────────────────── */
.bg-noise {
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
}
.bg-dot-matrix {
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mask-radial-faded {
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}