/* Sphere Gallery (scoped) */
#sphere-gallery {
  --radius: max(1300px, 100vw);
  --circ: calc(var(--radius) * 3.14);
  --segments-x: 37;
  --segments-y: 37;

  --sphere-rotation-y: 0deg;
  --sphere-rotation-x: 0deg;

  --offset-x: 0;
  --offset-y: 0;

  --rot-y: calc((360deg / var(--segments-x)) / 2);
  --rot-x: calc((360deg / var(--segments-y)) / 2);

  --rot-y-delta: 0deg;

  --item-width: calc((var(--circ) / var(--segments-x)));
  --item-height: calc((var(--circ) / var(--segments-y)));

  --item-size-x: 1;
  --item-size-y: 1;

  --bg-scrim: rgba(0, 0, 0, 0.4);

  --bg: rgb(0, 0, 0);
  --item-bg: rgb(20, 20, 20);
  --gradient-center: rgba(0, 0, 0, 0);
  --gradient-edge: rgba(0, 0, 0, 0.5);

  --gradient: radial-gradient(var(--gradient-center) 65%, var(--gradient-edge) 100%);
  
  /* Entrance animation initial state */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#sphere-gallery.in-view {
  opacity: 1;
  transform: translateY(0);
}

#sphere-gallery { position: relative; background-color: #000000; margin: 0; padding: 0; }
#sphere-gallery *, #sphere-gallery *::before, #sphere-gallery *::after { box-sizing: border-box; }

#sphere-gallery .stage { perspective: calc(var(--radius) * 2); width: 100%; height: 100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
#sphere-gallery .sphere { transform: translateZ(calc(var(--radius) * -1)) rotateY(var(--sphere-rotation-y)) rotateX(var(--sphere-rotation-x)); transform-style: preserve-3d; position: relative; }

#sphere-gallery .overlay { background-image: var(--gradient); position: absolute; inset: 0; margin: auto; z-index: 3; pointer-events: none; opacity: 1; }
#sphere-gallery .overlay.overlay--blur { -webkit-mask-image: var(--gradient); mask-image: var(--gradient); backdrop-filter: blur(3px); position: absolute; inset: 0; margin: auto; z-index: 3; opacity: 1; pointer-events: none; }

#sphere-gallery .item { width: calc(var(--item-width) * var(--item-size-x)); height: calc(var(--item-height) * var(--item-size-y)); position: absolute; transform-origin: 50% 50%; top: -999px; bottom: -999px; left: -999px; right: -999px; margin: auto; backface-visibility: hidden; color: transparent; transform-style: preserve-3d; transition: transform 300ms; }
#sphere-gallery .item { transform: rotateY(calc(var(--rot-y) * (var(--offset-x) + ((var(--item-size-x) - 1) / 2)) + var(--rot-y-delta, 0deg))) rotateX(calc(calc(var(--rot-x) * (var(--offset-y) - ((var(--item-size-y) - 1) / 2))) + var(--rot-x-delta, 0deg))) translateZ(var(--radius)); }

#sphere-gallery .item__image { transition: transform 300ms; position: absolute; display: block; inset: 10px; border-radius: 12px; background-color: var(--item-bg); overflow: hidden; backface-visibility: hidden; }
#sphere-gallery .item__image img { object-fit: cover; width: 100%; height: 100%; pointer-events: none; backface-visibility: hidden; display:block; }

#sphere-gallery .viewer { position: absolute; inset: 0; z-index: 9; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 100px; }
#sphere-gallery .viewer .frame { height: 100%; aspect-ratio: 1; border-radius: 32px; display: flex; position: relative; }
#sphere-gallery .viewer .enlarge { position: absolute; z-index: 10; border-radius: 32px; overflow: hidden; transition: opacity 300ms, top 300ms, left 300ms, width 300ms, height 300ms; pointer-events: none; }
#sphere-gallery .viewer .enlarge img { width: 100%; height: 100%; object-fit: contain; display: block; background-color: rgba(0, 0, 0, 0.9); }
#sphere-gallery .viewer .scrim { position: absolute; inset: 0; background-color: var(--bg-scrim); pointer-events: none; opacity: 0; transition: opacity 300ms; backdrop-filter: blur(3px); z-index: 8; }

[data-enlarging="true"] #sphere-gallery .viewer .scrim { opacity: 1; pointer-events: all; }

/* Enhanced enlarged view styling */
[data-enlarging="true"] #sphere-gallery .viewer .enlarge {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: all;
}

[data-enlarging="true"] #sphere-gallery .viewer .enlarge img {
  background-color: rgba(0, 0, 0, 0.95);
}

/* Ensure enlarged image is centered and visible */
#sphere-gallery .viewer .frame {
  pointer-events: none;
}

[data-enlarging="true"] #sphere-gallery .viewer .scrim {
  cursor: pointer;
}

@media (max-aspect-ratio: 1/1) {
  #sphere-gallery .viewer .frame { height: auto; width: 100%; }
}

/* ========================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
  #sphere-gallery {
    --radius: max(900px, 90vw);
  }

  #sphere-gallery .stage {
    height: 80vh;
  }

  #sphere-gallery .viewer {
    padding: 60px 20px;
  }

  #sphere-gallery .viewer .frame {
    border-radius: 24px;
    max-width: 90vw;
    max-height: 80vh;
  }

  #sphere-gallery .viewer .enlarge {
    border-radius: 24px;
  }
  
  #sphere-gallery .viewer .enlarge img {
    object-fit: contain;
  }

  #sphere-gallery .item__image {
    inset: 8px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  #sphere-gallery {
    --radius: max(700px, 85vw);
  }

  #sphere-gallery .stage {
    height: 70vh;
    min-height: 400px;
  }

  #sphere-gallery .viewer {
    padding: 40px 16px;
  }

  #sphere-gallery .viewer .frame {
    border-radius: 20px;
    max-width: 95vw;
    max-height: 70vh;
  }

  #sphere-gallery .viewer .enlarge {
    border-radius: 20px;
  }
  
  #sphere-gallery .viewer .enlarge img {
    object-fit: contain;
  }

  #sphere-gallery .item__image {
    inset: 6px;
    border-radius: 8px;
  }
}

@media (max-width: 375px) {
  #sphere-gallery {
    --radius: max(600px, 80vw);
  }

  #sphere-gallery .stage {
    height: 65vh;
    min-height: 350px;
  }

  #sphere-gallery .viewer {
    padding: 30px 12px;
  }

  #sphere-gallery .viewer .frame {
    border-radius: 16px;
  }

  #sphere-gallery .viewer .enlarge {
    border-radius: 16px;
  }

  #sphere-gallery .item__image {
    inset: 5px;
    border-radius: 6px;
  }
}

@media (max-width: 320px) {
  #sphere-gallery {
    --radius: max(500px, 75vw);
  }

  #sphere-gallery .stage {
    height: 60vh;
    min-height: 320px;
  }

  #sphere-gallery .viewer {
    padding: 24px 10px;
  }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  #sphere-gallery {
    --radius: max(600px, 80vw);
  }

  #sphere-gallery .stage {
    height: 85vh;
    min-height: 300px;
  }

  #sphere-gallery .viewer {
    padding: 20px 40px;
  }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
  #sphere-gallery .item {
    transition: transform 200ms ease-out;
  }

  #sphere-gallery .item__image {
    transition: transform 200ms ease-out;
  }

  /* Improve touch responsiveness */
  #sphere-gallery .stage {
    touch-action: pan-x pan-y;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #sphere-gallery {
    transition: none;
  }

  #sphere-gallery.in-view {
    opacity: 1;
    transform: none;
  }

  #sphere-gallery .item,
  #sphere-gallery .item__image,
  #sphere-gallery .viewer .enlarge,
  #sphere-gallery .viewer .scrim {
    transition: none !important;
  }
}