/**
 * @archivo client/css/launch.css
 * @proposito Intro corporativa metálica con fondo plateado y emblema negro degradado.
 */

.mayran-launch{display:none}
html.mayran-native-launch,html.mayran-native-launch body{overflow:hidden!important}

html.mayran-native-launch .mayran-launch{
    position:fixed;inset:0;z-index:2147483647;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 34%,rgba(255,255,255,.52) 0,rgba(255,255,255,.12) 26%,transparent 48%),
      linear-gradient(118deg,#596064 0%,#c3c8cb 17%,#878e93 34%,#d6dadd 52%,#747c81 72%,#b9bfc3 88%,#596064 100%);
    font-family:'Inter',system-ui,sans-serif;
    opacity:1;transition:opacity .5s ease;
}

html.mayran-native-launch .mayran-launch::before{content:"";position:absolute;inset:-35%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 49%,transparent 56%);animation:metalSheen 2.2s ease-in-out both;pointer-events:none}

/* Reflejos discretos sobre el metal */
.mayran-launch__particles{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.mayran-launch__particle{
    position:absolute;width:6px;height:6px;border-radius:50%;
    background:rgba(20,23,25,.18);box-shadow:0 0 10px rgba(255,255,255,.7);
}
.mayran-launch__particle:nth-child(1){left:8%;animation:particleUp 6s 0s ease-in infinite}
.mayran-launch__particle:nth-child(2){left:18%;animation:particleUp 7.5s .8s ease-in infinite;width:4px;height:4px}
.mayran-launch__particle:nth-child(3){left:30%;animation:particleUp 5.5s 1.5s ease-in infinite;width:8px;height:8px}
.mayran-launch__particle:nth-child(4){left:42%;animation:particleUp 8s .3s ease-in infinite}
.mayran-launch__particle:nth-child(5){left:55%;animation:particleUp 6.5s 2s ease-in infinite;width:4px;height:4px}
.mayran-launch__particle:nth-child(6){left:68%;animation:particleUp 7s 1s ease-in infinite}
.mayran-launch__particle:nth-child(7){left:78%;animation:particleUp 5s 1.8s ease-in infinite;width:8px;height:8px}
.mayran-launch__particle:nth-child(8){left:88%;animation:particleUp 6.8s .5s ease-in infinite;width:4px;height:4px}
.mayran-launch__particle:nth-child(9){left:48%;animation:particleUp 7.2s 1.2s ease-in infinite;width:10px;height:10px}
.mayran-launch__particle:nth-child(10){left:25%;animation:particleUp 6.2s 2.2s ease-in infinite;width:3px;height:3px}

/* Logo arriba */
.mayran-launch__logo-top{
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    z-index:10;
    width:clamp(55px,13vw,80px);height:clamp(55px,13vw,80px);
    opacity:0;
    animation:logoIn .7s .1s ease forwards;
    filter:brightness(.86) saturate(.94) drop-shadow(0 7px 14px rgba(0,0,0,.25));
    border-radius:50%;
}

/* Emblema oficial recortado como máscara para aplicar un negro metálico real. */
.mayran-launch__stage{
    position:relative;z-index:5;
    display:flex;align-items:center;justify-content:center;
    width:min(82vw,430px);height:min(54vh,440px);
}

.mayran-launch__people{
    position:relative;display:block;width:88%;height:88%;object-fit:contain;object-position:center;
    opacity:0;
    animation:peopleEnter 1s .3s cubic-bezier(.16,.84,.24,1) forwards;
    filter:brightness(.86) saturate(.94) drop-shadow(0 2px 1px rgba(255,255,255,.24)) drop-shadow(0 22px 28px rgba(0,0,0,.42));
}

/* Destello plateado recortado por la transparencia del propio emblema. */
.mayran-launch__people-shine{
    position:absolute;left:6%;top:6%;display:block;width:88%;height:88%;
    object-fit:contain;object-position:center;pointer-events:none;
    opacity:0;filter:grayscale(1) brightness(0) invert(1);
    mix-blend-mode:screen;
    animation:logoSilverShine 1.85s .65s cubic-bezier(.3,.05,.2,1) both;
}

/* Texto bienvenida */
.mayran-launch__welcome{
    position:absolute;bottom:14%;left:50%;transform:translateX(-50%);
    z-index:10;text-align:center;
    opacity:0;
    animation:welcomeIn .55s 1.72s cubic-bezier(.16,.84,.24,1) forwards;
}

.mayran-launch__welcome-main{
    font-size:clamp(22px,5.5vw,34px);font-weight:900;
    letter-spacing:.1em;text-transform:uppercase;
    color:#008b50;text-shadow:0 1px 0 rgba(255,255,255,.42),0 4px 12px rgba(0,73,42,.25);
}

.mayran-launch__welcome-sub{
    margin-top:4px;font-size:clamp(9px,2vw,12px);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    color:rgba(10,12,13,.62);
}

/* Barra de carga */
.mayran-launch__loader{
    position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
    z-index:10;width:min(220px,60vw);
    opacity:0;
    animation:fadeIn .5s .5s ease forwards;
}

.mayran-launch__loader-track{
    width:100%;height:3px;border-radius:999px;
    background:rgba(0,0,0,.13);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.6);
}

.mayran-launch__loader-fill{
    width:0;height:100%;border-radius:999px;
    background:linear-gradient(90deg,#050606,#666c70,#050606);
    box-shadow:0 0 12px rgba(0,0,0,.24);
    animation:loaderFill 2.6s .4s cubic-bezier(.2,.8,.2,1) forwards;
}

/* ANIMACIONES */
@keyframes particleUp{
    0%{bottom:-5%;opacity:0;transform:translateX(0) scale(1)}
    10%{opacity:.6}
    50%{opacity:.4;transform:translateX(12px) scale(.7)}
    90%{opacity:.2}
    100%{bottom:105%;opacity:0;transform:translateX(-8px) scale(.3)}
}

@keyframes peopleEnter{
    0%{opacity:0;transform:translateY(60px) scale(.9)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes logoIn{
    0%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.85)}
    100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

@keyframes welcomeIn{
    0%{opacity:0;transform:translateX(-50%) translateY(15px)}
    100%{opacity:1;transform:translateX(-50%) translateY(0)}
}

@keyframes fadeIn{to{opacity:1}}

@keyframes loaderFill{
    0%{width:0}
    30%{width:25%}
    60%{width:70%}
    100%{width:100%}
}
@keyframes metalSheen{0%{transform:translateX(-35%);opacity:0}25%{opacity:1}100%{transform:translateX(35%);opacity:.3}}
@keyframes logoSilverShine{
    0%{clip-path:polygon(-36% 0,-12% 0,-34% 100%,-58% 100%);opacity:0}
    14%{opacity:.88}
    82%{opacity:.88}
    100%{clip-path:polygon(158% 0,182% 0,160% 100%,136% 100%);opacity:0}
}

.mayran-launch.is-leaving{opacity:0!important}

@media(max-height:600px){
    .mayran-launch__stage{height:min(55vh,380px)}
    .mayran-launch__welcome{bottom:10%}
}
@media(min-width:900px){
    .mayran-launch__stage{width:min(38vw,420px)}
}
@media(prefers-reduced-motion:reduce){
    .mayran-launch *{animation-duration:.01ms!important;animation-delay:0ms!important}
}