/* ============================================================
   Izara public site - motion
   One system for how things arrive, respond and move between
   pages. Everything here is skipped for prefers-reduced-motion,
   and nothing is hidden unless motion.js is running (html.js-motion).
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* fast start, soft landing */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .7s;
}

/* ---------- Page to page: a quick cross-fade, navbar held still ---------- */
@view-transition { navigation: auto; }
.navbar { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out .18s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Navbar ---------- */
.navbar { transition: background var(--dur) ease, box-shadow var(--dur) ease, padding var(--dur) var(--ease-out); }
.navbar.is-scrolled { padding-block: 10px; box-shadow: 0 6px 24px -12px rgba(11, 36, 34, .22); background: rgba(255, 255, 255, .96); }

/* "Modules" reads exactly like the links beside it. */
.nav-links .nav-mega__btn {
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: inherit;
  color: var(--text-secondary); position: relative; transition: color var(--dur-fast) ease;
}
.nav-links .nav-mega__btn:hover, .nav-mega.open .nav-mega__btn { color: var(--primary-purple); }
.nav-links .nav-mega__btn::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--gradient-purple-pink); border-radius: 2px; transition: width .28s var(--ease-out);
}
.nav-links .nav-mega__btn:hover::after, .nav-mega.open .nav-mega__btn::after { width: calc(100% - 16px); }
.nav-mega__btn svg { transition: transform var(--dur) var(--ease-out); }
.nav-mega.open .nav-mega__btn svg { transform: rotate(180deg); }
.nav-mega__btn:focus-visible { outline: 2px solid var(--primary-purple); outline-offset: 4px; border-radius: 4px; }

/* The panel slides and fades instead of popping. */
@media (min-width: 901px) {
  .nav-mega__panel {
    display: block !important; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(.985); transform-origin: top left;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  [dir="rtl"] .nav-mega__panel { transform-origin: top right; }
  .nav-mega.open .nav-mega__panel {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
  }
  /* A bridge over the gap, so moving the pointer down doesn't close it. */
  .nav-mega__panel::before { content: ''; position: absolute; inset-inline: 0; top: -16px; height: 16px; }
  .nav-mega__col { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
  .nav-mega.open .nav-mega__col { opacity: 1; transform: none; }
  .nav-mega.open .nav-mega__col:nth-child(2) { transition-delay: .04s; }
  .nav-mega.open .nav-mega__col:nth-child(3) { transition-delay: .08s; }
  .nav-mega.open .nav-mega__col:nth-child(4) { transition-delay: .12s; }
  .nav-mega.open .nav-mega__col:nth-child(5) { transition-delay: .16s; }
  .nav-mega.open .nav-mega__col:nth-child(6) { transition-delay: .2s; }
}
.nav-mega__col a { transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.nav-mega__col a:hover { transform: translateX(3px); }
[dir="rtl"] .nav-mega__col a:hover { transform: translateX(-3px); }

/* Mobile menu: slides down rather than appearing. */
@media (max-width: 900px) {
  /* In the stacked menu, Modules is a full-size row like the links. */
  .nav-links .nav-mega__btn { font-size: 16px; width: 100%; padding: 14px 0; justify-content: space-between;
                              border-bottom: 1px solid var(--border-color); }
  .nav-links .nav-mega__btn::after { display: none; }
  .nav-links.nav-open { animation: menu-in var(--dur) var(--ease-out); }
  .nav-mega.open .nav-mega__panel { animation: menu-in var(--dur) var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Hero: arrives in order ---------- */
html.js-motion .hero .hero-badge,
html.js-motion .hero .hero-title,
html.js-motion .hero .hero-description,
html.js-motion .hero .hero-cta,
html.js-motion .hero .hero-trial-note,
html.js-motion .hero .hero-shot,
html.js-motion .md-hero .md-crumbs,
html.js-motion .md-hero .md-intro > *,
html.js-motion .md-hero .md-frame {
  animation: rise var(--dur-slow) var(--ease-out) both;
}
html.js-motion .hero .hero-title, html.js-motion .md-hero .md-intro > :first-child { animation-delay: .08s; }
html.js-motion .hero .hero-description, html.js-motion .md-hero .md-intro > :nth-child(2) { animation-delay: .16s; }
html.js-motion .hero .hero-cta { animation-delay: .24s; }
html.js-motion .hero .hero-trial-note { animation-delay: .3s; }
html.js-motion .hero .hero-shot, html.js-motion .md-hero .md-frame { animation: rise-shot .9s var(--ease-out) .34s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes rise-shot { from { opacity: 0; transform: translateY(36px) scale(.97); } }
/* The old one-off hero animation is replaced by the sequence above. */
.hero-title, .hero-description, .hero-cta { animation-name: rise; }

/* ---------- Scroll reveal ---------- */
html.js-motion .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js-motion .reveal.is-in { opacity: 1; transform: none; }
html.js-motion .reveal--shot { transform: translateY(32px) scale(.98); }
html.js-motion .reveal--shot.is-in { transform: none; }

/* ---------- Things that respond ---------- */
.btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) ease, background-color var(--dur) ease, color var(--dur) ease; }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

.module-card, .md-cap, .md-chip, .md-pager a, .pricing-card, .feature-card, .capability-card {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease;
}
.module-card:hover, .md-cap:hover, .pricing-card:hover, .capability-card:hover {
  transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(11, 36, 34, .28); border-color: rgba(15, 118, 110, .32);
}

.md-frame, .hero-shot, .showcase-panel-shot { transition: transform .5s var(--ease-out), box-shadow .5s ease; }
.md-frame.is-closed:hover, .showcase-panel-shot:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -30px rgba(11, 36, 34, .35); }
.hero-shot img, .showcase-panel-shot img, .md-frame img { transition: transform .8s var(--ease-out); }
.showcase-panel-shot:hover img { transform: scale(1.012); }

/* Product tour: the new tab's content glides in. */
.showcase-panel.is-active .showcase-panel-copy { animation: rise .45s var(--ease-out) both; }
.showcase-panel.is-active .showcase-panel-shot { animation: rise-shot .6s var(--ease-out) .05s both; }

/* Links that move */
.module-link, .nav-mega__all, .md-chip { transition: color var(--dur-fast) ease, gap var(--dur) var(--ease-out), border-color var(--dur) ease; }
.module-link:hover, .nav-mega__all:hover { letter-spacing: .01em; }

/* ---------- Less motion when asked for ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.js-motion .reveal, html.js-motion .reveal--shot { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav-mega__panel, .nav-mega__col { transition: none !important; transform: none !important; }
  html.js-motion .hero *, html.js-motion .md-hero * { animation: none !important; }
  .showcase-panel * { animation: none !important; }
}