/* ============================================================
   Weave projects, homepage redesign demo, 2026-09-24
   Loads AFTER styles.css. Only the homepage uses these classes.
   Direction: photo-first, one idea per screen, more air, fewer words.
   No scroll library. Native scroll + IntersectionObserver reveals.
   Shipped as /home.css, linked after /styles.css on the homepage only (EN + NL).
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --band-pad: clamp(96px, 12vw, 160px);
}

/* ---------- full-bleed hero ---------- */
.hero-full {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.hero-full img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  transform: scale(1.06);
  transition: transform 2.4s var(--ease-out), opacity 1.2s ease;
  will-change: transform;
}
/* scroll parallax (JS sets --sy on .hero-full while it is on screen): copy moves up at .45x, photo down at .2x,
   so the copy slides off the photo and uncovers what it was sitting on. Photo is slightly over-scaled to avoid gaps. */
.hero-full.in.scrolling img { transition: opacity 1.2s ease; transform: translate3d(0, calc(var(--sy, 0) * .15px), 0) scale(1.15); }
.hero-full.scrolling .hero-copy { transform: translate3d(0, calc(var(--sy, 0) * -.45px), 0); opacity: calc(1 - var(--sy, 0) / 700); will-change: transform, opacity; }
.js-anim .hero-full img { opacity: 0; }
.js-anim .hero-full.in img { opacity: 1; transform: scale(1); }
.hero-full::after {
  /* scrim: strong at the bottom-left where the copy sits, clear at the top */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(18,15,12,.72) 0%, rgba(18,15,12,.38) 30%, rgba(18,15,12,.06) 58%, rgba(18,15,12,0) 100%),
    linear-gradient(to right, rgba(18,15,12,.22) 0%, rgba(18,15,12,0) 55%);
}
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-bottom: clamp(44px, 6vw, 84px);
}
.hero-copy .eyebrow { color: #e9dcc8; }
.hero-copy .eyebrow::before { background: #e9dcc8; }
.hero-copy h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 4.1vw, 3.7rem);
  max-width: 18ch;
  line-height: 1.0;
}
html[lang="nl"] .hero-copy h1 { max-width: 20ch; }   /* keeps "Weave niet." on one line */
.hero-copy .lede {
  color: #e6dfd4; font-size: clamp(16px, 1.2vw, 18.5px);
  max-width: 44ch; margin-top: 18px;
}
.hero-copy .hero-ctas { margin-top: 26px; }
.btn-ghost-light { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.btn-ghost-light:hover { background: var(--white); color: var(--ink); }
.hero-full .hero-caption {
  position: absolute; right: 28px; bottom: 22px; z-index: 2;
  color: #cfc6b8; font-size: 12.5px; margin: 0;
}
.hero-full .hero-caption::before { background: #cfc6b8; }
@media (max-width: 700px) {
  .hero-full { height: calc(100svh - var(--nav-h)); min-height: 520px; }
  .hero-full img { object-position: 42% 50%; }
  .hero-copy h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-full .hero-caption { display: none; }
}

/* ---------- word reveal (h1 on load, big statements on scroll) ---------- */
.js-anim .words .w {
  display: inline-block; opacity: 0; transform: translateY(.55em);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms);
}
.js-anim .words.in .w { opacity: 1; transform: none; }
.js-anim .hero-copy .reveal { transition-delay: .35s; }

/* ---------- stats, more air ---------- */
.stats-inner { padding: 64px 0; }
.stat b { font-size: clamp(2.6rem, 4vw, 3.4rem); }

/* ---------- section rhythm ---------- */
section.band { padding: var(--band-pad) 0; }
section.band.tight { padding: calc(var(--band-pad) * .7) 0; }
.band .section-head { max-width: 880px; margin-bottom: clamp(48px, 6vw, 88px); }
.band .section-head h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.band .section-head p { font-size: 19px; max-width: 58ch; margin-top: 18px; }

/* ---------- portfolio: alternating photo bands ---------- */
.folio { display: grid; gap: clamp(56px, 8vw, 120px); }
.folio-item {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px);
  align-items: center; text-decoration: none; color: inherit;
}
.folio-item.flip { grid-template-columns: 5fr 7fr; }
.folio-item.flip .folio-media { order: 2; }
.folio-media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--paper-deep); }
.folio-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 1.6s var(--ease-out);
}
.js-anim .folio-item.in .folio-media img { transform: scale(1); }
.folio-item:hover .folio-media img { transform: scale(1.03); }
.folio-body .tag {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.folio-body h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); max-width: 16ch; }
.folio-body .names { display: block; margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.folio-body p { margin-top: 14px; font-size: 17px; color: var(--ink-soft); max-width: 40ch; }
.folio-body .go { display: inline-block; margin-top: 22px; font-weight: 600; font-size: 16px; color: var(--ink); }
.folio-item:hover .go { color: var(--accent); }
@media (max-width: 860px) {
  .folio-item, .folio-item.flip { grid-template-columns: 1fr; gap: 22px; }
  .folio-item.flip .folio-media { order: 0; }
  .folio-body h3 { max-width: none; }
}

/* ---------- who we work with: three lines, no cards ---------- */
.seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--line); }
.seat { padding-top: 30px; text-decoration: none; color: inherit; display: block; }
.seat .tag { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.seat h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-top: 14px; max-width: 18ch; }
.seat .go { display: inline-block; margin-top: 18px; font-size: 15.5px; font-weight: 600; }
.seat:hover .go { color: var(--accent); }
@media (max-width: 860px) { .seats { grid-template-columns: 1fr; gap: 0; } .seat { border-bottom: 1px solid var(--line); padding: 26px 0; } .seat h3 { max-width: none; } }

/* ---------- the model: one dark band, one statement, five contrasts ---------- */
.model-band { background: var(--ink); color: var(--paper); padding: var(--band-pad) 0; }
.model-band .eyebrow { color: #e9dcc8; }
.model-band .eyebrow::before { background: #e9dcc8; }
.model-band .statement {
  font-family: var(--display-font); font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.012em;
  color: var(--white); max-width: 22ch;
}
.contrast { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid #3a352e; }
.contrast-head, .contrast-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 22px 0; border-bottom: 1px solid #3a352e;
}
.contrast-head { padding: 14px 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contrast-head span:first-child { color: #8f877a; }
.contrast-head span:last-child { color: #e9dcc8; }
.contrast-row span { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.45; }
.contrast-row span:first-child { color: #9a9285; }
.contrast-row span:last-child { color: var(--paper); }
.model-band .model-note { color: #b8b0a4; margin-top: 40px; }
.model-band .btn-light { margin-top: 24px; }
@media (max-width: 700px) {
  .contrast-head { display: none; }
  .contrast-row { grid-template-columns: 1fr; gap: 6px; }
  .contrast-row span:first-child { font-size: 14.5px; }
  .contrast-row span:first-child::before { content: "Usual: "; color: #6f685d; }
  .contrast-row span:last-child::before { content: "Weave: "; color: #e9dcc8; }
  .contrast-row[data-nl] span:first-child::before { content: "Gebruikelijk: "; }
}

/* ---------- testimonials, lighter ---------- */
.quotes.plain { gap: clamp(32px, 5vw, 64px); }
.quotes.plain .quote { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 30px 0 0; border-radius: 0; }
.quotes.plain .quote::before { display: none; }
.quotes.plain .quote p { font-family: var(--display-font); font-style: normal; font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; }

/* ---------- CTA band, more air ---------- */
.cta-inner { padding: var(--band-pad) 0; }
.cta-inner h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

/* ---------- reveal timing: slower than the inner pages ---------- */
.js-anim .reveal { transition-duration: 1.1s, 1.1s; transform: translateY(26px); }
.js-anim .folio > .reveal:nth-child(n) { transition-delay: 0s; }
.js-anim .seats > .reveal:nth-child(2) { transition-delay: .1s; }
.js-anim .seats > .reveal:nth-child(3) { transition-delay: .2s; }
.js-anim .contrast-row.reveal { transform: translateY(14px); }
.js-anim .contrast .contrast-row:nth-child(2) { transition-delay: .05s; }
.js-anim .contrast .contrast-row:nth-child(3) { transition-delay: .1s; }
.js-anim .contrast .contrast-row:nth-child(4) { transition-delay: .15s; }
.js-anim .contrast .contrast-row:nth-child(5) { transition-delay: .2s; }
.js-anim .contrast .contrast-row:nth-child(6) { transition-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .hero-full.scrolling img, .hero-full.scrolling .hero-copy { transform: none; opacity: 1; }
  .js-anim .hero-full img, .js-anim .folio-media img { opacity: 1; transform: none; transition: none; }
  .js-anim .words .w { opacity: 1; transform: none; transition: none; }
}