/* Home page — interactive liquid-glass island playground.
 * Three islands (StarGear root + Products + Contacts leaves) connected
 * by SVG strings, gentle idle drift, click to navigate, drag to fling.
 */

.sg-stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin-top: calc(-1 * (52px + 16px + var(--sg-s-5)));
  margin-left: calc(50% - 50vw);
  background: #000;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* SVG layer for the connecting strings */
.sg-stage__strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sg-string {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
}

/* Island base — liquid glass pill, JS positions via translate3d */
.sg-island {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.55rem;
  border-radius: 9999px;
  text-decoration: none;
  color: var(--sg-text);
  font-family: var(--sg-font-display);
  font-weight: 600;
  white-space: nowrap;
  cursor: grab;
  z-index: 2;

  background: rgba(22, 22, 22, 0.55);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 14px 44px rgba(0, 0, 0, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.03);

  transition: box-shadow 220ms ease, border-color 220ms ease, transform 0s;
  will-change: transform;
}

.sg-island:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--sg-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 18px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.sg-island[data-grabbed="true"] {
  cursor: grabbing;
  border-color: rgba(255, 255, 255, 0.28);
}

/* Child islands (Email, X) are hidden until the parent (Contacts) expands.
 * Same size as the leaf islands, just fade in. */
.sg-island--child {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.sg-island--child[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}

.sg-string--child {
  opacity: 0;
  transition: opacity 240ms ease;
}
.sg-string--child[data-active="true"] {
  opacity: 1;
}

/* Toast — top-center liquid glass pill that fades in for 2 seconds */
.sg-toast {
  position: fixed;
  top: 28px;
  left: 50%;
  z-index: 1000;
  padding: 0.65rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--sg-font-display);
  font-size: var(--sg-fs-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sg-text);
  background: rgba(22, 22, 22, 0.62);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 36px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-12px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
  white-space: nowrap;
}
.sg-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sg-island__logo {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.sg-island__label {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  pointer-events: none;
}

/* StarGear root — slightly larger label + logo */
.sg-island--root .sg-island__label { font-size: 1.5rem; }
.sg-island--root .sg-island__logo  { width: 36px; height: 36px; }
.sg-island--root { padding: 1.1rem 1.9rem; }

/* Hint at the bottom of the stage */
.sg-stage__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sg-s-5);
  text-align: center;
  font-size: var(--sg-fs-tiny);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sg-text-3);
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  transition: opacity 600ms ease;
}

.sg-stage[data-hint-dismissed="true"] .sg-stage__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sg-island { transition: none; }
  .sg-stage__hint { display: none; }
}

@media (max-width: 720px) {
  .sg-island--root .sg-island__label { font-size: 1.25rem; }
  .sg-island__label { font-size: 0.95rem; }
  .sg-island { padding: 0.75rem 1.2rem; }
  .sg-island--root { padding: 0.85rem 1.4rem; }
}