/* Golden Shuttle — rally presentation. Choreography and motion live in rally.js.
   State classes on <html>: rally-pending (script loading), rally-live, rally-paused (a dialog is
   open), rally-resizing, rally-off (planner unavailable), rally-still (reduced motion). */

/* Hero serve stage: the shuttle waits here for the opening serve. ------------------------- */
.serve-stage{position:relative;height:370px;display:grid;place-items:center}
.shuttle-halo{position:absolute;inset:0;background:radial-gradient(closest-side at 40% 56%,#d4af371c,#d4af3708 58%,transparent);pointer-events:none}
.serve-still{display:block;position:relative;width:min(430px,94%);height:auto;filter:drop-shadow(0 24px 24px #0005)}
.serve-still:not([src]){display:none} /* waiting: the still is only fetched if the rally cannot run */
.serve-mark{position:absolute;left:37%;top:47%;width:0;height:0}
.rally-pending .serve-still,.rally-live .serve-still{display:none}
.rally-live.rally-off .serve-still{display:block}

.rally-control{display:flex;align-items:center;gap:16px;visibility:hidden}
.rally-pending .rally-control,.rally-live .rally-control{visibility:visible}
.rally-live.rally-off .rally-control{visibility:hidden}
.rally-still .rally-control{display:none} /* no rally to invite anyone to play */
.rally-instruction{text-transform:uppercase;letter-spacing:.19em}
.rally-meter{position:relative;width:88px;height:1px;background:#ffffff29;overflow:hidden}
.rally-meter i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left center}

/* Where the final shuttle comes to rest: just after "Golden.", so it follows the real line length. */
.rally-rest{display:inline-block;position:relative;width:0;height:0;vertical-align:.3em;left:calc(min(1280px,100vw - 112px) * .34)}

/* Rally layer ------------------------------------------------------------------------------
   Fixed, decorative and inert. It sits above section backgrounds but below the header (30),
   WhatsApp button (25), mobile actions (35), consent banner (45) and dialogs (top layer). */
.site-rally-layer{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity .5s ease}
.rally-live .site-rally-layer{opacity:1}
.rally-live.rally-paused .site-rally-layer,.rally-live.rally-resizing .site-rally-layer{opacity:0;transition-duration:.18s}
.rally-off .site-rally-layer,.rally-still .site-rally-layer{display:none}
.rally-defs{position:absolute;width:0;height:0;overflow:hidden}

.rally-racket,.rally-shuttle,.rally-contact,.rally-trail{position:absolute;left:0;top:0;will-change:transform}
/* Racket artwork: swap the <use> for an <img> of the same proportions and update ART.racket in rally.js. */
.rally-racket{overflow:visible;filter:drop-shadow(0 0 10px #081d1124)}
.rally-shuttle{width:0;height:0;transform-origin:0 0;will-change:transform,opacity}
.rally-shuttle img{position:absolute;left:0;top:0;max-width:none;filter:drop-shadow(0 3px 5px #081d1130)}
.rally-contact{width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle,#f6eabeb3 0,#d4af3747 32%,#d4af3700 68%);opacity:0;will-change:transform,opacity}
.rally-trail{width:0;height:0;transform-origin:0 0;opacity:0}
.rally-trail::before{content:"";position:absolute;right:calc(var(--rally-shuttle,60px) * .92);top:-1px;width:calc(var(--rally-shuttle,60px) * 1.6);height:2px;border-radius:2px;background:linear-gradient(90deg,#ead99c00,#ead99cb3)}

/* Opaque cards sit in front of the layer, so any shuttle that strays passes behind them. */
.rally-live .programme,.rally-live .facility-image{position:relative;z-index:21}

@media(min-width:1500px){.serve-stage{height:395px}}
@media(max-width:1150px){.serve-stage{height:330px}.serve-still{width:360px}.rally-rest{left:calc((100vw - 64px) * .34)}}
@media(max-width:980px){.serve-stage{height:280px}.serve-still{width:300px}}
@media(max-width:700px){
  .hero-identity{flex-direction:row-reverse;justify-content:space-between}
  .serve-stage{height:124px;flex:0 0 104px}
  .serve-still{width:100px;filter:none}
  .serve-mark{left:46%;top:42%}
  .rally-meter{width:48px}
  .rally-rest{left:.26em}
}
@media(prefers-reduced-motion:reduce){
  .site-rally-layer,.rally-control{display:none}
}