/* ==========================================================================
   smooth.css — motion layer: reveals, hovers, accordions, menus
   Everything is opt-in via .js on <html>, so without JS the page is
   fully visible and static (no flash of hidden content).
   ========================================================================== */

/* ---------------------------------------------------------------- reveals */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
html.js .reveal--left  { transform: translate3d(-26px, 0, 0); }
html.js .reveal--right { transform: translate3d(26px, 0, 0); }
html.js .reveal--scale { transform: scale(.985); }
html.js .reveal.is-in.reveal--left,
html.js .reveal.is-in.reveal--right,
html.js .reveal.is-in.reveal--scale { transform: none; }

/* ----------------------------------------------------------------- images */
html.js img.img-fade { opacity: 0; transition: opacity .6s ease; }
html.js img.img-fade.is-loaded { opacity: 1; }

/* ------------------------------------------------------------- interactions */
a, button { -webkit-tap-highlight-color: transparent; }

/* accordion: animated height + fade, handled by JS */
.home-accordion [role="region"] {
  overflow: hidden;
  transition: height .38s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease;
}
.home-accordion [role="region"] .home-faq-answer {
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .38s ease;
}

/* mobile navigation */
.home-mobile-nav {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .42s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease;
}
.home-mobile-nav[hidden] { display: block; }
.home-nav.is-menu-open .home-mobile-nav { opacity: 1; }
.home-mobile-nav a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--border, #e3e8ef);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}
.home-mobile-nav .home-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0 4px;
}
.home-mobile-nav .home-mobile-actions > * { flex: 1 1 auto; }

/* cards & links: gentle lift + shadow on hover */
.home-faq-trigger { transition: color .25s ease, background-color .25s ease; }
.home-faq-trigger:hover { color: var(--home-welcome-accent, #2563eb); }

/* buttons and small cards */
a[class*="home-cta"], button[class*="home-cta"] { transition: transform .25s ease, opacity .25s ease, background-color .25s ease; }
a[class*="home-cta"]:hover, button[class*="home-cta"]:hover { transform: translateY(-2px); }
a[class*="home-cta"]:active, button[class*="home-cta"]:active { transform: translateY(0); }

/* smooth scrolling for in-page anchors (respect user settings) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .home-mobile-nav, .home-accordion [role="region"] { transition: none !important; }
}
/* Radix shipped keyframe animations on the panels — they fight our height
   transition and make the accordion snap. Disable them. */
.home-accordion [role="region"] { animation: none !important; }
.home-faq-answer { margin: 0 0 18px; }
/* ============================ page transitions ============================ */
html.js body { opacity: 0; }
html.js body.is-ready {
  opacity: 1;
  transition: opacity .38s cubic-bezier(.22, 1, .36, 1);
}
html.js body.is-leaving {
  opacity: 0;
  transition: opacity .18s ease-in;
}

/* fonts: block the swap-reflow that made pages "jump" while loading */
html.js body { text-rendering: optimizeSpeed; }

/* no numbering on articles / methods / FAQ */
.home-faq-trigger small,
[class*="home-method"] small,
.home-card small,
article small { display: none !important; }

/* youtube modal */
.yt-modal {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: rgba(8, 18, 28, .82);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  padding: 24px;
}
.yt-modal.is-open { opacity: 1; pointer-events: auto; }
.yt-modal__box {
  width: min(1040px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  transform: scale(.96);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.yt-modal.is-open .yt-modal__box { transform: scale(1); }
.yt-modal iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-modal__close {
  position: absolute; top: 18px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 0; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
}
.yt-modal__close:hover { background: rgba(255, 255, 255, .26); }
@media (prefers-reduced-motion: reduce) {
  html.js body, html.js body.is-ready, html.js body.is-leaving { opacity: 1 !important; transition: none !important; }
  .yt-modal, .yt-modal__box { transition: none !important; }
}