/* ============================================
   AGIRAPOP! — XHERO (Hero Isolado v11)
   
   Classes prefixadas `x-` pra ZERO colisão com CSS legado.
   Este arquivo é AUTOSSUFICIENTE — não depende de nada.
   ============================================ */

/* ===== RESET LOCAL ===== */
.xhero,
.xhero *,
.xhero *::before,
.xhero *::after{
    box-sizing:border-box;
}

/* ===== SEÇÃO BASE ===== */
.xhero{
    position:relative;
    width:100%;
    min-height:88vh;
    overflow:hidden;
    background:linear-gradient(180deg,#0a1530 0%,#1E2C4F 50%,#0B1027 100%);
    padding:5rem 0 5rem;
    font-family:'Inter',system-ui,sans-serif;
    color:#F5F2EC;
}

/* ===== BACKGROUND ANIMADO (3 camadas) ===== */
.xhero-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.xhero-particles{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle, rgba(196,149,96,.2) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(196,149,96,.12) 1px, transparent 1.5px);
    background-size:32px 32px, 18px 18px;
    background-position:0 0, 9px 9px;
    animation:xParticlesDrift 28s linear infinite;
    opacity:.8;
}
@keyframes xParticlesDrift{
    0%   {background-position: 0 0, 9px 9px}
    100% {background-position: 32px 64px, 41px 73px}
}

.xhero-lines{
    position:absolute;
    inset:0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0, transparent 80px, rgba(160,120,64,.07) 80px, rgba(160,120,64,.07) 81px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 120px, rgba(107,15,26,.08) 120px, rgba(107,15,26,.08) 121px);
    animation:xLinesShift 22s linear infinite;
    mix-blend-mode:screen;
}
@keyframes xLinesShift{
    0%   {transform:translateX(0) translateY(0)}
    100% {transform:translateX(80px) translateY(80px)}
}

.xhero-vignette{
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center, transparent 35%, rgba(107,15,26,.2) 75%, rgba(107,15,26,.5) 100%);
    animation:xVignettePulse 6s ease-in-out infinite;
}
@keyframes xVignettePulse{
    0%,100% {opacity:.55; transform:scale(1)}
    50%     {opacity:.9; transform:scale(1.05)}
}

/* ===== GRID PRINCIPAL — agora 2 colunas (mascote é absoluto) ===== */
.xhero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 520px;
    gap:2rem;
    max-width:1440px;
    margin:0 auto;
    padding:0 2rem 0 clamp(360px, 32vw, 520px); /* espaço reservado pro mascote absoluto */
    align-items:center;
    min-height:75vh;
}

/* ===== MASCOTE: CANTO ESQUERDO ABSOLUTO (sangra de fora) ===== */
.xhero-mascot{
    position:absolute !important;
    left:0;
    top:0;
    bottom:0;
    width:clamp(400px, 38vw, 620px);
    height:100%;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    overflow:visible;
    pointer-events:none;
}
.xhero-mascot-img{
    display:block;
    width:auto;
    height:108%;
    max-width:none;
    max-height:100vh;
    object-fit:contain;
    object-position:left bottom;
    margin-left:-4%;
    margin-bottom:-2%;
    mix-blend-mode:screen;
    filter:drop-shadow(20px 0 30px rgba(0,0,0,.6))
           drop-shadow(0 0 60px rgba(107,15,26,.45))
           drop-shadow(0 0 120px rgba(196,149,96,.15));
    animation:xMascotEnter 1.6s cubic-bezier(.18,.89,.32,1.28) .2s both,
              xMascotBreath 6s ease-in-out 1.8s infinite;
    transform-origin:left bottom;
}
@keyframes xMascotEnter{
    0%   {opacity:0; transform:translateX(-80px) scale(.92)}
    100% {opacity:1; transform:translateX(0) scale(1)}
}
@keyframes xMascotBreath{
    0%,100% {filter:drop-shadow(20px 0 30px rgba(0,0,0,.6))
                    drop-shadow(0 0 60px rgba(107,15,26,.45))
                    drop-shadow(0 0 120px rgba(196,149,96,.15))}
    50%     {filter:drop-shadow(22px 0 34px rgba(0,0,0,.65))
                    drop-shadow(0 0 80px rgba(107,15,26,.6))
                    drop-shadow(0 0 140px rgba(196,149,96,.22))}
}

/* ===== COLUNA 2: TEXTO ===== */
.xhero-text{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    min-width:0;
}

.xhero-flag{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    align-self:flex-start;
    padding:.6rem 1.5rem;
    background:#1E2C4F;
    border:2px solid #A07840;
    border-radius:100px;
    color:#C49560;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.85rem;
    letter-spacing:.15em;
    box-shadow:3px 3px 0 #6B0F1A;
    opacity:0;
    animation:xFadeUp .7s cubic-bezier(.2,.9,.3,1.4) .1s forwards;
}

.xhero-title{
    display:flex;
    flex-direction:column;
    gap:.05em;
    margin:0;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:clamp(3rem, 6vw, 5.5rem);
    line-height:.95;
    letter-spacing:.02em;
}
.xhero-title .xword{
    display:block;
    opacity:0;
    transform:translateY(60px) rotateX(-30deg);
    transform-origin:center bottom;
    background-image:linear-gradient(110deg,
        #F5F2EC 0%, #F5F2EC 30%,
        #C49560 45%, #FFD89E 50%, #C49560 55%,
        #F5F2EC 70%, #F5F2EC 100%);
    background-size:200% 100%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(4px 4px 0 rgba(107,15,26,.75))
           drop-shadow(8px 8px 0 rgba(160,120,64,.5));
    animation:xWordSlideUp 1s cubic-bezier(.18,.89,.32,1.28) var(--d,0s) forwards,
              xShimmer 6s ease-in-out infinite;
    animation-delay:var(--d,0s), calc(var(--d,0s) + 1s);
}
@keyframes xWordSlideUp{
    0%   {opacity:0; transform:translateY(60px) rotateX(-30deg)}
    60%  {opacity:1; transform:translateY(-8px) rotateX(5deg)}
    100% {opacity:1; transform:translateY(0) rotateX(0)}
}
@keyframes xShimmer{
    0%,100% {background-position:200% center}
    50%     {background-position:-100% center}
}

.xhero-desc{
    margin:0;
    max-width:560px;
    color:#F5F2EC;
    font-size:1.05rem;
    line-height:1.6;
    opacity:0;
    animation:xFadeUp .7s cubic-bezier(.2,.9,.3,1.4) .75s forwards;
}
.xhero-desc strong{color:#C49560;font-weight:700}

.xhero-ctas{
    display:flex;
    gap:1.5rem;
    align-items:center;
    flex-wrap:wrap;
    opacity:0;
    animation:xFadeUp .7s cubic-bezier(.2,.9,.3,1.4) .9s forwards;
}

.xhero-btn{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    padding:1.1rem 2.2rem;
    background:#6B0F1A;
    color:#F5F2EC;
    border:3px solid #0B0B0B;
    border-radius:100px;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:1.15rem;
    letter-spacing:.08em;
    text-decoration:none;
    cursor:pointer;
    box-shadow:6px 6px 0 #A07840, 0 0 0 0 rgba(230,57,70,.6);
    transition:transform .25s cubic-bezier(.2,.9,.3,1.4);
    animation:xCtaGlow 2.4s ease-in-out infinite;
}
.xhero-btn:hover{transform:translateY(-3px)}
.xhero-btn svg{width:18px;height:14px;stroke:currentColor}
@keyframes xCtaGlow{
    0%,100% {box-shadow:6px 6px 0 #A07840, 0 0 0 0 rgba(230,57,70,.7)}
    50%     {box-shadow:6px 6px 0 #A07840, 0 0 0 16px rgba(230,57,70,0)}
}

.xhero-link{
    color:#C49560;
    text-decoration:none;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.95rem;
    letter-spacing:.1em;
    padding-bottom:.2rem;
    border-bottom:2px solid #A07840;
    transition:color .25s;
}
.xhero-link:hover{color:#FFD89E}

.xhero-stats{
    display:flex;
    gap:2.5rem;
    margin-top:1rem;
    opacity:0;
    animation:xFadeUp .7s cubic-bezier(.2,.9,.3,1.4) 1.05s forwards;
}
.xhero-stat{display:flex;flex-direction:column;gap:.3rem}
.xhero-stat-num{
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:2.4rem;
    color:#C49560;
    line-height:1;
    text-shadow:2px 2px 0 #6B0F1A;
}
.xhero-stat-label{
    font-size:.7rem;
    letter-spacing:.12em;
    color:#F5F2EC;
    opacity:.75;
    text-transform:uppercase;
    line-height:1.4;
}

@keyframes xFadeUp{
    0%   {opacity:0; transform:translateY(30px)}
    100% {opacity:1; transform:translateY(0)}
}

/* ===== COLUNA 2: STAGE DO CARROSSEL ===== */
.xhero-stage{
    position:relative;
    width:100%;
    min-height:720px;
    padding-top:280px; /* ESPAÇO AMPLO pro logo splash BEM acima */
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Logo cartoon SPLASH — bem acima, flutuando livre */
.xhero-logo{
    position:absolute;
    top:-170px;
    left:50%;
    transform:translateX(-50%) rotate(-6deg);
    width:clamp(300px, 28vw, 440px);
    height:auto;
    z-index:20;
    pointer-events:none;
    filter:drop-shadow(6px 6px 0 rgba(107,15,26,.95))
           drop-shadow(0 0 32px rgba(230,57,70,.6))
           drop-shadow(0 12px 24px rgba(0,0,0,.7));
    animation:xLogoEnter 1.4s cubic-bezier(.18,.89,.32,1.65) .8s both,
              xLogoSway 5s ease-in-out 2.2s infinite;
}
@keyframes xLogoEnter{
    0%   {opacity:0; transform:translateX(-50%) rotate(-30deg) scale(.3) translateY(-80px)}
    60%  {opacity:1; transform:translateX(-50%) rotate(-2deg) scale(1.08) translateY(6px)}
    100% {opacity:1; transform:translateX(-50%) rotate(-6deg) scale(1) translateY(0)}
}
@keyframes xLogoSway{
    0%,100% {transform:translateX(-50%) rotate(-6deg) translateY(0)}
    50%     {transform:translateX(-50%) rotate(-4deg) translateY(-8px)}
}

/* Badge AO VIVO — canto superior direito da caixa do carrossel */
.xhero-live{
    position:absolute;
    top:260px;
    right:-20px;
    z-index:22;
    background:#0B0B0B;
    color:#F5F2EC;
    padding:.55rem 1rem;
    border-radius:100px;
    border:3px solid #E63946;
    box-shadow:4px 4px 0 #A07840, 0 0 24px rgba(230,57,70,.45);
    display:flex;
    align-items:center;
    gap:.5rem;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.75rem;
    letter-spacing:.06em;
    transform:rotate(4deg);
    white-space:nowrap;
    animation:xBadgeFloat 4s ease-in-out infinite;
}
@keyframes xBadgeFloat{
    0%,100% {transform:rotate(4deg) translateY(0)}
    50%     {transform:rotate(4deg) translateY(-6px)}
}
.xhero-live-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:#FF1744;
    box-shadow:0 0 0 0 rgba(255,23,68,.7);
    animation:xLivePulse 1.8s ease-in-out infinite;
}
@keyframes xLivePulse{
    0%,100% {box-shadow:0 0 0 0 rgba(255,23,68,.8); transform:scale(1)}
    50%     {box-shadow:0 0 0 8px rgba(255,23,68,0); transform:scale(1.15)}
}
.xhero-live-text{color:#FF6B6B;font-weight:700}
.xhero-live-counter{color:#C49560;font-size:.95rem;font-weight:700}
.xhero-live-label{color:#F5F2EC;opacity:.85;font-size:.7rem}

/* Carrossel */
.xhero-carousel{
    position:relative;
    width:100%;
    max-width:440px;
    aspect-ratio:3 / 4.2;
    perspective:1200px;
    transform-style:preserve-3d;
}

.xhero-slide{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, #F5F2EC 0%, #E8DFCB 55%, #D4C49E 100%);
    border:4px solid #A07840;
    border-radius:14px;
    padding:1rem 1rem 1.2rem;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    box-shadow:
        0 0 0 6px #6B0F1A,
        12px 12px 0 #A07840,
        0 20px 40px rgba(0,0,0,.5);
    transform:translateX(0) rotateY(90deg) scale(.85);
    opacity:0;
    pointer-events:none;
    transition:transform .9s cubic-bezier(.18,.89,.32,1.28), opacity .6s ease;
    backface-visibility:hidden;
    cursor:pointer;
}
.xhero-slide.active{
    transform:translateX(0) rotateY(0) scale(1);
    opacity:1;
    pointer-events:auto;
    z-index:5;
    animation:xSlideEnter 1s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes xSlideEnter{
    0%   {transform:rotateY(-180deg) scale(.6); opacity:0}
    50%  {opacity:.5}
    100% {transform:rotateY(0) scale(1); opacity:1}
}
.xhero-carousel:hover .xhero-slide.active{animation-play-state:paused}

/* Top bar do slide: AGIRAPOP! tag + N° */
.xhero-slide-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.3rem .2rem;
}
.xhero-slide-tag{
    background:#E63946;
    color:#F5F2EC;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.85rem;
    padding:.2rem .7rem;
    border:2px solid #0B0B0B;
    border-radius:4px;
    letter-spacing:.05em;
}
.xhero-slide-num{
    background:#0B0B0B;
    color:#C49560;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.8rem;
    padding:.2rem .6rem;
    border-radius:4px;
    border:2px solid #A07840;
}

/* Janela do personagem */
.xhero-slide-window{
    flex:1;
    background:
        radial-gradient(circle, rgba(196,149,96,.2) 1.5px, transparent 2px) 0 0 / 14px 14px,
        linear-gradient(180deg, #2a0810 0%, #6B0F1A 100%);
    border:3px solid #0B0B0B;
    border-radius:8px;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 4px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(196,149,96,.15);
}
.xhero-slide-window.empty{
    background:
        radial-gradient(circle, rgba(196,149,96,.2) 1.5px, transparent 2px) 0 0 / 14px 14px,
        linear-gradient(180deg, #2a0810 0%, #6B0F1A 100%);
}
.xhero-slide-char-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    padding:4% 6% 0;
    mix-blend-mode:normal;
    filter:contrast(1.25) brightness(1.08) saturate(1.2)
           drop-shadow(0 8px 24px rgba(0,0,0,.7))
           drop-shadow(0 0 30px rgba(0,0,0,.4));
}
.xhero-slide-char-emoji{
    font-size:clamp(5rem, 10vw, 8rem);
    line-height:1;
    filter:drop-shadow(0 6px 20px rgba(0,0,0,.8))
           drop-shadow(0 0 35px rgba(255,216,158,.5))
           drop-shadow(4px 4px 0 rgba(0,0,0,.7));
}

/* Stamp (★ COMANDANTE · ELITE ★) */
.xhero-slide-stamp{
    position:absolute;
    top:48px;
    right:-8px;
    background:#6B0F1A;
    color:#F5F2EC;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.75rem;
    padding:.3rem .9rem;
    letter-spacing:.08em;
    border:2px solid #0B0B0B;
    transform:rotate(4deg);
    box-shadow:2px 2px 0 #A07840;
    z-index:3;
}

/* Nome do personagem */
.xhero-slide-name{text-align:center;padding:.2rem 0}
.xhero-slide-name-tag{
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:.7rem;
    letter-spacing:.15em;
    color:#6B0F1A;
    margin:0 0 .2rem;
    text-transform:uppercase;
}
.xhero-slide-name h3{
    margin:0;
    font-family:'Bebas Neue', Impact, sans-serif;
    font-size:1.5rem;
    color:#0B0B0B;
    letter-spacing:.02em;
}
.xhero-slide-name h3 small{
    display:block;
    font-size:.75rem;
    color:#6B0F1A;
    font-weight:400;
    margin-top:.1rem;
}

/* Placa A GIRA */
.xhero-slide-placa{
    background:linear-gradient(180deg, #1E2C4F 0%, #162139 100%);
    border:2px solid #A07840;
    border-radius:4px;
    padding:.5rem .8rem;
    text-align:center;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}
.xhero-slide-placa-title{
    font-family:'Cinzel', serif;
    font-size:1rem;
    color:#C49560;
    letter-spacing:.25em;
    line-height:1;
}
.xhero-slide-placa-sub{
    display:block;
    font-size:.55rem;
    color:#F5F2EC;
    letter-spacing:.15em;
    margin-top:.2rem;
    opacity:.8;
}

/* Dots de paginação */
.xhero-dots{
    position:absolute;
    bottom:-3rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:.6rem;
    z-index:6;
}
.xhero-dot{
    width:12px;height:12px;
    border-radius:50%;
    background:rgba(245,242,236,.25);
    border:2px solid transparent;
    cursor:pointer;
    transition:.3s cubic-bezier(.2,.9,.3,1.4);
    padding:0;
}
.xhero-dot:hover{background:rgba(245,242,236,.5);transform:scale(1.2)}
.xhero-dot.active{
    background:#C49560;
    border-color:#F5F2EC;
    width:32px;
    border-radius:6px;
    box-shadow:0 0 12px rgba(196,149,96,.6);
}

/* ===== RESPONSIVO ===== */
@media (max-width:1380px){
    .xhero-grid{
        grid-template-columns:1fr 460px;
        gap:1.5rem;
        padding:0 1.5rem 0 clamp(320px, 30vw, 460px);
    }
    .xhero-mascot{width:clamp(340px, 34vw, 520px)}
    .xhero-carousel{max-width:420px}
}

@media (max-width:1024px){
    .xhero-grid{
        grid-template-columns:1fr;
        gap:2rem;
        padding:0 1.5rem;
        min-height:auto;
    }
    .xhero-mascot{
        position:absolute !important;
        inset:0;
        width:100%;
        height:100%;
        min-height:0;
        z-index:0;
        opacity:.22;
        align-items:center;
        justify-content:center;
    }
    .xhero-mascot-img{
        height:100%;
        max-height:100vh;
        margin:0;
        object-position:center;
        animation:xMascotEnter 1.2s ease both;
    }
    .xhero-text{z-index:3;padding-top:2rem}
    .xhero-stage{padding-top:160px;min-height:560px}
    .xhero-logo{top:-60px}
    .xhero-live{top:140px;right:10px}
}

@media (max-width:768px){
    .xhero{padding:2rem 0 4rem;min-height:auto}
    .xhero-mascot{opacity:.18}
    .xhero-title{font-size:clamp(2.5rem, 12vw, 4rem)}
    .xhero-stage{padding-top:80px;min-height:520px}
    .xhero-logo{
        width:clamp(180px, 45vw, 260px);
    }
    .xhero-live{
        top:auto;
        bottom:-28px;
        right:50%;
        left:auto;
        margin-right:-90px;
        transform:rotate(0);
    }
    .xhero-stats{gap:1.5rem}
    .xhero-stat-num{font-size:2rem}
    .xhero-carousel{max-width:320px}
}

@media (max-width:480px){
    .xhero-grid{padding:0 1rem}
    .xhero-logo{width:clamp(150px, 50vw, 220px)}
    .xhero-ctas{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
    .xhero-particles,
    .xhero-lines,
    .xhero-vignette,
    .xhero-mascot-img,
    .xhero-title .xword,
    .xhero-logo,
    .xhero-live,
    .xhero-live-dot,
    .xhero-btn{
        animation:none !important;
    }
    .xhero-anim,
    .xhero-flag,
    .xhero-desc,
    .xhero-ctas,
    .xhero-stats{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
    }
    .xhero-title .xword{
        opacity:1 !important;
        transform:none !important;
    }
    .xhero-slide{transition:opacity .3s ease}
    .xhero-slide.active{transform:none;animation:none}
}