/*
  File: styles.css
  Updated: 2026-08-30
  Change: Editorial cinematic layout for a scroll-scrubbed property journey.
*/
:root {
  --ink: #080807;
  --paper: #f5f1e7;
  --gold: #cbb16b;
  --muted: rgba(245, 241, 231, 0.68);
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::selection { background: var(--gold); color: var(--ink); }
.journey { height: 1500vh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; background: var(--ink); }
.backdrop-deck, .backdrop-video { position: absolute; inset: 0; }
.backdrop-deck { background: #080807; overflow: hidden; }
.backdrop-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.14); filter: blur(16px) brightness(.66) saturate(.86); transition: opacity 120ms linear; }
.backdrop-video.is-visible { opacity: 1; }
.backdrop-deck::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 28%, rgba(8,8,7,.36) 100%), linear-gradient(90deg, rgba(8,8,7,.18), rgba(8,8,7,.05), rgba(8,8,7,.18)); }
.cinema-canvas { position: absolute; top: 50%; left: 50%; width: min(100vw, 177.777vh); height: min(100vh, 56.25vw); overflow: hidden; background: var(--ink); box-shadow: 0 26px 90px rgba(0,0,0,.62); transform: translate(-50%, -50%); }
.video-deck, .estate-video, .cinema-shade, .grain, .transition-veil { position: absolute; inset: 0; }
.estate-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity 80ms linear; will-change: clip-path, opacity; }
.estate-video.is-visible { opacity: 1; transform: scale(1); }
.cinema-shade { background: linear-gradient(90deg, rgba(4,4,3,.63), rgba(4,4,3,.05) 58%, rgba(4,4,3,.15)), linear-gradient(0deg, rgba(4,4,3,.52), transparent 45%); z-index: 5; pointer-events: none; }
.transition-veil { z-index: 4; background: radial-gradient(circle at 50% 50%, rgba(255,246,219,.96), rgba(220,187,106,.64) 32%, transparent 70%); opacity: 0; mix-blend-mode: screen; pointer-events: none; will-change: opacity, transform; }
.grain { z-index: 10; opacity: .16; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E"); }
.masthead { position: absolute; z-index: 12; left: clamp(24px, 4.5vw, 72px); right: clamp(24px, 4.5vw, 72px); top: clamp(22px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
.wordmark { font-weight: 600; }
.progress { color: var(--muted); font-variant-numeric: tabular-nums; }
.experience-note { position: absolute; z-index: 12; left: clamp(24px, 4.5vw, 72px); bottom: clamp(24px, 4vw, 48px); display: flex; align-items: center; gap: 12px; color: rgba(245,241,231,.72); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.note-line { width: 34px; height: 1px; background: var(--gold); }
.title-card { position: absolute; z-index: 12; left: clamp(24px, 7.5vw, 124px); bottom: clamp(82px, 14vh, 150px); max-width: min(690px, 80vw); text-shadow: 0 2px 18px rgba(0,0,0,.35); transition: opacity 240ms ease, transform 420ms cubic-bezier(.16,1,.3,1); }
.title-card.is-changing, .title-card.is-hidden, .masthead.is-hidden, .scrub-indicator.is-hidden, .feature-list.is-hidden { opacity: 0; transform: translateY(22px); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow span:first-child { color: var(--gold); }
.eyebrow i { display: block; width: 54px; height: 1px; background: var(--gold); }
.title-card h1 { margin: 15px 0 7px; font-family: "Bodoni MT", Didot, "Iowan Old Style", Georgia, serif; font-size: clamp(58px, 9.5vw, 148px); font-weight: 400; letter-spacing: -.055em; line-height: .86; }
.title-card p { margin: 0; max-width: 34rem; font-family: "Bodoni MT", Didot, Georgia, serif; font-size: clamp(21px, 2.3vw, 34px); line-height: 1.1; }
.feature-list { position: absolute; z-index: 12; top: clamp(96px, 13vh, 138px); right: clamp(24px, 4.5vw, 72px); width: min(330px, 28vw); padding-left: 24px; border-left: 2px solid rgba(245,241,231,.74); color: rgba(255,255,255,.98); text-align: left; text-shadow: 0 2px 14px rgba(0,0,0,.34); transition: opacity 240ms ease, transform 420ms cubic-bezier(.16,1,.3,1); }
.feature-kicker { display: block; margin-bottom: 17px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.feature-list ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.feature-list li { font-size: clamp(15px, 1.35vw, 19px); font-weight: 600; letter-spacing: .045em; line-height: 1.2; }
.feature-list li::before { content: ""; display: inline-block; width: 11px; height: 1px; margin: 0 12px 6px 0; background: var(--gold); }
.scrub-indicator { position: absolute; z-index: 12; right: clamp(24px, 4.5vw, 72px); bottom: clamp(28px, 4vw, 50px); display: grid; grid-template-columns: 2px 30px auto; align-items: end; column-gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; transition: opacity 240ms ease, transform 420ms cubic-bezier(.16,1,.3,1); }
.scrub-track { display: block; width: 2px; height: 106px; background: rgba(245,241,231,.26); }
.scrub-track b { display: block; width: 100%; height: 0%; background: var(--gold); transition: height 90ms linear; }
.travel-sigil { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(203,177,107,.68); border-radius: 50%; overflow: hidden; }
.travel-sigil::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(245,241,231,.20); border-radius: 50%; }
.travel-sigil i { position: absolute; display: block; width: 7px; height: 7px; border-right: 1px solid var(--paper); border-bottom: 1px solid var(--paper); transform: rotate(45deg) translate(-1px, -1px); animation: routeDown 1.7s cubic-bezier(.45,0,.55,1) infinite; }
.travel-sigil i + i { opacity: .36; animation-delay: .18s; }
.scrub-indicator[data-direction="back"] .travel-sigil i { transform: rotate(225deg) translate(-1px, -1px); animation-name: routeUp; }
.scrub-label { min-width: 80px; font-size: 8px; line-height: 1.45; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@keyframes routeDown { 0%, 18% { opacity: 0; margin-top: -7px; } 42% { opacity: 1; } 78%, 100% { opacity: 0; margin-top: 7px; } }
@keyframes routeUp { 0%, 18% { opacity: 0; margin-top: 7px; } 42% { opacity: 1; } 78%, 100% { opacity: 0; margin-top: -7px; } }
.intro-panel, .outro-panel { position: absolute; inset: 0; z-index: 14; display: grid; align-content: center; padding: clamp(24px, 7vw, 120px); pointer-events: none; }
.intro-panel { background: var(--ink); transition: opacity 700ms ease, visibility 700ms ease; }
.intro-panel.is-gone { opacity: 0; visibility: hidden; }
.intro-kicker, .outro-panel p { margin: 0 0 18px; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.intro-title { margin: 0; max-width: 880px; font-family: "Bodoni MT", Didot, Georgia, serif; font-size: clamp(48px, 8vw, 126px); line-height: .9; letter-spacing: -.055em; }
.intro-title em { color: var(--gold); font-weight: 400; }
.intro-copy { max-width: 460px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.outro-panel { justify-items: center; align-content: center; text-align: center; background: radial-gradient(circle at 50% 46%, rgba(174,134,55,.2), transparent 31%), #080807; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; }
.outro-panel.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.outro-orb { position: absolute; width: min(66vw, 800px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(205,175,91,.26) 0, rgba(205,175,91,.05) 32%, transparent 66%); filter: blur(12px); }
.outro-rule { z-index: 1; width: 160px; height: 1px; background: var(--gold); margin-bottom: 38px; transform: scaleX(0); transform-origin: center; transition: transform 650ms 100ms ease; }
.outro-panel.is-visible .outro-rule { transform: scaleX(1); }
.outro-panel img { z-index: 1; width: clamp(96px, 10vw, 142px); opacity: 0; transform: scale(.65); transition: opacity 550ms 190ms ease, transform 850ms 190ms cubic-bezier(.16,1,.3,1); }
.outro-panel.is-visible img { opacity: 1; transform: scale(1); }
.outro-panel p, .outro-panel h2, .outro-panel a, .outro-panel small { z-index: 1; opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 600ms cubic-bezier(.16,1,.3,1); }
.outro-panel.is-visible p { opacity: 1; transform: translateY(0); transition-delay: 280ms; margin: 34px 0 12px; color: var(--paper); }
.outro-panel h2 { margin: 0; font-family: "Bodoni MT", Didot, Georgia, serif; font-size: clamp(34px, 4.4vw, 62px); font-weight: 400; letter-spacing: -.04em; }
.outro-panel a { margin-top: 13px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.outro-panel small { margin-top: 34px; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.outro-panel.is-visible h2, .outro-panel.is-visible a, .outro-panel.is-visible small { opacity: 1; transform: translateY(0); }
.outro-panel.is-visible h2 { transition-delay: 340ms; }.outro-panel.is-visible a { transition-delay: 410ms; }.outro-panel.is-visible small { transition-delay: 470ms; }
@media (max-width: 720px) { .journey { height: 1400vh; } .backdrop-deck { display: none; } .cinema-canvas { inset: 0; width: 100%; height: 100vh; box-shadow: none; transform: none; } .masthead { font-size: 8px; } .wordmark { max-width: 155px; line-height: 1.35; } .experience-note { display: none; } .title-card { bottom: 102px; } .eyebrow { font-size: 9px; gap: 9px; } .eyebrow i { width: 34px; } .title-card h1 { font-size: clamp(54px, 16vw, 92px); } .title-card p { font-size: 22px; } .feature-list { top: 78px; width: 200px; padding-left: 14px; border-left-width: 1px; } .feature-kicker { font-size: 8px; margin-bottom: 11px; } .feature-list ul { gap: 8px; } .feature-list li { font-size: 12px; } .feature-list li::before { width: 7px; margin-right: 8px; } .scrub-indicator { right: 21px; bottom: 30px; grid-template-columns: 2px 28px; column-gap: 10px; } .scrub-track { height: 74px; } .scrub-label { display: none; } .intro-title { font-size: clamp(47px, 14vw, 74px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }