/* =============================================
   PRO STAR PLANET — Scroll Effects System
   Base styles for scroll-linked section animations.
   JS drives transforms; CSS provides will-change
   and perspective for 3D effects.
   ============================================= */

/* All effect items get GPU acceleration */
[data-effect]:not([data-effect="none"]) .card,
[data-effect]:not([data-effect="none"]) .feature-item,
[data-effect]:not([data-effect="none"]) .process-step,
[data-effect]:not([data-effect="none"]) .portfolio-item,
[data-effect]:not([data-effect="none"]) .review-card,
[data-effect]:not([data-effect="none"]) .radio-content,
[data-effect]:not([data-effect="none"]) .radio-features,
[data-effect]:not([data-effect="none"]) .expansion-grid > *,
[data-effect]:not([data-effect="none"]) .cta-section > .container {
  will-change: transform, opacity;
}

/* Cascade-flip needs perspective on the grid container */
[data-effect="cascade-flip"] .grid,
[data-effect="cascade-flip"] .portfolio-grid,
[data-effect="cascade-flip"] .reviews-grid,
[data-effect="cascade-flip"] .process-grid {
  perspective: 1200px;
}

/* Typewriter-reveal uses clip-path */
[data-effect="typewriter-reveal"] .card,
[data-effect="typewriter-reveal"] .feature-item,
[data-effect="typewriter-reveal"] .process-step,
[data-effect="typewriter-reveal"] .portfolio-item,
[data-effect="typewriter-reveal"] .review-card {
  will-change: clip-path, opacity;
}

/* Remove fade-up from items inside effect sections — the effect system owns them */
[data-effect]:not([data-effect="none"]) .card.fade-up,
[data-effect]:not([data-effect="none"]) .feature-item.fade-up,
[data-effect]:not([data-effect="none"]) .process-step.fade-up,
[data-effect]:not([data-effect="none"]) .portfolio-item.fade-up,
[data-effect]:not([data-effect="none"]) .review-card.fade-up {
  opacity: 1;
  transform: none;
  transition: none;
}