/* ============================================================
   BLUR-IN ANIMATIONS
   Used both for on-load cascade and scroll reveal.
   ============================================================ */

[data-animate] {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
  transition:
    opacity 0.85s var(--ease-out-soft),
    filter 0.85s var(--ease-out-soft),
    transform 0.85s var(--ease-out-soft);
  will-change: opacity, filter, transform;
}

[data-animate].is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

[data-animate].is-out {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
}

/* On-load cascade delays (declared via data-delay attribute via inline style) */
[data-animate][style*="--delay"] {
  transition-delay: var(--delay, 0ms);
}

/* ============================================================
   SCROLL CUE — seta indicando scroll
   ============================================================ */

.scroll-cue {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: clamp(20px, 3vw, 36px);
  pointer-events: none;
}

.scroll-cue svg {
  width: 26px;
  height: 26px;
  color: var(--gold-light);
  animation: scroll-cue-pingpong 0.9s var(--ease-in-out-soft) infinite alternate;
}

@keyframes scroll-cue-pingpong {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* ============================================================
   HIGHLIGHT — marca-texto
   ============================================================ */

.highlight {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(
    120deg,
    rgba(241, 219, 156, 0.28) 0%,
    rgba(172, 112, 60, 0.32) 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  padding: 0.04em 0.18em;
  margin: 0 -0.04em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--ease-out-soft);
  transition-delay: var(--highlight-delay, 800ms);
}

[data-animate].is-in .highlight {
  background-size: 100% 100%;
}