/* ============================================================
   CHROME & CONCRETE — "Then & now" homepage layer (Okt 2026)
   Loads after styles.css on the homepage only.
   1. Pencil line   2. Signature write-on   3. Then & now: drawing / black & white into colour
   ============================================================ */

:root{--graphite:#3A302C}

/* ---------- 1. PENCIL LINE ---------- */
.pencil{position:absolute;top:0;left:0;z-index:60;pointer-events:none;overflow:visible}
.pencil .p-a{fill:none;stroke:var(--graphite);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.pencil .p-b{fill:none;stroke:var(--graphite);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;opacity:.32}
.scroll-hint{display:none}

/* ---------- 0. HERO FILM: plays once, then a slow push-in on the last frame ---------- */
.hero-video{transform-origin:50% 62%}
.hero-video.push{animation:heroPush 18s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes heroPush{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---------- 2. SIGNATURE WRITE-ON ---------- */
.hero h1.sig{white-space:normal;line-height:1;text-shadow:none}
.sig .sig-fallback{display:inline-block}
.sig.ready .sig-fallback{display:none}
.sig-svg{display:block;margin:0 auto;overflow:visible;
  filter:drop-shadow(0 2px 22px rgba(36,2,1,.4));
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0}
.sig-svg text{font-family:'Thesignature','Allura',cursive;font-size:100px;
  fill:var(--crimson);fill-opacity:0;stroke:var(--crimson);stroke-width:1.1;stroke-opacity:1;
  stroke-dasharray:640;stroke-dashoffset:640}
.sig.go .sig-svg{animation:sigWipe 2.9s cubic-bezier(.45,.05,.3,1) forwards}
.sig.go .sig-svg text{animation:sigStroke 2.6s cubic-bezier(.45,.05,.3,1) forwards,sigFill 1.3s 1.7s var(--ease) forwards}
@keyframes sigWipe{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes sigStroke{to{stroke-dashoffset:0}}
@keyframes sigFill{to{fill-opacity:1;stroke-opacity:0}}
.reveal .script{display:inline-block;
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0}
.reveal.in .script{animation:sigWipe 1.7s .35s cubic-bezier(.45,.05,.3,1) forwards}

/* ---------- 3. THEN & NOW: pictures pass from drawing (or black & white) into colour ---------- */
.trans{position:relative;overflow:hidden;--w:-0.2}
.trans .t-colour{display:block;width:100%;height:100%;object-fit:cover}
.trans .t-past{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--w)*100% - 16%),#000 calc(var(--w)*100% + 16%));
  mask-image:linear-gradient(180deg,transparent calc(var(--w)*100% - 16%),#000 calc(var(--w)*100% + 16%))}
/* black & white variant */
.trans[data-mode="bw"] .t-past{filter:grayscale(1) contrast(1.06) brightness(1.03);
  -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--w)*100% - 16%),#000 calc(var(--w)*100% + 16%));
  mask-image:linear-gradient(180deg,transparent calc(var(--w)*100% - 16%),#000 calc(var(--w)*100% + 16%))}
.split-media.trans{aspect-ratio:4/5}
.split-media.trans img{aspect-ratio:auto}
.videoband.trans{background:transparent}
.videoband.trans::after{z-index:2}

/* encounters: clean images, menu-card captions beneath */
.gallery-pair{align-items:start}
.plate{margin:0}
.plate .trans{aspect-ratio:4/5}
.plate .trans .t-colour{transition:transform 1.2s var(--ease)}
.plate:hover .trans .t-colour{transform:scale(1.03)}
.plate figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding-top:clamp(22px,2.6vw,32px)}
.pl-no{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:17px;color:var(--crimson);letter-spacing:.06em}
.pl-name{font-family:var(--font-display);font-weight:300;font-size:clamp(23px,2.5vw,31px);color:var(--fg);line-height:1.1;letter-spacing:-.01em}
.pl-rule{width:34px;height:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0 2px}
.pl-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

@media(max-width:820px){
  .gallery-pair{gap:56px}
}

@media(prefers-reduced-motion:reduce){
  .sig-svg,.reveal .script{-webkit-mask-image:none;mask-image:none}
  .sig-svg text{fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}
  .trans .t-past{display:none}
}


/* script words: the masked box must be taller than the glyphs, or the swashes get clipped */
.reveal .script{padding:.42em .12em .28em;margin:-.42em -.12em -.28em}