/* Page-change burst (2026-09-23) — see src/js/burst.js.
   Shared by index.html and every service page service page. */
.va-burst {
  position: fixed;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  z-index: 2147482000;
  width: max(170vmax, 1400px);   /* covers the screen even from a corner */
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  object-fit: cover;
  mix-blend-mode: screen;         /* black drops out: only the light lands */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.va-burst.is-on {
  visibility: visible;
  opacity: 0.75;
  transition: opacity 0.1s ease-out;
}
.va-burst.is-arrive { animation: va-burst-out 1.9s ease-out forwards; }

/* First paint of the next page already glows, before the video is up. */
html.va-arrive::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147481999;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(150, 225, 255, 0.36), rgba(95, 160, 255, 0.14) 32%, transparent 66%);
  animation: va-glow 1.5s ease-out forwards;
}
/* The page populates out of the light. Opacity only: a transform or filter
   here would re-anchor every position:fixed element on the page. */
html.va-arrive body { animation: va-populate 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes va-burst-out { from { opacity: 0.75; } to { opacity: 0; } }
@keyframes va-glow { to { opacity: 0; } }
@keyframes va-populate { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .va-burst { display: none; }
  html.va-arrive::after,
  html.va-arrive body { animation: none; opacity: 0; }
  html.va-arrive body { opacity: 1; }
}

/* Virtual Tours variant: the mandala blooms out of the lens (departure) and
   opens up into the tours page (arrival). Circular, screen-blended. */
.va-mandala {
  position: fixed;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  z-index: 2147482001;            /* over the burst: the mandala is the Tours signature */
  width: 34vmin;
  aspect-ratio: 1;
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  object-fit: cover;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.va-mandala.is-on { visibility: visible; }
.va-mandala.is-leave { animation: va-mandala-out 0.8s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
.va-mandala.is-arrive {
  left: 50%;
  top: 50%;
  animation: va-mandala-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes va-mandala-out {
  from { opacity: 0.2; transform: translate(-50%, -50%) scale(0.9) rotate(0deg); }
  to   { opacity: 0.85; transform: translate(-50%, -50%) scale(5) rotate(40deg); }
}
@keyframes va-mandala-in {
  from { opacity: 0.85; transform: translate(-50%, -50%) scale(5) rotate(40deg); }
  60%  { opacity: 0.45; }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(70deg); }
}
@media (prefers-reduced-motion: reduce) { .va-mandala { display: none; } }