html { scroll-behavior: smooth; }

.landing-header.is-scrolled {
  background-color: color-mix(in oklab, var(--background) 60%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.landing-header {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}
.landing-header-enter {
  transform: translateY(-100%);
}
.landing-header-enter.is-visible {
  transform: translateY(0);
}

.landing-nav-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.landing-nav-enter.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: calc(0.1s + var(--nav-delay, 0s));
}

.landing-nav-link.is-active { color: #4f46e5; }
.dark .landing-nav-link.is-active { color: #818cf8; }
.landing-nav-link.is-active .landing-nav-underline { width: 100%; }

.landing-mobile-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.landing-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

.landing-mobile-sheet {
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.landing-mobile-sheet.is-open { transform: translateY(0); }
.landing-mobile-sheet.is-dragging { transition: none; }

.landing-rainbow-btn {
  position: relative;
  overflow: visible;
  cursor: pointer;
  border: calc(0.125rem) solid transparent;
  background:
    linear-gradient(#121213, #121213) padding-box,
    linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)) border-box,
    linear-gradient(90deg, var(--color-1), var(--color-5), var(--color-3), var(--color-4), var(--color-2)) border-box;
  background-size: 200% 200%;
  animation: rainbow 4s linear infinite;
}
.dark .landing-rainbow-btn {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(#fff 50%, rgba(255, 255, 255, 0.6) 80%, rgba(0, 0, 0, 0)) border-box,
    linear-gradient(90deg, var(--color-1), var(--color-5), var(--color-3), var(--color-4), var(--color-2)) border-box;
  background-size: 200% 200%;
}
.landing-rainbow-btn::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 50%;
  z-index: 0;
  height: 20%;
  width: 60%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--color-1), var(--color-5), var(--color-3), var(--color-4), var(--color-2));
  filter: blur(0.75rem);
  animation: rainbow 4s linear infinite;
  pointer-events: none;
}

.landing-hero-dots {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e7eb' fill-opacity='0.3'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.landing-orb { animation: landing-orb-pulse 8s ease-in-out infinite; }
.landing-orb-2 { animation-duration: 7s; }
.landing-orb-3 { animation-duration: 10s; }
.landing-orb-4 { animation-duration: 11s; }
.landing-orb-5 { animation-duration: 13s; }
@keyframes landing-orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.13); opacity: 1; }
}

.landing-hero-gradient {
  animation: landing-hero-pulse 3s ease-in-out infinite;
}
@keyframes landing-hero-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.landing-hero-gradient-alt {
  animation: landing-hero-fade 5s ease-in-out infinite;
}
@keyframes landing-hero-fade {
  0%, 100% { opacity: 0.2; transform: translate(0, 0); }
  50% { opacity: 0.5; transform: translate(20px, -10px); }
}

.word-rotate-text.word-rotate-exit {
  animation: wordRotateExit 0.25s ease-out forwards;
}
.word-rotate-text.word-rotate-enter {
  animation: wordRotateEnter 0.25s ease-out forwards;
}
@keyframes wordRotateExit {
  to { opacity: 0; transform: translateY(50px); }
}
@keyframes wordRotateEnter {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-plan-price.is-exiting {
  animation: planPriceExit 0.2s ease-in forwards;
}
.landing-plan-price.is-animating {
  animation: planPricePop 0.2s ease-in-out;
}
@keyframes planPriceExit {
  to { opacity: 0; transform: translateY(-20px) scale(0.8); }
}
@keyframes planPricePop {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.landing-faq-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.landing-faq-item.is-open .landing-faq-panel {
  opacity: 1;
}
.landing-faq-item.is-open .landing-faq-chevron { transform: rotate(180deg); }
.landing-faq-item.is-open [data-faq-trigger] { color: #4f46e5; }
.dark .landing-faq-item.is-open [data-faq-trigger] { color: #818cf8; }

.landing-faq-answer p:last-child { margin-bottom: 0; }
.landing-faq-answer ul,
.landing-faq-answer ol { margin: 0.5em 0; padding-left: 1.25rem; }
.landing-faq-answer a { color: #4f46e5; text-decoration: underline; }
.dark .landing-faq-answer a { color: #818cf8; }

.landing-how-step.is-active .landing-how-title { color: var(--foreground); }
.landing-how-step:not(.is-active) .landing-how-title { color: var(--muted-foreground); }

.landing-video-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.landing-video-modal.is-open {
  display: flex;
  opacity: 1;
}
.landing-video-dialog {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.landing-video-modal.is-open .landing-video-dialog {
  transform: scale(1);
  opacity: 1;
}

.landing-cta-mask {
  mask-image: radial-gradient(transparent, white);
  -webkit-mask-image: radial-gradient(transparent, white);
}

.landing-cta-cell {
  position: relative;
  height: 2rem;
  width: 4rem;
  border-top: 1px solid rgb(51 65 85);
  border-right: 1px solid rgb(51 65 85);
  transition: background-color 0s;
}
.landing-cta-row {
  position: relative;
  height: 2rem;
  width: 4rem;
  border-left: 1px solid rgb(51 65 85);
  display: flex;
}

.landing-avatar-float {
  opacity: 0;
  transform: translate(-50%, calc(-100% + 12px)) scale(0.6);
  transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.landing-avatar-float.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.landing-hero-anim {
  opacity: 0;
  transform: translateY(30px);
}
.landing-hero-anim.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--hero-delay, 0ms);
}

.landing-feature-stagger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--stagger-delay, 0ms);
}
.landing-feature-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.landing-feature-stagger.is-visible:hover {
  transform: translateY(-8px);
  transition: transform 0.25s ease, opacity 0.5s ease;
}

.landing-section-head {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.landing-section-head.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-header-enter,
  .landing-nav-enter,
  .landing-hero-anim,
  .landing-feature-stagger,
  .landing-section-head,
  .landing-reveal,
  .landing-plan-price.is-animating,
  .landing-plan-price.is-exiting,
  .landing-video-dialog,
  .landing-avatar-float {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* How it works — light/dark screenshots (html.dark from landing.js) */
.how-theme-stack {
  position: relative;
  width: 100%;
}
.how-theme-light,
.how-theme-dark {
  transition: opacity 0.3s ease;
}
.how-theme-light {
  opacity: 1;
}
.how-theme-dark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
html.dark .how-theme-light {
  opacity: 0;
}
html.dark .how-theme-dark {
  opacity: 1;
  pointer-events: auto;
}

/* Logged-in user menu on landing header */
.landing-user-dropdown {
  display: none;
}
.landing-user-dropdown.is-open {
  display: block;
}