/* Soft iOS-like motion; it plays even when the OS asks to reduce motion (product decision). */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.hero .container > :first-child > * {
  animation: rise 0.8s var(--ease-ios) both;
}

.hero .container > :first-child > :nth-child(2) {
  animation-delay: 0.06s;
}

.hero .container > :first-child > :nth-child(3) {
  animation-delay: 0.12s;
}

.hero .container > :first-child > :nth-child(4) {
  animation-delay: 0.18s;
}

.hero .container > :first-child > :nth-child(5) {
  animation-delay: 0.24s;
}

.phone {
  animation:
    rise 0.9s var(--ease-ios) 0.2s both,
    float 7s ease-in-out 1.1s infinite;
}

.phone-showcase::before {
  animation: glow 4.5s ease-in-out infinite;
}

.phone-pulse {
  animation: pulse-ring 4.5s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.phone-pulse:nth-child(2) {
  animation-delay: 1.5s;
}

.phone-pulse:nth-child(3) {
  animation-delay: 3s;
}

/* Set by js/reveal.js, so content stays visible when scripts do not run. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-ios),
    transform 0.8s var(--ease-ios);
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}