/* Homepage: split hero with a fanned stack of real screenshots, then a four-tile bento. */

/* ---------- Hero ---------- */
.home-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vw,56px);align-items:center;padding-top:clamp(24px,6vw,64px);padding-bottom:clamp(40px,6vw,72px)}
@media (min-width:900px){.home-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:min(calc(100dvh - 56px - 24px),760px)}}
.home-hero__copy{display:grid;gap:clamp(18px,2.4vw,26px);align-content:center}
.home-hero__copy .ui-actions{margin-top:6px}

.home-stack{--px:0;--py:0;position:relative;height:clamp(360px,62vw,600px)}
.home-stack__phone{position:absolute;left:50%;bottom:0;width:clamp(150px,30vw,262px);transform-origin:50% 100%}
.home-stack__phone--c{z-index:3;transform:translateX(-50%) translate3d(calc(var(--px) * 10px),calc(var(--py) * 8px),0)}
.home-stack__phone--l{z-index:1;transform:translateX(-112%) translateY(-6%) rotate(-9deg) translate3d(calc(var(--px) * -6px),calc(var(--py) * -4px),0)}
.home-stack__phone--r{z-index:2;transform:translateX(12%) translateY(-3%) rotate(8deg) translate3d(calc(var(--px) * 16px),calc(var(--py) * 12px),0)}
@media (min-width:900px){
  .home-stack__phone{bottom:auto;top:50%;transform-origin:50% 50%}
  .home-stack__phone--c{transform:translate(-50%,-50%) translate3d(calc(var(--px) * 10px),calc(var(--py) * 8px),0)}
  .home-stack__phone--l{transform:translate(-118%,-46%) rotate(-9deg) translate3d(calc(var(--px) * -6px),calc(var(--py) * -4px),0)}
  .home-stack__phone--r{transform:translate(18%,-52%) rotate(8deg) translate3d(calc(var(--px) * 16px),calc(var(--py) * 12px),0)}
}
/* Entrance: the three screens settle into the fan once, then follow the pointer gently. */
@media (prefers-reduced-motion:no-preference){
  .home-stack__phone{animation:home-in 1.1s var(--ease) both}
  .home-stack__phone--l{animation-delay:.12s}.home-stack__phone--r{animation-delay:.2s}
  .home-hero__copy>*{animation:home-copy .9s var(--ease) both}
  .home-hero__copy>:nth-child(2){animation-delay:.08s}.home-hero__copy>:nth-child(3){animation-delay:.16s}
}
@keyframes home-in{from{opacity:0;translate:0 48px;rotate:0deg}}
@keyframes home-copy{from{opacity:0;translate:0 14px}}

/* ---------- Bento: exactly four tiles ---------- */
.home-bento{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.6vw,20px)}
@media (min-width:900px){
  .home-bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:300px 300px auto}
  .tile--apps{grid-column:1 / span 7;grid-row:1 / span 2}
  .tile--games{grid-column:8 / span 5;grid-row:1}
  .tile--projects{grid-column:8 / span 5;grid-row:2}
  .tile--bench{grid-column:1 / -1;grid-row:3}
  .home-bento .tile{min-height:0}
}
.tile{position:relative;display:block;min-height:360px;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tile__copy{position:relative;z-index:2;display:grid;gap:8px;max-width:22em;padding:clamp(22px,2.6vw,32px)}
.tile__copy p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.tile__tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.tile__go{position:absolute;z-index:3;left:clamp(22px,2.6vw,32px);bottom:clamp(22px,2.6vw,32px);width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);font-size:18px;transition:transform .4s var(--ease),background-color .25s ease,color .25s ease}
.tile__art{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:14px;pointer-events:none}
.tile__art .ui-phone{flex:none;transition:transform .6s var(--ease)}
@media (hover:hover){
  .tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lift)}
  .tile:hover .tile__go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
  .tile:hover .tile__art .ui-phone{transform:translateY(-12px)}
  .tile:hover .tile__art .ui-phone:nth-child(2){transform:translateY(-18px)}
}
.tile:active{transform:scale(.99)}

/* Apps: two screens rising from the bottom right */
.tile--apps{min-height:520px}
.tile__art--apps{right:clamp(16px,4vw,48px);left:auto;gap:clamp(10px,1.6vw,18px);bottom:-18%}
.tile__art--apps .ui-phone{width:clamp(150px,19vw,232px)}
.tile__art--apps .ui-phone:first-child{margin-bottom:-12%}

/* Games (always a night tile) and projects: copy on top, two screens peeking up from below */
.ui .tile--games{background:var(--night);color:var(--on-night);box-shadow:none}
.tile--games .tile__copy p{color:var(--on-night-2)}
.tile--games .tile__go{background:rgba(244,244,245,.12);color:var(--on-night)}
.tile--games:hover .tile__go{background:var(--on-night);color:var(--night)}
.tile--games .ui-phone{box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1)}
.tile--projects{background:var(--surface-2);box-shadow:none}
.tile--projects .tile__go{background:var(--surface)}
.tile__art--games,.tile__art--projects{inset:150px 26px auto auto;align-items:flex-start;gap:12px}
.tile__art--games .ui-phone,.tile__art--projects .ui-phone{width:clamp(112px,9.6vw,138px);border-radius:22px;padding:5px}
.tile__art--games .ui-phone img,.tile__art--projects .ui-phone img{border-radius:17px}
.tile__art--games .ui-phone:first-child,.tile__art--projects .ui-phone:first-child{margin-top:26px}

/* Workbench: a quiet full-width band */
.tile--bench{min-height:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:0 clamp(22px,2.6vw,32px) 0 0}
.tile--bench .tile__copy{padding-right:0}
.tile__cta{margin:0 0 22px 22px}
@media (min-width:600px){.tile__cta{margin:0}}

@media (max-width:899px){
  .tile--apps{min-height:500px}
  .tile__art--apps{right:50%;transform:translateX(50%);bottom:-22%}
  .tile__art--apps .ui-phone{width:min(40vw,190px)}
  .tile--games,.tile--projects{min-height:420px}
  .tile__art--games,.tile__art--projects{inset:170px 0 auto 0;justify-content:center}
  .tile__art--games .ui-phone,.tile__art--projects .ui-phone{width:min(34vw,150px)}
  .tile .tile__go{left:auto;right:18px;top:18px;bottom:auto}
}