/* ============================================================================
   ARCHVISION — HERO EXPERIENCE STYLES
   Scoped to the 3D hero column only. Nothing here touches your existing
   typography, navigation, buttons or other sections.
   ========================================================================== */

/* ---- Canvas container (replaces the old cube illustration) -------------- */
#hero-canvas-wrap {
  position: absolute;                  /* full-bleed layer covering the whole hero */
  inset: 0;
  z-index: 1;                          /* above the sketch backdrop, below the copy */
  overflow: hidden;
  pointer-events: none;                /* page stays clickable; dots re-enable below */
}

/* Readability scrim — headline owns the left, villa owns the right */
#hero-canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(253, 252, 248, 0.94) 0%,
    rgba(253, 252, 248, 0.60) 30%,
    rgba(253, 252, 248, 0.00) 56%);
}

/* The hero's own overlays must not swallow clicks meant for dots/buttons */
#hero .hero-vignette { pointer-events: none; }
#hero .hero-inner    { pointer-events: none; }
#hero .hero-inner a  { pointer-events: auto; }

#hero-canvas-wrap canvas {
  position: absolute !important;    /* locked inside the wrap — cannot overflow it */
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;                       /* Scene 1 fades this in via GSAP */
  transition: none;
}

/* ---- Loading veil -------------------------------------------------------- */
.hx-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  z-index: 3;
  transition: opacity 0.8s ease;
}
.hx-loader.is-done { opacity: 0; pointer-events: none; }

.hx-loader span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8F6F33;
  animation: hx-breathe 2.4s ease-in-out infinite;
}
@keyframes hx-breathe {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}

/* ---- Hotspot layer ------------------------------------------------------- */
.hx-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;             /* only the dots themselves are hoverable */
}

.hx-hotspot {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.hx-hotspot.is-visible { opacity: 1; }

/* Glowing dot — quiet gold, no neon */
.hx-dot {
  pointer-events: auto;
  position: relative;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;          /* center on the projected point */
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.hx-dot i {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #B08D4C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85),
              0 0 14px rgba(176, 141, 76, 0.55);
}
.hx-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(176, 141, 76, 0.55);
  animation: hx-pulse 2.6s ease-out infinite;
}
@keyframes hx-pulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Floating glass card on hover / focus -------------------------------- */
.hx-card {
  pointer-events: none;
  position: absolute;
  left: 24px;
  top: -12px;
  width: 230px;
  padding: 14px 16px 15px;
  border-radius: 10px;
  background: rgba(252, 250, 244, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(176, 141, 76, 0.35);
  box-shadow: 0 14px 34px rgba(60, 48, 20, 0.14);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hx-hotspot:hover .hx-card,
.hx-hotspot.is-open .hx-card,
.hx-dot:focus-visible + .hx-card {
  opacity: 1;
  transform: translateY(0);
}
.hx-card h4 {
  font-family: 'Manrope', sans-serif;
  margin: 0 0 5px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8F6F33;
}
.hx-card p {
  font-family: 'Manrope', sans-serif;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4a4335;
}

/* Keyboard focus ring on the dot */
.hx-dot:focus-visible {
  outline: 2px solid #B08D4C;
  outline-offset: 3px;
  border-radius: 50%;
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hx-dot::before { animation: none; }
  .hx-loader span { animation: none; opacity: 0.8; }
}

/* ---- Hero Video (replacement for 3D animation) -------------------------- */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(253, 252, 248, 0.94) 0%,
    rgba(253, 252, 248, 0.60) 30%,
    rgba(253, 252, 248, 0.00) 56%);
}
.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  #hero-canvas-wrap::after {
    background: linear-gradient(180deg,
      rgba(253, 252, 248, 0.10) 0%,
      rgba(253, 252, 248, 0.30) 42%,
      rgba(253, 252, 248, 0.88) 78%);
  }
  .hero-video-wrap::after {
    background: linear-gradient(180deg,
      rgba(253, 252, 248, 0.10) 0%,
      rgba(253, 252, 248, 0.30) 42%,
      rgba(253, 252, 248, 0.88) 78%);
  }
  .hx-card { width: 180px; }
}