/* src/client/components/ProductShowcase.css */
.showcase {
  --showcase-radius: 14px;
  perspective: 1600px;
  width: 100%;
}

.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.showcase-tab {
  color: #f5f5f7b3;
  font: inherit;
  cursor: pointer;
  background: #ffffff08;
  border: 1px solid #f5f5f724;
  border-radius: 999px;
  padding: .4rem .9rem;
  transition: color .2s, border-color .2s, background .2s;
  font-size: .85rem;
}

.showcase-tab:hover {
  color: #f5f5f7;
  border-color: #f5f5f74d;
}

.showcase-tab.is-active {
  color: #0a0a0a;
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  font-weight: 600;
}

.showcase-frame {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  border-radius: var(--showcase-radius);
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
  background: #0b0b0e;
  border: 1px solid #f5f5f71f;
  transition: transform .25s ease-out, opacity .6s, translate .6s;
  box-shadow: 0 30px 80px -30px #000c, inset 0 0 0 1px #ffffff05;
}

.showcase-frame {
  opacity: 0;
  translate: 0 24px;
}

.showcase-frame.is-revealed {
  opacity: 1;
  translate: 0;
}

.showcase-frame:after {
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(140deg, #fe7e1780, #0000 45%);
  padding: 1px;
  transition: opacity .3s;
  inset: -1px;
}

.showcase-frame.has-spotlight:after {
  opacity: 1;
}

.showcase-chrome {
  display: flex;
  background: #141418;
  border-bottom: 1px solid #f5f5f714;
  align-items:  center;
  gap: .5rem;
  padding: .65rem .85rem;
}

.showcase-dot {
  background: #3a3a42;
  border-radius: 50%;
  width: 11px;
  height: 11px;
}

.showcase-dot:first-child {
  background: #ff5f57;
}

.showcase-dot:nth-child(2) {
  background: #febc2e;
}

.showcase-dot:nth-child(3) {
  background: #28c840;
}

.showcase-omnibox {
  color: #f5f5f780;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #00000059;
  border-radius: 999px;
  flex: 1;
  max-width: 320px;
  margin-left: .5rem;
  padding: .25rem .75rem;
  font-size: .75rem;
}

.showcase-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3816 / 1858;
}

.showcase-img {
  display: block;
  object-fit: cover;
  object-position: top left;
  user-select: none;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.showcase-spotlight {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, background .3s;
  inset: 0;
}

.showcase-hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 2;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
}

.showcase-hotspot-dot {
  position: absolute;
  background: var(--brand-orange);
  border-radius: 50%;
  transition: transform .2s;
  inset: 17px;
  box-shadow: 0 0 0 4px #fe7e1740;
}

.showcase-hotspot-pulse {
  position: absolute;
  background: var(--brand-orange);
  animation: showcase-pulse 2.4s ease-out infinite;
  border-radius: 50%;
  inset: 17px;
}

.showcase-hotspot.is-active .showcase-hotspot-dot, .showcase-hotspot:hover .showcase-hotspot-dot {
  transform: scale(1.25);
}

.showcase-hotspot.is-pinned .showcase-hotspot-dot {
  box-shadow: 0 0 0 3px #0b0b0ee6, 0 0 0 5px var(--brand-orange);
}

.showcase-hotspot.is-pinned .showcase-hotspot-pulse {
  animation: none;
  opacity: 0;
}

.showcase-hotspot:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: 50%;
}

@keyframes showcase-pulse {
  0% {
    transform: scale(1);
    opacity: .6;
  }

  70% {
    transform: scale(3.2);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.showcase-tooltip {
  position: absolute;
  z-index: 3;
  backdrop-filter: blur(8px);
  animation: showcase-tip-in .2s ease;
  background: #101014eb;
  border: 1px solid #f5f5f724;
  border-radius: 12px;
  width: min(288px, 60vw);
  padding: .8rem .95rem;
  box-shadow: 0 18px 50px -18px #000000d9;
}

.showcase-tooltip-title {
  color: #fff;
  margin-bottom: .25rem;
  font-size: .92rem;
  font-weight: 600;
}

.showcase-tooltip-body {
  color: #f5f5f7b3;
  font-size: .82rem;
  line-height: 1.45;
}

@keyframes showcase-tip-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-frame, .showcase-img {
    transition: none;
  }

  .showcase-frame {
    opacity: 1;
    transform: none;
  }

  .showcase-hotspot-pulse {
    animation: none;
  }
}