/* =====================================================================
   IRDEN CARS — showcase.css
   One premium "3D product" moment on the homepage: the real Audi A6 photo
   presented as a floating object with perspective, gold light and pointer
   parallax. Scoped to .showcase* — does not touch the rest of the site.
   Motion is transform/opacity only (compositor-friendly) and stays subtle.
   ===================================================================== */

.showcase {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(70% 60% at 72% 32%, rgba(200, 162, 76, 0.10), transparent 62%),
    var(--ink-900);
}

.showcase__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}

.showcase__intro { max-width: 46ch; }
.showcase__intro h2 { margin-bottom: 14px; }
.showcase__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 18px 0 24px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--paper);
}
.showcase__price span { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); }
.showcase__price .showcase__from {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.showcase__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 3D stage ---------- */
.showcase__stage {
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 42%;
}

.showcase__object {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--sc-rx, 0deg)) rotateY(var(--sc-ry, 0deg));
  transition: transform 0.14s linear;
  will-change: transform;
}

.showcase__inner {
  position: relative;
  transform-style: preserve-3d;
  animation: sc-float 8s ease-in-out infinite;
  will-change: transform;
}

/* soft gold halo, sitting far behind the car */
.showcase__glow {
  position: absolute;
  inset: -16% -12%;
  z-index: 0;
  transform: translateZ(-140px);
  background: radial-gradient(58% 55% at 50% 54%, rgba(200, 162, 76, 0.30), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

/* contact shadow on the "floor" */
.showcase__floor {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -7%;
  height: 14%;
  z-index: 0;
  transform: translateZ(-46px);
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.6), transparent 76%);
  filter: blur(12px);
  animation: sc-floor 8s ease-in-out infinite;
  pointer-events: none;
}

/* the real photo, framed like the rest of the site */
.showcase__card {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-800);
  box-shadow:
    0 44px 90px -34px rgba(0, 0, 0, 0.75),
    0 14px 34px rgba(0, 0, 0, 0.45);
}
.showcase__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 74%;
}

/* slow gold reflection sweep */
.showcase__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    104deg,
    transparent 34%,
    rgba(230, 200, 119, 0.00) 44%,
    rgba(230, 200, 119, 0.38) 50%,
    rgba(255, 244, 214, 0.16) 55%,
    transparent 66%
  );
  transform: translateX(-62%);
  animation: sc-sheen 9s ease-in-out infinite;
}

/* thin gold rim, a touch in front for depth */
.showcase__rim {
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: var(--radius-lg);
  transform: translateZ(46px);
  box-shadow:
    inset 0 0 0 1px rgba(200, 162, 76, 0.35),
    0 0 46px -6px rgba(200, 162, 76, 0.28);
  pointer-events: none;
}

@keyframes sc-float {
  0%, 100% { transform: translateY(-7px) rotateZ(-0.5deg) rotateY(-2.6deg); }
  50%      { transform: translateY(7px)  rotateZ(0.5deg)  rotateY(2.6deg); }
}
@keyframes sc-float-soft {
  0%, 100% { transform: translateY(-4px) rotateZ(-0.3deg); }
  50%      { transform: translateY(4px)  rotateZ(0.3deg); }
}
@keyframes sc-floor {
  0%, 100% { transform: translateZ(-46px) scale(0.9);  opacity: 0.5; }
  50%      { transform: translateZ(-46px) scale(1.05); opacity: 0.72; }
}
@keyframes sc-sheen {
  0%, 12%   { transform: translateX(-62%); }
  55%, 100% { transform: translateX(62%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .showcase__grid { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 48px); }
  .showcase__stage { perspective: 900px; margin-top: 4px; }
}
@media (max-width: 860px) {
  /* mobile: keep only a very subtle float, drop the sway + pointer parallax */
  .showcase__inner { animation-name: sc-float-soft; animation-duration: 9s; }
  .showcase__object { transform: none; }
  .showcase__sheen { animation-duration: 11s; }
}
@media (max-width: 560px) {
  .showcase__card img { aspect-ratio: 4 / 3.4; object-position: 50% 76%; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__inner,
  .showcase__floor,
  .showcase__sheen { animation: none; }
  .showcase__object { transform: none; transition: none; }
  .showcase__sheen { display: none; }
}