/* Optional movement for index2. Particles use the photo's existing SVG coordinates. */
.orb-scene {
  --energy-wisdom: #ffbc92;
  --energy-machine: var(--cyan);
  --energy-spark: var(--text);
}
.energy-mote { color: var(--energy-machine); opacity: 0; transform-box: view-box; transform-origin: 0 0; }
.energy-mote--wisdom { color: var(--energy-wisdom); }
.energy-mote-halo { fill: currentColor; opacity: .16; }
.energy-mote-core { fill: var(--energy-spark); }
.energy-mote--in {
  animation: energyGather var(--orb-cycle) ease-in-out var(--particle-delay, 0s) infinite both;
}
.energy-mote--out {
  animation: energyRelease var(--orb-cycle) ease-in-out var(--particle-delay, 0s) infinite both;
}
@keyframes energyGather {
  0%, 8% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(.5); }
  14% { opacity: .72; }
  25% { transform: translate(var(--mid-x), var(--mid-y)) scale(.9); }
  38% { opacity: .9; transform: translate(var(--end-x), var(--end-y)) scale(1); }
  46%, 100% { opacity: 0; transform: translate(var(--end-x), var(--end-y)) scale(.3); }
}
@keyframes energyRelease {
  0%, 44% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(.5); }
  51% { opacity: .72; }
  66% { transform: translate(var(--mid-x), var(--mid-y)) scale(.9); }
  84%, 100% { opacity: 0; transform: translate(var(--end-x), var(--end-y)) scale(.35); }
}

/* One border-only sweep starts with the Thai message; the label stays unobscured. */
.gateway-enter { position: relative; }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .gateway-enter::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    padding: 2px; pointer-events: none; opacity: 0;
    background: linear-gradient(110deg, transparent 43%, var(--cyan) 49%, var(--text) 50%, var(--cyan) 51%, transparent 57%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .gateway-enter.is-thai-revealing::after { animation: gatewayBorderSweep 1.8s ease-in-out 1 both; }
}
@keyframes gatewayBorderSweep {
  0% { opacity: 0; background-position: 100% 0; }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}
.gateway.is-motion-paused .gateway-enter::after,
.gateway.is-motion-backgrounded .gateway-enter::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .gateway-energy-field, .gateway-enter::after { display: none !important; animation: none !important; }
}