/* "Glow up" — scroll-driven exploded view: a messy profile flies apart in 3D, the handle rolls into @vel,
   and it snaps back together as a clean profile. Progress comes from js/glowup.js as --p / --e / --r / --a on .gu. */
.gu{position:relative;height:460vh;background:var(--cream);color:var(--ink);--e:0;--r:0;--a:0;--p:0}
.gu__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.gu__ghost{position:absolute;top:50%;left:0;white-space:nowrap;font:900 clamp(7rem,22vw,20rem)/1 Nunito,Rubik,sans-serif;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(213,5,32,.13);transform:translate(calc(10vw - var(--p) * 120vw),-50%);pointer-events:none;user-select:none}
.gu__head{position:absolute;top:clamp(84px,11vh,120px);left:0;right:0;text-align:center;z-index:2;padding:0 16px;opacity:calc(1 - var(--e) * .92)}
.gu__head .kicker{justify-content:center}
.gu__head h2{font-size:clamp(1.8rem,4.2vw,3.2rem);margin-top:6px}
.gu__head h2 .from{display:inline-block;transition:opacity .3s}
.gu__head h2 .to{color:var(--blue)}

/* the phone */
.gu__scene{position:relative;width:min(300px,62vw);aspect-ratio:300/620;margin-top:clamp(70px,9vh,110px);perspective:1600px;z-index:3}
.gu__phone{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateY(calc(var(--e) * -95px)) rotateX(calc(var(--e) * 14deg)) rotateY(calc(var(--e) * -10deg)) scale(calc(1 - var(--e) * .36))}
.gu__bezel{position:absolute;inset:0;border-radius:44px;background:#15171E;box-shadow:0 40px 80px rgba(40,10,10,.28);opacity:calc(1 - var(--e));transform:scale(calc(1 + var(--e) * .06))}
.gu__bezel::after{content:"";position:absolute;top:12px;left:50%;width:90px;height:24px;border-radius:999px;background:#000;translate:-50% 0}
.gu__screen{position:absolute;inset:10px;border-radius:36px;transform-style:preserve-3d}
.gu__layer{position:absolute;left:0;right:0;transform:translateY(calc(var(--e) * var(--dy, 0) * 1px)) translateZ(calc(var(--e) * var(--z) * .3px)) rotate(calc(var(--e) * var(--rot, 0) * 1deg));transition:background-color .4s ease,color .4s ease}
.gu__layer::after{content:attr(data-n);position:absolute;inset-inline-start:-46px;top:50%;translate:0 -50%;font:900 1.4rem/1 Rubik,sans-serif;color:var(--blue);opacity:var(--e)}
.gu__layer:not(.gu__base){background:#fff;border-radius:calc(var(--e) * 16px);box-shadow:0 calc(var(--e) * 18px) calc(var(--e) * 34px) rgba(40,10,10,calc(var(--e) * .22))}
.is-after .gu__layer:not(.gu__base){background:#FFFDF9}
.gu__layer.gu__grid{background:transparent}
.gu__base{inset:0;top:0;bottom:0;border-radius:36px;background:#fff;--z:0;opacity:calc(1 - var(--e));box-shadow:inset 0 0 0 calc(var(--e) * 2px) rgba(21,23,30,.12)}
.gu__base::before{content:"dice";position:absolute;inset:0;display:grid;place-items:center;font:900 3.2rem Nunito,Rubik,sans-serif;color:rgba(213,5,32,.1);opacity:var(--e)}
.is-after .gu__base{background:#FFFDF9}

/* profile layers (generic social-profile layout, no app branding) */
.gu__bar{top:34px;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font:800 .95rem Rubik,sans-serif;--z:70;--dy:-150;--rot:-2;padding:0 14px}
.gu__bar .lock{font-size:.7rem;opacity:.6}
.gu__top{top:84px;height:96px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:0 16px;--z:140;--dy:-95;--rot:1.5}
.gu__ava{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:900 2rem Nunito,Rubik,sans-serif;color:#fff;
  background:#B9BCC6;outline:3px solid #fff;box-shadow:0 0 0 6px #B9BCC6;transition:background-color .4s,box-shadow .4s}
.is-after .gu__ava{background:var(--blue);box-shadow:0 0 0 6px var(--gold)}
.gu__stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:.68rem;color:#6A6F7D}
.gu__stats b{display:block;font-size:.98rem;color:#15171E}
.gu__name{top:186px;padding:6px 16px;--z:210;--dy:-30;--rot:-1}
.gu__handle{font:900 1.15rem/1.2 Rubik,sans-serif;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;min-height:1.6em;
  border-radius:10px;transition:background-color .3s}
.gu__handle .at{color:#15171E}
.gu__handle .chars{font-variant-ligatures:none;word-break:break-all}
.gu.is-rolling .gu__handle{background:var(--gold);padding:2px 8px;margin-inline:-8px}
.gu__bio{margin-top:4px;font-size:.72rem;line-height:1.4;color:#3A3E4A;min-height:3.2em}
.gu__btns{top:262px;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px;--z:260;--dy:25;--rot:1.5}
.gu__btns span{height:28px;border-radius:8px;background:#EEF0F4;display:grid;place-items:center;font:700 .7rem Rubik,sans-serif}
.is-after .gu__btns span:first-child{background:#15171E;color:#fff}
.gu__hl{top:300px;padding:0 16px;display:flex;gap:12px;--z:300;--dy:70;--rot:-1.5;padding-block:6px}
.gu__hl i{width:40px;height:40px;border-radius:50%;background:#E6E8EE;border:2px solid #fff;box-shadow:0 0 0 2px #D6D9E0;transition:background-color .4s}
.is-after .gu__hl i:nth-child(1){background:var(--blue)} .is-after .gu__hl i:nth-child(2){background:var(--gold)}
.is-after .gu__hl i:nth-child(3){background:#15171E} .is-after .gu__hl i:nth-child(4){background:var(--cream)}
.gu__grid{top:356px;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:2px;padding:0;overflow:hidden;border-radius:0 0 36px 36px;--z:360;--dy:110;--rot:2}
.gu__grid i{background:var(--c,#ccc);transition:background-color .5s ease;position:relative}
.is-after .gu__grid i{background:var(--k,#ddd)}
.is-after .gu__grid i:nth-child(3n+2)::after{content:"";position:absolute;inset:30%;border-radius:22%;background:#fff;opacity:.9}

/* side callouts, burger style: big faded numbers + title + line */
.gu__notes{position:absolute;inset:0;pointer-events:none;z-index:4}
.gu__note{position:absolute;width:min(270px,26vw);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
.gu__note.on{opacity:1;transform:none}
.gu__note .n{display:block;font:900 clamp(3.4rem,6vw,5.4rem)/.8 Rubik,sans-serif;color:rgba(213,5,32,.14);letter-spacing:-.05em}
.gu__note h3{font-size:1.25rem;margin-top:-18px;position:relative}
.gu__note p{margin-top:6px;color:var(--muted);font-size:.92rem;line-height:1.45}
.gu__note--1{top:30%;inset-inline-start:6%} .gu__note--2{top:58%;inset-inline-start:6%}
.gu__note--3{top:30%;inset-inline-end:6%;text-align:end} .gu__note--4{top:58%;inset-inline-end:6%;text-align:end}

/* rolling die that tumbles across during the swap */
.gu__die{position:absolute;z-index:6;left:calc(-12% + var(--r) * 124%);top:44%;opacity:calc(min(var(--r) * 8, 1) * min((1 - var(--r)) * 8, 1));
  transform:rotate(calc(var(--r) * 1080deg));pointer-events:none}
.gu__die .die3d{--s:70px}

/* stamp + Dicey + CTA at the end */
.gu__stamp{position:absolute;z-index:7;top:40%;left:50%;translate:-50% -50%;font:900 clamp(2rem,5vw,3.4rem)/1 Rubik,sans-serif;color:var(--blue);
  border:5px solid var(--blue);border-radius:14px;padding:8px 18px;rotate:-12deg;background:rgba(255,255,255,.85);
  opacity:calc(var(--a) * 1.4 - .2);scale:calc(2.2 - var(--a) * 1.2);pointer-events:none;letter-spacing:-.02em}
.gu__dicey{position:absolute;z-index:6;bottom:4%;inset-inline-end:calc(50% - min(300px,62vw) / 2 - clamp(150px,16vw,230px) + 20px);width:clamp(150px,16vw,230px);
  opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 60px));pointer-events:none}
.gu__dicey img{width:100%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.18))}
.gu__cta{position:absolute;z-index:8;bottom:clamp(20px,5vh,48px);left:50%;translate:-50% 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:12px 12px 12px 22px;border-radius:999px;background:#15171E;color:#fff;box-shadow:0 18px 40px rgba(20,10,10,.25);
  opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 30px));pointer-events:none}
.gu.is-done .gu__cta{pointer-events:auto}
.gu__cta b{font-size:1.05rem} .gu__cta span{color:rgba(255,255,255,.75);font-weight:600}
.gu__progress{position:absolute;left:50%;bottom:10px;translate:-50% 0;width:120px;height:4px;border-radius:999px;background:rgba(21,23,30,.12);z-index:8;overflow:hidden}
.gu__progress i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--blue)}
.gu__hint{position:absolute;bottom:26px;left:50%;translate:-50% 0;font-weight:700;font-size:.85rem;color:var(--muted);opacity:calc(1 - var(--p) * 12);z-index:8;display:flex;gap:8px;align-items:center}

[data-theme="dark"] .gu{--ink:#15171E}
[data-theme="dark"] .gu__note p{color:#6A6F7D}

@media (max-width:900px){
  .gu{height:420vh}
  .gu__note{width:44vw}
  .gu__note--1,.gu__note--3{top:auto;bottom:18%} .gu__note--2,.gu__note--4{top:auto;bottom:4%}
  .gu__note--1{inset-inline-start:4%} .gu__note--3{inset-inline-end:4%}
  .gu__note--2{inset-inline-start:4%;display:none} .gu__note--4{display:none}
  .gu__note h3{font-size:1.02rem} .gu__note p{font-size:.8rem} .gu__note .n{font-size:3rem}
  .gu__scene{width:min(240px,56vw);margin-top:40px}
  .gu__layer::after{display:none}
  .gu__dicey{width:120px;inset-inline-end:2%;bottom:14%}
}
@media (max-width:900px) and (max-height:700px){.gu__scene{width:min(200px,48vw)}}

/* reduced motion: no pinning, just before -> after side by side */
@media (prefers-reduced-motion:reduce){
  .gu{height:auto} .gu__stage{position:relative;height:auto;padding:140px 0 80px} .gu__ghost,.gu__die,.gu__progress,.gu__hint{display:none}
}