/* ===================================================================
   SNOWDALE IT SOLUTIONS — ANIMATIONS STYLESHEET
   Scroll reveals, hover transitions, ambient motion, keyframes
   =================================================================== */

/* ---------- SCROLL REVEAL (used by js/main.js IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-default), transform 0.8s var(--ease-default);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  animation: revealUp 0.9s var(--ease-default) forwards;
}
.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }
.reveal-delay-4 { animation-delay: 0.4s; }

@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger children inside grids that get revealed together */
.about-grid .reveal-delay-1,
.scenario-grid .reveal-delay-1,
.process-flow .reveal-delay-1,
.why-grid .reveal-delay-1 { transition-delay: 0.08s; }
.about-grid .reveal-delay-2,
.scenario-grid .reveal-delay-2,
.process-flow .reveal-delay-2,
.why-grid .reveal-delay-2 { transition-delay: 0.16s; }
.process-flow .reveal-delay-3 { transition-delay: 0.24s; }
.process-flow .reveal-delay-4 { transition-delay: 0.32s; }

/* ---------- AMBIENT HERO MOTION ---------- */
.hero-gradient-orb {
  animation: floatOrb 14s ease-in-out infinite;
}
.orb-2 { animation-duration: 18s; animation-direction: reverse; }

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -24px) scale(1.05); }
  66% { transform: translate(-20px, 18px) scale(0.97); }
}

.eyebrow-dot { animation: pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.scroll-indicator .scroll-line { animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- HOVER MICRO-INTERACTIONS ---------- */
.about-card,
.scenario-card,
.service-block,
.tech-category {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.about-card:hover,
.scenario-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 0 rgba(11,18,32,0.04), 0 36px 60px -28px rgba(11,18,32,0.22);
}

.capability-pill {
  transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.capability-pill:hover {
  border-color: var(--color-secondary);
  background: rgba(0,212,255,0.06);
  transform: translateY(-2px);
}

.tech-badges span { cursor: default; }

.process-step-number {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.process-step:hover .process-step-number {
  transform: scale(1.08);
  box-shadow: var(--shadow-glow);
}

/* ---------- LOGO MARK SUBTLE ANIMATION ---------- */
.logo-mark {
  background-size: 200% 200%;
  transition: background-position var(--transition-slow);
}
.logo:hover .logo-mark { background-position: 100% 100%; }

/* ---------- PAGE LOAD TRANSITION ---------- */
body { animation: pageFadeIn 0.5s ease both; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- FORM STATUS FEEDBACK ---------- */
.form-status {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease-default), transform 0.3s var(--ease-default);
}
.form-status.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- MOBILE MENU ICON MORPH ---------- */
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }