/* ==========================================================================
   animation.css — reusable keyframes + hover-effect utility classes
   for the BGS public site. Depends on variables.css for --transition etc.
   These are plain-CSS alternatives/companions to AOS (which is triggered
   via animations.js) — usable on elements that don't have data-aos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: .6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Entrance-animation utility classes
   Usage: <div class="animate fade-up">...</div>
   -------------------------------------------------------------------------- */
.animate {
  animation-duration: .8s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.fade-up    { animation-name: fadeUp; }
.fade-left  { animation-name: fadeLeft; }
.fade-right { animation-name: fadeRight; }
.zoom-in    { animation-name: zoomIn; }

/* Continuous/looping effects */
.float {
  animation: float 4s ease-in-out infinite;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Stagger helpers (pair with .animate) */
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }

/* --------------------------------------------------------------------------
   Interaction / hover-effect utility classes
   -------------------------------------------------------------------------- */

/* Button hover: lift + shadow (matches .buttons .btn-solid:hover in style.css) */
.btn-hover-fx {
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn-hover-fx:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-primary);
}

/* Ripple click effect — pair with a small inline script that positions
   ::after at the click coordinates, or use as a static center ripple */
.ripple-fx {
  position: relative;
  overflow: hidden;
}

.ripple-fx::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, .5);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.ripple-fx:active::after {
  animation: ripple .6s ease-out;
}

/* Image hover: subtle zoom inside a clipped container */
.img-hover-zoom {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.img-hover-zoom img {
  transition: transform .6s cubic-bezier(.175, .885, .32, 1.275);
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
}

/* Card hover: lift + shadow (mirrors .cards:hover in style.css, usable
   standalone on any card-like element) */
.card-hover-fx {
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275),
              box-shadow .4s cubic-bezier(.175, .885, .32, 1.275);
}

.card-hover-fx:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-primary);
}

/* --------------------------------------------------------------------------
   Reduced-motion support
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate,
  .float,
  .pulse,
  .ripple-fx::after {
    animation: none !important;
    transition: none !important;
  }
}