/* ==========================================================================
   INALLAPP ANIMATIONS — REFINED & LIGHTWEIGHT
   ========================================================================== */

/* Fade Up Scroll Reveal */
.animate-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }

/* Subtle Floating Animations for Hero Tags */
@keyframes floatSubtle {
  0% { transform: translateY(0px) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
  100% { transform: translateY(0px) rotate(var(--rot, 0deg)); }
}

.hero-tag-student  { --rot: -6deg; animation: floatSubtle 5.2s ease-in-out infinite; }
.hero-tag-business { --rot: 5deg;  animation: floatSubtle 6.0s ease-in-out infinite 0.6s; }
.hero-tag-gaming   { --rot: -8deg; animation: floatSubtle 5.6s ease-in-out infinite 1.2s; }
.hero-tag-personal { --rot: 4deg;  animation: floatSubtle 6.4s ease-in-out infinite 0.3s; }
.hero-tag-finance  { --rot: -3deg; animation: floatSubtle 5.8s ease-in-out infinite 0.9s; }
.hero-tag-tools    { --rot: 6deg;  animation: floatSubtle 4.8s ease-in-out infinite 1.5s; }

/* Phone Frame Hover Parallax */
.hero-phone-frame {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-wrap:hover .hero-phone-frame {
  transform: translateY(-6px) scale(1.01);
}

/* Tab Content Switch Animation */
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.explorer-display.tab-changing {
  animation: tabFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .hero-tag-student, .hero-tag-business, .hero-tag-gaming, .hero-tag-personal, .hero-tag-finance, .hero-tag-tools {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}