/**
 * Crest site motion — purposeful, restrained. Respects prefers-reduced-motion.
 */

/* ── Reduced motion: instant state, no scroll-driven nav deepen ───────── */
html.motion-off .motion-rise,
html.motion-off .motion-preview-wrap,
html.motion-off .motion-glow-breathe {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Nav: scroll deepen + link micro-interaction ───────────────────────── */
.motion-nav-shell {
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

html:not(.motion-off) .motion-nav-shell[data-scrolled="true"] {
  background: rgba(21, 21, 21, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.5);
}

.motion-nav-link {
  position: relative;
}

.motion-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-nav-link:hover::after {
  width: 100%;
}

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
.motion-rise {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-off .motion-rise {
  opacity: 1;
  transform: none;
}

.motion-rise.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-d-1 {
  transition-delay: 0.07s;
}
.motion-d-2 {
  transition-delay: 0.14s;
}
.motion-d-3 {
  transition-delay: 0.21s;
}
.motion-d-4 {
  transition-delay: 0.28s;
}
.motion-d-5 {
  transition-delay: 0.35s;
}
.motion-d-6 {
  transition-delay: 0.42s;
}

/* ── Hero preview: slow float ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .motion-preview-wrap {
    animation: motion-preview-float 9s ease-in-out infinite alternate;
  }

  html:not(.motion-off) .motion-glow-breathe {
    animation: motion-glow-breathe 12s ease-in-out infinite alternate;
  }
}

@keyframes motion-preview-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

@keyframes motion-glow-breathe {
  from {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0.7;
    transform: translate(-50%, -48%) scale(1.06);
  }
}

/* ── Interactive cards ─────────────────────────────────────────────────── */
.motion-card {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease;
}

html:not(.motion-off) .motion-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

html:not(.motion-off) .motion-card:active {
  transform: translateY(-1px) scale(0.995);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.motion-btn {
  transition:
    transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

html:not(.motion-off) .motion-btn:hover {
  box-shadow: 0 12px 36px rgba(255, 99, 99, 0.16);
}

html:not(.motion-off) .motion-btn:active {
  transform: scale(0.985);
}

/* ── Divider draw ─────────────────────────────────────────────────────── */
.motion-divider-wrap {
  overflow: hidden;
}

.motion-divider {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-divider.is-visible {
  transform: scaleX(1);
}

/* ── Tiny caret on download rows ──────────────────────────────────────── */
.motion-caret-shift {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.group:hover .motion-caret-shift,
.group:focus-visible .motion-caret-shift {
  transform: translateX(3px);
}

/* ── Mock UI: faux cursor blink on first row ───────────────────────────── */
.motion-caret-blink {
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .motion-caret-blink {
    animation: motion-caret 1s step-end infinite;
  }
}

@keyframes motion-caret {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* ── Footer icon ───────────────────────────────────────────────────────── */
.motion-icon-btn {
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease;
}

html:not(.motion-off) .motion-icon-btn:hover {
  transform: scale(1.08);
}

html:not(.motion-off) .motion-icon-btn:active {
  transform: scale(1);
}