/* AURORA ESTATES — Aurelis design system, light editorial canvas.
   All colour, type, spacing values come from tokens/*.css. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--surface-soft-light);color:var(--text-on-light);font:var(--type-body);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--text-on-light);text-decoration:none}
a:hover{color:var(--brand-accent-press)}
button{font-family:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 1px var(--surface-soft-light),0 0 0 3px var(--brand-accent)}
.plus{font-weight:400}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--text-on-light-muted);margin:0}

/* ── Navigation ─────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;gap:40px;padding:0 clamp(16px,3vw,40px);z-index:60;background:rgba(247,247,244,.72);backdrop-filter:blur(18px) saturate(120%);border-bottom:1px solid transparent;transition:border-color var(--duration-normal,240ms) ease}
.nav.is-scrolled{border-bottom-color:var(--border-on-light)}
.wordmark{font:var(--type-nav);font-weight:600;text-transform:uppercase;letter-spacing:.34em;font-size:13px}
.nav-links{display:flex;gap:28px;margin-right:auto}
.nav-links a,.lang-btn{font:var(--type-nav);letter-spacing:var(--tracking-micro-tight);text-transform:uppercase;position:relative;padding:6px 0}
.nav-links a::after,.rail::after,.text-btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brand-accent);transform:scaleX(0);transform-origin:right;transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after,.rail:hover::after,.text-btn:hover::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{display:flex;align-items:center;gap:8px}
.lang-btn{color:var(--text-on-light-muted);font-size:11px}
.lang-btn.is-on{color:var(--text-on-light)}
.lang-sep{color:var(--border-on-light)}
.burger{display:none;flex-direction:column;gap:6px;width:24px}
.burger span{display:block;height:1px;width:24px;background:var(--text-on-light)}

/* ── Hero ───────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate}
.rail{position:absolute;top:96px;font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;font-weight:700;padding-bottom:3px;border-bottom:1px solid var(--text-on-light);z-index:40}
.rail-left{left:clamp(16px,3vw,40px)}
.rail-right{right:clamp(16px,3vw,40px)}

.cat-index{position:absolute;top:132px;display:flex;flex-direction:column;gap:16px;z-index:30}
@media (max-height:760px){.cat-index{gap:11px;top:120px}}
.cat-left{left:clamp(16px,3vw,40px)}
.cat-right{right:clamp(16px,3vw,40px);align-items:flex-end;text-align:right}
.cat-item{font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;font-weight:600;color:var(--text-on-light);border-bottom:1px solid var(--border-on-light);padding-bottom:4px;transition:border-color 240ms ease,transform 420ms cubic-bezier(.16,1,.3,1)}
.cat-item:hover{border-bottom-color:var(--brand-accent)}
.cat-left .cat-item:hover{transform:translateX(4px)}
.cat-right .cat-item:hover{transform:translateX(-4px)}
.cat-item sup{font-size:8px;font-weight:400;color:var(--text-on-light-muted);margin-left:4px;vertical-align:super}
.cat-scroll{display:none}

/* ── Centre copy ────────────────────────────────────────── */
.center{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:min(740px,86vw);text-align:center;z-index:35;pointer-events:none}
.center-default,.center-preview{transition:opacity 420ms cubic-bezier(.16,1,.3,1),transform 420ms cubic-bezier(.16,1,.3,1)}
.center-preview{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none}
.center.is-preview .center-default{opacity:0;transform:translateY(-10px)}
.center.is-preview .center-preview{opacity:1;transform:translateY(0)}
.headline,.sub{animation:rise 1200ms cubic-bezier(.16,1,.3,1) backwards}
.sub{animation-delay:90ms}
.nav{animation:rise 720ms cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.headline{font:var(--type-display-1);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance}
.sub{font:var(--type-body-lg);color:var(--text-on-light-muted);max-width:560px;margin:20px auto 0;text-wrap:pretty}
.preview-title{font:var(--type-display-3);letter-spacing:var(--tracking-display);margin:0}
.preview-figure{position:relative;width:min(420px,62vw);aspect-ratio:3/2;margin:24px auto 0;background:var(--surface-strong-light)}
.preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 420ms cubic-bezier(.16,1,.3,1);filter:saturate(.9) contrast(1.05) brightness(.94)}
.preview-img.is-on{opacity:1}
.preview-meta{font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--text-on-light-muted);margin:16px 0 0}
.preview-cta{display:inline-block;margin-top:14px;font:var(--type-button);letter-spacing:var(--tracking-button);text-transform:uppercase;color:var(--brand-accent-press);border-bottom:1px solid var(--brand-accent);padding-bottom:3px;opacity:0;pointer-events:none;transition:opacity 240ms ease}
.center.is-locked .preview-cta{opacity:1;pointer-events:auto}

/* ── Ring ───────────────────────────────────────────────── */
.ring-stage{position:absolute;left:50%;top:66%;width:100%;height:460px;transform:translate(-50%,-50%);perspective:1200px;z-index:10;cursor:grab}
.ring-stage.is-dragging{cursor:grabbing}
.ring{position:absolute;inset:0;transform-style:preserve-3d}
.panel{position:absolute;left:50%;top:50%;width:44px;height:118px;margin:-59px 0 0 -22px;background:var(--surface-strong-light);border:1px solid rgba(24,24,24,.16);overflow:hidden;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden}
.panel img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05) brightness(.94);transition:filter 240ms ease}
.panel.is-active{border-color:var(--brand-accent);box-shadow:0 4px 8px rgba(0,0,0,.1)}
.panel.is-active img{filter:saturate(1) contrast(1.08) brightness(1.02)}
.hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:rgba(24,24,24,.35);z-index:40}

/* ── Cursor ─────────────────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:9999px;background:var(--text-on-light);pointer-events:none;z-index:90;transform:translate(-50%,-50%);transition:width 240ms ease,height 240ms ease,background 240ms ease;opacity:0}
.cursor.is-on{opacity:1}
.cursor.is-hot{width:18px;height:18px;background:var(--brand-accent)}

/* ── Grid view ──────────────────────────────────────────── */
.grid-view{min-height:100vh;padding:120px clamp(16px,4vw,64px) 96px;background:var(--canvas-light)}
.grid-head{max-width:1280px;margin:0 auto 48px}
.grid-title{font:var(--type-display-2);letter-spacing:var(--tracking-display);margin:12px 0 0}
.grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:64px 32px}
.card{display:block;text-align:left}
.card-figure{overflow:hidden;background:var(--surface-strong-light);aspect-ratio:4/5}
.card-figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05) brightness(.94);transition:transform 1200ms cubic-bezier(.16,1,.3,1)}
.card:hover .card-figure img{transform:scale(1.04)}
.card-title{font:var(--type-title-md);margin:16px 0 0}
.card-meta{font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--text-on-light-muted);margin:8px 0 0;display:flex;align-items:center;gap:8px}
.dot{width:5px;height:5px;border-radius:9999px;background:var(--status-available);flex:none}
.dot.reserved{background:var(--status-reserved)}.dot.sold{background:var(--status-sold)}
.card-price{font:var(--type-price);letter-spacing:var(--tracking-display);margin:10px 0 0}
.grid-foot{max-width:1280px;margin:64px auto 0;text-align:center}
.text-btn{position:relative;font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;font-weight:700;padding-bottom:3px;border-bottom:1px solid var(--text-on-light)}

/* ── Filter overlay ─────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:80;background:var(--canvas-light);overflow-y:auto;animation:fade 240ms ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.overlay-inner{max-width:1280px;margin:0 auto;padding:40px clamp(16px,4vw,64px) 64px}
.overlay-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--border-on-light)}
.filter-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;padding:40px 0}
.filter-group h3{font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--text-on-light-muted);margin:0 0 16px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 18px;border:1px solid var(--border-on-light);font:var(--type-body-sm);display:inline-flex;align-items:center;transition:border-color 240ms ease,background 240ms ease}
.chip:hover{border-color:var(--text-on-light)}
.chip.is-on{border-color:var(--brand-accent);background:var(--brass-tint)}
.overlay-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid var(--border-on-light)}
.overlay-actions{display:flex;align-items:center;gap:24px}
.result-count{font:var(--type-caption-uppercase);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--text-on-light-muted);margin:0}
.btn{height:48px;padding:0 28px;background:var(--brand-accent);color:var(--on-primary);font:var(--type-button);letter-spacing:var(--tracking-button);text-transform:uppercase;transition:background 240ms ease,transform 120ms ease}
.btn:hover{background:var(--brand-accent-hover)}
.btn:active{background:var(--brand-accent-press);transform:translateY(1px)}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links{gap:20px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cat-index{gap:14px;top:190px}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav.is-open .nav-links{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--surface-soft-light);padding:16px clamp(16px,3vw,40px) 24px;border-bottom:1px solid var(--border-on-light)}
  .nav.is-open .nav-links a{padding:14px 0}
  .cat-index{display:none}
  .cat-scroll{display:flex;position:absolute;top:150px;left:0;right:0;gap:20px;padding:0 clamp(16px,4vw,24px);overflow-x:auto;scrollbar-width:none;z-index:30}
  .cat-scroll::-webkit-scrollbar{display:none}
  .cat-scroll .cat-item{white-space:nowrap;flex:none}
  .center{top:26%}
  .rail{top:88px}
  .ring-stage{height:340px;top:72%}
  .grid{grid-template-columns:1fr;gap:48px}
  .filter-groups{grid-template-columns:1fr;gap:32px}
  .overlay-foot{flex-direction:column;align-items:flex-start}
  .cursor{display:none}
}
@media (max-width:480px){
  .center{top:24%;width:90vw}
  .preview-figure{width:78vw}
  .hint{font-size:9px;letter-spacing:3px;width:90vw;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:1ms!important;transition-duration:1ms!important}
  .card-figure img{transform:none!important}
}