/* ============================================================================
   logo-cantv-3d.css — Estilos del Logo 3D Interactivo (Reutilizable)

   @version 3.0 — Soporta imagen CANTV y texto S-CORE
   ============================================================================ */


/* ── WRAPPER BASE ─────────────────────────────────────────────────────────── */
.logo-cantv-3d-wrapper {
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    transition: transform 0.15s ease-out;
}

.logo-cantv-3d-wrapper:active {
    cursor: grabbing;
}

.logo-cantv-3d-wrapper.dragging {
    transition: none !important;
}


/* ── VARIANTES DE TAMANO ──────────────────────────────────────────────────── */

/* Footer del index.html */
.logo-cantv-footer {
    width: 220px;
    height: 130px;
}

/* Sidebar del sistema (mas compacto) */
.logo-cantv-sidebar {
    width: 140px;
    height: 84px;
}

/* S-CORE en el navbar */
.logo-score-navbar {
    width: auto;
    height: auto;
    padding: 4px 12px;
    max-width: 200px;
}


/* ── ELEMENTOS ANIMADOS (imagen CANTV o texto S-CORE) ────────────────────── */
.footer-logo-cantv-animado,
.score-text-3d {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: visible;
    pointer-events: none;
    transition: filter 0.2s ease;
}

/* Imagen CANTV especifico */
.footer-logo-cantv-animado {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 35px rgba(0,0,0,0.9)) brightness(1.1);
}

/* Texto S-CORE especifico */
.score-text-3d {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    white-space: nowrap;
    filter: drop-shadow(0 4px 12px rgba(49, 8, 124, 0.4));
    margin: 0;
}

/* S y CORE con colores propios */
.score-text-3d .score-s {
    color: #343a40;
}
.score-text-3d .score-core {
    color: #31087c;
}


/* ── ANIMACION 1: FLOTACION SUAVE ─────────────────────────────────────────── */
@keyframes flotarFooter {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-14px); }
}

.footer-logo-cantv-animado.flotando-footer,
.score-text-3d.flotando-footer {
    animation: flotarFooter 3s ease-in-out infinite;
}


/* ── ANIMACION 2: GIRO ESTRELLA MARIO ────────────────────────────────────── */
@keyframes estrellaFooter3D {
    0%   { transform: rotateY(0deg)    rotateX(0deg)   scale(1);    filter: drop-shadow(0 12px 35px rgba(0,0,0,0.9)) brightness(1.1); }
    10%  { transform: rotateY(90deg)   rotateX(10deg)  scale(1.1);  filter: drop-shadow(0 0 30px rgba(167,139,250,0.8)) drop-shadow(0 0 60px rgba(124,58,237,0.5)) brightness(1.4); }
    20%  { transform: rotateY(180deg)  rotateX(20deg)  scale(1.2);  filter: drop-shadow(0 0 40px rgba(167,139,250,0.9)) drop-shadow(0 0 80px rgba(124,58,237,0.6)) brightness(1.6); }
    30%  { transform: rotateY(270deg)  rotateX(10deg)  scale(1.1);  filter: drop-shadow(0 0 30px rgba(59,130,246,0.8))  drop-shadow(0 0 60px rgba(37,99,235,0.5))  brightness(1.4); }
    40%  { transform: rotateY(360deg)  rotateX(0deg)   scale(1);    filter: drop-shadow(0 12px 35px rgba(0,0,0,0.9)) brightness(1.1); }
    50%  { transform: rotateY(450deg)  rotateX(-10deg) scale(1.1);  filter: drop-shadow(0 0 30px rgba(59,130,246,0.8))  drop-shadow(0 0 60px rgba(37,99,235,0.5))  brightness(1.4); }
    60%  { transform: rotateY(540deg)  rotateX(-20deg) scale(1.2);  filter: drop-shadow(0 0 40px rgba(167,139,250,0.9)) drop-shadow(0 0 80px rgba(124,58,237,0.6)) brightness(1.6); }
    70%  { transform: rotateY(630deg)  rotateX(-10deg) scale(1.1);  filter: drop-shadow(0 0 30px rgba(59,130,246,0.8))  brightness(1.4); }
    80%  { transform: rotateY(720deg)  rotateX(0deg)   scale(1);    filter: drop-shadow(0 12px 35px rgba(0,0,0,0.9)) brightness(1.1); }
    90%  { transform: rotateY(810deg)  rotateX(8deg)   scale(1.05); filter: drop-shadow(0 0 20px rgba(167,139,250,0.5)) brightness(1.2); }
    100% { transform: rotateY(1080deg) rotateX(0deg)   scale(1);    filter: drop-shadow(0 12px 35px rgba(0,0,0,0.9)) brightness(1.1); }
}

.footer-logo-cantv-animado.giro-estrella-footer,
.score-text-3d.giro-estrella-footer {
    animation: estrellaFooter3D 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


/* ── TILT ONLY WRAPPER (para navbar S-CORE y logo sidebar) ───────────────── */
.logo-tilt-only {
    display: inline-block;
    transform-style: preserve-3d;
    cursor: default;
}


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .logo-cantv-footer  { width: 160px; height: 95px; }
    .logo-cantv-sidebar { width: 110px; height: 66px; }
    .score-text-3d { font-size: 1.4rem; }
}