/* ============================================================
   PERSONA WALL — shared styles (used by index.html and the
   scratch-persona-wall.html dev page). Namespaced .pw / .pw-*.
   Needs fonts: Inter, Inter Tight, Sometype Mono.
   ============================================================ */

/* the scroll runway — its height is how long the zoom lasts.
   padding:0 defeats any host page's global `section{padding:...}` rule —
   the wall must sit FLUSH against its neighbours (no black bands). */
.pw{
  --pw-accent:#ff5800; --pw-accent-rgb:255,88,0;
  --pw-ink:#f2f2f3; --pw-muted:#a7a8ab;
  position:relative; height:360vh; background:#060607;
  padding:0; margin:0;
}
/* pinned viewport */
.pw-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(130% 100% at 50% 50%,#141317 0%,#0a0a0c 60%,#060607 100%);
}
/* soft edge fades: partial tile rows DISSOLVE at the top/bottom instead of
   being amputated by the viewport/section edge */
.pw-sticky::before,.pw-sticky::after{
  content:""; position:absolute; left:0; right:0; height:9vh; z-index:7; pointer-events:none;
}
.pw-sticky::before{top:0;    background:linear-gradient(#060607 8%, rgba(6,6,7,0))}
.pw-sticky::after {bottom:0; background:linear-gradient(rgba(6,6,7,0), #060607 92%)}
/* the uniform grid — one transform:scale() driven by scroll */
.pw-grid{
  display:grid; gap:var(--pw-gap,14px);
  grid-template-columns:repeat(var(--pw-cols,16),var(--pw-card,130px));
  grid-auto-rows:var(--pw-card,130px);
  transform:scale(6); transform-origin:50% 50%;
  will-change:transform;
}

/* a cell — invisible layout box; the app-icon container IS the visible tile */
.pw-cell{
  position:relative; width:var(--pw-card,130px); height:var(--pw-card,130px);
  cursor:pointer;
  opacity:.35;   /* default: the whole field sits faded — only the hot card comes up */
  transition:opacity .32s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
/* the photo lives INSIDE the app-icon container: same rect (10/96 inset),
   same rounded corners (rx 17 of 76) as the icon artwork */
.pw-cell img{
  position:absolute; left:10.42%; top:10.42%; width:79.16%; height:79.16%;
  border-radius:22.4%;
  object-fit:cover; object-position:center 18%;   /* keep faces in frame on the square crop */
  display:block;
  opacity:0; transition:opacity .3s ease;   /* photo hidden entirely until revealed */
}
.pw-cell.is-hot img,
.pw-cell.is-cycling img{opacity:1}
/* pixel-art app icon: the tile itself; fades on hover/cycle to reveal the photo in place */
.pw-icon{
  position:absolute; inset:0; z-index:2;
  background-size:100% 100%; background-repeat:no-repeat;
  opacity:1; transition:opacity .3s ease;
}
.pw-cell.is-hot .pw-icon,
.pw-cell.is-cycling .pw-icon{opacity:0}

/* hover focus: only the hot card comes up to full strength — the ring hugs the
   app-icon container (the img), not the invisible outer cell */
.pw-cell.is-hot{opacity:1; z-index:6; transform:scale(1.06)}
.pw-cell.is-hot img{
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 0 2px rgba(var(--pw-accent-rgb),.8), 0 0 34px rgba(var(--pw-accent-rgb),.3);
}
/* idle auto-cycle: the travelling card brightens the same way */
.pw-cell.is-cycling{opacity:1; z-index:5; transform:scale(1.04)}
.pw-cell.is-cycling img{
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 0 2px rgba(var(--pw-accent-rgb),.6), 0 0 30px rgba(var(--pw-accent-rgb),.25);
}

/* legibility / depth — soft dark pool behind the centered text */
.pw-vignette{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:
    radial-gradient(46% 36% at 50% 50%,rgba(6,6,7,.78) 0%,rgba(6,6,7,.28) 55%,rgba(6,6,7,0) 78%),
    radial-gradient(120% 120% at 50% 55%,rgba(6,6,7,0) 62%,rgba(6,6,7,.42) 100%);
}

/* --- pinned callout, dead-center: static title + persona-driven subtext --- */
.pw-callout{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; pointer-events:none;
}
.pw-callout-inner{max-width:860px}
.pw-title{
  font-family:'Inter Tight'; font-weight:700; color:var(--pw-ink);
  font-size:clamp(36px,6vw,74px); line-height:1.02; letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
/* role word — same looped metallic sweep as the Granular wordmark (granSweep keyframes live in index.html) */
.pw-title em{color:transparent;-webkit-text-fill-color:transparent; font-style:normal; display:inline-block;
  padding-right:.06em; margin-right:-.06em;
  padding-bottom:.18em; margin-bottom:-.18em;   /* clipped-bg text paints only inside the box — extend it past the descenders (g, y) */
  background:linear-gradient(100deg,#8a3300 0%,#ff5800 16%,#ffc9a1 30%,#fff0e0 36%,#ff8a3d 46%,#b03c00 60%,#ff6a12 74%,#ffd9b8 84%,#8a3300 100%);
  background-size:260% 100%; -webkit-background-clip:text; background-clip:text;
  animation:granSweep 6.5s linear infinite}
@media(prefers-reduced-motion:reduce){.pw-title em{animation:none;background-position:32% 50%}}
/* split-second glitch when the role word swaps */
@keyframes pwGlitch{
  0%{transform:translate(0)}
  25%{transform:translate(-3px,1px) skewX(-5deg)}
  50%{transform:translate(3px,-1px)}
  75%{transform:translate(-1px,0) skewX(4deg)}
  100%{transform:translate(0)}
}
.pw-title em.glitching{
  animation:pwGlitch .24s steps(2) both, granSweep 6.5s linear infinite;   /* keep the sweep running through the swap */
  text-shadow:2px 0 rgba(255,88,0,.5), -2px 0 rgba(96,160,255,.35);
}
.pw-stack{position:relative; min-height:5em; margin-top:18px}
.pw-slide{position:absolute; inset:0; opacity:0; transition:opacity .3s ease}
.pw-slide.is-on{opacity:1}
/* fixed line budget so the tagline NEVER reflows between personas:
   desktop = exactly 1 line (no wrap; longest tagline ~51ch fits at full size),
   mobile (≤760px) = a fixed 2-line box (short lines leave row 2 empty). */
.pw-desc{
  font-size:clamp(15px,1.9vw,20px); line-height:1.5;
  color:var(--pw-muted); font-weight:400;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
  white-space:nowrap; height:1.5em; overflow:visible;
}
@media (max-width:760px){
  .pw-desc{white-space:normal; height:3em}
}
/* click affordance ON the hovered tile — the nudge lives where the cursor is */
.pw-cell::after{
  content:"↗";
  position:absolute; right:6%; top:6%; z-index:3;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:600 14px/1 'Inter',system-ui,sans-serif;
  background:var(--pw-accent); color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  opacity:0; transform:scale(.5);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.pw-cell.is-hot::after{opacity:1; transform:scale(1)}

/* micro hint — secondary eyebrow style; only visible while hovering an avatar */
.pw-hint{
  display:block; margin-top:10px;
  font-family:'Sometype Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pw-muted);
  opacity:0; transition:opacity .25s ease;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.pw-grid.focusing ~ .pw-callout .pw-hint{opacity:1}

@media (prefers-reduced-motion:reduce){
  .pw{height:100vh}
  .pw-grid{transform:scale(var(--pw-end,0.6))}
  .pw-cell{transition:opacity .2s ease}
  .pw-slide{transition:opacity .2s ease}
}