/* ============================================================
   Goose — interactive product guide
   A pixel goose-in-shades hops around a product screenshot and
   explains each part. Guided tour + clickable hotspots. The rest
   of the shot dims to spotlight the active region; a caption card
   appears in the corner farthest from the goose.
   Uses each page's own dark tokens (--emerald,--emerald-bright,
   --ink,--ink-2,--ink-3,--card,--card-line,--porcelain,--body-text,
   --label-text,--gold,--sage,--shadow,--soft-shadow).
   ============================================================ */

.gg{margin:1.7rem 0 1rem;}
.gg-frame{border:1px solid var(--card-line);border-radius:14px;overflow:hidden;
  box-shadow:var(--soft-shadow);background:linear-gradient(var(--card),var(--ink-2));}
.gg-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--ink-3);
  border-bottom:1px solid var(--card-line);}
.gg-bar .d{width:11px;height:11px;border-radius:50%;flex:none;}
.gg-bar .t{font-family:"Spline Sans Mono";font-size:12px;letter-spacing:.08em;color:var(--label-text);margin-left:6px;}
.gg-bar .live{margin-left:auto;font-family:"Spline Sans Mono";font-size:11px;letter-spacing:.1em;
  color:var(--emerald-bright);display:flex;align-items:center;gap:6px;}
.gg-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--emerald-bright);}

/* the screenshot + overlay layer */
.gg-shot{position:relative;overflow:hidden;line-height:0;}
.gg-shot img{display:block;width:100%;height:auto;}
.gg-shot::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;
  transition:opacity .45s ease;pointer-events:none;z-index:2;}
.gg.touring .gg-shot::after{opacity:.4;}

/* numbered hotspot pins */
.gg-pin{position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:27px;height:27px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:"Spline Sans Mono";font-weight:700;font-size:12px;line-height:1;
  color:#0a140f;background:var(--emerald-bright);
  border:2px solid color-mix(in oklch,var(--ink) 45%,transparent);
  transition:transform .25s ease,opacity .35s ease,box-shadow .3s ease;}
.gg-pin::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--emerald-bright);opacity:.5;animation:ggpulse 2.4s ease-out infinite;}
@keyframes ggpulse{0%{transform:scale(.7);opacity:.55}70%{opacity:0}100%{transform:scale(1.9);opacity:0}}
.gg-pin:hover{transform:translate(-50%,-50%) scale(1.16);}
.gg.touring .gg-pin{opacity:.4;}
.gg.touring .gg-pin.active{opacity:1;transform:translate(-50%,-50%) scale(1.2);z-index:6;
  box-shadow:0 0 24px 3px color-mix(in oklch,var(--emerald-bright) 65%,transparent);}
.gg.touring .gg-pin.active::before{border-color:var(--gold);}

/* the pixel goose guide */
.gg-goose{position:absolute;left:84%;top:86%;z-index:7;transform:translate(-50%,-100%);
  transition:left .6s cubic-bezier(.34,1.4,.5,1),top .6s cubic-bezier(.34,1.4,.5,1);
  pointer-events:none;filter:drop-shadow(2px 4px 0 var(--shadow));will-change:left,top;}
.gg-goose.flip{transform:translate(-50%,-100%) scaleX(-1);}
.gg-goose svg{display:block;image-rendering:pixelated;width:54px;height:54px;
  animation:ggbob 1.05s ease-in-out infinite alternate;}
@keyframes ggbob{from{transform:translateY(-2px)}to{transform:translateY(3px)}}

/* spotlight caption card (corner, farthest from goose) */
.gg-cap{position:absolute;z-index:8;width:min(300px,64%);
  background:color-mix(in oklch,var(--ink-2) 94%,transparent);
  backdrop-filter:blur(3px);
  border:1px solid var(--card-line);border-radius:12px;padding:14px 16px 15px;
  box-shadow:0 18px 40px -18px oklch(0.05 0.02 168 / .95);
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;}
.gg.touring .gg-cap{opacity:1;transform:none;}
.gg-cap.tl{top:16px;left:16px;} .gg-cap.tr{top:16px;right:16px;}
.gg-cap.bl{bottom:16px;left:16px;} .gg-cap.br{bottom:16px;right:16px;}
.gg-cap .n{font-family:"Spline Sans Mono";font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--emerald-bright);display:block;margin-bottom:6px;}
.gg-cap h4{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.05rem;letter-spacing:-0.01em;
  color:var(--porcelain);margin:0 0 5px;line-height:1.2;}
.gg-cap p{font-family:"Hanken Grotesk";font-size:.92rem;line-height:1.5;color:var(--body-text);margin:0;}

/* controls */
.gg-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px;}
.gg-start{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:"Hanken Grotesk";font-weight:700;font-size:.95rem;letter-spacing:.2px;
  padding:12px 19px;border-radius:10px;border:1px solid transparent;
  background:var(--emerald);color:#0a140f;transition:transform .15s ease,background .2s ease;}
.gg-start:hover{transform:translateY(-1px);background:var(--emerald-bright);}
.gg-start svg{image-rendering:pixelated;width:26px;height:26px;}
.gg-nav{display:none;align-items:center;gap:8px;}
.gg.touring .gg-start{display:none;}
.gg.touring .gg-nav{display:flex;}
.gg-btn{cursor:pointer;font-family:"Spline Sans Mono";font-size:.82rem;font-weight:500;
  padding:10px 15px;border-radius:9px;border:1px solid var(--card-line);
  background:var(--ink-2);color:var(--porcelain);transition:border-color .2s ease,opacity .2s ease;}
.gg-btn:hover:not(:disabled){border-color:var(--emerald-bright);}
.gg-btn:disabled{opacity:.35;cursor:default;}
.gg-btn.primary{background:var(--emerald);color:#0a140f;border-color:transparent;font-weight:600;}
.gg-prog{font-family:"Spline Sans Mono";font-size:.82rem;color:var(--label-text);letter-spacing:.05em;min-width:46px;text-align:center;}
.gg-hint{font-family:"Spline Sans Mono";font-size:.77rem;color:var(--label-text);letter-spacing:.03em;}

/* no-JS / reduced-motion labelled list fallback */
.gg-list{margin-top:16px;list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.gg-list li{background:var(--ink-2);border:1px solid var(--card-line);border-radius:11px;padding:13px 15px;}
.gg-list .n{font-family:"Spline Sans Mono";font-size:12px;color:var(--emerald-bright);font-weight:600;}
.gg-list h4{font-family:"Bricolage Grotesque";font-weight:800;font-size:.98rem;color:var(--porcelain);margin:5px 0 3px;}
.gg-list p{font-family:"Hanken Grotesk";font-size:.86rem;color:var(--body-text);margin:0;line-height:1.45;}
.js .gg-list{display:none;}   /* hidden when JS drives the interactive tour */

@media (prefers-reduced-motion:reduce){
  .gg-goose{animation:none;transition:none;}
  .gg-goose svg{animation:none;}
  .gg-pin::before{animation:none;}
}
@media (max-width:640px){
  .gg-goose svg{width:42px;height:42px;}
  .gg-cap{width:min(240px,72%);font-size:.86rem;}
}