/* ============================================================
   BAAR ANIMATIONS.CSS — Reusable Animation Library
   Import this file on any page to get all animations
   ============================================================ */

/* ===========================
   KEYFRAMES LIBRARY
=========================== */

/* Fade Up — generic entrance */
@keyframes baar-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade In */
@keyframes baar-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide In Left */
@keyframes baar-slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide In Right */
@keyframes baar-slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale Up */
@keyframes baar-scaleUp {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Logo Pulse Glow */
@keyframes baar-logoPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(26,115,232,0.5))
            drop-shadow(0 0 20px rgba(26,115,232,0.25));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(26,115,232,0.85))
            drop-shadow(0 0 40px rgba(0,170,255,0.4))
            drop-shadow(0 0 60px rgba(245,166,35,0.2));
  }
}

/* Orbit Ring Spin */
@keyframes baar-orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbit Ring Spin Reverse */
@keyframes baar-orbitSpinReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Particle Float */
@keyframes baar-float1 {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0.6; }
  33%  { transform: translate(18px, -22px) scale(1.1); opacity: 0.9; }
  66%  { transform: translate(-12px, -38px) scale(0.9); opacity: 0.5; }
  100% { transform: translate(0, 0) scale(1);   opacity: 0.6; }
}
@keyframes baar-float2 {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0.5; }
  40%  { transform: translate(-20px, -15px) scale(1.15); opacity: 0.8; }
  70%  { transform: translate(10px, -30px) scale(0.9);  opacity: 0.4; }
  100% { transform: translate(0, 0) scale(1);   opacity: 0.5; }
}
@keyframes baar-float3 {
  0%   { transform: translate(0, 0);   opacity: 0.4; }
  50%  { transform: translate(14px, -20px) scale(1.2); opacity: 0.7; }
  100% { transform: translate(0, 0);   opacity: 0.4; }
}

/* Shield Float */
@keyframes baar-shieldFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.18; }
  50%       { transform: translateY(-20px) rotate(4deg); opacity: 0.28; }
}

/* Shimmer Sweep */
@keyframes baar-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Button Ripple */
@keyframes baar-ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(4); opacity: 0; }
}

/* Typing cursor blink */
@keyframes baar-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Stagger Word Reveal */
@keyframes baar-wordReveal {
  from { opacity: 0; transform: translateY(16px) rotateX(-20deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Card entry glow */
@keyframes baar-cardGlow {
  0%   { box-shadow: 0 30px 80px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6); }
  50%  { box-shadow: 0 30px 80px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 40px rgba(26,115,232,0.15); }
  100% { box-shadow: 0 30px 80px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6); }
}

/* Divider reveal */
@keyframes baar-dividerExpand {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Input focus ring pulse */
@keyframes baar-focusRing {
  0%   { box-shadow: 0 0 0 0px rgba(26,115,232,0.4), 0 6px 18px rgba(26,115,232,0.15); }
  100% { box-shadow: 0 0 0 4px rgba(26,115,232,0.18), 0 6px 18px rgba(26,115,232,0.15); }
}

/* Notification dot pulse */
@keyframes baar-dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.5; }
}

/* ===========================
   ANIMATED LOGO WRAPPER
   Usage: wrap <img> in .baar-logo-anim
=========================== */
.baar-logo-anim {
  position: relative;
  display: inline-block;
  cursor: default;
}

.baar-logo-anim img {
  position: relative;
  z-index: 2;
  animation: baar-logoPulse 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.baar-logo-anim:hover img {
  transform: scale(1.07) rotate(-3deg);
}

/* Orbit ring 1 */
.baar-logo-anim::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(26,115,232,0.6);
  border-right-color: rgba(0,170,255,0.3);
  animation: baar-orbitSpin 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Orbit ring 2 */
.baar-logo-anim::after {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1.5px dashed rgba(245,166,35,0.35);
  animation: baar-orbitSpinReverse 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* ===========================
   BRAND LOGO (larger, left side)
   Usage: add class .baar-brand-logo-anim
=========================== */
.baar-brand-logo-anim {
  animation: baar-logoPulse 3s ease-in-out infinite,
             baar-fadeIn 0.8s ease forwards;
}

/* ===========================
   ANIMATED BRAND SECTION TEXT
   Usage: add .baar-text-anim to h1/p
=========================== */
.baar-text-anim {
  animation: baar-slideInLeft 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.baar-text-anim.delay-1 { animation-delay: 0.15s; }
.baar-text-anim.delay-2 { animation-delay: 0.3s; }
.baar-text-anim.delay-3 { animation-delay: 0.45s; }

/* Word-by-word reveal for headings */
.baar-word-reveal {
  display: inline-block;
  animation: baar-wordReveal 0.55s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: bottom center;
}

/* ===========================
   ANIMATED LOGIN CARD
   Usage: add .baar-card-anim to .login-card
=========================== */
.baar-card-anim {
  animation: baar-fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) both,
             baar-cardGlow 4s ease-in-out 1s infinite;
}

/* ===========================
   STAGGERED FORM GROUPS
   Usage: add .baar-form-anim to each .form-group, .options-row, button
=========================== */
.baar-form-anim {
  animation: baar-fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
  opacity: 0;
}
.baar-form-anim.delay-1  { animation-delay: 0.35s; }
.baar-form-anim.delay-2  { animation-delay: 0.45s; }
.baar-form-anim.delay-3  { animation-delay: 0.55s; }
.baar-form-anim.delay-4  { animation-delay: 0.65s; }
.baar-form-anim.delay-5  { animation-delay: 0.75s; }
.baar-form-anim.delay-6  { animation-delay: 0.85s; }

/* ===========================
   ANIMATED DIVIDER
   Usage: add .baar-divider-anim to .divider
=========================== */
.baar-divider-anim {
  transform-origin: center;
  animation: baar-dividerExpand 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

/* ===========================
   SHIMMER BUTTON
   Usage: add .baar-btn-shimmer to any button
=========================== */
.baar-btn-shimmer {
  position: relative;
  overflow: hidden;
}
.baar-btn-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.28) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: baar-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* Ripple on click */
.baar-btn-shimmer .ripple {
  position: absolute;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.35);
  margin-top: -20px;
  margin-left: -20px;
  pointer-events: none;
  animation: baar-ripple 0.6s ease-out forwards;
}

/* ===========================
   FLOATING PARTICLES LAYER
   Usage: add <div class="baar-particles"></div> 
   as first child of body or container
=========================== */
.baar-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.baar-particles span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,115,232,0.7), transparent 70%);
}

.baar-particles span:nth-child(1)  { width:6px;  height:6px;  top:15%; left:10%; animation: baar-float1 7s ease-in-out infinite; }
.baar-particles span:nth-child(2)  { width:4px;  height:4px;  top:35%; left:20%; animation: baar-float2 9s ease-in-out 1s infinite; }
.baar-particles span:nth-child(3)  { width:8px;  height:8px;  top:60%; left:8%;  animation: baar-float3 6s ease-in-out 2s infinite; }
.baar-particles span:nth-child(4)  { width:5px;  height:5px;  top:80%; left:25%; animation: baar-float1 8s ease-in-out 0.5s infinite; }
.baar-particles span:nth-child(5)  { width:3px;  height:3px;  top:20%; left:85%; animation: baar-float2 7.5s ease-in-out 1.5s infinite; }
.baar-particles span:nth-child(6)  { width:7px;  height:7px;  top:50%; left:90%; animation: baar-float3 10s ease-in-out 3s infinite; }
.baar-particles span:nth-child(7)  { width:4px;  height:4px;  top:70%; left:75%; animation: baar-float1 8.5s ease-in-out 0.8s infinite; }
.baar-particles span:nth-child(8)  { width:6px;  height:6px;  top:10%; left:55%; animation: baar-float2 6.5s ease-in-out 2.2s infinite; }
.baar-particles span:nth-child(9)  { width:3px;  height:3px;  top:45%; left:45%; animation: baar-float3 9s ease-in-out 1.2s infinite; background: radial-gradient(circle, rgba(245,166,35,0.6), transparent 70%); }
.baar-particles span:nth-child(10) { width:5px;  height:5px;  top:88%; left:60%; animation: baar-float1 11s ease-in-out 4s infinite; }
.baar-particles span:nth-child(11) { width:4px;  height:4px;  top:30%; left:70%; animation: baar-float2 7s ease-in-out 0.3s infinite; background: radial-gradient(circle, rgba(0,170,255,0.65), transparent 70%); }
.baar-particles span:nth-child(12) { width:6px;  height:6px;  top:65%; left:40%; animation: baar-float3 8s ease-in-out 2.7s infinite; }

/* ===========================
   FLOATING SHIELDS (background deco)
   Usage: add <div class="baar-shields"></div> to body
=========================== */
.baar-shields {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.baar-shield {
  position: absolute;
  opacity: 0.12;
  animation: baar-shieldFloat 8s ease-in-out infinite;
}
.baar-shield:nth-child(1) { width: 60px; top: 12%; left: 3%;  animation-delay: 0s;   animation-duration: 9s; }
.baar-shield:nth-child(2) { width: 45px; top: 55%; left: 92%; animation-delay: 2s;   animation-duration: 11s; }
.baar-shield:nth-child(3) { width: 35px; top: 80%; left: 15%; animation-delay: 4s;   animation-duration: 7s; }
.baar-shield:nth-child(4) { width: 28px; top: 25%; left: 80%; animation-delay: 1.5s; animation-duration: 10s; }
.baar-shield:nth-child(5) { width: 50px; top: 70%; left: 55%; animation-delay: 3s;   animation-duration: 8.5s; }

/* ===========================
   SOCIAL ICON HOVER BOUNCE
   Usage: already targets .social-icon
=========================== */
.baar-social-anim .social-icon {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  animation: baar-fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.baar-social-anim .social-icon:nth-child(1) { animation-delay: 0.9s; }
.baar-social-anim .social-icon:nth-child(2) { animation-delay: 1.0s; }
.baar-social-anim .social-icon:nth-child(3) { animation-delay: 1.1s; }
.baar-social-anim .social-icon:nth-child(4) { animation-delay: 1.2s; }
.baar-social-anim .social-icon:nth-child(5) { animation-delay: 1.3s; }

/* ===========================
   INPUT FOCUS ANIMATION
   Enhancement over base style
=========================== */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  animation: baar-focusRing 0.25s ease forwards;
}

/* ===========================
   CARD HEADER LOGO ENTRANCE
=========================== */
.baar-card-header-anim {
  animation: baar-scaleUp 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}

/* ===========================
   FOOTER FADE
=========================== */
.baar-footer-anim {
  animation: baar-fadeIn 0.6s ease 1s both;
}

/* ===========================
   UTILITY CLASSES
=========================== */
.baar-anim-paused { animation-play-state: paused !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .baar-logo-anim::before,
  .baar-logo-anim::after,
  .baar-logo-anim img,
  .baar-brand-logo-anim,
  .baar-text-anim,
  .baar-card-anim,
  .baar-form-anim,
  .baar-divider-anim,
  .baar-btn-shimmer::after,
  .baar-particles span,
  .baar-shield,
  .baar-footer-anim,
  .baar-card-header-anim,
  .baar-social-anim .social-icon,
  .baar-word-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}