/* ==========================================================================
   YouSeller - Video Features Page Styles (Luxury High-End SaaS)
   ========================================================================== */

/* CAMADA DE TEXTURA DE PELÍCULA (FILM GRAIN GLOBAL) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz4KPGZpbHRlciBpZD0nbm9pc2VGaWx0ZXInPgo8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbm9pc2VGaWx0ZXIpJyBvcGFjaXR5PScwLjE1Jy8+Cjwvc3ZnPg==");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    mix-blend-mode: overlay;
}

/* AURORA GRADIENTS (ILUMINAÇÃO AMBIENTE LENTA) */
.aurora-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.22;
    mix-blend-mode: screen;
    transform: translateZ(0);
}

.orb-1 {
    top: -10%;
    left: 15%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #582EC8 0%, transparent 70%);
    animation: rotateAurora 25s infinite alternate ease-in-out;
}

.orb-2 {
    bottom: 10%;
    right: -5%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, #0A2A47 0%, transparent 70%);
    animation: rotateAurora 35s infinite alternate-reverse ease-in-out;
}

.orb-3 {
    top: 40%;
    left: -10%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, #00C87F 0%, transparent 70%);
    opacity: 0.08;
    animation: rotateAurora 30s infinite alternate ease-in-out 2s;
}

@keyframes rotateAurora {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(8%, 5%, 0) scale(1.15); }
}

/* GRELHA FINITA COM MÁSCARA RADIAL COMPLEXA */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black 20%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, black 20%, transparent 75%);
}

/* HIGH-FIDELITY GLASSMORPHISM VIDEO CARD */
.video-card {
    background: rgba(18, 10, 51, 0.5);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 4px 30px rgba(7, 3, 26, 0.45),
        inset 0 1px 0px rgba(255, 255, 255, 0.08);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}

.video-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(0, 200, 127, 0.28);
    box-shadow: 
        0 20px 40px rgba(7, 3, 26, 0.6),
        0 0 30px rgba(0, 200, 127, 0.07),
        inset 0 1px 0px rgba(255, 255, 255, 0.15);
}

/* VIDEO ASPECT RATIO AND CONTROLS OVERLAY */
.video-wrapper {
    display: block; /* Remove o espaço fantasma de elementos inline */
    width: 100%;
    height: auto;
    outline: none;
    background: #000;
}

/* TIPOGRAFIA ULTRA-OTIMIZADA */
h1, h2, h3 {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* ==========================================================================
   ALÍVIO PARA O CELULAR
   --------------------------------------------------------------------------
   No desktop os cartões são vidro sobre auroras desfocadas. Num aparelho real
   isso significa 14 superfícies com backdrop-filter compostas por cima de três
   orbes com blur de 140px — carga suficiente para o compositor engasgar e
   deixar cartões piscando, cinzas ou pela metade. Abaixo de 768px a mesma
   aparência é obtida com fundo sólido, sem custo de composição.
   ========================================================================== */
@media (max-width: 767px) {
    .video-card {
        background: #140C38;              /* mesmo tom que o vidro resultava */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 4px 20px rgba(7, 3, 26, 0.4);
    }

    .video-card:hover {
        transform: none;                  /* não existe hover no toque */
        box-shadow: 0 4px 20px rgba(7, 3, 26, 0.4);
    }

    /* Orbes menores e menos desfocadas: blur de 140px em 60vw é caro demais */
    .aurora-orb {
        filter: blur(70px);
        opacity: 0.16;
    }

    .orb-1 { width: 70vw; height: 70vw; }
    .orb-2 { width: 80vw; height: 80vw; }
    .orb-3 { display: none; }

    /* A textura de grão cobre a tela inteira em blend mode; no celular o
       ganho visual não paga o custo de composição. */
    body::before { display: none; }

    .grid-overlay { opacity: 0.5; }
}

/* Aparelhos que avisam preferir menos movimento ou economia de dados */
@media (prefers-reduced-motion: reduce) {
    .aurora-orb { animation: none; }
}