/* "The Gate Awakens" — month box of the launch card (#announcementState). Keeps the box, colours and ornament as they
   are; adds light that runs along the existing gate ornament, a lit arch, a 3D letter ignition and drifting gold dust. */
#announcementState.gx-gate { perspective: 520px; }
#announcementState.gx-gate .gx-energy { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
#announcementState.gx-gate .gx-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#announcementState.gx-gate #stateKicker, #announcementState.gx-gate #stateTitle { position: relative; z-index: 3; }

/* comets running along the side circuits, outside -> centre */
.gx-energy .gx-comet { fill: none; stroke-linecap: round; stroke-dasharray: 9 140; stroke-dashoffset: 9; opacity: 0; }
.gx-energy .gx-comet.core { stroke: #fff4d2; stroke-width: 1.3; }
.gx-energy .gx-comet.glow { stroke: #f1c46b; stroke-width: 4.5; filter: url(#gxBlur); }
.gx-run .gx-energy .gx-comet { animation: gx-comet .85s cubic-bezier(.55, .05, .55, .95) forwards; }
@keyframes gx-comet { 0% { stroke-dashoffset: 9; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -131; opacity: 0; } }

/* the circuit itself lights up behind the comet and fades back */
.gx-energy .gx-trace { fill: none; stroke: #e5bd6f; stroke-width: 1; opacity: 0; }
.gx-run .gx-energy .gx-trace { animation: gx-trace 3.2s ease-out forwards; }
@keyframes gx-trace { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }

/* diamonds flash as the comet passes them */
.gx-energy .gx-diamond { fill: #ffe7b0; opacity: 0; filter: url(#gxBlur2); }
.gx-run .gx-energy .gx-diamond { animation: gx-diamond 1.4s ease-out .3s forwards; }
@keyframes gx-diamond { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* the arch behind the title draws itself in light when the two comets meet */
.gx-energy .gx-arch { fill: none; stroke: #ffe3a3; stroke-width: 1.8; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; filter: url(#gxBlur2); }
.gx-run .gx-energy .gx-arch { animation: gx-arch 2.8s ease-out .7s forwards; }
@keyframes gx-arch { 0% { stroke-dashoffset: 100; opacity: 1; } 35% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* shock ring from the centre */
#announcementState.gx-gate .gx-ring { position: absolute; left: 50%; top: 58%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid rgba(255, 232, 175, 1); box-shadow: 0 0 22px rgba(241, 196, 107, .85), inset 0 0 14px rgba(241, 196, 107, .55); opacity: 0; pointer-events: none; z-index: 2; }
.gx-run .gx-ring { animation: gx-ring 1.2s ease-out .8s forwards; }
@keyframes gx-ring { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(7); opacity: 0; } }

/* 3D ignition of the letters (first time only) + a shine wave (every cycle) */
#announcementState.gx-gate #stateTitle { transform-style: preserve-3d; }
#stateTitle .gx-l { display: inline-block; white-space: pre; transform-origin: 50% 70%; }
.gx-ignite #stateTitle .gx-l { animation: gx-ignite .9s cubic-bezier(.2, 1.35, .35, 1) both; animation-delay: calc(.85s + var(--i) * 50ms); }
@keyframes gx-ignite {
  0% { opacity: 0; transform: rotateX(-95deg) translateZ(-18px); color: #6f5a36; text-shadow: none; }
  45% { opacity: 1; color: #fff3cf; text-shadow: 0 0 14px rgba(255, 200, 100, .95), 0 0 2px #fff; }
  100% { opacity: 1; transform: none; color: inherit; text-shadow: inherit; }
}
.gx-shine #stateTitle .gx-l { animation: gx-shine .8s ease-in-out both; animation-delay: calc(var(--i) * 45ms); }
@keyframes gx-shine { 0%, 100% { filter: none; } 45% { filter: brightness(1.75) drop-shadow(0 0 6px rgba(255, 214, 140, .9)); } }

@media (prefers-reduced-motion: reduce) {
  #announcementState.gx-gate .gx-energy, #announcementState.gx-gate .gx-dust, #announcementState.gx-gate .gx-ring { display: none; }
  #stateTitle .gx-l { animation: none !important; }
}

/* light burst behind the title at the moment it ignites */
#announcementState.gx-gate .gx-burst { position: absolute; left: 50%; top: 62%; width: 70%; height: 140%; transform: translate(-50%, -50%) scale(.3); background: radial-gradient(closest-side, rgba(255, 220, 150, .55), rgba(241, 180, 80, .18) 55%, transparent 75%); opacity: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.gx-run .gx-burst { animation: gx-burst 1.6s ease-out .85s forwards; }
@keyframes gx-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }