/* ============================================================
   openx-utmutato-anim.css
   Útmutató oldalakra (bevezetesi-folyamat, csomagszint-valasztas,
   tamogatasi-mukodes) modern scroll + belépő animációk:
   ─ A2 hero slide-up (sorban: kicker → h1 → lead → CTA → tags)
   ─ B1 section fade-up stagger
   ─ C1 felső scroll progress bar
   ─ D1 tag chip hover
   ─ D2 magnetic primary CTA
   ============================================================ */

:root {
  --utm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --utm-orange: #F18E2D;
  --utm-amber: #FFB863;
}

/* ============================================================
   C1 · Scroll progress bar
   ============================================================ */
.openx-utm-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.openx-utm-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--utm-orange), var(--utm-amber));
  box-shadow: 0 0 12px rgba(241, 142, 45, 0.55);
  transition: width 0.08s linear;
}

/* ============================================================
   A2 · Hero slide-up (stagger)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .openx-system-hero > div > .openx-system-kicker,
  .openx-system-hero > div > h1,
  .openx-system-hero > div > p,
  .openx-system-hero > div > a.openx-system-primary-cta,
  .openx-system-hero > div > .openx-system-pack-badges,
  .openx-system-hero > .openx-system-hero-media {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--utm-ease),
      transform 0.7s var(--utm-ease);
  }

  .openx-system-hero.is-revealed > div > .openx-system-kicker { transition-delay: 0.04s; }
  .openx-system-hero.is-revealed > div > h1 { transition-delay: 0.14s; }
  .openx-system-hero.is-revealed > div > p:nth-of-type(1) { transition-delay: 0.24s; }
  .openx-system-hero.is-revealed > div > p:nth-of-type(2) { transition-delay: 0.32s; }
  .openx-system-hero.is-revealed > div > p:nth-of-type(3) { transition-delay: 0.40s; }
  .openx-system-hero.is-revealed > div > a.openx-system-primary-cta { transition-delay: 0.48s; }
  .openx-system-hero.is-revealed > div > .openx-system-pack-badges { transition-delay: 0.56s; }
  .openx-system-hero.is-revealed > .openx-system-hero-media { transition-delay: 0.30s; }

  .openx-system-hero.is-revealed > div > *,
  .openx-system-hero.is-revealed > .openx-system-hero-media {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   B1 · Section fade-up + child stagger
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .openx-system-section,
  .openx-system-final-cta {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.75s var(--utm-ease),
      transform 0.75s var(--utm-ease);
  }
  .openx-system-section.is-revealed,
  .openx-system-final-cta.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Belül stagger: flow lépések / faq / module-list / pack-grid stb. */
  .openx-system-section.is-revealed .openx-system-flow > *,
  .openx-system-section.is-revealed .openx-system-faq-grid > *,
  .openx-system-section.is-revealed .openx-system-module-list > *,
  .openx-system-section.is-revealed .openx-system-pack-grid > * {
    animation: openx-utm-fade-up 0.6s var(--utm-ease) both;
  }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(1),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(1),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(1),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(1) { animation-delay: 0.08s; }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(2),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(2),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(2),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(2) { animation-delay: 0.18s; }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(3),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(3),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(3),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(3) { animation-delay: 0.28s; }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(4),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(4),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(4),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(4) { animation-delay: 0.38s; }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(5),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(5),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(5),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(5) { animation-delay: 0.48s; }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(6),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(6),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(6),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(6) { animation-delay: 0.58s; }
  .openx-system-section.is-revealed .openx-system-flow > *:nth-child(7),
  .openx-system-section.is-revealed .openx-system-faq-grid > *:nth-child(7),
  .openx-system-section.is-revealed .openx-system-module-list > *:nth-child(7),
  .openx-system-section.is-revealed .openx-system-pack-grid > *:nth-child(7) { animation-delay: 0.68s; }

  @keyframes openx-utm-fade-up {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ============================================================
   D1 · Tag chip hover (pack-badges)
   ============================================================ */
.openx-system-pack-badges span {
  transition: transform 0.22s var(--utm-ease),
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
  cursor: default;
}
.openx-system-pack-badges span:hover {
  transform: translateY(-2px);
  background: var(--utm-orange) !important;
  color: #fff !important;
  border-color: var(--utm-orange) !important;
  box-shadow: 0 8px 16px rgba(241, 142, 45, 0.32);
}

/* ============================================================
   D2 · Magnetic primary CTA
   ============================================================ */
.openx-system-primary-cta {
  transition: transform 0.18s var(--utm-ease), box-shadow 0.22s var(--utm-ease);
  will-change: transform;
}

/* ============================================================
   Reduced motion safety
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .openx-system-hero > div > *,
  .openx-system-hero > .openx-system-hero-media,
  .openx-system-section,
  .openx-system-final-cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}