/* ==========================================================================
   Walonium Motion Language V1 — Foundation
   Pure CSS · transform + opacity only · GPU-accelerated
   Driven by motion-language-v1.js + IntersectionObserver
   ========================================================================== */

/* --- Motion Tokens --- */

:root {
  /* Duration */
  --motion-instant: 0ms;
  --motion-fast: 320ms;
  --motion-normal: 480ms;
  --motion-medium: 640ms;
  --motion-slow: 880ms;

  /* Distance */
  --motion-distance-xs: 8px;
  --motion-distance-sm: 12px;
  --motion-distance-md: 16px;
  --motion-distance-lg: 24px;

  /* Scale */
  --motion-scale-xs: 0.985;
  --motion-scale-sm: 0.992;
  --motion-scale-image-start: 1.02;
  --motion-scale-section-start: 0.992;

  /* Opacity */
  --motion-opacity-hidden: 0;
  --motion-opacity-visible: 1;
  --motion-opacity-subtle: 0.92;

  /* Blur (reserved — not animated in V1 for performance) */
  --motion-blur-none: 0;
  --motion-blur-subtle: 4px;

  /* Rotation (reserved for later phases) */
  --motion-rotate-none: 0deg;
  --motion-rotate-subtle: 2deg;

  /* Delay & Stagger */
  --motion-delay-none: 0ms;
  --motion-stagger-step: 50ms;
  --motion-stagger-max: 600ms;

  /* Profile durations */
  --motion-duration-section: var(--motion-medium);
  --motion-duration-card: var(--motion-normal);
  --motion-duration-heading: var(--motion-normal);
  --motion-duration-image: var(--motion-medium);
  --motion-duration-form: var(--motion-fast);
  --motion-duration-footer: var(--motion-normal);

  /* Easings */
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-ease-natural: cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- Base Motion Item --- */

.motion-item {
  transition-property: opacity, transform;
  transition-duration: var(--motion-item-duration, var(--motion-normal));
  transition-timing-function: var(--motion-item-ease, var(--motion-ease-entrance));
  transition-delay: var(--motion-item-delay, var(--motion-delay-none));
  backface-visibility: hidden;
  transform: translateZ(0);
}

html.wml-active .motion-item.motion-is-pending {
  opacity: var(--motion-opacity-hidden);
  pointer-events: none;
}

html.wml-active .motion-item.motion-is-visible {
  opacity: var(--motion-opacity-visible);
  pointer-events: auto;
}

/* --- Reusable Animation Classes --- */

.motion-fade {
  --motion-item-duration: var(--motion-normal);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active .motion-fade.motion-is-pending {
  transform: none;
}

html.wml-active .motion-fade.motion-is-visible {
  transform: none;
}

.motion-fade-up {
  --motion-item-duration: var(--motion-duration-section);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active .motion-fade-up.motion-is-pending {
  transform: translate3d(0, var(--motion-distance-md), 0) scale(var(--motion-scale-section-start));
}

html.wml-active .motion-fade-up.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-fade-down {
  --motion-item-duration: var(--motion-normal);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active .motion-fade-down.motion-is-pending {
  transform: translate3d(0, calc(var(--motion-distance-sm) * -1), 0);
}

html.wml-active .motion-fade-down.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

.motion-slide-left {
  --motion-item-duration: var(--motion-normal);
  --motion-item-ease: var(--motion-ease-natural);
}

html.wml-active .motion-slide-left.motion-is-pending {
  transform: translate3d(var(--motion-distance-md), 0, 0);
}

html.wml-active .motion-slide-left.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

.motion-slide-right {
  --motion-item-duration: var(--motion-normal);
  --motion-item-ease: var(--motion-ease-natural);
}

html.wml-active .motion-slide-right.motion-is-pending {
  transform: translate3d(calc(var(--motion-distance-md) * -1), 0, 0);
}

html.wml-active .motion-slide-right.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

.motion-scale {
  --motion-item-duration: var(--motion-normal);
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-active .motion-scale.motion-is-pending {
  transform: scale(var(--motion-scale-xs));
}

html.wml-active .motion-scale.motion-is-visible {
  transform: scale(1);
}

/* Section profile — fade + 16px rise + subtle scale */
.motion-section {
  --motion-item-duration: var(--motion-duration-section);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active .motion-section.motion-is-pending {
  transform: translate3d(0, var(--motion-distance-md), 0) scale(var(--motion-scale-section-start));
}

html.wml-active .motion-section.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Card profile — fade + 12px rise + scale 0.985 */
.motion-card {
  --motion-item-duration: var(--motion-duration-card);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active .motion-card.motion-is-pending {
  transform: translate3d(0, var(--motion-distance-sm), 0) scale(var(--motion-scale-xs));
}

html.wml-active .motion-card.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Image profile — fade + scale 1.02 → 1 */
.motion-image {
  --motion-item-duration: var(--motion-duration-image);
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-active .motion-image.motion-is-pending {
  transform: scale(var(--motion-scale-image-start));
}

html.wml-active .motion-image.motion-is-visible {
  transform: scale(1);
}

/* Section header profile — fade + 12px rise */
.motion-heading {
  --motion-item-duration: var(--motion-duration-heading);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active .motion-heading.motion-is-pending {
  transform: translate3d(0, var(--motion-distance-sm), 0);
}

html.wml-active .motion-heading.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* Form profile — fade + 8px rise */
.motion-form {
  --motion-item-duration: var(--motion-duration-form);
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-active .motion-form.motion-is-pending {
  transform: translate3d(0, var(--motion-distance-xs), 0);
}

html.wml-active .motion-form.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* Footer profile — fade upward */
.motion-footer {
  --motion-item-duration: var(--motion-duration-footer);
  --motion-item-ease: var(--motion-ease-natural);
}

html.wml-active .motion-footer.motion-is-pending {
  transform: translate3d(0, var(--motion-distance-sm), 0);
}

html.wml-active .motion-footer.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* Stagger children inherit delay from index */
.motion-stagger-child {
  --motion-item-delay: calc(var(--motion-stagger-index, 0) * var(--motion-stagger-step));
}

/* Failsafe — content must never remain hidden */
html.wml-failsafe .motion-item.motion-is-pending {
  opacity: var(--motion-opacity-visible) !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* --- Accessibility --- */

@media (prefers-reduced-motion: reduce) {
  html.wml-active .motion-item,
  html.wml-active .motion-item.motion-is-pending,
  html.wml-active .motion-item.motion-is-visible {
    opacity: var(--motion-opacity-visible) !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }
}