/* =========================================================================
   home.css — the home page: the 3D stage (logo + rings of project cards),
   the bottom bar, and the (currently hidden) Row-mode arrows.
   Driven by js/components/home/*.
   ========================================================================= */

/* ---------- 3D stage ---------- */
#stage{position:fixed;inset:0;overflow:hidden;touch-action:none;transition:opacity .8s,filter .8s}
body.away #stage{opacity:0;filter:blur(18px);pointer-events:none}
#world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
#orbit{position:absolute;transform-style:preserve-3d}

.logo{position:absolute;pointer-events:none;transform-style:preserve-3d}
.logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 30px rgba(40,80,150,.18));user-select:none;-webkit-user-drag:none}

/* ---------- project cards ---------- */
.card{position:absolute;transform-style:preserve-3d;cursor:pointer}
.face{position:absolute;inset:0;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;opacity:var(--fog,1);
  display:flex;align-items:flex-end;justify-content:space-between;padding:8px 9px;font-size:10px;letter-spacing:.12em;color:var(--block-ink)}
.face.front{background:var(--block);box-shadow:0 18px 40px -18px rgba(30,60,120,.35)}
.face.back{background:var(--block-back);transform:rotateY(180deg)}
.face.has-img{background-color:var(--block);overflow:hidden}
/* the image lives on its own layer so it can be softened without blurring the card's edge */
.face .pic{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .5s ease,transform .5s ease}
/* the hover video sits on top of the image */
.face .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}

/* cards rest a touch darker; the one under the mouse returns to its normal brightness */
.card .face{filter:brightness(.7);transition:filter .45s ease,background .35s}
.card:hover .face,.card:focus-visible .face,.card.active .face{filter:brightness(1)}
.card:hover .front:not(.has-img),.card:focus-visible .front:not(.has-img){background:#dfe1e5}

/* "Coming soon" slots: white card with the black logo mark and the words — display only */
.face.soon{background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:7%;padding:10% 4%}
.face.soon img{width:66%;height:auto;display:block;pointer-events:none;user-select:none}
.face.soon em{font-family:var(--display);font-style:italic;font-weight:500;color:#111;font-size:clamp(11px,1.15vw,18px);letter-spacing:.02em;white-space:nowrap;text-align:center}
/* the upcoming project's name under "Coming soon" — the same serif italic, a little smaller and softer */
.face.soon em small{display:block;margin:.35em auto 0;max-width:14em;white-space:normal;font-size:.5em;line-height:1.15;letter-spacing:0;color:#55595f}

/* Row mode: the centred (or hovered) project stays clear, the others dim and soften slightly */
body.row .card.dim .pic{filter:blur(.45px) brightness(.75);transform:scale(1.015)}
body.row .card.dim .face.soon{filter:brightness(.5)}
body.row .card.focus .face{filter:brightness(1)}

/* ---------- bottom bar ---------- */
.chrome{position:fixed;z-index:20;bottom:calc(24px + env(safe-area-inset-bottom,0px));transition:opacity .6s,transform .6s}
.what{left:var(--gutter);font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1;letter-spacing:.02em}
.hint{left:50%;transform:translateX(-50%);font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(18px,1.6vw,22px);line-height:1;letter-spacing:.02em;color:var(--ink);pointer-events:none;white-space:nowrap}
.count{right:var(--gutter);font-size:12px;letter-spacing:.06em}
.count a{text-decoration:underline;text-underline-offset:3px}

/* everything marked .home-only fades out on the other pages */
body.away .home-only{opacity:0;pointer-events:none;transform:translateY(10px)}
body.away .hint{transform:translate(-50%,10px)}

/* ---------- Row mode arrows + counter ---------- */
.rownav{position:fixed;z-index:20;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:6px;background:#fff;color:#111;box-shadow:0 10px 30px -12px rgba(30,60,120,.35);
  transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}
body.row:not(.away) .rownav{opacity:1;pointer-events:auto;transform:translate(-50%,0);transition-delay:.25s}
body.away .rownav{transform:translate(-50%,8px)}
body.row .hint{opacity:0}
.rownav button{display:grid;place-items:center;width:34px;height:30px;color:#8a8e95;transition:background .3s,color .3s}
.rownav button:hover{background:#eceef1;color:#111}
.rownav svg{width:14px;height:14px}
.rownav span{min-width:62px;text-align:center;font-size:10.5px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.rownav :focus-visible{outline-color:#111;outline-offset:-2px}

@media (max-width:600px){.rownav{bottom:calc(64px + env(safe-area-inset-bottom,0px))}}
@media (max-width:560px){
  .hint{display:none}
  .count{font-size:11px}
}