/* animations.css */

/* Reveal elements start hidden — JS will animate them */
.reveal,
.reveal-group > * {
  opacity: 0;
}

/* Clip-reveal elements start hidden — JS will animate them */
.hero-clip > *,
.brands-clip > *,
.works-clip > * {
  opacity: 0;
  transform: translateY(100%);
}


/* When prefers-reduced-motion is set, JS sets this class on html */
html.no-animations .reveal,
html.no-animations .reveal-group > * {
  opacity: 1 !important;
  transform: none !important;
}

html.no-animations .hero-clip > *,
html.no-animations .brands-clip > *,
html.no-animations .works-clip > * {
  opacity: 1 !important;
  transform: none !important;
}


/* Page transition overlay */
.page-transition {
  pointer-events: none;
}

/* Scroll indicator chevron */
.scroll-chevron {
  display: flex;
  align-items: center;
}

/* Sidebar active link transition handled by GSAP */
.sidebar-nav a {
  transition: color 0.2s ease;
}

/* Card hover transition for ear — CSS handles color, GSAP handles lift */
.work-card::before {
  transition: background-color 200ms ease, border-color var(--transition-color);
}

/* Tab hover — GSAP handles y transform */
.nav-tab {
  transition: background-color var(--transition-color), color var(--transition-color), border-color var(--transition-color);
}