/* Page-change burst (MOCK, 2026-09-23) — see src/js/burst-mock.js.
   Shared by home-mock and every destination *-mock.html. */
.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(210, 245, 255, 0.78), rgba(120, 196, 255, 0.42) 30%, rgba(6, 12, 22, 0.18) 64%, transparent 80%);
  animation: va-glow 1.7s ease-out forwards;
}
/* The page populates out of the light. The burst itself stays bright.
   Opacity only: a transform or filter here would re-anchor fixed elements. */
html.va-arrive body > :not(.va-burst):not(.va-mandala) {
  animation: va-populate 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

@keyframes va-burst-out { from { opacity: 0.92; } 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 > :not(.va-burst):not(.va-mandala) { animation: none; 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; } }