/* ═══════════════════════════════════════════════════════════════════════
   MICROBIX MODERN EDITORIAL MOTION & DESIGN SYSTEM
   Inspired by Anthropic.com & OpenAI.com
   Spacious whitespace · Editorial restraint · Zero data boxes · Pure typography
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global Canvas & Grid Removal (Anthropic/OpenAI purity) ────────── */
.bg-grid {
  background-image: none !important;
}

#heroCanvas {
  display: none !important;
}

.hero-glow-orb {
  display: none !important;
}

/* ── Elimination of "Data Boxes" / Card Containers ─────────────────── */
.editorial-card,
.arch-card,
.glass-panel,
.card-hover {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative !important;
}

.editorial-card::before,
.editorial-card::after,
.arch-card::before,
.arch-card::after,
.glass-panel::before,
.glass-panel::after {
  display: none !important;
}

.editorial-card:hover,
.arch-card:hover,
.glass-panel:hover,
.card-hover:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Scroll Progress Bar ───────────────────────────────────────────── */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0.4));
  z-index: 9999;
  transition: width 0.05s linear;
}

/* ── Glass Nav (Anthropic Minimalist Blur) ─────────────────────────── */
.glass-nav {
  background: rgba(8, 9, 10, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-100%);
  animation: navSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes navSlideIn {
  to { transform: translateY(0); }
}

/* ── Word-by-Word Animation (Anthropic Style) ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .hero-title,
  html.js-anim .hero-sub,
  html.js-anim .hero-cta,
  html.js-anim .hero-eyebrow { opacity: 0; }
}

.animate-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(3px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
  transform-origin: center bottom;
}

.animate-word.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.word-processed { opacity: 1 !important; }

/* ── Scroll Reveal System ──────────────────────────────────────────── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }

/* ── Section Divider Lines (Quiet Hairlines) ───────────────────────── */
.section-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-line.is-revealed {
  transform: scaleX(1);
}

/* ── Stagger Grid Children ─────────────────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.is-revealed > *:nth-child(1) { transition-delay: 0.04s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(3) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(4) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(5) { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(6) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(7) { transition-delay: 0.28s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(8) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.stagger-children.is-revealed > *:nth-child(n+9) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }

/* ── Shimmer Text (Subtle & Quiet) ─────────────────────────────────── */
.text-shimmer {
  color: #FFFFFF !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}

/* ── Parallax Sections ─────────────────────────────────────────────── */
.parallax-section {
  transform: none !important;
}

/* ── Counter Values ────────────────────────────────────────────────── */
.counter-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Dropdown (Clean, Crisp, Elevated) ──────────────────────────────── */
.nav-dropdown {
  background: #0E1114 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8) !important;
  transform: translateY(8px) scale(0.98) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.group:hover .nav-dropdown {
  transform: translateY(0) scale(1) !important;
}

/* ── Buttons (Anthropic / OpenAI Modern Pill Architecture) ─────────── */
.btn-primary, .btn-mint {
  background: #FFFFFF !important;
  color: #08090A !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.btn-primary:hover, .btn-mint:hover {
  background: #E5E7EB !important;
  color: #08090A !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-subtle, .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #D1D5DB !important;
  font-weight: 450 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
}

.btn-subtle:hover, .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  transform: none !important;
}

/* ── Footer ────────────────────────────────────────────────────────── */
#siteFooter {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#siteFooter a {
  transition: color 0.15s ease !important;
  transform: none !important;
}

#siteFooter a:hover {
  color: #FFFFFF !important;
  transform: none !important;
}

#siteFooter h4 {
  opacity: 0.6;
}

#siteFooter:hover h4 {
  opacity: 0.8;
}

/* ── Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-word, .reveal-on-scroll, .reveal-slide-left, .reveal-slide-right, .reveal-scale, .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
  .glass-nav { animation: none !important; transform: none !important; }
  .section-line { transform: scaleX(1) !important; }
}