/* ZumaPiano v3 — Animation System */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Scroll-triggered fade up ── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-quart),
              transform 0.6s var(--ease-out-quart);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — apply to parent, children get delays */
.stagger > .fade-up:nth-child(1) { transition-delay: 0ms; }
.stagger > .fade-up:nth-child(2) { transition-delay: 80ms; }
.stagger > .fade-up:nth-child(3) { transition-delay: 160ms; }
.stagger > .fade-up:nth-child(4) { transition-delay: 240ms; }

/* ── Hero entrance — auto-plays on load ── */
.hero-enter {
  opacity: 0;
  transform: translateY(28px);
}
.hero-enter.animate {
  animation: heroIn 0.7s var(--ease-out-quart) forwards;
}
.hero-enter.d1 { animation-delay: 0ms; }
.hero-enter.d2 { animation-delay: 120ms; }
.hero-enter.d3 { animation-delay: 240ms; }
.hero-enter.d4 { animation-delay: 380ms; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Image reveal on scroll ── */
.img-reveal {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.7s var(--ease-out-quart),
              transform 0.7s var(--ease-out-quart);
}
.img-reveal.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Button micro-interactions ── */
.btn-lift {
  transition: transform 0.15s var(--ease-out-quart),
              background-color 0.2s ease,
              box-shadow 0.2s ease;
}
.btn-lift:hover {
  transform: translateY(-1px);
}
.btn-lift:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* ── Card hover lift ── */
.card-lift {
  transition: transform 0.3s var(--ease-out-quart),
              border-color 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
}

/* ── Image container zoom on hover ── */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.5s var(--ease-out-quart);
}
.img-zoom:hover img {
  transform: scale(1.03);
}

/* ── Nav scroll state ── */
.nav-scroll {
  transition: background-color 0.3s ease,
              border-color 0.3s ease;
}

/* ── Mobile menu slide ── */
.mobile-slide {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out-quart),
              opacity 0.25s ease;
  opacity: 0;
}
.mobile-slide.open {
  opacity: 1;
}

/* ── Tab content crossfade ── */
.tab-fade {
  animation: tabIn 0.3s var(--ease-out-quart);
}
@keyframes tabIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── FAQ expand/collapse ── */
/* Collapsed by default (mobile) */
.faq-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out-quart);
}
.faq-expand.open {
  grid-template-rows: 1fr;
}
.faq-expand > div {
  overflow: hidden;
}
/* Desktop: always expanded, hide toggle icon */
@media (min-width: 1024px) {
  .faq-expand {
    grid-template-rows: 1fr;
  }
  .faq-toggle-icon {
    display: none;
  }
  .faq-question {
    cursor: default;
  }
}

/* ── Subtle float for decorative elements ── */
.float-subtle {
  animation: floatSubtle 6s ease-in-out infinite;
}
@keyframes floatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Link underline reveal ── */
.link-reveal {
  position: relative;
  text-decoration: none;
}
.link-reveal::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease-out-quart);
}
.link-reveal:hover::after {
  width: 100%;
}

/* ── Coming soon tooltip for app store cards ── */
.coming-soon {
  position: relative;
  cursor: default;
  pointer-events: auto;
}
.coming-soon::after {
  content: 'Coming soon';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 14px;
  background: #D4A574;
  color: #0C0A10;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out-quart);
}
.coming-soon::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #D4A574;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.coming-soon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.coming-soon:hover::before {
  opacity: 1;
}

/* ── Focus styles for keyboard navigation ── */
:focus-visible {
  outline: 1px solid #D4A574;
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible {
  outline: 1px solid #D4A574;
  outline-offset: 2px;
}
/* FAQ question toggle indicator */
.faq-toggle-icon {
  transition: transform 0.25s var(--ease-out-quart);
}
.faq-toggle-icon.open {
  transform: rotate(45deg);
}

/* ── Accessibility: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .img-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .btn-lift:hover,
  .btn-lift:active,
  .card-lift:hover {
    transform: none !important;
  }
  .img-zoom:hover img {
    transform: none !important;
  }
  .tab-fade {
    animation: none !important;
  }
  .float-subtle {
    animation: none !important;
  }
  .mobile-slide {
    transition: none !important;
  }
  .link-reveal::after {
    transition: none !important;
  }
}