/* Welcome / landing overlay */
/* —— Welcome / landing —— */
/* Must beat .welcome-screen { display:flex } in hosts where [hidden] alone is ignored */
.welcome-screen[hidden],
#welcomeScreen[hidden]{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}

.welcome-screen{
position:fixed;
inset:0;
z-index:8000;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
min-height:100dvh;
padding:0;
overflow:hidden;
	background:
	radial-gradient(ellipse 85% 55% at 50% -18%, rgba(168,205,155,0.15), transparent 52%),
	radial-gradient(ellipse 55% 42% at 100% 58%, rgba(210,195,130,0.08), transparent 48%),
	radial-gradient(ellipse 48% 48% at 0% 82%, rgba(180,140,70,0.065), transparent 46%),
	linear-gradient(168deg,#0a1210 0%,#121f18 38%,#0c1612 100%);
/* Avoid animating filter on the full-screen root — it recomposites the whole layer every frame and competes with canvas/ECharts. */
}

.welcome-screen::before{
content:'';
position:absolute;
inset:-2px;
background:
	repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200,190,120,0.035) 2px, rgba(200,190,120,0.035) 4px),
	repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(200,190,120,0.025) 2px, rgba(200,190,120,0.025) 4px);
pointer-events:none;
animation:welcomeGridDrift 22s linear infinite, welcomeGridTwinkle 14s ease-in-out infinite alternate;
opacity:.42;
}
@keyframes welcomeGridTwinkle{
0%{opacity:.34}
100%{opacity:.5}
}
@keyframes welcomeGridDrift{
to{transform:translate(24px,24px)}
}

.welcome-screen::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(105deg, transparent 40%, rgba(205,195,130,0.05) 50%, transparent 60%);
background-size:200% 100%;
animation:welcomeScan 6s ease-in-out infinite;
pointer-events:none;
}
@keyframes welcomeScan{
0%,100%{background-position:0% 0%}
50%{background-position:100% 0%}
}

.welcome-particles{
position:absolute;
inset:0;
pointer-events:none;
z-index:3;
contain:strict;
}

/* Full-bleed world map — visible but still softer than hero type */
.welcome-map-bg{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(175vw,3000px);
height:min(88vh,1100px);
max-height:96vh;
z-index:2;
pointer-events:none;
opacity:0.64;
filter:blur(0.55px) saturate(0.88) brightness(0.97);
animation:welcomeMapReveal 1.5s cubic-bezier(.15,.85,.2,1) both, welcomeMapFloat 22s ease-in-out 1.5s infinite;
}
@keyframes welcomeMapReveal{
from{opacity:0;transform:translate(-50%,-48%) scale(0.92);filter:blur(12px) saturate(0.88) brightness(0.97)}
to{opacity:0.64;transform:translate(-50%,-50%) scale(1);filter:blur(0.55px) saturate(0.88) brightness(0.97)}
}
@keyframes welcomeMapFloat{
0%,100%{transform:translate(-50%,-50%) rotate(-0.35deg)}
50%{transform:translate(-50%,calc(-50% - 10px)) rotate(0.35deg)}
}

.welcome-map-bg::after{
content:'';
position:absolute;
inset:-4%;
border-radius:50%;
box-shadow:
	0 0 120px rgba(200,190,120,0.1),
	0 0 240px rgba(200,190,120,0.055);
pointer-events:none;
animation:welcomeMapGlow 5s ease-in-out infinite alternate;
z-index:1;
}
@keyframes welcomeMapGlow{
from{opacity:.35}
to{opacity:.75}
}

#welcomeWorldMap{width:100%;height:100%}
/* ECharts canvas ignores parent pointer-events in some engines — keep clicks for CTA */
.welcome-map-bg canvas,
.welcome-map-bg .echarts-for-react,
#welcomeWorldMap{
pointer-events:none !important;
}

/* Vignette: lighter center so map + stars read through; edges still anchored */
.welcome-vignette{
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
background:
	radial-gradient(ellipse 72% 58% at 50% 50%, rgba(5,12,9,0.38) 0%, rgba(5,12,9,0.12) 52%, transparent 74%),
	radial-gradient(ellipse 95% 82% at 50% 50%, transparent 0%, rgba(8,18,12,0.05) 36%, rgba(6,12,9,0.48) 100%),
	linear-gradient(180deg, rgba(10,18,14,0.28) 0%, transparent 18%, transparent 54%, rgba(5,10,8,0.72) 84%, rgba(4,8,6,0.94) 100%);
}

/* SITA mark — top right, above vignette */
.welcome-logo-corner{
position:absolute;
top:clamp(14px,2.8vh,36px);
right:clamp(14px,2.8vw,44px);
z-index:6;
display:flex;
align-items:center;
justify-content:flex-end;
pointer-events:none;
animation:welcomeLogoCornerEnter 1.05s cubic-bezier(.2,.85,.15,1) both;
}
@keyframes welcomeLogoCornerEnter{
from{
	opacity:0;
	transform:translateX(56px) translateY(-12px) scale(0.82) rotate(4deg);
	filter:blur(6px);
}
to{
	opacity:1;
	transform:translateX(0) translateY(0) scale(1) rotate(0);
	filter:blur(0);
}
}

.welcome-logo-corner__float{
animation:welcomeLogoCornerFloat 5.2s ease-in-out 1s infinite;
transform-origin:center right;
}
@keyframes welcomeLogoCornerFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}

.welcome-logo-corner__pulse{
position:relative;
display:inline-block;
}
.welcome-logo-corner__pulse::before{
content:'';
position:absolute;
inset:-6px -4px -6px -10px;
border-radius:999px;
	border:1px solid rgba(205,195,130,0.38);
	box-shadow:0 0 24px rgba(200,190,120,0.14);
animation:welcomeLogoCornerRipple 2.8s ease-out 1.1s infinite;
pointer-events:none;
z-index:0;
}
@keyframes welcomeLogoCornerRipple{
0%{transform:scale(0.92);opacity:0.75}
70%{transform:scale(1.35);opacity:0}
100%{transform:scale(1.35);opacity:0}
}

.welcome-logo-corner__sheen{
position:absolute;
inset:0;
z-index:2;
overflow:hidden;
border-radius:12px;
pointer-events:none;
}
.welcome-logo-corner__sheen::after{
content:'';
position:absolute;
top:-40%;
left:-30%;
width:45%;
height:180%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0.14) 45%,transparent 70%);
transform:skewX(-18deg);
animation:welcomeLogoCornerSheen 4.2s ease-in-out 1.4s infinite;
}
@keyframes welcomeLogoCornerSheen{
0%,12%{transform:skewX(-18deg) translateX(-120%)}
40%,100%{transform:skewX(-18deg) translateX(280%)}
}

.welcome-logo-corner svg{
position:relative;
z-index:1;
width:clamp(160px,22vw,280px);
height:auto;
display:block;
	filter:drop-shadow(0 0 20px rgba(205,195,130,0.48)) drop-shadow(0 0 50px rgba(165,200,155,0.22));
animation:welcomeLogoCornerGlow 3.4s ease-in-out 0.9s infinite;
}
@keyframes welcomeLogoCornerGlow{
0%,100%{filter:drop-shadow(0 0 18px rgba(205,195,130,0.4)) drop-shadow(0 0 44px rgba(165,200,155,0.16))}
50%{filter:drop-shadow(0 0 32px rgba(210,200,135,0.62)) drop-shadow(0 0 72px rgba(168,205,155,0.3))}
}

.welcome-inner{
position:relative;
z-index:5;
isolation:isolate;
pointer-events:auto;
width:100%;
max-width:min(1240px,94vw);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
justify-content:center;
/* Balanced vertical padding — large top padding was pushing the hero block to feel “low” in the viewport */
padding:clamp(40px,8vh,72px) 20px clamp(40px,8vh,80px);
box-sizing:border-box;
/* Optical lift: title + CTA read heavier below; nudge the whole stack slightly above geometric center */
transform:translateY(clamp(-36px,-2.8vh,-6px));
}

.welcome-title{
margin:clamp(6px,1.2vh,16px) 0 clamp(8px,1.5vh,18px);
font-family:var(--font-display);
font-size:clamp(1.9rem,5vw,3.75rem);
font-weight:800;
letter-spacing:.04em;
line-height:1.08;
text-transform:uppercase;
	filter:drop-shadow(0 4px 32px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(168,205,155,0.14));
	background:linear-gradient(102deg,#ffffff 0%,#f0ead8 28%,#9ec9a0 52%,#c8dcb8 72%,#f4f7ee 100%);
background-size:240% auto;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:welcomeTitleShine 7s ease-in-out infinite,welcomeTitleUp .95s var(--ease-out-expo) .18s both;
}
.welcome-title-sub{
display:block;
font-size:0.4em;
letter-spacing:.32em;
font-weight:600;
margin-top:0.42em;
opacity:0.88;
	background:linear-gradient(90deg,rgba(248,244,232,0.96),rgba(168,205,155,0.88),rgba(220,232,200,0.92));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:welcomeTitleSubUp .85s var(--ease-out-expo) .32s both;
}
@keyframes welcomeTitleSubUp{
from{opacity:0;transform:translateY(10px);letter-spacing:.38em}
to{opacity:0.88;transform:translateY(0);letter-spacing:.32em}
}
@keyframes welcomeTitleShine{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes welcomeTitleUp{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}

.welcome-tagline{
margin:0 0 clamp(28px,5vh,48px);
font-size:clamp(15px,2vw,19px);
font-weight:500;
	color:rgba(234,236,218,0.94);
max-width:38em;
line-height:1.7;
letter-spacing:.01em;
text-shadow:0 2px 24px rgba(0,0,0,0.55),0 1px 2px rgba(0,0,0,0.35);
animation:fadeUpTight .75s var(--ease-out-expo) .48s both;
}

.welcome-galaxy-caption{
position:absolute;
left:clamp(14px,3.2vw,40px);
bottom:clamp(12px,2.4vh,28px);
right:auto;
margin:0;
max-width:min(220px,42vw);
z-index:4;
pointer-events:none;
text-align:left;
font-size:clamp(10px,1.25vw,12px);
letter-spacing:0.04em;
line-height:1.45;
	color:rgba(200,195,160,0.42);
text-shadow:0 1px 14px rgba(0,0,0,0.55);
font-weight:500;
animation:fadeUp .75s cubic-bezier(.2,.85,.25,1) .72s both;
}

.welcome-cta{
display:flex;
flex-wrap:wrap;
gap:clamp(18px,2.5vw,32px);
justify-content:center;
width:100%;
}

.welcome-btn{
position:relative;
appearance:none;
border:none;
cursor:pointer;
padding:clamp(18px,2.6vh,24px) clamp(34px,4.8vw,52px);
min-width:min(380px,92vw);
font-family:var(--font-sans);
font-size:clamp(14px,1.25vw,17px);
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
border-radius:var(--radius-lg);
	color:#faf8f2;
	background:linear-gradient(145deg,rgba(205,195,130,0.2),rgba(22,24,18,0.92));
	border:1px solid rgba(200,190,120,0.45);
box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.1);
transition:transform var(--dur-med) var(--ease-out-expo),box-shadow var(--dur-med) ease,border-color var(--dur-fast) ease,background var(--dur-med) ease;
overflow:hidden;
opacity:0;
animation:welcomeBtnEnter .7s var(--ease-out-expo) both;
}
.welcome-btn:nth-child(1){animation-delay:.72s}
.welcome-btn:nth-child(2){animation-delay:.88s}
@keyframes welcomeBtnEnter{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}
.welcome-btn::before{
content:'';
position:absolute;
inset:-2px;
background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0.1) 48%,transparent 52%);
transform:translateX(-100%);
animation:welcomeBtnSheen 4.2s ease-in-out infinite;
}
@keyframes welcomeBtnSheen{
0%,65%{transform:translateX(-115%)}
100%{transform:translateX(115%)}
}
.welcome-btn:hover{
transform:translateY(-3px);
	box-shadow:0 16px 48px rgba(200,190,120,0.24),0 0 0 1px rgba(168,205,155,0.28),inset 0 1px 0 rgba(255,255,255,0.14);
	border-color:rgba(168,205,155,0.68);
	background:linear-gradient(145deg,rgba(210,200,135,0.28),rgba(22,28,20,0.94));
}
.welcome-btn:active{transform:translateY(-1px)}
.welcome-btn--euc{
	background:linear-gradient(135deg,rgba(168,205,155,0.18),rgba(28,36,26,0.92));
	border-color:rgba(165,200,155,0.42);
}
.welcome-btn span{
position:relative;
z-index:1;
}

.welcome-screen--exit{
pointer-events:none;
animation:welcomeExit .75s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes welcomeExit{
to{
	opacity:0;
	transform:scale(1.06);
	filter:blur(16px) brightness(1.2);
}
}
@media (prefers-reduced-motion: reduce){
.welcome-screen,.welcome-screen::before,.welcome-screen::after,.welcome-map-bg,.welcome-title,.welcome-title-sub,.welcome-tagline,.welcome-btn,.welcome-btn::before{animation:none!important}
.welcome-map-bg{animation:welcomeMapReveal .5s ease both}
.welcome-logo-corner,.welcome-logo-corner__float,.welcome-logo-corner svg,.welcome-logo-corner__pulse::before,.welcome-logo-corner__sheen::after{animation:none!important}
.welcome-logo-corner{opacity:1;transform:none;filter:none}
.welcome-logo-corner__float{transform:none}
.welcome-title{background-position:50% 50%}
.welcome-title-sub{opacity:0.88;transform:none}
.welcome-btn{opacity:1;transform:none}
.welcome-tagline{opacity:1;transform:none}
}

@media (min-width:900px){
.welcome-cta{flex-wrap:nowrap}
.welcome-btn{min-width:min(420px,44vw)}
}