/* Animações estilo React / Framer Motion (vanilla) */

@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(24px, -18px); }
}

@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 14px); }
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

.app-bg__orb--1 { animation: orb-float-1 14s ease-in-out infinite; }
.app-bg__orb--2 { animation: orb-float-2 11s ease-in-out infinite; }

@keyframes header-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-header__bar {
  animation: header-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-panel-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-panel-wrap .device-scene {
  animation: hero-panel-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > .stagger-item {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger.is-visible > .stagger-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.stagger.is-visible > .stagger-item:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > .stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger.is-visible > .stagger-item:nth-child(3) { transition-delay: 0.15s; }
.stagger.is-visible > .stagger-item:nth-child(4) { transition-delay: 0.2s; }
.stagger.is-visible > .stagger-item:nth-child(5) { transition-delay: 0.25s; }
.stagger.is-visible > .stagger-item:nth-child(6) { transition-delay: 0.3s; }

.motion-card {
  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s ease, border-color 0.2s ease;
}

.motion-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-blue);
}

.stat-card.motion-card:hover,
.channel-card.motion-card:hover {
  transform: translateY(-4px);
}

.solution-card.motion-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 8px rgba(15, 23, 42, 0.04),
    0 20px 44px rgba(15, 40, 120, 0.1);
}

.device-laptop__screen,
.device-phone__screen {
  transition: transform 0.35s var(--ease-spring);
}

.device-scene:hover .device-laptop__screen img {
  transform: scale(1.015);
}

.device-scene:hover .device-phone__screen img {
  transform: scale(1.02);
}

.feature-chip {
  transition: transform 0.25s var(--ease-spring);
}

.feature-chip:hover {
  transform: translateX(4px);
}

.media-frame img,
.phone-duo__item {
  transition: transform 0.35s var(--ease-spring);
}

.phone-duo__item:first-child:hover {
  transform: translateY(-6px);
}

.phone-duo__item:last-child:hover {
  transform: translateY(6px);
}

.media-frame:hover img {
  transform: scale(1.02);
}

.hero-panel-wrap {
  will-change: transform;
  transition: transform 0.1s linear;
}

.mobile-drawer {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

.mobile-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-drawer__links li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mobile-drawer.is-open .mobile-drawer__links li {
  opacity: 1;
  transform: translateX(0);
}

.mobile-drawer.is-open .mobile-drawer__links li:nth-child(1) { transition-delay: 0.05s; }
.mobile-drawer.is-open .mobile-drawer__links li:nth-child(2) { transition-delay: 0.1s; }
.mobile-drawer.is-open .mobile-drawer__links li:nth-child(3) { transition-delay: 0.15s; }
.mobile-drawer.is-open .mobile-drawer__links li:nth-child(4) { transition-delay: 0.2s; }
.mobile-drawer.is-open .mobile-drawer__links li:nth-child(5) { transition-delay: 0.25s; }
.mobile-drawer.is-open .mobile-drawer__links li:nth-child(6) { transition-delay: 0.3s; }

.cta-app {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-app.is-visible {
  transform: scale(1);
}

.cta-app:not(.is-visible) {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > .stagger-item,
  .app-bg__orb,
  .app-header__bar,
  .hero-panel-wrap .device-scene {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}