/* ============================================================
   SANDRA — CSS keyframe animations
   GSAP timelines live in js/animations.js
   ============================================================ */

@keyframes cue {
  0%, 100% { transform: scaleY(.4); opacity: .4; }
  50%       { transform: scaleY(1);  opacity: 1;  }
}

/* ---- SplitText: word wrapper keeps whole words together on wrap ---- */
.split-word {
  display: inline-block;
  white-space: nowrap;
}

/* ---- SplitText: animated chars (moment lines + character lines) ---- */
.moment__line .char,
.char-line .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* ---- Treatment B: clip-path wipe with accent sweep ---- */
.wipe-reveal {
  position: relative;
  overflow: hidden;
}
.wipe-reveal::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--c-accent);
  opacity: 0.1;
  transform: translateX(var(--rect-x, -101%));
  transition: none;
  pointer-events: none;
  z-index: 1;
}

/* ---- Brush stroke reveal: .moment__sub ---- */
.moment__sub {
  position: relative;
  overflow: hidden;
}
.moment__sub::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--c-accent);
  opacity: 0.12;
  transform: translateX(var(--rect-x, -101%));
  transition: none;
  z-index: 1;
  pointer-events: none;
}

/* ---- Section dividers: hairline turquoise rule, animated via GSAP CSS var ---- */

/* Hero → Group divider */
.group {
  --divider-scale: 0;
}
.group::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  translate: -50% 0;
  width: 200px; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent);
  transform: scaleX(var(--divider-scale));
  transform-origin: center;
  z-index: 3;
  pointer-events: none;
}

/* Cast → Contemplate divider */
.contemplate {
  --divider-scale: 0;
}
.contemplate::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  translate: -50% 0;
  width: 200px; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent);
  transform: scaleX(var(--divider-scale));
  transform-origin: center;
  pointer-events: none;
}