/* ==========================================================================
   Hero — Initial animation states
   Conectivo Child Theme
   --------------------------------------------------------------------------
   These rules hide animated elements before GSAP runs so there's no
   flash-of-unstyled-content. GSAP's timeline will animate each element
   back to its visible state on page load.

   Actual Bricks class names confirmed:
     .hero__headline   — heading
     .hero__body       — subtext
     .hero__actions    — CTA buttons wrapper
     .hero__image-col  — right column image
     .hero__pattern-col — decorative shapes
   ========================================================================== */

/* Heading — fades up */
.hero__headline,
.hero__heading,
.hero h1,
.hero h2 {
  opacity: 0;
  transform: translateY(48px);
}

/* Subtext — fades up (slightly less travel) */
.hero__body,
.hero__subtext,
.hero__description {
  opacity: 0;
  transform: translateY(32px);
}

/* Eyebrow / tagline if present */
.hero__eyebrow,
.hero__tagline,
.hero__label {
  opacity: 0;
  transform: translateY(24px);
}

/* CTA buttons wrapper — fades up */
.hero__actions,
.hero__cta,
.hero__buttons {
  opacity: 0;
  transform: translateY(24px);
}

/* Right column image — fades in + subtle scale */
.hero__image-col,
.hero__right,
.hero__image,
.hero__media,
.hero__photo {
  opacity: 0;
  transform: scale(0.96);
}

/* Decorative shapes — fade in */
.hero__pattern-col,
.hero__shape,
.hero__shapes,
.hero__bg-shape,
.hero__bg,
.hero__decoration {
  opacity: 0;
}

/* Performance hints for GPU-composited properties */
.hero__headline,
.hero__body,
.hero__actions,
.hero__image-col,
.hero__pattern-col,
.hero__heading,
.hero__subtext,
.hero__eyebrow,
.hero__cta,
.hero__right,
.hero__image,
.hero__media {
  will-change: transform, opacity;
}