/* =====================================================================
   VERTEX VENTURE REAL ESTATE — SETTINGS FILE (single source of truth)
   ---------------------------------------------------------------------
   Everything visual — colours, fonts, spacing, radius, shadows — lives
   here as CSS custom properties. Re-theming the whole site is a one-file
   edit. Tailwind (see assets/js/tailwind-config.js) maps its utility
   names onto these variables, so no hex / rgb / px lives in the HTML.

   Brand kit:
     Navy #1E2C4F · Gold #DBA940 · Grey #A0A0A0
     Light Gray #E4E4E2 · Off White #F3F1EC · Matte Black #161513
     Heading: Gilda Display · Body: Inter · Mono: IBM Plex Mono
     Script accent: Parisienne
   ===================================================================== */

:root {
  /* --- Brand raw values (defined once, referenced by tokens below) --- */
  --navy: #1E2C4F;
  --navy-700: #17223D;
  --navy-300: #33477A;
  --gold: #DBA940;
  --gold-600: #C08F2C;
  --grey: #A0A0A0;
  --light-gray: #E4E4E2;
  --off-white: #F3F1EC;
  --matte-black: #161513;

  /* --- Semantic tokens : LIGHT THEME (default) --- */
  --c-bg: var(--off-white);          /* page background            */
  --c-surface: #FFFFFF;              /* raised bands / cards        */
  --c-surface-2: #ECE9E1;           /* subtle inset blocks         */
  --c-primary: var(--navy);          /* brand primary              */
  --c-primary-soft: #E7EAF1;        /* tinted primary background   */
  --c-accent: var(--gold);           /* brand accent               */
  --c-accent-text: #966C15;          /* accessible text accent (4.6:1 AA on light bg) */
  --c-accent-soft: #F6ECD6;         /* tinted accent background    */
  --c-text: var(--matte-black);      /* body text on bg/surface     */
  --c-muted: #5D5B55;               /* secondary text (AA on bg)   */
  --c-on-primary: var(--off-white);  /* text on primary            */
  --c-on-accent: var(--matte-black); /* text on accent             */
  --c-line: rgba(22, 21, 19, 0.12);  /* hairline borders           */
  --c-line-strong: rgba(22, 21, 19, 0.22);
  --c-danger: #B0402F;              /* form errors                 */
  --c-ring: var(--gold);             /* focus ring                  */
  --c-scrim: rgba(22, 21, 19, 0.46); /* over-photo tint             */
  --c-scrim-strong: rgba(15, 20, 38, 0.66);
  --c-on-photo: var(--off-white);    /* text over a scrimmed photo  */
  --c-on-photo-muted: rgba(243, 241, 236, 0.86);

  /* --- Fonts --- */
  --font-heading: 'Gilda Display', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-script: 'Parisienne', cursive;

  /* --- Radius --- */
  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* --- Shadows (tuned for a soft, premium feel) --- */
  --shadow-sm: 0 1px 2px rgba(22, 21, 19, 0.06);
  --shadow: 0 10px 30px -12px rgba(22, 21, 19, 0.18);
  --shadow-lg: 0 30px 60px -24px rgba(22, 21, 19, 0.28);

  /* --- Section rhythm --- */
  --space-section: clamp(3.5rem, 2rem + 7vw, 8rem);

  color-scheme: light;
}

/* --- Semantic tokens : DARK THEME --- */
[data-theme="dark"] {
  --c-bg: var(--matte-black);
  --c-surface: #201E1A;
  --c-surface-2: #2A2823;
  --c-primary: #2C3E6B;
  --c-primary-soft: #20283C;
  --c-accent: var(--gold);
  --c-accent-text: var(--gold);      /* 7.6:1 AAA on dark matte black */
  --c-accent-soft: rgba(219, 169, 64, 0.16);
  --c-text: var(--off-white);
  --c-muted: #B4B1A9;
  --c-on-primary: var(--off-white);
  --c-on-accent: var(--matte-black);
  --c-line: rgba(243, 241, 236, 0.14);
  --c-line-strong: rgba(243, 241, 236, 0.26);
  --c-danger: #E0876F;
  --c-ring: var(--gold);
  --c-scrim: rgba(10, 9, 8, 0.55);
  --c-scrim-strong: rgba(6, 8, 16, 0.72);

  color-scheme: dark;
}

/* --- High-contrast preference : stronger palette --- */
@media (prefers-contrast: more) {
  :root {
    --c-accent-text: #7A530C;
    --c-muted: #3C3B37;
    --c-line: rgba(22, 21, 19, 0.4);
    --c-line-strong: rgba(22, 21, 19, 0.6);
  }
  [data-theme="dark"] {
    --c-accent-text: #F0C466;
    --c-muted: #DDDAD2;
    --c-line: rgba(243, 241, 236, 0.4);
    --c-line-strong: rgba(243, 241, 236, 0.6);
  }
}

/* =====================================================================
   KEYFRAMES (plain CSS allowed)
   ===================================================================== */
@keyframes vv-fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vv-kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}

/* Reveal-on-scroll helper (toggled by js) */
.reveal { opacity: 0; }
.reveal.is-in { animation: vv-fade-up 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) forwards; }
.kenburns { animation: vv-kenburns 18s ease-out alternate infinite; }

/* =====================================================================
   REDUCED MOTION preference
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
  .kenburns { animation: none; }
}

/* =====================================================================
   SAVE-DATA preference : drop heavy decoration
   ===================================================================== */
@media (prefers-reduced-data: reduce) {
  .kenburns { animation: none; }
  .decor-photo { background-image: none !important; }
  .script-accent { font-family: var(--font-heading); }
}

/* =====================================================================
   CONTAINER-AWARE COMPONENT (feature / property card)
   The card reshapes to the space it sits in, not the viewport.
   (Plain CSS is allowed here for naming containers — Rule 2i.)
   ===================================================================== */
.cq { container-type: inline-size; }

.cq-card {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 30rem) {
  .cq-card.cq-card--split {
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
}

/* =====================================================================
   THIRD-PARTY EMBED ADJUSTMENTS (markup not ours — Rule 2i)
   ===================================================================== */
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.25) contrast(1.02);
}
[data-theme="dark"] .map-embed iframe {
  filter: grayscale(0.4) invert(0.9) hue-rotate(180deg) contrast(0.9);
}

/* Fallback art shown if a remote photo fails to load (keeps the site
   looking art-directed rather than broken). */
.photo-fallback {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(219,169,64,0.28), transparent 55%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy) 46%, var(--matte-black) 100%);
}

/* =====================================================================
   LUXURY PAGE TRANSITION (Logo Reveal Curtain)
   ===================================================================== */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0A1128;
  background-image: radial-gradient(circle at 50% 45%, rgba(219, 169, 64, 0.16) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-curtain.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#page-curtain .curtain-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-curtain.is-active .curtain-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

#page-curtain .curtain-logo {
  height: 5rem;
  width: 5rem;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(219, 169, 64, 0.42));
}

#page-curtain .curtain-title {
  margin-top: 0.9rem;
  display: block;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  line-height: 1.2;
}

#page-curtain .curtain-subtitle {
  margin-top: 0.25rem;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--gold);
}

#page-curtain .curtain-bar {
  width: 2.85rem;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-top: 1.1rem;
  opacity: 0.9;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}

#page-curtain.is-active .curtain-bar {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  #page-curtain {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}