/* ==========================================================================
   AIRNSOLE TECH — STARTXCEL feature slider
   --------------------------------------------------------------------------
   An auto-advancing, swipeable slider through STARTXCEL's real navigation
   order — Home, Messages, Work Leagues, Career Hub, Execution Hub, Profile —
   each slide pairing copy with the app's actual screenshot inside a
   phone-frame mockup. Reuses the site's existing tokens and .glass/.tag
   primitives so the frame itself reads as part of the same system.
   ========================================================================== */

.appshow {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
}

/* --- Tabs, each carrying its own auto-play progress fill ------------------ */

.appshow__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-lg);
}

.appshow__tab {
  position: relative;
  overflow: hidden;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.appshow__tab:hover { border-color: var(--glass-edge-strong); color: var(--ink-primary); }

.appshow__tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
}

.appshow__tab-label { position: relative; z-index: 1; }

.appshow__tab-progress {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.32);
  transform: scaleX(0);
  transform-origin: left;
}

.appshow__tab-progress.is-animating {
  animation: tab-progress var(--autoplay-ms, 5000ms) linear forwards;
}

@keyframes tab-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Stage: copy pane + device ---------------------------------------------
   align-items: start (not center) is deliberate — each pane's heading wraps
   to a different number of lines, so centering the row would re-centre the
   copy block, and visibly shift, every time the slide changes. Anchoring
   both columns to the same top edge keeps the text rock-steady. */

.appshow__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.appshow__copy { position: relative; min-height: 14rem; padding-top: 0.35rem; }

.appshow__pane { display: none; gap: 0.9rem; }

.appshow__pane.is-active {
  display: grid;
  animation: pane-in 0.5s var(--ease-out);
}

.appshow__pane h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink-primary);
}

.appshow__pane p {
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

@keyframes pane-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

/* --- Slider controls: prev / play-pause / next ---------------------------- */

.appshow__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--space-lg);
}

.appshow__arrow,
.appshow__playpause {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-primary);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition-snap);
}

.appshow__arrow svg,
.appshow__playpause svg { width: 1rem; height: 1rem; }

.appshow__arrow:hover,
.appshow__playpause:hover {
  border-color: var(--glass-edge-strong);
  background: rgba(255, 255, 255, 0.85);
}

.appshow__arrow:active,
.appshow__playpause:active { transform: scale(0.92); }

.appshow__playpause .icon-play { display: none; }
.appshow__playpause.is-paused .icon-pause { display: none; }
.appshow__playpause.is-paused .icon-play { display: block; }

/* --- Device frame ----------------------------------------------------------- */

.appshow__device { display: flex; justify-content: center; touch-action: pan-y; }

.device {
  position: relative;
  width: min(100%, 18.5rem);
  aspect-ratio: 9 / 18.7;
  padding: 0.55rem;
  border-radius: 2.5rem;
  background: linear-gradient(160deg, #1E3A5F, #0F1E30);
  box-shadow: var(--lift-floating);
  user-select: none;
}

.device::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(44, 79, 124, 0.6), rgba(44, 79, 124, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--surface-canvas);
}

/* --- Screens: the app's actual screenshots, cross-faded ----------------------
   Each incoming screen settles in with a slight zoom-and-drop rather than a
   flat cross-fade — reads as one screen sliding in behind the last, closer
   to a real app transition. */

.mock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  visibility: hidden;
  scale: 1.05;
  translate: 0 -1.5%;
  transition: opacity 0.5s var(--ease-out), scale 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}

.mock.is-active {
  opacity: 1;
  visibility: visible;
  scale: 1;
  translate: 0 0;
}

/* Pointer-tracked 3D tilt on the device — JS supplies the rotation via
   inline transform on pointermove, this just owns the snap-back. */
.device {
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.device__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    140% 70% at var(--pointer-x, 50%) var(--pointer-y, 0%),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0) 55%
  );
  mix-blend-mode: overlay;
  transition: opacity var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .appshow__device.is-tilting .device__glare { opacity: 1; }
}


/* --- Responsive --------------------------------------------------------------- */

@media (max-width: 900px) {
  .appshow__stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: var(--space-xl);
  }

  .appshow__pane p { margin-inline: auto; }
  .appshow__copy { order: 2; min-height: 0; padding-top: 0; }
  /* `justify-items: center` above (for centering the copy text) otherwise
     shrinks every grid item to its content width — with nothing but
     absolutely-positioned children, .device's content width is ~0, so the
     phone frame (and the screenshot inside it) collapsed to nothing. Stretch
     this one item back to the full column width so it sizes itself instead. */
  .appshow__device { order: 1; justify-self: stretch; }
}

@media (max-width: 560px) {
  .appshow__tabs { gap: 0.3rem; }
  .appshow__tab { padding: 0.5rem 0.85rem; font-size: 0.8125rem; }
}