/* Matio landing — motion (index page) */

@media (prefers-reduced-motion: no-preference) {
  /* —— Scroll reveal —— */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

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

  .reveal-fade {
    transform: none;
  }

  .reveal-scale {
    transform: translateY(20px) scale(0.96);
  }

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

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 0.09s);
  }

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

  /* —— Hero entrance —— */
  .page-home .hero-copy > .reveal-hero {
    opacity: 0;
    transform: translateY(20px);
  }

  .page-home.is-loaded .hero-copy > .reveal-hero {
    animation: matio-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--hero-i, 0) * 0.1s);
  }

  .page-home .hero-phone .phone-frame {
    opacity: 0;
    transform: translateY(32px) rotate(-2deg);
  }

  .page-home.is-loaded .hero-phone .phone-frame {
    animation:
      matio-rise-phone 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards,
      matio-float 5s ease-in-out 1.4s infinite;
  }

  .page-home .hero::before {
    animation: matio-glow-drift 8s ease-in-out infinite;
  }

  @keyframes matio-rise {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes matio-rise-phone {
    from {
      opacity: 0;
      transform: translateY(32px) rotate(-2deg);
    }
    to {
      opacity: 1;
      transform: translateY(0) rotate(0deg);
    }
  }

  @keyframes matio-float {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-10px) rotate(0.5deg);
    }
  }

  @keyframes matio-glow-drift {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0.35;
    }
    50% {
      transform: translate(-12px, 8px) scale(1.08);
      opacity: 0.45;
    }
  }

  /* —— Cards & interactive polish —— */
  .page-home .about-card,
  .page-home .cat-card,
  .page-home .lang-list li {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s ease;
  }

  .page-home .about-card.is-visible:hover {
    transform: translateY(-4px);
  }

  .page-home .cat-card.is-visible:hover {
    transform: translateY(-4px) scale(1.02);
  }

  .page-home .cat-card.is-visible:hover .cat-icon {
    transform: scale(1.12) rotate(-4deg);
  }

  .page-home .cat-icon {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .page-home .lang-list li.is-visible:hover {
    transform: translateX(6px);
    box-shadow: 0 6px 20px rgba(144, 48, 240, 0.1);
  }

  .page-home .btn {
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s ease;
  }

  .page-home .btn-primary:hover {
    box-shadow: 0 12px 32px rgba(144, 48, 240, 0.4);
  }

  .page-home .cta-box.is-visible {
    animation: matio-cta-glow 4s ease-in-out infinite;
  }

  @keyframes matio-cta-glow {
    0%,
    100% {
      box-shadow: 0 8px 40px rgba(144, 48, 240, 0.25);
    }
    50% {
      box-shadow: 0 12px 48px rgba(16, 208, 240, 0.3);
    }
  }

  .page-home .preview-carousel-wrap.is-visible {
    animation: matio-carousel-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes matio-carousel-in {
    from {
      box-shadow: 0 4px 16px rgba(144, 48, 240, 0.04);
    }
    to {
      box-shadow: 0 12px 40px rgba(16, 144, 240, 0.12);
    }
  }

  /* —— Header on scroll —— */
  .site-header {
    transition:
      box-shadow 0.35s ease,
      background 0.35s ease;
  }

  .site-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(144, 48, 240, 0.08);
    background: rgba(240, 246, 252, 0.98);
  }

  .page-home.is-loaded .logo-img {
    animation: matio-logo-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
  }

  @keyframes matio-logo-pop {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* Reduced motion: show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .page-home .hero-copy > .reveal-hero,
  .page-home .hero-phone .phone-frame {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}