/**
 * Virtual Tour Embed Styles
 * Used by: src/Views/partials/virtual_tour.php
 *          assets/js/virtual-tour-embed.js
 *
 * Brand colours:
 *   accent:    #d946ef (fuchsia)
 *   secondary: #06b6d4 (cyan)
 *   dark:      #050505
 */

/* ------------------------------------------------------------------ */
/*  Animations                                                        */
/* ------------------------------------------------------------------ */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 4s linear infinite; }

@keyframes hotspot-ping {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/*  Viewer layout                                                     */
/* ------------------------------------------------------------------ */
.virtual-tour-compact .vt-pano,
.virtual-tour-full .vt-pano {
  position: absolute;
  inset: 0;
}

.cursor-grab       { cursor: grab; }
.cursor-grab:active { cursor: grabbing; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ------------------------------------------------------------------ */
/*  In-scene link hotspots                                            */
/* ------------------------------------------------------------------ */
.vt-hotspot-link {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

.vt-hotspot-link svg {
  width: 40px;
  height: 40px;
  color: #d946ef;
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  padding: 6px;
  border: 2px solid rgba(217, 70, 239, .5);
  transition: all .25s ease;
  filter: drop-shadow(0 0 8px rgba(217, 70, 239, .4));
}

.vt-hotspot-link:hover svg {
  color: #fff;
  background: rgba(217, 70, 239, .85);
  border-color: #d946ef;
  transform: scale(1.15);
  filter: drop-shadow(0 0 16px rgba(217, 70, 239, .7));
}

.vt-hotspot-label {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(217, 70, 239, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.vt-hotspot-link:hover .vt-hotspot-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.vt-hotspot-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(217, 70, 239, .4);
  animation: hotspot-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*  Tailwind utilities not in pre-compiled output.css                 */
/* ------------------------------------------------------------------ */
.scale-125                      { transform: scale(1.25); }
.text-\[11px\]                  { font-size: 11px; }
.text-\[10px\]                  { font-size: 10px; }
.max-h-24                       { max-height: 6rem; }
.gap-1\.5                       { gap: .375rem; }
.w-2\.5  { width: .625rem; }  .h-2\.5 { height: .625rem; }
.w-3\.5  { width: .875rem; }  .h-3\.5 { height: .875rem; }
.inset-x-0                      { left: 0; right: 0; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }

/* Colours with alpha (not generated by the Tailwind build) */
.\!bg-brand-accent\/20          { background-color: #d946ef33 !important; }
.\!border-brand-accent\/40      { border-color: #d946ef66 !important; }
.bg-white\/5                    { background-color: #ffffff0d; }
.bg-white\/10                   { background-color: #ffffff1a; }
.bg-white\/30                   { background-color: #ffffff4d; }
.bg-brand-accent\/20            { background-color: #d946ef33; }
.text-white\/40                 { color: #ffffff66; }
.text-white\/60                 { color: #ffffff99; }
.text-white\/70                 { color: #ffffffb3; }
.text-white\/80                 { color: #ffffffcc; }
.text-white\/90                 { color: #ffffffe6; }
.border-brand-accent\/30        { border-color: #d946ef4d; }
.border-brand-accent\/40        { border-color: #d946ef66; }
.border-brand-secondary\/10     { border-color: #06b6d41a; }
.hover\:bg-brand-accent\/20:hover   { background-color: #d946ef33; }
.hover\:border-brand-accent\/40:hover { border-color: #d946ef66; }
.hover\:bg-white\/50:hover      { background-color: #ffffff80; }