/* ── Bold floating 3D app screens ── */

.showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  position: relative;
  padding: 24px 0 48px;
  transform-style: preserve-3d;
  width: 100%;
}

.showcase--hero {
  min-height: 480px;
  padding: 16px 0 32px;
}

.showcase--hero::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(48, 209, 88, 0.2) 0%,
    rgba(48, 209, 88, 0.05) 50%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
}

/* Hero stack */
.showcase-stack {
  position: relative;
  width: min(300px, 100%);
  height: min(480px, 58vh);
  transform-style: preserve-3d;
  transition: transform 0.45s ease-out;
}

.showcase-stack .screen-panel:nth-child(1) {
  --ry: -18deg;
  --rx: 8deg;
  --tz: -50px;
  --tx: 36px;
  top: 8%;
  right: 0;
  z-index: 1;
  scale: 0.9;
}

.showcase-stack .screen-panel:nth-child(2) {
  --ry: -8deg;
  --rx: 5deg;
  --tz: 24px;
  --tx: -18px;
  bottom: 4%;
  left: 0;
  z-index: 2;
}

/* Panel sizes */
.screen-panel {
  --ry: -12deg;
  --rx: 6deg;
  --tz: 0px;
  --tx: 0px;
  --panel-w: min(220px, 80vw);

  position: relative;
  width: var(--panel-w);
  transform-style: preserve-3d;
  transform:
    translateX(var(--tx))
    rotateY(var(--ry))
    rotateX(var(--rx))
    translateZ(var(--tz));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-stack .screen-panel {
  position: absolute;
}

.screen-panel--xl {
  --panel-w: min(260px, 88%);
}

.screen-panel--lg {
  --panel-w: min(240px, 85vw);
}

.screen-panel--md {
  --panel-w: min(210px, 78vw);
}

/* Solid frame */
.screen-panel__card {
  position: relative;
  border-radius: 36px;
  padding: 10px;
  background: linear-gradient(
    165deg,
    #3de06a 0%,
    #30d158 35%,
    #24a344 70%,
    #1a7a32 100%
  );
  transform-style: preserve-3d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15),
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 40px 80px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

.screen-panel__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  pointer-events: none;
  z-index: 3;
}

.screen-panel__card::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 26px;
  background: #0d2818;
  transform: translateZ(-12px) translate(6px, 10px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.screen-panel__screen {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 19.5;
  line-height: 0;
  transform: translateZ(2px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.screen-panel__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.screen-panel__shadow {
  position: absolute;
  bottom: -32px;
  left: 50%;
  width: 80%;
  height: 36px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.28) 0%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}

/* Poses */
.screen-panel--pose-left  { --ry: 20deg;  --rx: 6deg; }
.screen-panel--pose-center { --ry: 0deg;   --rx: 8deg; }
.screen-panel--pose-right { --ry: -20deg; --rx: 6deg; }
.screen-panel--pose-float { --ry: -14deg; --rx: 6deg; --tz: 16px; }

.showcase:hover .screen-panel--pose-left  { --ry: 8deg;  --rx: 4deg; }
.showcase:hover .screen-panel--pose-center { --ry: 0deg;   --rx: 5deg; }
.showcase:hover .screen-panel--pose-right { --ry: -8deg; --rx: 4deg; }
.showcase:hover .screen-panel--pose-float { --ry: -5deg; --rx: 3deg; }

.showcase-stack:hover .screen-panel:nth-child(1) { --ry: -10deg; --tz: -24px; }
.showcase-stack:hover .screen-panel:nth-child(2) { --ry: -2deg;  --tz: 48px; }

.rf-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.rf-screenshot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rf-screenshot-item .showcase {
  min-height: 400px;
  width: 100%;
}

.rf-screenshot-item figcaption {
  margin-top: 12px;
}

.rf-split-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rf-split-visual .showcase {
  min-height: 440px;
  width: 100%;
}

@media (max-width: 900px) {
  .showcase--hero {
    min-height: 440px;
  }

  .showcase-stack {
    height: min(440px, 55vh);
    width: min(260px, 88vw);
  }

  .screen-panel--xl {
    --panel-w: min(240px, 88vw);
  }

  .screen-panel--lg {
    --panel-w: min(220px, 86vw);
  }

  .showcase-stack .screen-panel:nth-child(1) {
    scale: 0.84;
    --tx: 18px;
  }

  .screen-panel--pose-left,
  .screen-panel--pose-right {
    --ry: 0deg;
    --rx: 7deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-panel,
  .showcase-stack {
    transform: none !important;
    transition: none;
  }

  .screen-panel {
    --ry: 0deg;
    --rx: 4deg;
  }
}