/* ------ Whole Page Banner Section ------ */
#banner {
    min-height: 100dvh;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(10,10,10,0.9) 100%), 
                      url('/static/vitrine/images/pic01.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 5%;
}

/* ------ Content placeholder ------ */
#banner > .inner {
    text-align: center;
    position: relative;
    max-width: 900px;
}
/* ------ Logo placeholder ------ */
#banner > .inner > .logo {
    margin-bottom: 5rem;
}
/* ------ Logo ------ */
#banner > .inner > .logo img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 0 30px var(--accent));
}
/* ------ Title ------ */
#banner > .inner > h2 {
    font-size: clamp(4rem, 8vw, 6rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
    color: var(--off-white);
}
/* ------ Subtitle ------ */
#banner > .inner > p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--gray);
    margin-bottom: 3rem;
    font-weight: 300;
    letter-spacing: 0.05em;
}
/* ------ Placeholder of Intranet and ExtAccess buttons ------ */
#banner > .inner > ul {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------ All buttons ------ */
#banner .button {
    text-decoration: none;
}
/* ------ Intranet, ExtAccess & CTA buttons ------ */
#banner .button.primary {
    z-index: 11;
    display: inline-block;
    opacity: 0;
    font-size: 0.78rem;
    animation: scan-reveal 0.25s ease-out forwards;
}
@keyframes scan-reveal {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* ------ Intranet & ExtAccess buttons ------ */
#banner > .inner > ul > li > .button.primary {
    border: 1px solid rgba(107, 165, 214, 0.35);
    color: rgba(107, 165, 214, 0.9);
    padding: 0.75rem 1.8rem;
    letter-spacing: 0.18em;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#banner > .inner > ul > li > .button.primary::after,
#banner > .inner > .button.primary::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: scan-line 0.35s ease-out forwards;
    background: linear-gradient(90deg, transparent, rgba(107, 165, 214, 0.6), transparent);
}
@keyframes scan-line {
    0% { left: -110%; }
    100% { left: 110%; }
}

#banner > .inner > ul > li > .button.primary:hover,
#extaction:hover {
    background: rgba(107, 165, 214, 0.1);
    border-color: var(--bleu-ciel);
    color: var(--bleu-ciel);
    transform: translateY(-1px);
}

/* ------ Intranet button ------ */
#banner > .inner > ul > li:first-child > .button.primary,
#banner > .inner > ul > li:first-child > .button.primary::after  {
    animation-delay: 0.1s;
}

/* ------ ExtAccess button ------ */
#banner > .inner > ul > li:last-child > .button.primary,
#banner > .inner > ul > li:last-child > .button.primary::after {
    animation-delay: 0.25s;
}

/* ------ CTA button ------ */
#banner > .inner > .button.primary {
    max-width: 400px;
    margin: 2rem auto 0;
    padding: 0.95rem 2.8rem;
    background: rgba(45, 62, 125, 0.6);
    border: 1px solid rgba(107, 165, 214, 0.6);
    color: #fff;
    letter-spacing: 0.25em;
    backdrop-filter: blur(10px);
    position: relative; /* make ::before position relative to the button */
}

#banner > .inner > .button.primary::before {
    /* Glow animation */
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid rgba(107, 165, 214, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 12; /* ensure pseudo-element is visible above the button */
    pointer-events: none;
}

#banner > .inner > .button.primary,
#banner > .inner > .button.primary::after {
    animation-delay: 0.4s;
}

#banner > .inner > .button.primary:hover::before {
    opacity: 1;
}

#banner > .inner > .button.primary:hover {
    background: rgba(45, 62, 125, 0.75);
    border-color: var(--bleu-ciel);
    box-shadow: 0 8px 28px rgba(45, 62, 125, 0.3);
    transform: translateY(-2px);
}

/* ------ Placeholder for tokens ------ */
#extinput {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 420px;
    padding: 0.75rem 1.2rem;
    background: rgba(45, 62, 125, 0.15);
    border: 1px solid rgba(107, 165, 214, 0.3);
    color: var(--off-white);
    font-size: 1rem;
    caret-color: var(--bleu-ciel);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    margin-left: 0.75rem;
}

#extinput::placeholder {
    color: rgba(107, 165, 214, 0.5);
    letter-spacing: 0.05em;
}

#extinput:focus {
    outline: none;
    border-color: var(--bleu-ciel);
    box-shadow: 0 4px 16px rgba(107, 165, 214, 0.2);
    transform: translateY(-1px);
    background: rgba(45, 62, 125, 0.25);
}
/* ------ Validation button for tokens ------ */

#extaction {
    margin-left: 0.75rem;
    padding: 0.8rem 2rem;
    color: white;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    transition: all 0.4s ease;
}

/* Extaction:hover with same style as other primary buttons */

/* ------ Scroll indicator ------- */
#banner > .more {
    position: absolute;
    bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--off-white);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
}

#banner > .more::after {
    content: '↓';
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

#banner > .more:hover {
    color: var(--bleu-ciel);
}


/* ============================================
   INTRO ANIMATION
   ============================================ */

/* Stars and comets */
#banner > .intro-overlay {
    overflow: hidden;
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 11;
    pointer-events: none;
    animation: overlay-vanish var(--overlay-dur, 2.8s) cubic-bezier(.2,.9,.2,1) var(--overlay-delay, 0.9s) forwards;
}
@keyframes overlay-vanish {
    to { opacity: 0; visibility: hidden; }
}

/* Stars */
.intro-star-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: twinkle var(--d) ease-in-out infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Comets */
.intro-comet {
    position: absolute;
    width: 4px;
    height: var(--h, 150px);
    background: linear-gradient(135deg,
        transparent 0%, 
        var(--accent) 60%, 
        #fff 100%
    );
    transform: rotate(-45deg);
    opacity: 0;
    animation: meteor-flow var(--v, 2s) linear var(--del, 0s) 1;
    filter: drop-shadow(0 0 4px var(--accent));
    pointer-events: none;
}
@keyframes meteor-flow {
    0% {transform: translate(-100px, -100px) rotate(-45deg); opacity: 0;}
    20% {opacity: 1;}
    100% {transform: translate(100vw, 100vh) rotate(-45deg); opacity: 0;}
}

/* Logo animation */
.logo img {
    opacity: 0;
    animation: main-comet-landing 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 11; /* In front of the overlay */
    position: relative;
}
@keyframes main-comet-landing {
    0% {
        transform: translate(-100vw, -100vh) scale(0.2) rotate(-45deg);
        filter: drop-shadow(0 0 40px #00d9ff) blur(5px);
        opacity: 0;
    }
    15% { opacity: 1; }
    95% {
        transform: translate(0, 2.5vh) scale(2) rotate(0deg);
        filter: drop-shadow(0 0 20px #00d9ff) blur(0);
    }
    100% {
        transform: translate(0, 2.5vh) scale(1.8) rotate(0deg);
        filter: none;
        opacity: 1;
    }
}

/* Title animation */
.intro-animate-title {
    opacity: 0; 
    position: relative;
    z-index: 11; 
    animation: title-reveal-smooth 0.5s ease-out 1.0s forwards;
}
@keyframes title-reveal-smooth {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}