/* effects.css — safe, auto, backwards-compatible */

/* ===== Page fly-in (only active when JS adds .js-fx) ===== */
body.js-fx.page-flyin { opacity: .01; transform: translateY(16px); }
body.js-fx.page-flyin.ready { animation: bodyFlyIn 600ms ease-out forwards; }
@keyframes bodyFlyIn { to { opacity: 1; transform: translateY(0); } }

/* ===== Reveal system ===== */
.reveal { opacity: 1; transform: none;
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s; }
.reveal--slide { opacity: .35; transform: translateY(24px); }
.reveal--scale { opacity: .9; transform: scale(.96); }
.reveal--fade  { opacity: .4; }
.reveal--stagger { transition-delay: calc(var(--stagger, 0) * 80ms); }

/* ===== Claude class compatibility (only hides when .js-fx is present) ===== */
body.js-fx .animate-on-scroll,
body.js-fx .fade-in-up,
body.js-fx .fade-in-left,
body.js-fx .fade-in-right,
body.js-fx .scale-in,
body.js-fx .stagger-item { opacity: .35; transform: translateY(24px); }
body.js-fx .fade-in-left  { transform: translateX(-24px); }
body.js-fx .fade-in-right { transform: translateX(24px); }
body.js-fx .scale-in      { transform: scale(.96); }

/* ===== Micro-interactions ===== */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-3px); }

.enhanced-card { position: relative; overflow: hidden; }
.enhanced-card::before {
  content: ""; position: absolute; inset: -50% -50%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.08), transparent);
  transform: rotate(45deg); opacity: 0; transition: opacity .4s;
}
.enhanced-card:hover::before { animation: shimmer 1.2s ease-in-out; opacity: 1; }
@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg) }
  100%{ transform: translateX(100%)  rotate(45deg) }
}

/* Floating accents */
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.floating { animation: float 5s ease-in-out infinite; }
.floating-delayed { animation: float 6s ease-in-out .5s infinite; }

/* CTA pulse glow */
@keyframes pulseGlow { 0%,100%{ box-shadow:0 0 20px rgba(244,197,66,.4) }
  50%{ box-shadow:0 0 40px rgba(244,197,66,.8) } }
.pulse-glow { position: relative; animation: pulseGlow 3s ease-in-out infinite; }

/* Gradients + morphing blob */
.gradient-bg {
  background: linear-gradient(135deg, var(--accent-primary, #374151),
    var(--accent-secondary, #1f2937), var(--accent-gold, #f4c542));
  background-size: 200% 200%; animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} }

.morphing-blob {
  position: absolute; z-index: -1; opacity: .12;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(45deg, var(--accent-primary, #374151),
    var(--accent-gold, #f4c542));
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% }
  50%     { border-radius: 20% 40% 60% 80% / 40% 80% 60% 20% }
}

/* Progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: linear-gradient(90deg, var(--accent-gold,#f4c542), transparent);
}

/* Parallax (transform, not background-attachment) */
.parallax-bg { will-change: transform; }

/* Reduced motion: keep things visible & fast */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .2s !important; }
}