/* ---------- motion, section backgrounds, architectural motif ----------
   Only transform / opacity / clip-path are animated. Every effect is inside a no-preference media query or has a
   reduced-motion fallback at the end of this file. */
@property --draw { syntax: "<number>"; inherits: true; initial-value: 0; }

/* scroll progress + nav that hides on scroll down */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.nav { transition: transform .45s var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav.is-hidden { transform: translateY(-101%); }

/* hero entrance (CSS only, on load) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy > * { animation: rise .9s var(--ease) both; }
  .js .hero__copy > :nth-child(1) { animation-delay: .05s; }
  .js .hero__copy > :nth-child(2) { animation-delay: .15s; }
  .js .hero__copy > :nth-child(3) { animation-delay: .45s; }
  .js .hero__copy > :nth-child(4) { animation-delay: .6s; }
  .js .hero .viewfinder { animation: vf-in 1.2s var(--ease) .2s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes vf-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } }

/* ---------- reveals, word masks, clip-path masks ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
  .js [data-split] .wi { display: inline-block; transform: translateY(115%); transition: transform .95s var(--ease); transition-delay: calc(var(--wi, 0) * 55ms); }
  .js [data-split].is-in .wi { transform: none; }
  .js .hero [data-split] .wi { transition-duration: .7s; transition-delay: calc(var(--wi, 0) * 40ms); }
  /* image reveal: a curtain in the section colour wipes away (robust with IntersectionObserver, unlike clip-path on the target) */
  .js .mask { position: relative; }
  .js .mask::after { content: ""; position: absolute; inset: -1px; z-index: 7; background: var(--bg, #000); transform-origin: 50% 0; transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); pointer-events: none; }
  .js .mask.is-in::after { transform: scaleY(0); }
  .js .mask > img, .js .mask > picture img { transform: scale(1.18); transition: transform 1.6s var(--ease); }
  .js .mask.is-in > img, .js .mask.is-in > picture img { transform: none; }
  /* dimension line above every section head: draws itself */
  .section__head::before { transform: scaleX(0); transition: transform 1.3s var(--ease); }
  .section__head.is-in::before { transform: scaleX(1); }
}
.section__head { position: relative; padding-top: var(--s-4); }
.section__head::before { content: ""; position: absolute; left: 0; top: 0; width: min(100%, 46rem); height: 9px; border-inline: 1px solid var(--line-strong); background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; transform-origin: 0 50%; }
.theme-red .section__head::before { border-color: #fff; }

/* ---------- section backgrounds ---------- */
.bgphoto { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--bg); }
.bgphoto img { position: absolute; left: 0; top: -14%; width: 100%; height: 128%; object-fit: cover; will-change: transform; }
.bgphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72), transparent 22%, transparent 78%, rgba(0,0,0,.72)), linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.52) 62%, rgba(0,0,0,.42)); }

/* seams: the previous section's colour melts into this one (set per section by motion.js via --prev) */
.section { --seam-h: calc(var(--rhythm) * .8); }
.section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--seam-h); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, var(--prev, transparent), transparent); }

/* faint grid texture */
.theme-black { --grid: rgba(255,255,255,.055); } .theme-paper { --grid: rgba(0,0,0,.035); }
.grid-tex::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }

/* floor-plan drawing (symbol #plan in index.html) */
.blueprint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; --draw: 1; transition: --draw 2.6s var(--ease); }
.blueprint.is-in { --draw: 0; }
.bp { stroke: var(--bp, rgba(255,255,255,.22)); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
.bp--thin { stroke-width: .7; }
.bp--red { stroke: var(--bp-red, var(--red-text)); stroke-width: 1.2; }
.theme-red .bp--red { stroke: #000; opacity: .55; }
.blueprint--light { --bp: rgba(255,255,255,.45); opacity: .9; }
.process .blueprint { opacity: .85; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--s-3); }
.marquee__track { display: flex; width: max-content; animation: marq 224s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--s-5); padding-right: var(--s-5); flex: none; }
.marquee__group li { font-size: clamp(2rem, 1rem + 5vw, 5rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; color: #fff; }
.marquee__group li:nth-child(6n+3) { color: var(--g-500); }
.marquee__dot { flex: none; width: clamp(10px, 1.1vw, 16px); height: clamp(10px, 1.1vw, 16px); border-radius: 50%; background: var(--red); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- horizontal work gallery (desktop). JS adds .is-hs ---------- */
.hs__meta { display: none; }
.work.is-hs { padding-block: 0; }
.work.is-hs .hs__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + var(--s-2)); padding-bottom: var(--s-3); overflow: hidden; }
.work.is-hs .hs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex: none; }
.work.is-hs .section__head { margin-bottom: var(--s-1); padding-top: var(--s-3); }
.work.is-hs .section__lead { display: none; }
.work.is-hs .filters { margin-bottom: var(--s-1); }
.work.is-hs .hs__view { flex: 1; min-height: 0; overflow: hidden; position: relative; padding-block: var(--s-1); }
.work.is-hs .grid { height: 100%; width: max-content; padding-inline: var(--gutter); gap: var(--s-3); align-items: stretch; will-change: transform; }
.work.is-hs .card { flex: none; width: auto; height: 100%; aspect-ratio: var(--ar, .5625); }
.work.is-hs .card__media { height: 100%; aspect-ratio: auto !important; }
.work.is-hs .card__par { inset: 0 -7%; }
.work.is-hs .hs__meta { display: flex; align-items: center; gap: var(--s-3); flex: none; margin-top: var(--s-1); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.hs__rail { position: relative; flex: 1; height: 1px; background: var(--line-strong); }
.hs__rail i { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- pinned process. JS adds .is-pinned ---------- */
.pin__stick { position: relative; }
.process__body { display: grid; gap: var(--s-4); }
.process.is-pinned { padding-block: 0; height: calc(100svh + 300svh); }
.process.is-pinned .pin__stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: clip; }
.process.is-pinned .process__in { width: 100%; }
.process.is-pinned .section__head { margin-bottom: var(--s-3); }
.process.is-pinned .steps { display: grid; grid-template-columns: 1fr; min-height: clamp(220px, 34svh, 340px); position: relative; }
.process.is-pinned .step { grid-area: 1 / 1; opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .8s var(--ease); border-left: 0; padding-left: 0; pointer-events: none; align-content: start; }
.process.is-pinned .step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.process.is-pinned .step h3 { font-size: clamp(2.75rem, 1.4rem + 5vw, 6.5rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.process.is-pinned .step p { font-size: var(--fs-lead); max-width: 38ch; }
.process.is-pinned .steps__n { color: var(--accent); font-size: var(--fs-small); }
.process__rail { position: relative; display: flex; gap: var(--s-1); border-top: 1px solid var(--line-strong); padding-top: 4px; }
.process__rail[hidden] { display: none; }
.process__fill { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.process__rail button { flex: 1; min-height: 44px; text-align: left; color: var(--text-3); font-size: var(--fs-small); letter-spacing: .12em; transition: color var(--dur); }
.process__rail button:hover, .process__rail button[aria-current="step"] { color: var(--text); }

/* ---------- magnetic buttons, card hover ---------- */
.btn[data-magnetic] { transition: transform .35s var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); will-change: transform; }
.btn[data-magnetic]::before { content: ""; position: absolute; inset: -18px; }
.btn { position: relative; }
.card-svc::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .card-svc { transition: border-color var(--dur), translate .4s var(--ease); }
  .card-svc:hover { translate: 0 -8px; }
  .card-svc:hover::after { opacity: 1; }
}

/* ---------- reduced motion: everything is visible and still ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__group[aria-hidden="true"], .marq-dup { display: none; }
  .marquee__group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .blueprint { --draw: 0; transition: none; }
  .bgphoto img { top: 0; height: 100%; }
  .nav.is-hidden { transform: none; }
  [data-magnetic] { transform: none !important; }
}

/* keep the floor-plan lines away from the copy on the red section so the text sits on solid red */
.booknow .blueprint { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 72%); mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 72%); }
@media (max-width: 899px) { .booknow .blueprint { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, #000 85%); mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, #000 85%); } }