/* ═══════════════════════════════════════
   ANIMATIONS — Scroll-driven & WOW effects
   Each animation is isolated and reusable.
═══════════════════════════════════════ */

/* ── WORD REVEAL (hero titles) ── */
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) rotateX(-15deg);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
  transform-origin: bottom center;
}
.word-reveal.fired .word { opacity: 1; transform: none; }

/* ── CURTAIN STRIPS (Vesperata) ── */
.ves-strip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-out), flex var(--dur-med) var(--ease-in-out);
}
.ves-strip.open { clip-path: inset(0 0% 0 0); }
.ves-strip:nth-child(1) { transition-delay: 0s; }
.ves-strip:nth-child(2) { transition-delay: 0.1s; }
.ves-strip:nth-child(3) { transition-delay: 0.2s; }
.ves-strip:nth-child(4) { transition-delay: 0.3s; }
.ves-strip:nth-child(5) { transition-delay: 0.4s; }

/* ── DIAMANTINA CINEMA ── */
.dia-cinema { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.dia-cinema.fired { opacity: 1; }

.dia-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.dia-title.fired .dia-letter { opacity: 1; transform: none; }

.dia-quote {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out) 1.2s, transform 0.8s var(--ease-out) 1.2s;
}
.dia-cinema.fired .dia-quote { opacity: 1; transform: none; }

.dia-tags {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 1.8s;
}
.dia-cinema.fired .dia-tags { opacity: 1; }

/* ── SECTION REVEAL (replaces generic fade-up) ── */
/* Each section type has its own entrance — no generic .fu */

/* Fade from left */
.from-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.from-left.in { opacity: 1; transform: none; }

/* Fade from right */
.from-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.from-right.in { opacity: 1; transform: none; }

/* Scale up (stats, cards) */
.scale-up {
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.scale-up.in { opacity: 1; transform: scale(1); }

/* Stagger delays */
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .26s; }
.d4 { transition-delay: .38s; }

/* ── SCROLL PROGRESS BAR ── */
#scroll-bar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 2px; width: 0%;
  background: linear-gradient(to right, var(--orange), var(--blue));
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── HOVER DEPTH on mosaic photos ── */
.gp-photo {
  transition: transform 0.5s var(--ease-out), filter 0.5s ease;
  will-change: transform;
}
.gp-photo:hover { transform: scale(1.06); filter: brightness(1.05); }

/* ── ROTEIRO PROGRESS DOTS ── */
.rot-dots {
  position: fixed; right: 28px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 200;
  opacity: 0; transition: opacity 0.4s ease;
}
.rot-dots.visible { opacity: 1; }
.rot-dot-item {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: 1.5px solid rgba(255,255,255,.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.rot-dot-item.active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.3);
}