/* Urban Vault · landing v2 · part 2: the approach (strata block), the file (sealed dossiers), our story, the closing dial.
   Only transform and opacity ever animate. */

/* ---------- 3 · the approach ---------- */
#approach{padding:0;scroll-margin-top:0}
/* without WebGL / reduced motion: an ordinary section, the drawn block and all five steps */
.appr-stage{position:relative;padding:clamp(4rem,7vw,6.5rem) 0}
#blockGL,.appr-run,.appr-gauge,.appr-all{display:none}
.appr-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,5rem);align-items:center}
.appr-head{grid-column:1}
.appr-still{grid-column:1;width:100%;max-width:440px}
.appr-still svg{display:block;width:100%;height:auto}
.appr-in>.lyrs{grid-column:2;grid-row:1/span 2}
.lyrs{list-style:none}
.lyr{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;align-items:baseline;padding:.95rem 0 .95rem 1.25rem;border-top:1px solid var(--line-l2)}
.lyr:last-child{border-bottom:1px solid var(--line-l2)}
.lyr::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:5px;background:var(--c)}
.lyr .step-n{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--ochre-text)}
.lyr .step-t{font-family:var(--fd);font-stretch:118%;font-weight:640;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.1;color:var(--text)}
.lyr .step-d{grid-column:2;margin-top:.3rem;font-size:17px;line-height:1.5;color:var(--text-2)}

/* WebGL on: a short pinned scroll. The block is the canvas; the steps light up one by one beside it. */
.gl .appr-stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:hidden}
.gl .appr-run{display:block;height:120vh}
.gl #blockGL{display:block;position:absolute;inset:0;width:100%;height:100%}
.gl .appr-still{display:none}
.gl .appr-in{position:relative;height:100%;grid-template-columns:minmax(0,340px) minmax(0,1fr) minmax(0,350px);gap:0 1.5rem}
.gl .appr-head{grid-column:1;grid-row:1}
.gl .appr-head .sec-title{font-size:clamp(1.8rem,2.7vw,2.6rem)}
.gl .appr-head .sec-intro{font-size:17px}
.gl .appr-in>.lyrs{grid-column:3;grid-row:1}
.gl .appr-in .lyr{will-change:opacity}
.gl .appr-in .lyr::before{transform-origin:left center;transition:transform .35s var(--ease)}
.gl .appr-in .lyr.on::before{transform:scaleX(1.8)}
.gl .appr-gauge{display:block;position:absolute;left:50%;bottom:clamp(18px,5vh,46px);transform:translateX(-50%);font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}

@media(max-width:960px){
  .appr-in{grid-template-columns:1fr}
  .appr-head,.appr-still,.appr-in>.lyrs{grid-column:1;grid-row:auto}
  /* phones, pinned: heading on top, the block in the middle, one step at a time underneath */
  .gl .appr-in{display:block}
  .gl .appr-head{position:absolute;left:var(--gut);right:var(--gut);top:84px}
  .gl .appr-head .sec-eyebrow{margin-bottom:.6rem}
  .gl .appr-head .sec-title{font-size:clamp(1.55rem,6.4vw,2rem)}
  .gl .appr-head .sec-intro{font-size:16px;line-height:1.45;margin-top:.6rem}
  .gl .appr-in>.lyrs{position:absolute;left:var(--gut);right:var(--gut);bottom:52px;height:104px}
  .gl .appr-in .lyr{position:absolute;left:0;right:0;top:0;opacity:0;border-bottom:0}
  .gl .appr-in .lyr .step-d{font-size:16px;line-height:1.4}
  .gl .appr-gauge{bottom:18px;font-size:12px}
  /* the same five steps again, as a plain list after the pinned part (the readable resting state) */
  .gl .appr-all{display:block;padding-top:1.4rem;padding-bottom:clamp(3rem,8vw,4.5rem)}
}

/* ---------- 4 · the file: three sealed dossiers ---------- */
#offer{position:relative}
.file-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem}
.file-hint{display:flex;align-items:center;gap:.6rem;font-family:var(--fm);font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lat-text)}
.file-hint::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lat)}
.dos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem);align-items:stretch}
/* (the cards themselves do not animate in: moving a card whose cover, flap and seal are separate layers cost a long frame. Their motion is the seal.) */
.dsr{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-l);border-top:2px solid var(--lat);border-radius:2px;box-shadow:var(--shadow-l)}
.d-face{padding:1.4rem 1.5rem 1.3rem}
.d-ref{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-family:var(--fm);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.offer-tag{font-family:var(--fm);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-text);padding:.28rem .6rem;border:1px solid rgba(126,95,46,.45);border-radius:2px;white-space:nowrap}
.dsr h3{font-family:var(--fd);font-stretch:118%;font-weight:640;font-size:clamp(1.5rem,2.1vw,1.85rem);line-height:1.08;color:var(--text);margin:.9rem 0 .55rem}
.d-desc{font-size:17px;line-height:1.55;color:var(--text-2)}
.d-pocket{position:relative;flex:1;border-top:1px solid var(--line-l2);background:var(--paper);overflow:hidden}
.d-list{list-style:none;padding:.3rem 1.5rem 1rem}
.d-list li{padding:.8rem 0;border-bottom:1px solid var(--line-l)}
.d-list li:last-child{border-bottom:0}
.d-list b{display:block;font-family:var(--fd);font-stretch:108%;font-weight:640;font-size:18px;line-height:1.25;color:var(--text)}
.d-list span{display:block;margin-top:.2rem;font-size:17px;line-height:1.5;color:var(--text-2)}

/* the cover: kraft paper, a flap, and the clay seal (a pre-rendered image, two clipped halves; no filters) */
.d-cover{display:none}
.js:not(.rm) .d-cover{display:block;position:absolute;inset:0;width:100%;min-height:150px;padding:0;border:0;border-radius:0;cursor:pointer;text-align:center;
  font:inherit;color:var(--text-2);background:linear-gradient(180deg,#E6DBC6,#DFD2BA);
  transition:opacity .5s ease .5s,transform .7s var(--ease) .45s,visibility 0s linear 1.2s;will-change:transform,opacity}
.d-flap{position:absolute;left:0;right:0;top:0;height:min(52%,170px)}
/* the flap: a plain V drawn with two hard-edged gradients (no clip-path), and the same V 3px lower as its shadow line */
.d-flap::before,.d-flap::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom left,var(--fc) 49.7%,transparent 50%) left/50.1% 100% no-repeat,linear-gradient(to bottom right,var(--fc) 49.7%,transparent 50%) right/50.1% 100% no-repeat}
.d-flap::before{--fc:rgba(31,26,22,.16);transform:translateY(3px)}
.d-flap::after{--fc:#D2C3A6}
.clay{position:absolute;left:50%;top:min(52%,170px);width:88px;height:88px;margin:-52px 0 0 -44px;pointer-events:none}
/* the seal's shadow: a small bitmap made by uv-landing.js (no CSS radial gradient: its shader compiled mid-scroll) */
.clay::before{content:"";position:absolute;inset:6% -4% -10% -4%;transform:translateY(6%);transition:opacity .25s}
.clay-bmp .clay::before{background:var(--clay-sh) center/100% 100% no-repeat}
.clay .h{position:absolute;inset:0}
.clay img{display:block;width:100%;height:100%}
.clay .h1{clip-path:polygon(0 0,53% 0,47% 20%,56% 38%,46% 56%,55% 74%,48% 100%,0 100%)}
.clay .h2{clip-path:polygon(53% 0,100% 0,100% 100%,48% 100%,55% 74%,46% 56%,56% 38%,47% 20%)}
.uv-warm{position:absolute;left:0;top:80px;z-index:7;opacity:.001;pointer-events:none}
.uv-warm img,.uv-warm i{display:block;width:88px;height:88px}
.uv-warm i{width:96px;height:102px;background:var(--clay-sh) center/100% 100% no-repeat}
@media(max-width:900px){.uv-warm img{width:72px;height:72px}.uv-warm i{width:78px;height:84px}}
.clay-bmp .clay .h1,.clay-bmp .clay .h2{clip-path:none}   /* uv-landing.js has swapped in pre-cut bitmaps */
.d-tap{position:absolute;left:50%;top:calc(min(52%,170px) + 58px);transform:translateX(-50%);white-space:nowrap;font-family:var(--fm);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lat-text);padding:.55rem .9rem;border:1px solid rgba(154,63,36,.45);border-radius:2px;background:rgba(251,248,242,.82);transition:background-color .2s,color .2s}
.d-cover:hover .d-tap,.d-cover:focus-visible .d-tap{background:var(--lat);color:#fff}
.d-cover:focus-visible{outline:2px solid var(--lat);outline-offset:-5px}
/* opening: the seal cracks and falls, the flap lifts, the cover clears, the list settles in */
.dsr.open .d-cover{opacity:0;transform:translate3d(0,12px,0);visibility:hidden;pointer-events:none}
.dsr.open .clay::before{opacity:0}
.dsr.open .clay .h1{animation:uvCrackL .95s cubic-bezier(.4,.1,.6,1) forwards}
.dsr.open .clay .h2{animation:uvCrackR .95s cubic-bezier(.4,.1,.6,1) forwards}
.dsr.open .d-tap{opacity:0;transition:opacity .2s}
@keyframes uvCrackL{0%{transform:none;opacity:1}16%{transform:translate(-3%,-3%) rotate(-5deg);opacity:1}100%{transform:translate(-34%,120%) rotate(-38deg);opacity:0}}
@keyframes uvCrackR{0%{transform:none;opacity:1}16%{transform:translate(3%,-3%) rotate(6deg);opacity:1}100%{transform:translate(36%,130%) rotate(42deg);opacity:0}}
/* (the list does not animate: it simply lies under the cover, already drawn, and is uncovered. One moving layer per file.) */
@media(max-width:900px){
  .dos{grid-template-columns:1fr;max-width:560px}
  /* phones: a sealed file stays short; its list takes its space only once opened */
  /* (the first file opens by itself, so its list keeps its space from the start) */
  .js:not(.rm) .dsr:not(.open):not(:first-child) .d-list{display:none}
  .js:not(.rm) .dsr:not(.open):not(:first-child) .d-cover{position:relative;height:150px}
  .js:not(.rm) .dsr.open .d-cover{height:150px;bottom:auto}
  .clay{top:70px;width:72px;height:72px;margin:-44px 0 0 -36px}
  .d-flap{height:70px}
  .d-tap{top:108px}
}

/* ---------- 5 · our story ---------- */
.story-g{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.story-ph{position:relative;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;padding:1rem;background:var(--card);border:1px solid var(--line-l2);border-radius:2px;box-shadow:var(--shadow-l);overflow:hidden}
.story-topo{position:absolute;inset:0}
.js .story-mk{display:none}   /* with script, the mark is drawn into the contour bitmap instead */
.story-mk{position:absolute;left:50%;top:43%;width:40%;height:auto;margin:-20% 0 0 -20%;color:rgba(126,95,46,.42)}
.story-ph span{position:relative;font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);background:var(--card);padding:.3rem .7rem;border:1px solid var(--line-l)}
.story-copy .sec-title{max-width:18ch}
.story-p{margin-top:1.3rem;max-width:60ch;font-size:18px;line-height:1.7;color:var(--text-2)}
.story-q{margin-top:1.6rem;padding-left:1.1rem;border-left:2px solid var(--lat);font-family:var(--fs);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;color:var(--lat-text)}
@media(max-width:760px){.story-g{grid-template-columns:1fr}.story-ph{width:min(220px,60vw)}}

/* ---------- 6 · closing band: the dial turns three detents and unlocks ---------- */
.cta-band{padding:clamp(4rem,6.5vw,5.5rem) 0}
.dial{position:relative;width:108px;aspect-ratio:1;margin:0 auto 1.8rem;color:var(--ochre)}
.dial svg{position:absolute;inset:0;width:100%;height:100%}
.d-turn{will-change:transform}
.d-key{opacity:0}
.js:not(.rm) .dial:not(.go) .d-turn{transform:rotate(154.29deg)}
.dial.go .d-turn{animation:uvDetents 2.3s both}
.dial.go .d-key{opacity:1;transition:opacity .6s ease 2.1s}
.dial.go{animation:uvUnlock .6s cubic-bezier(.2,.9,.25,1.25) 2.05s both}
.rm .d-key,html:not(.js) .d-key{opacity:1}
@keyframes uvDetents{
  0%{transform:rotate(154.29deg);animation-timing-function:cubic-bezier(.5,0,.3,1)}
  22%{transform:rotate(100.5deg);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  30%{transform:rotate(102.86deg);animation-timing-function:cubic-bezier(.5,0,.3,1)}
  52%{transform:rotate(49.1deg);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  60%{transform:rotate(51.43deg);animation-timing-function:cubic-bezier(.5,0,.3,1)}
  82%{transform:rotate(-2.4deg);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  90%,100%{transform:rotate(0deg)}}
@keyframes uvUnlock{0%{transform:none}40%{transform:scale(.96)}100%{transform:none}}