/* visor3d.css — Estils del visor 3D Domenjó Xperience */

/* ── Contenidor principal ─────────────────────────────────────────────────── */
.dmj-reveal14-showcase {
    position: relative;
    overflow: hidden;
}

/* ── Canvas Three.js ──────────────────────────────────────────────────────── */
#dmj-visor-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: absolute;
    inset: 0;
}

/* ── Pantalla de loading ──────────────────────────────────────────────────── */
#dmj-visor-loading {
    position: absolute;
    inset: 0;
    background: #020202;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 30;
    transition: opacity 0.5s;
}

#dmj-visor-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#dmj-loading-text {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--dmj-gold-soft);
    margin-bottom: 1.2rem;
    letter-spacing: 0.08em;
}

#dmj-loading-bar-bg {
    width: 160px;
    height: 1px;
    background: #1a1a1a;
}

#dmj-loading-bar {
    height: 1px;
    width: 0%;
    background: var(--dmj-gold-soft);
    transition: width 0.3s;
}

/* ── Pantalla intro ───────────────────────────────────────────────────────── */
#dmj-visor-intro {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 2, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: opacity 0.5s ease;
}

#dmj-visor-intro.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#dmj-visor-intro-logo {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: clamp(1.6rem, 5vw, 2.8rem);
    color: var(--dmj-gold-soft);
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

#dmj-visor-intro-sub {
    font-family: var(--dmj-font-corporate);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2.4rem;
}

#dmj-btn-entrar {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(192, 154, 58, 0.95);
    color: var(--dmj-gold-soft);
    font-family: var(--dmj-font-corporate);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.9rem 2.2rem;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}

#dmj-btn-entrar:hover {
    background: var(--dmj-gold);
    color: #000;
}

.dmj-visor-hint {
    position: absolute;
    bottom: 1.2rem;
    font-family: var(--dmj-font-corporate);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-align: center;
    line-height: 2;
}

/* ── Crosshair (PC) ───────────────────────────────────────────────────────── */
#dmj-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s;
}

#dmj-crosshair.is-visible { opacity: 0.5; }

#dmj-crosshair::before,
#dmj-crosshair::after {
    content: '';
    position: absolute;
    background: var(--dmj-gold-soft);
}

#dmj-crosshair::before { width: 1px; height: 100%; left: 50%; top: 0; }
#dmj-crosshair::after  { width: 100%; height: 1px; top: 50%; left: 0; }

/* ── HUD controls (PC) ───────────────────────────────────────────────────── */
#dmj-visor-controls {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.6rem;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    white-space: nowrap;
}

#dmj-visor-controls.is-visible { opacity: 1; }

.dmj-ctrl {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(192, 154, 58, 0.3);
    padding: 0.4rem 0.7rem;
    font-family: var(--dmj-font-corporate);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dmj-gold-soft);
}

/* ── Botó sortir (PC) ────────────────────────────────────────────────────── */
#dmj-btn-sortir {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 15;
    appearance: none;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(192, 154, 58, 0.4);
    color: var(--dmj-gold-soft);
    font-family: var(--dmj-font-corporate);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

#dmj-btn-sortir.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Controls mòbil ──────────────────────────────────────────────────────── */
#dmj-mobile-controls {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 15;
}

.dmj-mobile-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(192, 154, 58, 0.45);
    color: rgba(192, 154, 58, 0.8);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/* ── Botó sortir (mòbil) ─────────────────────────────────────────────────── */
#dmj-btn-sortir-mobile {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 15;
    display: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(192, 154, 58, 0.4);
    color: var(--dmj-gold-soft);
    font-family: var(--dmj-font-corporate);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
}

/* ── Botons debug eixos (mòbil) ──────────────────────────────────────────── */
#dmj-axis-controls {
    position: absolute;
    bottom: 1rem;
    left: 0.8rem;
    z-index: 20;
    display: none;
    flex-direction: column;
    gap: 0.4rem;
}

.dmj-axis-btn {
    appearance: none;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(192, 154, 58, 0.4);
    color: rgba(192, 154, 58, 0.5);
    font-family: var(--dmj-font-corporate);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    min-width: 90px;
}

.dmj-axis-btn[data-active="1"] {
    background: rgba(192, 154, 58, 0.2);
    border-color: rgba(192, 154, 58, 0.9);
    color: var(--dmj-gold-soft);
}

/* ── Hint giroscopi ──────────────────────────────────────────────────────── */
#dmj-gyro-hint {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--dmj-font-corporate);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(192, 154, 58, 0.5);
    white-space: nowrap;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

#dmj-gyro-hint.is-visible { opacity: 1; }
/* ==========================================================================
   VISOR 3D · MÒBIL JOYSTICK
   ========================================================================== */

@media (max-width: 768px) {
    #dmj-gyro-hint,
    #dmj-axis-controls {
        display: none !important;
    }

    #dmj-look-joystick {
        position: absolute !important;
        left: 1rem !important;
        bottom: 1.1rem !important;
        z-index: 50 !important;
        width: 7.2rem !important;
        height: 7.2rem !important;
        border: 1px solid rgba(192, 154, 58, 0.58) !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.52) !important;
        box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.45) !important;
        touch-action: none !important;
        display: none;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    #dmj-look-joystick::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4.7rem;
        height: 4.7rem;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
    }

    #dmj-look-joystick-knob {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        transform: translate(-50%, -50%);
        border-radius: 999px !important;
        background: linear-gradient(135deg, #c09a3a, #f2dfaa) !important;
        box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.5) !important;
        pointer-events: none !important;
    }

    #dmj-look-joystick span {
        position: absolute;
        left: 50%;
        bottom: -1.15rem;
        transform: translateX(-50%);
        color: #f2dfaa;
        font-family: Lexend, Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none;
    }

    #dmj-mobile-controls {
        position: absolute !important;
        right: 1rem !important;
        bottom: 1.1rem !important;
        left: auto !important;
        transform: none !important;
        z-index: 50 !important;
        display: none;
        flex-direction: column !important;
        gap: 0.65rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .dmj-mobile-btn {
        width: 6.4rem !important;
        min-width: 6.4rem !important;
        height: 3.85rem !important;
        min-height: 3.85rem !important;
        border-radius: 0.9rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.14rem !important;
        border: 1px solid rgba(192, 154, 58, 0.72) !important;
        background: rgba(0, 0, 0, 0.68) !important;
        color: #f2dfaa !important;
        font-family: Lexend, Arial, sans-serif !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .dmj-mobile-btn-arrow {
        font-size: 1.3rem !important;
        line-height: 1 !important;
    }

    .dmj-mobile-btn-label {
        font-size: 0.56rem !important;
        letter-spacing: 0.08em !important;
    }

    #dmj-btn-sortir-mobile {
        z-index: 60 !important;
    }
}