/* Smooth Page Load Reveal Animation */
@keyframes pageReveal {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-on-load {
  animation: pageReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

/* Background Grid Pattern */
.bg-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Glowing Radial Lights */
.ambient-glow {
  background: radial-gradient(circle 600px at 15% 15%, rgba(31, 182, 255, 0.12), transparent 70%),
              radial-gradient(circle 500px at 85% 25%, rgba(31, 182, 255, 0.08), transparent 70%),
              radial-gradient(circle 700px at 50% 65%, rgba(14, 165, 233, 0.07), transparent 75%),
              radial-gradient(circle 600px at 50% 95%, rgba(102, 105, 106, 0.08), transparent 75%);
}

/* Waving Hand Animation */
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20%, 60% { transform: rotate(14deg); }
  40%, 80% { transform: rotate(-10deg); }
}

.wave-hand {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 2.2s infinite ease-in-out;
}

/* Contour Line Overlay For Hover State */
.contour-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath d='M200,380 C260,370 310,340 350,300 C390,260 400,200 390,140 C380,80 340,40 280,20 C220,0 160,10 100,40 C40,70 10,130 0,200 C-10,270 20,330 80,360 C140,390 140,390 200,380 Z' fill='none' stroke='%2338bdf8' stroke-width='1.2' stroke-opacity='0.35'/%3E%3Cpath d='M220,360 C270,350 310,320 340,280 C370,240 380,190 370,140 C360,90 320,50 270,30 C220,10 170,20 120,40 C70,60 40,110 30,170 C20,230 50,280 100,310 C150,340 170,370 220,360 Z' fill='none' stroke='%2338bdf8' stroke-width='1.2' stroke-opacity='0.35'/%3E%3Cpath d='M240,340 C280,330 310,300 330,260 C350,220 360,180 350,140 C340,100 300,70 260,50 C220,30 180,40 140,60 C100,80 70,120 60,170 C50,220 70,260 110,290 C150,320 200,350 240,340 Z' fill='none' stroke='%2338bdf8' stroke-width='1.2' stroke-opacity='0.35'/%3E%3Cpath d='M260,320 C290,310 320,280 330,240 C340,200 340,170 330,130 C320,90 290,70 250,55 C210,40 180,50 150,70 C120,90 90,120 85,165 C80,210 100,245 130,270 C160,295 230,330 260,320 Z' fill='none' stroke='%230ea5e9' stroke-width='1' stroke-opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom -30px right -30px;
  background-size: 320px 320px;
}

/* SEO Pipeline Flow Styles */
.seo-flow-section {
  width: 100%;
  padding-top: 1.5rem;
  box-sizing: border-box;
}

.flow-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.flow-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  position: relative;
  z-index: 2;
}

.step-orb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.step-num {
  font-size: 14px;
  font-weight: 800;
  color: #94a3b8;
  transition: color 0.3s ease;
}

.step-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  opacity: 0;
  animation: orbPulse 3.5s infinite ease-out;
  animation-delay: var(--delay);
}

@keyframes orbPulse {
  0% { transform: scale(0.9); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.step-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  margin: 10px 0 2px 0;
  transition: color 0.3s ease;
}

.step-tag {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.step-item:hover .step-orb {
  border-color: #38bdf8;
  background: #1e293b;
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.step-item:hover .step-num,
.step-item:hover .step-name {
  color: #38bdf8;
}

.step-item.is-final .step-orb {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.15);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.step-item.is-final .step-num {
  color: #38bdf8;
}

.flow-connector {
  flex: 1;
  height: 2px;
  background: #334155;
  position: relative;
  margin: 0 8px;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 9999px;
}

.flow-dot {
  position: absolute;
  top: 0;
  left: -20%;
  width: 32px;
  height: 100%;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  animation: flowLine 3.5s infinite linear;
  animation-delay: var(--delay);
  box-shadow: 0 0 8px #38bdf8;
}

@keyframes flowLine {
  0% { left: -30%; }
  100% { left: 100%; }
}

@media (max-width: 640px) {
  .flow-steps {
    flex-direction: column;
    gap: 16px;
  }
  .flow-connector {
    width: 2px;
    height: 24px;
    margin: 0;
  }
  .flow-dot {
    width: 100%;
    height: 16px;
    top: -30%;
    left: 0;
    background: linear-gradient(180deg, transparent, #38bdf8, transparent);
    animation-name: flowLineVertical;
  }
  @keyframes flowLineVertical {
    0% { top: -30%; }
    100% { top: 100%; }
  }
}