/* ==========================================================
   FUTURYCRAFT - CAMADA FUTURISTA DO PORTAL
   Polish final aplicado na Home (index) e nas páginas de
   Criadores (YouTuber / Streamer). Carregado SEMPRE por último.
   Visual: profundidade, entrada em camadas, scroll progressivo,
   parallax leve e microinterações. Nada de lógica/API/formato é
   alterado aqui — somente apresentação.
   Todas as animações usam transform/opacity (GPU-friendly).
   preferências reduced-motion são respeitadas.
========================================================== */

/* ---------- TOKENS ---------- */
:root{
    --fc-delay:90ms;
    --fc-orb-a:rgba(76,194,255,.16);
    --fc-orb-b:rgba(123,92,255,.16);
}

/* ---------- BARRA DE PROGRESSO DE SCROLL ---------- */
.fc-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    z-index:1400;
    background:linear-gradient(90deg,#38bdf8,#2563eb,#7b5cff,#38bdf8);
    background-size:200% 100%;
    border-radius:0 999px 999px 0;
    box-shadow:0 0 14px rgba(56,189,248,.7), 0 0 4px rgba(123,92,255,.6);
    pointer-events:none;
    transition:width .05s linear;
}

/* ---------- NAVBAR PREMIUM ---------- */
.site-nav{
    transition:background var(--fc-motion), box-shadow var(--fc-motion), border-color var(--fc-motion);
}

.site-nav.fc-scrolled{
    background:rgba(3,6,12,.82);
    border-bottom-color:rgba(76,194,255,.4);
    box-shadow:0 12px 38px rgba(0,0,0,.55), 0 1px 0 rgba(76,194,255,.25), inset 0 -1px 0 rgba(76,194,255,.08);
}

.site-nav.fc-scrolled .site-nav-inner{
    padding-top:.42rem;
    padding-bottom:.42rem;
}

.site-nav-inner{
    transition:padding var(--fc-motion);
}

/* ---------- ENTRADA DO HERO (em camadas) ---------- */
html.fc-enter .hero-staff-inner > *{
    opacity:0;
    animation:fcHeroRise .8s cubic-bezier(.22,.61,.36,1) forwards;
}

html.fc-enter .hero-staff-inner > :nth-child(1){ animation-delay:.06s; }
html.fc-enter .hero-staff-inner > :nth-child(2){ animation-delay:.16s; }
html.fc-enter .hero-staff-inner > :nth-child(3){ animation-delay:.26s; }
html.fc-enter .hero-staff-inner > :nth-child(4){ animation-delay:.36s; }
html.fc-enter .hero-staff-inner > :nth-child(5){ animation-delay:.48s; }
html.fc-enter .hero-staff-inner > :nth-child(6){ animation-delay:.58s; }
html.fc-enter .hero-staff-inner > :nth-child(7){ animation-delay:.68s; }

html.fc-enter .hero-staff{
    animation:fcHeroIn .9s ease both;
}

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

@keyframes fcHeroRise{
    from{ opacity:0; transform:translate3d(0,26px,0); }
    to{ opacity:1; transform:translate3d(0,0,0); }
}

/* ---------- PROFUNDIDADE: ORBs NO HERO ---------- */
.hero-staff::before,
.hero-staff::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    will-change:transform;
}

.hero-staff .hero-glow,
.hero-staff .hero-grid,
.hero-staff .hero-staff-inner{
    z-index:1;
}

.hero-staff::before{
    width:520px;
    height:520px;
    top:-16%;
    left:-12%;
    background:radial-gradient(circle at 40% 40%,var(--fc-orb-a),transparent 68%);
    animation:fcOrbFloat 18s ease-in-out infinite alternate;
}

.hero-staff::after{
    width:460px;
    height:460px;
    bottom:-18%;
    right:-10%;
    background:radial-gradient(circle at 60% 60%,var(--fc-orb-b),transparent 66%);
    animation:fcOrbFloat2 22s ease-in-out infinite alternate;
}

@keyframes fcOrbFloat{
    from{ transform:translate3d(0,0,0) scale(1); }
    to{ transform:translate3d(46px,34px,0) scale(1.12); }
}

@keyframes fcOrbFloat2{
    from{ transform:translate3d(0,0,0) scale(1); }
    to{ transform:translate3d(-40px,-28px,0) scale(1.08); }
}

/* ---------- REVEAL COM STAGGER (por item, sem quebrar home.js) ---------- */
html.js-reveal .reveal.revealed{
    transition-delay:calc((var(--fc-i, 1) - 1) * var(--fc-delay));
}

/* ---------- TIMELINE "COMO FUNCIONA" (energia fluindo) ---------- */
.step-link::before{
    background:linear-gradient(90deg,rgba(76,194,255,.15),rgba(76,194,255,.85),rgba(123,92,255,.55),rgba(76,194,255,.15));
    background-size:220% 100%;
    animation:fcStepFlow 3.2s linear infinite;
}

@keyframes fcStepFlow{
    from{ background-position:220% 0; }
    to{ background-position:-220% 0; }
}

.step-node .step-icon{
    position:relative;
    overflow:visible;
}

.step-node .step-icon::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1px solid rgba(76,194,255,.4);
    opacity:0;
    pointer-events:none;
}

.step-node:hover .step-icon::after{
    animation:fcPing 1.6s cubic-bezier(.22,.61,.36,1) infinite;
}

@keyframes fcPing{
    0%{ opacity:.7; transform:scale(.8); }
    70%,100%{ opacity:0; transform:scale(1.45); }
}

/* ---------- CARDS DE CARGO (microinterações + glow no cursor) ---------- */
.role-tile{
    isolation:isolate;
}

.role-tile::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(220px circle at var(--fc-mx,50%) var(--fc-my,50%), color-mix(in srgb,var(--role-accent,#4cc2ff) 26%, transparent), transparent 70%);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--fc-motion);
    z-index:0;
}

.role-tile:hover::after{
    opacity:1;
}

.role-tile > *{
    position:relative;
    z-index:1;
}

.role-icon{
    transition:transform var(--fc-motion), box-shadow var(--fc-motion);
}

.role-tile:hover .role-icon{
    transform:translateY(-3px) scale(1.06) rotate(-4deg);
    box-shadow:0 8px 26px color-mix(in srgb,var(--role-accent,#4cc2ff) 34%, transparent);
}

.role-tile:hover .role-name{
    color:var(--role-accent,#4cc2ff);
}

.role-tile:hover .role-more i{
    transform:translateX(3px);
}

.role-more i{
    transition:transform var(--fc-motion);
}

/* ---------- HIERARQUIA (linha energizada) ---------- */
.hier-link{
    background:linear-gradient(90deg,rgba(76,194,255,.28),rgba(123,92,255,.75),rgba(76,194,255,.28));
    background-size:220% 100%;
    animation:fcStepFlow 4.4s linear infinite;
}

.hier-dot{
    animation:fcDotPulse 2.8s ease-in-out infinite;
}

@keyframes fcDotPulse{
    0%,100%{ box-shadow:0 0 10px rgba(76,194,255,.55); }
    50%{ box-shadow:0 0 22px rgba(76,194,255,.95); }
}

/* ---------- O QUE PROCURAMOS (cards) ---------- */
.value-panel,
.reason-card{
    position:relative;
}

.value-panel::after,
.reason-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(240px circle at var(--fc-mx,50%) var(--fc-my,50%), rgba(76,194,255,.14), transparent 70%);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--fc-motion);
}

.value-panel:hover::after,
.reason-card:hover::after{
    opacity:1;
}

.value-panel li i,
.value-kicker i{
    transition:transform var(--fc-motion), background var(--fc-motion);
}

.value-panel:hover li i{
    transform:scale(1.14) rotate(-6deg);
    background:rgba(52,211,153,.26);
}

.reason-icon{
    transition:transform var(--fc-motion), box-shadow var(--fc-motion);
}

.reason-card:hover .reason-icon{
    transform:translateY(-4px) rotate(-5deg) scale(1.05);
    box-shadow:0 10px 30px rgba(123,92,255,.3);
}

/* ---------- CTA (aura pulsante) ---------- */
.cta-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(560px 300px at 50% -18%, rgba(76,194,255,.2), rgba(123,92,255,.1) 45%, transparent 72%);
    opacity:0;
    pointer-events:none;
    z-index:0;
    transition:opacity .7s ease;
    animation:fcAura 5s ease-in-out infinite;
}

.cta-box > *{
    position:relative;
    z-index:1;
}

.cta-box.revealed::after{
    opacity:.9;
}

@keyframes fcAura{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(0,-8px,0) scale(1.04); }
}

/* ---------- BOTÕES (shine sweep) ---------- */
.btn-staff{
    position:relative;
    overflow:hidden;
    z-index:0;
}

.btn-staff::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-60%;
    width:45%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    z-index:1;
    pointer-events:none;
    transition:left .65s ease;
}

.btn-staff:hover::before{
    left:130%;
}

.btn-staff > i,
.btn-staff > span{
    position:relative;
    z-index:2;
}

/* ---------- FOOTER (glow superior) ---------- */
.home-footer{
    position:relative;
}

.home-footer::before{
    content:"";
    position:absolute;
    top:-1px;
    left:10%;
    right:10%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(76,194,255,.7), rgba(123,92,255,.6), transparent);
    pointer-events:none;
}

.foot-brand img{
    filter:drop-shadow(0 0 14px rgba(0,217,255,.35));
    transition:filter var(--fc-motion), transform var(--fc-motion);
}

.foot-brand:hover img{
    filter:drop-shadow(0 0 22px rgba(0,217,255,.6));
    transform:translateY(-2px);
}

/* ---------- CRIADORES (same finish) ---------- */
html.fc-enter .creators-hero > .hero-logo,
html.fc-enter .creators-hero > .sec-badge,
html.fc-enter .creators-hero > .hero-title,
html.fc-enter .creators-hero > .hero-sub,
html.fc-enter .creators-hero > .creators-note,
html.fc-enter .creators-hero > .creators-prog{
    opacity:0;
    animation:fcHeroRise .8s cubic-bezier(.22,.61,.36,1) forwards;
}

html.fc-enter .creators-hero > .hero-logo{ animation-delay:.06s; }
html.fc-enter .creators-hero > .sec-badge{ animation-delay:.14s; }
html.fc-enter .creators-hero > .hero-title{ animation-delay:.24s; }
html.fc-enter .creators-hero > .hero-sub{ animation-delay:.34s; }
html.fc-enter .creators-hero > .creators-note{ animation-delay:.46s; }
html.fc-enter .creators-hero > .creators-prog{ animation-delay:.58s; }

/* ---------- PARALLAX LEVE (hero) ---------- */
.fc-parallax .hero-glow,
.fc-parallax .hero-grid,
.fc-parallax .hero-staff-inner{
    transform:translate3d(0,0,0);
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
    .hero-staff::before,
    .hero-staff::after{
        display:none;
    }

    .fc-progress{
        height:2px;
    }
}

@media (max-width:640px){
    .step-link::before{
        background-size:100% 220%;
        animation-name:fcStepFlowV;
    }

    @keyframes fcStepFlowV{
        from{ background-position:0 220%; }
        to{ background-position:0 -220%; }
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    .fc-progress{
        display:none;
    }

    html.fc-enter .hero-staff-inner > *,
    html.fc-enter .creators-hero > .hero-logo,
    html.fc-enter .creators-hero > .sec-badge,
    html.fc-enter .creators-hero > .hero-title,
    html.fc-enter .creators-hero > .hero-sub,
    html.fc-enter .creators-hero > .creators-note,
    html.fc-enter .creators-hero > .creators-prog{
        opacity:1 !important;
        animation:none !important;
    }

    .hero-staff::before,
    .hero-staff::after,
    .step-link::before,
    .hier-link,
    .hier-dot,
    .cta-box::after{
        animation:none !important;
    }
}