/* ---- Hero film: tall scroll track, sticky stage ---- */
.hero { position: relative; height: 900vh; background: #efebe3;
  /* light-on-dark inside the hero once the film leaves the paper sketch */
  --bg: #141311; --text: #f2efe9; --text-2: rgba(242, 239, 233, .82); --muted: #c2bcb1; color: var(--text); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --tint: 0; }
.hero__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__poster { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; display: none; }

/* grade + legibility, faded in by JS (--tint) as the film moves from paper to screen and site */
.hero__tint {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--tint);
  background:
    linear-gradient(90deg, rgba(14, 13, 12, .74) 0%, rgba(14, 13, 12, .38) 38%, rgba(14, 13, 12, 0) 62%),
    radial-gradient(120% 95% at 60% 45%, rgba(20, 19, 17, 0) 45%, rgba(20, 19, 17, .55) 100%),
    linear-gradient(180deg, rgba(20, 19, 17, .45) 0%, rgba(20, 19, 17, 0) 18%, rgba(20, 19, 17, 0) 78%, rgba(20, 19, 17, .65) 100%);
}
/* paper phase: a soft wash on the text side so the ink headline sits on clean paper */
.hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(1 - var(--tint));
  background: linear-gradient(90deg, rgba(239, 235, 227, .9) 0%, rgba(239, 235, 227, .55) 34%, rgba(239, 235, 227, 0) 55%);
}
.hero__tint, .hero__line, .beat, .filmnote, .hero__cue { z-index: 2; }

/* yellow progress line: the site marker */
.hero__line { position: absolute; left: var(--gutter); top: 0; width: 1px; height: 100%; background: rgba(120, 112, 100, .18); }
.hero__line i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 12px rgba(var(--accent-rgb), .7); }

/* text beats */
.beat {
  position: absolute; left: calc(var(--gutter) + clamp(1.5rem, 3vw, 3rem)); top: 50%;
  width: min(620px, 80vw); transform: translateY(calc(-50% + var(--ty, 0px)));
  text-shadow: var(--tshadow); opacity: 0; will-change: opacity, transform;
}
.beat::before {
  content: ""; position: absolute; inset: -30% -25% -30% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 40% 50%, rgba(14, 13, 12, .55) 0%, rgba(14, 13, 12, .3) 50%, rgba(14, 13, 12, 0) 78%);
}
/* first beat sits on white paper: ink text, no dark scrim */
.beat--ink { --text: #171614; --text-2: #4a4640; --muted: #7d776d; --bg: #f7f6f2; color: var(--text); text-shadow: none; }
.beat--ink::before { background: none; }
.beat__kicker { color: var(--muted); margin-bottom: 1.4rem; display: flex; align-items: center; gap: .8rem; }
.beat__kicker::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.beat__title { font: 300 clamp(2.6rem, 6.4vw, 6rem)/1.02 var(--font-head); letter-spacing: -.01em; margin: 0; }
.beat__title em { font-style: normal; font-weight: 500; }
.beat__title .y { color: var(--accent); }
.beat__body { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--text-2); max-width: 30rem; margin: 1.4rem 0 0; }
.beat__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* ---- phase rail: Sketch · Model · Render · Site · Built (shared by both films) ---- */
.phases { list-style: none; margin: 0; padding: .55rem .8rem; display: flex; gap: 1.1rem; border-radius: 999px;
  background: rgba(14, 13, 12, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 400 .68rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 233, .5); }
.phases li { display: flex; align-items: center; gap: .45rem; transition: color .4s var(--ease); }
.phases li i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background .4s, border-color .4s, box-shadow .4s; }
.phases li.done { color: rgba(242, 239, 233, .75); }
.phases li.done i { background: currentColor; }
.phases li.on { color: #f2efe9; }
.phases li.on i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }

.filmnote { position: absolute; right: var(--gutter); bottom: 2.2rem; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.filmnote__cap { margin: 0; padding: .45rem .8rem; border-radius: 10px; background: rgba(14, 13, 12, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(242, 239, 233, .85); }

.hero__cue { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); color: #7d776d; display: flex; flex-direction: column; align-items: center; gap: .7rem; transition: opacity .4s; }
.hero__cue i { width: 1px; height: 42px; background: linear-gradient(currentColor, transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* nav over the paper phase: ink text */
body[data-hero-tone="paper"] .nav:not(.solid) { --text: #171614; --text-2: #4a4640; }

/* ---- Villa 4 section film ---- */
.vfilm { margin: 0 0 6rem; }
.vfilm__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #efebe3; }
.vfilm__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.vfilm__poster { position: absolute; inset: 0; background: #efebe3 center / cover no-repeat; }
.vfilm.is-film .vfilm__canvas { display: block; }
.vfilm.is-film .vfilm__poster { display: none; }
.vfilm .vfilm__copy.glass { position: absolute; left: var(--gutter); bottom: 2.2rem; z-index: 2; width: min(440px, calc(100% - 2 * var(--gutter))); padding: 1.8rem 2rem; }
.vfilm__copy .mono:first-child { color: var(--muted); margin: 0 0 .9rem; }
.vfilm__copy h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; margin-bottom: .8rem; }
.vfilm__copy p { color: var(--text-2); margin: 0 0 1rem; }
.vfilm__copy .status { margin: 0; }
.vfilm .phases { position: absolute; right: var(--gutter); bottom: 2.2rem; z-index: 2; }

/* phones / reduced motion: still frames, beats keep scrolling over the hero still */
@media (max-width: 768px), (hover: none), (prefers-reduced-motion: reduce) {
  .hero { height: 300vh; background: var(--dark); }
  .hero__film { display: none; }
  .hero__poster { display: block; }
  .hero__stage::before { display: none; }
  .hero__stage { --tint: 1 !important; }
  .beat--ink { --text: #f2efe9; --text-2: rgba(242, 239, 233, .82); --muted: #c2bcb1; --bg: #141311; text-shadow: var(--tshadow); }
  .beat--ink::before { background: radial-gradient(ellipse 60% 55% at 40% 50%, rgba(14, 13, 12, .55) 0%, rgba(14, 13, 12, .3) 50%, rgba(14, 13, 12, 0) 78%); }
  .filmnote, .hero__cue { display: none; }
  .beat { top: auto; bottom: 14vh; transform: translateY(var(--ty, 0px)); }
  .beat__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .vfilm__pin { height: auto; display: flex; flex-direction: column; background: none; }
  .vfilm__poster { position: relative; aspect-ratio: 16 / 9; }
  .vfilm .vfilm__copy.glass { position: relative; left: auto; bottom: auto; width: auto; margin: -2.5rem var(--gutter) 0; }
  .vfilm .phases { display: none; }
}