/* ============================================================
   Global Color Overrides — Avaria Brand Palette
   Replace Webflow template's blue/purple accent with warm gold
   ============================================================ */

:root {
  /* Override the blue/purple button accent with warm luxury gold */
  --dusty-blue: #C9A96E !important;
  /* Ensure near-black stays dark charcoal, not purple-tinted */
  --near-black: #1a1a1a !important;
}

/* Primary button: dark base + gold hover shape */
.primary-button {
  background-color: #1a1a1a;
  transition: color 0.3s ease;
}

.primary-button:hover .primary-button-text {
  color: #fff;
}

.primary-button-sape {
  background-color: #C9A96E !important;
}

/* Outline / ghost button — "View Details" style */
.primary-button[style*="transparent"] {
  border-color: currentColor !important;
}

/* Remove any lingering purple/blue from Webflow defaults */
a, button, .w-nav-link, .list-item-link-text {
  color: inherit;
}

/* Active nav link indicator — gold instead of blue */
.w--current,
.w-nav-link.w--current {
  color: #C9A96E !important;
}

/* ============================================================
   Frame-Sequence Canvas Hero — Full Width
   ============================================================ */

/* ── 0. Transparent navbar overlaying the hero ── */
.navbar--transparent {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent !important;
  box-shadow: none !important;
}

/* Make all navbar text + logo white when over the hero */
.navbar--transparent .brand-text,
.navbar--transparent .list-item-link-text,
.navbar--transparent .location-title-side,
.navbar--transparent .location-area,
.navbar--transparent .hero-tag-block-text {
  color: #fff !important;
}

/* Transition to a solid navbar on scroll (added via JS) */
.navbar--transparent.scrolled {
  position: fixed !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 24px rgba(0,0,0,0.08) !important;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.navbar--transparent.scrolled .brand-text,
.navbar--transparent.scrolled .list-item-link-text,
.navbar--transparent.scrolled .location-title-side,
.navbar--transparent.scrolled .location-area {
  color: inherit !important;
}

/* ── 1. Remove top gap pushed by navbar since it's now absolute ── */
.page-wrapper,
.main-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── 2. Scroll tunnel ── */
.caesar-hero {
  position: relative;
  height: 300vh;
  margin-top: 0 !important;
}

/* ── 3. Sticky viewport-fill — full bleed to edges ── */
.caesar-hero__sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ── 4. Canvas background layer ── */
.caesar-hero__bg {
  position: absolute;
  inset: 0;
  background: #000;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 5. Loader overlay ── */
.hero-loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.hero-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 6. Hero title — lower centre, large cinematic text ── */
.caesar-hero__container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;   /* push to bottom */
  justify-content: center;
  pointer-events: none;
  padding-bottom: 10vh;
}

.caesar-hero__container .hero-heading-wrap {
  text-align: center;
  pointer-events: auto;
}

/* Title style */
.caesar-hero .hero-heading {
  color: #fff !important;
  font-size: clamp(6rem, 18vw, 22rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0;
  /* subtle text shadow for legibility on light frames */
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}

/* ── 7. Scroll hint arrow — centred at very bottom ── */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 0.8;
  animation: bounce 1.8s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── 8. Hero-below-section: description + marquee + buttons ── */
.hero-below-section {
  position: static !important;
  background: #fff;
  padding: 4rem var(--_ui---padding-global, 2rem);
  color: inherit !important;
}

.hero-below-section .hero-marque-wrap {
  margin-bottom: 2.5rem;
}

.hero-below-section .hero-short-details,
.hero-below-section .hero-tag-block-text,
.hero-below-section .primary-button-text,
.hero-below-section .location-area {
  color: inherit !important;
}

/* Hide Webflow badge */
.w-webflow-badge {
  display: none !important;
}