/* ─── Label card ─────────────────────────────────────────────────────────────── */
.label-card {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  user-select: none;
  transform-origin: 50% 50%;
  opacity: 0;
}

.label-title {
  font-family: var(--ty-label-title-font, 'Big Shoulders Display', sans-serif);
  font-size: var(--ty-label-title-size, 1.05rem);
  font-weight: 800;
  color: var(--ty-label-title-color, rgba(255,255,255,0.85));
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
}

.label-cat {
  font-family: var(--ty-label-cat-font, system-ui, sans-serif);
  font-size: var(--ty-label-cat-size, 0.52rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ty-label-cat-color, rgb(91,48,242));
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
  align-self: flex-start;
}

.label-cat::after {
  content: '';
  display: block;
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin-top: 4px;
  transition: width 0.35s ease, background 0.2s;
}

.label-card:hover .label-title { color: rgba(255, 255, 255, 1); }
.label-card:hover .label-cat   { color: rgb(255, 85, 85); }
.label-card:hover .label-cat::after {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
}

/* ─── Hover image panels ──────────────────────────────────────────────────────── */
#img-left, #img-right {
  position: fixed;
  width: var(--hover-img-width, 18vw);
  /* no aspect-ratio — height follows the image's natural proportions */
  z-index: 15; pointer-events: none; overflow: hidden;
  opacity: 0;
  /* slow fade-OUT when .visible is removed */
  transition: opacity 2.5s ease;
}
/* left image: slightly above screen centre; right: slightly below — asymmetric on purpose */
#img-left  { left: 5vw;  top: var(--hover-img-left-top,  calc(50% - 7vw)); }
#img-right { right: 5vw; top: var(--hover-img-right-top, calc(50% - 3.5vw)); }

/* soft fade-IN + start floating when .visible is added */
#img-left.visible {
  opacity: 1;
  transition: opacity 1.1s ease;
  animation: img-float-left 6s ease-in-out infinite;
}
#img-right.visible {
  opacity: 1;
  transition: opacity 1.1s ease;
  animation: img-float-right 7.5s ease-in-out infinite;
}
#img-left img, #img-right img {
  width: 100%; height: auto; display: block;
  /* no object-fit — natural aspect ratio preserved */
  /* filter: brightness(0.55) saturate(0.7); */
}

@keyframes img-float-left {
  0%   { transform: translate(  0px,   0px); }
  20%  { transform: translate(  4px, -12px); }
  45%  { transform: translate( -5px,  -4px); }
  70%  { transform: translate(  2px,  10px); }
  100% { transform: translate(  0px,   0px); }
}

@keyframes img-float-right {
  0%   { transform: translate(  0px,   0px); }
  25%  { transform: translate( -4px,  10px); }
  55%  { transform: translate(  5px,  -7px); }
  80%  { transform: translate( -2px,   4px); }
  100% { transform: translate(  0px,   0px); }
}

/* Landscape phones: hide hover images (too large relative to short viewport) */
@media (orientation: landscape) and (max-height: 500px) {
  #img-left, #img-right { display: none; }
}