/* 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). */
/* Layout (owner, 28 Sep 2026): like the content-page header — nav + theme toggle together on the
   right, no separators, no list button — and at the same spot, so nothing jumps between pages:
   8px from the right, and vertically centred on the content header's mark row (≈36px down). */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto;align-items:center;padding:16px 8px;pointer-events:none;color:#fff;mix-blend-mode:difference}
.top > *{pointer-events:auto}
.pill{grid-column:2;justify-self:end;display:flex;align-items:center}
.pill > :last-child{padding-right:0}   /* last word on the 8px edge line (no theme switch any more) */
.pill > *{all:unset;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;padding:6px 16px;color:#fff}

/* hover = coral (no underline); the chrome is blended, so use --coral-blend, which shows as --coral */
.pill > *:hover,.pill > *:focus-visible,.pill > [aria-current="true"]{color:var(--coral-blend);-webkit-text-stroke:.4px currentColor} /* stroke: coral reads thinner; same width */
.pill > span.lang-switch,.pill > span.lang-switch:hover{cursor:default;color:#fff;-webkit-text-stroke:0}   /* only while the switch is inactive (plain text) */

/* ---------- centre lockup ----------
   Text on images = white + mix-blend-mode:difference (owner rule, like studioboom.it's logo): over
   a photo it takes the inverse colour (red → cyan, blue → yellow). On the plain page it still
   reads as --ink: white "minus" the white page is black, and on the dark --bg it is ≈ #f1f1f2.
   Same for the ghost: white at 12 % shows as the light theme's black-12 % and the dark theme's
   white-12 %. So light and dark mode need no separate values. */
/* --lk = the lockup's colour: white under the blend (= --ink on the page); coral while the mouse is
   over it (.hot, set by home.js; owner). Registered so it can fade, even inside the name's gradient. */
@property --lk{syntax:"<color>";inherits:true;initial-value:#fff}
.hero-lockup.hot{--lk:var(--coral-blend)}
.hero-lockup{--lk:#fff;--sub:clamp(11px,1.15vw,21px);position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;transition:transform 1.2s cubic-bezier(.45,.05,.2,1),--lk .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;user-select:none;mix-blend-mode:difference}
/* mark sized from ARCHITECTURE's font size (--sub): 10.5 × --sub ≈ 90 % of that word (see .hero-sub) */
.hero-mark{width:calc(var(--sub) * 10.5);aspect-ratio:800/545;background:var(--lk);-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)}
/* The letters are the studio's own lettering (owner's bought font, 29 Sep 2026), drawn from
   brand/name.png and brand/architecture.png as masks: the box keeps the old font-size, and the
   letters are .72em tall (the cap height Poppins had) at the image's own proportions. The text in
   the markup stays for the box and is hidden; the background colours the letters, so the intro
   "write" gradient still works. */
.hero-name{font-size:clamp(30px,5.2vw,96px);line-height:1;display:block;height:1em;width:calc(.72em * 1807 / 128);overflow:hidden;white-space:nowrap;color:transparent;
  background:linear-gradient(90deg,var(--lk) 0 45%,rgba(255,255,255,.12) 60% 100%);background-size:260% 100%;background-position:0 0;
  -webkit-mask:url("../img/brand/name.png") center / auto .72em no-repeat;mask:url("../img/brand/name.png") center / auto .72em no-repeat}
/* ARCHITECTURE in Manrope Light (owner, 29 Sep 2026), slightly longer than the mark: the word is
   ≈ 7.1em of ink + 11 × .42em tracking ≈ 11.7 × --sub, so the mark (10.5 × --sub) ≈ 90 % of it.
   padding-left balances the tracking after the last letter so the word stays centred. */
.hero-sub{font-family:var(--sans);font-weight:300;font-size:var(--sub);line-height:1.4;color:var(--lk);letter-spacing:.42em;padding-left:.42em;white-space:nowrap;margin-top:clamp(6px,.8vw,14px)}

/* after the intro the lockup settles smaller; tiles passing behind it fade (see home.js) */
.hero-lockup.settled{transform:translate(-50%,-50%) scale(.58)}
/* on load the big lockup is coral and turns --ink as it settles (owner, 29 Sep 2026) */
.hero-lockup:not(.settled){--lk:var(--coral-blend)}
.hero-lockup.settling{transition:transform 1.2s cubic-bezier(.45,.05,.2,1),--lk 1.2s cubic-bezier(.45,.05,.2,1)}
@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: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}

/* ---------- 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,.bottom a:focus-visible{color:var(--coral-blend)}
.bottom .social{display:flex;gap:18px}
.hint{transition:opacity .6s}
.hint.gone{opacity:0}
.addr{margin-right:auto}

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

/* ---------- small screens ---------- */
@media (max-width:760px){
  /* phones: nav stays top right (it used to sit at the bottom), like the content-page header,
     centred on the same line as there (the phone mark row is ≈30px down) */
  .top{padding-top:10px}
  .pill > *{font-size:14px;padding:6px 12px;white-space:nowrap}
  .bottom{justify-content:center}
  .bottom .addr,.bottom .social{display:none}
}

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