/* Science Fair Adventure — shared custom styles & animations */

/* Save-to-lab button pop */
.sfa-pop { animation: sfaPop .4s ease; }
@keyframes sfaPop { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }

.sfa-saved { background-color:#FEF2F2 !important; border-color:#FCA5A5 !important; color:#DC2626 !important; }

/* Results badge entrance */
.sfa-badge-pop { animation: badgePop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes badgePop { 0%{transform:scale(0) rotate(-20deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }

/* Floating hero blobs */
.sfa-float { animation: sfaFloat 6s ease-in-out infinite; }
.sfa-float-2 { animation: sfaFloat 8s ease-in-out infinite reverse; }
@keyframes sfaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* Bubbling beaker (hero) */
.sfa-bubble { animation: sfaBubble linear infinite; }
@keyframes sfaBubble { 0%{transform:translateY(0);opacity:0} 15%{opacity:1} 100%{transform:translateY(-70px);opacity:0} }

/* Orbit rings */
.orbit { transform-origin:center; animation:spin linear infinite; }
.orbit-1 { animation-duration:8s; }
.orbit-2 { animation-duration:12s; animation-direction:reverse; }
.orbit-3 { animation-duration:10s; }
@keyframes spin { 100%{transform:rotate(360deg)} }

/* Card reveal on scroll */
.sfa-reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.sfa-reveal.in { opacity:1; transform:none; }

/* Confetti */
.sfa-confetti-piece { position:fixed; top:-10px; width:10px; height:14px; z-index:9999; pointer-events:none; will-change:transform; }

/* Gradient text helper */
.sfa-gradient-text { background:linear-gradient(90deg,#1C65B2,#3B84CF,#93D44A); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Subtle grid backdrop */
.bg-grid {
  background-size:30px 30px;
  background-image:
    linear-gradient(to right, rgba(28,101,178,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28,101,178,.05) 1px, transparent 1px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sfa-float,.sfa-float-2,.sfa-bubble,.orbit,.sfa-badge-pop,.sfa-pop { animation:none !important; }
  .sfa-reveal { opacity:1; transform:none; }
}