/* ==========================================================================
   motion.css — reveal choreography, monogram formation, ambient particles
   ========================================================================== */

/* Reveals are hidden only when JS is present, so the no-JS page is complete. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease-out) calc(var(--i, 0) * 85ms),
    transform 0.9s var(--ease-out) calc(var(--i, 0) * 85ms);
}

/* --------------------------------------------------------------------------
   Monogram formation
   -------------------------------------------------------------------------- */

.js .monogram__letters > * {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-out);
}

.js .monogram__letters > :nth-child(1) { transition-delay: 0.25s; }
.js .monogram__letters > :nth-child(2) { transition-delay: 0.5s; }
.js .monogram__letters > :nth-child(3) { transition-delay: 0.72s; }

.monogram.is-formed .monogram__letters > * {
  opacity: 1;
  transform: none;
}

.monogram.is-formed .draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.6s var(--ease-soft);
}

.monogram.is-formed .draw--inner {
  transition-delay: 0.35s;
  transition-duration: 2.2s;
}

/* --------------------------------------------------------------------------
   Ambient motes: dust, marigold, embers, petals
   -------------------------------------------------------------------------- */

.motes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--scene-accent);
}

.mote {
  position: absolute;
  left: var(--x, 50%);
  bottom: -2%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: mote-rise var(--dur, 20s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

.mote--soft {
  width: 6px;
  height: 6px;
  filter: blur(1.6px);
  background: color-mix(in srgb, #ffe6b0 80%, transparent);
}

.mote--petal {
  top: -4%;
  bottom: auto;
  width: 9px;
  height: 5px;
  border-radius: 60% 40% 55% 45%;
  background: color-mix(in srgb, #f3c3b6 78%, transparent);
  animation-name: petal-fall;
}

.mote--ember {
  width: 2px;
  height: 2px;
  background: #f0b070;
  animation-duration: 12s;
}

@keyframes mote-rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  12%  { opacity: 0.55; }
  70%  { opacity: 0.28; }
  100% { opacity: 0; transform: translate3d(var(--drift, 14px), -104vh, 0) scale(1); }
}

@keyframes petal-fall {
  0%   { opacity: 0; transform: translate3d(0, -6vh, 0) rotate(0deg); }
  14%  { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(var(--drift, -40px), 104vh, 0) rotate(220deg); }
}

/* --------------------------------------------------------------------------
   Micro-motion
   -------------------------------------------------------------------------- */

.hero__eyebrow,
.hero__tagline {
  letter-spacing: 0.28em;
}

.js .hero__tagline.is-revealed {
  transition-delay: 0.35s;
}

/* --------------------------------------------------------------------------
   Reduced motion: keep the light changes, drop the travel
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js [data-reveal].is-revealed { transition: none; }

  .js .monogram__letters > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .monogram__frame .draw {
    stroke-dashoffset: 0;
    transition: none;
  }

  .scroll-cue .icon,
  .mote {
    animation: none;
  }

  .mote { display: none; }
}