/* Partners Dogs 3D Tour Viewer — chrome for the canvas, loading and error UI.
   Brand tokens mirror the theme (navy / teal). Self-contained, no web fonts. */
:root {
  --pd-navy: #022D41;
  --pd-teal: #34C6B9;
  --pd-ink: #0a1519;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--pd-ink);
  color: #fff;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

#pd-stage { position: fixed; inset: 0; overflow: hidden; }

#pd-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none; /* let CameraControls own pointer/touch gestures */
  outline: none;
}

#pd-poster {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(0.6);
  transform: scale(1.06);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#pd-poster.is-hidden { opacity: 0; }

/* Loading overlay */
#pd-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(2, 45, 65, 0.55), rgba(10, 21, 25, 0.9));
  z-index: 3;
}
.pd-loading__card { text-align: center; width: min(320px, 80vw); }
.pd-loading__card p { margin: 0.5rem 0; font-size: 0.95rem; letter-spacing: 0.01em; }
#pd-progress-pct { color: var(--pd-teal); font-weight: 600; font-size: 0.85rem; }

.pd-spinner {
  width: 46px; height: 46px; margin: 0 auto 1rem;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--pd-teal);
  border-radius: 50%;
  animation: pd-spin 0.9s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }

.pd-progress {
  width: 100%; height: 5px; margin: 0.75rem 0 0.25rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px; overflow: hidden;
}
#pd-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pd-teal), #7fe3d9);
  border-radius: 999px;
  transition: width 0.25s ease;
}

/* Error overlay */
#pd-error {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 21, 25, 0.94);
  z-index: 4; padding: 1.5rem;
}
.pd-error__card { text-align: center; max-width: 30rem; }
.pd-error__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; }
.pd-error__detail { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin: 0; }

/* Controls hint */
#pd-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 1rem;
  background: rgba(2, 45, 65, 0.55);
  backdrop-filter: blur(6px);
  padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2; pointer-events: none;
  animation: pd-fade 0.6s ease both;
}
#pd-hint span { white-space: nowrap; }
#pd-hint span + span { border-left: 1px solid rgba(255, 255, 255, 0.25); padding-left: 1rem; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }

/* Recenter control */
#pd-recenter {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0 0.9rem;
  border: 0; border-radius: 999px;
  background: var(--pd-teal); color: var(--pd-navy);
  font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; z-index: 5;
  box-shadow: 0 4px 14px rgba(2, 45, 65, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
#pd-recenter:hover { background: #4fd6c9; }
#pd-recenter:active { transform: scale(0.96); }
#pd-recenter:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#pd-recenter svg { display: block; }
@media (max-width: 560px) {
  /* icon-only on small screens; keep the 44px target */
  #pd-recenter span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  #pd-recenter { padding: 0; width: 44px; justify-content: center; }
}

@media (max-width: 560px) {
  #pd-hint span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-spinner { animation-duration: 2s; }
  #pd-poster, #pd-progress-bar, #pd-hint { transition: none; animation: none; }
}

/* The hidden attribute must always win: author display rules above would
   otherwise override the UA default and keep overlays visible. */
[hidden] { display: none !important; }

/* Edge vignette */
#pd-stage::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(ellipse at center, transparent 55%, rgba(6,12,15,0.4) 100%); }
/* Tap-to-move ping */
#pd-ping { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border:2px solid var(--pd-teal); border-radius:50%; opacity:0; pointer-events:none; z-index:4; }
#pd-ping.is-on { animation: pd-ping 0.5s ease-out; }
@keyframes pd-ping { 0%{opacity:.9;transform:scale(.4)} 100%{opacity:0;transform:scale(1.8)} }
@media (prefers-reduced-motion: reduce){ #pd-ping.is-on{animation:none} }