@font-face{font-family:Kufam;src:url('assets/fonts/Kufam-Variable.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#032810;color:#fffaf3;font-family:Kufam,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #f4b335;outline-offset:5px}#gateway{height:100svh;min-height:620px;position:relative;overflow:hidden;isolation:isolate}#city{position:absolute;width:1672px;height:941px;left:0;top:0;transform-origin:0 0;direction:ltr}#city>img{width:100%;height:100%;display:block}#city .stadium-area{position:absolute;z-index:1;transition:background .3s;border-radius:50%}.stadium-area:hover,.stadium-area:focus-visible{background:#f4b33514;outline:1px solid #f4b33580}.alinma{left:29%;top:19%;width:43%;height:26%}.alfaisal{left:74%;top:26%;width:25%;height:22%}.pin{position:absolute;display:flex;align-items:center;gap:10px;z-index:2;transform:translate(-50%,-50%);direction:rtl}.pin-alinma{left:51%;top:46%}.pin-alfaisal{left:87%;top:50%}.pin-point{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#032810e8;border:1px solid #fff8;font-size:13px;box-shadow:0 4px 24px #0005;transition:.25s}.pin-text{padding:12px 17px;background:#032810e8;border:1px solid #fff3;font-size:16px;line-height:1.7;white-space:nowrap;backdrop-filter:blur(8px)}.pin-text small{display:block;font-size:12px;color:#b8dd9e}.pin:hover .pin-point,.pin:focus-visible .pin-point{background:#f4b335;color:#032810}.atmosphere{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#001b12a8,transparent 20%,transparent 65%,#02180ff2),linear-gradient(90deg,#03170f50,transparent 40%);z-index:2}header{position:absolute;inset:28px 4% auto;display:flex;align-items:center;gap:22px;z-index:4}.brand{background:#fffaf3;padding:7px 14px;box-shadow:0 3px 20px #0002}.brand img{display:block;width:125px;height:62px;object-fit:contain}.credit{font-size:14px;line-height:1.8}.credit small{display:block;color:#d6e2cd;font-size:12px}header>button{margin-right:auto;border:0;border-bottom:1px solid #fff8;padding:12px 4px;background:transparent;font-size:14px}.hero-copy{position:absolute;left:12%;top:15%;z-index:3;text-align:left;pointer-events:none;text-shadow:0 2px 22px #00241480}.hero-copy p{font-size:14px}.hero-copy p span{color:#f4b335;margin:0 12px}.hero-copy h1{font-size:clamp(35px,3.7vw,62px);font-weight:550;line-height:1.38;letter-spacing:-.035em;margin:12px 0}footer{position:absolute;bottom:30px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;z-index:4}footer>p{font-size:14px;line-height:2;margin:0}footer strong{font-weight:450;color:#d3dec6}footer nav{display:flex;border:1px solid #fff4;background:#032810b8;backdrop-filter:blur(12px)}footer nav a{padding:19px 24px;display:flex;align-items:center;gap:14px;font-size:14px}footer nav a+a{border-right:1px solid #fff4}footer nav a:hover{background:#04774d}footer small{font-size:12px;color:#f4b335}.city-caption{font-size:12px;color:#d3dec6}#tour-room{position:fixed;inset:0;z-index:20;background:#032810}#tour-room[hidden]{display:none}.return-bar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 28px;border-bottom:1px solid #ffffff35;background:#032810;position:relative;z-index:3}.return-bar button{border:1px solid #fff7;background:transparent;font-size:14px;padding:10px 17px}.return-bar p{font-size:14px}.return-bar a{font-size:13px;border-bottom:1px solid #f4b335;padding:8px}#tour-frame{width:100%;height:calc(100% - 64px);display:block;border:0;background:#032810}#tour-loading{position:absolute;inset:64px 0 0;display:grid;place-items:center;background:#032810;color:#fffaf3;z-index:2;font-size:18px;pointer-events:none}#tour-loading[hidden]{display:none}dialog{max-width:600px;width:92vw;background:#032810;color:#fffaf3;border:1px solid #fff5;padding:55px 38px 35px;font-family:inherit;line-height:2;font-size:15px}dialog::backdrop{background:#00160ce6;backdrop-filter:blur(8px)}dialog h2{font-size:32px;line-height:1.5}dialog button{position:absolute;top:12px;left:14px;width:40px;height:40px;border:1px solid #fff5;background:none;font-size:24px}dialog a{display:inline-block;border-bottom:1px solid #f4b335}.entering #city{filter:brightness(.55);transition:filter .35s}.entering footer,.entering .hero-copy{opacity:0;transition:opacity .25s}
@media(max-width:760px){#gateway{min-height:640px}header{inset:20px 20px auto;gap:13px}.brand{padding:5px 9px}.brand img{width:94px;height:48px}.credit{font-size:12px}.credit small{font-size:10px}header>button{font-size:12px}.hero-copy{top:16%;left:24px;right:24px;text-align:right}.hero-copy h1{font-size:37px}.hero-copy p{font-size:12px;margin:0}.hero-copy h1{margin:8px 0}.pin-text{font-size:18px;padding:10px}.pin-text small{font-size:15px}.pin-point{width:50px;height:50px;font-size:18px}.atmosphere{background:linear-gradient(180deg,#032810 0%,#03281000 40%,#03281000 64%,#032810 85%)}footer{left:20px;right:20px;bottom:25px;display:block}footer>p{font-size:13px;margin-bottom:16px}footer>p br{display:none}footer strong{margin-right:8px}footer nav{display:grid;background:#032810eb}footer nav a{padding:15px 17px;font-size:13px}footer nav a+a{border-right:0;border-top:1px solid #fff4}footer nav a span{margin-right:auto}.city-caption{display:none}.return-bar{padding:8px 12px;gap:10px}.return-bar button{font-size:12px;padding:9px 11px}.return-bar p{display:none}.return-bar a{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.pin-text{display:none}.pin-point{width:155px;height:155px;font-size:52px;border-width:3px}#city{mask-image:linear-gradient(180deg,transparent,#000 8%,#000 91%,transparent)}.pin-alfaisal{left:86%}footer>p{line-height:1.8}}

@media(max-width:760px){#gateway:before{content:"";position:absolute;inset:0;background:linear-gradient(#03281099,#032810dd),url('assets/scenes/jeddah-gateway.webp') center/cover;filter:blur(4px);z-index:-1}.pin-point{width:190px;height:190px}.credit small{font-size:12px}.return-bar a,.return-bar button,footer nav a{font-size:14px}}
/* The city stays on screen throughout the approach; the full microsite is revealed at arrival. */
[hidden]{display:none!important}
body{overflow:hidden}
#tour-room{opacity:0;pointer-events:none;transition:opacity .85s ease;}
.revealing #tour-room,.inside-site #tour-room{opacity:1;pointer-events:auto}
.inside-site #gateway{visibility:hidden}
.approaching #city,.returning #city{will-change:transform;filter:none}
.approaching #gateway>header,.approaching .hero-copy,.approaching #gateway>footer,.approaching .pin,.approaching .stadium-area,.returning .pin,.returning #gateway>header,.returning .hero-copy,.returning #gateway>footer{opacity:0;pointer-events:none;transition:opacity .35s}
.approaching .atmosphere{opacity:.2;transition:opacity 1.6s}
#journey-controls{position:fixed;inset:auto 4% 30px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;text-shadow:0 2px 15px #00160c}
#journey-controls p{font-size:clamp(20px,3vw,34px);margin:0}
#journey-controls button{font-size:14px;background:#032810cf;border:1px solid #fff7;padding:12px 18px}
.return-bar #site-home{margin-inline-start:auto}
@media(max-width:760px){.approaching #city,.returning #city{mask-image:none}#journey-controls{inset:auto 20px 25px;align-items:flex-start;flex-direction:column}.return-bar{gap:8px;padding-inline:10px}.return-bar a,.return-bar button{font-size:12px}.return-bar button{padding-inline:8px}}

.approaching #gateway>header,.approaching .hero-copy,.approaching #gateway>footer,.approaching .pin{opacity:1}.approaching .atmosphere{opacity:1}#journey-controls{display:none!important}
/* English interface and a clear mark directly on the scene. */
.brand{position:relative;background:none;padding:0;box-shadow:none;width:112px;flex:none}
.brand img{width:112px;height:78px;filter:brightness(0) invert(1)}
header>button{margin-right:0;margin-left:auto}.pin{direction:ltr}.pin-text{font-size:17px}.pin-alfaisal{transform:translate(-82%,-50%)}
.hero-copy{left:5%;top:19%;text-align:left}.hero-copy h1{font-size:clamp(42px,4.6vw,72px);line-height:1.12;font-weight:600;letter-spacing:-.045em}.hero-copy p{font-size:13px;letter-spacing:.08em}
footer nav a+a{border-right:0;border-left:1px solid #fff4}.city-caption{max-width:150px;font-size:12px;line-height:1.8;text-align:right}
body[data-venue=alfaisal] #tour-room,body[data-venue=alfaisal] .return-bar{background:#003d3b}body[data-venue=alfaisal] .return-bar a{border-color:#aee9c5}
@media(max-width:760px){.brand,.brand img{width:84px}.brand img{height:59px}.credit{font-size:12px}.credit small{max-width:130px;font-size:12px;line-height:1.5}.hero-copy{left:24px;top:19%;text-align:left}.hero-copy h1{font-size:43px}.hero-copy p{font-size:12px}footer nav a+a{border-left:0}footer nav a span{margin-left:auto;margin-right:0}footer strong{margin-right:0;margin-left:6px}.pin-alfaisal{transform:translate(-50%,-50%)}.return-bar #show-collection{margin-left:auto}.return-bar #site-home{margin-inline-start:0}header>button{font-size:12px}}
/* Full-motion arrival footage, followed by a match-frame handoff to the full site. */
#arrival-layer{position:fixed;z-index:40;overflow:hidden;background:#032810;pointer-events:none;will-change:left,top,width,height}
#arrival-video{display:block;width:100%;height:100%;object-fit:cover}
#journey-controls:not([hidden]){display:flex!important;z-index:50;inset:auto 4% 30px;background:none}
#journey-controls small{font-size:12px;letter-spacing:.13em;color:#bde0a7;display:block;margin-bottom:12px}
#journey-controls p{font-size:clamp(18px,2.1vw,30px);line-height:1.5}
.arrival-actions{display:flex;gap:10px}.arrival-actions button{backdrop-filter:blur(12px)}
.arrival-track{position:fixed;bottom:0;left:0;width:100%;height:3px;background:#fff3}.arrival-track span{display:block;height:100%;background:#f4b335;transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
.cinema-playing #gateway>header,.cinema-playing .hero-copy,.cinema-playing #gateway>footer,.cinema-playing .pin{opacity:0;pointer-events:none}
.cinema-playing #gateway{background:#032810}.cinema-playing #city,.cinema-playing .atmosphere{visibility:hidden}
.cinema-landing #tour-room{transition:none;opacity:1;pointer-events:none}
#replay-arrival{font-size:12px;border:0;border-bottom:1px solid #ffffff70;background:none;padding:8px 0;margin-left:auto}
.return-bar #site-home{margin-inline-start:0}
#arrival-status{position:absolute;z-index:10;top:64px;left:0;right:0;margin:0;padding:12px 20px;background:#fffaf3;color:#032810;font-size:13px;line-height:1.6}
.story-mode #tour-frame{height:100%;position:absolute;inset:0}
.story-mode .return-bar{position:absolute;inset:0 0 auto;background:linear-gradient(#032810e6,#0328108c);backdrop-filter:blur(10px);transition:opacity .85s ease;z-index:4}
body[data-venue=alfaisal].story-mode .return-bar{background:linear-gradient(#002f30e6,#002f308c)}
.story-mode:not(.site-interface-ready) .return-bar{opacity:0;pointer-events:none}
.story-mode.site-interface-ready .return-bar{opacity:1;pointer-events:auto}
@media(max-width:760px){#journey-controls:not([hidden]){inset:auto 20px 25px;gap:20px}#journey-controls p{font-size:20px}#journey-controls small{font-size:11px}.arrival-actions button{font-size:13px!important;padding:10px 14px!important}.return-bar #replay-arrival{font-size:11px;white-space:nowrap;margin-left:auto}.return-bar #show-collection{font-size:11px;margin-left:0}.return-bar #return-city{font-size:11px}.arrival-track{height:3px}}