/* ═══════════════════════════════════════════════════════════
   IT BOY — v7 Refinements CSS
   R09  Client logo slider dark/light theme switching
   R10  Hero section bottom atmospheric shader
   R11  About section rebalanced layout (image removed)
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   R10 — HERO BOTTOM ATMOSPHERIC SHADER
   The screenshot shows the hard cut at the very
   bottom of the hero where it meets the stats bar.
   This shader sits at the bottom of the hero section
   and creates a cinematic depth fade into the stats.
   — No elements moved, robot untouched, layout intact —
══════════════════════════════════════════════════ */
.hero-bottom-shader {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /* Tall enough to cover the visible seam + generous bleed */
  height: 160px;
  z-index: 12;         /* above robot zone (z:10) but below header */
  pointer-events: none;
}

/* ── Dark Mode shader ── */
[data-theme="dark"]  .hero-bottom-shader,
html:not([data-theme]) .hero-bottom-shader {
  background:
    /* Primary fade: hero dark → stats bg */
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(11, 13, 16, 0.55) 45%,
      rgba(11, 13, 16, 0.82) 70%,
      #0c0e10 100%
    ),
    /* Horizontal atmospheric depth: left blue glow from robot side */
    radial-gradient(
      ellipse 70% 60% at 30% 80%,
      rgba(26, 86, 219, 0.08) 0%,
      transparent 65%
    ),
    /* Right side — natural dark fade */
    radial-gradient(
      ellipse 50% 80% at 80% 100%,
      rgba(8, 10, 14, 0.3) 0%,
      transparent 70%
    );
  transition: background 0.55s ease;
}

/* ── Light Mode shader ── */
[data-theme="light"] .hero-bottom-shader {
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(245, 247, 250, 0.55) 45%,
      rgba(245, 247, 250, 0.88) 72%,
      #f5f7fa 100%
    ),
    radial-gradient(
      ellipse 70% 60% at 30% 80%,
      rgba(26, 86, 219, 0.05) 0%,
      transparent 65%
    );
  transition: background 0.55s ease;
}

/* Ensure hero overflow is hidden at bottom — shader stays inside */
#heroSection { overflow: hidden; }


/* ══════════════════════════════════════════════════
   R09 — CLIENT LOGO SLIDER: Dark / Light Theme
   JS swaps img[src] from data-dark / data-light attrs.
   CSS provides the smooth crossfade transition.
══════════════════════════════════════════════════ */
.cl-themed {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  /* Smooth crossfade when src changes */
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.3s ease;
}
/* Dark mode: logos already optimised for dark */
[data-theme="dark"] .cl-themed,
html:not([data-theme]) .cl-themed {
  filter: brightness(0.95) saturate(1.05);
  opacity: 0.9;
}
[data-theme="dark"] .client-logo:hover .cl-themed,
html:not([data-theme]) .client-logo:hover .cl-themed {
  filter: brightness(1.1) saturate(1.15);
  opacity: 1;
  transform: scale(1.06);
}

/* Light mode: logos optimised for light */
[data-theme="light"] .cl-themed {
  filter: brightness(0.9) contrast(1.1) saturate(1.05);
  opacity: 0.88;
}
[data-theme="light"] .client-logo:hover .cl-themed {
  filter: brightness(1) contrast(1.05) saturate(1.1);
  opacity: 1;
  transform: scale(1.06);
}

/* Crossfade animation class added by JS during swap */
.cl-themed.cl-swapping {
  opacity: 0;
}


/* ══════════════════════════════════════════════════
   R11 — ABOUT PREVIEW: Rebalanced without image
   The .preview-layout is replaced with
   .about-preview-rebalanced — a 55/45 split that
   gives the text column more breathing room and
   makes the cards fill their space naturally.
══════════════════════════════════════════════════ */
.about-preview-rebalanced {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}

/* Text side: nothing changed, but give the desc
   a little more width now the image is gone */
.about-preview-rebalanced .preview-text .section-desc {
  max-width: 520px;
}

/* Cards: now they're the full visual focus.
   Give them more visual weight — slightly larger padding,
   stronger hover, and a subtle stagger offset */
.about-preview-rebalanced .pcs-card {
  padding: 22px 24px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-preview-rebalanced .pcs-card:hover {
  transform: translateX(6px) !important;
  border-color: var(--border-brand) !important;
  box-shadow: 0 8px 32px var(--shadow-brand) !important;
}
.about-preview-rebalanced .pcs-card strong {
  font-size: 0.95rem;
}
.about-preview-rebalanced .pcs-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 4px;
}
.about-preview-rebalanced .pcs-card > span {
  font-size: 1.8rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Stagger the card entrance on scroll-reveal */
.about-preview-rebalanced .preview-card-stack > .pcs-card-1 { transition-delay: 0.05s; }
.about-preview-rebalanced .preview-card-stack > .pcs-card-2 { transition-delay: 0.15s; }
.about-preview-rebalanced .preview-card-stack > .pcs-card-3 { transition-delay: 0.25s; }

/* Make sure removed image artefacts from previous versions are gone */
.temp-img-wrapper,
.temp-img-atmosphere,
.temp-img-atmosphere-2,
.temp-img-vignette,
.temp-img-main {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .about-preview-rebalanced {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
@media (max-width: 768px) {
  .about-preview-rebalanced {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-bottom-shader {
    height: 120px;
  }
}
@media (max-width: 480px) {
  .hero-bottom-shader { height: 90px; }
}