/* ============================================================
   SoulSyn — Essência · Motion layer
   Progressive enhancement: all hidden/animated states are scoped
   under .js-motion (added by motion.js). Without JS, nothing is
   hidden. Fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ---- Easing tokens ---- */
:root {
  --ss-ease-out: cubic-bezier(0.22, 0.68, 0.28, 1);
  --ss-rise: 26px;
}

/* ============================================================
   1 · Scroll reveal — fade + rise
   ============================================================ */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--ss-rise));
  transition:
    opacity 0.85s var(--ss-ease-out),
    transform 0.85s var(--ss-ease-out);
  transition-delay: calc(var(--i, 0) * 95ms);
  will-change: opacity, transform;
}
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* a softer variant — used for large display type (less travel) */
.js-motion [data-reveal="soft"] {
  --ss-rise: 16px;
}

/* ============================================================
   2 · Hero entrance — runs on load (same mechanic, immediate)
   ============================================================ */
.js-motion [data-hero] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1s var(--ss-ease-out),
    transform 1s var(--ss-ease-out);
  transition-delay: calc(var(--i, 0) * 130ms + 120ms);
  will-change: opacity, transform;
}
.js-motion.hero-in [data-hero] {
  opacity: 1;
  transform: none;
}

/* Hero visual comes in with a touch of scale */
.js-motion [data-hero-visual] {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity 1.2s var(--ss-ease-out),
    transform 1.2s var(--ss-ease-out);
  transition-delay: 360ms;
  will-change: opacity, transform;
}
.js-motion.hero-in [data-hero-visual] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   3 · Mandalas — slow continuous rotation
   ============================================================ */
@keyframes ss-spin {
  to { transform: rotate(360deg); }
}
@keyframes ss-spin-rev {
  to { transform: rotate(-360deg); }
}

.js-motion .ss-hero-mandala-bg img {
  animation: ss-spin 180s linear infinite;
  transform-origin: 50% 50%;
}
.js-motion .ss-product-mandala img {
  animation: ss-spin 220s linear infinite;
  transform-origin: 50% 50%;
}
.js-motion .ss-cta-mandala-bg img {
  animation: ss-spin-rev 260s linear infinite;
  transform-origin: 50% 50%;
}

/* ============================================================
   4 · Micro-interactions
   ============================================================ */
/* CTA — lift + arrow slide */
.js-motion .ss-cta {
  transition: transform 0.32s var(--ss-ease-out), box-shadow 0.32s var(--ss-ease-out);
}
.js-motion .ss-cta:hover {
  transform: translateY(-2px);
}
.js-motion .ss-cta__arrow {
  display: inline-block;
  transition: transform 0.32s var(--ss-ease-out);
}
.js-motion .ss-cta:hover .ss-cta__arrow {
  transform: translateX(7px);
}

/* Ghost CTA — arrow drops */
.js-motion .ss-cta-ghost__arrow {
  display: inline-block;
  transition: transform 0.32s var(--ss-ease-out);
}
.js-motion .ss-cta-ghost:hover .ss-cta-ghost__arrow {
  transform: translateY(5px);
}

/* Cards / steps / principles — subtle lift + accent border */
.js-motion .ss-card,
.js-motion .ss-step,
.js-motion .ss-principle {
  transition:
    transform 0.4s var(--ss-ease-out),
    border-color 0.4s var(--ss-ease-out),
    box-shadow 0.4s var(--ss-ease-out);
}
.js-motion .ss-card:hover,
.js-motion .ss-step:hover {
  transform: translateY(-4px);
}

/* Diff rows — lift the whole article gently */
.js-motion .ss-diff-row {
  transition: transform 0.4s var(--ss-ease-out);
}

/* Nav links — animated underline */
.js-motion .ss-nav-links a {
  position: relative;
}
.js-motion .ss-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--ss-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ss-ease-out);
}
.js-motion .ss-nav-links a:hover::after {
  transform: scaleX(1);
}

/* FAQ — smooth open feel on the answer */
.js-motion .ss-faq-item__answer {
  transition: opacity 0.4s var(--ss-ease-out);
}

/* ============================================================
   5 · Nav scrolled state
   ============================================================ */
.js-motion .ss-nav {
  transition:
    background-color 0.4s var(--ss-ease-out),
    box-shadow 0.4s var(--ss-ease-out),
    backdrop-filter 0.4s var(--ss-ease-out);
}
.js-motion .ss-nav.is-scrolled {
  background-color: rgba(245, 241, 232, 0.82);
  backdrop-filter: saturate(1.2) blur(12px);
  box-shadow: 0 1px 0 rgba(19, 20, 24, 0.08), 0 10px 30px -20px rgba(19, 20, 24, 0.25);
}

/* ============================================================
   6 · Reduced motion — disable everything
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-hero],
  .js-motion [data-hero-visual] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-motion .ss-hero-mandala-bg img,
  .js-motion .ss-product-mandala img,
  .js-motion .ss-cta-mandala-bg img {
    animation: none !important;
  }
}