/* ============================================================
   CAPABILITIES SECTION: flip cards — one per SDK capability
   Reads on light and dark page backgrounds.
   ============================================================ */

/* ---- Section heading spacing ---- */
.cap-section .head {
  max-width: 760px;
}

/* ---- Card grid: 3 on top, 2 centered below (6-col base) ---- */
.cap-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(18px, 1.8vw, 26px);
  max-width: 1060px;
}
/* Each card spans 2 of the 6 columns → three per row */
.cap-cards > li { grid-column: span 2; }
/* Bottom row: two cards centered under the three above */
.cap-cards > li:nth-child(4) { grid-column: 2 / span 2; }
.cap-cards > li:nth-child(5) { grid-column: 4 / span 2; }

/* ---- Card outer shell ---- */
.cap-card {
  /* perspective lives here so each card has its own vanishing point */
  perspective: 1200px;
  height: clamp(360px, 26vw, 440px);
  border-radius: var(--r-xl);
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Focus ring */
.cap-card:focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--r-xl);
}

/* ---- Card inner: 3D stage, tilt + flip live here ---- */
.cap-card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}

/* Idle "flippable" hint lives on the flip ICON only — never on the
   flipping element. Animating .cap-card__inner's transform infinitely
   fought the flip transition (it re-asserted the transform and made the
   card jump instead of animate, especially when flipping back). */
@keyframes cap-flip-hint {
  0%, 90%, 100% { opacity: .5; }
  95%           { opacity: 1; }
}
.cap-card:not([aria-expanded="true"]) .cap-card__flip-icon {
  animation: cap-flip-hint 6s ease-in-out infinite;
}
.cap-cards li:nth-child(1) .cap-card__flip-icon { animation-delay: 0s; }
.cap-cards li:nth-child(2) .cap-card__flip-icon { animation-delay: 1.2s; }
.cap-cards li:nth-child(3) .cap-card__flip-icon { animation-delay: 2.4s; }
.cap-cards li:nth-child(4) .cap-card__flip-icon { animation-delay: 3.6s; }
.cap-cards li:nth-child(5) .cap-card__flip-icon { animation-delay: 4.8s; }

/* Hover: a gentle 3D tilt to signal the card can flip */
.cap-card:hover:not([aria-expanded="true"]) .cap-card__inner {
  transform: rotateY(-12deg);
  transition: transform .3s var(--ease);
}

/* Flipped state: rotate 180deg. Transform is driven ONLY by the
   transition on .cap-card__inner, so the flip always animates both ways. */
.cap-card[aria-expanded="true"] .cap-card__inner {
  transform: rotateY(180deg);
}

/* ---- Card faces: shared ---- */
.cap-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* ---- Front face ---- */
.cap-card__front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 30px);
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  /* front sits at 0deg so no extra transform needed */
}

/* Flip affordance icon: top-right corner */
.cap-card__flip-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  opacity: .55;
  flex: none;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.cap-card:hover .cap-card__flip-icon,
.cap-card:focus-visible .cap-card__flip-icon {
  opacity: .85;
  color: var(--accent);
}

/* Capability icon */
.cap-card__icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 10px;
  flex: none;
  margin-bottom: 4px;
}

/* Name */
.cap-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, calc(.9rem + .4vw), 1.3rem);
  font-weight: 700;
  color: var(--fg-strong);
  line-height: 1.2;
}

/* One-liner description */
.cap-card__desc {
  font-size: var(--text-body);
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0;
}

/* ---- Back face: hidden until flipped ---- */
.cap-card__back {
  transform: rotateY(180deg); /* pre-rotated so it's hidden by default */
  background: #061224; /* dashboard dark bg by default */
}

/* ============================================================
   BACK CONTENT: Lottie (card 1 — p2p)
   ============================================================ */
.cap-back-lottie {
  width: 100%;
  height: 100%;
}
.cap-back-lottie iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--r-xl);
}

/* ============================================================
   BACK CONTENT: Mini dashboard (card 2 — analytics)
   ============================================================ */
.cap-mini-db {
  /* Always dark — matches the existing dashboard palette */
  --db-panel:        #061224;
  --db-card:         rgba(5, 38, 155, .18);
  --db-border:       rgba(220, 227, 235, .16);
  --db-border-strong: rgba(33, 188, 238, .45);
  --db-text:         #fff;
  --db-muted:        #878ea0;
  --db-accent:       #21bcee;
  --db-accent-2:     #116bf8;

  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 22px);
  background: linear-gradient(145deg, #061224, #050b1f);
  border-radius: var(--r-xl);
  box-sizing: border-box;
}

.cap-mini-db__header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--db-muted);
  margin-bottom: 12px;
  flex: none;
}

.cap-mini-db__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--db-accent);
  flex: none;
  box-shadow: 0 0 6px rgba(33, 188, 238, .7);
}

.cap-mini-db__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.cap-mini-db__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 10px 9px;
  border-radius: 10px;
  background: var(--db-card);
  border: 1px solid var(--db-border);
  overflow: hidden;
}

/* Color-coded top bar per family */
.cap-mini-db__tile--offload::before,
.cap-mini-db__tile--quality::before,
.cap-mini-db__tile--energy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
}
.cap-mini-db__tile--offload::before { background: var(--db-accent); }
.cap-mini-db__tile--quality::before { background: var(--db-accent-2); }
.cap-mini-db__tile--energy::before  { background: var(--db-accent-2); }

.cap-mini-db__label {
  display: block;
  font-family: var(--font-body);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--db-muted);
  margin-bottom: 4px;
}

.cap-mini-db__val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, calc(.9rem + .5vw), 1.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--db-text);
}
.cap-mini-db__tile--offload .cap-mini-db__val,
.cap-mini-db__tile--energy .cap-mini-db__val {
  color: var(--db-accent);
}

.cap-mini-db__unit {
  font-size: .6em;
  font-weight: 500;
  color: var(--db-muted);
  margin-left: 1px;
}

.cap-mini-db__sub {
  display: block;
  font-size: .5rem;
  color: var(--db-muted);
  margin-top: 3px;
  line-height: 1.3;
}

/* ============================================================
   BACK CONTENT: shared dark panel for image-based backs
   (CDN Selector, Security, StreamBoost)
   Same dark background + inner gutter as .cap-mini-db — all five
   card backs read as one family.
   ============================================================ */
.cap-back-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #061224, #050b1f);
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Contained single image (CDN Selector, Security):
   inset gives breathing room, object-fit:contain ensures no crop */
.cap-back-img {
  position: absolute;
  inset: clamp(16px, 1.6vw, 22px);
  width: calc(100% - 2 * clamp(16px, 1.6vw, 22px));
  height: calc(100% - 2 * clamp(16px, 1.6vw, 22px));
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
}

/* ============================================================
   BACK CONTENT: StreamBoost cross-fade (inside .cap-back-panel)
   ============================================================ */
.cap-back-sb {
  position: absolute;
  inset: clamp(16px, 1.6vw, 22px);
  width: calc(100% - 2 * clamp(16px, 1.6vw, 22px));
  height: calc(100% - 2 * clamp(16px, 1.6vw, 22px));
}

.cap-back-sb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.cap-back-sb__img--active { opacity: 1; }

/* ============================================================
   REDUCED MOTION: disable tilt + auto-rotate; flat opacity flip
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cap-card,
  .cap-card * {
    animation: none !important;
    transition: none !important;
  }

  /* No tilt / hint animation at all */
  .cap-card:not([aria-expanded="true"]) .cap-card__inner,
  .cap-card:not([aria-expanded="true"]) .cap-card__flip-icon,
  .cap-card__flip-icon {
    animation: none !important;
  }
  .cap-card:hover:not([aria-expanded="true"]) .cap-card__inner {
    animation: none;
    transform: none;
  }

  /* Flat opacity crossfade instead of 3D rotation */
  .cap-card { perspective: none; }

  .cap-card__inner {
    transform: none !important;
    transition: none;
    transform-style: flat;
  }

  .cap-card__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .cap-card__front,
  .cap-card__back {
    transition: none;
  }

  .cap-card__back {
    transform: none !important;
    opacity: 0;
    pointer-events: none;
  }

  .cap-card[aria-expanded="true"] .cap-card__front {
    opacity: 0;
    pointer-events: none;
  }
  .cap-card[aria-expanded="true"] .cap-card__back {
    opacity: 1;
    pointer-events: auto;
  }

  /* StreamBoost: show only the first image, no crossfade */
  .cap-back-sb .cap-back-sb__img { transition: none; }
  .cap-back-sb .cap-back-sb__img:not(.cap-back-sb__img--active) { opacity: 0 !important; }
  .cap-back-sb .cap-back-sb__img--active { opacity: 1 !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: 2 per row (4-col base), 5th centered on its own row */
@media (max-width: 980px) {
  .cap-cards {
    grid-template-columns: repeat(4, 1fr);
    max-width: 760px;
  }
  .cap-cards > li,
  .cap-cards > li:nth-child(4) { grid-column: span 2; }
  .cap-cards > li:nth-child(5) { grid-column: 2 / span 2; }
  .cap-card { height: clamp(340px, 48vw, 420px); }
}

/* Mobile: single column, full width */
@media (max-width: 560px) {
  .cap-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 14px;
  }
  .cap-cards > li,
  .cap-cards > li:nth-child(4),
  .cap-cards > li:nth-child(5) { grid-column: 1 / -1; }
  .cap-card { height: clamp(320px, 86vw, 380px); }
}