/* ============================================================
   MyCollection — app-showcase.css
   App preview — Asymmetric layout · Neon line · 3D tilt · Timeline
   ============================================================ */

.app-showcase {
  /* Réduit en haut pour coller à la section coming-soon */
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 2rem) 0;
  overflow: hidden;
  position: relative;
}

.app-showcase-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: flex; flex-direction: column;
  gap: 0;
}

/* ── Row layout — asymmetric 60/40 ── */
.app-showcase-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  padding: clamp(4rem, 7vw, 7rem) 0;
  position: relative;
}

/* Separator between rows */
.app-showcase-row + .app-showcase-row {
  border-top: 1px solid var(--border-subtle);
}

/* ── Central neon divider line ── */
.app-showcase-row::before {
  content: '';
  position: absolute;
  left: 57%;
  top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(121, 74, 255, .55) 25%,
    rgba(121, 74, 255, .55) 75%,
    transparent
  );
  box-shadow: 0 0 8px rgba(121, 74, 255, .30), 0 0 24px rgba(121, 74, 255, .12);
  pointer-events: none; z-index: 0;
}

.app-showcase-row > * { position: relative; z-index: 1; }

/* Reversed row — phone left, text right */
.app-showcase-row--reverse { direction: rtl; }
.app-showcase-row--reverse > * { direction: ltr; }
.app-showcase-row--reverse::before {
  left: 43%; /* mirror of 57% for the phone-left layout */
  box-shadow: 0 0 8px rgba(236, 72, 153, .30), 0 0 24px rgba(236, 72, 153, .12);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(236, 72, 153, .45) 25%,
    rgba(236, 72, 153, .45) 75%,
    transparent
  );
}

/* ── Decorative large number ── */
.as-num {
  position: absolute;
  top: -0.12em; left: -0.05em;
  font-size: clamp(7rem, 14vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-primary);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Text side ── */
.app-showcase-text { position: relative; }

.app-showcase-eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(121,74,255,.10); border: 1px solid var(--border);
  padding: .3rem .85rem; border-radius: 20px;
  margin-bottom: 1.5rem;
}

/* Title — gradient violet→bleu pour row 1 */
.app-showcase-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.08;
  margin-bottom: 1.75rem;
  background: linear-gradient(135deg, #f0f0ff 0%, #c4b5fd 45%, #818cf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Row 2 — gradient rose→fuchsia */
.app-showcase-row--reverse .app-showcase-title {
  background: linear-gradient(135deg, #fff0f6 0%, #f9a8d4 45%, #f472b6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Timeline bullets ── */
.showcase-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 2.5rem;
  padding-left: 0;
  margin-left: .4rem;
  border-left: 2px solid rgba(121, 74, 255, .20);
}

.showcase-bullets li {
  position: relative;
  padding: .65rem 0 .65rem 1.6rem;
  color: var(--text-secondary); font-size: .97rem; line-height: 1.5;
}

/* Dot on the timeline line */
.showcase-bullets li::before {
  content: '';
  position: absolute;
  left: -5px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(121, 74, 255, .12), 0 0 10px rgba(121, 74, 255, .50);
  flex-shrink: 0;
}

/* Row 2 — pink timeline */
.app-showcase-row--reverse .showcase-bullets {
  border-left-color: rgba(236, 72, 153, .22);
}
.app-showcase-row--reverse .showcase-bullets li::before {
  background: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .12), 0 0 10px rgba(236, 72, 153, .50);
}

/* ── Phone side ── */
.app-showcase-phone {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  /* 3D tilt container */
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}

/* Remove old decorative rings */
.app-showcase-phone::before,
.app-showcase-phone::after { display: none; }

/* Soft diffuse halo — replaces basic rings */
.phone-glow {
  position: absolute; inset: -80px;
  background: radial-gradient(ellipse at center,
    rgba(121, 74, 255, .30) 0%,
    rgba(121, 74, 255, .12) 40%,
    transparent 65%
  );
  filter: blur(32px);
  pointer-events: none; z-index: 0;
  transition: opacity .5s ease;
}
.phone-glow--alt {
  background: radial-gradient(ellipse at center,
    rgba(236, 72, 153, .26) 0%,
    rgba(236, 72, 153, .10) 40%,
    transparent 65%
  );
}

.phone-img {
  position: relative; z-index: 1;
  max-height: 580px; width: auto;
  border-radius: 32px;
  box-shadow:
    0 60px 120px rgba(0,0,0,.75),
    0 24px 48px rgba(0,0,0,.50),
    0 0 0 1px rgba(121,74,255,.20),
    0 0 40px rgba(121,74,255,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: phone-float 6s ease-in-out infinite;
  display: block;
}

/* ── 3D tilt on hover ── */
@media (hover: hover) {
  .app-showcase-phone:hover {
    transform: perspective(1100px) rotateY(-7deg) rotateX(2deg);
  }
  .app-showcase-row--reverse .app-showcase-phone:hover {
    transform: perspective(1100px) rotateY(7deg) rotateX(2deg);
  }
  .app-showcase-phone:hover .phone-glow {
    opacity: 1.4; /* amplify glow on hover */
  }
}

/* ── Animated poster background ── */
.app-showcase-row > .as-poster-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Vertical edge fade (top/bottom blend into bg) */
.as-poster-bg::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(8,8,16,.55) 18%,
    transparent 36%,
    transparent 64%,
    rgba(8,8,16,.55) 82%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* Horizontal edge fade (left/right) */
.as-poster-bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    transparent 22%,
    transparent 78%,
    var(--bg) 100%
  );
  pointer-events: none;
}

.as-poster-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  height: 100%;
  /* transform driven by rAF in animations.js */
}

.as-poster-item {
  aspect-ratio: 2 / 3;
  height: 100%;
  width: auto;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.22;
  filter: saturate(.65);
}

.as-poster-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .app-showcase-row::before { display: none; }
  .as-num { font-size: clamp(5rem, 18vw, 7rem); }
  .app-showcase-row { grid-template-columns: 1fr; }
  .app-showcase-row--reverse { direction: ltr; }
  .app-showcase-row--reverse > * { direction: ltr; }
}
@media (max-width: 768px) {
  .as-num { font-size: 5rem; opacity: .035; }
}