/* ============================================================
   Scale House Sticker Wall V2, Phase 1: pan engine + surface + wayfinding.
   Pan a large wall in any direction (drag / trackpad / arrows), momentum,
   edge-clamped. Wayfinding = a fly-to dock (no minimap). Tiles are
   placeholders for the real stickers (Phase 3) and the ransom prop (Phase 2).
   ============================================================ */
:root{
  --eggshell:#fbead2; --red:#de3831; --ink:#171312; --offwhite:#fffaf2; --muted:#62564f;
  --wall-w:150vw; --wall-h:150vh;  /* only a bit bigger than the screen */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Libre Franklin",system-ui,sans-serif;background:var(--ink);overflow:hidden;
  -webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* the window onto the wall */
.viewport{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none;
  background:#0b0908}
.viewport.grabbing{cursor:grabbing}

/* the wall itself (moved by transform) */
.wall{position:absolute;top:0;left:0;width:var(--wall-w);height:var(--wall-h);
  will-change:transform;
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.7) 100%),
    linear-gradient(rgba(23,19,18,.42), rgba(23,19,18,.42)),
    url("/wall-assets/wall-punk.png");
  background-size:cover, cover, 1200px;
  background-repeat:no-repeat, no-repeat, repeat;
}

/* hover-flip layer: machine-guns through textures like the intro video */
.wall-flip{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;
  opacity:0;transition:opacity .08s linear;pointer-events:none;
  box-shadow:inset 0 0 0 2000px rgba(23,19,18,.30)}
.wall-flip.on{opacity:1}

/* ---- ransom-note value prop (Libre Franklin; ransom via weight/size/case/colour) ---- */
.prop{position:absolute;transform:translate(-50%,-50%) rotate(-1deg);width:min(900px,86vw);display:grid;place-items:center}
.prop .fx{position:absolute;inset:-18% -8%;pointer-events:none}
.prop .speed{z-index:0;background:repeating-conic-gradient(from 0deg, rgba(255,250,242,.16) 0deg 1.1deg, transparent 1.1deg 5deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 44%, #000 50%, transparent 82%);
  mask-image:radial-gradient(closest-side, transparent 44%, #000 50%, transparent 82%)}
.prop .star{z-index:0;background:#ffd23f;filter:drop-shadow(8px 10px 0 rgba(0,0,0,.4));
  clip-path:polygon(50% 0,58% 16%,77% 8%,71% 29%,93% 30%,75% 45%,100% 54%,76% 62%,90% 82%,66% 73%,63% 97%,50% 77%,37% 97%,34% 73%,10% 82%,24% 62%,0 54%,25% 45%,7% 30%,29% 29%,23% 8%,42% 16%)}
.prop .star::after{content:"";position:absolute;inset:9%;background:var(--red);clip-path:inherit}
.prop .halftone{z-index:1;mix-blend-mode:multiply;
  background-image:radial-gradient(circle, rgba(23,19,18,.55) 1.4px, transparent 1.7px);background-size:10px 10px;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 72%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 72%)}
.ransom{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 26px;
  animation:glitchJump 7s infinite}
.word{display:inline-flex;gap:16px}
.rl{display:inline-block;font-family:"Libre Franklin",sans-serif;letter-spacing:-.02em;line-height:.82;
  font-size:calc(var(--s,1) * clamp(1.7rem,4.4vw,3.8rem));
  padding:.04em .12em;border:2px solid var(--ink);border-radius:2px;box-shadow:4px 5px 0 rgba(0,0,0,.85);
  transform:rotate(var(--r,0deg));animation:chroma 2.6s steps(3) infinite}
@keyframes chroma{0%,100%{text-shadow:2px 2px 0 rgba(23,19,18,.14)}33%{text-shadow:3px 0 #00e5ff,-3px 0 #ff2d9b}66%{text-shadow:1px 0 #00e5ff,-1px 0 #ff2d9b}}
@keyframes glitchJump{0%,90%,100%{transform:none}92%{transform:translate(-3px,1px) skewX(2deg)}94%{transform:translate(3px,-1px) skewX(-2deg)}96%{transform:none}}

/* value prop, video-style bold slabs (Libre Franklin, like the intro video) */
.prop--video{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,20px)}
.pline{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;white-space:nowrap;
  font-size:clamp(2rem,6vw,4.6rem);padding:.1em .3em;border:4px solid var(--offwhite);border-radius:6px;
  box-shadow:8px 10px 0 rgba(0,0,0,.85);transform:rotate(var(--r,0deg))}
.pline.v-cream{background:var(--eggshell);color:var(--ink)}
.pline.v-ink{background:var(--ink);color:var(--eggshell);border-color:var(--red)}
.pline.v-red{background:var(--red);color:var(--eggshell)}

/* mobile: more room + smaller stickers so tags don't collide */
@media (max-width:760px){
  :root{--wall-w:170vw;--wall-h:205vh}
  .sticker--tag .tag{font-size:calc(var(--ts,1.5rem) * .62);padding:9px 14px;border-width:3px}
  .cta .cta-in{font-size:.8rem;padding:9px 14px;border-width:3px}
  .pline{font-size:clamp(1.4rem,7vw,2.4rem);border-width:3px;box-shadow:5px 6px 0 rgba(0,0,0,.85)}
  .dock button{font-size:.66rem;padding:8px 11px}
  /* show the whole vertical cut instead of zooming/cropping it */
  .intro-video-overlay video{object-fit:contain}
  /* modals go full-screen on mobile */
  .modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border-width:0}
  .m-content{padding:22px 18px 30px}
  .modal-x{top:10px;right:10px}
  .m-hero{height:clamp(120px,24vh,180px)}
  .m-gallery img{height:150px}
  .m-choice-img{height:100px}
  .m-cards--icon{gap:12px}
}

/* placeholder objects (stand in for stickers / the ransom prop) */
.spot{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));
  display:grid;place-items:center;text-align:center;
  background:var(--offwhite);color:var(--ink);border:3px solid var(--ink);border-radius:8px;
  box-shadow:8px 9px 0 rgba(0,0,0,.85);padding:20px 24px;width:200px;min-height:110px}
.spot .k{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;color:var(--red);margin-bottom:6px}
.spot .n{font-weight:900;letter-spacing:-.02em;font-size:1.25rem}
.spot.deco{background:var(--red);color:var(--eggshell);border-color:var(--offwhite)}

/* the anchor: where the ransom value prop will live */
.anchor{position:absolute;transform:translate(-50%,-50%) rotate(-1deg);width:min(760px,60vw);
  display:grid;place-items:center;text-align:center;padding:44px;
  border:3px dashed rgba(255,250,242,.5);border-radius:12px;color:var(--offwhite)}
.anchor .big{font-weight:900;letter-spacing:-.03em;line-height:.95;font-size:clamp(2rem,4vw,3.4rem)}
.anchor .sm{margin-top:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;opacity:.7}

/* ---- wayfinding: fly-to dock (no minimap) ---- */
.dock{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;
  display:flex;gap:6px;align-items:center;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
  padding:8px;border-radius:999px;background:rgba(23,19,18,.72);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(0,0,0,.4)}
.dock::-webkit-scrollbar{display:none}
.dock button{flex:0 0 auto;font:800 .72rem/1 "Libre Franklin",sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--offwhite);background:transparent;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;
  transition:background .16s,color .16s}
.dock button:hover{background:var(--offwhite);color:var(--ink)}
.dock button.home{background:var(--red);color:var(--eggshell)}
.dock button.home:hover{background:var(--eggshell);color:var(--ink)}

/* drag hint */
.hint{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:30;color:#fff;mix-blend-mode:difference;
  font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;transition:opacity .5s ease}
.hint.gone{opacity:0}

/* tiny easter-egg link to the old OS homepage, bottom-right corner */
.os-egg{position:fixed;right:8px;bottom:7px;z-index:40;font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;
  color:rgba(255,255,255,.32);text-decoration:none;padding:5px 6px;mix-blend-mode:difference;transition:color .2s ease}
.os-egg:hover{color:#fff}

/* ---- stickers ---- */
.sticker{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));border:0;background:none;padding:0;
  cursor:pointer;transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .16s ease;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.sticker img{display:block;width:var(--w,170px);height:auto;pointer-events:none}
.sticker:hover{transform:translate(-50%,-54%) rotate(calc(var(--r,0deg) * .4)) scale(1.06);
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.5))}
.sticker:active{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.97)}

/* section nav as die-cut stickers (white vinyl keyline, torn edges, tape), each a bit different */
.sticker--tag .tag{position:relative;display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:var(--ts,1.5rem);color:var(--ink);background:var(--offwhite);border:5px solid var(--offwhite);
  padding:14px 24px;white-space:nowrap;
  clip-path:polygon(1% 6%,4% 0,52% 4%,99% 0,100% 10%,98% 90%,100% 100%,46% 96%,3% 100%,0 88%)}
.sticker--tag.v-red .tag{background:var(--red);color:var(--offwhite)}
.sticker--tag.v-white .tag{background:var(--offwhite);color:var(--ink)}
.sticker--tag.v-ink .tag{background:var(--ink);color:var(--offwhite)}
.sticker--tag.v-agency .tag{background:var(--ink);color:var(--offwhite);border-color:var(--red)}
.sticker--tag.v-cyan .tag{background:#00e5ff;color:var(--ink)}
.sticker--tag.v-yellow .tag{background:#ffd23f;color:var(--ink)}
.sticker--tag.v-pink .tag{background:#ff2d9b;color:var(--offwhite)}
.sticker--tag.i .tag{font-style:italic}
/* torn-shape variety */
.sticker--tag.v-ink .tag,.sticker--tag.v-yellow .tag{clip-path:polygon(0 8%,5% 0,48% 3%,97% 0,100% 14%,97% 88%,100% 100%,52% 97%,4% 100%,1% 86%)}
.sticker--tag.v-pink .tag,.sticker--tag.i .tag{clip-path:polygon(2% 4%,6% 0,50% 5%,96% 0,100% 8%,99% 92%,96% 100%,48% 95%,3% 100%,0 90%)}
/* a strip of tape slapping it on */
.sticker--tag::after,.cta::after{content:"";position:absolute;top:-9px;left:50%;width:46px;height:18px;
  transform:translate(-50%,0) rotate(-7deg);background:rgba(250,248,238,.42);box-shadow:0 1px 3px rgba(0,0,0,.18);z-index:3}

/* one-click CTA stickers (direct link, no modal) */
.cta .cta-in{position:relative;display:inline-block;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;
  color:var(--offwhite);background:var(--red);border:5px solid var(--offwhite);padding:13px 24px;white-space:nowrap;
  clip-path:polygon(1% 8%,5% 0,50% 4%,98% 0,100% 12%,97% 92%,100% 100%,48% 96%,4% 100%,0 86%)}

/* separate decorative stickers (parallax on scroll later) */
.deco{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));pointer-events:none;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));z-index:0}
.deco img{display:block;width:var(--w,120px);height:auto}

/* the floating header is revealed by script.js on window scroll; the wall doesn't scroll, so pin it visible */
.fab{opacity:1 !important;pointer-events:auto !important;transform:none !important}

/* keep the intro Skip clear of the video's SH logo (bottom-right); put it top-right */
.intro-video-skip{top:18px;bottom:auto}
/* placeholder comic badge until bespoke art lands */
.sticker--ph .ph{display:grid;place-items:center;text-align:center;background:var(--offwhite);color:var(--ink);
  border:3px solid var(--ink);border-radius:6px;box-shadow:6px 7px 0 rgba(0,0,0,.85);padding:16px 24px;min-width:150px}
.sticker--ph .k{display:block;font-family:"Bangers",cursive;letter-spacing:.06em;color:var(--red);font-size:.95rem}
.sticker--ph .n{display:block;font-family:"Anton",sans-serif;font-size:1.5rem;letter-spacing:.01em}

/* ---- sticker modal (comic panel) ---- */
.modal-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,6,12,.72);backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal-overlay::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1.4px);background-size:8px 8px}
.modal{position:relative;z-index:2;width:min(880px,96vw);max-height:92vh;overflow:hidden auto;background:var(--offwhite);color:var(--ink);
  border:4px solid var(--ink);border-radius:8px;
  box-shadow:10px 10px 0 var(--red), 0 30px 60px rgba(0,0,0,.5);
  animation:slap .34s cubic-bezier(.34,1.6,.64,1) both}
/* image-led: photos do the talking */
.m-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px}
.m-gallery img{width:100%;height:clamp(160px,28vh,260px);object-fit:cover;display:block;background:var(--ink)}
.m-content{padding:28px 32px 34px}
.m-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.m-card{border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);transition:transform .14s}
.m-card:hover{transform:translateY(-3px)}
.m-card img{width:100%;height:104px;object-fit:cover;display:block}
.m-card-t{display:block;font-weight:900;padding:8px 10px 0;font-size:.95rem}
.m-card-s{display:block;color:var(--muted);padding:0 10px 8px;font-size:.78rem}
/* services: creative die-cut sticker cards, on brand */
.m-cards--icon{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:22px}
.m-cards--icon .m-card{position:relative;overflow:visible;background:var(--offwhite);border:3px solid var(--ink);
  border-radius:12px;padding:20px 16px 16px;box-shadow:5px 6px 0 var(--ink);
  transform:rotate(-1.6deg);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
.m-cards--icon .m-card:nth-child(even){transform:rotate(1.6deg)}
.m-cards--icon .m-card:nth-child(3n){transform:rotate(-.5deg)}
.m-cards--icon .m-card:hover{transform:rotate(0) translateY(-5px);box-shadow:9px 11px 0 var(--red)}
.m-cards--icon .m-card img{width:52px;height:52px;object-fit:contain;background:none;padding:0;margin-bottom:12px;
  transition:transform .18s ease}
.m-cards--icon .m-card:hover img{transform:rotate(-8deg) scale(1.12)}
.m-cards--icon .m-card-t{padding:0;font-size:1.15rem;font-weight:900;letter-spacing:-.02em}
.m-cards--icon .m-card-s{padding:0;margin-top:3px;color:var(--muted);font-size:.82rem;line-height:1.35}
.m-cards--icon .m-card::after{content:"\2192";position:absolute;top:14px;right:14px;font-weight:900;font-size:1.1rem;
  color:var(--red);opacity:0;transform:translateX(-5px);transition:opacity .18s,transform .18s}
.m-cards--icon .m-card:hover::after{opacity:1;transform:none}
/* audit form */
.m-form{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.m-form input{padding:12px 14px;border:2px solid var(--ink);border-radius:6px;background:#fff;font:inherit;font-size:1rem;color:var(--ink)}
.m-form input:focus,.m-form textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.m-form textarea{padding:12px 14px;border:2px solid var(--ink);border-radius:6px;background:#fff;font:inherit;font-size:1rem;color:var(--ink);resize:vertical;min-height:104px}
.m-inline{color:var(--red);text-decoration:underline;font-weight:700}
/* hero media header (video/image) */
.m-hero{position:relative;overflow:hidden;height:clamp(160px,30vh,260px);background:var(--ink)}
.m-hero video,.m-hero img{width:100%;height:100%;object-fit:cover;display:block}
.m-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,0) 55%, rgba(23,19,18,.4))}
/* multi-step choices + back */
.m-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.m-choice{display:flex;flex-direction:column;align-items:stretch;text-align:left;cursor:pointer;overflow:hidden;
  background:var(--offwhite);border:3px solid var(--ink);border-radius:12px;box-shadow:5px 6px 0 var(--ink);
  transform:rotate(-1.4deg);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.m-choice:nth-child(2){transform:rotate(1.4deg)}
.m-choice:hover{transform:rotate(0) translateY(-4px);box-shadow:8px 10px 0 var(--red)}
.m-choice-img{height:112px;overflow:hidden;border-bottom:3px solid var(--ink)}
.m-choice-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.m-choice:hover .m-choice-img img{transform:scale(1.06)}
.m-choice-t{font-weight:900;font-size:1.15rem;letter-spacing:-.02em;padding:12px 14px 0}
.m-choice-s{color:var(--muted);font-size:.82rem;padding:2px 14px 14px}
.m-back{background:none;border:0;cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--red);padding:0;margin-bottom:14px}
@media (max-width:560px){.m-choices{grid-template-columns:1fr}}
.m-form .m-action{width:100%;text-align:center;border:0;cursor:pointer;margin-top:4px}
.m-form .m-action:disabled{opacity:.6}
.m-thanks{margin-top:16px;font-weight:800;color:var(--red)}
@keyframes slap{0%{opacity:0;transform:scale(1.25) rotate(-3deg)}60%{opacity:1;transform:scale(.97) rotate(1deg)}100%{transform:scale(1) rotate(-1deg)}}
.modal-x{position:absolute;top:12px;right:12px;z-index:4;width:44px;height:44px;border-radius:999px;border:3px solid var(--ink);
  background:var(--red);color:var(--offwhite);font-weight:900;font-size:22px;line-height:1;cursor:pointer;box-shadow:3px 4px 0 rgba(0,0,0,.7)}
.m-kick{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--red)}
.m-title{font-weight:900;font-size:clamp(2rem,5vw,3.2rem);line-height:.95;letter-spacing:-.03em;margin:4px 0 14px;
  text-shadow:2px 2px 0 rgba(23,19,18,.14)}
.m-body p{color:var(--muted);line-height:1.55;margin-bottom:10px}
.m-body strong{color:var(--ink)}
.m-action{display:inline-block;margin-top:14px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  padding:13px 22px;border-radius:6px;background:var(--ink);color:var(--offwhite);text-decoration:none;border:3px solid var(--ink)}
.m-action:hover{background:var(--red)}

@media (prefers-reduced-motion: reduce){ .wall{will-change:auto} .modal{animation:none} .ransom,.rl{animation:none} .rl{text-shadow:none} }