/*
 * Cruzeiro do Povo v2 — Modo Estádio CSS
 * Overlay de vídeo full-bleed + controles de volume + flash de gol.
 * Sofia Flux — UX/UI | Victor Boost — Performance | Passo 8
 */

/* ── Overlay de vídeo ────────────────────────────────────────────────────── */
.cdp-stadium-overlay {
    position:       fixed;
    inset:          0;
    z-index:        -1;
    pointer-events: none;
    will-change:    transform; /* GPU layer */
}

.cdp-stadium-video {
    position:   absolute;
    top:        50%;
    left:       50%;
    min-width:  100%;
    min-height: 100%;
    width:      auto;
    height:     auto;
    transform:  translate(-50%, -50%);
    object-fit: cover;
}

.cdp-stadium-gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        160deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 48, 135, 0.45) 60%,
        rgba(0, 0, 0, 0.65) 100%
    );
}

/* ── Body em modo estádio ─────────────────────────────────────────────────── */
.cdp-stadium-active .site-header {
    background:      rgba(0, 48, 135, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:   1px solid rgba(200, 169, 81, 0.3);
}

.cdp-stadium-active .cdp-post__content,
.cdp-stadium-active .cdp-card,
.cdp-stadium-active article.cdp-post {
    background:    rgba(10, 10, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
}

/* ── Botão de toggle ────────────────────────────────────────────────────────── */
#stadium-mode-toggle,
.cdp-stadium-toggle {
    position:        fixed;
    bottom:          24px;
    right:           24px;
    z-index:         9000;
    background:      rgba(10, 10, 30, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid rgba(255, 255, 255, 0.2);
    border-radius:   40px;
    padding:         10px 20px;
    color:           #fff;
    font-weight:     700;
    font-size:       .85rem;
    cursor:          pointer;
    transition:      background .25s ease, transform .2s ease;
    white-space:     nowrap;
    user-select:     none;
}

#stadium-mode-toggle:hover,
.cdp-stadium-toggle:hover {
    background:  rgba(0, 48, 135, 0.9);
    transform:   scale(1.04);
}

.cdp-stadium-toggle--active {
    background:  rgba(192, 57, 43, 0.9) !important;
    animation:   cdp-stadium-pulse 2s ease-in-out infinite;
}

@keyframes cdp-stadium-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.6); }
    50%       { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); }
}

/* ── Controle de volume ──────────────────────────────────────────────────── */
.cdp-stadium-volume {
    position:        fixed;
    bottom:          24px;
    left:            24px;
    z-index:         9000;
    background:      rgba(10, 10, 30, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid rgba(255, 255, 255, 0.15);
    border-radius:   40px;
    padding:         8px 16px;
    display:         flex;
    align-items:     center;
    gap:             10px;
    animation:       cdp-slide-up .3s ease-out;
}

.cdp-stadium-volume__icon {
    background:  none;
    border:      none;
    font-size:   1.1rem;
    cursor:      pointer;
    padding:     0;
    line-height: 1;
}

.cdp-stadium-volume__slider {
    width:       100px;
    accent-color: #C8A951;
    cursor:      pointer;
}

.cdp-stadium-volume__label {
    font-size: .72rem;
    color:     rgba(255,255,255,.6);
    min-width: 32px;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.cdp-stadium-toast {
    position:      fixed;
    bottom:        100px;
    right:         24px;
    z-index:       9001;
    background:    linear-gradient(135deg, #003087, #1B5BBF);
    color:         #fff;
    padding:       12px 24px;
    border-radius: 40px;
    font-size:     .88rem;
    font-weight:   600;
    box-shadow:    0 8px 24px rgba(0,0,0,.3);
    animation:     cdp-slide-in-right .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Flash de gol ─────────────────────────────────────────────────────────── */
.cdp-stadium-flash::after {
    content:        '';
    position:       fixed;
    inset:          0;
    z-index:        9999;
    pointer-events: none;
    background:     rgba(255, 215, 0, 0.35);
    animation:      cdp-goal-flash .6s ease-out forwards;
}

@keyframes cdp-goal-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Animações utilitárias ────────────────────────────────────────────────── */
@keyframes cdp-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes cdp-slide-in-right {
    from { transform: translateX(60px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Reduzir movimento (acessibilidade) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cdp-stadium-active .cdp-stadium-video { display: none; }
    .cdp-stadium-flash::after              { display: none; }
    .cdp-stadium-toggle--active            { animation: none; }
}

/* ── Mobile adjustments ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cdp-stadium-volume          { left: 12px; bottom: 80px; }
    #stadium-mode-toggle         { right: 12px; bottom: 24px; padding: 8px 14px; font-size: .78rem; }
    .cdp-stadium-volume__slider  { width: 70px; }
}