/* ═══ ANIMATIONS — GSAP-related styles and transitions ═══ */

/* Elements that animate in via GSAP */
.anim-fade-up {
  opacity: 0;
  transform: translateY(50px);
}

.anim-fade-left {
  opacity: 0;
  transform: translateX(-60px);
}

.anim-fade-right {
  opacity: 0;
  transform: translateX(60px);
}

.anim-scale-up {
  opacity: 0;
  transform: scale(.9);
}

.anim-split-chars .char {
  opacity: 0;
  transform: translateY(100%);
}

/* Page transition overlay */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0;
}

.page-transition.active {
  pointer-events: all;
}

/* Marquee sweep — large title that sweeps across during page transitions */
.marquee-sweep {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.marquee-sweep-text {
  font-family: var(--font-display);
  font-size: clamp(5rem, 15vw, 12rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .15);
  white-space: nowrap;
  will-change: transform;
  opacity: 0;
}

/* Morph glow effect */
.morph-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 100, .3) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}