/* "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:170vh;background-color:var(--cream);color:var(--ink);--e:0;--r:0;--a:0;--p:0;--pw:min(300px,62vw,calc((100svh - 330px) * .4839));
  background-image:radial-gradient(circle,rgba(17,17,17,.075) 2.4px,transparent 3px);background-size:34px 34px}
.gu__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.6vh,30px);padding:clamp(64px,8vh,96px) 16px clamp(92px,12vh,124px)}
.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(11,11,12,.13);transform:translate(calc(10vw - var(--p) * 120vw),-50%);pointer-events:none;user-select:none}
.gu__head{position:relative;text-align:center;z-index:2;opacity:calc(1 - var(--e) * .92)}
.gu__head .kicker{justify-content:center}
.gu__head h2{font-size:clamp(1.5rem,min(4vw,5.2vh),3rem);margin-top:4px}
.gu__head h2 .from{display:inline-block;transition:opacity .3s}
.gu__head h2 .to{color:var(--blue)}

/* the phone */
.gu__scene{position:relative;flex:none;width:var(--pw);aspect-ratio:300/620;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:#111111;box-shadow:0 40px 80px rgba(0,0,0,.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(0,0,0,calc(var(--e) * .22))}
.is-after .gu__layer:not(.gu__base){background:#FFFFFF}
.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(17,17,17,.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(11,11,12,.1);opacity:var(--e)}
.is-after .gu__base{background:#FFFFFF}

/* profile layers: laid out like a real mobile profile screen. Sizes in cqw of .gu__scene so it scales on phones. */
.gu__scene{container-type:inline-size}
.gu__screen{font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#000;overflow:visible}
.gu__screen i{font-style:normal}
.gu__bar{top:0;height:24cqw;padding:2.6cqw 6cqw 0;--z:70;--dy:-150;--rot:-2}
.gu__layer.gu__bar:not(.x){border-radius:36px 36px calc(var(--e) * 16px) calc(var(--e) * 16px)}
.gu__status{display:flex;justify-content:space-between;align-items:center;height:7cqw;font-size:4.2cqw;padding:0 2cqw}
.gu__status span{display:flex;gap:1.6cqw;font-size:3.4cqw}
.gu__headrow{display:flex;align-items:center;gap:3cqw;height:13cqw;font-size:5.6cqw}
.gu__uname{flex:1;min-width:0;font-weight:700;font-size:5.6cqw;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gu__uname .bar-handle{display:inline-block;border-radius:2cqw;padding:0 1cqw;margin-inline:-1cqw;transition:background-color .3s;font-variant-ligatures:none}
.gu.is-rolling .gu__uname .bar-handle{background:var(--gold)}
.gu__hicons{display:flex;gap:5cqw}
.gu__top{top:24cqw;height:27cqw;display:grid;grid-template-columns:auto 1fr;gap:5cqw;align-items:center;padding:0 5cqw;--z:140;--dy:-95;--rot:1.5}
.gu__ring{width:25cqw;height:25cqw;border-radius:50%;padding:.9cqw;background:#DBDBDB;display:grid}
.is-after .gu__ring{background:conic-gradient(from 210deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75)}
.gu__ava{border-radius:50%;border:1cqw solid #fff;display:grid;place-items:center;font:700 9cqw/1 Rubik,sans-serif;color:rgba(255,255,255,.9);
  background:linear-gradient(160deg,#B8C4CF,#8C8577 60%,#6E6A5E)}
.is-after .gu__ava{background:linear-gradient(160deg,#E8E8E8,#0B0B0C);color:#fff}
.gu__stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:3.9cqw;color:#000;line-height:1.25}
.gu__stats b{display:block;font-size:5.2cqw;font-weight:700}
.gu__name{top:52cqw;padding:1cqw 5cqw 2cqw;--z:210;--dy:-30;--rot:-1;font-size:4.1cqw;line-height:1.35}
.gu__dname{font-weight:700}
.gu__cat{color:#737373}
.gu__bio{min-height:2.7em}
.gu__link{color:#00376B;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gu__link i{font-size:.85em;rotate:-45deg}
.gu__btns{top:87cqw;padding:1.5cqw 5cqw;display:grid;grid-template-columns:1fr 1fr auto;gap:2cqw;--z:260;--dy:25;--rot:1.5}
.gu__btns span{height:10cqw;border-radius:3cqw;background:#EFEFEF;display:grid;place-items:center;font-weight:600;font-size:4.1cqw}
.gu__btns .b1{background:#0095F6;color:#fff}
.gu__btns .b3{width:10cqw;font-size:3.6cqw}
.gu__hl{top:101cqw;padding:2cqw 5cqw;display:flex;gap:4.4cqw;--z:300;--dy:70;--rot:-1.5}
.gu__hl span{display:grid;justify-items:center;gap:1.4cqw;width:16cqw}
.gu__hl i{width:16cqw;height:16cqw;border-radius:50%;background:#F3F3F3;border:.9cqw solid #fff;box-shadow:0 0 0 .5cqw #DBDBDB;display:grid;place-items:center;font-size:6cqw}
.gu__hl em{font-style:normal;font-size:3.3cqw;white-space:nowrap}
.is-after .gu__hl span:nth-child(1) i{background:#0B0B0C} .is-after .gu__hl span:nth-child(2) i{background:#E8E8E8}
.is-after .gu__hl span:nth-child(3) i{background:#111111} .is-after .gu__hl span:nth-child(4) i{background:#F3F3F3}
.is-after .gu__hl i{font-size:0}
.gu__grid{top:127cqw;bottom:15cqw;padding:0;overflow:hidden;--z:360;--dy:110;--rot:2;display:flex;flex-direction:column}
.gu__tabs{display:grid;grid-template-columns:repeat(3,1fr);height:10cqw;flex:none;font-size:5cqw;color:#A8A8A8;background:#fff}
.gu__tabs i{display:grid;place-items:center;border-bottom:.4cqw solid #DBDBDB}
.gu__tabs i.on{color:#000;border-bottom:.7cqw solid #000}
.gu__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6cqw;padding-top:.6cqw}
.gu__tiles i{aspect-ratio:3/4;position:relative;
  background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.35),transparent 45%),linear-gradient(165deg,var(--c,#ccc),color-mix(in srgb,var(--c,#ccc) 55%,#3B3428))}
.is-after .gu__tiles i{background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.22),transparent 42%),linear-gradient(165deg,var(--k,#ddd),color-mix(in srgb,var(--k,#ddd) 70%,#000))}
.is-after .gu__tiles i:nth-child(3n+2)::after{content:"";position:absolute;inset:32%;border-radius:22%;background:#fff;opacity:.9}
.gu__tiles b{position:absolute;top:2cqw;inset-inline-end:2cqw;font-size:3.4cqw;color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.4))}
/* bottom tab bar on the base screen */
.gu__nav{position:absolute;left:0;right:0;bottom:0;height:15cqw;padding-bottom:3cqw;display:flex;justify-content:space-around;align-items:center;
  font-size:5.6cqw;border-top:.4cqw solid #EFEFEF;border-radius:0 0 36px 36px;background:#fff}
.is-after .gu__nav{background:#FFFFFF}
.gu__me{width:6.4cqw;height:6.4cqw;border-radius:50%;background:linear-gradient(160deg,#B8C4CF,#6E6A5E);outline:.5cqw solid #000;outline-offset:.5cqw}
.is-after .gu__me{background:linear-gradient(160deg,#E8E8E8,#0B0B0C)}

/* 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(11,11,12,.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:38%;left:calc(50% - var(--pw) / 2 - 24px);translate:-100% -50%;font:900 clamp(1.6rem,3.4vw,2.8rem)/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% - var(--pw) / 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:#111111;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.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(17,17,17,.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:#111111}
[data-theme="dark"] .gu__note p{color:#6B6B6B}

@media (max-width:900px){
  .gu{height:150vh;--pw:min(230px,56vw,calc((100svh - 360px) * .4839))}
  .gu__stamp{display:none}
  .gu__cta{flex-wrap:nowrap;gap:10px;padding:8px 8px 8px 16px;white-space:nowrap;font-size:.85rem;max-width:calc(100vw - 32px)}
  .gu__cta .pill{padding:0 14px;white-space:nowrap}
  .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__layer::after{display:none}
  .gu__dicey{width:120px;inset-inline-end:2%;bottom:14%}
}


/* 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}
}

/* ---- touches: Dicey avatar + Dicey posts after the swap, and the "username changed" banner ---- */
.gu__ava{position:relative;overflow:hidden}
.gu__ava img{position:absolute;inset:-6% -6% auto;width:112%;opacity:0;transition:opacity .45s ease;object-fit:cover}
.gu__ava em{font-style:normal}
.is-after .gu__ava img{opacity:1}
.is-after .gu__ava{background:var(--gold)}
.gu__tiles i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transform:scale(1.15);transition:opacity .5s ease,transform .6s ease}
.is-after .gu__tiles i img{opacity:1;transform:none}
.is-after .gu__tiles i:nth-child(3n+2)::after{display:none}
.gu__tiles i b{z-index:1}
.gu__notif{position:absolute;z-index:6;left:5%;right:5%;top:3.5%;display:flex;gap:3cqw;align-items:center;padding:3cqw 3.6cqw;border-radius:5.5cqw;
  background:rgba(250,250,250,.94);box-shadow:0 10px 30px rgba(0,0,0,.18);font:400 3.9cqw/1.3 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#000;
  opacity:var(--a);transform:translateY(calc((1 - var(--a)) * -40%)) scale(calc(.94 + var(--a) * .06));pointer-events:none}
.gu__notif b{font-weight:700} .gu__notif small{color:#737373;margin-inline-start:2cqw;font-size:3.4cqw}
.gu__notif-ic{flex:none;width:9cqw;height:9cqw;border-radius:2.6cqw;display:grid;place-items:center;color:#fff;font-size:5.4cqw;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}