/* ════════════════════════════════════════════════════════════════════
   BEYOND STEEL — Premium 3D Card View Slider
   Isolated, reusable component. Visual language borrows the site's
   existing .pillar-card / .pillar-img-wrap / .pillar-body / .pillar-badge
   classes (defined in index.html) so it blends into the page as-is.

   Motion contract: only transform / opacity / filter are animated.
   Width, height, margin, left and top are never transitioned.
   ════════════════════════════════════════════════════════════════════ */

.bs3d {
  position: relative;
  width: 100%;
  padding: 2.5rem 0 2.25rem;
  border-radius: 2rem;
  isolation: isolate;
}

/* ── ambient background: same opaque, clipped "floating panel" recipe as
   the Quality / Our Process / Why Join Us carousels' .qcc-bg / .pcc-bg /
   .cbc-bg, so this card-view reads as one continuous carousel system with
   the rest of the site instead of a blended, boundary-less tint.
   Fixed-px top/bottom bleed, not %: a percentage inset scales with
   .bs3d's own height, which grows with the CTA content — see
   process-carousel.css's .pcc-bg for the section-boundary overlap that
   caused (same fix applied here, and to .qcc-bg, for consistency across
   all three carousels). ── */
.bs3d-bg { position: absolute; top: -32px; right: -3%; bottom: -32px; left: -3%; z-index: -1; pointer-events: none; border-radius: 2rem; overflow: hidden; }

@media (max-width: 760px) {
  .bs3d-bg { top: -16px; bottom: -16px; }
}
@media (max-width: 480px) {
  .bs3d-bg { top: -12px; bottom: -12px; }
}

.bs3d-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 82% 12%, rgba(255, 106, 31, .06), transparent 60%),
    radial-gradient(ellipse 55% 50% at 12% 22%, rgba(241, 243, 246, .8), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(228, 231, 236, .45), transparent 65%),
    linear-gradient(180deg, #FCFCFD 0%, #F5F6F8 100%);
}

.bs3d-texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, .5) 0, rgba(15, 23, 42, .5) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, .5) 0, rgba(15, 23, 42, .5) 1px, transparent 1px, transparent 44px);
  opacity: .025;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 90%);
}

.bs3d-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 60%; height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 106, 31, .09), transparent 65%);
  filter: blur(46px);
  animation: bs3dGlowBreathe 9s ease-in-out infinite;
}
@keyframes bs3dGlowBreathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.bs3d-shape { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .35; pointer-events: none; }
.bs3d-shape.s1 { left: 6%; top: 18%; width: 130px; height: 130px; background: rgba(255, 106, 31, .16); animation: bs3dFloat 13s ease-in-out infinite; }
.bs3d-shape.s2 { right: 8%; top: 55%; width: 90px; height: 90px; background: rgba(255, 194, 75, .18); animation: bs3dFloat 16s ease-in-out infinite 2s; }
.bs3d-shape.s3 { left: 30%; bottom: 6%; width: 70px; height: 70px; background: rgba(255, 106, 31, .12); animation: bs3dFloat 11s ease-in-out infinite 4s; }
@keyframes bs3dFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -24px); }
}

/* large soft ambient shadow the whole stage appears to float above */
.bs3d-floor-shadow {
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  width: min(70%, 640px);
  height: 70px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(10, 11, 14, .28) 0%, rgba(10, 11, 14, 0) 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.bs3d-viewport {
  position: relative;
  width: 100%;
  height: 460px;
  z-index: 1;
}

.bs3d-stage {
  position: absolute;
  inset: 0;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  transition: transform .5s cubic-bezier(.16, .84, .44, 1);
  /* In a preserve-3d context, this untransformed wrapper sits at the near
     z=0 plane and otherwise wins hit-testing over its own translateZ()-pushed-
     back children (a known cross-browser 3D quirk) — hand pointer-events back
     to the cards themselves so side cards stay clickable. */
  pointer-events: none;
}

.bs3d-stage.dragging {
  cursor: grabbing;
  transition: none;
}

.bs3d-stage:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 106, 31, .45);
  border-radius: 1.75rem;
}

/* static centering wrapper — never animated; only its child .bs3d-card moves */
.bs3d-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--coverflow-card-w);
  height: 400px;
  margin: -200px 0 0 calc(var(--coverflow-card-w) / -2);
}

.bs3d-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  will-change: transform, opacity, filter;
  transform-origin: 50% 50%;
  box-shadow: 0 30px 60px -22px rgba(20, 22, 28, .38), 0 10px 24px rgba(20, 22, 28, .12);
  pointer-events: auto;
}

/* active/center card reads as "in focus" — accent ring + warm glow,
   the same recipe as .pillar-card:hover so it feels like one system */
.bs3d-card.is-center {
  border-color: rgba(255, 106, 31, .4);
  box-shadow: 0 30px 60px -18px rgba(20, 22, 28, .18), 0 0 46px rgba(255, 106, 31, .16);
}

.bs3d-card.is-hovered {
  box-shadow: 0 42px 84px -22px rgba(20, 22, 28, .48), 0 14px 32px rgba(255, 106, 31, .24);
}

/* soft inner highlight ring, echoes a glass edge catching light */
.bs3d-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 0 0 1px rgba(255, 255, 255, .3);
  pointer-events: none;
  z-index: 4;
}

/* diagonal glass reflection sweep + cursor spotlight (--mx/--my set by
   beyond-steel-slider.js on the .bs3d-card ancestor, custom props inherit
   down to this element — mirrors career-benefits-carousel.css's .cbc-card::after) */
.bs3d-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 0%), rgba(255, 145, 40, .16), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
}

.bs3d-card:hover .bs3d-shine,
.bs3d-card:focus-visible .bs3d-shine {
  opacity: 1;
}

.bs3d-shine::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -35%;
  width: 55%;
  height: 220%;
  background: linear-gradient(75deg, transparent 0%, rgba(255, 255, 255, .5) 45%, transparent 62%);
  transform: translateX(-160%) rotate(8deg);
  transition: transform 1s cubic-bezier(.16, .84, .44, 1);
  opacity: .55;
}

.bs3d-card.is-hovered .bs3d-shine::after {
  transform: translateX(220%) rotate(8deg);
}

.bs3d-card:focus-visible {
  outline: 2px solid var(--accent, #FF6A1F);
  outline-offset: 4px;
}

/* ── controls: arrows + pagination dots, sit below the stage ── */
.bs3d-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.bs3d-arrow {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bs3d-arrow:hover {
  border-color: var(--accent, #FF6A1F);
  box-shadow: 0 10px 26px rgba(255, 106, 31, .28);
  transform: scale(1.08);
}

.bs3d-arrow:active {
  transform: scale(.94);
}

.bs3d-arrow:focus-visible {
  outline: 2px solid var(--accent, #FF6A1F);
  outline-offset: 2px;
}

.bs3d-arrow svg {
  width: 18px;
  height: 18px;
}

.bs3d-dots {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* visible dot stays 8px (26px pill when active) — padding + content-box
   clipping grows only the invisible tap target to the ~32px minimum,
   without changing what's drawn (box-sizing:border-box means width:32px
   is the full hit target and padding:12px leaves an 8px painted center). */
.bs3d-dot {
  appearance: none;
  -webkit-appearance: none;
  padding: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--border);
  background-clip: content-box;
  cursor: pointer;
  transition: width .35s cubic-bezier(.16, .84, .44, 1), background .3s ease;
}

.bs3d-dot:hover {
  background: var(--accent-hot);
}

.bs3d-dot.active {
  width: 50px;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent));
}

.bs3d-dot:focus-visible {
  outline: 2px solid var(--accent, #FF6A1F);
  outline-offset: 2px;
}

/* ══ RESPONSIVE: tablet ≈ 2 cards read as visible, mobile ≈ 1 centered card ══ */
@media (max-width: 1022px) and (min-width: 641px) {
  .bs3d-viewport {
    height: 420px;
  }

  .bs3d-slot {
    height: 360px;
    margin-top: -180px;
  }
}

@media (max-width: 640px) {
  .bs3d-viewport {
    height: 420px;
  }

  .bs3d-slot {
    height: 360px;
    margin-top: -180px;
  }

  .bs3d-controls {
    gap: 1.1rem;
  }

  .bs3d-cta {
    margin: 1.25rem 1rem 0;
    padding-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs3d-stage {
    transition: none;
  }

  .bs3d-shine::after {
    transition: none;
  }

  .bs3d-card {
    transition: none;
  }
}

/* ══ DARK MODE ══ */
html[data-theme="dark"] .bs3d-arrow {
  background: rgba(27, 31, 38, .7);
  border-color: var(--border);
}

html[data-theme="dark"] .bs3d-card.is-center {
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .45), 0 0 46px rgba(255, 106, 31, .18);
}

html[data-theme="dark"] .bs3d-mesh {
  background:
    radial-gradient(ellipse 55% 45% at 82% 12%, rgba(255, 145, 40, .08), transparent 60%),
    radial-gradient(ellipse 55% 50% at 12% 22%, rgba(32, 36, 44, .5), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(18, 21, 26, .5), transparent 65%),
    linear-gradient(180deg, #12151A 0%, #161A20 100%);
}

html[data-theme="dark"] .bs3d-texture {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 44px);
  opacity: .02;
}

/* screen-reader-only slide announcement, keeps keyboard/assistive-tech users
   informed as autoplay/arrows/drag change the active pillar */
.bs3d-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── CTA: lives inside .bs3d so it shares the slider's own rounded
   panel/background instead of floating as a separate block beneath it ── */
.bs3d-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 1.75rem 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}