/* ==========================================================================
   ThunderboltX Website Redesign — Section 05: Platform Showcase
   Interactive 3D Perspective Card Track with Scroll-Driven Pinned Assembly
   Ultra-Premium Frosted Glassmorphism with Hover Border Neon Shine
   ========================================================================== */

.platform-showcase {
  --bg: #080909;
  --text-main: #F2F2F2;
  --text-secondary: #cfc7c2;
  --copper: #A45A0E;
  --copper-light: #D39C67;
  --copper-neon: #FFA858;
  --copper-neon-bright: #FFB870;
  --silver: #C7C9CC;

  /* Card dimensions: Balanced rectangular proportions with guaranteed vertical clearance */
  --card-w: clamp(390px, 27vw, 485px);
  --spacing: clamp(500px, 36vw, 640px);
  --stage-h: clamp(540px, 63vh, 670px);

  position: relative;
  background: var(--bg);
  min-height: 100vh;
  min-height: 100svh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 24px 14px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.platform-showcase * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Section Header: Title and Sub Text (Enlarged & Positioned Above)
   -------------------------------------------------------------------------- */
.platform-showcase .showcase-head {
  max-width: 1020px;
  margin: 0 auto clamp(28px, 4vh, 48px);
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 5;
  will-change: transform, opacity;
}

.platform-showcase .showcase-title {
  font-family: var(--font-venera, 'Venera', 'Venara', sans-serif);
  font-size: clamp(1.6rem, 2.7vw, 3rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: #FFFFFF;
  text-wrap: balance;
}

.platform-showcase .showcase-title-line {
  display: block;
}

.platform-showcase .showcase-title .copper-highlight {
  background: linear-gradient(90deg, #e0916a, #f5be98 55%, #e0916a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.platform-showcase .showcase-desc {
  font-family: var(--font-lausanne, 'Lausanne', sans-serif);
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.45;
  color: #cfc7c2;
  max-width: 940px;
  margin: 0 auto;
  font-weight: 500;
  text-wrap: balance;
}

.platform-showcase .showcase-desc-line {
  display: block;
}

/* --------------------------------------------------------------------------
   3D Showcase Stage
   -------------------------------------------------------------------------- */
.platform-showcase .showcase-stage {
  position: relative;
  height: var(--stage-h);
  width: 100%;
  perspective: 1800px;
  overflow: visible;
}

.platform-showcase .card-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Platform Card — Clean Dark Frosted Glass (NO NEON IN DEFAULT STATE)
   -------------------------------------------------------------------------- */
.platform-showcase .platform-card {
  --mouse-x: 50%;
  --mouse-y: 20%;

  position: absolute;
  left: 50%;
  top: 52%;
  width: var(--card-w);
  height: calc(var(--card-w) * 1.18);
  border-radius: 36px;

  /* Pure, clean architectural dark frosted glass fill */
  background:
    radial-gradient(ellipse 95% 60% at 50% -8%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 80%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 42%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(170deg, rgba(22, 24, 28, 0.65) 0%, rgba(12, 14, 17, 0.55) 50%, rgba(7, 8, 9, 0.75) 100%);
  backdrop-filter: blur(32px) saturate(190%) contrast(108%);
  -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(108%);

  /* Thin 1px neutral crisp glass border (zero neon in idle state) */
  border: 1px solid rgba(255, 255, 255, 0.12);

  /* Deep physical ground shadow & neutral specular rim (NO COLOR GLOW) */
  box-shadow:
    0 32px 85px -12px rgba(0, 0, 0, 0.85),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.6);

  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  cursor: pointer;
  transition:
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Thin 1px Neutral Frosted Glass Specular Rim (NO NEON IN DEFAULT STATE) */
.platform-showcase .platform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.02) 60%,
    rgba(255, 255, 255, 0.16) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.35s ease, filter 0.35s ease, background 0.35s ease;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   HOVER STATE: Crisp, Sharp 1px Border Highlight (ZERO GLOW)
   -------------------------------------------------------------------------- */
.platform-showcase .platform-card:hover {
  /* Crisp 1px border highlight (clean line, zero fuzzy glow) */
  border-color: rgba(255, 255, 255, 0.36);

  /* Deep physical ground shadow (no outer glow or bloom) */
  box-shadow:
    0 38px 95px -12px rgba(0, 0, 0, 0.92),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.6);
}

/* Crisp 1px Border Specular Sheen (Zero Drop-Shadow Glow) */
.platform-showcase .platform-card:hover::before {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(211, 156, 103, 0.75) 35%,
    rgba(255, 255, 255, 0.18) 70%,
    rgba(164, 90, 14, 0.55) 100%
  );
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Card Body & Typography Elements (Balanced Proportions)
   -------------------------------------------------------------------------- */
.platform-showcase .card-body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 32px) 0;
}

.platform-showcase .card-title {
  font-family: var(--font-venera, 'Venera', 'Venara', sans-serif);
  font-size: clamp(21px, 1.6vw, 25px);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.25;
  color: var(--text-main);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: color 0.3s ease;
}

.platform-showcase .card-title .x-mark {
  color: var(--copper-light);
  font-weight: 800;
  transition: color 0.3s ease;
}

.platform-showcase .card-rule {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper-light), var(--copper));
  margin-bottom: 14px;
  transition: width 0.35s ease, background 0.35s ease;
}

.platform-showcase .card-desc {
  font-family: var(--font-lausanne, 'Lausanne', sans-serif);
  font-size: clamp(14px, 1.0vw, 16px);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 440px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Card typography & accents on hover (Crisp, Zero Glow) */
.platform-showcase .platform-card:hover .card-rule {
  background: linear-gradient(90deg, #D39C67 0%, #FFFFFF 100%);
  box-shadow: none;
  width: 48px;
}

.platform-showcase .platform-card:hover .card-title .x-mark {
  color: #D39C67;
  text-shadow: none;
}

.platform-showcase .platform-card:hover .card-title {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Card Visual Container
   -------------------------------------------------------------------------- */
.platform-showcase .card-visual {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 100%);
}

.platform-showcase .card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 14, 16, 0) 65%, rgba(13, 14, 16, 0.45) 100%);
  z-index: 1;
  pointer-events: none;
}

.platform-showcase .card-visual img,
.platform-showcase .card-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-showcase .platform-card:hover .card-visual img,
.platform-showcase .platform-card:hover .card-visual svg {
  transform: scale(1.03);
}

.platform-showcase .card-visual svg {
  padding: 16%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Progress Bar
   -------------------------------------------------------------------------- */
.platform-showcase .showcase-progress {
  max-width: 440px;
  margin: clamp(12px, 1.8vh, 22px) auto 0;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(199, 201, 204, 0.14);
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.platform-showcase .showcase-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--copper), var(--copper-light), var(--copper-neon));
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Responsive Layout & Media Queries
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .platform-showcase {
    --card-w: clamp(330px, 35vw, 410px);
    --spacing: clamp(400px, 42vw, 490px);
    --stage-h: clamp(480px, 58vh, 560px);
    padding: 14px 20px 12px;
  }
  .platform-showcase .showcase-head {
    margin-bottom: 22px;
  }
  .platform-showcase .showcase-title {
    font-size: clamp(28px, 3.8vw, 42px);
  }
  .platform-showcase .showcase-desc {
    font-size: clamp(14.5px, 1.3vw, 16px);
    line-height: 1.45;
  }
  .platform-showcase .card-body {
    padding: 26px 22px 0;
  }
  .platform-showcase .card-title {
    font-size: 21px;
  }
  .platform-showcase .card-desc {
    font-size: 14px;
    max-width: 340px;
  }
}

@media (max-width: 640px) {
  .platform-showcase {
    --card-w: clamp(290px, 86vw, 350px);
    --spacing: 330px;
    --stage-h: 460px;
    padding: 16px 14px 10px;
  }
  .platform-showcase .showcase-head {
    margin-bottom: 16px;
  }
  .platform-showcase .showcase-title {
    font-size: clamp(24px, 6.5vw, 32px);
  }
  .platform-showcase .showcase-desc {
    font-size: 13.5px;
    line-height: 1.45;
  }
  .platform-showcase .showcase-desc-line {
    display: inline;
  }
  .platform-showcase .card-body {
    padding: 22px 18px 0;
  }
  .platform-showcase .card-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .platform-showcase .card-rule {
    margin-bottom: 10px;
    height: 2px;
  }
  .platform-showcase .card-desc {
    font-size: 13px;
    max-width: 290px;
  }
}

/* Height-based media query for smaller screens / laptops */
@media (max-height: 820px) and (min-width: 641px) {
  .platform-showcase {
    --card-w: clamp(330px, 24vw, 395px);
    --spacing: clamp(420px, 33vw, 480px);
    --stage-h: clamp(450px, 58vh, 500px);
    padding: 10px 20px 8px;
  }
  .platform-showcase .showcase-head {
    margin-bottom: clamp(16px, 2.5vh, 24px);
  }
  .platform-showcase .showcase-title {
    font-size: clamp(1.45rem, 2.4vw, 2.3rem);
    margin-bottom: 8px;
  }
  .platform-showcase .showcase-desc {
    font-size: clamp(0.88rem, 0.95vw, 0.98rem);
    line-height: 1.4;
  }
  .platform-showcase .card-body {
    padding: 22px 20px 0;
  }
  .platform-showcase .card-title {
    font-size: 19px;
  }
  .platform-showcase .card-desc {
    font-size: 13px;
  }
  .platform-showcase .showcase-progress {
    margin-top: 8px;
  }
}

@media (max-height: 700px) and (min-width: 641px) {
  .platform-showcase {
    --card-w: clamp(290px, 21vw, 340px);
    --spacing: clamp(360px, 29vw, 410px);
    --stage-h: clamp(380px, 54vh, 420px);
    padding: 8px 16px 8px;
  }
  .platform-showcase .showcase-head {
    margin-bottom: 12px;
  }
  .platform-showcase .showcase-title {
    font-size: clamp(1.3rem, 2.1vw, 1.9rem);
    margin-bottom: 6px;
  }
  .platform-showcase .showcase-desc {
    font-size: clamp(0.8rem, 0.88vw, 0.92rem);
    line-height: 1.35;
  }
  .platform-showcase .card-body {
    padding: 18px 16px 0;
  }
  .platform-showcase .card-title {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .platform-showcase .card-desc {
    font-size: 12px;
    line-height: 16px;
  }
  .platform-showcase .showcase-progress {
    margin-top: 6px;
  }
}