/* ═══════════════════════════════════════════════════════════════
   AeroSphere — animations.css
   All keyframes, scroll-reveal, page transitions, micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ─── PAGE TRANSITIONS ──────────────────────────────────────── */
.page-enter {
  animation: pageEnter 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── FADE ANIMATIONS ───────────────────────────────────────── */
.fade-in  { animation: fadeIn  .4s ease both; }
.fade-up  { animation: fadeUp  .5s cubic-bezier(0.16,1,0.3,1) both; }
.fade-down{ animation: fadeDown .5s cubic-bezier(0.16,1,0.3,1) both; }
.fade-left{ animation: fadeLeft .5s cubic-bezier(0.16,1,0.3,1) both; }
.fade-right{animation: fadeRight .5s cubic-bezier(0.16,1,0.3,1) both; }

@keyframes fadeIn    { from{opacity:0}                              to{opacity:1} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(22px)}   to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown  { from{opacity:0;transform:translateY(-22px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeLeft  { from{opacity:0;transform:translateX(22px)}   to{opacity:1;transform:translateX(0)} }
@keyframes fadeRight { from{opacity:0;transform:translateX(-22px)}  to{opacity:1;transform:translateX(0)} }

/* ─── ZOOM ANIMATIONS ───────────────────────────────────────── */
.zoom-in  { animation: zoomIn  .4s cubic-bezier(0.16,1,0.3,1) both; }
.zoom-out { animation: zoomOut .4s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes zoomIn  { from{opacity:0;transform:scale(.9)}   to{opacity:1;transform:scale(1)} }
@keyframes zoomOut { from{opacity:0;transform:scale(1.1)}  to{opacity:1;transform:scale(1)} }

/* ─── STAGGER DELAYS ────────────────────────────────────────── */
.d0  { animation-delay: .00s; opacity:0; }
.d1  { animation-delay: .07s; opacity:0; }
.d2  { animation-delay: .14s; opacity:0; }
.d3  { animation-delay: .21s; opacity:0; }
.d4  { animation-delay: .28s; opacity:0; }
.d5  { animation-delay: .35s; opacity:0; }
.d6  { animation-delay: .42s; opacity:0; }
.d7  { animation-delay: .49s; opacity:0; }
.d8  { animation-delay: .56s; opacity:0; }

/* ─── SCROLL REVEAL (via JS IntersectionObserver) ───────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* ─── COUNT-UP NUMBERS ──────────────────────────────────────── */
.count-up { display: inline-block; }

/* ─── HOVER LIFT ────────────────────────────────────────────── */
.hover-lift {
  transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(14,165,233,.18);
}

/* ─── GLOW PULSE ────────────────────────────────────────────── */
.glow-pulse {
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(14,165,233,.4); }
  50%      { box-shadow: 0 0 0 10px rgba(14,165,233,0); }
}

/* ─── SHIMMER TEXT ──────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 3s linear infinite;
}
@keyframes shimmerText { to { background-position: 200% center; } }

/* ─── GRADIENT BORDER ───────────────────────────────────────── */
.grad-border {
  position: relative;
  border-radius: var(--radius-lg);
}
.grad-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #0EA5E9, #10B981, #0EA5E9);
  z-index: -1;
  background-size: 200% 200%;
  animation: gradientMove 4s ease infinite;
}
@keyframes gradientMove {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ─── FLOAT ─────────────────────────────────────────────────── */
.float-anim {
  animation: floatAnim 4s ease-in-out infinite;
}
@keyframes floatAnim {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ─── PLANE FLY-IN ──────────────────────────────────────────── */
.plane-fly {
  animation: planeFly 1.2s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes planeFly {
  from { opacity:0; transform: translateX(-60px) rotate(-5deg) scale(0.85); }
  to   { opacity:1; transform: translateX(0) rotate(0) scale(1); }
}

/* ─── SPIN ──────────────────────────────────────────────────── */
.spin { animation: spinLoop .8s linear infinite; }
@keyframes spinLoop { to { transform: rotate(360deg); } }

/* ─── PING (notification) ───────────────────────────────────── */
.ping {
  position: relative;
}
.ping::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  animation: pingAnim 1.5s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingAnim {
  75%,100% { transform: scale(2.2); opacity:0; }
}

/* ─── TYPEWRITER ────────────────────────────────────────────── */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  animation: typing 2.5s steps(40,end) both, blinkCursor .75s step-end infinite;
}
@keyframes typing   { from{width:0} to{width:100%} }
@keyframes blinkCursor { 50%{ border-color:transparent } }

/* ─── PROGRESS BAR ──────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--border-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--radius-full);
  transition: width 1s cubic-bezier(0.16,1,0.3,1);
}

/* ─── NAV ACTIVE INDICATOR ──────────────────────────────────── */
.nav-indicator {
  height: 3px;
  background: var(--grad-brand);
  border-radius: var(--radius-full);
  transition: width .3s var(--ease), transform .3s var(--ease);
  position: absolute;
  bottom: 0;
}

/* ─── SLIDE-IN PANEL ────────────────────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── BOUNCE ────────────────────────────────────────────────── */
@keyframes bounce {
  0%,100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,.6,1); }
  50%      { transform: translateY(-12px); animation-timing-function: cubic-bezier(0.8,0,1,1); }
}
.bounce { animation: bounce 1s infinite; }

/* ─── INPUT FOCUS LINE ──────────────────────────────────────── */
.form-input-line {
  position: relative;
}
.form-input-line::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--grad-brand);
  transition: left .25s var(--ease), right .25s var(--ease);
}
.form-input-line:focus-within::after { left: 0; right: 0; }

/* ─── TABLE ROW SLIDE IN ────────────────────────────────────── */
@keyframes rowFadeIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
.sc-table tbody tr {
  animation: rowFadeIn .35s var(--ease) both;
}
.sc-table tbody tr:nth-child(1)  { animation-delay: .03s; }
.sc-table tbody tr:nth-child(2)  { animation-delay: .06s; }
.sc-table tbody tr:nth-child(3)  { animation-delay: .09s; }
.sc-table tbody tr:nth-child(4)  { animation-delay: .12s; }
.sc-table tbody tr:nth-child(5)  { animation-delay: .15s; }
.sc-table tbody tr:nth-child(6)  { animation-delay: .18s; }
.sc-table tbody tr:nth-child(7)  { animation-delay: .21s; }
.sc-table tbody tr:nth-child(8)  { animation-delay: .24s; }
.sc-table tbody tr:nth-child(9)  { animation-delay: .27s; }
.sc-table tbody tr:nth-child(10) { animation-delay: .30s; }

/* ─── CARD HOVER GLOW ───────────────────────────────────────── */
.card-glow:hover {
  box-shadow: 0 0 0 1px var(--primary-glow-lg),
              0 20px 48px rgba(14,165,233,.15);
}

/* ─── SUCCESS CHECK ─────────────────────────────────────────── */
@keyframes checkDraw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
.check-draw {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkDraw .4s .2s ease forwards;
}