/*
 * OIT Single Location -- animation pre-state + map iframe reset.
 *
 * Visual styling lives inline as Tailwind utilities on the template.
 * This file owns two things:
 *
 *   1. The data-proto-animate (manual) pre-state used by view.js so the
 *      scroll reveal doesn't flash the final state for one frame
 *      before the timeline starts. view.js flips the attribute to
 *      "done" once ScrollTrigger fires.
 *
 *   2. A reset for the Google Maps embed <iframe> so it fills the
 *      rounded map card with no border. (The right column is now a
 *      keyless Google Maps embed -- no Leaflet, no CARTO/OSM tiles, no
 *      CDN dependency. See template.php / view.js.)
 */

/* Animation pre-state. */
.oit-single-location[data-proto-animate]:not([data-proto-animate="done"]) .oit-single-location__grid,
.oit-single-location[data-proto-animate]:not([data-proto-animate="done"]) .oit-single-location__title,
.oit-single-location[data-proto-animate]:not([data-proto-animate="done"]) .oit-single-location__subtitle,
.oit-single-location[data-proto-animate]:not([data-proto-animate="done"]) .oit-single-location__row,
.oit-single-location[data-proto-animate]:not([data-proto-animate="done"]) .oit-single-location__map-wrap,
.oit-single-location[data-proto-animate]:not([data-proto-animate="done"]) .oit-page-header__breadcrumb {
  opacity: 0;
}

/* Map embed iframe -- fill the rounded card edge to edge, no border. */
.oit-single-location__map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Map loading overlay.
 *
 * Sits ON TOP of the iframe while the Google embed boots (the iframe is
 * blank/white for a beat). view.js plays the circuit Lottie inside it and
 * removes it (adds .is-map-loaded) on the iframe's load event.
 *
 * Robustness: the `oit-map-loader-timeout` animation hides the overlay
 * after 8s no matter what, so it can never get stuck -- even with no JS,
 * a missed load event, or a blocked Lottie. The static circuit.svg
 * background is the reduced-motion / no-Lottie fallback; view.js drops it
 * (.is-animated) once the Lottie is running so the two don't overlap. */
.oit-single-location__map-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-grey, #f2f2f2);
  animation: oit-map-loader-timeout 0.4s ease 8s forwards;
}

/* Static circuit fallback (reduced-motion / no-Lottie). Rendered on a
 * pseudo-element so the light-grey backdrop above stays fully opaque
 * (hiding the blank iframe) while only the graphic is toned down:
 * brightness(0) turns the brand-red circuit black, and the low opacity
 * makes that black read as a soft gray instead of an intense red. */
.oit-single-location__map-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat url("../../assets/img/circuit.svg");
  filter: brightness(0);
  opacity: 0.2;
}

/* The Lottie renders an <svg>/<div> inside the loader -- fill the whole
 * card (its preserveAspectRatio is set to "slice"/cover in view.js so it
 * reaches the borders) and tone it down the same way (black + low
 * opacity = subtle gray). */
.oit-single-location__map-loader > svg,
.oit-single-location__map-loader > div {
  width: 100%;
  height: 100%;
  filter: brightness(0);
  opacity: 0.2;
}

/* While the Lottie is playing, drop the static fallback so they don't overlap. */
.oit-single-location__map-loader.is-animated::before {
  display: none;
}

/* Map painted -> fade the overlay out immediately (beats the 8s backstop). */
.oit-single-location__map-wrap.is-map-loaded .oit-single-location__map-loader {
  opacity: 0;
  visibility: hidden;
  animation: none;
  transition: opacity 0.4s ease;
}

@keyframes oit-map-loader-timeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}