/* ═══════════════════════════════════════════════════════════
   OMZIG LANDING — ANIMATIONS
   Scroll reveals, transitions, floating effects
   ═══════════════════════════════════════════════════════════ */

/* ── Reveal System ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.problem__card.reveal:nth-child(1) { transition-delay: 0s; }
.problem__card.reveal:nth-child(2) { transition-delay: 0.12s; }
.problem__card.reveal:nth-child(3) { transition-delay: 0.24s; }
.problem__card.reveal:nth-child(4) { transition-delay: 0.36s; }

.features__card.reveal:nth-child(1) { transition-delay: 0s; }
.features__card.reveal:nth-child(2) { transition-delay: 0.08s; }
.features__card.reveal:nth-child(3) { transition-delay: 0.16s; }
.features__card.reveal:nth-child(4) { transition-delay: 0.24s; }
.features__card.reveal:nth-child(5) { transition-delay: 0.32s; }
.features__card.reveal:nth-child(6) { transition-delay: 0.4s; }

.trust__point.reveal:nth-child(1) { transition-delay: 0s; }
.trust__point.reveal:nth-child(2) { transition-delay: 0.15s; }
.trust__point.reveal:nth-child(3) { transition-delay: 0.3s; }

/* Vet rows slide from sides */
.vet-features__row.reveal {
  transform: translateX(-40px);
}

.vet-features__row.reveal.revealed {
  transform: translateX(0);
}

.vet-features__row--reverse.reveal {
  transform: translateX(40px);
}

.vet-features__row--reverse.reveal.revealed {
  transform: translateX(0);
}

/* ── Hero Entrance ─────────────────────────────────────────── */
.hero .hero__content.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.hero .hero__content.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Phone Mockup Scale ────────────────────────────────────── */
.intro__phone-showcase.reveal {
  transform: translateY(60px) scale(0.9);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.intro__phone-showcase.reveal.revealed {
  transform: translateY(0) scale(1);
}

/* ── CTA Phone Float ───────────────────────────────────────── */
.cta__phone.reveal {
  transform: translateY(40px);
}

.cta__phone.reveal.revealed {
  transform: translateY(0);
}

.cta__device {
  animation: float 6s ease-in-out infinite;
}

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

/* ── Shield Stroke Animation ───────────────────────────────── */
.trust__shield-path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust__lock-body,
.trust__lock-shackle {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

.trust__lock-hole {
  opacity: 0;
  transition: opacity 0.5s ease 1.5s;
}

.trust__shield.revealed .trust__shield-path {
  stroke-dashoffset: 0;
}

.trust__shield.revealed .trust__lock-body,
.trust__shield.revealed .trust__lock-shackle {
  stroke-dashoffset: 0;
}

.trust__shield.revealed .trust__lock-hole {
  opacity: 1;
}

/* ── Hero Scene Image Hover ────────────────────────────────── */
.hero__scene-img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__scene:hover .hero__scene-img {
  transform: scale(1.03);
}

/* ── Scroll Hint Bounce ────────────────────────────────────── */
.hero__scroll-hint svg {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ── CTA Check Mark ────────────────────────────────────────── */
.cta__screen-check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.cta__screen-check svg circle {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta__phone.revealed .cta__screen-check svg path {
  stroke-dashoffset: 0;
}

.cta__phone.revealed .cta__screen-check svg circle {
  stroke-dashoffset: 0;
}

/* ── Transition Section Specific ───────────────────────────── */
.transition__image {
  will-change: transform, opacity;
}

/* ── Nav Transition ────────────────────────────────────────── */
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--modern-teal);
  transition: width 0.3s ease;
}

.nav__links a:hover::after {
  width: 100%;
}

.nav__cta::after {
  display: none;
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.revealed {
    transform: none;
  }

  .cta__device,
  .hero__scroll-hint svg {
    animation: none;
  }

  .trust__shield-path,
  .trust__lock-body,
  .trust__lock-shackle,
  .trust__lock-hole,
  .cta__screen-check svg path,
  .cta__screen-check svg circle {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: none;
  }

  .transition__retro-text,
  .transition__modern-text,
  .transition__image {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vet-features__row.reveal,
  .vet-features__row--reverse.reveal {
    transform: none;
  }

  .intro__phone-showcase.reveal {
    transform: none;
  }
}