body {
  font-family: var(--font-mono);
  color: var(--text-primary);
  background: var(--bg-primary);
  position: relative;
}

/* Full-viewport canvas */
#sceneCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
}

/* Centered whale logo overlay */
.scene-whale {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-ui);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}

.scene-whale.visible {
  opacity: 1;
}

.scene-whale-inner {
  position: relative;
  animation: whaleBob 4s ease-in-out infinite;
}

@keyframes whaleBob {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  30% { transform: translateY(-5px) rotate(0.3deg); }
  60% { transform: translateY(3px) rotate(-0.4deg); }
  80% { transform: translateY(-2px) rotate(0.2deg); }
}

/* Glass sphere */
.glass-sphere {
  position: relative;
  width: clamp(280px, 35vw, 440px);
  height: clamp(280px, 35vw, 440px);
  border-radius: 50%;
}

/* Soap-bubble iridescent surface — thin-film interference */
.glass-sphere-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background:
    /* Inner swirl: lighter, slower */
    radial-gradient(
      circle at 30% 30%,
      rgba(255, 220, 240, 0.11) 0%,
      rgba(180, 220, 255, 0.09) 25%,
      transparent 55%
    ),
    /* Iridescent conic ring — classic soap colors */
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 160, 210, 0.24) 0deg,
      rgba(160, 210, 255, 0.26) 50deg,
      rgba(160, 255, 225, 0.22) 110deg,
      rgba(255, 235, 160, 0.25) 170deg,
      rgba(255, 165, 190, 0.26) 220deg,
      rgba(190, 160, 255, 0.24) 280deg,
      rgba(160, 225, 255, 0.26) 330deg,
      rgba(255, 160, 210, 0.24) 360deg
    );
  /* Push the iridescence toward the rim where it's strongest IRL */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 24%, #000 74%, #000 100%);
          mask: radial-gradient(circle at 50% 50%, transparent 24%, #000 74%, #000 100%);
  mix-blend-mode: screen;
  animation: soap-swirl 18s linear infinite, soap-shimmer 8s ease-in-out infinite;
}

/* Second swirly layer for depth — counter-rotates */
.glass-sphere::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(255, 190, 230, 0.18) 0deg,
    rgba(190, 235, 255, 0.19) 90deg,
    rgba(215, 255, 215, 0.16) 180deg,
    rgba(255, 225, 180, 0.18) 270deg,
    rgba(255, 190, 230, 0.18) 360deg
  );
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 33%, #000 83%);
          mask: radial-gradient(circle at 50% 50%, transparent 33%, #000 83%);
  mix-blend-mode: screen;
  filter: blur(4px);
  animation: soap-swirl-rev 28s linear infinite, soap-shimmer-rev 11s ease-in-out infinite;
}

/* Third shimmer layer — faster, smaller, drifting highlights for live "wobble" */
.glass-sphere::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 200, 240, 0.20) 0%, transparent 28%),
    radial-gradient(circle at 78% 38%, rgba(180, 240, 255, 0.18) 0%, transparent 26%),
    radial-gradient(circle at 32% 78%, rgba(220, 255, 200, 0.16) 0%, transparent 30%),
    radial-gradient(circle at 70% 72%, rgba(255, 230, 180, 0.17) 0%, transparent 28%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 90%);
          mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 90%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: soap-drift 11s ease-in-out infinite, soap-hue 14s linear infinite;
}

@keyframes soap-swirl {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes soap-swirl-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* Shimmer pulses brightness so the iridescence "breathes" */
@keyframes soap-shimmer {
  0%, 100% { filter: hue-rotate(0deg)   saturate(1.02) brightness(1); }
  50%      { filter: hue-rotate(25deg)  saturate(1.22) brightness(1.10); }
}

@keyframes soap-shimmer-rev {
  0%, 100% { filter: blur(4px) hue-rotate(0deg)   saturate(1.02); }
  50%      { filter: blur(4px) hue-rotate(-30deg) saturate(1.25); }
}

/* Inner drift moves the highlight blobs and slowly rolls hue */
@keyframes soap-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(2%, -1.5%) scale(1.04); }
  66%  { transform: translate(-1.5%, 2%) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes soap-hue {
  from { filter: blur(6px) hue-rotate(0deg); }
  to   { filter: blur(6px) hue-rotate(360deg); }
}

.glass-sphere img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Top-left specular highlight — soap bubble reflection */
.glass-sphere-highlight {
  position: absolute;
  top: 8%;
  left: 12%;
  width: 30%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 70%
  );
  transform: rotate(-15deg);
  z-index: 2;
  pointer-events: none;
}

/* Rim light / edge refraction — soap bubble outline */
.glass-sphere-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(220, 200, 255, 0.25);
  box-shadow:
    inset 0 0 28px rgba(255, 200, 220, 0.11),
    inset 0 0 70px rgba(180, 230, 255, 0.085),
    0 0 26px rgba(220, 180, 255, 0.12);
  animation: soap-rim 10s ease-in-out infinite;
}

@keyframes soap-rim {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(35deg); }
}

/* Shadow under the sphere */
.glass-sphere-shadow {
  width: 50%;
  height: 8px;
  margin: 6px auto 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(126, 184, 212, 0.08) 0%,
    transparent 70%
  );
  filter: blur(3px);
}

/* Rain droplets running down the whale */
.whale-droplet {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(126, 184, 212, 0.3), rgba(126, 184, 212, 0));
  pointer-events: none;
  animation: dropletRun 1.5s ease-in forwards;
}

@keyframes dropletRun {
  0% {
    height: 0px;
    opacity: 0.4;
    transform: translateY(0);
  }
  20% {
    height: 8px;
    opacity: 0.3;
  }
  100% {
    height: 14px;
    opacity: 0;
    transform: translateY(60px);
  }
}

/* Rain splash dot on whale surface */
.whale-splash {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(126, 184, 212, 0.35);
  pointer-events: none;
  animation: splashPop 0.4s ease-out forwards;
}

@keyframes splashPop {
  0% { transform: scale(0); opacity: 0.5; }
  50% { transform: scale(1.5); opacity: 0.2; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Gradient overlay for text readability */
.scene-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-overlay);
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(26, 26, 30, 0.6) 100%);
}

/* Top bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  pointer-events: none;
}

.topbar > * {
  pointer-events: auto;
}

.logo {
  font-family: 'Quicksand', var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.topbar-nav {
  display: flex;
  gap: var(--space-md);
}

.nav-btn {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.nav-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* Top project nav (hover reveal) */
.top-project-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-lg);
  background: rgba(15, 15, 18, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s ease;
  pointer-events: none;
  flex-wrap: wrap;
}

.top-project-nav.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.top-nav-tab {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.top-nav-tab:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.top-nav-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* SoundPower — lime green when selected (matches other tabs' scene-color active) */
.top-nav-tab[data-project-id="soundpower"].active {
  color: #B2FF00 !important;
  border-color: #B2FF00 !important;
  background: rgba(178, 255, 0, 0.08);
  box-shadow:
    0 0 14px rgba(178, 255, 0, 0.45),
    inset 0 0 8px rgba(178, 255, 0, 0.15);
  text-shadow: 0 0 8px rgba(178, 255, 0, 0.55);
}

/* Audio toggle */
.audio-toggle {
  position: fixed;
  top: var(--space-md);
  right: var(--space-lg);
  z-index: var(--z-nav);
  font-size: 1.2rem;
  opacity: 0.5;
  transition: opacity var(--t-fast);
}

.audio-toggle:hover {
  opacity: 1;
}

/* Hint bar */
.hint-bar {
  position: fixed;
  bottom: var(--space-md);
  left: 0;
  right: 0;
  z-index: var(--z-ui);
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  font-size: var(--text-label);
  color: var(--text-tertiary);
  pointer-events: none;
  opacity: 0.6;
}

/* Desktop layout */
.dial-container {
  position: fixed;
  right: 6%;
  top: auto;
  bottom: 8%;
  transform: none;
  z-index: var(--z-dial);
}

.project-panel {
  position: fixed;
  left: 6%;
  top: auto;
  bottom: 8%;
  transform: none;
  max-width: 420px;
  z-index: var(--z-panel);
}

/* Tablet */
@media (max-width: 1024px) {
  .dial-container {
    right: auto;
    left: 50%;
    top: 80px;
    bottom: auto;
    transform: translateX(-50%);
  }

  .project-panel {
    left: 5%;
    right: 5%;
    top: auto;
    bottom: var(--space-xl);
    transform: none;
    max-width: none;
    text-align: center;
  }

  .hint-bar {
    bottom: var(--space-sm);
  }
}

/* Mobile */
/* Mobile tab carousel */
.mobile-tab-carousel {
  display: none;
}

@media (max-width: 768px) {
  .topbar {
    padding: var(--space-sm) var(--space-md);
  }

  .dial-container {
    display: none !important;
  }

  .top-project-nav {
    display: none !important;
  }

  .mobile-tab-carousel {
    display: block;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 50;
    height: 46px;
  }

  .mobile-tab-track {
    display: flex;
    align-items: center;
    height: 34px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* side padding lets first/last tab center */
    padding: 0 35%;
    gap: 10px;
    box-sizing: content-box;
  }

  .mobile-tab-track::-webkit-scrollbar {
    display: none;
  }

  .mobile-tab-item {
    flex: 0 0 30%;
    scroll-snap-align: center;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.4;
    transition: opacity 0.25s, color 0.25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
  }

  .mobile-tab-item.active {
    color: #fff;
    opacity: 1;
  }

  /* Fade edges so only center tab reads clearly */
  .mobile-tab-carousel::before,
  .mobile-tab-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    z-index: 1;
    pointer-events: none;
  }
  .mobile-tab-carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
  }
  .mobile-tab-carousel::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
  }

  .mobile-tab-dots {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    z-index: 2;
  }

  .mobile-tab-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.25s, transform 0.25s;
  }

  .mobile-tab-dot.active {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.3);
  }

  .project-panel {
    bottom: var(--space-lg);
    left: var(--space-md);
    right: var(--space-md);
    top: 98px;
  }

  .hint-bar {
    display: none;
  }
}