/* ============================================================
   Xiao Studio — HOME page layout
   ------------------------------------------------------------
   Homepage-only styles: the looping collage field, the fixed
   centred XIAO wordmark (rendered as a live negative of the
   collage behind it), the tagline and the top bar layout.

   Loaded AFTER site.css, so it may rely on the theme tokens
   defined there (--bg, --ink, --faint, --imp, --serif …).
   Tiles are generated from a data array in home.js.
   ============================================================ */

:root{ --edge:clamp(14px,2.4vw,38px); --home-tile-bg:#0b0b0b; }

*{box-sizing:border-box;margin:0;padding:0;}
/* the collage is driven by wheel/touch (see home.js), so the page itself never
   scrolls — lock it so a flick can never reveal a top or bottom edge */
html,body{height:100%;overflow:hidden;}
body{-webkit-font-smoothing:antialiased;overscroll-behavior:none;}

/* ---- looping collage field --------------------------------------- */
.bg{position:fixed;inset:0;overflow:hidden;z-index:1;background:var(--page-bg,var(--bg));}
.col{position:absolute;left:0;top:0;width:100%;will-change:transform;}
.block{position:relative;width:100%;height:240vh;}
/* per-tile rotation (--rot) and cascade index (--i) are set inline by home.js */
.tile{position:absolute;aspect-ratio:1/1;overflow:hidden;background:var(--home-tile-bg);cursor:pointer;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  box-shadow:0 14px 50px rgba(0,0,0,.55);outline:1px solid rgba(255,255,255,.05);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease,outline-color .55s ease;
  /* intro: each photo is laid down one after another */
  animation:tileIn .62s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i,0) * 38ms);}
.tile img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(1.13);transition:filter .55s ease;}
.tile.active{z-index:65 !important;transform:translate(-50%,-50%) rotate(0deg) scale(1.2) !important;
  outline:3px solid rgba(255,255,255,.85) !important;box-shadow:0 30px 90px rgba(0,0,0,.8) !important;}
.tile.active img{filter:grayscale(0) contrast(1.08) brightness(1.12) !important;}

/* one-by-one reveal: fade + scale, preserving each tile's rotation */
@keyframes tileIn{
  from{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.5);}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1);}
}
@media (prefers-reduced-motion:reduce){ .tile{animation:none;} }

/* (no scroll-range spacer needed — the loop is wheel/touch-driven in home.js) */

/* ---- XIAO wordmark — fixed centre, NOT draggable; also the menu trigger.
   mix-blend-mode:difference paints the live negative of the tiles behind it.
   It stays hidden until the collage cascade finishes, then fades in fast.
   Timing: 52 tiles x 38ms + 0.62s tile anim ≈ 2.6s -> reveal at 2.45s. */
.hero-mark{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:55;
  text-align:center;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none;
  mix-blend-mode:difference;animation:heroIn .5s ease .55s both;}
.wordmark{font-size:clamp(140px,36vw,820px);line-height:.78;letter-spacing:-.02em;white-space:nowrap;
  color:#fff;-webkit-text-fill-color:#fff;}
@keyframes heroIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){ .hero-mark{animation:none;} }

/* small affordance under XIAO; appears with the wordmark, brightens on hover */
.hero-hint{display:block;margin-top:16px;font-family:var(--serif);
  font-size:clamp(10px,1.1vw,13px);letter-spacing:.34em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .35s ease;}
/* enable the click + cursor only once XIAO has appeared (set by site.js) */
body.nav-ready .hero-mark{pointer-events:auto;cursor:pointer;}
body.nav-ready .hero-hint{opacity:.55;}
.hero-mark:hover .hero-hint{opacity:1;}

/* empty top bar (homepage navigates via the XIAO menu) collapses away */
.top:empty{display:none;}

/* the XIAO-triggered overlay menu styles are shared — see site.css */

.vlabel{position:fixed;left:6px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  z-index:55;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--faint);pointer-events:none;}

/* ---- top bar layout (colours come from site.css) ----------------- */
.top{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:14px var(--edge) 26px;}
.top .nav{display:flex;gap:clamp(12px,1.8vw,26px);align-items:center;flex-wrap:wrap;}
.top a{text-decoration:none;font-size:clamp(13px,1.4vw,16px);}

@media (max-width:760px){
  .tile{width:32vw !important;}
  .wordmark{font-size:30vw;}
}