/* DR.EPOXY · site C · pass 7 · the opening: the pour (#hero), the promise (#promise), Rotem (#artist).
   From round 10's direction C "יציקה" (directions/r10/site/hero-c.html + r10/c/, notes directions/r10/c/NOTES.md), built into
   the site in pass 7 (prompts/SITE-C-PASS7.md). Markup: src/page.html; behaviour: js/main.js ("the hero"). v8's opening (the
   sample window, css/opening.css + js/opening.js) is in archive/opening-v8/.

   The hand-off is a cover, not an animation: the hero is sticky, and #promise rises over it with the scroll itself (a frame
   changes with every pixel of finger travel; nothing is written from the scroll position). #promise's top is a soft band of the
   deep graphite, so the dark floor of the film flows into it. Where the browser runs scroll timelines on the compositor:
     html.sda  the hero dims as it's covered (a black layer at .42, its opacity 0 → 1 over the first 100svh of scroll)
     html.sdx  (desktops) its film also eases back to .97
   Reduced motion / "stop animations" / high contrast: a still page (the hero scrolls like any section; high contrast shows no
   imagery behind text). The section entrances are the page's reveal (css/c.css "the reveal": data-in / group / drop). */

/* ---------- the cover ---------- */
.hc { position: relative; z-index: 2; background: var(--film); box-shadow: 0 30px 60px -28px rgba(11, 10, 9, .55); }   /* (the dark-to-paper turn: a straight edge, a soft shadow on #artist's paper) */
.hero {
  --h1: clamp(42px, 14.6vw, 66px);
  position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; overflow: clip;
  display: flex; align-items: flex-end; color: var(--pearl); background: var(--film);
  padding: calc(var(--hdr) + env(safe-area-inset-top, 0px)) var(--gut) calc(18px + env(safe-area-inset-bottom, 0px));
}

/* the film: the poster (the loop's first frame) is the first paint, over a 120 px preview of itself; the clip fades in over it
   once it plays. It overhangs 2% on every side, so its ease-back on desktops (.97) never shows an edge */
.hero__film {
  position: absolute; inset: -2%; z-index: 0; background: #2a201b var(--lq-m, none) 50% 50% / cover no-repeat;
  transform-origin: 50% 40%;
}
@media (min-aspect-ratio: 1/1) { .hero__film { background-image: var(--lq-d, none); } }
.hero__poster, .hero__poster img, .hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img, .hero__vid { display: block; object-fit: cover; object-position: 50% 50%; }
.hero__vid { opacity: 0; transition: opacity .6s var(--ease-out); }
.hero__vid.is-on { opacity: 1; }

/* the scrims, only where type sits on the film: under the header (the stream enters from the top edge, right behind the
   WhatsApp link: 1.5:1 without it, ≥ 9.6:1 with it) and under the hero's type (phones: the lower part; wide: the lower right) */
.hero__scrim {
  --top: linear-gradient(rgba(11, 10, 9, .8) 0, rgba(11, 10, 9, .7) calc(var(--hdr) + env(safe-area-inset-top, 0px)), rgba(11, 10, 9, 0) calc(var(--hdr) + env(safe-area-inset-top, 0px) + 120px));
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--top), linear-gradient(to top, rgba(11, 10, 9, .66) 0%, rgba(11, 10, 9, .42) 25%, rgba(11, 10, 9, 0) 60%);
}
@media (min-aspect-ratio: 1/1) {
  .hero__scrim { background: var(--top), radial-gradient(ellipse 72% 78% at 100% 100%, rgba(11, 10, 9, .66) 0%, rgba(11, 10, 9, .4) 50%, rgba(11, 10, 9, 0) 100%); }
}
/* the dim: a black layer over the whole hero as #promise covers it (scroll-driven only; see the top of this file) */
/* (the darkness is in the colour, .42; the layer's opacity runs 0 → 1, so at rest it's either off or fully on: no half state) */
.hero__dim { position: absolute; inset: 0; z-index: 4; background: rgba(11, 10, 9, .42); opacity: 0; pointer-events: none; }

/* ---------- 1 · the hero's type (anchored bottom-right, the RTL start) ---------- */
.hero__in { position: relative; z-index: 3; width: 100%; display: grid; justify-items: start; }
.hero__h1 {
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none; margin: 0;
  font-size: var(--h1); line-height: .9; color: var(--pearl);
}
.hero__h1 .ln { width: max-content; max-width: none; }
.hero__sub { margin-top: 14px; font: 400 var(--fs-lead)/1.4 var(--text); color: var(--pearl); }
.hero__cta { width: 100%; margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.hero__cta .btn { grid-column: 1 / -1; width: 100%; }
.hero__cta .lnk { grid-row: 2; grid-column: 2; justify-self: end; position: relative; padding: 8px 2px; }
.hero__cta .lnk::after { content: ""; position: absolute; inset: -6px -12px; }    /* (a 44 px hit area, the same look) */
.hero__price { grid-row: 2; grid-column: 1; margin: 0; font: 600 var(--fs-body)/1.35 var(--text); color: var(--pearl); }
.hero__price > span { font-weight: 400; font-size: var(--fs-s); color: rgba(244, 239, 231, .74); }
@media (max-width: 359.98px) { .hero__price > span { display: block; } .hero__dot { display: none; } }
/* (portrait tablets: the phone layout, the type a size up) */
@media (min-width: 600px) and (max-aspect-ratio: 1/1) {
  .hero { --h1: clamp(66px, 11.4vw, 124px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .hero__in { width: min(100%, 640px); }
}
@media (min-aspect-ratio: 1/1) {
  .hero { --h1: clamp(52px, min(7.4vw, 13.5svh), 136px); padding-bottom: clamp(32px, 7svh, 76px); }
  .hero__in { width: min(50vw, 880px); }
  .hero__sub { margin-top: clamp(16px, 2svh, 26px); }
  .hero__cta { width: auto; margin-top: clamp(20px, 3svh, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
  .hero__cta .btn { width: auto; }
  .hero__price { flex-basis: 100%; margin-top: 6px; }
}
/* (landscape phones: a short screen) */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .hero { --h1: clamp(34px, 13svh, 60px); padding-bottom: 14px; }
  .hero__sub { display: none; }
  .hero__cta { margin-top: 12px; }
  .hero__price { flex-basis: auto; margin-top: 0; }
}
/* the arrival (the poster is already there): the headline rises 24 px and fades in, line by line, then the line, then the CTA
   block; 70 ms apart, done by ~0.75 s (the house entrance: 300 ms opacity, 400 ms transform) */
@keyframes heroFade { from { opacity: 0; } }
@keyframes heroRise { from { transform: translateY(24px); } }
.hero__h1 .ln, .hero__sub, .hero__cta { animation: heroFade var(--t-fade) var(--ease-out) both, heroRise var(--t-rise) var(--ease-out) both; animation-delay: .1s; }
.hero__h1 .ln + .ln { animation-delay: .17s; }
.hero__sub { animation-delay: .24s; }
.hero__cta { animation-delay: .31s; }

/* the CTA on the dark: filled with the paper, ink text, its dot in copper (the primary pill's press: c.css .btn:active) */
.btn--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--paper); }
.btn--paper::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--copper);
  transition: transform .22s var(--ease-out);
}
.btn--paper:active::after { transform: scale(1.8); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  .btn--paper:hover { background: var(--pearl); box-shadow: inset 0 0 0 1px var(--pearl); }
  .btn--paper:hover::after { transform: scale(1.35); }
  .btn--paper:hover:active::after { transform: scale(1.8); }
}
.hc .lnk { color: var(--pearl); background-image: linear-gradient(var(--copper-l), var(--copper-l)); }
@media (hover: hover) and (pointer: fine) { .hc .lnk:hover { color: var(--copper-l); } }
.hc :focus-visible { outline-color: var(--copper-l); }

/* ---------- 2 · the promise: rises over the hero ---------- */
.pv { position: relative; z-index: 2; background: var(--film); color: var(--pearl); }
.pv__mk { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.pv__pic { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #2c2a29 var(--lq-m, none) 50% 50% / cover no-repeat; }
.pv__pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; }
/* the seam: the film's dark floor flows into the doorway photo (a band of the deep graphite at its top edge) and, on phones,
   the photo's floor flows into the text under it */
.pv__pic::before, .pv__pic::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.pv__pic::before { top: 0; height: 22%; background: linear-gradient(var(--film), rgba(11, 10, 9, .6) 40%, rgba(11, 10, 9, 0)); }
.pv__pic::after { bottom: 0; height: 22%; background: linear-gradient(rgba(11, 10, 9, 0), var(--film)); }
.pv__in { position: relative; z-index: 2; display: grid; justify-items: start; padding: 30px var(--gut) clamp(56px, 9svh, 88px); }
.pv__h {
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none; margin: 0;
  font-size: clamp(46px, 15.6vw, 72px); line-height: .92; color: var(--pearl);
}
.pv__h .ln { width: max-content; max-width: none; }
.pv__p { margin-top: 16px; max-width: 34ch; font: 400 var(--fs-lead)/1.45 var(--text); color: var(--pearl); }
.pv__list { list-style: none; margin: 24px 0 0; padding: 0; width: 100%; max-width: 46ch; border-top: 1px solid rgba(244, 239, 231, .2); }
.pv__list li {
  position: relative; padding: 12px 0; padding-inline-start: 30px; border-bottom: 1px solid rgba(244, 239, 231, .2);
  font: 500 var(--fs-body)/1.4 var(--text); color: var(--pearl);
}
.pv__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(12px + .7em); width: 18px; height: 1px; background: var(--copper-l); }
.pv__act { margin-top: 26px; width: 100%; }
.pv__act .btn { width: 100%; }
@media (min-width: 600px) and (max-aspect-ratio: 1/1) { .pv__in { padding-top: 40px; } .pv__h { font-size: clamp(72px, 12.4vw, 132px); } .pv__p { max-width: 40ch; } }
/* (pass 7b, the owner: "make sure it shows right away") phones and portrait tablets: the headline sits ON the doorway photo, at
   its top edge, the edge that rises first over the hero, so it arrives with the photo (no wait of ~0.7 screen, no separate
   reveal: it is part of the rising layer, whole from its first pixel). The sentence, the three offers and the CTA follow under
   the photo as before. Grid: the photo and the headline share the first cell; .pv__in's other children take the rows below.
   The photo's top band deepens into a graphite scrim under the two lines (≥ 4.5:1 for the pearl type on the real pixels). */
@media not all and (min-aspect-ratio: 1/1) and (min-height: 561px) {
  .pv { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pv__pic { grid-area: 1 / 1; }
  .pv__pic::before { height: 40%; background: linear-gradient(var(--film) 0%, rgba(11, 10, 9, .9) 30%, rgba(11, 10, 9, .78) 55%, rgba(11, 10, 9, .4) 78%, rgba(11, 10, 9, 0) 100%); }
  .pv__in { display: contents; }
  .pv__h { grid-area: 1 / 1; align-self: start; justify-self: start; position: relative; z-index: 2; margin: clamp(34px, 5.5svh, 56px) var(--gut) 0; }
  .pv__p { margin: 30px var(--gut) 0; }
  .pv__list, .pv__act { margin-inline: var(--gut); width: auto; }
  .pv__act { margin-bottom: clamp(56px, 9svh, 88px); }
}
@media (min-width: 600px) and (max-aspect-ratio: 1/1) { .pv__p { margin-top: 40px; } }   /* (portrait tablets: always the layout above) */
/* wide: one screen, the photo edge to edge, the text on its dark wall at the right (the RTL start). A short landscape screen
   (a phone on its side) keeps the phone layout: the text under the photo */
@media (min-aspect-ratio: 1/1) and (min-height: 561px) {
  .pv { height: 100vh; height: 100lvh; }
  .pv__pic { position: absolute; inset: 0; height: auto; background-image: var(--lq-d, none); }
  .pv__pic::after { inset: 0; height: auto; background: linear-gradient(to left, rgba(11, 10, 9, .74) 0%, rgba(11, 10, 9, .52) 30%, rgba(11, 10, 9, 0) 52%); }
  .pv__in {
    position: absolute; inset-block: 0; inset-inline-start: 0; width: min(48vw, 780px); align-content: center;
    padding: calc(var(--hdr) + 2svh) var(--gut) 4svh;
  }
  .pv__h { font-size: clamp(48px, min(6.4vw, 12.5svh), 120px); }
  .pv__p { margin-top: clamp(16px, 2.4svh, 28px); }
  .pv__list { margin-top: clamp(20px, 3svh, 36px); }
  .pv__act { margin-top: clamp(22px, 3.4svh, 40px); width: auto; }
  .pv__act .btn { width: auto; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 560px) { .pv__in { max-width: 62ch; } .pv__act, .pv__act .btn { width: auto; } }

/* the header over the dark: pearl (html.hdr-dark, c.css); a band of the film's black once #promise is under it (its photo has a
   bright window); past the dark the paper band takes over (html.hdr-paper). js/main.js sets them from observers */
html.hdr-film.hdr-dark:not(.menu-open) .hdr::before, html:is(.rm, .a11y-contrast).hdr-dark:not(.menu-open) .hdr::before {
  opacity: 1; background: linear-gradient(var(--film) calc(100% - 22px), rgba(11, 10, 9, 0));
}

/* ---------- the cover's depth, scroll-driven (compositor only: opacity and transform) ---------- */
@keyframes heroDim { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroBack { from { transform: none; } to { transform: scale(.97); } }
html.sda:not(.rm) .hero__dim { animation: heroDim linear both; animation-timeline: scroll(root block); animation-range: 0px 100svh; }
html.sdx:not(.rm) .hero__film { animation: heroBack linear both; animation-timeline: scroll(root block); animation-range: 0px 100svh; }

/* ---------- 3 · Rotem: art and guarantees, on paper (from css/opening.css:14, 134, 238-253; the heading leads) ---------- */
.artist { position: relative; z-index: 1; display: grid; gap: clamp(22px, 3vw, 44px); padding: 12svh var(--gut) 4svh; }
.artist__h {
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none; margin: 0;
  font-size: clamp(34px, 10.4vw, 120px); line-height: .94; color: var(--ink);
}
.artist__h .ln { width: max-content; max-width: none; }
.artist__txt { display: grid; gap: 14px; max-width: 40ch; }
.artist__body { font: 400 var(--fs-lead)/1.5 var(--text); color: var(--ink); }
.artist__lead { font: 600 var(--fs-body)/1.4 var(--text); color: var(--ink); margin-top: 6px; }
.artist__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(20, 18, 16, .16); }
.artist__list li {
  position: relative; padding: 11px 0; padding-inline-start: 30px; border-bottom: 1px solid rgba(20, 18, 16, .16);
  font: 400 var(--fs-body)/1.4 var(--text); color: var(--ink);
}
.artist__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(11px + .7em); width: 18px; height: 1px; background: var(--copper); }
@media (min-width: 700px) { .artist { padding-top: 14svh; } .artist__h { font-size: clamp(52px, 8.6vw, 92px); } }
@media (min-width: 1180px) {
  /* (pass 7, QA-11) the text column grows with the screen (24rem at 1180 → 30vw → 44rem), no longer a fixed 40ch of the 16 px
     root, which left a 384 px column of 28 px type beside a 1300 px heading on 1920-2560 screens */
  .artist { grid-template-columns: minmax(0, auto) minmax(0, clamp(24rem, 30vw, 44rem)); align-items: start; column-gap: 5vw; padding: 18svh var(--gut) 10svh; }
  .artist__h { font-size: clamp(76px, 6.6vw, 136px); }
  .artist__txt { padding-top: .5em; max-width: none; }
}

/* ---------- the still page: reduced motion, "stop animations", high contrast ---------- */
html:is(.rm, .a11y-contrast) .hero { position: relative; }
html:is(.rm, .a11y-contrast) .hero__dim { display: none; }
html:is(.rm, .a11y-contrast) .hero__film { animation: none !important; transform: none !important; }
/* high contrast: no imagery behind text (the film's box stays, plain black; #promise's text under its photo on every width) */
html.a11y-contrast .hero__film > *, html.a11y-contrast .hero__scrim, html.a11y-contrast .pv__pic::before, html.a11y-contrast .pv__pic::after { display: none !important; }
html.a11y-contrast .hero__film { background: #000 !important; }
html.a11y-contrast .pv { height: auto; }
html.a11y-contrast .pv__pic { position: relative; inset: auto; height: auto; aspect-ratio: 9 / 16; max-height: 100svh; }
html.a11y-contrast .pv__in { position: relative; inset: auto; width: auto; display: grid; padding: 30px var(--gut) 56px; }
/* (pass 7b) high contrast: the headline leaves the photo again and leads the text under it (no picture behind any letter) */
html.a11y-contrast .pv__h { grid-area: auto; margin: 0; }
html.a11y-contrast :is(.pv__p, .pv__list, .pv__act) { margin-inline: 0; }
html.a11y-contrast .pv__act { margin-bottom: 0; }
@media (min-aspect-ratio: 1/1) { html.a11y-contrast .pv__pic { aspect-ratio: 16 / 9; } }