/* The central camera lens and shutter mechanism */

.lens-container {
  position: relative;
  width: var(--lens-size);
  height: var(--lens-size);
  border-radius: 50%;
  box-shadow: 
    0 0 0 10px #111,
    0 0 0 12px #222,
    0 0 0 30px #0a0a0a,
    0 0 0 32px #151515,
    inset 0 0 50px rgba(0,0,0,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Markings on the lens ring */
.lens-ring {
  position: absolute;
  top: -30px; left: -30px; right: -30px; bottom: -30px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.1);
  pointer-events: none;
  animation: rotateRing 60s linear infinite;
}

@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* The actual viewport inside the lens */
.viewfinder {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  z-index: 1;
}

.viewfinder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: contrast(1.1) brightness(0.9);
  transition: transform 10s ease-out; /* Slow pan/zoom */
}

/* Added dynamically by JS for slow zoom effect */
.viewfinder img.zooming {
  transform: scale(1.1);
}

/* Optional glare/reflection on the glass */
.glass-glare {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%);
  z-index: 10; /* Above shutter */
  pointer-events: none;
}

/* --- The Mechanical Shutter --- */

.shutter {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 5; /* Above image, below glare */
  pointer-events: none; /* Let clicks pass through the hole */
  
  /* CSS Variables for animation state */
  --aperture: calc(var(--lens-size) / 2 * 1.1); /* Fully open (radius) */
  --twist: 0deg; /* No twist when open */
}

/* State class for closed shutter */
.shutter.is-closed {
  --aperture: 0px; /* Hole size is 0 */
  --twist: 30deg; /* Twist inward */
}

/* 6 Blades to form a hexagon aperture */
.blade {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--lens-size); /* large enough to cover */
  height: calc(var(--lens-size) * 2);
  margin-top: calc(var(--lens-size) * -1); /* Center vertically on the origin */
  background: var(--color-blade);
  border-left: 2px solid var(--color-blade-border); /* The edge that forms the hole */
  box-shadow: -5px 0 15px rgba(0,0,0,0.5); /* Depth between blades */
  transform-origin: 0% 50%; /* Pivot around the center of the left edge */
  
  /* The core math: rotate by index, apply twist, and translate out by the hole size */
  transform: rotate(calc(var(--index) * 60deg + var(--twist))) translateX(var(--aperture));
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Snappy mechanical easing */
  will-change: transform;
}

/* Assign indices */
.blade:nth-child(1) { --index: 0; z-index: 1; }
.blade:nth-child(2) { --index: 1; z-index: 2; }
.blade:nth-child(3) { --index: 2; z-index: 3; }
.blade:nth-child(4) { --index: 3; z-index: 4; }
.blade:nth-child(5) { --index: 4; z-index: 5; }
.blade:nth-child(6) { --index: 5; z-index: 6; }

/* The 6th blade needs to slide under the 1st blade to complete the circle properly. 
   In real life, they interlock. In CSS, we can cheat by duplicating the first blade 
   or using a pseudo-element if there's a visible seam, but the box-shadow should cover it. */

/* --- Fullscreen Image Modal --- */
.image-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(5, 5, 5, 0.98);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.image-modal.is-active {
  opacity: 1;
  pointer-events: all;
}

.image-modal img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.modal-title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-accent);
}

.modal-close {
  position: absolute;
  top: 2rem; right: 2rem;
  font-size: 3rem;
  color: var(--color-text);
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-accent);
}

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: var(--color-text);
  padding: 1rem;
  transition: color 0.3s;
}

.modal-nav:hover {
  color: var(--color-accent);
}

.modal-prev { left: 2rem; }
.modal-next { right: 2rem; }

.viewfinder {
  cursor: pointer;
}