/* ==========================================================================
   CIPHER KNIGHTS — HERO CAROUSEL (video + image slides)
   Slides are declared in settings.HERO_SLIDES. A video slide renders its
   poster image underneath the <video>; the video only fades in once the
   browser confirms it can play, so a missing or unplayable file degrades
   silently to the still image.
   ========================================================================== */

.ck-hero-carousel {
  position: relative;
  width: 100%;
  /* No max-height: the section is sized by its content plus the stats strip.
     A cap here would clip the strip off the bottom. */
  min-height: 52vh;
  background: var(--brand-black);
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 93, 170, 0.35);
}
@media (max-width: 900px) { .ck-hero-carousel { min-height: 62vh; max-height: none; } }

/* Continuous slider: the slides sit side by side on one flex track that is
   translated horizontally. A clone of the first slide is appended by the JS so
   the loop can run past the last slide and snap back invisibly - there is no
   rewind and no pause at the end. */
.ck-hero-track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: inherit;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.ck-hero-track.no-transition { transition: none; }

.ck-hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Without JS the track is a single visible slide rather than a stack. */
.no-js .ck-hero-slide:not(:first-child) { display: none; }

/* --- media layer -------------------------------------------------------- */
.ck-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 1; }

.ck-hero-img,
.ck-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ck-hero-img {
  transform: scale(1.02);
  transition: transform 9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ck-hero-slide.active .ck-hero-img { transform: scale(1.10); }   /* slow Ken Burns drift */
.ck-hero-slide:not(.active) .ck-hero-img { transform: scale(1.02); }

/* Video starts invisible and is revealed by JS once it can actually play,
   so the poster image below remains the fallback if the file is missing. */
.ck-hero-video { opacity: 0; transition: opacity 0.6s ease; }
.ck-hero-slide.video-ready .ck-hero-video { opacity: 1; }

.ck-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Directional scrim: heaviest on the left where the copy sits, clearing to
     the right so the photograph actually reads. Keeps white body text above
     4.5:1 on the text side while letting the image show through elsewhere. */
  background:
    linear-gradient(105deg, rgba(8,10,14,0.88) 0%, rgba(8,10,14,0.62) 42%, rgba(8,10,14,0.20) 100%),
    linear-gradient(180deg, rgba(8,10,14,0.42) 0%, rgba(8,10,14,0.04) 45%, rgba(8,10,14,0.72) 100%);
}

/* --- content layer ------------------------------------------------------ */
.ck-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 34px;
  padding-bottom: 56px;
}

.ck-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 14px;
}

.ck-hero-title {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 17ch;
  margin-bottom: 18px;
}
.ck-hero-title em { font-style: normal; color: var(--accent-on-dark); }

.ck-hero-text {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.75;
  color: #d6dbe2;
  max-width: 54ch;
  margin-bottom: 24px;
}

.ck-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* --- stats strip -------------------------------------------------------- */
.ck-hero-stats {
  position: relative;
  z-index: 4;
  border-top: 1px solid rgba(255,255,255,0.14);
  background: rgba(8,10,14,0.72);
  backdrop-filter: blur(8px);
}
.ck-hero-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.10);
}
@media (max-width: 820px) { .ck-hero-stats-inner { grid-template-columns: repeat(2, 1fr); } }

.ck-hero-stat { background: rgba(8,10,14,0.55); padding: 14px 26px; }
.ck-hero-stat-num {
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.ck-hero-stat-label {
  font-size: 11px;
  color: var(--accent-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-top: 7px;
  display: block;
}
.ck-hero-stat-sub { font-size: 11px; color: #99a2ad; margin-top: 3px; display: block; }

/* --- controls ----------------------------------------------------------- */
.ck-hero-controls {
  position: absolute;
  bottom: 88px;
  left: var(--container-pad);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(8, 10, 14, 0.80);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 9px 16px;
  border-radius: 9999px;
}
@media (max-width: 900px) {
  .ck-hero-controls { left: 50%; transform: translateX(-50%); bottom: 124px; }
}

.ck-hero-indicators { display: flex; align-items: center; gap: 8px; }

.ck-hero-dot {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: width 0.3s ease, background 0.3s ease;
}
.ck-hero-dot:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 4px; }
.ck-hero-dot.active { width: 52px; background: rgba(255, 255, 255, 0.30); }

.ck-hero-dot-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent-on-dark);
  border-radius: 2px;
}
.ck-hero-dot.active .ck-hero-dot-fill { animation: ckHeroFill 7s linear forwards; }
.ck-hero-dot.active.paused .ck-hero-dot-fill { animation-play-state: paused; }
@keyframes ckHeroFill { from { width: 0; } to { width: 100%; } }

.ck-hero-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}
.ck-hero-btn:hover { color: #fff; background: rgba(0, 93, 170, 0.35); }
.ck-hero-btn:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }

.ck-hero-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Reduced motion: no auto-advance animation, no Ken Burns drift. The JS also
   stops auto-rotation, leaving a manually controlled slideshow. */
@media (prefers-reduced-motion: reduce) {
  .ck-hero-slide.active .ck-hero-img { transform: scale(1.02); }
  .ck-hero-dot.active .ck-hero-dot-fill { animation: none; width: 100%; }
}