/* =========================================================
   AURELIA RESIDENCES — Design System
   ========================================================= */
:root{
  --charcoal: #0e0d0b;
  --charcoal-2: #17150f;
  --ivory: #f3ede2;
  --ivory-dim: #cfc7b8;
  --bronze: #b08a55;
  --bronze-light: #d9bd8e;
  --grey: #8a8378;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .35s;
  --dur-med: .8s;
  --dur-slow: 1.4s;

  --nav-h: 84px;

  /* Cinematic video correction — luxury cinema, not dark cinema.
     Individual sections override these below. */
  --video-brightness: 1.18;
  --video-contrast: 1.04;
  --video-saturation: 1.05;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; background: var(--charcoal); }
body{
  font-family: var(--font-body);
  background: var(--charcoal);
  color: var(--ivory);
  overflow-x: hidden;
  min-height: 100vh;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor:pointer; }

::selection{ background: var(--bronze); color: var(--charcoal); }

:focus-visible{
  outline: 1px solid var(--bronze-light);
  outline-offset: 4px;
}

/* =========================================================
   TYPE SCALE
   ========================================================= */
.eyebrow, .tag{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bronze-light);
  font-weight: 500;
}
.tag.gold{ color: var(--bronze-light); }

.display-xl{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: .96;
  letter-spacing: -.01em;
}
.display-lg{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  margin-top: 18px;
}
.hero-line{
  font-family: var(--font-body);
  letter-spacing: .32em;
  font-size: clamp(.7rem, 1.4vw, .95rem);
  color: var(--bronze-light);
  margin-top: 22px;
  font-weight: 500;
}
.lede{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ivory-dim);
  line-height: 1.6;
  margin-top: 22px;
  max-width: 32ch;
}
.align-center .lede{ margin-left:auto; margin-right:auto; }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position: fixed; inset:0; z-index: 999;
  background: var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
  transition: opacity 1.1s var(--ease), visibility 1.1s var(--ease);
}
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  font-size: 11px; letter-spacing: .35em; color: var(--grey); text-transform:uppercase;
}
.loader-sub{
  font-family: var(--font-display); font-size: clamp(1.4rem,4vw,2.4rem);
  text-align:center; line-height:1.25;
}
.loader-sub span{
  display:block; font-family: var(--font-body); font-size: 11px;
  letter-spacing: .3em; color: var(--bronze-light); margin-top: 8px;
}
.loader-bar{ width: 160px; height: 1px; background: rgba(243,237,226,.15); overflow:hidden; }
.loader-bar-fill{ width:0%; height:100%; background: var(--bronze-light); transition: width .4s linear; }

/* =========================================================
   JOURNEY SCRUBBER (signature element)
   ========================================================= */
.journey{
  position: fixed; right: 28px; top:50%; transform: translateY(-50%);
  z-index: 60; display:flex; align-items:center;
}
.journey-track{
  position: relative; width:1px; height: 220px; background: rgba(243,237,226,.15);
  margin-right: 14px;
}
.journey-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background: var(--bronze-light); transition: height .25s linear;
}
.journey-stops{
  position:absolute; top:0; left:0; height:220px; display:flex; flex-direction:column; justify-content:space-between;
  transform: translateX(-4px);
}
.journey-stops li{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color: var(--grey);
  cursor:pointer; padding: 4px 0 4px 14px; transition: color .3s ease;
  white-space: nowrap;
}
.journey-stops li.active{ color: var(--bronze-light); }
@media (max-width: 900px){ .journey{ display:none; } }

/* =========================================================
   NAV
   ========================================================= */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 70;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  height: var(--nav-h);
  background: linear-gradient(to bottom, rgba(14,13,11,.75), transparent);
  transition: transform .5s var(--ease), background .4s ease;
}
.site-nav.nav-hidden{ transform: translateY(-100%); }
.site-nav.nav-solid{ background: rgba(14,13,11,.88); backdrop-filter: blur(10px); }
.brand{ font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .08em; }
.nav-links{ display:flex; gap: clamp(18px,2.4vw,40px); }
.nav-links a{
  font-size: 11px; letter-spacing: .18em; text-transform:uppercase; color: var(--ivory-dim);
  position:relative; padding-bottom: 4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--bronze-light);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  border: 1px solid var(--bronze); padding: 10px 20px; transition: all .35s ease;
}
.nav-cta:hover{ background: var(--bronze); color: var(--charcoal); }
.menu-btn{ display:none; flex-direction:column; gap:5px; width:26px; }
.menu-btn span{ height:1px; background: var(--ivory); width:100%; transition: transform .3s ease, opacity .3s ease; }

@media (max-width: 860px){
  .nav-links, .nav-cta{ display:none; }
  .menu-btn{ display:flex; }
}

.mobile-menu{
  position: fixed; inset: 0; z-index: 65;
  background: var(--charcoal); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap: 30px;
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--font-display); font-size: 1.6rem; }
.mobile-cta{ color: var(--bronze-light); }

/* =========================================================
   SCENES
   ========================================================= */
.scene{
  position: relative; min-height: 100vh; width:100%;
  display:flex; align-items:flex-end;
  overflow: hidden;
}
.scene-static{ align-items:center; padding: 140px 0; min-height: 90vh; background: var(--charcoal); }
.scene-dark{ background: var(--charcoal); }
.scene-final{ min-height: 80vh; }

.scene-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.06); transition: transform 1.6s var(--ease), filter .6s ease;
  filter: brightness(var(--video-brightness)) contrast(var(--video-contrast)) saturate(var(--video-saturation));
}
.scene.in-view .scene-video{ transform: scale(1); }

/* Per-section brightness tuning — luxury cinema, not dark cinema.
   Each clip is graded individually so architecture, materials and
   light are legible while the mood stays cinematic. */
#hero .scene-video{ --video-brightness: 1.16; --video-contrast: 1.03; --video-saturation: 1.04; }
#enter .scene-video{ --video-brightness: 1.23; --video-contrast: 1.02; --video-saturation: 1.03; }
#skyclub .scene-video{ --video-brightness: 1.19; --video-contrast: 1.03; --video-saturation: 1.08; }
#penthouse .scene-video{ --video-brightness: 1.21; --video-contrast: 1.03; --video-saturation: 1.04; }
#viewing .scene-video{ --video-brightness: 1.15; --video-contrast: 1.02; --video-saturation: 1.02; }
#contact .scene-video{ --video-brightness: 1.17; --video-contrast: 1.02; --video-saturation: 1.03; }

.scene-scrim{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(14,13,11,.45) 0%, rgba(14,13,11,.10) 45%, rgba(14,13,11,.22) 100%);
}
.scrim-soft{ background: linear-gradient(to top, rgba(14,13,11,.28) 0%, rgba(14,13,11,.06) 50%, rgba(14,13,11,.16) 100%); }
.scrim-dark{ background: linear-gradient(to top, rgba(14,13,11,.55) 10%, rgba(14,13,11,.20) 60%, rgba(14,13,11,.28) 100%); }

.scene-content{
  position: relative; z-index: 2; width:100%;
  padding: 0 clamp(20px, 6vw, 90px) 100px;
}
.scene-static .scene-content{ padding-bottom: 0; }
.align-center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.align-left{ max-width: 900px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.scene.in-view .reveal{ opacity:1; transform: translateY(0); }
.reveal:nth-child(1){ transition-delay: .05s; }
.reveal:nth-child(2){ transition-delay: .16s; }
.reveal:nth-child(3){ transition-delay: .27s; }
.reveal:nth-child(4){ transition-delay: .38s; }
.reveal:nth-child(5){ transition-delay: .49s; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ align-items:flex-end; }
.hero-content{ padding-bottom: 130px; position: relative; }
.hero-content::before{
  content:''; position:absolute; left:-24px; right:-24px; top:-40px; bottom:-24px;
  background: linear-gradient(90deg, rgba(14,13,11,.38), rgba(14,13,11,.04) 65%);
  pointer-events:none;
}
.hero-ctas{ display:flex; gap: 20px; margin-top: 40px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color: var(--ivory-dim);
}
.scroll-cue i{
  width:1px; height:34px; background: linear-gradient(to bottom, var(--bronze-light), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--ivory); animation: cueMove 2.2s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position: relative; display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 34px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden;
}
.btn span{ position:relative; z-index:1; transition: color .4s var(--ease); }
.btn-primary{ background: var(--bronze-light); color: var(--charcoal); }
.btn-primary:hover{ background: var(--ivory); }
.btn-ghost{ border: 1px solid rgba(243,237,226,.4); color: var(--ivory); }
.btn-ghost:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }
.btn-outline{ border: 1px solid var(--bronze); color: var(--bronze-light); }
.btn-outline::before{
  content:''; position:absolute; inset:0; background: var(--bronze); transform: scaleX(0);
  transform-origin:left; transition: transform .45s var(--ease); z-index:0;
}
.btn-outline:hover::before{ transform: scaleX(1); }
.btn-outline:hover span{ color: var(--charcoal); }

/* =========================================================
   TAG / AMENITIES / STAGGER
   ========================================================= */
.tag{ display:block; margin-bottom: 4px; }
.amenity-line{ display:flex; gap: 28px; flex-wrap:wrap; justify-content:center; margin-top: 34px; }
.amenity-line li{
  font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--ivory-dim);
  padding-bottom: 6px; border-bottom: 1px solid rgba(243,237,226,.2);
}
.stagger-list{ display:flex; flex-direction:column; gap: 10px; margin-top: 30px; }
.stagger-list span{
  font-family: var(--font-display); font-size: clamp(1rem,2vw,1.4rem); color: var(--ivory-dim);
}

/* =========================================================
   3D EXPLORE PLACEHOLDER
   ========================================================= */
.model-stage{ width:100%; max-width: 560px; margin-top: 44px; }
.model-frame{
  position: relative; aspect-ratio: 16/10; border: 1px solid rgba(176,138,85,.4);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(176,138,85,.08), transparent 70%);
}
.model-axis{
  width: 64px; height: 64px; border: 1px solid var(--bronze); border-radius:50%;
  position: relative;
}
.model-axis::before, .model-axis::after{
  content:''; position:absolute; background: rgba(176,138,85,.5);
}
.model-axis::before{ top:50%; left:-14px; right:-14px; height:1px; }
.model-axis::after{ left:50%; top:-14px; bottom:-14px; width:1px; }
.model-note{ font-size: 10px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey); }

/* ---- Interactive 3D viewer (additive) ---- */
.model-frame-3d{ overflow: hidden; cursor: grab; }
.model-frame-3d:active{ cursor: grabbing; }
.model-canvas-wrap{ position: absolute; inset: 0; }
.model-canvas-wrap canvas{ display:block; width:100% !important; height:100% !important; touch-action:none; }

.model-badge{
  position:absolute; top:14px; left:14px; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--bronze-light); background: rgba(14,13,11,.55); padding:6px 10px;
  border:1px solid rgba(176,138,85,.4); pointer-events:none; z-index:2;
}
.model-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--ivory-dim); background: rgba(14,13,11,.5); padding:6px 12px;
  border:1px solid rgba(243,237,226,.15); pointer-events:none; white-space:nowrap; z-index:2;
}
.model-loading{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background: var(--charcoal); transition: opacity .4s var(--ease), visibility .4s; z-index:3;
}
.model-loading.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.model-spinner{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(176,138,85,.25);
  border-top-color: var(--bronze); animation: model-spin .9s linear infinite;
}
@keyframes model-spin{ to{ transform: rotate(360deg); } }
.model-loading-text{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey); }

@media (max-width: 640px){
  .model-badge, .model-hint{ font-size:9px; padding:5px 8px; }
}

/* =========================================================
   LOCATION MAP
   ========================================================= */
.map-wrap{
  position: relative; width: min(560px, 90vw); aspect-ratio: 1/1; margin-top: 50px;
}
.map-svg{ width:100%; height:100%; }
.map-core{ fill: var(--bronze-light); }
.map-ring{ fill:none; stroke: rgba(176,138,85,.28); stroke-width:1; }
.map-ring-2{ stroke: rgba(176,138,85,.15); }
.map-lines line{ stroke: rgba(176,138,85,.4); stroke-width:1; stroke-dasharray: 4 5; }
.map-points circle{ fill: var(--bronze-light); }
.map-label{
  position:absolute; transform: translate(-50%,-50%); font-size: 10px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ivory-dim); white-space:nowrap;
}
.map-label-core{
  left:50%; top:50%; font-family: var(--font-display); font-size: 1.1rem; color: var(--bronze-light);
  transform: translate(-50%, -140%);
}

/* =========================================================
   FORM
   ========================================================= */
.form-content{ width:100%; max-width: 560px; margin: 0 auto; position: relative; }
.form-content::before{
  content:''; position:absolute; left:-30px; right:-30px; top:-30px; bottom:-30px;
  background: radial-gradient(ellipse at center, rgba(14,13,11,.32), rgba(14,13,11,0) 72%);
  pointer-events:none;
}
.viewing-form{ width:100%; margin-top: 40px; display:flex; flex-direction:column; gap: 26px; }
.field{ position:relative; }
.field input{
  width:100%; background:transparent; border:none; border-bottom: 1px solid rgba(243,237,226,.3);
  color: var(--ivory); font-size: 1rem; padding: 10px 2px; font-family: var(--font-body);
}
.field input:focus{ outline:none; border-color: var(--bronze-light); }
.field label{
  position:absolute; left:2px; top:10px; color: var(--grey); font-size: .95rem; pointer-events:none;
  transition: all .25s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top: -14px; font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze-light);
}
.form-submit{ align-self:flex-start; margin-top: 10px; }
.form-success{ margin-top: 40px; text-align:center; }
.success-title{ font-family: var(--font-display); font-size: 1.6rem; color: var(--bronze-light); }
.success-sub{ margin-top: 10px; color: var(--ivory-dim); font-weight:300; }
.concierge-row{ display:flex; gap: 22px; margin-top: 34px; flex-wrap:wrap; justify-content:center; }
.pill-link{
  font-size: 11px; letter-spacing:.16em; text-transform:uppercase; padding: 12px 22px;
  border: 1px solid rgba(243,237,226,.3); transition: all .3s ease;
}
.pill-link:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }

/* =========================================================
   CONTACT GRID
   ========================================================= */
.concierge-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 34px; margin-top: 46px; width:100%; max-width: 760px;
}
.concierge-grid div{ display:flex; flex-direction:column; gap: 8px; }
.concierge-grid span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey); }
.concierge-grid a{ font-family: var(--font-display); font-size: 1.15rem; color: var(--ivory); }
.concierge-grid a[href]:hover{ color: var(--bronze-light); }
.demo-note{ margin-top: 30px; font-size: 11px; color: var(--grey); }

/* =========================================================
   SOUND TOGGLE
   ========================================================= */
.sound-toggle{
  position: fixed; bottom: 24px; left: 24px; z-index: 60;
  font-size: 9px; letter-spacing:.2em; color: var(--grey);
  border: 1px solid rgba(243,237,226,.2); padding: 8px 14px;
  background: rgba(14,13,11,.5); backdrop-filter: blur(6px);
}
.sound-toggle[aria-pressed="true"]{ color: var(--bronze-light); border-color: var(--bronze); }
@media (max-width: 860px){ .sound-toggle{ bottom: 16px; left: 16px; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px){
  .scene-content{ padding-bottom: 70px; }
  .hero-content{ padding-bottom: 90px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .align-left{ max-width: 100%; }
  .amenity-line{ gap: 16px; }
  .concierge-row{ flex-direction:column; align-items:stretch; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001s !important; transition-duration: .001s !important; }
  .scene-video{ transform:none !important; }
  html{ scroll-behavior:auto; }
}


/* =========================================================
   FINANCIAL CALCULATOR — embedded standalone module
   ========================================================= */
.finance-scene{
  min-height: auto;
  align-items: stretch;
  padding: clamp(72px, 9vw, 130px) 0;
}
.finance-content{
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 0 !important;
}
.finance-content > .lede{ margin-bottom: 34px; }
.finance-frame-wrap{
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(217,189,142,.28);
  border-radius: 12px;
  background: #030712;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.finance-frame{
  display: block;
  width: 100%;
  height: 1900px;
  border: 0;
  background: #030712;
}
.finance-disclaimer{
  margin: 18px auto 0;
  max-width: 80ch;
  color: var(--ivory-dim);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
  text-align: center;
}
@media (max-width: 700px){
  .finance-scene{ padding: 76px 0 64px; }
  .finance-content{ padding-left: 12px; padding-right: 12px; }
  .finance-frame-wrap{ border-radius: 8px; }
  .finance-frame{ height: 2250px; }
}