/* ===== Effects & animations (lightweight, perf-friendly) =============== */
/* Scroll reveal */
/* Reveal: do not hide content by default; only apply hidden state when JS class exists */
.fx-reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.js .fx-reveal{opacity:0;transform:translateY(16px) scale(.98)}
.fx-reveal.is-in{opacity:1;transform:translateY(0) scale(1)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}
.reveal-delay-5{transition-delay:.4s}
.reveal-delay-6{transition-delay:.48s}

@media (prefers-reduced-motion: reduce){
  .fx-reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* Buttons: subtle lift + shine sweep */
.btn{position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px)}
.btn::after{content:"";position:absolute;top:-120%;bottom:-120%;width:40%;left:-60%;transform:skewX(-20deg);background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);opacity:.0;pointer-events:none}
.btn:hover::after{animation:btn-shine .75s ease forwards}
@keyframes btn-shine{0%{left:-60%;opacity:0}35%{opacity:.55}100%{left:140%;opacity:0}}

/* Card glow on hover (applies to dark cards) */
.card-glow{position:relative}
.card-glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(120px 60px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.18), transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.card-glow:hover::before{opacity:.9}

/* Image gentle zoom on hover */
.img-zoom{overflow:hidden;border-radius:8px}
.img-zoom img{transform:scale(1);transition:transform .6s cubic-bezier(.2,.65,.18,.98)}
.img-zoom:hover img{transform:scale(1.03)}

/* Heading underline reveal */
.fx-underline{background-image:linear-gradient(90deg,var(--brand-pink),var(--brand-turq));background-repeat:no-repeat;background-position:left bottom;background-size:0% 3px;padding-bottom:6px}
.fx-underline.is-in{background-size:45% 3px;transition:background-size .9s ease .2s}

/* Parallax helper (transform via --parallax-y variable) */
[data-parallax] .wrap,[data-parallax] .inner{will-change:transform;transform:translateY(var(--parallax-y,0px))}
@media (prefers-reduced-motion: reduce){
  [data-parallax] .wrap,[data-parallax] .inner{transform:none !important}
}