/* ============================================
   MANDELSON.CO — Animation Base States
   Initial states for GSAP-animated elements
   ============================================ */

/* --- Hero text chars (split text) --- */
.hero__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}

/* --- Reveal up (general purpose) --- */
[data-animate="reveal-up"] {
  opacity: 0;
  transform: translateY(60px);
}

/* --- Reveal fade --- */
[data-animate="fade"] {
  opacity: 0;
}

/* --- Reveal scale --- */
[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.92);
}

/* --- Stagger children --- */
[data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(40px);
}

/* --- Line draw --- */
[data-animate="line-draw"] {
  transform: scaleX(0);
  transform-origin: left;
}

/* --- Clip reveal (for images/media) --- */
[data-animate="clip-reveal"] {
  clip-path: inset(100% 0 0 0);
}

/* --- Horizontal scroll section --- */
.horizontal-scroll {
  overflow: hidden;
}

.horizontal-scroll__track {
  display: flex;
  gap: var(--space-xl);
  will-change: transform;
}

/* --- Parallax wrapper --- */
.parallax-wrap {
  will-change: transform;
}

/* --- Section wipe overlay --- */
.section-wipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.section-wipe--dark {
  background: var(--bg-dark);
  clip-path: inset(100% 0 0 0);
}

.section-wipe--light {
  background: var(--bg-light);
  clip-path: inset(100% 0 0 0);
}

/* --- Case study fullscreen transition --- */
.case-teaser[data-animate="fullscreen"] {
  transition: border-radius 0.6s var(--ease-out-expo);
}

/* --- Scroll indicator --- */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
}

.scroll-indicator__text {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-indicator__line {
  width: 1px;
  height: 40px;
  background: var(--text-muted);
  transform-origin: top;
}

/* --- Page transition overlay --- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--bg-dark);
  transform: translateY(100%);
  pointer-events: none;
}

/* --- Signature draw animation (handled by GSAP) --- */

/* --- Magnetic button wrapper --- */
.magnetic {
  display: inline-block;
  transition: transform 0.4s var(--ease-out-expo);
}