/* THE HOUSE — journey-mode variant. Reuses styles.css tokens (:root vars, masthead,
   board, register, footer). This file owns ONLY the pinned single-stage mechanics:
   one sticky viewport, every beat an absolutely-positioned layer, scroll drives which
   layer is visible + its local progress. No section ever unpins mid-story. */

.pinwrap{position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
.layer{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.layer.active{opacity:1}
.layer canvas,.layer video,.layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.layer .vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 52%,rgba(6,8,11,.62) 100%)}

/* poster layer: image fills, no fancy scale-in (progress already drives its dwell) */
.layer.poster img{opacity:1}

/* stamp layer: paper ground, the stamp presses in as localP crosses ~0.12 */
.layer.stampL{background:var(--paper)}
.layer.stampL .stampwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.layer.stampL .stamp{border:3px double var(--accent);color:var(--accent);border-radius:8px;
  padding:22px 34px;text-align:center;max-width:30ch;box-shadow:0 1px 0 rgba(178,58,46,.25);
  transform:rotate(-4deg) scale(1.6);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.5,1),opacity .3s}
.layer.stampL.pressed .stamp{transform:rotate(-4deg) scale(1);opacity:.92}
.layer.stampL .day{font-family:var(--mono);font-size:13px;letter-spacing:.14em;display:block;margin-bottom:6px;color:var(--accent)}
.layer.stampL .verdict{font-family:var(--disp);text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  font-size:clamp(22px,3vw,32px);color:var(--accent)}
.layer.stampL .what{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:14px;margin-top:6px;
  color:color-mix(in srgb,var(--accent) 78%,var(--ink))}

/* overlay copy — reuses .line from styles.css, opacity driven inline by JS (no engine dep) */
.layer .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 8vw;pointer-events:none;z-index:2}
.layer .eyebrow-c{position:absolute;top:calc(50% - min(30vh,240px));left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--tint);
  opacity:.85;z-index:2}

/* global journey progress rail (thin, top of stage) */
.jrail{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.12);z-index:5}
.jrail .fill{height:100%;width:0;background:var(--tint)}

.jscroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;opacity:.8;animation:jbob 2.4s ease-in-out infinite}
@keyframes jbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

.jvariant-tag{position:fixed;left:24px;bottom:20px;z-index:70;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .layer{transition:none}
  .jscroll-hint{animation:none}
}