/* ============================================================
   PHOTO SYSTEM & FLOATING FRAMES — Shan Asharaf Portfolio
   Four distinct photos, zero overlays/filters, full clarity.
   Frame glow stays strictly OUTSIDE the image.
   Stacking context isolated at z-index: 2 — fluid candy-red elements
   never cover any photo.
   ============================================================ */

/* ── Floating Photo Frame Container ──────────────────────────── */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  isolation: isolate;
  z-index: 2;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95),
              0 0 38px var(--candy-glow),
              0 0 0 1px var(--candy-edge);
  overflow: hidden;
  will-change: transform;
}

/* ── Crystal Clear Photo (Zero tint, zero duotone, zero filter wash) ── */
.photo-native {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto;
  user-select: none;
  background: #000000;
}

/* Photo 1: Hero — Face clearly centered */
.photo-hero {
  object-position: 50% 20%;
}

/* Photo 2: About — Centered composure */
.photo-about {
  object-position: 50% 25%;
}

/* Photo 4: Journeys — Clean architectural perspective */
.photo-journey {
  object-position: 50% 28%;
}

/* ── Staggered 6-9s Ease-in-out Floating Drift Animations ─────── */
.float-hero {
  animation: floatDriftA 7.2s ease-in-out infinite alternate;
}
.float-about {
  animation: floatDriftB 8.6s ease-in-out infinite alternate;
  animation-delay: -2.4s;
}
.float-spotlight {
  animation: floatDriftC 6.8s ease-in-out infinite alternate;
  animation-delay: -4.1s;
}
.float-journey {
  animation: floatDriftD 7.9s ease-in-out infinite alternate;
  animation-delay: -1.8s;
}

@keyframes floatDriftA {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(6px, -14px, 0) rotate(1.2deg); }
  100% { transform: translate3d(-5px, 12px, 0) rotate(-1.5deg); }
}

@keyframes floatDriftB {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-7px, 14px, 0) rotate(-1.4deg); }
  100% { transform: translate3d(5px, -12px, 0) rotate(1.1deg); }
}

@keyframes floatDriftC {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(5px, -10px, 0) rotate(1.0deg); }
  100% { transform: translate3d(-6px, 11px, 0) rotate(-1.2deg); }
}

@keyframes floatDriftD {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-6px, -14px, 0) rotate(-1.3deg); }
  100% { transform: translate3d(7px, 13px, 0) rotate(1.5deg); }
}

/* ── Full-Screen Spotlight Photo 3 Contain Frame (100vh) ─────── */
.spotlight-frame-contain {
  position: relative;
  width: 100%;
  height: clamp(480px, 75vh, 780px);
  max-width: 580px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.98),
              0 0 52px var(--candy-glow),
              0 0 0 1px var(--candy-edge);
  isolation: isolate;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* object-fit: contain shows the photo completely top-to-bottom */
.spotlight-photo-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
  display: block;
  opacity: 1 !important;
  filter: none !important;
}

/* ── Accessibility: Reduced Motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .float-hero,
  .float-about,
  .float-spotlight,
  .float-journey {
    animation: none !important;
    transform: none !important;
  }
}