/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Geometric shapes ── */
.geo-shape {
  position: absolute;
  opacity: 0.12;
  pointer-events: none;
}

.shape-circle-1 {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, #e8683a 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation: floatSlow 8s ease-in-out infinite;
}

.shape-circle-2 {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, #e0ad3c 0%, transparent 70%);
  bottom: 10%;
  left: 5%;
  animation: floatSlow 10s ease-in-out infinite reverse;
}

.shape-circle-3 {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, #df4a1e 0%, transparent 70%);
  top: -200px;
  right: -200px;
  animation: floatSlow 12s ease-in-out infinite;
}

.shape-triangle {
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 208px solid #e8683a;
  top: 15%;
  left: 8%;
  transform: rotate(-15deg);
  opacity: 0.08;
  animation: spinSlow 20s linear infinite;
}

.shape-triangle-2 {
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 139px solid #e0ad3c;
  bottom: 10%;
  right: 10%;
  transform: rotate(25deg);
  opacity: 0.06;
  animation: spinSlow 15s linear infinite reverse;
}

.shape-dots {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, #f4b896 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  top: 40%;
  right: 5%;
  opacity: 0.15;
  animation: floatSlow 6s ease-in-out infinite;
}

.shape-bar {
  width: 300px;
  height: 6px;
  background: linear-gradient(90deg, #df4a1e, #e0ad3c);
  border-radius: 3px;
  bottom: 20%;
  left: -50px;
  transform: rotate(-30deg);
  opacity: 0.1;
}

/* ── Animations ── */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ── Navbar scroll state ── */
#navbar.scrolled {
  background: rgba(15, 15, 26, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ── Mobile menu ── */
#mobileMenu.open {
  opacity: 1;
  pointer-events: all;
}

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

.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }

.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive tweaks ── */
@media (max-width: 768px) {
  .shape-circle-1 { width: 250px; height: 250px; }
  .shape-circle-2 { width: 150px; height: 150px; }
  .shape-triangle { border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 104px solid #e8683a; }
}