/* ============================================================
   AG.STOREEZ — INTRO PREMIUM DA LOGO
   ============================================================ */

body.ag-intro-active {
    overflow: hidden;
}

.ag-logo-intro,
.ag-logo-intro * {
    box-sizing: border-box;
}

.ag-logo-intro {
    position: fixed;
    inset: 0;
    z-index: 20000;
    visibility: visible;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(124, 58, 237, 0.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 15%,
            rgba(139, 92, 246, 0.07),
            transparent 30%
        ),
        #050507;
    opacity: 1;
    transition:
        opacity 520ms ease,
        visibility 520ms ease;
}

.ag-logo-intro.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   FUNDO
   ============================================================ */

.ag-logo-intro-grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 74%
        );
    pointer-events: none;
}

.ag-logo-intro-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(680px, 90vw);
    height: min(360px, 55vw);
    background:
        rgba(124, 58, 237, 0.17);
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(0.7);
    animation:
        agIntroGlow
        1500ms
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}

@keyframes agIntroGlow {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.55);
    }

    45% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.25;
        transform:
            translate(-50%, -50%)
            scale(1.15);
    }
}

/* ============================================================
   PARTÍCULAS
   ============================================================ */

.ag-logo-intro-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ag-logo-intro-particle {
    position: absolute;
    width: var(--particle-size, 3px);
    height: var(--particle-size, 3px);
    background:
        #a78bfa;
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 13px
        rgba(167, 139, 250, 0.65);
    animation:
        agIntroParticleFloat
        var(--particle-duration, 1700ms)
        ease-out
        var(--particle-delay, 0ms)
        forwards;
}

@keyframes agIntroParticleFloat {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 25px, 0)
            scale(0.45);
    }

    28% {
        opacity: 0.65;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--particle-move-x, 18px),
                -130px,
                0
            )
            scale(1.12);
    }
}

/* ============================================================
   CONTEÚDO
   ============================================================ */

.ag-logo-intro-content {
    position: relative;
    z-index: 3;
    width: min(640px, calc(100% - 32px));
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

.ag-logo-intro-mark {
    position: relative;
    width: min(390px, 78vw);
    opacity: 0;
    transform:
        translateY(18px)
        scale(0.82);
    animation:
        agIntroLogoEnter
        920ms
        cubic-bezier(0.16, 1, 0.3, 1)
        80ms
        forwards;
}

@keyframes agIntroLogoEnter {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform:
            translateY(20px)
            scale(0.78);
    }

    62% {
        opacity: 1;
        filter: blur(0);
        transform:
            translateY(-3px)
            scale(1.035);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform:
            translateY(0)
            scale(1);
    }
}

.ag-logo-intro-image-shell {
    position: relative;
    overflow: hidden;
    padding: 7px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.015)
        );
    border:
        1px solid
        rgba(167, 139, 250, 0.2);
    border-radius: 27px;
    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.55),
        0 22px 65px
        rgba(124, 58, 237, 0.17);
}

.ag-logo-intro-image-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background:
        linear-gradient(
            135deg,
            rgba(196, 181, 253, 0.55),
            transparent 34%,
            transparent 67%,
            rgba(124, 58, 237, 0.5)
        );
    border-radius: inherit;
    opacity: 0.52;
}

.ag-logo-intro-image {
    width: 100%;
    max-height: 240px;
    display: block;
    object-fit: contain;
    background: #08080c;
    border-radius: 20px;
}

/* ============================================================
   BRILHO SOBRE A LOGO
   ============================================================ */

.ag-logo-intro-shine {
    position: absolute;
    top: -35%;
    left: -60%;
    width: 27%;
    height: 175%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            rgba(196, 181, 253, 0.42),
            transparent
        );
    filter: blur(1px);
    transform: rotate(20deg);
    animation:
        agIntroLogoShine
        950ms
        ease
        500ms
        forwards;
}

@keyframes agIntroLogoShine {
    from {
        left: -60%;
    }

    to {
        left: 145%;
    }
}

/* ============================================================
   ANÉIS DECORATIVOS
   ============================================================ */

.ag-logo-intro-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border:
        1px solid
        rgba(167, 139, 250, 0.1);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.ag-logo-intro-ring-one {
    width: 460px;
    height: 460px;
    animation:
        agIntroRing
        1350ms
        ease-out
        120ms
        forwards;
}

.ag-logo-intro-ring-two {
    width: 620px;
    height: 620px;
    animation:
        agIntroRing
        1450ms
        ease-out
        250ms
        forwards;
}

@keyframes agIntroRing {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.55);
    }

    45% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.15);
    }
}

/* ============================================================
   TEXTO
   ============================================================ */

.ag-logo-intro-label {
    margin-top: 21px;
    color: #c4b5fd;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 3.1px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    animation:
        agIntroTextEnter
        500ms
        ease
        560ms
        forwards;
}

.ag-logo-intro-subtitle {
    margin-top: 6px;
    color: #696976;
    font-size: 10px;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(7px);
    animation:
        agIntroTextEnter
        500ms
        ease
        660ms
        forwards;
}

@keyframes agIntroTextEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   BARRA DE PROGRESSO
   ============================================================ */

.ag-logo-intro-progress {
    width: min(270px, 66vw);
    height: 3px;
    margin-top: 24px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    opacity: 0;
    animation:
        agIntroTextEnter
        350ms
        ease
        720ms
        forwards;
}

.ag-logo-intro-progress span {
    display: block;
    width: 0;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #6d28d9,
            #a78bfa,
            #c4b5fd
        );
    border-radius: inherit;
    box-shadow:
        0 0 15px
        rgba(167, 139, 250, 0.55);
    animation:
        agIntroProgress
        1050ms
        cubic-bezier(0.2, 0.8, 0.2, 1)
        330ms
        forwards;
}

@keyframes agIntroProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ============================================================
   BOTÃO PULAR
   ============================================================ */

.ag-logo-intro-skip {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 5;
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    background:
        rgba(255, 255, 255, 0.035);
    color: #777783;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
    opacity: 0;
    animation:
        agIntroTextEnter
        350ms
        ease
        550ms
        forwards;
    transition:
        color 170ms ease,
        background-color 170ms ease,
        border-color 170ms ease,
        transform 170ms ease;
}

.ag-logo-intro-skip:hover {
    background:
        rgba(124, 58, 237, 0.12);
    color: #c4b5fd;
    border-color:
        rgba(167, 139, 250, 0.25);
    transform: translateY(-2px);
}

/* ============================================================
   SAÍDA
   ============================================================ */

.ag-logo-intro.leaving
.ag-logo-intro-content {
    animation:
        agIntroContentLeave
        500ms
        cubic-bezier(0.4, 0, 1, 1)
        forwards;
}

@keyframes agIntroContentLeave {
    to {
        opacity: 0;
        filter: blur(6px);
        transform:
            translateY(-15px)
            scale(1.045);
    }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 600px) {
    .ag-logo-intro-mark {
        width: min(330px, 84vw);
    }

    .ag-logo-intro-image-shell {
        padding: 5px;
        border-radius: 22px;
    }

    .ag-logo-intro-image {
        border-radius: 17px;
    }

    .ag-logo-intro-label {
        margin-top: 18px;
        font-size: 8px;
        letter-spacing: 2.6px;
    }

    .ag-logo-intro-subtitle {
        font-size: 9px;
    }

    .ag-logo-intro-skip {
        right: 14px;
        bottom: 14px;
    }

    .ag-logo-intro-ring-one {
        width: 340px;
        height: 340px;
    }

    .ag-logo-intro-ring-two {
        width: 470px;
        height: 470px;
    }
}

/* ============================================================
   REDUÇÃO DE MOVIMENTO
   ============================================================ */

@media (
    prefers-reduced-motion:
    reduce
) {
    .ag-logo-intro {
        display: none !important;
    }
}

body:has(.ag-logo-intro) .app-loader {
    display: none !important;
}