/* ============================================================
   Experiência imersiva grande angular — Real Powerboats
   Reaproveita os tokens de css/style.css. Vídeo real capturado em
   grande angular (não equiretangular) — o zoom/pan explora a
   área realmente registrada pela lente, sem simular uma esfera
   que os arquivos não contêm.
   ============================================================ */

html.imm360-locked{ overflow:hidden; }

.det-hero-cta360{
  display:inline-flex; align-items:center; gap:.6em;
  margin-top:1.6rem; padding:.85em 1.6em;
  border-radius:40px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; font-size:.82rem; letter-spacing:.04em; font-weight:600;
  opacity:0; transform:translateY(10px);
  animation:imm360CtaIn .8s cubic-bezier(.16,1,.3,1) 1.1s both;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.det-hero-cta360:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); transform:translateY(-2px); }
.det-hero-cta360 svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }
.det-hero-cta360 .ring{ position:relative; width:8px; height:8px; }
.det-hero-cta360 .ring::before{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--accent); opacity:.8;
  animation:imm360Pulse 2.4s ease-out infinite;
}
.det-hero-cta360 .ring::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent);
}
@keyframes imm360CtaIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes imm360Pulse{
  0%{ transform:scale(.6); opacity:.9; }
  100%{ transform:scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .det-hero-cta360{ animation:none; opacity:1; transform:none; }
  .det-hero-cta360 .ring::before{ animation:none; }
}

/* ---------- overlay ---------- */
.imm360-overlay{
  position:fixed; inset:0; z-index:500;
  background:radial-gradient(ellipse at center, var(--ink-2) 0%, #04090d 100%);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.02);
  transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1), visibility 0s linear .55s;
}
.imm360-overlay.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:scale(1);
  transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}

.imm360-stage{
  position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none;
}
.imm360-stage.is-dragging{ cursor:grabbing; }
.imm360-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:center center; will-change:transform;
}

/* ---------- hint ---------- */
.imm360-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.9em 1.6em; border-radius:30px;
  background:rgba(11,27,38,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:.85rem; font-weight:300; letter-spacing:.02em;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.imm360-hint.show{ opacity:1; }

/* ---------- loading ---------- */
.imm360-loading{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:.8em;
  color:var(--text-inv-soft); font-size:.82rem; font-weight:300; letter-spacing:.02em;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.imm360-loading.show{ opacity:1; }
.imm360-spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); border-top-color:var(--accent);
  animation:imm360Spin .85s linear infinite;
}
@keyframes imm360Spin{ to{ transform:rotate(360deg); } }

/* ---------- chrome (controles) ---------- */
.imm360-chrome{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:1; transition:opacity .5s ease;
}
.imm360-chrome > *{ pointer-events:auto; }
.imm360-chrome.is-hidden{ opacity:0; }
.imm360-chrome.is-hidden > *{ pointer-events:none; }

.imm360-btn{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.imm360-btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.imm360-btn svg{ width:18px; height:18px; }
.imm360-btn.is-active{ background:var(--accent); border-color:var(--accent); }

.imm360-close{
  position:absolute; top:clamp(1.2rem,3vw,2rem); left:clamp(1.2rem,3vw,2rem);
}
.imm360-cluster{
  position:absolute; top:clamp(1.2rem,3vw,2rem);
  display:flex; gap:.6rem;
  padding:.4rem; border-radius:30px;
  background:rgba(11,27,38,.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
}
.imm360-cluster-left{ left:50%; transform:translateX(-50%); }
.imm360-cluster-right{ right:clamp(1.2rem,3vw,2rem); }

@media (max-width:640px){
  .imm360-close{ top:1rem; left:1rem; }
  .imm360-cluster{ top:auto; bottom:1.2rem; padding:.35rem; }
  .imm360-cluster-left{ left:50%; }
  .imm360-cluster-right{ right:1rem; transform:none; }
  .imm360-btn{ width:38px; height:38px; }
  .imm360-btn svg{ width:16px; height:16px; }
}