/* Splash screen */
.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-splash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity 0.6s var(--ease-out);
}

.splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-sphere {
  opacity: 0;
  animation: splashFadeIn 0.8s var(--ease-out) 0.1s forwards,
             whaleBob 4s ease-in-out 0.9s infinite;
}

@keyframes splashFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portal flash */
.portal-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0;
}

/* Scene fade overlay for transitions */
.scene-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0;
}

/* Contact modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal) var(--ease-out);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .splash-bar,
  .splash-status {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .splash {
    transition: none;
  }

  .portal-flash {
    display: none;
  }

  .scene-fade {
    transition: opacity 0.1s;
  }

  .dial-wrapper::after {
    animation: none;
    opacity: 0;
  }
}

/* No WebGL fallback backgrounds */
body.no-webgl {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(126, 184, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(232, 160, 180, 0.06) 0%, transparent 50%),
    var(--bg-primary);
}

body.no-webgl #sceneCanvas {
  display: none;
}

body.no-webgl .scene-overlay {
  background:
    radial-gradient(ellipse at center, transparent 20%, var(--bg-primary) 80%);
}