/* ==========================================================================
   ILMONSTARY — CINEMATIC GATE INTRO (Enhanced v3)
   Deep Space Stars + Golden Light Beam + Particle Burst
   ========================================================================== */

html.gate-intro-already-seen #gate-intro {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#gate-intro {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    overflow: hidden;
    perspective: 2000px;
    background: #000;
    font-family: var(--font-heading, 'Playfair Display', serif);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Exit Animation ── */
#gate-intro.door-fade-out {
    animation: finalDismiss 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes finalDismiss {
    0%   { opacity: 1; transform: scale(1); }
    30%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.12); }
}

/* ── Deep Background ── */
.gate-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 80% 60% at 50% 55%, #0d1b3e 0%, #060a18 55%, #000 100%);
}

/* ── Star Field ── */
.gate-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.gate-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: starTwinkle ease-in-out infinite;
}

.gate-star:nth-child(1)  { width:1.5px;height:1.5px;top: 5%;left:12%;  animation-duration:2.1s;animation-delay:0.3s;  opacity:0.7; }
.gate-star:nth-child(2)  { width:2px;  height:2px;  top:12%;left:28%;  animation-duration:3.2s;animation-delay:0.8s;  opacity:0.5; }
.gate-star:nth-child(3)  { width:1px;  height:1px;  top: 8%;left:45%;  animation-duration:1.8s;animation-delay:1.4s;  opacity:0.9; }
.gate-star:nth-child(4)  { width:2.5px;height:2.5px;top:18%;left:62%;  animation-duration:2.7s;animation-delay:0.1s;  opacity:0.6; }
.gate-star:nth-child(5)  { width:1.5px;height:1.5px;top: 3%;left:78%;  animation-duration:3.8s;animation-delay:1.1s;  opacity:0.8; }
.gate-star:nth-child(6)  { width:1px;  height:1px;  top:22%;left:88%;  animation-duration:2.4s;animation-delay:0.6s;  opacity:0.6; }
.gate-star:nth-child(7)  { width:2px;  height:2px;  top:32%;left:5%;   animation-duration:1.6s;animation-delay:1.8s;  opacity:0.7; }
.gate-star:nth-child(8)  { width:1.5px;height:1.5px;top:38%;left:18%;  animation-duration:4.1s;animation-delay:0.4s;  opacity:0.5; }
.gate-star:nth-child(9)  { width:1px;  height:1px;  top:25%;left:35%;  animation-duration:2.9s;animation-delay:2.2s;  opacity:0.9; }
.gate-star:nth-child(10) { width:2px;  height:2px;  top:42%;left:55%;  animation-duration:1.9s;animation-delay:0.9s;  opacity:0.6; }
.gate-star:nth-child(11) { width:2.5px;height:2.5px;top:15%;left:72%;  animation-duration:3.5s;animation-delay:1.6s;  opacity:0.8; }
.gate-star:nth-child(12) { width:1.5px;height:1.5px;top:48%;left:82%;  animation-duration:2.2s;animation-delay:0.2s;  opacity:0.7; }
.gate-star:nth-child(13) { width:1px;  height:1px;  top:55%;left:8%;   animation-duration:3.1s;animation-delay:1.3s;  opacity:0.5; }
.gate-star:nth-child(14) { width:2px;  height:2px;  top:60%;left:25%;  animation-duration:2.6s;animation-delay:0.7s;  opacity:0.9; }
.gate-star:nth-child(15) { width:1.5px;height:1.5px;top:65%;left:48%;  animation-duration:4.3s;animation-delay:1.9s;  opacity:0.6; }
.gate-star:nth-child(16) { width:1px;  height:1px;  top:70%;left:65%;  animation-duration:1.7s;animation-delay:0.5s;  opacity:0.8; }
.gate-star:nth-child(17) { width:2.5px;height:2.5px;top:75%;left:82%;  animation-duration:2.8s;animation-delay:1.2s;  opacity:0.5; }
.gate-star:nth-child(18) { width:2px;  height:2px;  top:82%;left:10%;  animation-duration:3.4s;animation-delay:0s;    opacity:0.7; }
.gate-star:nth-child(19) { width:1.5px;height:1.5px;top:88%;left:35%;  animation-duration:2.3s;animation-delay:1.7s;  opacity:0.9; }
.gate-star:nth-child(20) { width:1px;  height:1px;  top:92%;left:58%;  animation-duration:3.6s;animation-delay:0.3s;  opacity:0.6; }
.gate-star:nth-child(21) { width:2px;  height:2px;  top:95%;left:75%;  animation-duration:2.0s;animation-delay:2.0s;  opacity:0.7; }
.gate-star:nth-child(22) { width:1.5px;height:1.5px;top:10%;left:92%;  animation-duration:3.9s;animation-delay:1.0s;  opacity:0.5; }

/* Gold stars */
.gate-star:nth-child(3n+1) {
    background: #fff9e8;
    box-shadow: 0 0 4px rgba(201,168,76,0.6);
}
.gate-star:nth-child(5n+2) {
    background: #C9A84C;
    box-shadow: 0 0 6px rgba(201,168,76,0.8);
}

@keyframes starTwinkle {
    0%,100% { opacity: 0.1; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* ── Golden Light Beam (revealed on gate-open) ── */
.gate-light-beam {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(201,168,76,0.7) 15%,
        rgba(255,240,160,0.5) 40%,
        rgba(201,168,76,0.2) 70%,
        transparent 100%
    );
    filter: blur(2px);
    z-index: 15;
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.2,0,0.2,1) 1.5s,
                opacity 0.5s ease 1.4s;
}

.gate-light-beam::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 80px;
    left: -38px;
    background: linear-gradient(180deg,
        rgba(201,168,76,0.3) 0%,
        rgba(255,240,160,0.15) 30%,
        transparent 70%
    );
    filter: blur(20px);
}

#gate-intro.gate-open .gate-light-beam {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}

/* ── World Light Bloom ── */
.gate-world-light {
    position: absolute;
    inset: -50%;
    z-index: 2;
    background: radial-gradient(circle at 50% 50%,
        #fff 0%,
        #fff8e1 12%,
        #ffecb3 30%,
        #ffd54f 55%,
        transparent 78%);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 1.8s ease, transform 3.5s cubic-bezier(0.2,0,0.2,1);
}

#gate-intro.gate-open .gate-world-light {
    opacity: 1;
    transform: scale(1.3);
}

/* ── Gate Panels ── */
.gate-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 10;
    transition: transform 2.6s cubic-bezier(0.65,0,0.25,1);
}

.gate-left {
    left: 0;
    transform-origin: left center;
    background: linear-gradient(to right, #050d1c, #0b1a36);
}

.gate-right {
    right: 0;
    transform-origin: right center;
    background: linear-gradient(to left, #050d1c, #0b1a36);
}

.gate-left::after,
.gate-right::after {
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(201,168,76,0.1) 20%,
        rgba(201,168,76,0.18) 50%,
        rgba(201,168,76,0.1) 80%,
        transparent 100%
    );
}
.gate-left::after  { right: 30%; }
.gate-right::after { left: 30%; }

.gate-edge-bar {
    position: absolute;
    top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(201,168,76,0.4) 0%,
        #C9A84C 30%,
        #E8D5A3 50%,
        #C9A84C 70%,
        rgba(201,168,76,0.4) 100%
    );
    box-shadow: 0 0 20px rgba(201,168,76,0.9), 0 0 40px rgba(201,168,76,0.4);
    z-index: 5;
}

.gate-left .gate-edge-bar  { right: 0; }
.gate-right .gate-edge-bar { left: 0; }

.gate-knob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    background: radial-gradient(circle at 35% 35%, #fff9e0, #E8D5A3 45%, #C9A84C 70%, #8a6020 100%);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(201,168,76,0.9), 0 3px 10px rgba(0,0,0,0.6);
    z-index: 6;
}

.gate-left .gate-knob  { right: -12px; }
.gate-right .gate-knob { left: -12px; }

#gate-intro.gate-open .gate-left  { transform: rotateY(-118deg); }
#gate-intro.gate-open .gate-right { transform: rotateY(118deg);  }

/* ── Center Seam ── */
.gate-seam {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: linear-gradient(180deg,
        transparent 0%,
        #C9A84C 20%,
        #fff 50%,
        #C9A84C 80%,
        transparent 100%
    );
    box-shadow: 0 0 35px #C9A84C, 0 0 70px rgba(255,255,255,0.45);
    z-index: 11;
    transition: opacity 0.5s ease;
}

#gate-intro.gate-open .gate-seam { opacity: 0; }

/* ── Center Brand ── */
.gate-brand {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    gap: 30px;
}

/* ── Institutional Seal (Logo + Rotating Ring) ── */
.gate-seal {
    position: relative;
    width: 176px;
    height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sealEntrance 1.2s cubic-bezier(0.215,0.61,0.355,1) forwards;
    opacity: 0;
}

@keyframes sealEntrance {
    0%   { opacity: 0; transform: scale(0.65) rotate(-15deg); }
    60%  { transform: scale(1.06) rotate(4deg); }
    80%  { transform: scale(0.97) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.gate-seal::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background:
        linear-gradient(#0a1628, #0a1628) padding-box,
        conic-gradient(
            rgba(201,168,76,1)   0deg,
            rgba(255,250,200,.3) 80deg,
            rgba(201,168,76,1)   160deg,
            rgba(255,250,200,.3) 240deg,
            rgba(201,168,76,1)   360deg
        ) border-box;
    border: 3px solid transparent;
    animation: ringRotate 6s linear infinite;
}

.gate-seal::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.25);
    box-shadow: 0 0 30px rgba(201,168,76,0.2), inset 0 0 30px rgba(201,168,76,0.1);
}

@keyframes ringRotate { to { transform: rotate(360deg); } }

.gate-brand-logo {
    width: 134px;
    height: 134px;
    object-fit: contain;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    animation: logoGlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(201,168,76,0.6)) drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}

@keyframes logoGlow {
    0%,100% { filter: drop-shadow(0 0 16px rgba(201,168,76,0.6)) drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }
    50%      { filter: drop-shadow(0 0 28px rgba(201,168,76,0.9)) drop-shadow(0 4px 20px rgba(0,0,0,0.4)); }
}

.gate-brand-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
    animation: sealEntrance 1.2s cubic-bezier(0.215,0.61,0.355,1) 0.2s forwards;
    opacity: 0;
}
.gate-brand-name span { color: #C9A84C; }

/* ── Welcome Message ── */
.gate-welcome-msg {
    opacity: 0;
    transform: translateY(45px) scale(0.94);
    transition: opacity 1.4s 1.2s ease, transform 1.4s 1.2s cubic-bezier(0.2,0,0.2,1);
    text-align: center;
}

#gate-intro.gate-open .gate-welcome-msg {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.welcome-top {
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: clamp(0.9rem, 2.2vw, 1.4rem);
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.gate-trust-headline {
    font-size: clamp(2.5rem, 6.5vw, 5rem);
    color: #fff;
    font-weight: 800;
    line-height: 1.15;
    text-shadow:
        0 0 50px rgba(255,240,160,0.95),
        0 0 90px rgba(201,168,76,0.65),
        0 4px 24px rgba(0,0,0,0.55);
    margin-bottom: 22px;
    animation: headlineReveal 1s ease 1.6s both;
}

@keyframes headlineReveal {
    0%   { letter-spacing: 0.3em; opacity: 0; }
    100% { letter-spacing: -0.01em; opacity: 1; }
}

.gate-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.gate-ornament-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, transparent, #C9A84C, transparent);
}

.gate-ornament-dot {
    width: 9px; height: 9px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 14px #C9A84C, 0 0 28px rgba(255,255,255,0.7);
    animation: dotPulse 2s ease-in-out infinite 2s;
}

@keyframes dotPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.5); box-shadow: 0 0 20px #C9A84C, 0 0 40px rgba(201,168,76,0.7); }
}

.gate-tagline {
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: clamp(0.95rem, 2.3vw, 1.4rem);
    font-weight: 700;
    color: #C9A84C;
    text-shadow: 0 0 24px rgba(201,168,76,0.8);
    letter-spacing: 0.06em;
}

/* ── Particle Burst Ring ── */
.gate-particle-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 18;
    pointer-events: none;
}

.gate-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C9A84C;
    box-shadow: 0 0 8px #C9A84C, 0 0 16px rgba(201,168,76,0.5);
    transform-origin: 0 0;
}

#gate-intro.gate-open .gate-particle {
    animation: particleBurst 1.4s cubic-bezier(0.2,0,0.8,1) forwards;
}

#gate-intro.gate-open .gate-particle:nth-child(1)  { animation-delay:1.45s; transform:rotate(0deg); }
#gate-intro.gate-open .gate-particle:nth-child(2)  { animation-delay:1.50s; transform:rotate(30deg); }
#gate-intro.gate-open .gate-particle:nth-child(3)  { animation-delay:1.55s; transform:rotate(60deg); }
#gate-intro.gate-open .gate-particle:nth-child(4)  { animation-delay:1.50s; transform:rotate(90deg); }
#gate-intro.gate-open .gate-particle:nth-child(5)  { animation-delay:1.45s; transform:rotate(120deg); }
#gate-intro.gate-open .gate-particle:nth-child(6)  { animation-delay:1.50s; transform:rotate(150deg); }
#gate-intro.gate-open .gate-particle:nth-child(7)  { animation-delay:1.55s; transform:rotate(180deg); }
#gate-intro.gate-open .gate-particle:nth-child(8)  { animation-delay:1.50s; transform:rotate(210deg); }
#gate-intro.gate-open .gate-particle:nth-child(9)  { animation-delay:1.45s; transform:rotate(240deg); }
#gate-intro.gate-open .gate-particle:nth-child(10) { animation-delay:1.50s; transform:rotate(270deg); }
#gate-intro.gate-open .gate-particle:nth-child(11) { animation-delay:1.55s; transform:rotate(300deg); }
#gate-intro.gate-open .gate-particle:nth-child(12) { animation-delay:1.50s; transform:rotate(330deg); }

@keyframes particleBurst {
    0%   { opacity:1; transform:rotate(inherit) translateX(0) scale(1); }
    60%  { opacity:0.7; }
    100% { opacity:0; transform:rotate(inherit) translateX(130px) scale(0.5); }
}

/* ── Skip Button ── */
.gate-skip {
    position: absolute;
    bottom: 38px;
    right: 38px;
    z-index: 100;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(201,168,76,0.5);
    color: rgba(255,255,255,0.85);
    padding: 10px 26px;
    border-radius: 50px;
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    backdrop-filter: blur(8px);
    letter-spacing: 0.05em;
}

.gate-skip:hover {
    background: #C9A84C;
    color: #000;
    border-color: #C9A84C;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(201,168,76,0.4);
}

/* Cinematic logo beat + warm reveal (first-visit gate — pairs with app.blade timings) */
@media (prefers-reduced-motion: no-preference) {
    #gate-intro:not(.gate-open) .gate-brand-logo {
        animation:
            logoGlow 3s ease-in-out infinite,
            gateLogoCinematicPulse 2.45s cubic-bezier(0.22, 0.82, 0.23, 0.94) 0.35s both;
    }
}

@keyframes gateLogoCinematicPulse {
    0% {
        transform: scale(0.88);
        filter: drop-shadow(0 0 12px rgba(201, 168, 76, 0.45)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
    }
    42% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 32px rgba(255, 240, 160, 0.75)) drop-shadow(0 4px 18px rgba(0, 0, 0, 0.42));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.62)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
    }
}

#gate-intro.gate-open .gate-world-light {
    background: radial-gradient(
        circle at 50% 42%,
        #fffdf8 0%,
        #faf4e8 14%,
        #f2e6c8 34%,
        rgba(255, 236, 182, 0.35) 62%,
        transparent 80%
    );
}