@font-face{font-family:"Old London";src:url("../fonts/OldLondon-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Catalpa ExtraBold";src:url("../fonts/Catalpa-ExtraBold.woff") format("woff");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"ITC Avant Garde Gothic Pro Bold";src:url("../fonts/ITCAvantGardeGothicPro-Bold.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}

:root{--navy:#020125;--purple:#C86DD1;--lilac:#EAB7F8;--blue:#3A6CEA;--outline:#2969DF;--shadow:#030E24;--cream:#FDF1E2;--font-blackletter:"Old London",Georgia,serif;--font-body:"ITC Avant Garde Gothic Pro Bold","Century Gothic",Arial,sans-serif;--font-display:"Catalpa ExtraBold","Arial Black",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{min-width:280px;background:var(--navy)}
body{container-type:inline-size;margin:0;background:var(--navy);color:var(--lilac);font-family:var(--font-body);font-weight:700;-webkit-font-smoothing:antialiased;line-height:1.5;text-align:center}
h1,h2,p{margin:0}h1,h2{text-transform:uppercase}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--cream);outline-offset:6px}
#event-title:focus{outline:none}
::selection{color:var(--navy);background:var(--lilac)}
[hidden]{display:none!important}
.sr-only,.lockup-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:15px;left:15px;z-index:20;padding:10px 18px;background:var(--lilac);color:var(--navy);transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
#site-shell{position:relative;isolation:isolate;opacity:1;transition:opacity .65s ease}
html[data-experience="loading"] #site-shell,html[data-experience="intro"] #site-shell{opacity:0}
.launch-page{position:relative;width:100%;overflow:hidden}

/* Source artboard: 3840 × 3789. Layers retain their original registration.
   The video window ends at source y=859; the FULL 16:9 film is top-aligned
   inside it. Overflow hides its bottom 60.2%, without stretching the film. */
.scene{position:absolute;inset:0 0 auto;z-index:-1;width:100%;height:98.671875cqw;pointer-events:none;overflow:hidden}
.scene-canvas{position:relative;width:100%;aspect-ratio:3840/3789}
.scene img{display:block;height:auto}
.scene-base,.scene-veil{position:absolute;top:0;left:0;width:100%}
.scene-base{z-index:0}.scene-veil{z-index:3}
.video-window{position:absolute;top:0;left:0;width:100%;height:22.6708894167%;overflow:hidden;z-index:1;opacity:0;transition:opacity .35s ease}
.background-ready .video-window{opacity:1}
.video-window video{position:absolute;display:block;left:0;top:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center top;max-width:none;pointer-events:none}
.scene-portrait{position:absolute;z-index:2;left:32.734375%;top:.02639219%;width:38.515625%}
.scene-brand{position:absolute;z-index:4;left:44.4010416667%;top:1.0292953286%;width:11.1979166667%}
.scene-brand img{width:100%}.brand-fallback{font-size:clamp(10px,1cqw,20px);color:white;line-height:1.2}
.hero{position:relative;width:100%;height:73.73046875cqw}
.lockup{position:absolute;z-index:2;line-height:1}
.lockup img{display:block;width:100%;height:auto}
.event-title{left:7.9947916667%;top:26.171875cqw;width:83.984375%;white-space:nowrap}
.kickoff-heading{left:31.6145833333%;top:37.4739583333cqw;width:36.7708333333%}
.artist-lockup{left:22.2395833333%;top:58.59375cqw;width:55.8854166667%}
.pregame-heading{left:31.4583333333%;top:70.546875cqw;width:37.0833333333%}
.signup-area{position:absolute;z-index:3;left:40.91796875%;top:46.58203125cqw;width:18.212890625%;height:3.41796875cqw}
.signup-button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:.146484375cqw solid var(--purple);border-radius:.146484375cqw;background:var(--navy);color:var(--purple);font-family:var(--font-body);font-size:1.07421875cqw;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;box-shadow:0 .244140625cqw 0 .244140625cqw var(--shadow);transition:background .15s ease,color .15s ease}
.signup-button::after{content:"";position:absolute;inset:-5px 0;min-height:44px}
.signup-button:hover{background:var(--purple);color:var(--navy)}
.signup-button:active{background:var(--lilac);color:var(--navy)}
.signup-note,.no-script{margin-top:16px;font-size:12px;line-height:1.6;background:var(--navy);color:var(--lilac);padding:12px}
.event-details{position:relative;width:100%;height:19.04296875cqw}
.event-detail{position:absolute;top:5.46875cqw;width:43%}
[data-event="cape-town"]{left:9.1640625%}
[data-event="johannesburg"]{left:49.251953125%}
.event-city{font-size:3.90625cqw;font-weight:700;line-height:1;white-space:nowrap;color:var(--lilac);-webkit-text-stroke:.1953125cqw var(--purple);paint-order:stroke fill;text-shadow:0 .29296875cqw 0 var(--shadow),.09765625cqw .1953125cqw 0 var(--shadow),-.09765625cqw .1953125cqw 0 var(--shadow)}
.event-facts{width:100%;margin-top:1.787109375cqw;font-size:1.7578125cqw;line-height:1.013888889;color:var(--blue);text-shadow:0 .244140625cqw 0 var(--shadow),.146484375cqw .146484375cqw 0 var(--shadow),-.146484375cqw .146484375cqw 0 var(--shadow)}
[data-event="cape-town"] .event-facts{padding-left:1.5625cqw}
.event-date{display:block}.event-venue{white-space:pre-line}
.launch-footer{height:5.8984375cqw;position:relative;display:flex;align-items:flex-start;justify-content:center}
#footer-logo{display:block;position:relative;top:-.0911458333cqw;width:4.3229166667cqw;height:auto}
#footer-fallback{font-size:14px;color:white;padding:12px}

/* Controls live outside the decorative crop and remain usable by keyboard. */
.motion-control{position:absolute;z-index:5;top:16px;right:20px;display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 13px;background:rgba(2,1,37,.86);color:var(--lilac);border:1px solid rgba(234,183,248,.65);border-radius:2px;font-size:10px;letter-spacing:.04em;line-height:1.2}
.motion-control:hover{background:var(--navy);border-color:var(--lilac)}
.motion-icon{width:10px;height:11px;display:block;border-inline:3px solid currentColor}
[data-state="paused"] .motion-icon{height:0;width:0;border:6px solid transparent;border-right:0;border-left:9px solid currentColor}
.reveal-pending{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.65,.25,1)}
.is-revealed{opacity:1;translate:0 0}
[data-event="johannesburg"].reveal-pending{transition-delay:90ms}

/* Opening film is full-frame; only the background presentation is cropped. */
#intro-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--navy);color:var(--lilac);overflow:hidden;opacity:1;transition:opacity .35s ease}
#intro-dialog::backdrop{background:var(--navy)}
#intro-dialog.is-leaving{opacity:0;pointer-events:none}
#intro-dialog video{display:block;width:100%;height:100%;object-fit:contain;background:var(--navy)}
.intro-controls{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:0;right:0;display:flex;align-items:center;justify-content:center;gap:14px;padding-inline:20px}
.intro-controls button{min-height:48px;border:1px solid var(--purple);border-radius:2px;background:rgba(2,1,37,.94);color:var(--lilac);padding:13px 22px;font-size:12px;letter-spacing:.035em;box-shadow:0 3px 0 2px var(--shadow)}
.intro-controls button:hover{background:var(--purple);color:var(--navy)}
#intro-status{position:absolute;bottom:98px;left:20px;right:20px;margin:0 auto;width:fit-content;max-width:440px;background:var(--navy);color:var(--lilac);font-size:13px;line-height:1.5;padding:8px 14px}
#intro-status:empty{display:none}
body.intro-open,body.dialog-open{overflow:hidden}

#signup-dialog{width:calc(100% - 40px);max-width:460px;margin:auto;padding:38px 28px 30px;color:var(--lilac);background:var(--navy);border:2px solid var(--purple);text-align:center;box-shadow:0 24px 70px rgba(3,14,36,.6)}
#signup-dialog::backdrop{background:rgba(2,1,37,.85);backdrop-filter:blur(6px)}
.dialog-kicker{font-size:10px;letter-spacing:.1em;color:var(--purple)}
#signup-dialog h2{font-family:var(--font-display);font-size:30px;line-height:1.15;white-space:pre-line;margin-top:24px;color:var(--lilac)}
#signup-dialog-body{font-size:14px;line-height:1.7;margin:24px auto 28px;max-width:330px}
#close-dialog{border:2px solid var(--purple);background:var(--navy);color:var(--lilac);padding:13px 30px;min-width:140px;min-height:48px;font-size:12px;letter-spacing:.06em;box-shadow:0 4px 0 2px var(--shadow)}

/* Recompose the portrait on phones, retaining the WHOLE single-line title.
   A centred virtual artboard keeps the video/portrait registration unchanged. */
@media(max-width:1100px){
  #site-shell{--portrait-height:clamp(300px,72cqw,610px)}
  .scene{height:var(--portrait-height);mask-image:linear-gradient(#000 76%,transparent 100%)}
  .scene-canvas{width:calc(var(--portrait-height) * 3.7245392823);position:absolute;left:50%;top:0;transform:translateX(-50%)}
  .hero{height:auto;padding-top:calc(var(--portrait-height) - 32px)}
  .lockup{position:relative;left:auto;top:auto;margin-inline:auto}
  .event-title{width:96%;max-width:950px;white-space:nowrap}
  .kickoff-heading{width:min(88%,650px);margin-top:18px}
  .signup-area{position:relative;left:auto;top:auto;width:min(82%,340px);height:auto;margin:27px auto 0}
  .signup-button{min-height:60px;padding:16px 12px;border-width:2px;border-radius:2px;font-size:clamp(13px,3.3cqw,17px);box-shadow:0 6px 0 4px var(--shadow)}
  .artist{margin:55px auto 0;max-width:920px}
  .artist-lockup{width:96%}
  .pregame-heading{width:auto;max-width:32ch;margin:20px auto 0;padding-inline:18px}
  .pregame-heading img{display:none}
  .pregame-heading .lockup-copy{position:static;display:block;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;font-size:clamp(19px,3.2cqw,25px);line-height:1.3;color:var(--blue);text-wrap:balance}
  .event-details{height:auto;display:grid;grid-template-columns:1fr;gap:46px;padding:58px 18px 54px;background:linear-gradient(rgba(2,1,37,.68),var(--navy)),url("../assets/launch/layers/scene-veil.webp") center bottom/auto 150% no-repeat}
  .event-detail{position:static;width:100%}
  .event-city{font-size:clamp(27px,6.7cqw,50px);line-height:1.2;-webkit-text-stroke:1.5px var(--purple);text-shadow:0 4px 0 var(--shadow),1px 2px 0 var(--shadow),-1px 2px 0 var(--shadow)}
  .event-facts{font-size:clamp(19px,4cqw,25px);line-height:1.25;margin-top:21px;text-shadow:0 3px 0 var(--shadow)}
  [data-event="cape-town"] .event-facts{padding-left:0}
  .launch-footer{height:auto;padding:0 0 28px}
  #footer-logo{top:auto;width:76px}
  .motion-control{top:10px;right:10px;padding:8px 10px;font-size:9px}
  [data-event="johannesburg"].reveal-pending{transition-delay:0ms}
}

/* A missing lettering image still leaves legible semantic content. */
@media(max-width:480px){
  .motion-control{justify-content:center;min-width:44px;width:44px;padding:10px;gap:0}
  .motion-control [data-motion-label]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
.lockup.art-failed img{display:none}
.lockup.art-failed .lockup-copy{position:static;display:block;width:auto;height:auto;clip:auto;margin:0;overflow:visible;white-space:pre-line;line-height:1.15}
.event-title.art-failed .lockup-copy{font-family:var(--font-blackletter);font-weight:400;font-size:8.7cqw;white-space:nowrap;color:var(--purple);text-shadow:0 4px 0 var(--shadow)}
.kickoff-heading.art-failed .lockup-copy{font-family:var(--font-display);font-size:2.8cqw;color:var(--lilac)}
.artist-lockup.art-failed .lockup-copy{font-family:var(--font-display);font-size:7cqw;color:var(--purple)}
.pregame-heading.art-failed .lockup-copy{font-size:1.8cqw;color:var(--blue)}
@media(max-width:1100px){.event-title.art-failed .lockup-copy{font-size:10cqw}.kickoff-heading.art-failed .lockup-copy{font-size:clamp(23px,5.5cqw,44px)}.pregame-heading.art-failed .lockup-copy{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1;translate:none}}
@media(forced-colors:active){
  .scene,.lockup img{display:none}
  .hero{height:auto;padding:40px 20px}
  .lockup{position:relative;left:auto;top:auto;width:100%;margin:24px auto}
  .lockup-copy{position:static;display:block;width:auto;height:auto;clip:auto;margin:0;overflow:visible;white-space:normal}
  .event-title{font-family:var(--font-blackletter);font-size:9cqw;line-height:1.2;white-space:nowrap}
  .kickoff-heading{font-size:26px;white-space:pre-line}
  .signup-area{position:relative;left:auto;top:auto;width:300px;max-width:100%;height:60px;margin:32px auto 50px}
  .signup-button{border:2px solid ButtonText;box-shadow:none;font-size:15px}
  .artist-lockup{font-size:42px}.pregame-heading{font-size:19px}
  .event-city,.event-facts{-webkit-text-stroke:0;text-shadow:none}
}