/* ================================================================
   DEEP-LP-S — Animations & Transitions
   All keyframes, hover effects, scroll-triggered states,
   and transition timing. Safe to edit independently.
   ================================================================ */

/* ── Keyframe definitions ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bounce {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%      { opacity: 0.8; transform: translateY(6px); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(120px) rotateY(35deg); }
  to   { opacity: 1; transform: translateX(0) rotateY(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0) rotateY(0); }
  to   { opacity: 0; transform: translateX(-120px) rotateY(-35deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.05); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── Scroll-triggered fade-up ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for card groups */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }

/* ── Header transitions ── */
.header {
  transition: background 0.5s, backdrop-filter 0.5s, box-shadow 0.5s;
}

/* ── Header logo anchor (invisible positioning target) ── */

/* ── Burger animation (3 lines → X) ── */
.burger-line {
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger.open .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.open .burger-line:nth-child(2) {
  opacity: 0;
}
.burger.open .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile menu overlay transition ── */
.mobile-menu {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu-link, .mobile-menu-cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open .mobile-menu-link,
.mobile-menu.open .mobile-menu-cta {
  opacity: 1; transform: translateY(0);
}
.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.22s; }
.mobile-menu.open .mobile-menu-cta { transition-delay: 0.28s; }

/* ── Nav link transitions ── */
.header-nav a {
  transition: color 0.3s, background 0.3s;
}

/* ── Header CTA transitions ── */
.header-cta {
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.header-cta:hover  { transform: scale(1.03); }
.header-cta:active { transform: scale(0.97); }

/* ── Hero CTA transitions ── */
.hero-cta {
  transition: transform 0.2s, box-shadow 0.3s;
}
.hero-cta:hover  { transform: scale(1.03); box-shadow: 0 6px 30px rgba(51,34,238,0.35); }
.hero-cta:active { transform: scale(0.97); }

/* ── Hero image 3D slide animation ── */
.hero-images img.active {
  animation: slideInRight 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.hero-images img.exiting {
  animation: slideOutLeft 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* ── Scroll indicator bounce ── */
.scroll-indicator {
  animation: bounce 2s ease-in-out infinite;
}

/* ── Card hover effects ── */
.card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-4px) rotateY(4deg) rotateX(-2deg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.15);
}
.card::before {
  transition: opacity 0.4s;
}
.card:hover::before { opacity: 0.6; }

/* ── Carousel pill transitions ── */
.carousel-pill {
  transition: all 0.25s ease;
}

/* ── Carousel arrow transitions ── */
.carousel-arrow {
  transition: all 0.2s ease;
}
.carousel-arrow:hover  { transform: scale(1.05); }
.carousel-arrow:active { transform: scale(0.95); }

/* ── Service card hover effects ── */
.service-card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
  transform: translateY(-3px) rotateY(3deg) rotateX(-2deg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.15);
}
.service-card::before {
  transition: opacity 0.4s;
}
.service-card:hover::before { opacity: 0.7; }

/* ── Metric hover & scale-in ── */
.metric {
  transition: transform 0.3s, box-shadow 0.3s;
}
.metric:hover { transform: translateY(-3px); box-shadow: 0 12px 48px rgba(0,0,0,0.15); }
.metric.visible .metric-value {
  animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Form input transitions ── */
.form-input {
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.form-input:focus {
  transform: translateY(-2px);
}
.form-input.error {
  border-color: rgba(238,204,34,0.7);
  animation: shake 0.3s;
}

/* ── Form submit transitions ── */
.form-submit {
  transition: transform 0.2s, box-shadow 0.3s;
}
.form-submit:hover  { transform: scale(1.03); box-shadow: 0 8px 40px rgba(255,255,255,0.25); }
.form-submit:active { transform: scale(0.97); }

/* ── CTA floating bubbles ── */
.cta-section::before {
  animation: float 6s ease-in-out infinite;
}
.cta-section::after {
  animation: float 5s ease-in-out infinite 1s;
}

/* ── Powered-by badge hover ── */
.powered-by {
  transition: transform 0.2s;
}
.powered-by:hover { transform: scale(1.05); }