/* 3D layer */

/* ---------- droplet ("Glowy") ---------- */
@property --gp3d-droplet-glow { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0); }

.gp3d-droplet {
  position: relative;
  display: block;
  flex: none;
  line-height: 0;
  transition: --gp3d-droplet-glow .5s cubic-bezier(.22, 1, .36, 1);
  -webkit-tap-highlight-color: transparent;
}
.gp3d-droplet canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.gp3d-droplet::before {
  content: "";
  position: absolute;
  inset: 12% 10% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gp3d-droplet-glow) 42%, transparent), transparent);
  filter: blur(12px);
  pointer-events: none;
}
/* floor shadow is rendered in 3D (realism.js contactShadow, colour-tinted) */

/* hero: beside the For You heading, stacked above it on narrow screens */
.gp3d-droplet--hero { width: clamp(160px, 26vw, 220px); aspect-ratio: 1; cursor: grab; touch-action: manipulation; }
.gp3d-droplet--hero canvas { filter: drop-shadow(0 0 22px rgba(255, 80, 170, .55)); } /* THEME-SPEC §8 Glowy glow */
.gp3d-droplet-host {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  column-gap: 20px;
  align-items: start;
}
.gp3d-droplet-host > :not(.gp3d-droplet) { grid-column: 1; }
.gp3d-droplet-host > .gp3d-droplet--hero { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
@media (max-width: 560px) {
  .gp3d-droplet-host { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .gp3d-droplet-host > .gp3d-droplet--hero { grid-column: 1; grid-row: auto; order: -1; width: 150px; margin: -8px 0 -6px -6px; }
}

/* seal: next to the signal badge in the verdict card */
.gp3d-droplet--seal { width: 88px; height: 88px; margin: -22px -10px -22px -16px; }
@media (max-width: 360px) {
  .gp3d-droplet--seal { width: 80px; height: 80px; margin: -16px -4px -16px -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gp3d-droplet { transition: none; }
  .gp3d-droplet--hero { cursor: default; }
}

/* jelly (Check-in Q2): cosmetic swatch canvas replaces the CSS blob only while live */
.tab-checkin .ck-jellybox.gp3d-jelly-live { position: relative; height: 196px; }
.tab-checkin .ck-jellybox.gp3d-jelly-live .ck-jelly { display: none; }
.gp3d-jelly-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: pointer; border-radius: inherit; }

/* swarm (Check-in results): droplet cloud above the moisture bars */
.gp3d-swarm { position: relative; border-radius: 14px; background: var(--soft); overflow: hidden; }
.gp3d-swarm-canvas { display: block; width: 100%; height: 138px; }
.gp3d-swarm-legend { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 0 8px; text-align: center; font-size: .75rem; font-weight: 650; color: var(--mute); }
.gp3d-swarm-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 0; }
.gp3d-swarm-fly { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }