/* ==========================================================================
   Projects — the second section.
   The reference room stays on canvas; twelve previews are real DOM links,
   and Jiří's rear-view portrait replaces the old central figure. 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;
}

/* --------------------------------------------------------------------------
   Screens follow the twelve measured positions from the reference. Their
   different tilts and depths make a room instead of a flat portfolio grid.
   -------------------------------------------------------------------------- */

.g-card {
  position: absolute;
  aspect-ratio: var(--aspect, 1.6);
  padding: 0;
  color: #f4f0eb;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

.g-card__in {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(239, 215, 190, 0.33);
  border-radius: 9px;
  background: #070809;
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.8), 0 0 18px var(--tint);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateY(var(--yaw, 0deg)) rotateZ(var(--roll, 0deg)) scale(var(--card-scale, 0.85));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
  animation: gFloat calc(5.6s + var(--i, 0) * 0.63s) ease-in-out
             calc(var(--i, 0) * -1.27s) infinite alternate paused;
}
.gallery.is-live .g-card__in { animation-play-state: running; }

.g-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080a10;
}

.g-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  filter: brightness(var(--screen-brightness, 0.64)) saturate(0.72);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.g-card__preview { opacity: 0; }

.g-card__hint {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid rgba(246, 221, 187, 0.45);
  border-radius: 3px;
  background: rgba(4, 4, 5, 0.82);
  color: #f3d5b3;
  font: 600 7px var(--ui);
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.g-card__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  padding: 12px 10px 5px;
  background: linear-gradient(transparent, rgba(3, 4, 5, 0.92));
  font-family: var(--ui);
  line-height: 1.1;
}
.g-card__caption small {
  color: #d2a87e;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.g-card__caption strong { font-size: clamp(8px, 0.83vw, 12px); font-weight: 500; }
.g-card__caption > span { margin-left: auto; color: #d2a87e; }

.g-card__art {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 9%;
  font-family: var(--ui);
  overflow: hidden;
}
.g-card__art small { font-size: 9px; letter-spacing: 0.25em; opacity: 0.8; }
.g-card__art strong { font-size: clamp(18px, 2.2vw, 35px); line-height: 1.1; font-weight: 500; }
.g-card__art i { font-size: 10px; font-style: normal; border: 1px solid currentColor; padding: 7px 10px; }
.g-card__art--finance {
  background: radial-gradient(circle at 88% 65%, #447c9d 0, #183c55 18%, transparent 40%), linear-gradient(130deg, #060f1e, #102e43 75%, #274d67);
}
.g-card__art--capital {
  background: radial-gradient(circle at 85% 30%, #9fc2a3 0, #32604e 20%, transparent 45%), linear-gradient(125deg, #0a1917, #153c36 72%, #274d43);
}

/* hover: toward the camera, a touch brighter, its glow deepened — and the
   rest of the room eases back a breath so the depth reads */
.g-card:hover .g-card__in,
.g-card:focus-visible .g-card__in {
  transform: perspective(900px) rotateY(var(--yaw, 0deg)) rotateZ(var(--roll, 0deg)) translateZ(30px) scale(calc(var(--card-scale, 0.85) + 0.18));
  filter: brightness(1.12) drop-shadow(0 10px 34px var(--tint, rgba(255, 140, 60, 0.4)));
}
.g-card:hover,
.g-card:focus-visible { z-index: 42 !important; }
.g-card:hover .g-card__hint,
.g-card:focus-visible .g-card__hint { opacity: 1; transform: none; }
.g-card:focus-visible {
  outline: none;
}
.gallery__deck.is-hot .g-card:not(:hover):not(:focus-visible) .g-card__in {
  transform: perspective(900px) rotateY(var(--yaw, 0deg)) rotateZ(var(--roll, 0deg)) translateZ(-12px) scale(calc(var(--card-scale, 0.85) - 0.03));
  filter: brightness(0.9);
}

@keyframes gFloat {
  from { translate: 0 0; rotate: 0.001deg; }
  to { translate: 0 -7px; rotate: -0.35deg; }
}

.gallery__person {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  filter: brightness(0.49) contrast(1.25) drop-shadow(0 0 7px rgba(255, 125, 56, 0.36));
}

.gallery__all { display: none; }

/* --------------------------------------------------------------------------
   Corner captions — the reference's HUD. Letterspaced hairline sans, amber
   headline, dashes as punctuation. They type themselves in on .is-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);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease calc(var(--li, 0) * 0.14s),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--li, 0) * 0.14s);
  pointer-events: none;
}
.gallery.is-labels .g-label { opacity: 1; transform: none; }

.g-label--projects {
  top: clamp(18px, 3.8vh, 40px);
  left: clamp(20px, 3vw, 52px);
  font-size: clamp(10px, 0.92vw, 15px);
  font-weight: 500;
  letter-spacing: 0.52em;
  color: #d8b183;
}
.g-label--projects::after,
.g-label--ideas::after,
.g-label--scroll::after,
.g-label--tomorrow::after {
  content: '';
  display: block;
  width: 1.6em;
  height: 1px;
  margin-top: 1.1em;
  background: currentColor;
  opacity: 0.55;
}
.g-label--ideas {
  top: clamp(90px, 15.5vh, 150px);
  left: clamp(20px, 3vw, 52px);
}
.g-label--ideas b { font-weight: 500; color: rgba(232, 226, 220, 0.82); }
.g-label--scroll {
  top: clamp(18px, 4vh, 42px);
  right: clamp(20px, 3vw, 52px);
}
.g-label--real {
  bottom: clamp(8px, 2vh, 18px);
  left: clamp(20px, 3vw, 52px);
  line-height: 1.4;
}
.g-label--tomorrow {
  bottom: clamp(8px, 2vh, 18px);
  right: clamp(20px, 3vw, 52px);
  line-height: 1.4;
}

/* the red index over the hero screen — placed by boot4 from frame coords */
.g-label--num {
  font-family: var(--ui);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #c8382b;
  transition-delay: 0.5s;
}

/* --------------------------------------------------------------------------
   Portrait: recomposition (layout4.PORTRAIT places the survivors); the rest
   of the deck sits this orientation out. Captions tighten into two rows.
   -------------------------------------------------------------------------- */

.gallery.is-portrait .g-label--ideas { top: clamp(64px, 9vh, 110px); }
.gallery.is-portrait .g-label--real,
.gallery.is-portrait .g-label--tomorrow { bottom: clamp(14px, 3vh, 30px); }
.gallery.is-portrait .g-label--num { display: none; }
.gallery.is-portrait .g-label--ideas,
.gallery.is-portrait .g-label--real,
.gallery.is-portrait .g-label--tomorrow { display: none; }
.gallery.is-portrait .g-card__caption { min-height: 35px; padding: 5px 8px; gap: 5px; }
.gallery.is-portrait .g-card__caption small { font-size: 7px; }
.gallery.is-portrait .g-card__caption strong { font-size: 10px; }
.gallery.is-portrait .g-card__art { gap: 5px; }
.gallery.is-portrait .g-card__art small { font-size: 6px; }
.gallery.is-portrait .g-card__art strong { font-size: 14px; }
.gallery.is-portrait .g-card__art i { font-size: 6px; padding: 4px 5px; }
.gallery.is-portrait .g-card__hint { display: none; }

/* --------------------------------------------------------------------------
   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 (max-width: 700px) {
  .gallery { height: auto; }
  .gallery__pin { position: relative; height: 100svh; }
  .gallery.is-portrait .gallery__person { display: block; }
  .gallery__all {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 26px 14px 65px;
    background: radial-gradient(ellipse at top, #25150d, #090808 48%);
  }
  .gallery__all-card {
    display: block;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    color: #f0e8df;
    text-decoration: none;
    border: 1px solid rgba(235, 191, 145, 0.25);
    border-radius: 7px;
    background: #101012;
    box-shadow: 0 12px 24px rgba(0,0,0,.36);
  }
  .gallery__all-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
  }
  .gallery__all-card span {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    padding: 10px;
  }
  .gallery__all-card small {
    grid-column: 1 / -1;
    color: #ca9b71;
    font: 8px var(--ui);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .gallery__all-card strong { font: 500 12px var(--ui); }
  .gallery__all-card b { font: 14px var(--ui); color: #ca9b71; }
  .gallery.is-portrait .g-card__caption { display: none; }
}

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

/* The preview grows from a hovered tile and keeps a slim glowing room edge. */
.project-viewer {
  position: fixed;
  inset: 0;
  width: 94vw;
  max-width: none;
  height: 92dvh;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 188, 132, .62);
  border-radius: 12px;
  color: #f5eee7;
  background: #060607;
  box-shadow: 0 0 0 1px rgba(255, 107, 58, .18), 0 0 34px rgba(255, 101, 45, .45), 0 0 110px rgba(193, 53, 24, .34);
}
.project-viewer::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(7px); }
.project-viewer__window {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 15%, #25130e, #060607 65%);
  transform-origin: top left;
}
.project-viewer__bar,
.project-viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(16px, 3vw, 48px);
  background: rgba(8, 8, 9, .92);
}
.project-viewer__bar { min-height: 76px; border-bottom: 1px solid rgba(241, 210, 176, .22); }
.project-viewer__identity { display: grid; gap: 3px; min-width: 0; }
.project-viewer__identity > span,
.project-viewer__foot {
  color: #bd9876;
  font: 500 10px var(--ui);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.project-viewer__title {
  overflow: hidden;
  font: 500 clamp(18px, 2vw, 28px) var(--ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-viewer__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.project-viewer__back,
.project-viewer__visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(241, 210, 176, .48);
  border-radius: 3px;
  background: rgba(27, 17, 13, .84);
  color: #f5eee7;
  font: 500 12px var(--ui);
  letter-spacing: .07em;
  text-decoration: none;
  cursor: pointer;
}
.project-viewer__back:hover,
.project-viewer__visit:hover,
.project-viewer__back:focus-visible,
.project-viewer__visit:focus-visible { background: #a7462f; color: white; outline: 2px solid #e8b891; outline-offset: 2px; }
.project-viewer__back { display: none; }
.project-viewer__live {
  color: #e8b891;
  font: 600 11px var(--ui);
  letter-spacing: .18em;
  white-space: nowrap;
}
.project-viewer__site {
  position: relative;
  min-height: 0;
  background: #fff;
}
.project-viewer__site iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.project-viewer__exit-edge {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 2;
  width: clamp(24px, 2.5vw, 40px);
  background: linear-gradient(90deg, transparent, rgba(180, 79, 43, .1));
  cursor: e-resize;
}
.project-viewer__foot { min-height: 40px; border-top: 1px solid rgba(241, 210, 176, .17); }

.project-confirm {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: min(90dvh, 740px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(234, 147, 100, .65);
  border-radius: 10px;
  color: #f5eee7;
  background: #100c0b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .75), 0 0 38px rgba(198, 69, 36, .32);
}
.project-confirm::backdrop { background: rgba(0, 0, 0, .84); backdrop-filter: blur(5px); }
.project-confirm__content { padding: 18px; background: radial-gradient(ellipse at top right, rgba(120, 39, 22, .25), transparent 70%); }
.project-confirm__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(245, 210, 177, .24);
  border-radius: 5px;
  background: #080808;
}
.project-confirm__eyebrow { margin: 18px 0 8px; color: #d7966e; font: 600 11px var(--ui); letter-spacing: .17em; }
.project-confirm h2 { margin: 0; font: 500 clamp(24px, 6vw, 30px)/1.15 var(--ui); }
.project-confirm__description { margin: 12px 0 22px; color: #c6b6aa; font: 400 14px/1.5 var(--ui); }
.project-confirm__actions { display: flex; gap: 9px; flex-wrap: wrap; }
.project-confirm__actions button {
  flex: 1 1 155px;
  min-height: 48px;
  padding: 9px 12px;
  border-radius: 3px;
  font: 500 13px var(--ui);
  cursor: pointer;
}
.project-confirm__cancel { border: 1px solid rgba(241, 210, 176, .4); background: rgba(0, 0, 0, .28); color: #eee4dc; }
.project-confirm__show { border: 1px solid #d7472b; background: #c33b25; color: white; }
.project-confirm__show span { margin-left: 5px; font-family: system-ui, sans-serif; }
.project-confirm__actions button:focus-visible { outline: 2px solid #efb78d; outline-offset: 3px; }
.project-confirm__cancel:hover { background: rgba(231, 148, 110, .13); }
.project-confirm__show:hover { background: #e54b30; }

@media (max-width: 700px), (pointer: coarse) {
  .project-viewer { width: 96vw; height: 96dvh; border-radius: 7px; }
  .project-viewer__bar { flex-wrap: wrap; gap: 8px; min-height: 0; }
  .project-viewer__identity { width: 100%; }
  .project-viewer__actions { width: 100%; flex-wrap: wrap; gap: 7px; }
  .project-viewer__visit { order: 1; flex: 1; }
  .project-viewer__live { display: none; }
  .project-viewer__back { display: inline-flex; order: 0; border-color: #d86b4a; background: #852e20; }
  .project-viewer__foot { gap: 8px; font-size: 8px; letter-spacing: .09em; }
  .project-viewer__exit-edge { display: none; }
}