/**
 * NoLimits — unified motion system
 * One easing curve, one rhythm, one reveal language sitewide.
 */

/* Tokens: nl-tokens.css — motion-only overrides below */

/* ── Global comfort — always dark (prevents white flash between pages) ─ */
html {
  scroll-behavior: smooth;
  background-color: var(--nl-page-bg);
  color-scheme: dark;
}

body {
  background-color: var(--nl-page-bg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Skip full-screen loader on in-session navigations (see layout.html) */
html.nl-skip-loader .loading-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── MPA view transitions — dark root, no opacity “hole” ───────── */
@view-transition {
  navigation: auto;
}

::view-transition {
  background-color: var(--nl-page-bg);
}

::view-transition-group(root) {
  background-color: var(--nl-page-bg) !important;
  animation-duration: var(--page-transition-duration, 320ms) !important;
  animation-timing-function: var(--motion-ease-smooth) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  background-color: var(--nl-page-bg) !important;
}

::view-transition-old(root) {
  animation: 300ms var(--motion-ease-smooth) both nlVtFadeOut !important;
}

::view-transition-new(root) {
  animation: 300ms var(--motion-ease-smooth) both nlVtFadeIn !important;
}

@keyframes nlVtFadeOut {
  to { opacity: 0; }
}

@keyframes nlVtFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Legacy theme transitions fade through transparent — disable */
::view-transition-old(siteContent),
::view-transition-new(siteContent) {
  animation: none !important;
}

::view-transition-group(siteContent) {
  background-color: var(--nl-page-bg) !important;
}

/* Shared interactive feel */
a,
button,
input,
select,
textarea,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.hero-cta,
.nl-pkg__btn,
.navigation-list > li > a,
.currency-selector__toggle,
.currency-selector__option,
.footer-link,
.feature-card {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter;
  transition-duration: var(--motion-duration-fast);
  transition-timing-function: var(--motion-ease-smooth);
}

/* .nl-pkg hover transitions — nl-product-card.css */

/* Loading overlay — same fade as modals */
.loading-overlay {
  background-color: var(--nl-page-bg) !important;
  transition:
    opacity var(--motion-duration-moderate) var(--motion-ease-premium),
    visibility var(--motion-duration-moderate) var(--motion-ease-premium) !important;
}

.loading-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Scroll reveal (wired in main.js) ─────────────────────────── */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  transition:
    opacity var(--motion-duration-reveal) var(--motion-ease-smooth),
    transform var(--motion-duration-reveal) var(--motion-ease-smooth);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Product cards use .nl-product-enter (nl-product-card.css) — not generic scroll-reveal */
.nl-pkg.scroll-reveal,
article.product.scroll-reveal,
.product-card.scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Unified page-load entrances (overrides cinematic block) ─── */
@keyframes nlEnterUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes nlEnterRight {
  from {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes nlEnterScale {
  from {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-soft), 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hero-section .hero-content,
.hero-section .hero-visual,
.features-section .feature-card,
.featured-scripts-section .section-header,
.featured-scripts-section .featured-script-link {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  animation-duration: var(--motion-duration-reveal) !important;
  animation-timing-function: var(--motion-ease-premium) !important;
  animation-fill-mode: forwards !important;
}

.hero-section .hero-content {
  animation-name: nlEnterUp !important;
  animation-delay: calc(var(--motion-stagger-step) * 1) !important;
}

.hero-section .hero-visual {
  animation-name: nlEnterRight !important;
  animation-delay: calc(var(--motion-stagger-step) * 2) !important;
}

.features-section .feature-card {
  animation-name: nlEnterUp !important;
}

.features-section .feature-card:nth-child(1) {
  animation-delay: calc(var(--motion-stagger-step) * 4) !important;
}

.features-section .feature-card:nth-child(2) {
  animation-delay: calc(var(--motion-stagger-step) * 5) !important;
}

.features-section .feature-card:nth-child(3) {
  animation-delay: calc(var(--motion-stagger-step) * 6) !important;
}

.features-section .feature-card:nth-child(4) {
  animation-delay: calc(var(--motion-stagger-step) * 7) !important;
}

.featured-scripts-section .section-header {
  animation-name: nlEnterUp !important;
  animation-delay: calc(var(--motion-stagger-step) * 1) !important;
}

.featured-scripts-section .featured-script-link {
  animation-name: nlEnterScale !important;
}

.featured-scripts-section .featured-script-link:nth-child(1) {
  animation-delay: calc(var(--motion-stagger-step) * 2) !important;
}

.featured-scripts-section .featured-script-link:nth-child(2) {
  animation-delay: calc(var(--motion-stagger-step) * 3) !important;
}

.featured-scripts-section .featured-script-link:nth-child(3) {
  animation-delay: calc(var(--motion-stagger-step) * 4) !important;
}

/* ── Home scroll reveals (same curve + duration) ──────────────── */
.page-index .home-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  transition:
    opacity var(--motion-duration-reveal) var(--motion-ease-smooth),
    transform var(--motion-duration-reveal) var(--motion-ease-smooth),
    filter var(--motion-duration-reveal) var(--motion-ease-smooth) !important;
}

.page-index .home-reveal--scale {
  transform: translate3d(0, var(--motion-reveal-distance-soft), 0) scale(0.98);
}

.page-index .home-reveal--left {
  transform: translate3d(calc(var(--motion-reveal-distance) * -1.5), 0, 0);
}

.page-index .home-reveal--right {
  transform: translate3d(calc(var(--motion-reveal-distance) * 1.5), 0, 0);
}

.page-index .home-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.page-index .home-reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance-soft), 0);
  transition:
    opacity var(--motion-duration-reveal) var(--motion-ease-smooth),
    transform var(--motion-duration-reveal) var(--motion-ease-smooth) !important;
}

.page-index .home-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.page-index .home-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: calc(var(--motion-stagger-step) * 1) !important; }
.page-index .home-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger-step) * 2) !important; }
.page-index .home-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger-step) * 3) !important; }
.page-index .home-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger-step) * 4) !important; }
.page-index .home-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger-step) * 5) !important; }
.page-index .home-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger-step) * 6) !important; }

.page-index .home-reveal--blur {
  filter: blur(5px);
}

.page-index .home-reveal--blur.is-visible {
  filter: blur(0);
}

/* Impact / community — same premium curve */
.community-impact-section .impact-header,
.community-impact-section .impact-panel {
  transition:
    opacity var(--motion-duration-cinematic) var(--motion-ease-premium),
    transform var(--motion-duration-cinematic) var(--motion-ease-premium),
    filter var(--motion-duration-cinematic) var(--motion-ease-premium) !important;
}

.community-impact-section .impact-panel .impact-stats-side,
.community-impact-section .impact-panel .impact-divider,
.community-impact-section .impact-panel .impact-support-side {
  transition:
    opacity var(--motion-duration-reveal) var(--motion-ease-premium),
    transform var(--motion-duration-reveal) var(--motion-ease-premium) !important;
}

.community-impact-section .impact-panel.is-visible .impact-stats-side {
  transition-delay: calc(var(--motion-stagger-step) * 2) !important;
}

.community-impact-section .impact-panel.is-visible .impact-divider {
  transition-delay: calc(var(--motion-stagger-step) * 3) !important;
}

.community-impact-section .impact-panel.is-visible .impact-support-side {
  transition-delay: calc(var(--motion-stagger-step) * 4) !important;
}

/* Magnetic CTA — matches nav micro-interactions */
[data-magnetic],
.magnetic-cta {
  transition: transform var(--motion-duration-fast) var(--motion-ease-smooth) !important;
}

/* ── Reduced motion: show everything, no travel ───────────────── */
@media (prefers-reduced-motion: reduce) {
  html.nl-reduced-motion *,
  html.nl-reduced-motion *::before,
  html.nl-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-reveal,
  .scroll-reveal--visible,
  .nl-pkg.nl-product-enter,
  article.product.nl-product-enter,
  .product-card.nl-product-enter,
  .hero-section .hero-content,
  .hero-section .hero-visual,
  .features-section .feature-card,
  .featured-scripts-section .section-header,
  .featured-scripts-section .featured-script-link,
  .page-index .home-reveal,
  .page-index .home-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}