/* Core fluid layout utilizing Grid and Clamp */
:root {
  --font-main: 'Inter', sans-serif;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: #000;
  color: #fff;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.prototypeWrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  width: clamp(300px, 90vw, 1200px);
  padding: clamp(1rem, 3vw, 3rem);
}

.prototypeHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fluidTitle {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.prototypeStatus {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: #86868b;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  font-weight: 400;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* High-performance hover system with hardware acceleration */
.btnVisit, .tabBtn {
  position: relative;
  overflow: hidden;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  border: 1px solid #222;
  background: transparent;
  color: #fff;
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Single shimmer sweep generation */
.btnVisit::before, .tabBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff1a, transparent);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Localized 5% background dim pseudo-backdrop for depth layering */
.btnVisit::after, .tabBtn::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: #0000000d;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btnVisit:hover, .tabBtn:hover {
  transform: perspective(1000px) rotateX(4deg) rotateY(4deg) translateY(-4px);
  border-color: #555;
}

.btnVisit:hover::before, .tabBtn:hover::before {
  transform: translateX(100%);
}

.btnVisit:hover::after, .tabBtn:hover::after {
  opacity: 1;
}

.tabBtn.active {
  background-color: #fff;
  color: #000;
  border-color: #fff;
}

.showcaseContainer {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

/* State management handling logic for tab switching */
.tabContent {
  display: none;
  opacity: 0;
  height: clamp(500px, 70vh, 800px);
  width: 100%;
  will-change: opacity, transform;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tabContent.active {
  display: block;
  opacity: 1;
}

/* End of CSS code -- TA-DA! */