/* =====================================================================
   bsa-animations.css — motion for the Barangay San Agustin front page.

   Additive only: this file animates the existing front-page markup and
   the three small inline SVGs added to front-page.php. It changes no
   layout, no colour and no copy. Remove this file and the page renders
   exactly as before.

   Everything is scoped under .bsa so other templates are untouched, and
   every animation is switched off under prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Hero — drifting coastal water
   Iba sits on the Zambales coast, so the hero carries a slow two-layer
   swell instead of a static block of colour. Each band is twice the hero
   width and slides by exactly half, so the loop has no visible seam.
   --------------------------------------------------------------------- */
.bsa-hero .bsa-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;                 /* clears the flag stripe drawn by .bsa-hero::after */
  height: 90px;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Lift only the hero's content column above the waves. The Facebook and log-in
   pills are already position:absolute with z-index:3 in style.css — do not touch
   their position here, or they drop into the flow and land on the headline. */
.bsa-hero .wrap { position: relative; z-index: 1; }

.bsa-waves .wave {
  animation: bsa-swell 18s linear infinite;
}
.bsa-waves .wave-2 {
  animation-duration: 27s;
  animation-direction: reverse;
}
.bsa-waves .wave-3 {
  animation-duration: 38s;
}
@keyframes bsa-swell {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   2. Service cards — the icon answers the pointer
   A ring opens out of the icon on hover or keyboard focus. Motion that
   responds to the visitor, so it never competes for attention on its own.
   No markup change: the ring is a pseudo-element on the existing .ic.
   --------------------------------------------------------------------- */
.bsa .bsa-card .ic { position: relative; }
.bsa .bsa-card .ic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gov-blue);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}
.bsa .bsa-card-link:hover .ic::after,
.bsa .bsa-card-link:focus-visible .ic::after {
  animation: bsa-ring 1.1s ease-out infinite;
}
@keyframes bsa-ring {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.65); }
}
.bsa .bsa-card .ic .fa { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.bsa .bsa-card-link:hover .ic .fa,
.bsa .bsa-card-link:focus-visible .ic .fa { transform: translateY(-2px) scale(1.08); }

/* the "Request online →" link slides a touch on hover */
.bsa .bsa-card .go { transition: letter-spacing .25s ease, color .25s ease; }
.bsa .bsa-card-link:hover .go,
.bsa .bsa-card-link:focus-visible .go { letter-spacing: .02em; }

/* ---------------------------------------------------------------------
   3. Verify a Document — a QR code being scanned
   QR verification is what makes a barangay certificate impossible to
   forge, so the tile shows the act of scanning rather than a flat icon.
   --------------------------------------------------------------------- */
.bsa-qr-ico { display: block; width: 26px; height: 26px; overflow: visible; }
.bsa-qr-ico .qr-cell { fill: currentColor; }
.bsa-qr-ico .qr-beam {
  fill: var(--gov-gold);
  opacity: .9;
  animation: bsa-scan 3.2s ease-in-out infinite;
}
@keyframes bsa-scan {
  0%, 100% { transform: translateY(0);    opacity: 0; }
  12%      {                              opacity: .95; }
  50%      { transform: translateY(22px); opacity: .95; }
  62%      { transform: translateY(22px); opacity: 0; }
}

/* ---------------------------------------------------------------------
   4. Disaster readiness — a slow radar sweep
   Iba lies in the typhoon belt. The sweep signals that the barangay is
   watching, and gives the section a focal point without extra copy.
   --------------------------------------------------------------------- */
.bsa-radar { width: 28px; height: 28px; vertical-align: -6px; margin-right: .4rem; }
.bsa-radar .rd-ring { fill: none; stroke: currentColor; opacity: .5; }
.bsa-radar .rd-sweep {
  fill: var(--gov-gold);
  opacity: .68;
  transform-origin: 20px 20px;
  animation: bsa-sweep 4s linear infinite;
}
.bsa-radar .rd-ping {
  fill: none;
  stroke: var(--gov-gold);
  stroke-width: 1.6;
  opacity: 0;
  transform-origin: 20px 20px;
  animation: bsa-ping 4s ease-out infinite;
}
@keyframes bsa-sweep { to { transform: rotate(360deg); } }
@keyframes bsa-ping {
  0%       { transform: scale(.25); opacity: .85; }
  70%,100% { transform: scale(1);   opacity: 0; }
}

/* ---------------------------------------------------------------------
   5. Emergency hotlines — a quiet heartbeat
   Only inside #contact, so ordinary service cards stay still. The four
   cards are offset so they breathe in sequence rather than in unison.
   --------------------------------------------------------------------- */
#contact .bsa-card .ic::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gov-red, #ce1126);
  opacity: 0;
  animation: bsa-beat 3.6s ease-out infinite;
  pointer-events: none;
}
#contact .bsa-grid > *:nth-child(2) .bsa-card .ic::before { animation-delay: .45s; }
#contact .bsa-grid > *:nth-child(3) .bsa-card .ic::before { animation-delay: .9s; }
#contact .bsa-grid > *:nth-child(4) .bsa-card .ic::before { animation-delay: 1.35s; }
@keyframes bsa-beat {
  0%       { opacity: .5;  transform: scale(.86); }
  55%,100% { opacity: 0;   transform: scale(1.25); }
}

/* ---------------------------------------------------------------------
   6. Statistics — figures rise as they scroll into view
   Scroll-linked, done purely in CSS. Browsers without scroll-driven
   animation simply show the figures in place, so nothing is ever hidden
   behind an effect that did not run.
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .bsa-stats .bsa-stat {
    animation: bsa-rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
  }
  .bsa-stats .bsa-grid > *:nth-child(2) .bsa-stat,
  .bsa-stats .bsa-stat:nth-child(2) { animation-range: entry 14% cover 38%; }
  .bsa-stats .bsa-stat:nth-child(3) { animation-range: entry 18% cover 42%; }
  .bsa-stats .bsa-stat:nth-child(4) { animation-range: entry 22% cover 46%; }
  @keyframes bsa-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------------
   Reduced motion — everything settles into its finished state.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bsa-waves .wave,
  .bsa-qr-ico .qr-beam,
  .bsa-radar .rd-sweep,
  .bsa-radar .rd-ping,
  #contact .bsa-card .ic::before,
  .bsa .bsa-card-link:hover .ic::after,
  .bsa .bsa-card-link:focus-visible .ic::after {
    animation: none !important;
  }
  .bsa-qr-ico .qr-beam,
  #contact .bsa-card .ic::before { opacity: 0; }
  .bsa-radar .rd-sweep { opacity: .35; }
  .bsa-card .ic .fa,
  .bsa .bsa-card .go { transition: none; }
  .bsa-stats .bsa-stat { opacity: 1 !important; transform: none !important; animation: none !important; }
}