/* Toolspot4u Child Theme — Motion System (Paper & Ember / Trendora-style)
   All animation, reveal, curtain, and load-sequence CSS.
   Matches Redesign Mockup_2/assets/styles.css exactly. */

/* ── Blur-resolving scroll reveal ────────────────────────────────────────── */

.reveal {
  opacity:    0;
  transform:  translateY(26px);
  filter:     blur(8px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out),
              filter 0.7s var(--ease-out);
}
.reveal.in {
  opacity:   1;
  transform: none;
  filter:    blur(0);
}

/* ── Stagger children ────────────────────────────────────────────────────── */

[data-stagger] > * {
  opacity:    0;
  transform:  translateY(26px);
  filter:     blur(8px);
  transition: opacity 0.6s var(--ease-out),
              transform 0.6s var(--ease-out),
              filter 0.6s var(--ease-out);
}
[data-stagger].in > * {
  opacity:   1;
  transform: none;
  filter:    blur(0);
}

/* ── Per-word blur reveal (headings — .mw spans injected by motion.js) ───── */

.mw {
  display:    inline-block;
  opacity:    0;
  filter:     blur(10px);
  transform:  translateY(12px);
  transition: opacity 0.7s var(--ease-out),
              filter 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.words-in .mw {
  opacity:   1;
  filter:    blur(0);
  transform: none;
}

/* ── Hero load sequence (.load-seq) ──────────────────────────────────────── */

.load-seq > * {
  opacity:   0;
  transform: translateY(18px);
  animation: rise 0.7s var(--ease-out) forwards;
}
.load-seq > *:nth-child(1) { animation-delay: 0.05s; }
.load-seq > *:nth-child(2) { animation-delay: 0.15s; }
.load-seq > *:nth-child(3) { animation-delay: 0.28s; }
.load-seq > *:nth-child(4) { animation-delay: 0.40s; }
.load-seq > *:nth-child(5) { animation-delay: 0.52s; }
.load-seq > *:nth-child(6) { animation-delay: 0.64s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* ── Intro loader curtain ────────────────────────────────────────────────── */

#intro {
  position:   fixed;
  inset:      0;
  z-index:    var(--z-intro);
  background: var(--paper);
  display:    flex;
  align-items:     center;
  justify-content: center;
  transition: transform 0.75s cubic-bezier(.84,.04,.18,.98),
              opacity 0.75s cubic-bezier(.84,.04,.18,.98);
}
#intro .intro-word {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      clamp(2.8rem, 9vw, 6.5rem);
  letter-spacing: -0.04em;
}
#intro .intro-word span {
  display:    inline-block;
  opacity:    0;
  filter:     blur(10px);
  transform:  translateY(18px);
  transition: opacity 0.6s var(--ease-out),
              filter 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}
#intro .intro-word span:nth-last-child(-n+2) { color: var(--ember); }
#intro.in .intro-word span { opacity: 1; filter: blur(0); transform: none; }
#intro.done {
  transform:      translateY(-100%);
  opacity:        0.4;
  pointer-events: none;
}
html.intro-lock { overflow: hidden; }

/* ── Collage wall column reveals ─────────────────────────────────────────── */

.cwall-col {
  opacity:    0;
  filter:     blur(8px);
  transition: opacity 1s var(--ease-out), filter 1s var(--ease-out);
}
.cwall-col.in { opacity: 1; filter: blur(0); }

/* ── Reduced motion overrides ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lane,
  .lane.rev {
    animation:  none;
    flex-wrap:  wrap;
    width:      auto;
  }
  .reveal,
  [data-stagger] > * {
    opacity:    1 !important;
    transform:  none !important;
    filter:     none !important;
    transition: none;
  }
  .load-seq > * {
    animation:  none;
    opacity:    1;
    transform:  none;
  }
  .mw {
    opacity:    1 !important;
    filter:     none !important;
    transform:  none !important;
  }
  #intro  { display: none; }
  .cwall-col { opacity: 1 !important; filter: none !important; }
}