* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #050608;
    overflow: hidden;
    color: #fff;
    /* Evita pull-to-refresh, realce de toque e seleção acidental no mobile */
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== Palco cinematográfico em tela cheia ===== */
.stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* altura real no mobile (desconta a barra do navegador) */
    overflow: hidden;
    background: #050608;
    cursor: crosshair;
    touch-action: none; /* impede scroll/zoom do navegador durante o arraste */
}

.product-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.external-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Vista interna fica oculta (serve só de fonte para a lupa) */
.internal-view {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

/* Vinheta cinematográfica por cima da cena */
.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45) 100%);
}

/* Dica de interação */
.hint {
    position: absolute;
    left: 50%;
    bottom: 7vh;
    transform: translateX(-50%);
    z-index: 20;
    padding: 12px 26px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: clamp(0.85rem, 1.6vw, 1.1rem);
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    animation: hintPulse 2.4s ease-in-out infinite;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hint.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(15px);
    pointer-events: none;
    animation: none; /* impede que o pulse sobreponha o fade-out */
}

@keyframes hintPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
    50%      { transform: translateX(-50%) translateY(-6px); opacity: 1; }
}

/* ===== Lupa de vidro realista (única) ===== */
.loupe {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: #0a0a0a;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.25s ease;
    /* aro metálico + espessura do vidro + sombra projetada */
    box-shadow:
        inset 0 0 34px 10px rgba(0, 0, 0, 0.40),     /* vinheta interna do vidro */
        inset 0 12px 26px rgba(255, 255, 255, 0.30), /* luz no topo do vidro */
        inset 0 -10px 22px rgba(0, 0, 0, 0.30),      /* sombra na base do vidro */
        0 0 0 2px rgba(255, 255, 255, 0.45),         /* fio interno brilhante */
        0 0 0 13px #18181c,                          /* aro escuro (corpo) */
        0 0 0 15px rgba(255, 255, 255, 0.22),        /* brilho externo do aro */
        0 28px 60px rgba(0, 0, 0, 0.65);             /* sombra projetada */
}

.loupe.active {
    opacity: 1;
}

.loupe-content {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: 0 0;
    z-index: 1;
    /* leve nitidez/contraste extra como sob uma lente */
    filter: saturate(1.1) contrast(1.05);
}

/* Sombreamento curvo do vidro: realce no topo e vinheta nas bordas */
.loupe::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 48%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Reflexo diagonal de vidro (glare) */
.loupe::before {
    content: '';
    position: absolute;
    top: -25%;
    left: -8%;
    width: 62%;
    height: 150%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.28) 44%,
        rgba(255, 255, 255, 0.50) 50%,
        rgba(255, 255, 255, 0) 58%
    );
    transform: rotate(16deg);
    filter: blur(2px);
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
}

@media (max-width: 768px) {
    .loupe {
        width: 180px;
        height: 180px;
    }
}