/* ============================================================
   PRIMEWOOD FENCES — motion & kozowood-inspired UI
   Loaded after site.css. All additive.
   ============================================================ */

/* ---------- LINE MASK REVEAL (headlines) ---------- */
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask > span{display:block;transform:translateY(118%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.is-revealed .mask > span,.mask.in > span{transform:none}
.mask[data-d="1"] > span{transition-delay:.10s}
.mask[data-d="2"] > span{transition-delay:.20s}
.mask[data-d="3"] > span{transition-delay:.30s}
@media (prefers-reduced-motion:reduce){.mask > span{transform:none;transition:none}}
/* hero masks trigger on page load */
html.loaded .hero .mask > span{transform:none}

/* ---------- HERO KEN BURNS + intro fade ---------- */
.hero__bg{transform:scale(1.14);transition:transform 2.4s cubic-bezier(.16,1,.3,1)}
html.loaded .hero__bg{transform:scale(1);animation:kenburns 22s ease-out 2.4s forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero__sub,.hero__meta{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.hero__eyebrow{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
html.loaded .hero__eyebrow{opacity:1;transform:none;transition-delay:.15s}
html.loaded .hero__sub{opacity:1;transform:none;transition-delay:.7s}
html.loaded .hero__meta{opacity:1;transform:none;transition-delay:.9s}
@media (prefers-reduced-motion:reduce){
  .hero__bg,html.loaded .hero__bg{transform:none;animation:none}
  .hero__sub,.hero__meta,.hero__eyebrow{opacity:1;transform:none}
}

/* ---------- MEDIA CLIP + SCALE REVEAL (on scroll) ---------- */
.media-reveal{position:relative;overflow:hidden}
.media-reveal > img{transform:scale(1.16);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.media-reveal::after{content:"";position:absolute;inset:-1px;background:var(--paper);transform-origin:right;
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);z-index:3;pointer-events:none}
.media-reveal.in > img{transform:scale(1)}
.media-reveal.in::after{transform:scaleX(0)}
.wood .media-reveal::after{background:var(--paper)}
.prod .media-reveal::after,.dark-cover .media-reveal::after{background:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .media-reveal > img{transform:none}
  .media-reveal::after{display:none}
}

/* ---------- HEADER hide-on-scroll-down ---------- */
.site-header{transition:background .4s,box-shadow .4s,padding .4s,border-color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.site-header.hidden{transform:translateY(-105%)}

/* ============================================================
   MANIFESTO (kozowood adjective-stack)
   ============================================================ */
.manifesto{background:var(--paper-2);padding-block:clamp(90px,16vh,200px)}
.manifesto .eyebrow{margin-bottom:clamp(34px,5vw,60px);display:flex}
.mlines{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-0.015em;
  font-size:clamp(2.1rem,6.2vw,5.2rem)}
.mlines .ml{display:block;overflow:hidden;padding-bottom:.04em}
.mlines .ml > span{display:block;transform:translateY(120%);opacity:.001;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity 1s ease}
.mlines.in .ml > span{transform:none;opacity:1}
.mlines.in .ml:nth-child(1) > span{transition-delay:.00s}
.mlines.in .ml:nth-child(2) > span{transition-delay:.12s}
.mlines.in .ml:nth-child(3) > span{transition-delay:.24s}
.mlines.in .ml:nth-child(4) > span{transition-delay:.36s}
.mlines .ml.dim > span{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.mlines .ml > span{transform:none;opacity:1}}

/* ============================================================
   FEATURED PROJECT TILE (full-bleed, View button)
   ============================================================ */
.feature{position:relative;height:clamp(420px,78vh,760px);overflow:hidden;cursor:pointer;isolation:isolate;background:var(--paper-3);margin-bottom:clamp(14px,1.6vw,22px)}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.feature:hover img{transform:scale(1.05)}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,15,10,.66),rgba(18,15,10,0) 52%);z-index:1}
.feature__txt{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(28px,5vw,64px);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.feature__txt .eyebrow{color:#fff}
.feature__txt h3{color:#fff;margin-top:14px;font-size:clamp(1.8rem,4vw,3.2rem);font-weight:300}
.view-btn{flex:none;width:clamp(78px,9vw,116px);height:clamp(78px,9vw,116px);border-radius:50%;
  border:1px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  transition:background .4s,color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.feature:hover .view-btn{background:#fff;color:var(--ink);transform:scale(1.06)}

/* gallery: View pill on hover */
.shot__view{position:absolute;top:50%;left:50%;width:84px;height:84px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  transform:translate(-50%,-50%) scale(.7);opacity:0;transition:opacity .45s,transform .55s cubic-bezier(.16,1,.3,1);
  z-index:2;pointer-events:none;background:rgba(20,17,12,.18);backdrop-filter:blur(3px)}
.shot:hover .shot__view{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ============================================================
   IMAGE MOSAIC MARQUEE (two rows, opposite directions)
   ============================================================ */
.mosaic{padding-block:clamp(40px,6vw,72px);overflow:hidden;background:var(--paper)}
.mosaic__row{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform}
.mosaic__row+.mosaic__row{margin-top:clamp(12px,1.4vw,20px)}
.mosaic__row.r1{animation:mscroll-l 56s linear infinite}
.mosaic__row.r2{animation:mscroll-r 56s linear infinite}
.mosaic:hover .mosaic__row{animation-play-state:paused}
.mosaic figure{position:relative;flex:none;width:clamp(240px,26vw,380px);aspect-ratio:3/2;overflow:hidden;background:var(--paper-3)}
.mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.96)}
@keyframes mscroll-l{to{transform:translateX(-50%)}}
@keyframes mscroll-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.mosaic__row{animation:none!important}}

/* ============================================================
   BIG-TYPE CTA ("take shape")
   ============================================================ */
.shape{background:var(--ink);color:var(--on-dark);padding-block:clamp(90px,16vh,200px);overflow:hidden;text-align:center}
.shape .eyebrow{color:var(--wood-2);justify-content:center;margin-bottom:30px}
.shape__type{font-family:var(--serif);font-weight:300;line-height:1.0;letter-spacing:-0.02em;color:#fff;
  font-size:clamp(2.6rem,8.5vw,7rem);position:relative;display:inline-block}
.shape__type .mask{padding-bottom:.1em}
.shape__type .mask > span{white-space:nowrap}
.shape__type .row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,40px);flex-wrap:wrap}
.shape__chip{flex:none;width:clamp(86px,9vw,150px);aspect-ratio:4/3;overflow:hidden;border-radius:2px;
  display:inline-block;transform:translateY(6%)}
.shape__chip img{width:100%;height:100%;object-fit:cover}
.shape__logo{flex:none;width:clamp(150px,19vw,250px);display:inline-flex;align-items:center;transform:translateY(10%)}
.shape__logo img{width:100%;height:auto;display:block}
.shape p{color:var(--on-dark-2);max-width:46ch;margin:clamp(30px,4vw,48px) auto 0;font-size:clamp(1.02rem,1.4vw,1.2rem)}
.shape .actions{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:680px){.shape__chip{display:none}.shape__logo{width:clamp(130px,38vw,190px)}}

/* ---------- scroll progress hairline ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--wood);z-index:80;transition:width .1s linear}