/* ============================================
   Path Transition Overlay
   ============================================ */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.transition-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.transition-overlay canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.transition-content {
  position: absolute;
  inset: 0;
}

/* Homescreen zoom-out animation */
.homescreen.zooming {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1s ease;
  position: relative;
  z-index: 1;
}

.homescreen.zooming.zoom-forest {
  transform: scale(3);
  transform-origin: 18% 25%;
  filter: blur(4px);
}

.homescreen.zooming.zoom-ocean {
  transform: scale(4.5);
  transform-origin: 85% 55%;
  filter: blur(6px) brightness(0.7) saturate(1.4);
}

.homescreen.zooming.zoom-tech {
  transform: scale(6);
  transform-origin: 27% 68%;
  filter: blur(6px) brightness(0.6);
}

.homescreen.zooming.zoom-mind {
  transform: scale(3);
  transform-origin: 48% 28%;
  filter: blur(4px);
}

/* Forest transition layers */
.transition-trees {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.transition-trees .tree-svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.transition-trees .tree-svg.visible { opacity: 1; }

.transition-trees .tree-svg:nth-child(1) { fill: var(--forest-dark); z-index: 3; }
.transition-trees .tree-svg:nth-child(2) { fill: var(--forest-mid); z-index: 2; transform: scale(1.1); }
.transition-trees .tree-svg:nth-child(3) { fill: var(--forest-light); z-index: 1; transform: scale(1.2); opacity: 0.6; }

/* Ocean dive transition — diagonal water gush + bubbles */
.ocean-dive-container {
  position: absolute;
  inset: 0;
}

/* Wave layers — JS-driven clip-path animation (sine wave rise) */
.ocean-wave-layer {
  position: absolute;
  inset: 0;
  clip-path: polygon(0% 120%, 100% 120%, 100% 120%, 0% 120%);
  will-change: clip-path;
}

/* Bubble canvas on top */
.ocean-dive-bubble-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Mind iris zoom */
.transition-iris {
  position: absolute;
  inset: 0;
  background: var(--mind-deep);
  clip-path: circle(0% at 48% 28%);
  transition: clip-path 1.5s var(--ease-out);
}

.transition-iris.expanding {
  clip-path: circle(150% at 48% 28%);
}

/* Tech transition — macOS boot screen */
.tech-transition-container {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.tech-transition-container.visible {
  opacity: 1;
}

.boot-logo {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  user-select: none;
}

.boot-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.boot-progress-fill {
  width: 0;
  height: 100%;
  background: #fff;
  border-radius: 2px;
}

.boot-progress-fill.filling {
  animation: bootFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bootFill {
  0%   { width: 0; }
  15%  { width: 12%; }
  40%  { width: 45%; }
  70%  { width: 78%; }
  100% { width: 100%; }
}