/* ============================================
   SPHERE GALLERY MODAL
   ============================================ */
.sphere-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  /* Z-INDEX: 2000 creates modal layer above all page content (navigation, galleries, etc.).
     High value ensures sphere modal overlays everything. Close button at 2001 sits above sphere items. */
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* PERSPECTIVE: 750px sets 3D viewing distance from screen plane to viewer's eye.
     This specific value (increased from 600px) compensates for the larger sphere radius (375px).
     Formula guidance: perspective ≈ 2x radius creates natural depth without excessive distortion.
     Smaller values = more dramatic 3D effect but increased warping. */
  perspective: 750px;
  /* CURSOR: grab indicates interactive drag behavior, changes to grabbing during active drag via JS.
     Provides immediate visual feedback that the sphere can be rotated. */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.sphere-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sphere-close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 2001;
  transition: background 0.2s;
  border: none;
  padding: 0;
}

.sphere-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.sphere-instruction {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  pointer-events: none;
}

.sphere-scene {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* TRANSFORM-STYLE: preserve-3d enables nested 3D transforms.
     Critical for sphere: allows child .sphere and .sphere-item elements to exist in 3D space
     rather than being flattened to parent's plane. Without this, perspective wouldn't apply. */
  transform-style: preserve-3d;
}

.sphere {
  position: relative;
  width: 0;
  height: 0;
  /* TRANSFORM-STYLE: preserve-3d on sphere container propagates 3D space to child items.
     Each .sphere-item receives individual 3D transforms (translateZ, rotateX, rotateY)
     calculated by JS to position on sphere surface. This setting ensures those transforms
     render in true 3D rather than projecting flat. */
  transform-style: preserve-3d;
  /* Rotation is handled by JS: sphere container gets rotateX/rotateY applied on drag,
     rotating entire sphere in 3D space while items maintain their surface positions. */
}

.sphere-item {
  position: absolute;
  /* SUPERSAMPLING: Render at 6x target size (1080px vs 180px visual) for ultra-crisp display.
     Why 6x? Balances quality vs performance:
     - 3D transforms scale items down as they recede in space
     - Browser downscaling from high-res acts as anti-aliasing
     - Prevents pixelation/blurriness on near items at shallow rotation angles
     - 6x chosen empirically: 4x insufficient sharpness, 8x+ minimal gains with performance cost */
  width: 1080px;  /* Visual target: 180px */
  height: 1560px; /* Visual target: 260px */
  left: -540px;  /* Center: -width/2 */
  top: -780px;   /* Center: -height/2 */
  background: #000;
  border: 4px solid rgba(255, 255, 255, 0.1); /* Scaled border */
  border-radius: 8px; /* Scaled radius */
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* BACKFACE-VISIBILITY: hidden optimizes rendering and prevents visual artifacts.
     Why needed:
     - As sphere rotates, back-facing images (facing away 180°) would mirror/show through
     - Culls back faces from render pipeline, improving performance (~50% fewer drawn items)
     - Prevents z-fighting and transparency glitches on overlapping geometry */
  backface-visibility: hidden;
  transition: border-color 0.2s; /* Removed transform transition to avoid conflict with JS animation */
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Scaled shadow */
  /* PERFORMANCE: will-change: transform explicitly REMOVED to prevent low-res rasterization.
     Why removed:
     - will-change hints GPU to pre-rasterize layer at current size
     - With 6x supersampling, browser may cache low-res version, defeating our quality strategy
     - 3D transforms already trigger GPU compositing without will-change hint
     - Modern browsers optimize transform-heavy animations automatically
     - Result: Slightly higher CPU cost but maintains crisp 6x supersampled rendering */
}

.sphere-item.sphere-item--landscape {
  /* LANDSCAPE vs PORTRAIT: Different dimensions maintain proper aspect ratios for photo orientations.
     Portrait (default): 1080×1560 maintains 2:3 aspect ratio (common for vertical fashion/beauty shots)
     Landscape: 1560×1080 swaps dimensions for horizontal photos
     Both maintain 6x supersampling scale factor
     Centering offsets (left/top) adjusted to -width/2 and -height/2 for proper origin positioning */
  width: 1560px;  /* Swap width/height */
  height: 1080px;
  left: -780px;  /* Center: -width/2 */
  top: -540px;   /* Center: -height/2 */
}

.sphere-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; /* Prevent dragging */
}

.sphere-item__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  /* Removed transition for performance as JS updates it every frame */
  will-change: opacity;
  z-index: 10;
}

.sphere-item:hover {
  border-color: #fff;
  z-index: 100; /* Bring to front on hover */
}

.sphere-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Prevent image drag */
}

/* Mobile adjustments for sphere */
@media (max-width: 768px) {
  .sphere-modal {
    /* MOBILE PERSPECTIVE: 500px (reduced from 750px) minimizes distortion on small screens.
       Why lower on mobile:
       - Smaller viewports amplify perspective warping effects
       - Users hold phones closer to face, shorter viewing distance feels more natural
       - Reduced distortion improves legibility of items at sphere edges
       - Still maintains 3D depth but with subtler, more comfortable effect
       - Ratio: 500/130 ≈ 3.8x radius vs 750/180 ≈ 4.2x on desktop */
    perspective: 500px;
  }
  
  .sphere-item {
    /* Reduced base size so perspective scaling makes front item correct size */
    /* SUPERSAMPLING: 9x the mobile target (130x195 -> 1170x1756) */
    width: 1170px;
    height: 1756px;
    left: -585px;
    top: -878px;
  }
}