/* =========================================================================
   tour360-hotspots.css — visual dos hotspots do Tour 360°
   =========================================================================
   Estilos do catálogo app/config/tour360_hotspots.php, renderizados por
   public/assets/js/tour360-hotspots.js. Valem igual no editor
   (/admin/empresas/tour360/{id}) e no tour público (aba "Tour 360°").

   COMO CONVIVE COM O PANNELLUM
   O Pannellum reescreve o transform do div externo do hotspot a cada frame
   (é assim que ele posiciona o marcador na foto). Por isso NADA aqui aplica
   transform em .t360hs — todo o visual (perspectiva, rotação, animação) vai
   nos filhos, que o Pannellum não toca.

   O div externo fica 0x0 de propósito: o Pannellum centraliza usando
   offsetWidth/offsetHeight, então com 0x0 a âncora cai exatamente no ponto
   clicado, e cada filho se centraliza sozinho com translate(-50%, -50%) —
   assim o tamanho/animação do marcador nunca desloca a âncora.

   Variáveis (escritas pelo JS):
     --t360hs-rot        direção do marcador (passo/seta), 0-360deg
     --t360hs-escala     multiplicador de tamanho escolhido no editor
     --t360hs-tilt       inclinação base dos marcadores de chão (vem do pitch)
     --t360hs-cam-pitch  pitch atual da câmera (escrito no container)
   ========================================================================= */

.t360hs {
    width: 0;
    height: 0;
    cursor: pointer;
    /* sem transform aqui: pertence ao Pannellum (ver cabeçalho) */
}

/* Peça visual de cada estilo. Centrada na âncora; o -50%/-50% vem primeiro
   para que rotações/perspectiva aconteçam em torno do próprio centro. */
.t360hs-art {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    transform-origin: 50% 50%;
    transition: filter .18s ease, opacity .18s ease, transform .18s ease;
    filter: drop-shadow(0 2px 6px rgba(2, 6, 23, .55));
}

/* Rótulo curto — some por padrão e aparece no hover/foco/toque. */
.t360hs-label {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-50% - 42px));
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font: 600 12.5px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}
.t360hs:hover .t360hs-label,
.t360hs.is-ativo .t360hs-label {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 50px));
}

/* ------- passo / passo com pulso: chevron deitado no piso -------
   Os dois estilos dividem o mesmo desenho (classe de família .t360hs--chevron,
   posta pelo JS); só o pulso é exclusivo do .t360hs--passo_pulso. */
/* rotateX deita a peça no chão; o rotate() seguinte já gira DENTRO desse
   plano inclinado, que é o que faz a seta "apontar" para um lado do piso. */
.t360hs--chevron .t360hs-art {
    width: 170px;
    height: 170px;
    transform: translate(-50%, -50%)
               perspective(260px)
               rotateX(calc(var(--t360hs-tilt, 58deg) + var(--t360hs-cam-pitch, 0deg) * .5))
               rotate(var(--t360hs-rot, 0deg))
               scale(var(--t360hs-escala, 1));
}
.t360hs--chevron .t360hs-chevron {
    animation: t360hs-avanca 1.9s ease-in-out infinite;
}
.t360hs--chevron .t360hs-chevron-eco {
    animation: t360hs-avanca 1.9s ease-in-out infinite;
    animation-delay: .32s;
}
.t360hs--chevron:hover .t360hs-art {
    filter: drop-shadow(0 3px 10px rgba(2, 6, 23, .7)) brightness(1.15);
}

/* Pulso no piso, sob o chevron — no mesmo ritmo do avanço, para o marcador
   ser visto de longe sem competir com a direção que a seta indica.
   transform-box: fill-box faz o scale girar em torno do próprio círculo, e
   não do canto do viewBox do SVG. */
.t360hs--passo_pulso .t360hs-passo-pulso {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: t360hs-passo-pulso 1.9s ease-out infinite;
}
@keyframes t360hs-passo-pulso {
    0%   { transform: scale(1);    opacity: .85; }
    75%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* Sobe (= avança no plano do chão) e some, como um passo adiante. */
@keyframes t360hs-avanca {
    0%   { transform: translateY(6px);  opacity: .3; }
    45%  { transform: translateY(-2px); opacity: 1; }
    100% { transform: translateY(-9px); opacity: 0; }
}

/* ---------------- anel: alvo pulsante no piso ---------------- */
.t360hs--anel .t360hs-art {
    width: 108px;
    height: 108px;
    transform: translate(-50%, -50%)
               perspective(300px)
               rotateX(calc(var(--t360hs-tilt, 66deg) + var(--t360hs-cam-pitch, 0deg) * .5))
               scale(var(--t360hs-escala, 1));
}
.t360hs--anel .t360hs-onda {
    transform-origin: 50% 50%;
    animation: t360hs-onda 2.2s ease-out infinite;
}
.t360hs--anel .t360hs-onda-2 { animation-delay: 1.1s; }
.t360hs--anel:hover .t360hs-art {
    filter: drop-shadow(0 3px 10px rgba(2, 6, 23, .7)) brightness(1.2);
}

@keyframes t360hs-onda {
    0%   { transform: scale(.35); opacity: .9; }
    80%  { transform: scale(1);   opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}

/* ---------------- seta: flutuando no ar ---------------- */
.t360hs--seta .t360hs-art {
    width: 54px;
    height: 66px;
    transform: translate(-50%, -50%)
               rotate(var(--t360hs-rot, 0deg))
               scale(var(--t360hs-escala, 1));
    animation: t360hs-flutua 2.6s ease-in-out infinite;
}
/* margin (e não transform) porque o transform já carrega rotação/escala */
@keyframes t360hs-flutua {
    0%, 100% { margin-top: 0; }
    50%      { margin-top: -9px; }
}

/* ---------------- pino / info: círculo translúcido com ícone ------------- */
.t360hs--pino .t360hs-art,
.t360hs--info .t360hs-art {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
    background: rgba(15, 23, 42, .58);
    border: 2px solid rgba(255, 255, 255, .92);
    color: #fff;
    box-shadow: 0 2px 10px rgba(2, 6, 23, .45);
    filter: none;
    transform: translate(-50%, -50%) scale(var(--t360hs-escala, 1));
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    .t360hs--pino .t360hs-art,
    .t360hs--info .t360hs-art {
        background: rgba(15, 23, 42, .38);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}
.t360hs--pino:hover .t360hs-art,
.t360hs--info:hover .t360hs-art,
.t360hs--icone:hover .t360hs-art {
    transform: translate(-50%, -50%) scale(calc(var(--t360hs-escala, 1) * 1.12));
}

/* Halo que pulsa atrás do círculo, para o marcador não sumir na foto. */
.t360hs-halo {
    position: absolute;
    left: 0;
    top: 0;
    /* border-box para a largura declarada já incluir a borda: sem isso a caixa
       renderizada fica 4px maior e o halo sai do centro do marcador. */
    box-sizing: border-box;
    width: var(--t360hs-halo, 46px);
    height: var(--t360hs-halo, 46px);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .75);
    pointer-events: none;
    /* Centralização declarada aqui E repetida dentro do keyframe: enquanto a
       animação roda ela manda no transform, e este fica valendo quando a
       animação é desligada (prefers-reduced-motion). */
    transform: translate(-50%, -50%) scale(var(--t360hs-escala, 1));
    animation: t360hs-halo 2.4s ease-out infinite;
}
/* o "só ícone" tem arte menor — o halo acompanha, senão sobra anel em volta */
.t360hs--icone .t360hs-halo { --t360hs-halo: 40px; }

@keyframes t360hs-halo {
    0%   { transform: translate(-50%, -50%) scale(calc(var(--t360hs-escala, 1) * .85)); opacity: .75; }
    70%  { transform: translate(-50%, -50%) scale(calc(var(--t360hs-escala, 1) * 1.75)); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(calc(var(--t360hs-escala, 1) * 1.75)); opacity: 0; }
}

/* ---------------- icone: só o ícone, sem cápsula ---------------- */
.t360hs--icone .t360hs-art {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    transform: translate(-50%, -50%) scale(var(--t360hs-escala, 1));
    filter: drop-shadow(0 2px 5px rgba(2, 6, 23, .8));
}

/* ---------------- info: balão de texto ---------------- */
.t360hs-balao {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-50% - 46px));
    width: 244px;
    max-width: 70vw;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 12px 32px rgba(2, 6, 23, .35);
    font: 400 13px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    text-align: left;
    z-index: 3;
    display: none;
}
.t360hs.is-aberto .t360hs-balao { display: block; }
.t360hs-balao::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}
.t360hs-balao-titulo {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 4px;
    padding-right: 20px;
}
.t360hs-balao-fechar {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.t360hs-balao-fechar:hover { background: #e2e8f0; }

/* Quem prefere menos movimento continua vendo os marcadores — só parados. */
@media (prefers-reduced-motion: reduce) {
    .t360hs .t360hs-art,
    .t360hs .t360hs-art *,
    .t360hs .t360hs-halo,
    .t360hs .t360hs-label {
        animation: none !important;
        transition: none !important;
    }
    .t360hs--chevron .t360hs-chevron-eco { display: none; }
    .t360hs-label { opacity: 1; }
}