/* ============================================================
   HOME CINEMA — motion layer for the homepage, white theme.
   Loaded after styles.css. Styles the stats strip and marquee;
   Lenis + 3D effects live in home-cinema.js.
   ============================================================ */

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ---- 3D perspective containers ---- */
body.home-cinema .hero{perspective:1100px}
body.home-cinema .hero-inner{transform-style:preserve-3d;will-change:transform}
body.home-cinema .story-section{perspective:1200px}
body.home-cinema .cinema-frame{transform-style:preserve-3d}
body.home-cinema .plaza-facts-section{perspective:1200px}
body.home-cinema .featured-section{perspective:1200px}
body.home-cinema .featured-business>a{transform-style:preserve-3d}

/* ---- Stats strip (paper theme) ---- */
body.home-cinema .stats-section{background:#fff;border-bottom:1px solid var(--line);padding:clamp(48px,7vw,86px) 0}
body.home-cinema .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px)}
body.home-cinema .stat-tile{padding-top:20px;border-top:1px solid rgba(13,16,20,.22)}
body.home-cinema .stat-value{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,86px);line-height:1;color:var(--ink)}
body.home-cinema .stat-value sup{font-size:.45em;color:var(--gold);vertical-align:super}
body.home-cinema .stat-label{display:block;margin-top:12px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:820px){
  body.home-cinema .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  body.home-cinema .stat-tile:nth-child(3){display:none}
}

/* ---- Marquee divider (paper theme) ---- */
body.home-cinema .marquee-section{overflow:hidden;padding:clamp(30px,4vw,52px) 0;background:#f7f6f2;border-bottom:1px solid var(--line)}
body.home-cinema .marquee-track{display:flex;gap:0;width:max-content;will-change:transform;animation:hcMarquee 46s linear infinite}
body.home-cinema .marquee-group{display:flex;align-items:center;gap:clamp(28px,4vw,54px);padding-right:clamp(28px,4vw,54px);white-space:nowrap}
body.home-cinema .marquee-group span{font-family:var(--serif);font-size:clamp(30px,4.6vw,64px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(13,16,20,.32)}
body.home-cinema .marquee-group i{font-style:normal;color:var(--gold);font-size:clamp(12px,1.4vw,18px)}
@keyframes hcMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){body.home-cinema .marquee-track{animation:none}}

/* ---- Closer plaza views: expanding cards ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.home-cinema .views-section{background:#fff;border-bottom:1px solid var(--line);padding:92px 0}
body.home-cinema .views-cards{display:flex;gap:14px;min-height:min(62vh,560px)}
body.home-cinema .view-card{position:relative;flex:1;min-width:0;border-radius:10px;overflow:hidden;background:#f2f0ea;border:1px solid var(--line);transition:flex .75s var(--ease),background .45s var(--ease);will-change:flex}
body.home-cinema .view-card.is-active{flex:2.6;background:#0b0d10;border-color:#0b0d10}
body.home-cinema .view-hit{position:absolute;inset:0;z-index:5;border:0;background:transparent;cursor:pointer;border-radius:inherit}
body.home-cinema .view-card.is-active .view-hit{cursor:default}
body.home-cinema .view-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
body.home-cinema .view-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease) .18s}
body.home-cinema .view-card.is-active .view-video{opacity:1}
body.home-cinema .view-shade{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease) .18s;background:linear-gradient(0deg,rgba(7,9,12,.78),rgba(7,9,12,.06) 46%),linear-gradient(180deg,rgba(7,9,12,.42),rgba(7,9,12,0) 34%)}
body.home-cinema .view-card.is-active .view-shade{opacity:1}
body.home-cinema .view-num{position:absolute;top:16px;right:22px;z-index:2;font-family:var(--serif);font-weight:400;font-size:clamp(56px,6.4vw,104px);line-height:1;color:rgba(13,16,20,.14);transition:color .45s var(--ease)}
body.home-cinema .view-card.is-active .view-num{color:rgba(255,255,255,.92)}
body.home-cinema .view-copy{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
body.home-cinema .view-copy small{display:block;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
body.home-cinema .view-copy h3,body.home-cinema .view-copy strong{display:block;margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,24px);line-height:1.16;color:var(--ink);transition:color .45s var(--ease)}
body.home-cinema .view-card:not(.is-active) .view-copy h3,body.home-cinema .view-card:not(.is-active) .view-copy strong{max-width:200px}
body.home-cinema .view-card.is-active .view-copy small{color:var(--gold-2)}
body.home-cinema .view-card.is-active .view-copy h3,body.home-cinema .view-card.is-active .view-copy strong{color:#fff}
body.home-cinema .view-card:not(.is-active):hover{background:#ebe8e0}
@media(max-width:760px){
  body.home-cinema .views-cards{flex-direction:column;min-height:0;height:auto}
  body.home-cinema .view-card{flex:none;height:84px;transition:height .6s var(--ease),background .45s var(--ease)}
  body.home-cinema .view-card.is-active{flex:none;height:380px}
  body.home-cinema .view-num{font-size:40px;top:50%;right:18px;transform:translateY(-50%)}
  body.home-cinema .view-card.is-active .view-num{top:16px;transform:none}
  body.home-cinema .view-copy{left:18px;right:74px;bottom:auto;top:50%;transform:translateY(-50%)}
  body.home-cinema .view-card.is-active .view-copy{top:auto;bottom:18px;transform:none;right:18px}
  body.home-cinema .view-card:not(.is-active) .view-copy h3{display:none}
  body.home-cinema .view-card:not(.is-active) .view-copy small{font-size:11px}
  body.home-cinema .view-copy h3{max-width:none;font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  body.home-cinema .view-card,body.home-cinema .view-video,body.home-cinema .view-shade{transition:none}
}

/* ---- Build section: scroll-scrubbed construction timelapse ---- */
body.home-cinema .build-section{background:#0a0c0f}
body.home-cinema .build-stage{position:relative;height:100svh;min-height:600px;overflow:hidden}
body.home-cinema .build-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.home-cinema .build-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,12,.72),rgba(7,9,12,0) 44%),linear-gradient(180deg,rgba(7,9,12,.38),rgba(7,9,12,0) 30%)}
body.home-cinema .build-overlay{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,64px);z-index:2;color:#fff}
body.home-cinema .build-overlay h2{margin:14px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1;color:#fff}
body.home-cinema .build-progress{width:min(420px,60%);height:1px;margin-top:26px;background:rgba(255,255,255,.25)}
body.home-cinema .build-progress span{display:block;width:100%;height:100%;background:var(--gold-2);transform:scaleX(0);transform-origin:left}
body.home-cinema .build-stages{display:flex;gap:26px;margin-top:14px}
body.home-cinema .build-stages span{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .3s var(--ease)}
body.home-cinema .build-stages span.is-on{color:var(--gold-2)}
@media(max-width:899px){
  body.home-cinema .build-stage{height:auto;min-height:360px;aspect-ratio:4/3}
  body.home-cinema .build-overlay{bottom:20px}
  body.home-cinema .build-overlay h2{font-size:clamp(24px,5.6vw,34px)}
  body.home-cinema .build-progress{margin-top:16px}
}
@media(max-width:520px){
  body.home-cinema .build-stage{aspect-ratio:auto;height:70svh;min-height:420px}
}

/* ---- Leasing: light section after the dark build moment ---- */
body.home-cinema .leasing-section{background:#fff;color:var(--text);border-bottom:1px solid var(--line)}
body.home-cinema .leasing-section .kicker{color:var(--gold)}
body.home-cinema .leasing-section h2{color:var(--ink)}
body.home-cinema .leasing-section p{color:var(--muted)}
body.home-cinema .leasing-panel{background:var(--ink);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(11,13,16,.16)}
body.home-cinema .leasing-panel{color:#fff}
body.home-cinema .leasing-panel strong{color:#fff}