/* ==========================================================
   ADRIOCLARO — PREMIUM EXPERIENCE V410
   ========================================================== */


/* ==========================================================
   HEADER FIXO — VIDRO / PROFUNDIDADE
   ========================================================== */

.header{
    background:rgba(1,0,37,.94) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(135%) !important;

    backdrop-filter:
        blur(16px)
        saturate(135%) !important;

    box-shadow:
        0 10px 35px rgba(1,0,37,.16),
        inset 0 -1px 0 rgba(255,255,255,.08) !important;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease !important;
}

.header.premium-scrolled{
    background:rgba(1,0,37,.985) !important;

    box-shadow:
        0 15px 42px rgba(1,0,37,.24),
        inset 0 -1px 0 rgba(255,255,255,.09) !important;
}


/* brilho inferior */

.header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 5%,
            rgba(255,255,255,.16) 50%,
            transparent 95%
        );

    pointer-events:none;
}


/* ==========================================================
   MENU
   ========================================================== */

.header .nav a{
    position:relative !important;
}

.header .nav a:not(.cta)::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;

    width:0;
    height:1px;

    background:#fff;

    transform:translateX(-50%);

    transition:
        width .28s ease !important;
}

.header .nav a:not(.cta):hover::after{
    width:70%;
}


/* ==========================================================
   BOTÕES
   ========================================================== */

.btn,
.button,
a.btn,
button,
.header .nav .cta{
    position:relative;
    overflow:hidden;

    transition:
        transform .25s cubic-bezier(.2,.7,.2,1),
        box-shadow .25s ease,
        filter .25s ease !important;
}

.btn:hover,
.button:hover,
a.btn:hover,
.header .nav .cta:hover{
    transform:translateY(-3px) !important;

    box-shadow:
        0 14px 30px rgba(1,0,37,.15) !important;
}

.btn::before,
.button::before,
a.btn::before,
.header .nav .cta::before{
    content:"";

    position:absolute;

    top:-70%;
    left:-80%;

    width:42%;
    height:240%;

    transform:rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.34),
            transparent
        );

    transition:left .7s ease;
}

.btn:hover::before,
.button:hover::before,
a.btn:hover::before,
.header .nav .cta:hover::before{
    left:140%;
}


/* ==========================================================
   REVEAL UNIVERSAL
   ========================================================== */

.premium-reveal{
    opacity:0;

    transform:
        translate3d(0,32px,0);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.16,.76,.26,1);
}

.premium-reveal.premium-visible{
    opacity:1;

    transform:
        translate3d(0,0,0);
}


.premium-delay-1{
    transition-delay:.07s;
}

.premium-delay-2{
    transition-delay:.14s;
}

.premium-delay-3{
    transition-delay:.21s;
}


/* ==========================================================
   SEÇÕES
   ========================================================== */

main section{
    position:relative;
}

main section.premium-section::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:min(1180px,calc(100% - 40px));
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(1,0,37,.055),
            transparent
        );

    pointer-events:none;
}


/* ==========================================================
   CARDS UNIVERSAIS
   ========================================================== */

.premium-card{
    position:relative;

    transition:
        transform .35s cubic-bezier(.16,.76,.26,1),
        box-shadow .35s ease,
        border-color .35s ease !important;
}

.premium-card:hover{
    transform:
        translate3d(0,-7px,0) !important;

    box-shadow:
        0 22px 50px rgba(1,0,37,.105) !important;
}


/* borda luminosa sutil */

.premium-card::after{
    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    border:
        1px solid rgba(255,255,255,0);

    pointer-events:none;

    transition:
        border-color .3s ease;
}

.premium-card:hover::after{
    border-color:
        rgba(1,0,37,.07);
}


/* ==========================================================
   IMAGENS
   ========================================================== */

.premium-image-wrap{
    overflow:hidden;
}

.premium-image{
    transition:
        transform .9s cubic-bezier(.16,.76,.26,1),
        filter .6s ease !important;
}

.premium-image-wrap:hover .premium-image{
    transform:scale(1.055);
}


/* ==========================================================
   HERO
   ========================================================== */

.hero,
.page-hero{
    position:relative;
    overflow:hidden;
}

.hero::before,
.page-hero::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-180px;
    top:-260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025) 40%,
            transparent 72%
        );

    pointer-events:none;

    animation:
        premiumGlow 9s ease-in-out infinite alternate;
}


.hero::after,
.page-hero::after{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-230px;
    bottom:-300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.055),
            transparent 70%
        );

    pointer-events:none;
}


@keyframes premiumGlow{

    from{
        opacity:.55;
        transform:
            translate3d(-20px,-10px,0)
            scale(.96);
    }

    to{
        opacity:1;
        transform:
            translate3d(24px,18px,0)
            scale(1.06);
    }
}


/* ==========================================================
   TÍTULOS
   ========================================================== */

.section-head h2,
.page-hero h1,
.hero h1{
    position:relative;
}

.section-head h2::after{
    content:"";

    display:block;

    width:58px;
    height:2px;

    margin-top:15px;

    background:
        linear-gradient(
            90deg,
            #010025,
            rgba(1,0,37,.12)
        );

    transition:
        width .5s ease;
}

.section-head:hover h2::after{
    width:88px;
}


/* ==========================================================
   NÚMEROS / CONTADORES
   ========================================================== */

.premium-number{
    transition:
        transform .3s ease,
        text-shadow .3s ease;
}

.premium-number:hover{
    transform:scale(1.035);

    text-shadow:
        0 8px 30px rgba(1,0,37,.12);
}


/* ==========================================================
   BLOCOS ESCUROS
   ========================================================== */

.bg-dark,
.dark-section,
.donate-box,
[class*="dark"]{
    position:relative;
    overflow:hidden;
}

.bg-dark::before,
.dark-section::before,
.donate-box::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.028),
            transparent 38%,
            rgba(255,255,255,.018)
        );

    pointer-events:none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer{
    position:relative;
}

.footer::before{
    content:"";

    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:min(1180px,calc(100% - 40px));
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

    .premium-card:hover{
        transform:none !important;
    }

    .premium-reveal{
        transform:
            translate3d(0,20px,0);
    }

    .hero::before,
    .page-hero::before{
        width:360px;
        height:360px;

        right:-160px;
        top:-160px;
    }

}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }

    .premium-reveal{
        opacity:1 !important;
        transform:none !important;
    }
}

/* ==========================================================
   HEADER + MENU PREMIUM V420
   ========================================================== */

.header{
    position:sticky !important;
    top:45px !important;
    overflow:visible !important;

    background:
        linear-gradient(
            180deg,
            rgba(1,0,37,.985) 0%,
            rgba(4,3,48,.965) 100%
        ) !important;

    box-shadow:
        0 10px 35px rgba(1,0,37,.18),
        inset 0 -1px 0 rgba(255,255,255,.08) !important;

    transition:
        box-shadow .35s ease,
        background .35s ease,
        transform .35s ease !important;
}


/* brilho ambiente do header */

.header::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(255,255,255,.045),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(255,255,255,.025),
            transparent 32%
        );

    pointer-events:none;
}


/* linha luminosa inferior */

.header::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;

    width:min(1180px,calc(100% - 40px));
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.08) 18%,
            rgba(255,255,255,.34) 50%,
            rgba(255,255,255,.08) 82%,
            transparent 100%
        );

    box-shadow:
        0 0 12px rgba(255,255,255,.12);

    pointer-events:none;
}


/* estado ao rolar */

.header.premium-scrolled{
    background:
        linear-gradient(
            180deg,
            rgba(1,0,37,.995),
            rgba(1,0,37,.985)
        ) !important;

    box-shadow:
        0 16px 45px rgba(1,0,37,.28),
        inset 0 -1px 0 rgba(255,255,255,.10) !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

.header .brand,
.header .logo{
    position:relative !important;

    transition:
        transform .3s cubic-bezier(.2,.7,.2,1),
        filter .3s ease !important;
}

.header .brand:hover,
.header .logo:hover{
    transform:translateY(-2px) scale(1.015) !important;

    filter:
        drop-shadow(
            0 8px 16px
            rgba(255,255,255,.08)
        ) !important;
}


/* ==========================================================
   MENU PRINCIPAL
   ========================================================== */

.header .nav{
    position:relative !important;
}

.header .nav a{
    position:relative !important;

    padding-top:11px !important;
    padding-bottom:11px !important;

    transition:
        color .25s ease,
        opacity .25s ease,
        transform .25s ease !important;
}

.header .nav a:not(.cta):hover{
    transform:translateY(-1px) !important;
    opacity:1 !important;
}


/* underline animado */

.header .nav a:not(.cta)::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:5px;

    width:0;
    height:2px;

    border-radius:10px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.35),
            #ffffff,
            rgba(255,255,255,.35)
        );

    box-shadow:
        0 0 10px
        rgba(255,255,255,.18);

    transition:
        width .3s
        cubic-bezier(.2,.7,.2,1) !important;
}

.header .nav a:not(.cta):hover::after{
    width:72% !important;
}


/* item ativo */

.header .nav a.active{
    opacity:1 !important;
}

.header .nav a.active::after{
    width:72% !important;
}


/* ==========================================================
   CTA CONTATO
   ========================================================== */

.header .nav .cta{
    position:relative !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f2f2f6
        ) !important;

    color:#010025 !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.header .nav .cta:hover{
    transform:
        translateY(-2px)
        scale(1.025) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.16) !important;
}


/* brilho passando */

.header .nav .cta::before{
    content:"";
    position:absolute;

    top:-80%;
    left:-90%;

    width:40%;
    height:260%;

    transform:rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transition:left .7s ease;
}

.header .nav .cta:hover::before{
    left:145%;
}


/* ==========================================================
   HAMBURGER
   ========================================================== */

.header .menu,
.header .menu-btn{
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease !important;
}

.header .menu:hover,
.header .menu-btn:hover{
    transform:scale(1.06);

    background:
        rgba(255,255,255,.14) !important;

    border-color:
        rgba(255,255,255,.32) !important;
}


/* ==========================================================
   MOBILE MENU
   ========================================================== */

.mobile-nav{
    backdrop-filter:
        blur(16px)
        saturate(130%) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(130%) !important;

    background:
        rgba(1,0,37,.985) !important;
}

.mobile-nav a{
    position:relative !important;

    transition:
        padding-left .25s ease,
        background .25s ease !important;
}

.mobile-nav a:hover{
    padding-left:8px !important;

    background:
        rgba(255,255,255,.04) !important;
}


/* ==========================================================
   ANIMAÇÃO DE ENTRADA DO HEADER
   ========================================================== */

@keyframes adrcHeaderIn{

    from{
        opacity:0;
        transform:
            translateY(-14px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.header{
    animation:
        adrcHeaderIn .55s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:980px){

    .header{
        top:38px !important;
    }

    .header::after{
        width:calc(100% - 28px);
    }

    .header .nav a:not(.cta)::after{
        display:none !important;
    }
}


/* acessibilidade */

@media(prefers-reduced-motion:reduce){

    .header,
    .header *,
    .header *::before,
    .header *::after{
        animation:none !important;
        transition:none !important;
    }
}