/* Glow Labs · Concept 01 · Goccia, la navigazione liquida */
.stage{background:var(--ink);padding:clamp(40px,7vw,96px) var(--gut);display:flex;flex-direction:column;align-items:center;gap:28px;
  background-image:radial-gradient(circle at 50% 40%,rgba(243,240,234,.06),transparent 60%)}
.stage-cap{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,240,234,.55);text-align:center}

/* telefono */
.gc{--acc:#e40d7e;--acc-ink:#fff;position:relative;width:min(100%,380px,calc((100svh - 150px) / 2));aspect-ratio:380/760;border-radius:46px;padding:12px;
  background:#1a1b20;box-shadow:0 0 0 1.5px rgba(243,240,234,.12),0 40px 80px -20px rgba(0,0,0,.7)}
.gc-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#101116;color:#f3f0ea;isolation:isolate;
  display:flex;flex-direction:column}
.gc-screen:before{content:"";position:absolute;inset:-20%;z-index:-1;
  background:radial-gradient(circle at 50% 78%,color-mix(in srgb,var(--acc) 34%,transparent),transparent 46%),
             radial-gradient(circle at 15% 5%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 40%);
  transition:background .6s}
.gc-status{display:flex;justify-content:space-between;padding:16px 26px 0;font:600 13px/1 var(--sans);opacity:.85}
.gc-brand{display:flex;align-items:center;gap:8px;padding:34px 28px 0;font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.gc-brand i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);transition:background .4s,box-shadow .4s}
.gc-copy{padding:18px 28px 0}
.gc-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(46px,14vw,60px);line-height:1;letter-spacing:-.01em;min-height:1.05em;white-space:nowrap}
.gc-title span{display:inline-block}
.gc-sub{margin-top:10px;font-size:15px;line-height:1.45;color:rgba(243,240,234,.7);max-width:260px}
.gc-items{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:10px;padding:24px 28px 0;align-content:start;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.gc-items figure{position:relative;margin:0;border-radius:16px;overflow:hidden;background:rgba(243,240,234,.06);
  border:1px solid rgba(243,240,234,.08);transition:transform .55s cubic-bezier(.3,1.4,.5,1) calc(var(--i)*55ms),opacity .4s calc(var(--i)*55ms),filter .4s calc(var(--i)*55ms)}
.gc-items figure:nth-child(2n){transform:translateY(22px)}
.gc-items img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.gc-items figcaption{position:absolute;left:7px;right:7px;bottom:7px;display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:6px 8px;border-radius:10px;background:rgba(14,15,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:600 10.5px/1.2 var(--sans);color:#f3f0ea}
.gc-items figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-items figcaption b{font-weight:500;opacity:.8;white-space:nowrap}
.gc[data-swap] .gc-items figure{opacity:0;filter:blur(6px);transform:translateY(14px) scale(.96);transition-delay:0s;transition-duration:.18s}
.gc[data-swap] .gc-items figure:nth-child(2n){transform:translateY(36px) scale(.96)}
.gc-hint{text-align:center;font-size:12.5px;color:rgba(243,240,234,.5);padding:0 20px 14px}

/* barra */
.gc-bar{position:relative;margin:0 14px 18px;height:76px;border-radius:26px;background:rgba(10,11,14,.82);
  box-shadow:inset 0 0 0 1px rgba(243,240,234,.08);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.gc-bar.drag{cursor:grabbing}
.gc-goo{position:absolute;inset:0;filter:url(#goo);pointer-events:none;border-radius:26px;overflow:hidden}
.gc-blob{position:absolute;top:50%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--acc);
  transition:background .35s;will-change:transform}
.gc-blob.a{opacity:.98}
.gc-ripples{position:absolute;inset:0;pointer-events:none;overflow:visible}
.gc-ripple{position:absolute;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid var(--acc);
  animation:gcRipple .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes gcRipple{from{transform:scale(.9);opacity:.9}to{transform:scale(1.9);opacity:0}}
.gc-tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);height:100%}
.gc-tab{display:grid;place-items:center;color:rgba(243,240,234,.62);border-radius:20px;transition:color .3s}
.gc-tab svg{width:24px;height:24px;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.gc-tab[aria-selected=true]{color:var(--acc-ink)}
.gc-tab[aria-selected=true] svg{transform:scale(1.08)}
.gc-tab:focus-visible{outline:2px solid #f3f0ea;outline-offset:-6px}

/* modalità scheletro: niente filtro, si vedono le due gocce */
.gc.skeleton .gc-goo{filter:none}
.gc.skeleton .gc-blob{background:transparent;border:2px dashed var(--acc)}
.gc.skeleton .gc-blob.b{border-style:solid}
.gc.skeleton .gc-tab[aria-selected=true]{color:#f3f0ea}

/* controlli sotto la demo */
.gc-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gc-controls button{font:600 14px/1 var(--sans);color:#f3f0ea;padding:12px 18px;border-radius:999px;border:1.5px solid rgba(243,240,234,.25);transition:background .2s,border-color .2s,color .2s}
.gc-controls button:hover{border-color:#f3f0ea}
.gc-controls button[aria-pressed=true]{background:#f3f0ea;color:var(--ink);border-color:#f3f0ea}

@media (prefers-reduced-motion:reduce){.gc-ripple{display:none}.gc-items figure{transition:none}}
/* telefono stretto: nome e prezzo su due righe */
.gc{container-type:inline-size}
@container (max-width:340px){.gc-items figcaption{flex-direction:column;align-items:flex-start;gap:2px;font-size:10px}}