/* ===================== Nine Mansion v9 · glass-smooth transitions + living sketches ===================== */
/* smoother, staggered reveals (delay set per sibling in v9.js) */
.rv{transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0ms)}

/* zoom into the garden: the photo opens from a rounded card to full screen as you scroll */
.zoomx{position:relative;height:230vh;background:#fff;padding:0}
.zstick{position:sticky;top:0;height:100vh;overflow:hidden}
.zshot{position:absolute;inset:0;clip-path:inset(var(--zt,26vh) var(--zx,24vw) var(--zb,10vh) var(--zx,24vw) round var(--zr,28px));will-change:clip-path}
.zshot img{width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(var(--zi,1.18));will-change:transform}
.zshot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,28,0) 55%,rgba(14,20,28,.45));opacity:var(--zd,0)}
.ztitle{position:absolute;left:0;right:0;top:calc(var(--zt,26vh) - 150px);text-align:center;z-index:2;will-change:opacity,transform}
.ztitle h2{margin-top:8px}
.zchips{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);display:flex;gap:10px;z-index:2;flex-wrap:wrap;justify-content:center;width:max-content;max-width:92vw}
.zchips>span{padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.04em;box-shadow:0 14px 30px -16px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--curve),transform .6s var(--curve)}
.zchips>span.on{opacity:1;transform:none}
@media (max-width:980px){.zoomx{height:200vh}.ztitle{top:calc(var(--zt,26vh) - 120px);padding:0 20px}.zchips>span{font-size:12px;padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.zoomx{height:auto}.zstick{position:relative;height:80vh}}

/* tagline: words light up one by one */
.tagx{padding:96px 0;background:#fff}
.tagline{font-family:var(--display);font-size:52px;line-height:1.18;max-width:1040px;letter-spacing:-.01em}
.tagline .w{color:rgba(28,36,48,.14);transition:color .6s var(--curve)}
.tagline .w.on{color:var(--ink)}.tagline .w.hl.on{color:var(--terra);font-style:italic}
@media (max-width:980px){.tagx{padding:64px 0}.tagline{font-size:32px}}

/* living sketches (canvas, batik style): bigger and clearer than v8 */
.sketch,.leafy>canvas.sketch{position:absolute;pointer-events:none;z-index:0}
canvas.sketch.house{right:-1%;bottom:0;width:min(70vw,1000px);opacity:1}
canvas.sketch.emblem{right:3%;top:24px;width:min(42vw,540px);opacity:1}
@media (max-width:980px){canvas.sketch.house{width:120vw;right:-24vw;opacity:.55}canvas.sketch.emblem{width:84vw;right:-10vw;top:14px;opacity:.6}}
.ztitle .eyebrow{justify-content:center}.ztitle .eyebrow::before{display:none}
/* keep the contact details crisp over the moving sketch */
#contact .links a,#contact .addr-card{background:#fff}
canvas.sketch.house{right:-4%;bottom:0;width:min(48vw,720px)}
canvas.sketch.emblem{right:2%;top:-6px;width:min(34vw,460px)}
/* the house sketch now lives beside the tagline, in open space */
.tagx .tgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.tagx .tagline{font-size:44px;grid-column:1}
.tagx .tsk{grid-column:2;grid-row:1;position:relative}
.tagx canvas.sketch.house{position:relative;right:auto;bottom:auto;width:100%;display:block}
@media (max-width:980px){.tagx .tgrid{grid-template-columns:1fr}.tagx .tsk{grid-column:1;grid-row:auto}.tagx .tagline{font-size:30px}.tagx canvas.sketch.house{width:100%;opacity:.9}}