/* =================================================================
   ARGOS — Virtual Showroom
   Palette: warm beige #E8E2D6 + charcoal #1A1A1A + one muted accent.
   Type: Cormorant Garamond (display serif) / Inter (body).
   ================================================================= */

:root{
  --beige:   #E8E2D6;
  --beige-2: #DAD3C4;   /* slightly deeper beige for surfaces */
  --char:    #1A1A1A;
  --char-2:  #2A2A28;
  --accent:  #9A7B4F;   /* one muted bronze accent */
  --line:    rgba(26,26,26,.18);
  --ease:    cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;       /* no pull-to-refresh fighting the hero */
}

body{
  background: var(--char);          /* dark behind the canvas while 3D shows */
  color: var(--char);
  font-family:"Inter", system-ui, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

/* ---- Typography helpers ---- */
.display{
  font-family:"Cormorant Garamond", Didot, "Times New Roman", serif;
  font-weight:400;
  line-height:.96;
  letter-spacing:.005em;
}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:400;
  opacity:.6;
}
.lede{ font-weight:300; opacity:.7; margin-top:1.1rem; font-size:1rem; }
.muted{ opacity:.55; }

/* =================================================================
   3D LAYER
   ================================================================= */
#bg{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  display:block;
  z-index:0;
  /* canvas paints itself; this bg shows before first frame */
  background:#141414;
}

/* Loading overlay */
#loader{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:#141414;
  transition:opacity 1s var(--ease);
}
#loader.hide{ opacity:0; pointer-events:none; }
.loader-inner{ text-align:center; color:var(--beige); }
.loader-mark{
  font-family:"Cormorant Garamond", serif;
  font-size:2.2rem; letter-spacing:.34em; padding-left:.34em;
  opacity:.9; margin-bottom:1.6rem;
}
.loader-bar{
  width:200px; height:1px; background:rgba(232,226,214,.25);
  margin:0 auto; overflow:hidden;
}
.loader-bar span{
  display:block; height:100%; width:0%;
  background:var(--beige); transition:width .3s linear;
}
.loader-pct{
  margin-top:1rem; font-size:.7rem; letter-spacing:.3em;
  opacity:.5; font-variant-numeric:tabular-nums;
}

/* Static poster fallback */
#poster{ position:fixed; inset:0; z-index:30; background:var(--beige); }
#poster img{ width:100%; height:100%; object-fit:cover; }

/* =================================================================
   PINNED OVERLAYS ("rooms")
   ================================================================= */
#overlays{
  position:fixed; inset:0; z-index:10;
  pointer-events:none;
}
.room{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center;
  padding:8vw;
  color:var(--beige);
  opacity:0;                       /* JS drives this */
  will-change:opacity, transform;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.room.align-left{ align-items:flex-start; text-align:left; }
.room.align-right{ align-items:flex-end;  text-align:right; }
.room .display{ font-size:clamp(3rem, 9vw, 8.5rem); }
.room .eyebrow{ margin-bottom:1.4rem; color:var(--beige); }
.room .lede{ color:var(--beige); }

/* Scroll hint */
#scroll-hint{
  position:fixed; left:50%; bottom:3vh; transform:translateX(-50%);
  z-index:11; color:var(--beige); text-align:center;
  font-size:.65rem; letter-spacing:.35em; text-transform:uppercase;
  opacity:.7; transition:opacity .6s var(--ease); pointer-events:none;
}
#scroll-hint.hide{ opacity:0; }
#scroll-hint i{
  display:block; width:1px; height:34px; margin:.9rem auto 0;
  background:linear-gradient(var(--beige), transparent);
  animation:hint 1.8s var(--ease) infinite;
  transform-origin:top;
}
@keyframes hint{ 0%{transform:scaleY(0);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* =================================================================
   SCROLL SPACER  — provides the scroll distance for the flythrough
   ================================================================= */
#spacer{ position:relative; z-index:1; height:600vh; pointer-events:none; }

/* =================================================================
   CONTENT  — normal sections; opaque so they cover the canvas
   ================================================================= */
#content{
  position:relative; z-index:20;
  background:var(--beige);
  color:var(--char);
  border-top:1px solid var(--line);
}
#content section{ padding:14vh 8vw; max-width:1200px; margin:0 auto; }

.intro .display.xl{ font-size:clamp(2.6rem, 7vw, 6rem); }
.intro .eyebrow{ margin-bottom:1.6rem; }

/* Cards */
.cards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  background:var(--line);                /* gap lines */
  border:1px solid var(--line);
}
.card{
  background:var(--beige);
  padding:3rem 2rem 2.4rem;
  min-height:240px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transform-style:preserve-3d;
  transition:background .4s var(--ease);
}
.card:hover{ background:var(--beige-2); }
.card-no{
  font-family:"Cormorant Garamond", serif;
  font-size:1rem; letter-spacing:.2em; color:var(--accent);
  margin-bottom:auto;
}
.card h3{
  font-family:"Cormorant Garamond", serif; font-weight:400;
  font-size:2rem; line-height:1; margin-bottom:.5rem;
  transform:translateZ(30px);          /* lifts on tilt */
}
.card p{ font-size:.9rem; opacity:.65; transform:translateZ(18px); }

/* Floor-plan */
.plan{ display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center; }
.plan-text .display{ font-size:clamp(2.2rem, 5vw, 4rem); }
.plan-text .eyebrow{ margin-bottom:1.4rem; }
#floorplan{ width:100%; height:auto; color:var(--char); }
#floorplan .draw{
  stroke-dasharray:1;                  /* set precisely by JS */
  stroke-dashoffset:1;
}
#floorplan .dot{ opacity:0; transition:opacity .6s var(--ease); }
#floorplan.drawn .dot{ opacity:.7; }
#floorplan .route{ color:var(--accent); }

/* Footer */
.foot{ border-top:1px solid var(--line); }
.foot-row{
  max-width:1200px; margin:0 auto; padding:2.4rem 8vw;
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.78rem; letter-spacing:.04em;
}
.foot-row.small{ padding-top:0; }
.foot .mark{ font-family:"Cormorant Garamond", serif; font-size:1.4rem; letter-spacing:.4em; }

@media (max-width:760px){
  .plan{ grid-template-columns:1fr; gap:3rem; }
  .foot-row{ flex-direction:column; gap:.4rem; }
}

/* ---- Phones ---- */
@media (max-width:560px){
  .room{ padding:7vw; }
  .room .display{ font-size:clamp(2.6rem, 14vw, 4.4rem); }
  .room .eyebrow{ margin-bottom:1rem; }
  .loader-mark{ font-size:1.5rem; letter-spacing:.28em; padding-left:.28em; }
  #content section{ padding:11vh 7vw; }
  .intro .display.xl{ font-size:clamp(2.2rem, 11vw, 3.4rem); }
  .card{ min-height:200px; padding:2.4rem 1.6rem 2rem; }
  .card h3{ font-size:1.7rem; }
  .foot .mark{ font-size:1.2rem; }
}

/* Respect reduced motion: kill the hint animation (canvas handled in JS) */
@media (prefers-reduced-motion: reduce){
  #scroll-hint i{ animation:none; }
}