/* ==========================================================================
   Scene four — the project universe.
   The reference image is rebuilt as living layers: the room is the extracted
   plate on canvas, the twelve screens are DOM buttons wearing sprites cut
   from that same image, the creator is its matted centre. This sheet carries
   the layer stack, the hover life and the caption typography; the entrance
   choreography itself is driven per-frame from boot4.js.
   ========================================================================== */

.gallery {
  position: relative;
  height: 260svh;
  background: #000;
}

.gallery__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

#galleryStage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* the 3D room the cards live in */
.gallery__world {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% 42%;
}

.gallery__deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Cards. The sprite carries the reference's own bezel, rim light and glow,
   so the button is chrome-free: no border, no background — just the pixels,
   an easing inner shell for hover/float, and a tinted shadow when lifted.
   -------------------------------------------------------------------------- */

.g-card {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

.g-card__in {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
              filter 0.28s ease;
}

.g-cyber-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 120px;
  padding: clamp(10px, 1.2vw, 15px);
  background: rgba(10, 16, 24, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 0 15px rgba(0, 240, 255, 0.08);
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.g-cyber-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.03) 0px, rgba(0, 240, 255, 0.03) 2px, transparent 2px, transparent 4px);
  pointer-events: none;
}
.g-cyber-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.g-cyber-card__tag {
  font-family: var(--mono);
  font-size: clamp(7px, 0.6vw, 9.5px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan);
}
.g-cyber-card__status {
  font-family: var(--mono);
  font-size: clamp(6.5px, 0.55vw, 8.5px);
  letter-spacing: 0.12em;
  color: var(--yellow);
  background: rgba(246, 224, 94, 0.12);
  border: 1px solid rgba(246, 224, 94, 0.35);
  padding: 2px 6px;
  border-radius: 3px;
}
.g-cyber-card__title {
  font-family: var(--disp);
  font-size: clamp(10.5px, 0.9vw, 14px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: #fff;
  text-transform: uppercase;
  margin: 6px 0;
}
.g-cyber-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed rgba(0, 240, 255, 0.2);
  padding-top: 5px;
  font-family: var(--mono);
  font-size: clamp(6.5px, 0.55vw, 8px);
  letter-spacing: 0.15em;
  color: var(--cyan);
}
.g-cyber-card__arrow {
  color: var(--pink);
  font-size: 1.1em;
}

/* Rock-Solid, Pure Butter-Smooth Hover: Zero Jitter, Zero Shaking */
.g-card:hover .g-card__in,
.g-card:focus-visible .g-card__in {
  transform: translateY(-5px);
  filter: brightness(1.2);
}

.g-card:hover .g-cyber-card,
.g-card:focus-visible .g-cyber-card {
  border-color: var(--cyan);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 28px rgba(0, 240, 255, 0.7), inset 0 0 20px rgba(0, 240, 255, 0.15);
}
.g-card:focus-visible {
  outline: none;
}

.gallery__person {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Corner captions — Cyberpunk HUD. Monospace telemetry, cyan glow.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Header — Cyberpunk HUD Title & Subtitle
   -------------------------------------------------------------------------- */

.g-head-wrap {
  position: absolute;
  top: clamp(10px, 1.6vh, 18px);
  left: clamp(18px, 2.5vw, 36px);
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery.is-labels .g-head-wrap,
.gallery.is-set .g-head-wrap {
  opacity: 1;
  transform: none;
}

.g-label--projects {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(15px, 1.6vw, 23px);
  font-weight: 500;
  letter-spacing: .2em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.8), 0 0 28px rgba(255, 0, 85, 0.5);
  line-height: 1.1;
}
.g-label--projects::after {
  content: '';
  display: block;
  width: 2em;
  height: 2px;
  margin-top: 0.3em;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  opacity: 0.85;
}

.g-head-sub {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: clamp(7px, 0.52vw, 8.5px);
  letter-spacing: 0.16em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
  text-transform: uppercase;
  max-width: 440px;
}

/* --------------------------------------------------------------------------
   Mobile Portrait Adaptations
   -------------------------------------------------------------------------- */

.gallery.is-portrait {
  height: 320svh;
}
.gallery.is-portrait .g-head-wrap {
  top: 12px;
  left: 16px;
  right: 16px;
}
.gallery.is-portrait .g-label--projects {
  font-size: 18px;
  letter-spacing: 0.14em;
}
.gallery.is-portrait .g-head-sub {
  font-size: 7.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery.is-portrait .g-cyber-card {
  min-height: 94px;
  padding: 10px 12px;
}
.gallery.is-portrait .g-cyber-card__title {
  font-size: 12px;
  margin: 4px 0;
}

/* --------------------------------------------------------------------------
   Fallbacks
   -------------------------------------------------------------------------- */

.gallery.is-fallback #galleryStage { display: none; }
.gallery.is-fallback .gallery__pin {
  background: #000 url('../../public/projects/plate.jpg') center / cover no-repeat;
}
.gallery.is-set .g-card,
.gallery.is-set .gallery__person { opacity: 1; }
.gallery.is-set .g-label { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .g-card__in { animation: none; }
  .g-label { transition-duration: 0.01ms; transition-delay: 0s; }
}