/* Cape Jala — scroll film site
   Palette from the renders. Marcellus for display, Instrument Sans for text. */
:root{
  --sea:#0B232C; --deep:#06161C; --stone:#E5E2DA; --ink:#10242B;
  --maquis:#65714A; --pool:#6FC3BD; --sand:#B5A78B;
  --surface:var(--stone); --on-surface:var(--ink); --muted:#4A5D62; --rule:rgba(16,36,43,.2);
  --display:"Marcellus","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --safe-b:1.5rem;
}
@supports (height:100svh){ :root{ --safe-b:calc(100lvh - 100svh + 1.5rem); } }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --surface:#0E2A34; --on-surface:#E5E2DA; --muted:#9DB0B4; --rule:rgba(229,226,218,.2); }
}
:root[data-theme="dark"]{ --surface:#0E2A34; --on-surface:#E5E2DA; --muted:#9DB0B4; --rule:rgba(229,226,218,.2); }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--on-surface);font-family:var(--text);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.05;letter-spacing:.005em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--pool);outline-offset:3px}

/* ---------- header ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem var(--pad);color:#fff;mix-blend-mode:difference;pointer-events:none}
.bar a,.bar span{pointer-events:auto}
.bar .mark{font-family:var(--display);font-size:1.15rem;text-decoration:none;letter-spacing:.04em}
.bar .where{font-size:.875rem;display:flex;gap:1.5rem;align-items:baseline}
.bar .where a{text-underline-offset:4px}
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;background:var(--pool);transform-origin:0 50%;transform:scaleX(var(--doc,0))}

/* ---------- pinned scenes ---------- */
.scene{position:relative;height:calc(var(--len,300)*1vh);background:var(--deep);color:#fff;--p:0}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;contain:layout paint style}
@supports (height:100lvh){ .scene{height:calc(var(--len,300)*1lvh)} .pin{height:100lvh} }
.layer{position:absolute;inset:0;--in:1;--out:0;--z:1;--ox:50%;--oy:50%;will-change:transform,opacity,clip-path}
.layer img{width:100%;height:100%;object-fit:cover;object-position:var(--ox) var(--oy);transform-origin:var(--ox) var(--oy);transform:scale(var(--z))}
.fx-fade{opacity:calc(var(--in)*(1 - var(--out)))}
.fx-wipe-up{clip-path:inset(calc((1 - var(--in))*100%) 0 0 0)}
.fx-wipe-left{clip-path:inset(0 0 0 calc((1 - var(--in))*100%))}
.fx-iris{clip-path:circle(calc(var(--in)*78vmax) at var(--ox) var(--oy))}

/* film layer: poster still under a canvas; video element only for the fallback */
.film{position:absolute;inset:0;--in:1;--out:0;--ox:50%;--oy:50%;background:var(--deep)}
.film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ox) var(--oy)}
.film canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease}
.film.ready canvas{opacity:1}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ox) var(--oy);display:none}
.film.video video{display:block}
.film.video canvas,.film.video .poster{display:none}

.scrim::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,22,28,.78) 0,rgba(6,22,28,.35) 28%,rgba(6,22,28,0) 55%)}

.cap{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--safe-b);max-width:34rem;z-index:5;--in:1;--out:0;
  opacity:calc(var(--in)*(1 - var(--out)));transform:translateY(calc((1 - var(--in))*1.25rem - var(--out)*1.25rem));will-change:opacity,transform}
.cap h2,.cap h3{font-size:clamp(1.9rem,4.6vw,3.4rem);margin-bottom:.6rem;text-wrap:balance}
.cap p{max-width:46ch;color:rgba(255,255,255,.88)}

/* target ring on the regional map */
.ring{position:absolute;left:45%;top:66%;width:0;height:0;z-index:4;--in:0;--out:0;opacity:calc(var(--in)*(1 - var(--out)))}
.ring i{position:absolute;left:-2.5rem;top:-2.5rem;width:5rem;height:5rem;border:1px solid #fff;border-radius:50%;transform:scale(calc(2.2 - var(--in)*1.2))}
.ring b{position:absolute;left:3.2rem;top:-.75rem;font:400 1.1rem/1 var(--display);white-space:nowrap;letter-spacing:.04em}

/* hero */
.hero-title{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 var(--pad) 18vh;z-index:5}
.hero-title .load{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
.hero-title h1{--mv:0;font-size:clamp(3.2rem,13vw,11rem);white-space:nowrap;
  letter-spacing:calc(.03em + var(--mv)*.55em);margin-right:calc(var(--mv)*-.55em);opacity:calc(1 - var(--mv)*1.35);
  text-shadow:0 2px 40px rgba(6,22,28,.35)}
.hero-title p{--mv:0;opacity:calc(1 - var(--mv)*2.2);margin-top:1.1rem;font-size:clamp(1rem,1.5vw,1.2rem);text-shadow:0 1px 18px rgba(6,22,28,.6)}
.hint{position:absolute;left:0;right:0;bottom:var(--safe-b);text-align:center;font-size:.875rem;z-index:5;--mv:0;opacity:calc(.85 - var(--mv)*4)}
.hint::after{content:"";display:block;width:1px;height:2.2rem;margin:.6rem auto 0;background:#fff;transform-origin:50% 0;animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.hero .scrim::after{background:linear-gradient(to bottom,rgba(6,22,28,.28),rgba(6,22,28,0) 35%,rgba(6,22,28,.0) 60%,rgba(6,22,28,.6))}

/* arch scene */
.arch{background:var(--surface);color:var(--on-surface);--a-t:16%;--a-r:10%;--a-b:0%;--a-l:54%}
.arch .pin{background:var(--surface)}
.arch .lead{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);width:min(38vw,30rem);--out:0;opacity:calc(1 - var(--out));z-index:2}
.arch .lead h2{font-size:clamp(2.2rem,5vw,4.2rem);margin-bottom:1.1rem}
.arch .window{clip-path:inset(calc((1 - var(--in))*var(--a-t)) calc((1 - var(--in))*var(--a-r)) calc((1 - var(--in))*var(--a-b)) calc((1 - var(--in))*var(--a-l)) round calc((1 - var(--in))*50vw) calc((1 - var(--in))*50vw) 0 0);--in:0;z-index:3;will-change:clip-path}
.arch .veil{position:absolute;inset:0;background:var(--surface);z-index:4;--in:0;opacity:var(--in);pointer-events:none}
@media (max-width:760px){
  .arch{--a-t:44%;--a-r:14%;--a-b:0%;--a-l:14%}
  .arch .lead{top:5.5rem;transform:none;width:auto;right:var(--pad)}
}

/* filmstrip */
.strip-scene{background:var(--sea)}
.strip{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);padding:0 var(--pad);
  transform:translate3d(calc(var(--p)*var(--shift,0)*-1px),0,0);will-change:transform}
.strip .card{flex:none;width:min(84vw,30rem);padding-right:clamp(0rem,4vw,4rem)}
.strip .card h2{font-size:clamp(2.2rem,5vw,4.2rem);margin-bottom:1.1rem}
.strip .card p{color:rgba(255,255,255,.85)}
.strip figure{flex:none;height:68vh}
@supports (height:100svh){ .strip figure{height:68svh} }
.strip figure img{height:100%;width:auto;max-width:none}
.strip figcaption,.still figcaption{font-size:.875rem;margin-top:.6rem;color:rgba(255,255,255,.7)}

/* ---------- static chapters ---------- */
.chapter{padding:clamp(5rem,14vh,10rem) var(--pad);display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:repeat(12,1fr);align-items:start}
.chapter .head{grid-column:1/span 5}
.chapter .head h2{font-size:clamp(2.4rem,5.4vw,4.6rem);text-wrap:balance}
.chapter .body{grid-column:7/span 6}
.chapter .body p+p{margin-top:1rem}
.chapter .body p{max-width:58ch}
.chapter .wide{grid-column:1/-1}
dl.facts{margin:2rem 0 0;border-top:1px solid var(--rule)}
dl.facts div{display:flex;justify-content:space-between;gap:1.5rem;padding:.8rem 0;border-bottom:1px solid var(--rule)}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0;text-align:right;font-family:var(--display);font-size:1.15rem}
.still{overflow:hidden;--rv:0;--v:.5;clip-path:inset(calc((1 - var(--rv))*14%) calc((1 - var(--rv))*10%))}
.still img{width:100%;transform:scale(1.16) translateY(calc((var(--v) - .5)*-10%));will-change:transform}
.still.map img{transform:scale(calc(1.22 - var(--rv)*.22))}
.still figcaption{color:var(--muted)}
.chapter .still figcaption{padding-top:.1rem}
.pair{grid-column:1/-1;display:grid;grid-template-columns:5fr 6fr;gap:clamp(1rem,4vw,4rem);align-items:start}
.pair .still:nth-child(2){margin-top:clamp(2.5rem,10vw,8rem)}
.dark{background:var(--sea);color:#E5E2DA;--muted:#9DB0B4;--rule:rgba(229,226,218,.2)}
@media (max-width:760px){
  .chapter .head,.chapter .body{grid-column:1/-1}
  .chapter{gap:1.75rem}
  .pair{grid-template-columns:1fr 1fr;gap:.9rem}
}

/* contact */
.contact{position:relative;min-height:100vh;display:grid;align-items:end;color:#fff;background:var(--deep);overflow:hidden}
.contact .bg{position:absolute;inset:0}
.contact .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.contact .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,22,28,.92),rgba(6,22,28,.35) 60%,rgba(6,22,28,.25))}
.contact .in{position:relative;padding:8rem var(--pad) 3rem;display:grid;gap:2.5rem}
.contact h2{font-size:clamp(2.6rem,7vw,6rem);max-width:14ch}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{display:inline-block;padding:.95rem 1.5rem;border:1px solid #fff;text-decoration:none;font-weight:500;border-radius:999px;transition:background .25s,color .25s}
.btn.fill{background:#fff;color:var(--ink)}
.btn:hover{background:var(--pool);border-color:var(--pool);color:var(--deep)}
.credits{font-size:.875rem;color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.25);padding-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;justify-content:space-between}

/* ---------- reduced motion: unpin everything, show stills in order, no scrubbing ---------- */
.static .scene{height:auto}
.static .pin{position:relative;height:auto;overflow:visible;contain:none}
.static .layer,.static .film{position:relative;inset:auto;aspect-ratio:3/2;clip-path:none!important;opacity:1!important}
.static .layer img{transform:none}
.static .film canvas,.static .film video{display:none!important}
.static .film .poster{position:relative;opacity:1}
.static .cap{position:relative;left:auto;right:auto;bottom:auto;padding:1.5rem var(--pad) 3rem;max-width:none;opacity:1;transform:none}
.static .scrim::after,.static .ring,.static .hint,.static .arch .veil{display:none}
.static .hero-title{position:relative;padding:7rem var(--pad) 3rem;color:var(--on-surface);background:var(--surface)}
.static .hero-title h1{white-space:normal;text-shadow:none;letter-spacing:.03em;margin:0;opacity:1}.static .hero-title p{text-shadow:none;opacity:1}
.static .arch .lead{position:relative;top:auto;left:auto;transform:none;width:auto;padding:4rem var(--pad) 2rem;opacity:1}
.static .strip{position:relative;transform:none;flex-direction:column;align-items:flex-start;padding:4rem var(--pad);height:auto}
.static .strip figure{height:auto}.static .strip figure img{width:100%;height:auto}
.static .still{clip-path:none}.static .still img{transform:none}
.static .hero-title .load,.static .hint::after{animation:none}