/* Home — endless draggable project field (inspired by powerhouse-company.com). */

html,body{height:100%}
body{margin:0;background:var(--bg);transition:background .4s;color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- header ----------
   No backgrounds, bubbles or glows: nav, tools and bottom bar are white and blended with
   `difference`, so they invert whatever is behind them (black on the light page, light on
   the dark page, inverted colours over images). */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 2.4vw;pointer-events:none;color:#fff;mix-blend-mode:difference}
.top > *{pointer-events:auto}
.pill{grid-column:2;display:flex;align-items:center}
.pill > *{all:unset;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;padding:6px 16px;color:#fff}
.pill > * + *{border-left:1px solid currentColor}
.pill > *:hover,.pill > *:focus-visible,.pill > [aria-current="true"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.tools{grid-column:3;justify-self:end;display:flex;gap:6px}
.tools button{width:40px;height:40px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0;color:#fff}
.tools svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;grid-area:1/1;transition:opacity .2s}
.tools button:hover svg{stroke-width:2.2}
.view-toggle .ic-grid{opacity:0}
body.show-index .view-toggle .ic-grid{opacity:1}
body.show-index .view-toggle .ic-list{opacity:0}

/* ---------- centre lockup ---------- */
.hero-lockup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;transition:transform 1.2s cubic-bezier(.45,.05,.2,1);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;user-select:none}
.hero-mark{width:clamp(96px,11vw,190px);aspect-ratio:800/545;background:var(--ink);-webkit-mask:url("../img/brand/mark.png") center/contain no-repeat;mask:url("../img/brand/mark.png") center/contain no-repeat;margin-bottom:clamp(12px,1.6vw,24px)}
.hero-name{font-family:var(--brand);font-weight:600;font-size:clamp(30px,5.2vw,96px);line-height:1;letter-spacing:.01em;white-space:nowrap;
  background:linear-gradient(90deg,var(--ink) 0 45%,var(--ghost) 60% 100%);background-size:260% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-family:var(--brand);font-weight:300;font-size:clamp(11px,1.15vw,21px);color:var(--ink);letter-spacing:.42em;margin-top:clamp(6px,.8vw,14px);padding-left:.42em}

/* after the intro the lockup settles smaller; tiles passing behind it fade (see home.js) */
.hero-lockup.settled{transform:translate(-50%,-50%) scale(.58)}
@media (max-width:760px){ .hero-lockup.settled{transform:translate(-50%,-50%) scale(.78)} }

/* intro: the lockup is the first thing you see */
.is-intro .hero-mark{animation:markIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.is-intro .hero-name{animation:write 1.6s .25s cubic-bezier(.5,0,.2,1) both}
.is-intro .hero-sub{animation:fadeUp .9s 1s ease both}
@keyframes markIn{from{opacity:0;transform:translateY(18px) scale(.9)}}
@keyframes write{from{background-position:100% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}

/* ---------- field ---------- */
.field{position:fixed;inset:0;z-index:2;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.field.dragging{cursor:grabbing}
.world{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;transition:filter 1.4s ease}
.world.far{filter:grayscale(1) contrast(.9)}
.tile{position:absolute;left:0;top:0;display:block;text-decoration:none;will-change:transform;-webkit-user-drag:none;transition:opacity .45s ease}
.tile.under{opacity:.18}
.tile.under:hover{opacity:.4}
.tile .frame{display:block;width:100%;height:100%;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .6s ease}
.tile img.ok{opacity:1}
.tile .cap{position:absolute;left:0;top:100%;padding-top:10px;display:flex;gap:10px;align-items:baseline;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.tile .cap b{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase}
.tile .cap span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.tile:hover .frame,.tile:focus-visible .frame{transform:scale(1.035)}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.tile:focus-visible{outline:none}
.tile:focus-visible .frame{outline:2px solid var(--coral);outline-offset:4px}
.field.dragging .tile .frame{transform:none}
.field.dragging .tile .cap{opacity:0}
.is-intro .tile{transition:opacity .8s ease}
.is-intro .tile.pre{opacity:0}

/* ---------- index (list view) ---------- */
.index{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding:118px 2.4vw 90px;opacity:0;transition:opacity .35s ease}
.index.open{opacity:1}
.index-inner{max-width:1500px;margin:0 auto}
.index-head,.index-list a{display:grid;grid-template-columns:2.2fr 1.6fr 1.3fr .5fr 1.3fr;gap:20px;align-items:baseline}
.index-head{font-family:var(--mono);font-size:12px;color:var(--ink-2);padding:0 0 12px}
.index-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.index-list li{border-top:1px solid var(--line)}
.index-list a{text-decoration:none;padding:20px 0 18px;transition:color .2s,padding .3s}
.index-list .nm{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.6vw,40px);letter-spacing:.03em;line-height:1.1}
.index-list .nm small{font-family:var(--mono);font-size:12px;color:var(--coral);letter-spacing:0;margin-left:10px;vertical-align:middle}
.index-list .m{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.index-list a:hover{color:var(--coral);padding-left:14px}
.index-list a:hover .m{color:var(--ink)}
.index-preview{position:fixed;left:0;top:0;width:min(300px,24vw);aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .25s,transform .25s;z-index:41;box-shadow:0 20px 50px var(--shadow)}
.index-preview.on{opacity:1;transform:translateY(-50%) scale(1)}

/* ---------- bottom bar ---------- */
.bottom{position:fixed;inset:auto 0 0 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:40px;padding:18px 2.4vw calc(18px + env(safe-area-inset-bottom));font-family:var(--mono);font-size:12px;pointer-events:none;color:#fff;mix-blend-mode:difference}
.bottom > *{pointer-events:auto;white-space:nowrap}
.bottom a{text-decoration:none}
.bottom a:hover{text-decoration:underline;text-underline-offset:4px}
.bottom .social{display:flex;gap:18px}
.hint{transition:opacity .6s}
.hint.gone{opacity:0}
.addr{margin-right:auto}
body.show-index .hint{opacity:0}

@media (max-width:1100px){ .bottom .addr{display:none} }

/* ---------- small screens ---------- */
@media (max-width:760px){
  .top{padding:14px 4vw}
  .pill{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%)}
  .pill > *{font-size:15px;padding:6px 16px}
  .bottom{bottom:44px;justify-content:center}
  .bottom .addr,.bottom .social{display:none}
  .index{padding-top:90px}
  .index-head{display:none}
  .index-list a{grid-template-columns:1fr auto;gap:4px 16px}
  .index-list .m.t,.index-list .m.s{display:none}
  .index-list .m.l{grid-column:1}
  .index-list .m.y{grid-row:1;grid-column:2}
  .index-preview{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}