/* IWSS CINEMATIC INTRO */

body.intro-active{
    overflow:hidden;
}

#iwss-intro{
    position:fixed;
    inset:0;
    z-index:10000;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(109,40,217,.12), transparent 30%),
        radial-gradient(circle at 15% 15%, rgba(236,72,153,.07), transparent 28%),
        #050914;
    color:#fff;
    isolation:isolate;
    cursor:pointer;
    transition:opacity 900ms cubic-bezier(.77,0,.18,1), visibility 900ms;
}

#iwss-intro::before{
    content:"";
    position:absolute;
    inset:-30%;
    background:
        radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px);
    background-size:42px 42px;
    opacity:.12;
    mask-image:radial-gradient(circle at center, black, transparent 68%);
    -webkit-mask-image:radial-gradient(circle at center, black, transparent 68%);
    animation:introGridDrift 18s linear infinite;
    pointer-events:none;
}

.intro-light{
    position:absolute;
    width:min(58vw,720px);
    aspect-ratio:1;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(236,72,153,.14) 0%,
        rgba(109,40,217,.10) 26%,
        rgba(109,40,217,0) 70%);
    filter:blur(12px);
    opacity:0;
    animation:introAmbient 2.9s 1.15s ease-out forwards,
              introPulse 4.5s 3.9s ease-in-out infinite;
    pointer-events:none;
}

.intro-line{
    position:absolute;
    width:120vw;
    height:1px;
    left:-10vw;
    top:50%;
    background:linear-gradient(90deg,
        transparent,
        rgba(255,255,255,.04),
        rgba(236,72,153,.45),
        rgba(255,255,255,.10),
        transparent);
    transform:rotate(-31deg) scaleX(0);
    transform-origin:center;
    filter:blur(.2px);
    animation:introLineReveal 2.15s .25s cubic-bezier(.77,0,.18,1) forwards;
    pointer-events:none;
}

.intro-logo-flight{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}

.intro-logo-wrap{
    position:absolute;
    left:8vw;
    top:20px;
    width:min(150px,18vw);
    transform:translate(0,0) scale(.58);
    transform-origin:center;
    animation:introLogoFlight 2.35s .1s cubic-bezier(.76,0,.16,1) forwards;
}

.intro-logo-wrap::before{
    content:"";
    position:absolute;
    inset:-25%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.14), transparent 66%);
    filter:blur(16px);
    opacity:0;
    animation:introLogoGlow 1.2s 1.2s ease-out forwards;
}

.intro-logo{
    position:relative;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
    animation:introLogoGlowPulse 3.8s 2.75s ease-in-out infinite;
}

.intro-logo-wrap::after{
    content:"";
    position:absolute;
    top:-30%;
    bottom:-30%;
    left:-70%;
    width:38%;
    transform:skewX(-18deg);
    background:linear-gradient(90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent);
    filter:blur(5px);
    opacity:0;
    animation:introLogoShine 2.25s 2.45s ease-in-out forwards;
}

.intro-copy{
    position:absolute;
    z-index:4;
    left:50%;
    top:calc(50% + 92px);
    width:min(90vw,760px);
    transform:translate(-50%,12px);
    text-align:center;
    opacity:0;
    animation:introCopyReveal 1s 2.2s cubic-bezier(.2,.7,.2,1) forwards;
    pointer-events:none;
}

.intro-eyebrow{
    margin:0 0 12px;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
}

.intro-title{
    margin:0;
    font-size:clamp(1.05rem,2vw,1.45rem);
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.intro-subtitle{
    margin:10px 0 0;
    color:rgba(203,213,225,.65);
    font-size:.82rem;
    letter-spacing:.12em;
}

.intro-enter{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:7vh;
    transform:translateX(-50%);
    min-width:150px;
    padding:13px 28px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:#fff;
    font:500 .72rem 'Poppins',sans-serif;
    letter-spacing:.22em;
    text-transform:uppercase;
    cursor:pointer;
    opacity:0;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
    animation:introEnterReveal 1s 3.25s ease forwards;
}

.intro-enter:hover,
.intro-enter:focus-visible{
    background:rgba(236,72,153,.12);
    border-color:rgba(236,72,153,.55);
    box-shadow:0 0 35px rgba(236,72,153,.14);
    transform:translateX(-50%) translateY(-3px);
    outline:none;
}

.intro-hint{
    position:absolute;
    z-index:4;
    left:50%;
    bottom:4.1vh;
    transform:translateX(-50%);
    color:rgba(255,255,255,.35);
    font-size:.58rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:0;
    animation:introHintReveal 1s 3.55s ease forwards;
    pointer-events:none;
}

#iwss-intro.is-exiting{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

#iwss-intro.is-exiting .intro-logo-wrap{
    animation:none !important;
    opacity:0;
    transition:opacity .65s ease;
}

#iwss-intro.is-exiting .intro-copy,
#iwss-intro.is-exiting .intro-enter,
#iwss-intro.is-exiting .intro-hint,
#iwss-intro.is-exiting .intro-light,
#iwss-intro.is-exiting .intro-line{
    opacity:0;
    transition:opacity .35s ease;
}

body.intro-active .navbar,
body.intro-active .hero{
    transition:filter 900ms ease, transform 900ms cubic-bezier(.77,0,.18,1), opacity 900ms ease;
}

body.intro-active.intro-entered .navbar{
    transform:translateY(-12px);
    opacity:0;
}

body.intro-active.intro-entered .hero{
    transform:scale(1.015);
    filter:brightness(.72);
}

body.intro-active.intro-entered .navbar,
body.intro-active.intro-entered .hero{
    animation:introPageReveal 1s 120ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes introLogoFlight{
    0%{
        left:8vw;
        top:20px;
        transform:translate(0,0) scale(.58);
    }
    100%{
        left:50%;
        top:50%;
        transform:translate(-50%,-50%) scale(1);
    }
}

@keyframes introLogoGlow{
    to{ opacity:1; }
}

@keyframes introLogoGlowPulse{
    0%,100%{ filter:drop-shadow(0 0 5px rgba(255,255,255,.04)); }
    50%{ filter:drop-shadow(0 0 24px rgba(236,72,153,.22)); }
}

@keyframes introLogoShine{
    0%{ left:-70%; opacity:0; }
    22%{ opacity:.85; }
    55%{ left:135%; opacity:.8; }
    100%{ left:135%; opacity:0; }
}

@keyframes introAmbient{
    from{ opacity:0; transform:translate(-50%,-50%) scale(.65); }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@keyframes introPulse{
    0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
    50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}

@keyframes introLineReveal{
    from{ transform:rotate(-31deg) scaleX(0); opacity:0; }
    to{ transform:rotate(-31deg) scaleX(1); opacity:1; }
}

@keyframes introCopyReveal{
    to{ opacity:1; transform:translate(-50%,0); }
}

@keyframes introEnterReveal{
    to{ opacity:1; }
}

@keyframes introHintReveal{
    to{ opacity:1; }
}

@keyframes introGridDrift{
    to{ transform:translate3d(42px,42px,0); }
}

@keyframes introExitFade{
    from{ opacity:1; }
    to{ opacity:0; }
}

@keyframes introPageReveal{
    to{
        transform:none;
        filter:none;
        opacity:1;
    }
}

@media(max-width:700px){
    .intro-logo-wrap{
        left:50%;
        top:10%;
        width:190px;
        transform:translateX(-50%) scale(.55);
    }

     .intro-copy{
        top:calc(50% + 125px);
        width:92vw;
    }

    .intro-eyebrow{
        font-size:.58rem;
        letter-spacing:.24em;
    }

     .intro-title{
        font-size:1.08rem;
        letter-spacing:.08em;
    }

     .intro-subtitle{
        font-size:.78rem;
        letter-spacing:.08em;
    }

     .intro-enter{
        bottom:10vh;
        min-width:0;
        width:auto;
        padding:12px 22px;
        font-size:.62rem;
    }

    .intro-hint{
        bottom:5vh;
        font-size:.5rem;
    }
}

@media(prefers-reduced-motion:reduce){
    #iwss-intro::before,
    .intro-light,
    .intro-line,
    .intro-logo-flight,
    .intro-logo,
    .intro-logo-wrap::before,
    .intro-logo-wrap::after,
    .intro-copy,
    .intro-enter,
    .intro-hint{
        animation:none !important;
    }

    .intro-logo-wrap{
        left:50%;
        top:50%;
        transform:translate(-50%,-50%) scale(1);
    }

    .intro-logo-wrap::before{
        opacity:1;
    }

    .intro-copy,
    .intro-enter{
        opacity:1;
    }

    .intro-copy{
        transform:translate(-50%,0);
    }

    .intro-hint{
        opacity:.5;
    }

    body.intro-active.intro-entered .navbar,
    body.intro-active.intro-entered .hero{
        animation:none;
        transform:none;
        filter:none;
        opacity:1;
    }
}


/* Premium micro-details */
.intro-logo-wrap{
    will-change:transform,left,top;
}
.intro-light{
    will-change:transform,opacity;
}
.intro-enter::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 0 rgba(236,72,153,.16);
    animation:introButtonPulse 3.2s 4s ease-out infinite;
}
@keyframes introButtonPulse{
    0%{ box-shadow:0 0 0 0 rgba(236,72,153,.14); }
    45%,100%{ box-shadow:0 0 0 18px rgba(236,72,153,0); }
}


/* Final mobile intro composition: centered, not top-heavy */
@media(max-width:700px){
    .intro-logo-wrap{
        width:230px;
        left:50%;
        top:36%;
        transform:translate(-50%,-50%) scale(.82);
    }

    .intro-copy{
        top:calc(50% + 100px);
        width:90vw;
    }

    @keyframes introLogoFlight{
        0%{
            left:50%;
            top:16%;
            transform:translate(-50%,-50%) scale(.50);
        }
        100%{
            left:50%;
            top:36%;
            transform:translate(-50%,-50%) scale(1);
        }
    }
}


/* RESTORED AMBIENT BACKGROUND LIGHTS */
.intro-light{z-index:1;width:min(68vw,820px);opacity:1;background:radial-gradient(circle at 50% 50%,rgba(236,72,153,.20) 0%,rgba(236,72,153,.08) 25%,transparent 62%),radial-gradient(circle at 28% 38%,rgba(109,40,217,.18) 0%,transparent 48%),radial-gradient(circle at 74% 64%,rgba(109,40,217,.14) 0%,transparent 46%);box-shadow:0 0 110px rgba(236,72,153,.10),0 0 220px rgba(109,40,217,.10)}
.intro-light::before,.intro-light::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(22px)}
.intro-light::before{width:34vw;height:34vw;max-width:420px;max-height:420px;left:-18%;top:22%;background:radial-gradient(circle,rgba(109,40,217,.24),transparent 68%);animation:introOrbLeft 5.5s ease-in-out infinite}
.intro-light::after{width:30vw;height:30vw;max-width:380px;max-height:380px;right:-14%;bottom:10%;background:radial-gradient(circle,rgba(236,72,153,.18),transparent 68%);animation:introOrbRight 6.5s ease-in-out infinite}
@keyframes introOrbLeft{0%,100%{transform:translate3d(-4%,0,0) scale(.9);opacity:.55}50%{transform:translate3d(9%,-7%,0) scale(1.08);opacity:1}}
@keyframes introOrbRight{0%,100%{transform:translate3d(4%,2%,0) scale(.88);opacity:.45}50%{transform:translate3d(-8%,-8%,0) scale(1.1);opacity:.9}}
/* CINEMATIC LIGHT-TRAIL LAYER */
#iwss-intro::after{
    content:"";
    position:absolute;
    inset:-15%;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(116deg,transparent 37%,rgba(236,72,153,.16) 43%,transparent 49%),
        linear-gradient(63deg,transparent 48%,rgba(109,40,217,.13) 53%,transparent 59%),
        linear-gradient(151deg,transparent 42%,rgba(255,255,255,.07) 46%,transparent 50%);
    filter:blur(14px);
    opacity:0;
    transform:translate3d(-7%,3%,0) scale(1.08);
    animation:introTrailSweep 5.5s .55s cubic-bezier(.2,.7,.2,1) forwards;
}

.intro-light{
    box-shadow:
        0 0 90px rgba(236,72,153,.08),
        0 0 180px rgba(109,40,217,.08);
}

.intro-line{
    z-index:2;
    height:2px;
    box-shadow:0 0 22px rgba(236,72,153,.22);
}

.intro-logo-wrap{
    z-index:3;
}

.intro-logo-wrap::before{
    box-shadow:
        0 0 45px rgba(236,72,153,.14),
        0 0 90px rgba(109,40,217,.10);
}

.intro-logo-wrap::after{
    width:46%;
    filter:blur(7px);
}

@keyframes introTrailSweep{
    0%{
        opacity:0;
        transform:translate3d(-12%,6%,0) scale(1.04) rotate(-2deg);
    }
    18%{opacity:.72}
    52%{opacity:.42}
    100%{
        opacity:0;
        transform:translate3d(12%,-6%,0) scale(1.12) rotate(2deg);
    }
}

@media(max-width:700px){
    #iwss-intro::after{
        filter:blur(11px);
        opacity:0;
    }
}