/* Fine-tune motion hierarchy and feedback without adding new sections. */

/* Keep the assembling SHULS mark behind the shoe as a quieter brand layer. */
.hero-logo-lockup {
  width: clamp(205px, 23vw, 340px);
  max-height: 72%;
  opacity: .38;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .16));
}

@keyframes hero-logo-presence {
  0%, 100% { opacity: .34; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .12)); }
  50% { opacity: .46; filter: drop-shadow(0 0 20px rgba(255, 255, 255, .22)); }
}

@media (max-width: 760px) {
  .hero-logo-lockup {
    width: min(56vw, 230px);
    max-height: 34%;
  }
}

/* Fade chapter copy smoothly; the product's position and scale stay steady. */
.motion-chapter {
  transition: opacity .38s cubic-bezier(.2, .7, .25, 1),
    transform .52s cubic-bezier(.2, .7, .25, 1), visibility .38s;
}

/* Product cards react to pointer, keyboard focus, and touch without a large zoom. */
.product-card {
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.2, .7, .25, 1);
}

.product-card:hover {
  transform: translateY(-3px);
}

.product-card:active {
  transform: translateY(-1px) scale(.995);
}

.product-picture {
  transition: box-shadow .28s ease;
}

.product-card:hover .product-picture,
.product-card:focus-within .product-picture {
  box-shadow: 0 12px 26px rgba(10, 10, 10, .10);
}

.product-card:hover img {
  transform: none;
}

/* The two new ALADO cutouts are square source images; keep the whole shoe in frame. */
.product-picture img.product-image--contain {
  object-fit: contain;
  padding: 3%;
}

.product-card:focus-within .product-picture {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Short, consistent feedback when the product dialog and gallery change. */
dialog[open] {
  animation: dialog-in .34s cubic-bezier(.16, 1, .3, 1) both;
}

dialog[open]::backdrop {
  animation: dialog-backdrop-in .24s ease-out both;
}

@keyframes dialog-backdrop-in {
  from { background: rgba(21, 26, 40, 0); backdrop-filter: blur(0); }
  to { background: rgba(21, 26, 40, .42); backdrop-filter: blur(5px); }
}

.gallery-viewport.is-photo-changing #detail-image {
  animation: gallery-photo-swap .3s cubic-bezier(.2, .7, .25, 1) both;
}

@keyframes gallery-photo-swap {
  from { opacity: .42; filter: blur(4px); transform: translateX(8px); }
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

details summary span {
  transition: transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-lockup { animation: none !important; }
  .hero-logo-lockup.is-building .hero-logo-part {
    animation: hero-logo-piece-join-reduced .72s ease-out both !important;
  }
  .product-card,
  .product-picture,
  .product-picture img,
  dialog[open],
  dialog[open]::backdrop,
  .gallery-viewport.is-photo-changing #detail-image,
  details summary span {
    animation: none !important;
    transition: none !important;
  }
  .product-card:hover,
  .product-card:active,
  .product-card:hover img {
    transform: none !important;
  }
}


/* Keep every shoe fully visible and centered in both the catalog and gallery. */
.product-picture img.product-image--contain {
  object-fit: contain;
  object-position: center;
  padding: 5%;
}
.gallery-viewport #detail-image {
  object-fit: contain;
  object-position: center;
}