/* Forward opening: the play glyph becomes the X Games mark. */
#site-intro {
  --intro-ready:1;
  --intro-accent:var(--lime,#b6f3cf);
  --intro-rgb:var(--xg-accent-rgb,182,243,207);
  --intro-symbol:176px;
  --intro-type:76px;
  --intro-word-width:300px;
  --intro-gap:12px;
  position:fixed;inset:0;margin:0;padding:0;
  width:100%;height:100%;height:100dvh;
  max-width:none;max-height:none;min-width:0;
  border:0;border-radius:0;background:transparent;
  color:var(--intro-accent);box-shadow:none;
  overflow:hidden;overscroll-behavior:none;touch-action:none;
  isolation:isolate;
  font-family:var(--font,system-ui,sans-serif);
}
#site-intro:not([open]) {display:none}
#site-intro[open] {display:block}
#site-intro::backdrop {background:transparent;backdrop-filter:none}
#site-intro * {box-sizing:border-box}
#site-intro .intro-backdrop {
  position:absolute;inset:0;z-index:-1;opacity:1;
  background:radial-gradient(ellipse at 50% 45%,rgba(var(--intro-rgb),.075),transparent 48%),
    radial-gradient(ellipse at 50% 100%,rgba(var(--intro-rgb),.035),transparent 65%),#070d0b;
  transition:opacity .48s ease;
}
#site-intro .intro-backdrop::after {
  content:'';position:absolute;inset:18px;border:1px solid rgba(var(--intro-rgb),.075);
  border-radius:18px;pointer-events:none;
}
#site-intro .intro-skip {
  position:absolute;right:max(27px,env(safe-area-inset-right));
  top:calc(20px + env(safe-area-inset-top));z-index:4;
  min-height:44px;min-width:100px;padding:10px 15px;
  color:#b0c4b7;border:1px solid #b6f3cf24;border-radius:10px;
  background:#ffffff03;font:inherit;font-size:11px;line-height:1.4;
  cursor:pointer;touch-action:manipulation;
  transition:color .15s,border-color .15s,background .15s,opacity .2s;
}
#site-intro .intro-skip:hover {color:#f0f8f2;border-color:rgba(var(--intro-rgb),.45);background:rgba(var(--intro-rgb),.07)}
#site-intro .intro-skip:focus-visible,#site-intro .intro-play:focus-visible {
  outline:2px solid var(--intro-accent);outline-offset:8px;
}
#site-intro .intro-scene {
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(540px,calc(100% - 32px));height:330px;
  perspective:900px;
}
#site-intro .intro-lockup {
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:max-content;max-width:100%;height:var(--intro-symbol);
  display:flex;align-items:center;justify-content:center;
  gap:0;transform-origin:center;will-change:transform,opacity;
}
#site-intro .intro-play {
  display:block;flex:none;position:relative;
  width:var(--intro-symbol);height:var(--intro-symbol);min-height:44px;
  margin:0;padding:0;border:0;border-radius:22px;
  color:var(--intro-accent);background:none;box-shadow:none;
  cursor:pointer;touch-action:manipulation;
  transform:scale(1);transition:transform .18s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
}
#site-intro .intro-play::before {
  content:'';position:absolute;inset:19%;z-index:-1;
  border-radius:50%;background:rgba(var(--intro-rgb),.05);
  box-shadow:0 0 70px 32px rgba(var(--intro-rgb),.025);
  opacity:.65;transition:opacity .25s;
}
#site-intro .intro-emblem {
  display:block;width:100%;height:100%;overflow:visible;
  fill:none;stroke:none;color:inherit;
}
#site-intro #intro-shape {fill:currentColor;stroke:none}
#site-intro .intro-punch {opacity:0;transition:opacity .32s ease .19s}
#site-intro .intro-facets {opacity:0;transition:opacity .38s ease .22s}
#site-intro .intro-facets path {stroke-linecap:butt;stroke-linejoin:miter}
#site-intro .intro-word {
  display:block;flex:none;width:max-content;max-width:0;
  overflow:hidden;opacity:0;white-space:nowrap;
  font-family:var(--display,system-ui,sans-serif);font-size:var(--intro-type);
  font-weight:850;line-height:1.15;letter-spacing:-4px;color:#f0f7ef;
  transform:translateY(9px);
  transition:max-width .32s cubic-bezier(.2,.8,.2,1),opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1),margin-left .32s;
}
#site-intro .intro-word>span {color:var(--intro-accent)}
#site-intro .intro-orbit {
  position:absolute;left:50%;top:50%;width:306px;height:306px;
  border:1px solid rgba(var(--intro-rgb),.09);border-radius:50%;
  transform:translate(-50%,-50%) rotate(-28deg);opacity:0;
  animation:xg-intro-orbit 2.7s cubic-bezier(.16,.75,.2,1) both;
  pointer-events:none;
}
#site-intro .intro-orbit::before {
  content:'';position:absolute;inset:-15px;border:1px solid rgba(var(--intro-rgb),.045);border-radius:50%;
}
#site-intro .intro-orbit::after {
  content:'';position:absolute;width:4px;height:4px;left:44px;top:42px;
  background:var(--intro-accent);border-radius:50%;opacity:.55;
  box-shadow:0 0 10px rgba(var(--intro-rgb),.35);
}
#site-intro .intro-cursor {
  position:absolute;left:calc(50% - 4px);top:calc(50% - 2px);
  z-index:3;display:block;width:34px;height:41px;overflow:visible;
  fill:#f4faf5;stroke:#07110c;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translate(100px,95px) rotate(-8deg);
  transform-origin:4px 2px;pointer-events:none;
  transition:opacity .16s ease,transform .18s ease;
}
#site-intro .intro-ripple {
  position:absolute;left:50%;top:50%;width:126px;height:126px;
  border:1px solid rgba(var(--intro-rgb),.5);border-radius:50%;
  opacity:0;transform:translate(-50%,-50%) scale(.3);
  pointer-events:none;
}
#site-intro .intro-caption {
  position:absolute;top:calc(50% + 134px);left:24px;right:24px;
  text-align:center;pointer-events:none;
  transition:opacity .22s ease,transform .3s ease;
}
#site-intro .intro-caption p {
  margin:0;color:#dce9df;font-size:13px;font-weight:500;line-height:1.7;letter-spacing:.2px;
}
#site-intro .intro-caption>span {
  display:block;margin-top:11px;color:#7b9384;font-size:7px;font-weight:600;
  line-height:1.6;letter-spacing:2.5px;
}
#site-intro[data-phase=ready] .intro-play {animation:xg-intro-play-in .42s cubic-bezier(.14,.8,.2,1) both}
#site-intro[data-phase=cursor] .intro-cursor {opacity:1;animation:xg-intro-pointer .46s cubic-bezier(.2,.85,.3,1) both}
#site-intro[data-phase=pressed] .intro-cursor {opacity:1;transform:translate(0,0) scale(.9)}
#site-intro[data-phase=pressed] .intro-play {transform:scale(.9)}
#site-intro:is([data-phase=pressed],[data-phase=morph]) .intro-ripple {animation:xg-intro-click .7s cubic-bezier(.15,.75,.2,1) both}
#site-intro:is([data-phase=morph],[data-phase=wordmark],[data-phase=leaving]) .intro-punch,
#site-intro:is([data-phase=morph],[data-phase=wordmark],[data-phase=leaving]) .intro-facets {opacity:1}
#site-intro:is([data-phase=morph],[data-phase=wordmark],[data-phase=leaving]) .intro-cursor {opacity:0;transform:translate(15px,17px) scale(.96)}
#site-intro:is([data-phase=wordmark],[data-phase=leaving]) .intro-word {
  max-width:var(--intro-word-width);margin-left:var(--intro-gap);opacity:1;transform:translateY(0);
}
#site-intro[data-phase=wordmark] .intro-play::before {opacity:0}
#site-intro[data-phase=leaving] .intro-backdrop {opacity:0}
#site-intro[data-phase=leaving] .intro-caption {opacity:0;transform:translateY(-7px)}
#site-intro[data-phase=leaving] .intro-orbit,
#site-intro[data-phase=leaving] .intro-ripple,
#site-intro[data-phase=leaving] .intro-skip {opacity:0;visibility:hidden;transition:opacity .16s}

@keyframes xg-intro-play-in {from{opacity:0;transform:scale(.76) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes xg-intro-pointer {from{opacity:0;transform:translate(100px,95px) rotate(-8deg)}20%{opacity:1}to{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes xg-intro-click {0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:.65}to{opacity:0;transform:translate(-50%,-50%) scale(1.75)}}
@keyframes xg-intro-orbit {0%{opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(-28deg)}24%{opacity:1}72%{opacity:.6}100%{opacity:0;transform:translate(-50%,-50%) scale(1.13) rotate(25deg)}}

#intro-replay {
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:8px 12px;border:1px solid #a6efc126;border-radius:8px;
  font:inherit;font-size:10px;line-height:1.5;color:#b4c8bc;background:#ffffff03;
  cursor:pointer;touch-action:manipulation;
}
#intro-replay:hover {color:var(--lime,#b6f3cf);border-color:var(--lime,#b6f3cf);background:#ffffff07}
#intro-replay:focus-visible {outline:2px solid var(--lime,#b6f3cf);outline-offset:4px}
#intro-replay[hidden] {display:none!important}

@media(max-width:600px) {
  #site-intro {--intro-symbol:clamp(105px,35vw,138px);--intro-type:clamp(45px,15vw,60px);--intro-word-width:240px;--intro-gap:8px}
  #site-intro .intro-scene {height:280px}
  #site-intro .intro-word {letter-spacing:-.05em}
  #site-intro .intro-orbit {width:252px;height:252px}
  #site-intro .intro-caption {top:calc(50% + 117px)}
  #site-intro .intro-caption p {font-size:12px}
  #site-intro .intro-caption>span {font-size:6.5px;letter-spacing:2px}
  #site-intro .intro-skip {top:calc(15px + env(safe-area-inset-top));right:max(17px,env(safe-area-inset-right));font-size:10px;min-width:93px}
  #site-intro .intro-backdrop::after {inset:10px;border-radius:14px}
  #site-intro .intro-cursor {width:30px;height:36px}
}
@media(max-width:350px) {
  #site-intro .intro-orbit {width:226px;height:226px}
}
@media(max-height:500px) {
  #site-intro {--intro-symbol:clamp(100px,30vw,120px);--intro-type:clamp(42px,14vw,54px);--intro-word-width:240px}
  #site-intro .intro-scene {height:225px}
  #site-intro .intro-orbit {width:220px;height:220px}
  #site-intro .intro-caption {top:calc(50% + 98px)}
  #site-intro .intro-caption>span {margin-top:4px}
}
@media(prefers-reduced-motion:reduce) {
  #site-intro *,#site-intro *::before,#site-intro *::after {animation:none!important;transition:none!important}
  #site-intro .intro-cursor,#site-intro .intro-ripple,#site-intro .intro-orbit {display:none}
  #site-intro .intro-punch,#site-intro .intro-facets {opacity:1}
  #site-intro .intro-word {max-width:var(--intro-word-width);margin-left:var(--intro-gap);opacity:1;transform:none}
}
html.motion-paused #site-intro *,html.motion-paused #site-intro *::before,html.motion-paused #site-intro *::after {animation:none!important;transition:none!important}
html.motion-paused #site-intro .intro-cursor,html.motion-paused #site-intro .intro-ripple,html.motion-paused #site-intro .intro-orbit {display:none}
#site-intro[data-reduced=true] *,#site-intro[data-reduced=true] *::before,#site-intro[data-reduced=true] *::after {animation:none!important;transition:none!important}
#site-intro[data-reduced=true] .intro-cursor,#site-intro[data-reduced=true] .intro-ripple,#site-intro[data-reduced=true] .intro-orbit {display:none}
#site-intro[data-reduced=true] .intro-punch,#site-intro[data-reduced=true] .intro-facets {opacity:1}
#site-intro[data-reduced=true] .intro-word {max-width:var(--intro-word-width);margin-left:var(--intro-gap);opacity:1;transform:none}