/* ============================================================
   Zentus Landing - motion layer
   Register: brand

   Rules:
   - One easing curve: ease-out-quint.
   - No bounce, no elastic.
   - Animated properties are transform and opacity only.
   - Layout properties are never animated.
   - Blue remains a restrained accent in motion as well.
   - Full prefers-reduced-motion fallback.
   ============================================================ */

:root {
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-enter: 660ms;
  --dur-hover: 220ms;
  --dur-line: 980ms;
}

html {
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[id] {
  scroll-margin-top: 92px;
}

/* ---------- focus states ---------- */
.btn:focus-visible,
.nav-link:focus-visible,
.link:focus-visible,
.footer-link:focus-visible,
.soc:focus-visible,
.voice-phone:focus-visible,
.faq-q:focus-visible,
.founder-link:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* ---------- scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-enter) var(--ease-quint),
    transform var(--dur-enter) var(--ease-quint);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- signature hero page-load ---------- */
.js .hero-left .hero-anim {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-enter) var(--ease-quint),
    transform var(--dur-enter) var(--ease-quint);
  transition-delay: var(--hd, 0ms);
  will-change: opacity, transform;
}

.js .hero-left .hero-anim.in {
  opacity: 1;
  transform: translateY(0);
}

/* The hint stays static; the chat stage joins the hero stagger. */
.js .hero-hint.hero-anim {
  opacity: 1;
  transform: none;
  transition: none;
}
.js .chat-stage.hero-anim {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-enter) var(--ease-quint),
    transform var(--dur-enter) var(--ease-quint);
  transition-delay: var(--hd, 0ms);
  will-change: opacity, transform;
}
.js .chat-stage.hero-anim.in {
  opacity: 1;
  transform: none;
}

.js .hero-hex {
  opacity: 0;
  transition: opacity 900ms var(--ease-quint);
}

.js body.is-loaded .hero-hex {
  opacity: 0.07;
}

/* ---------- subtle symbol parallax ---------- */
.parallax-symbol {
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* ---------- process line drawing ---------- */
.js .connector--h {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-line) var(--ease-quint);
  transition-delay: var(--cd, 0ms);
  will-change: transform;
}

.js .connector--h.in {
  transform: scaleX(1);
}

.js .timeline .tnode {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 520ms var(--ease-quint),
    transform 520ms var(--ease-quint);
  transition-delay: var(--nd, 0ms);
  will-change: opacity, transform;
}

.js .timeline .tstep.in .tnode {
  opacity: 1;
  transform: scale(1);
}

/* Key process steps get a restrained emphasis without looping motion. */
.js .timeline .tstep.is-key .tnode::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(24, 132, 240, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms var(--ease-quint);
  transition-delay: var(--nd, 0ms);
}

.js .timeline .tstep.is-key.in .tnode::after {
  opacity: 1;
}

.tnode {
  position: relative;
}

/* ============================================================
   Hover layer
   Shadows and glow are rendered by pseudo-elements and animated
   through opacity only.
   ============================================================ */

.btn,
.svc-featured,
.svc-card,
.problem-card,
.case-card,
.geo-feature,
.voice-phone,
.soc,
.faq-contact {
  position: relative;
  transform: translateZ(0);
  transition: transform var(--dur-hover) var(--ease-quint);
  will-change: transform;
}

.btn::after,
.svc-featured::after,
.svc-card::after,
.problem-card::after,
.case-card::after,
.geo-feature::after,
.voice-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-quint);
}

.btn-primary::after {
  box-shadow: var(--glow-blue-strong), var(--sh-md);
}

.btn-secondary::after {
  box-shadow: var(--sh-sm);
}

.svc-card::after,
.svc-featured::after,
.problem-card::after,
.case-card::after,
.geo-feature::after {
  box-shadow: var(--sh-md);
}

.voice-phone::after {
  box-shadow: 0 8px 24px rgba(24, 132, 240, 0.18);
}

.btn-primary:hover {
  transform: scale(1.02);
}

.btn-secondary:hover {
  transform: scale(1.01);
}

.btn:hover::after,
.svc-card:hover::after,
.problem-card:hover::after,
.case-card:hover::after,
.geo-feature:hover::after,
.voice-phone:hover::after {
  opacity: 1;
}

.btn:active {
  transform: scale(0.99);
}

.svc-card:hover,
.svc-featured:hover,
.problem-card:hover,
.case-card:hover {
  transform: translateY(-4px);
}

.geo-feature:hover,
.voice-phone:hover,
.soc:hover,
.faq-contact:hover {
  transform: translateY(-2px);
}

.link {
  position: relative;
}

.link::after,
.nav-link::after,
.footer-link::after,
.founder-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity var(--dur-hover) var(--ease-quint),
    transform var(--dur-hover) var(--ease-quint);
  pointer-events: none;
}

.link i {
  transition: transform var(--dur-hover) var(--ease-quint);
}

.link:hover::after,
.nav-link:hover::after,
.footer-link:hover::after,
.founder-link:hover::after {
  transform: scaleX(1);
}

.link:hover i {
  transform: translateX(4px);
}

.nav-link,
.footer-link,
.founder-link {
  position: relative;
}

.footer-link,
.soc {
  transition:
    opacity var(--dur-hover) var(--ease-quint),
    transform var(--dur-hover) var(--ease-quint);
}

.footer-link:hover {
  transform: translateX(2px);
  opacity: 1;
}

.soc:hover {
  opacity: 0.9;
}

/* Navbar scroll state: shadow appears through opacity only. */
.navbar {
  position: sticky;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  box-shadow: 0 8px 22px rgba(48, 60, 96, 0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-quint);
}

.navbar.scrolled::after {
  opacity: 1;
}

/* ---------- FAQ accordion ---------- */
.faq-a-wrap[hidden] {
  display: none;
}

/* Smooth nyílás/zárás: a magasságot JS pixelpontosan animálja (lásd index.html
   inline script) — ez egyenletesebb, mint a grid/max-height. A height itt csak
   a kiindulóállapot; a JS állítja inline-ban. A .is-open height:auto fallback. */
.faq-a-wrap {
  overflow: hidden;
  height: 0;
  will-change: height;
}

.faq-item.is-open .faq-a-wrap {
  height: auto;
}

.faq-a-wrap > .faq-a {
  opacity: 0;
  transition: opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.faq-item.is-open .faq-a-wrap > .faq-a {
  opacity: 1;
}

.faq-toggle {
  position: relative;
}

.faq-toggle .ic-minus {
  display: none;
}

.faq-item.is-open .faq-toggle .ic-minus {
  display: block;
}

.faq-item.is-open .faq-toggle .ic-plus {
  display: none;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero-left .hero-anim,
  .js .chat-stage.hero-anim,
  .js .hero-hint.hero-anim,
  .js .timeline .tnode {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .js .hero-hex {
    opacity: 0.07 !important;
    transition: none !important;
  }

  .js .connector--h {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .parallax-symbol {
    transform: none !important;
  }

  .js .timeline .tstep.is-key .tnode::after,
  .btn::after,
  .svc-card::after,
  .problem-card::after,
  .case-card::after,
  .geo-feature::after,
  .voice-phone::after,
  .navbar::after,
  .link::after,
  .nav-link::after,
  .footer-link::after,
  .founder-link::after {
    transition: none !important;
  }

  .btn:hover,
  .btn:active,
  .svc-card:hover,
  .svc-featured:hover,
  .problem-card:hover,
  .case-card:hover,
  .geo-feature:hover,
  .voice-phone:hover,
  .soc:hover,
  .faq-contact:hover,
  .footer-link:hover,
  .link:hover i {
    transform: none !important;
  }

  .faq-a-wrap {
    transition: none !important;
  }

  .faq-a-wrap > .faq-a {
    transition: none !important;
    transform: none !important;
  }
}