/* =====================================================================
   نمای سه‌بعدی تعاملی دوربین (رویه‌ای، Three.js) - محصول و هیرو
   ===================================================================== */
.camera3d {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #1a1a1d 0%, #0a0a0b 75%);
    border: 1px solid var(--color-border, #232326);
    cursor: grab;
}
.camera3d:active { cursor: grabbing; }

.camera3d__fallback,
.camera3d__canvas,
.camera3d__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.camera3d__fallback {
    object-fit: contain;
    padding: 12%;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}
.camera3d__canvas,
.camera3d__video {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.camera3d__video {
    object-fit: contain;
    pointer-events: none;
}
.camera3d.is-ready .camera3d__canvas,
.camera3d.is-ready .camera3d__video { opacity: 1; }
.camera3d.is-ready .camera3d__fallback { opacity: 0; }
.camera3d.is-failed .camera3d__fallback { opacity: 1; }

.camera3d__badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(10, 10, 11, 0.65);
    border: 1px solid var(--color-gold-dark, #9c7d33);
    color: var(--color-gold-light, #e8cf82);
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.camera3d.is-ready .camera3d__badge { opacity: 1; }

.camera3d__hint {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.camera3d.is-ready .camera3d__hint { opacity: 1; }

/* --------------------------- تب‌های تصویر/سه‌بعدی در صفحه محصول --------------------------- */
.media-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.media-tabs__btn {
    flex: 1;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #232326);
    background: var(--color-bg-card, #18181b);
    color: var(--color-text-muted, #9a9aa2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.media-tabs__btn.is-active {
    background: var(--color-gold, #c9a44c);
    border-color: var(--color-gold, #c9a44c);
    color: #171310;
}
.media-tabs__panel { display: none; }
.media-tabs__panel.is-active { display: block; }

/* --------------------------- نسخه‌ی هیرو صفحه اصلی --------------------------- */
.hero-static__camera3d {
    position: relative;
    z-index: 2;
    width: min(78vw, 380px);
    aspect-ratio: 1 / 1;
    margin: 0 auto 22px;
}

@media (max-width: 720px) {
    .hero-static__camera3d { width: min(60vw, 260px); margin-bottom: 14px; }
}

/* --------------------------- تم روشن --------------------------- */
[data-theme="light"] .camera3d {
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #e9e7dd 75%);
}
[data-theme="light"] .camera3d__badge {
    background: rgba(255, 255, 255, 0.75);
}
[data-theme="light"] .camera3d__hint {
    color: rgba(32, 30, 25, 0.6);
}
/* نمونه‌ی داخل بخش هیرو همیشه روی زمینه‌ی تیره (ویدیو/عکس) قرار دارد، پس مستقل از تم سایت تیره می‌ماند */
[data-theme="light"] .hero-static__camera3d {
    background: radial-gradient(circle at 50% 40%, #1a1a1d 0%, #0a0a0b 75%);
}
[data-theme="light"] .hero-static__camera3d .camera3d__badge {
    background: rgba(10, 10, 11, 0.65);
}
[data-theme="light"] .hero-static__camera3d .camera3d__hint {
    color: rgba(255, 255, 255, 0.55);
}