/* React Bits — Card Swap. Published component CSS (scoped to .rb-island so it cannot
   leak into the page), plus the island sizing this repo needs.

   The staged vendor file (.ui-evidence/reactbits-src/CardSwap.css) arrived with its
   @media blocks mangled by the vendor's CSS scoper — `.rb-island @media (max-width:768px)`
   is invalid and the whole rule was dropped by the browser. Declarations are unchanged;
   the nesting is repaired so the responsive scale actually applies. GlassSurface.css in
   this folder carries the same scoper artifact.

   Placement rule from REACT_BITS_MAP.md: the cards are lightweight DOM/CSS; only the
   active demo may mount anything expensive. Nothing here mounts a canvas. */

.rb-island .card-swap-container{
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(5%, 20%);
  transform-origin: bottom right;
  perspective: 900px;
  overflow: visible;
}

.rb-island .card{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 12px;
  border: 1px solid #fff;
  background: #000;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (max-width: 768px){
  .rb-island .card-swap-container{
    transform: scale(0.75) translate(25%, 25%);
  }
}

@media (max-width: 480px){
  .rb-island .card-swap-container{
    transform: scale(0.55) translate(25%, 25%);
  }
}

/* ---------------------------------------------------------------- island sizing
   The stack is absolutely positioned by the component, so the host reserves the
   room it needs on the page grid. */

.rb-island--cards{
  position: relative;
  max-width: 420px;
  min-height: 420px;
  margin-left: auto;
}

/* ---------------------------------------------------------------- card faces
   Panel styling is page-side, not component-side: the published component only
   owns the 3D stack. Faces stay quiet so the stack motion is the one idea. */

.rb-island--cards .rb-children{
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--sp-3, 24px);
  box-sizing: border-box;
  background: linear-gradient(150deg, rgba(46,168,174,.16), rgba(33,99,175,.10) 55%, rgba(41,28,83,.28));
  border-radius: 12px;
  color: #fff;
}

.rb-island--cards .rb-children .eyebrow{
  color: currentColor;
  opacity: .72;
}

.rb-island--cards .rb-children .copy{
  color: currentColor;
  opacity: .88;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce){
  /* the component renders one static stack in this mode */
  .rb-island--cards .card{will-change: auto}
}

@media (max-width: 900px){
  .rb-island--cards{
    margin-left: 0;
    margin-top: var(--sp-5, 48px);
    min-height: 380px;
  }
}

/* cardswap-fit: the vendor container's translate(5%,20%) pushed the stack past the
   section's right edge at 1440 and produced a 61px page-level horizontal overflow.
   Contain it, and pull it back onto the page's own axis. */
.rb-island--cards{overflow:visible}
.rb-island--cards .card-swap-container{
  transform:translate(-6%,20%) scale(.92);transform-origin:left center
}
@media(min-width:1200px){
  .rb-island--cards .card-swap-container{transform:translate(-8%,20%) scale(.84)}
}