/* CDP Block — Hero Estádio | Passo 8 */

.cdp-hero-stadium {
    position:         relative;
    min-height:       var(--hero-min-height, 480px);
    max-height:       640px;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    overflow:         hidden;
    background:       linear-gradient(135deg, #003087 0%, #001a50 100%);
    color:            #fff;
}

/* ── Vídeo de fundo ──────────────────────────────────────────────────────── */
.cdp-hero-stadium__video-wrap {
    position:   absolute;
    inset:      0;
    z-index:    0;
}

.cdp-hero-stadium__video {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    .55;
    will-change: transform; /* compositor layer */
}

.cdp-hero-stadium__overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(
        135deg,
        rgba(0,  48, 135, var(--overlay-opacity, .65)) 0%,
        rgba(0,  0,   0,  calc(var(--overlay-opacity, .65) * 0.8)) 100%
    );
}

/* ── Conteúdo ────────────────────────────────────────────────────────────── */
.cdp-hero-stadium__content {
    position:        relative;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             1.5rem;
    padding-block:   4rem 6rem;
}

/* ── Holografia ───────────────────────────────────────────────────────────── */
.cdp-hero-stadium__hologram {
    /* Bug 2: 200px mínimo para acomodar TorusGeometry(0.8,0.3) com câmera z=3, FOV=45 */
    width:     200px;
    height:    200px;
    /* Bug 5: min-height evita colapso antes do canvas WebGL montar */
    min-height: 200px;
    /* Bug 6: contexto de empilhamento para os filhos absolute */
    position:  relative;
    /* Bug 3: contém o canvas WebGL que transbordava para seções abaixo */
    overflow:  hidden;
}

.cdp-escudo-svg-fallback {
    filter:    drop-shadow(0 0 16px rgba(200,169,81,.6));
    animation: cdp-holo-pulse 3s ease-in-out infinite;
}

@keyframes cdp-holo-pulse {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(200,169,81,.4)); }
    50%       { filter: drop-shadow(0 0 32px rgba(200,169,81,.9)); }
}

/* ── Texto ────────────────────────────────────────────────────────────────── */
.cdp-hero-stadium__title {
    font-family:    'Bebas Neue', sans-serif;
    font-size:      clamp(3rem, 10vw, 7rem);
    line-height:    1;
    letter-spacing: .04em;
    margin:         0;
    background:     linear-gradient(135deg, #fff 40%, #C8A951 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cdp-hero-stadium__subtitle {
    font-size:  clamp(1rem, 2.5vw, 1.35rem);
    opacity:    .8;
    max-width:  600px;
    margin:     0;
}

/* ── Ações ────────────────────────────────────────────────────────────────── */
.cdp-hero-stadium__actions {
    display:     flex;
    gap:         1rem;
    flex-wrap:   wrap;
    justify-content: center;
    margin-top:  .5rem;
}

.cdp-btn--glass {
    background:   rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border:       1px solid rgba(255,255,255,.25);
    color:        #fff;
    padding:      .6rem 1.4rem;
    border-radius:var(--r-full, 9999px);
    font-weight:  600;
    cursor:       pointer;
    transition:   background .2s, transform .2s;
}

.cdp-btn--glass:hover,
.cdp-btn--glass.active { background: rgba(0,48,135,.8); transform: translateY(-2px); }
.cdp-btn--glass.active { border-color: #e74c3c; background: rgba(231,76,60,.8); }

.cdp-btn--lg { padding: .75rem 2rem; font-size: 1.05rem; }

/* ── Próximo jogo ─────────────────────────────────────────────────────────── */
.cdp-hero-stadium__next-match {
    display:       flex;
    gap:           .75rem;
    align-items:   center;
    flex-wrap:     wrap;
    justify-content:center;
    background:    rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    border:        1px solid rgba(255,255,255,.15);
    border-radius: 40px;
    padding:       .5rem 1.25rem;
    font-size:     .88rem;
}

.cdp-hero-stadium__next-label   { opacity: .65; }
.cdp-hero-stadium__next-teams   { font-weight: 700; }
.cdp-hero-stadium__next-date    { color: #C8A951; }

/* ── Scroll hint ──────────────────────────────────────────────────────────── */
.cdp-hero-stadium__scroll-hint {
    position:  absolute;
    bottom:    1.5rem;
    left:      50%;
    transform: translateX(-50%);
    z-index:   2;
}

.cdp-hero-stadium__scroll-arrow {
    display:    block;
    font-size:  1.5rem;
    animation:  cdp-bounce 2s ease-in-out infinite;
    opacity:    .6;
}

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

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* mantém proporção mínima; 120px ainda acomoda o torus sem corte */
    .cdp-hero-stadium__hologram { width: 120px; height: 120px; min-height: 120px; }
    .cdp-hero-stadium__actions  { flex-direction: column; align-items: center; }
}

/* ── Hologram Controls Panel ─────────────────────────────────────────────── */
.cdp-hologram-wrap {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .75rem;
    /* Bug 7: ocupa largura total para o fundo escuro cobrir toda a faixa */
    width:           100%;
    box-sizing:      border-box;
}

.cdp-hologram-controls {
    display:         flex;
    gap:             .4rem;
    flex-wrap:       wrap;
    justify-content: center;
    background:      rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
    border:          1px solid rgba(255, 255, 255, .12);
    border-radius:   40px;
    padding:         .35rem .6rem;
}

.cdp-holo-btn {
    display:         flex;
    align-items:     center;
    gap:             .3rem;
    background:      transparent;
    border:          1px solid transparent;
    border-radius:   20px;
    color:           rgba(255, 255, 255, .7);
    font-size:       .72rem;
    font-weight:     600;
    letter-spacing:  .03em;
    padding:         .3rem .65rem;
    cursor:          pointer;
    transition:      background .18s, color .18s, border-color .18s, transform .15s;
    white-space:     nowrap;
    line-height:     1;
}

.cdp-holo-btn svg {
    flex-shrink: 0;
    transition: transform .3s;
}

.cdp-holo-btn:hover {
    background:    rgba(255, 255, 255, .12);
    color:         #fff;
    border-color:  rgba(255, 255, 255, .2);
    transform:     translateY(-1px);
}

/* Estado ativo genérico */
.cdp-holo-btn[aria-pressed="true"] {
    background:   rgba(0, 48, 135, .7);
    border-color: rgba(200, 169, 81, .5);
    color:        #C8A951;
}

/* Off state */
.cdp-holo-btn[aria-pressed="false"]:not(.cdp-holo-btn--premium) {
    opacity: .5;
}

/* Premium — dourado quando ativo */
.cdp-holo-btn--premium[aria-pressed="true"] {
    background:   rgba(200, 169, 81, .2);
    border-color: #C8A951;
    color:        #ffd700;
}

.cdp-holo-btn--premium[aria-pressed="true"] svg {
    fill:   #ffd700;
    stroke: #ffd700;
}

/* Screenshot — feedback visual ao clicar */
.cdp-holo-btn--screenshot.cdp-capturing svg {
    animation: cdp-shutter .3s ease;
}

@keyframes cdp-shutter {
    0%   { transform: scale(1.4); opacity: .5; }
    100% { transform: scale(1);   opacity: 1; }
}

/* Spin — ícone roda quando ativo */
.cdp-holo-btn--spin[aria-pressed="true"] svg {
    animation: cdp-spin-icon 2s linear infinite;
}

@keyframes cdp-spin-icon {
    to { transform: rotate(360deg); }
}

/* ── Hologram OFF state ───────────────────────────────────────────────────── */
#escudo-hologram.cdp-holo-off,
#escudo-hologram-modal.cdp-holo-off {
    opacity:    0;
    pointer-events: none;
    transition: opacity .4s;
}

/* ── Modal Fullscreen ────────────────────────────────────────────────────── */
.cdp-holo-modal {
    position:  fixed;
    inset:     0;
    z-index:   9999;
    display:   flex;
    align-items:    center;
    justify-content: center;
}

.cdp-holo-modal[hidden] { display: none; }

.cdp-holo-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(6px);
}

.cdp-holo-modal__inner {
    position:        relative;
    z-index:         1;
    width:           min(90vw, 600px);
    height:          min(90vw, 600px);
    border-radius:   16px;
    overflow:        hidden;
    border:          1px solid rgba(200, 169, 81, .3);
    box-shadow:      0 0 60px rgba(0, 48, 135, .6), 0 0 20px rgba(200, 169, 81, .2);
    animation:       cdp-modal-in .28s cubic-bezier(.34, 1.56, .64, 1);
}

.cdp-holo-modal__canvas {
    width:  100%;
    height: 100%;
}

@keyframes cdp-modal-in {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.cdp-holo-modal__close {
    position:      absolute;
    top:           .75rem;
    right:         .75rem;
    z-index:       2;
    background:    rgba(0, 0, 0, .5);
    border:        1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color:         #fff;
    width:         36px;
    height:        36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    background .18s;
}

.cdp-holo-modal__close:hover { background: rgba(231, 76, 60, .7); }

/* Mobile */
@media (max-width: 640px) {
    .cdp-hologram-controls { gap: .25rem; padding: .3rem .4rem; }
    .cdp-holo-btn span     { display: none; }
    .cdp-holo-btn          { padding: .35rem .45rem; }
}