/* ==================================================
   MOIT Launch Screen
================================================== */

.moit-launch-screen{
position:fixed;
inset:0;
z-index:999999;
overflow-y:auto;
overflow-x:hidden;
direction:rtl;
display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#073646 0%,
#0a5260 40%,
#16827d 100%
);

backdrop-filter:blur(2px);
}

/* ==========================================
   Decorative Background
========================================== */

.launch-background-elements{
position:absolute;
inset:0;
opacity:.08;
background-image:
radial-gradient(circle at 20% 20%, #ffffff 1px, transparent 1px),
radial-gradient(circle at 80% 40%, #ffffff 1px, transparent 1px),
radial-gradient(circle at 50% 80%, #ffffff 1px, transparent 1px);
background-size:120px 120px;
pointer-events:none;
}

/* ==========================================
   Particles Layer
========================================== */

.launch-particles{
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 25% 25%, rgba(255,255,255,.12) 0%, transparent 20%),
radial-gradient(circle at 75% 35%, rgba(255,255,255,.10) 0%, transparent 18%),
radial-gradient(circle at 55% 80%, rgba(255,255,255,.10) 0%, transparent 20%);
}

/* ==========================================
   Wrapper
========================================== */

.launch-wrapper{
width:min(1200px,92%);
position:relative;
z-index:10;
padding:20px 0 40px;
}

/* ==========================================
   Logo
========================================== */

.launch-logo{
text-align:center;
margin-bottom:12px;
position:relative;
z-index:20;
}

.launch-logo img{
width:110px;
}

.launch-logo img{
width:140px;
height:auto;
filter:drop-shadow(0 0 18px rgba(255,255,255,.25));

animation:
pulseGlow 4s ease-in-out infinite,
floatLogo 5s ease-in-out infinite;
}

/* ==========================================
   Main Layout
========================================== */

.launch-content{

display:flex;
align-items:center;
justify-content:center;
gap:60px;

color:#fff;

animation:fadeInUp 1.6s ease;
}

/* ==========================================
   Minister
========================================== */

.launch-minister{

flex-shrink:0;

}

.launch-minister img{

width:290px;
height:290px;

object-fit:cover;

border-radius:50%;

border:6px solid rgba(255,255,255,.18);

box-shadow:
0 0 45px rgba(0,0,0,.25),
0 0 25px rgba(255,255,255,.08);

}

/* ==========================================
   Text
========================================== */

.launch-text{

max-width:700px;

}

.launch-kicker{

font-size:18px;
opacity:.9;
margin-bottom:10px;

}

.launch-minister-name{

margin:0;
font-size:42px;
font-weight:800;
line-height:1.3;

}

.launch-position{

font-size:20px;
margin-top:10px;
color:#dff8f4;

}

.launch-divider{

width:140px;
height:4px;

background:#d4af37;

border-radius:20px;

margin:25px 0;

position:relative;
overflow:hidden;

}

.launch-divider::after{

content:"";

position:absolute;

top:0;
right:-100%;

width:50%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);

animation:shine 3s infinite;

}

.launch-title{

font-size:34px;
margin:0 0 10px;

}

.launch-date{

font-size:15px;
opacity:.8;
margin-bottom:18px;

}

.launch-description{

font-size:22px;
line-height:1.8;
margin:0;

}

/* ==========================================
   Features
========================================== */

.launch-features{

display:flex;
flex-wrap:wrap;
gap:10px;

margin-top:25px;

}

.launch-features span{

padding:8px 14px;

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.15);

border-radius:30px;

font-size:14px;

}

/* ==========================================
   Countdown
========================================== */

.launch-countdown{

margin-top:25px;

font-size:18px;
font-weight:700;

}

/* ==========================================
   Buttons
========================================== */

.launch-actions{

margin-top:18px;

}

.launch-enter-btn{

border:none;

padding:14px 34px;

border-radius:12px;

background:#d4af37;

color:#073646;

font-weight:800;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.launch-enter-btn:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

/* ==========================================
   URL
========================================== */

.launch-site-url{

margin-top:20px;

font-size:15px;

opacity:.85;

letter-spacing:1px;

}

/* ==========================================
   Animations
========================================== */

@keyframes fadeInUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:none;
}

}

@keyframes pulseGlow{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

}

/* ==========================================
   Tablet
========================================== */

@media (max-width:992px){

.launch-content{

flex-direction:column;

text-align:center;

gap:30px;

}

.launch-divider{

margin-right:auto;
margin-left:auto;

}

.launch-features{

justify-content:center;

}

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

.launch-wrapper{

width:94%;

}

.launch-logo img{

width:90px;

}

.launch-minister img{

width:190px;
height:190px;

}

.launch-minister-name{

font-size:28px;

}

.launch-position{

font-size:16px;

}

.launch-title{

font-size:22px;

}

.launch-description{

font-size:16px;

line-height:1.8;

}

.launch-countdown{

font-size:15px;

}

.launch-enter-btn{

width:100%;

}

.launch-features span{

font-size:12px;

}

}

/* ==========================================
   Small Phones
========================================== */

@media (max-width:480px){

.launch-description{

font-size:15px;

}

.launch-features{

gap:6px;

}

.launch-features span{

padding:6px 10px;

}

}

@media (max-width:768px){

.moit-launch-screen{

align-items:flex-start;

padding:20px 0;

}

}


@keyframes floatLogo{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

}

@keyframes shine{

0%{
right:-100%;
}

100%{
right:150%;
}

}