/* Walk through the house. Default (no JS, reduced motion): a still list.
   .live (journey.js): pinned stage, scroll-scrubbed video, sharp stills at each stop. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cine { background: #0d0c0b; color: #f1ebe1; padding: 88px 0; }
.cine-stage { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; gap: 56px; }
.cine .vid, .cine-mb, .cine-fx, .cine-load { display: none; }
.cine .shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; }
.cine .shot img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.cine figcaption { margin-top: 18px; }
.cine .k { display: block; color: #d4b06a; font-size: .72rem; font-weight: 600; letter-spacing: .2em; margin-bottom: 8px; }
.cine figcaption h3 { font-size: clamp(1.15rem, 2.1vw, 1.8rem); letter-spacing: .04em; text-shadow: 0 2px 18px rgba(0,0,0,.75); }
.cine .end h3 { font-size: clamp(1.4rem, 2.8vw, 2.4rem); margin-bottom: 14px; }
.cine .end p { color: #cdc5b8; margin-bottom: 22px; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.cine .end .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cine .end .btn.ghost { background: rgba(13,12,11,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cine-ui { display: none; }

/* 3D product names standing over each box */
.lbl {
  --q: clamp(0, var(--pr, 1) * 1.5 - var(--i, 0) * .25, 1);
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) perspective(60cqw) translateZ(calc((1 - var(--q)) * -14cqw)) rotateX(calc(10deg + (1 - var(--q)) * 60deg)) rotateY(var(--ry, 0deg));
  opacity: var(--q); text-align: center; white-space: nowrap; pointer-events: none;
}
.lbl::before { content: ""; position: absolute; inset: -2.5cqw -3cqw 0; background: radial-gradient(ellipse, rgba(206,145,51,.24) 0, rgba(18,11,5,.7) 35%, transparent 72%); z-index: -1; }
.lbl b {
  display: block; font: 700 clamp(10px, 1.32cqw, 26px)/1.1 "SF Pro Display", "SF Georgian Rounded", sans-serif; letter-spacing: .14em; color: #fff0bf;
  text-shadow: 0 1px 0 #e5c278, 0 2px 0 #c99b49, 0 3px 0 #a8752e, 0 4px 0 #81531e, 0 5px 0 #5a3714, 0 7px 3px rgba(28,14,3,.9), 0 10px 14px rgba(0,0,0,.9), 0 0 8px rgba(255,205,107,.8), 0 0 22px rgba(239,158,47,.55), 0 0 40px rgba(222,126,27,.3);
}
.lbl small { display: block; margin-top: .65em; font-size: clamp(9px, .8cqw, 15px); color: #fff2da; letter-spacing: .03em; text-shadow: 0 1px 4px #000, 0 2px 8px #000, 0 0 10px rgba(221,164,79,.35); }
.lbl::after { content: ""; display: block; width: 1px; height: 2cqw; margin: .5cqw auto 0; background: linear-gradient(#ffe1a0, rgba(212,176,106,0)); box-shadow: 0 0 6px rgba(255,194,93,.7); }

/* ---------- live: pinned cinematic stage ---------- */
.cine.live { height: calc(var(--u) * 100svh + 100lvh); padding: 0; margin-top: calc(-1 * var(--lift, 0px)); }
/* the hero floats over the walk's first frame: the same house the camera then enters */
body:has(.cine.live) .hero { z-index: 2; background: linear-gradient(90deg, rgba(13,12,11,.82) 0%, rgba(13,12,11,.45) 45%, rgba(13,12,11,0) 75%); }
.cine.live .cine-stage.under-hero figcaption { opacity: 0; }
.cine.live .cine-ui { transition: opacity .4s; }
.cine.live .cine-stage.under-hero .cine-ui { opacity: 0; pointer-events: none; }
.cine.live .cine-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; max-width: none; padding: 0; display: block; overflow: hidden; background: #0d0c0b; }
.cine.live .vid, .cine.live .cine-fx { display: block; }
.cine.live .shot { position: absolute; left: 0; top: 50%; width: max(100%, 177.78vh); width: max(100%, 177.78lvh); transform: translate3d(var(--pan, 0px), -50%, 0); }
.cine.live .vid video { width: 100%; height: 100%; display: block; filter: blur(calc(var(--vb, 0) * 1.4px + var(--mb, 0) * .8px)); }
.cine.live .cp { position: absolute; inset: 0; }
.cine.live .cp:not(.on) { visibility: hidden; }
.cine.live .cp img { opacity: var(--s, 0); }
.cine.live .lbl.off { visibility: hidden; }

.cine.live figcaption { position: absolute; z-index: 2; left: max(24px, 4vw); bottom: 10vh; max-width: min(30vw, 420px); margin: 0; opacity: var(--pr, 0); transform: translateY(calc((1 - var(--pr, 0)) * 18px)); }
.cine.live .end figcaption { top: 50%; bottom: auto; max-width: min(44vw, 540px); transform: translateY(calc(-50% + (1 - var(--pr, 0)) * 18px)); }

/* next-room button (with the scroll prompt) and autoplay toggle */
.cine.live .cine-ui { display: block; }
.cine-ui button { position: absolute; z-index: 2; bottom: 26px; font: inherit; color: #f1ebe1; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, border-color .2s, color .2s; }
.cine-next { left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 6px 14px; font-size: .8rem; letter-spacing: .14em; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.cine-next svg { width: 22px; height: 22px; fill: none; stroke: #d4b06a; stroke-width: 1.6; animation: nudge 1.8s ease-in-out infinite; }
.cine-next small { color: #cdc5b8; font-size: .72rem; letter-spacing: .04em; }
.cine-next:hover span { color: #ecd29a; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }
.cine-auto { right: max(20px, 3vw); display: inline-flex; align-items: center; gap: 10px; padding: .62em 1.15em; border-radius: 999px; border: 1px solid rgba(212,176,106,.45); background: rgba(13,12,11,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .82rem; }
.cine-auto:hover, .cine-auto[aria-pressed="true"] { border-color: #d4b06a; color: #ecd29a; }
.cine-auto svg { width: 12px; height: 12px; fill: #d4b06a; }
.cine-auto[aria-pressed="true"] .i-play, .cine-auto[aria-pressed="false"] .i-pause { display: none; }
.cine-stage.in.rest:not(.end) .cine-next, .cine-stage.in:not(.end) .cine-auto { opacity: 1; visibility: visible; }

/* motion blur: edges smear with scroll speed, the centre (the boxes) stays sharp */
.cine.live .cine-mb { position: absolute; inset: 0; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); opacity: var(--mb, 0); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 55% 58%, transparent 38%, #000 100%); mask-image: radial-gradient(ellipse 72% 66% at 55% 58%, transparent 38%, #000 100%); }
.cine.live .cine-stage.moving .cine-mb { display: block; }

/* film grain + vignette, independent of the picture */
.cine-fx { position: absolute; inset: 0; pointer-events: none; }
.cine-fx::before { content: ""; position: absolute; inset: -10%;   /* just enough for the 8% jitter: a smaller blended layer */ opacity: .34; mix-blend-mode: overlay; animation: grain 1s steps(8) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cine-fx::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(#0d0c0b 0, rgba(13,12,11,0) 14%, rgba(13,12,11,0) 86%, #0d0c0b 100%), radial-gradient(ellipse 85% 80% at 50% 50%, transparent 60%, rgba(5,4,3,.42) 100%); }
/* small screens and low-end machines: still grain, no full-screen blur filters */
.cine.lite .cine-fx::before { animation: none; }
.cine.lite .vid video { filter: none; }
.cine.lite .cine-stage.moving .cine-mb { display: none; }
@keyframes grain { 0% { transform: translate(0, 0); } 12% { transform: translate(-7%, 4%); } 25% { transform: translate(5%, -6%); } 37% { transform: translate(-3%, 8%); } 50% { transform: translate(8%, 2%); } 62% { transform: translate(-6%, -5%); } 75% { transform: translate(3%, 6%); } 87% { transform: translate(-8%, -2%); } 100% { transform: translate(0, 0); } }

/* while the walk-through video arrives: a quiet progress line (the stills already work, nothing is blocked) */
.cine.live.loading .cine-stage:not(.under-hero) .cine-load { display: grid; justify-items: center; gap: 10px; position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3; color: #cdc5b8; font-size: .72rem; letter-spacing: .12em; text-shadow: 0 1px 8px #000; }
.cine-load img { display: none; }
.cine-load i { width: 180px; height: 1px; background: rgba(212,176,106,.18); position: relative; overflow: hidden; }
.cine-load i::after { content: ""; position: absolute; inset: 0; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(var(--load, 0)); transition: transform .3s; }

@media (max-width: 700px) {
  .cine.live figcaption, .cine.live .end figcaption { top: 92px; bottom: auto; left: 20px; max-width: calc(100% - 40px); transform: translateY(calc((1 - var(--pr, 0)) * 14px)); }
  .cine.live .cine-fx::after { background: linear-gradient(rgba(13,12,11,.7) 0, rgba(13,12,11,.3) 20%, rgba(13,12,11,0) 32%, rgba(13,12,11,0) 80%, rgba(13,12,11,.75) 100%); }
  .cine-ui .cine-next { bottom: 84px; }
  .cine-auto { right: 16px; }
  .lbl b { font-size: max(11px, 1.32cqw); }
  .lbl small { font-size: max(9.5px, .8cqw); }
}

/* short landscape (phones on their side): compact words, CTA below the header */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .cine.live figcaption { bottom: 18px; }
  .cine figcaption h3 { font-size: 1.05rem; }
  .cine.live .end figcaption { top: calc(50% + 34px); max-width: 52vw; }
  .cine.live .end h3 { font-size: 1.2rem; margin-bottom: 6px; }
  .cine.live .end p { font-size: .85rem; margin-bottom: 12px; }
  .cine .end .btn { padding: .6em 1.2em; font-size: .85rem; }
  .cine-ui button { bottom: 14px; }
}

/* portrait (phones, tablets upright): a wider framed shot, words above it, controls below, nothing on the boxes */
@media (max-aspect-ratio: 1/1) {
  .cine.live .shot { top: 50%; }   /* fills the screen; journey.js glides multi-box stops across their boxes */
  .cine.live .cine-fx::after { background: linear-gradient(rgba(13,12,11,.8) 0, rgba(13,12,11,.35) 22%, rgba(13,12,11,0) 36%, rgba(13,12,11,0) 72%, rgba(13,12,11,.8) 100%); }
  .cine.live figcaption { top: 88px; bottom: auto; left: 20px; right: 20px; max-width: none; transform: translateY(calc((1 - var(--pr, 0)) * 14px)); }
  .cine.live .end figcaption { top: 84px; bottom: 22px; display: flex; flex-direction: column; transform: translateY(calc((1 - var(--pr, 0)) * 14px)); }
  .cine.live .end h3 { font-size: clamp(1.3rem, 5.6vw, 2rem); margin-bottom: 8px; }
  .cine.live .end p { margin-bottom: 0; font-size: .92rem; }
  .cine.live .end .actions { margin-top: auto; }
  body:has(.cine.live) .hero { background: linear-gradient(rgba(13,12,11,.8) 0%, rgba(13,12,11,.4) 50%, rgba(13,12,11,0) 80%); }
}

/* box names in the walk-through open the set's own page */
a.lbl { text-decoration: none; color: inherit; }
.cine.live .cp.on a.lbl, .cine:not(.live) a.lbl { pointer-events: auto; cursor: pointer; }
a.lbl:hover b, a.lbl:focus-visible b { color: #fff; }
/* the whole box under each name is a tap target too */
a.lbl .hit { position: absolute; left: 50%; top: 100%; width: 15cqw; height: 15cqw; transform: translateX(-50%); }
/* portrait phones: names only, smaller, so neighbouring labels never touch */
@media (max-aspect-ratio: 1/1) {
  .lbl small { display: none; }
  .lbl b { font-size: max(9px, 1.5cqw); letter-spacing: .06em; }
  .lbl::before { inset: -1.5cqw -1.5cqw 0; }
}


/* "next box": left side, only while a multi-box scene still has a box to the right */
.cine-box { left: max(16px, 3vw); display: inline-flex; align-items: center; gap: 8px; padding: .62em 1.1em; border-radius: 999px; border: 1px solid #d4b06a; background: rgba(13,12,11,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .82rem; color: #ecd29a; }
.cine-box svg { width: 16px; height: 16px; fill: none; stroke: #d4b06a; stroke-width: 2; animation: nudge-x 1.6s ease-in-out infinite; }
@keyframes nudge-x { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
.cine-stage.in .cine-box.has { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cine-box svg { animation: none; } }
.cine-stage.in.rest.boxes-left .cine-next { opacity: 0; visibility: hidden; }
/* multi-box scene on a phone: the neighbouring boxes fade into the dark, one box at a time */
.cine-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(90deg, #0d0c0b 0, rgba(13,12,11,.85) 9%, rgba(13,12,11,0) 24%, rgba(13,12,11,0) 76%, rgba(13,12,11,.85) 91%, #0d0c0b 100%); }
.cine-stage.one-box::after { opacity: 1; }