/* ==========================================================================
   Selected Work — DOM-based Portfolio Showcase
   Premium cinematic interactive experience
   ========================================================================== */

.gallery {
  position: relative;
  background: #000;
  /* Dark textured background */
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(2, 6, 12, 0.95) 50%, rgba(0,0,0,1) 100%),
    url('../../public/tex/grain.png');
  background-size: cover, 250px;
  background-attachment: scroll, fixed;
  padding: 10vh 0 15vh;
  overflow: hidden;
  color: #fff;
  min-height: 100vh;
}

.gallery__container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Typography — Ambient Labels
   -------------------------------------------------------------------------- */

.g-label {
  position: absolute;
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(8px, 0.72vw, 12px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(212, 208, 205, 0.6);
  pointer-events: none;
  z-index: 5;
}

.g-label--projects {
  top: clamp(20px, 4vh, 60px);
  left: clamp(20px, 4vw, 80px);
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.5em;
  color: #00ffff; /* Cyan theme */
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.g-label--ideas {
  top: clamp(120px, 18vh, 180px);
  left: clamp(20px, 4vw, 80px);
  color: rgba(180, 220, 255, 0.7);
}

.g-label--ideas b { 
  font-weight: 600; 
  color: #fff; 
}

.g-label--scroll {
  top: clamp(20px, 4vh, 60px);
  right: clamp(20px, 4vw, 80px);
  text-align: right;
  color: rgba(180, 220, 255, 0.7);
}

.g-label--real {
  bottom: clamp(20px, 6vh, 60px);
  left: clamp(20px, 4vw, 80px);
  color: rgba(180, 220, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Central Character
   -------------------------------------------------------------------------- */

.gallery__person {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%); /* Moved down */
  height: clamp(350px, 65vh, 700px);
  width: auto;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px rgba(0, 255, 255, 0.15));
}

/* --------------------------------------------------------------------------
   Floating Project Cards (Desktop)
   -------------------------------------------------------------------------- */

.gallery__cards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  perspective: 1500px;
  transform-style: preserve-3d;
  pointer-events: none; /* Let clicks pass through empty space */
}

.portfolio-card {
  position: absolute;
  display: block;
  text-decoration: none;
  pointer-events: auto; /* Re-enable for the cards */
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0; /* JS will fade them in */
  transition: z-index 0.3s;
}

.card-inner {
  position: relative;
  background: rgba(4, 10, 18, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.5),
    0 0 15px rgba(0, 255, 255, 0.05) inset;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.portfolio-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}

.card-label {
  margin-top: 10px;
  padding: 4px 8px;
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a0c0d0;
  transition: color 0.3s ease;
}

.card-label .num {
  color: #00ffff;
  font-weight: 600;
}

.card-label .sub {
  font-size: 8px;
  color: rgba(160, 192, 208, 0.6);
  letter-spacing: 0.15em;
}

/* --------------------------------------------------------------------------
   Hover Effects
   -------------------------------------------------------------------------- */

/* When hovering over the gallery deck, dim all cards slightly */
.gallery__cards.is-hovered .portfolio-card:not(:hover) .card-inner {
  filter: brightness(0.6) blur(2px) grayscale(0.5);
  transform: translateZ(-20px) scale(0.95);
  border-color: rgba(255, 255, 255, 0.05);
}

.portfolio-card:hover {
  z-index: 50 !important; /* Bring to front */
}

.portfolio-card:hover .card-inner {
  border-color: rgba(0, 255, 255, 0.7);
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.8),
    0 0 30px rgba(0, 255, 255, 0.3),
    0 0 15px rgba(0, 255, 255, 0.15) inset;
  transform: translateZ(40px) scale(1.05);
  filter: none !important;
}

.portfolio-card:hover img {
  opacity: 1;
}

.portfolio-card:hover .card-label {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Desktop Asymmetric Positions (Approximated)
   Widths are percentage-based to be fluid on large screens
   -------------------------------------------------------------------------- */

.card-1 { /* Mrs Chop Kumari - Left Middle */
  top: 55%; left: 10%; width: 22%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), -10px) rotateY(5deg) rotateX(2deg);
  z-index: 15;
}
.card-2 { /* Puri's BnB - Top Center */
  top: 10%; left: 45%; width: 25%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 10px) rotateY(-2deg) rotateX(-5deg);
  z-index: 12;
}
.card-3 { /* Gen Z Salon - Top Left */
  top: 18%; left: 15%; width: 20%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), -30px) rotateY(10deg) rotateX(4deg);
  filter: blur(1px);
  z-index: 11;
}
.card-4 { /* Dental Clinic - Right Middle */
  top: 25%; right: 12%; width: 23%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 20px) rotateY(-8deg) rotateX(3deg);
  z-index: 16;
}
.card-5 { /* IRI Apex - Bottom Right */
  top: 65%; right: 15%; width: 20%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), -20px) rotateY(-12deg) rotateX(-2deg);
  filter: blur(0.5px);
  z-index: 13;
}
.card-6 { /* Biju Local Business - Bottom Left */
  top: 82%; left: 12%; width: 24%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 30px) rotateY(12deg) rotateX(8deg);
  z-index: 17;
}

/* --------------------------------------------------------------------------
   Responsive Layouts
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .card-1 { width: 28%; left: 5%; }
  .card-2 { width: 30%; left: 40%; }
  .card-3 { width: 25%; left: 8%; }
  .card-4 { width: 30%; right: 5%; }
  .card-5 { width: 25%; right: 8%; }
  .card-6 { width: 32%; left: 10%; top: 85%; }
}

@media (max-width: 760px) {
  /* Mobile Layout - Vertical Scroll / Stacked */
  .gallery {
    padding: 12vh 0 10vh;
    height: auto;
    min-height: auto;
  }
  
  .gallery__container {
    flex-direction: column;
    justify-content: flex-start;
  }

  .gallery__person {
    position: sticky;
    top: 15vh;
    left: 50%;
    transform: translate(-50%, 0);
    height: 70vh;
    opacity: 0.3; /* Dim character to let cards stand out */
    z-index: 1;
    filter: none;
    margin-bottom: -70vh; /* Pull cards up over the sticky character */
  }

  .gallery__cards {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 120px 20px 60px;
    z-index: 10;
  }

  .portfolio-card {
    position: relative;
    width: 90% !important; /* Force all cards to take up most of width */
    max-width: 400px;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important; /* Reset opacity for mobile */
  }

  .card-inner {
    background: rgba(4, 10, 18, 0.85);
    transform: none !important;
  }
  
  /* Disable hover effects on mobile */
  .gallery__cards.is-hovered .portfolio-card:not(:hover) .card-inner,
  .portfolio-card:hover .card-inner {
    transform: none !important;
    filter: none !important;
  }

  .g-label {
    position: relative;
    text-align: center;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-bottom: 20px;
    z-index: 20;
  }
  
  .g-label--projects { font-size: 20px; margin-bottom: 10px; }
  .g-label--ideas { display: none; }
  .g-label--scroll { display: none; }
  .g-label--real { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-inner, .portfolio-card img { transition-duration: 0.01ms; }
  .gallery__person { filter: none; }
}