@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@300;400;500;700;900&display=swap");
/* Coolors Exported Palette - https://coolors.co/0b132b-1c2541-6a3d14-df9a57-ffffff */
/* Optional CSS variables (helpful for runtime tweaks) */
:root {
  --oxford-blue: #0b132b; /* deep navy */
  --space-cadet: #1c2541; /* darker navy */
  --sepia: #6a3d14; /* warm brown */
  --butterscotch: #df9a57; /* warm accent */
  --white: #ffffff;
  --dark: ##0b132b;
}

/* Nice-to-have gradients */
/* Convenience wrappers */
/* Optional: only() helper */
/* Height helper from your variables map */
/* -------------------------------------------------
   Easing + tunables
-------------------------------------------------- */
/* Subtle Ken Burns scale */
/* -------------------------------------------------
   Keyframes (legacy slide fade / caption)
-------------------------------------------------- */
@keyframes slideFade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  12% {
    opacity: 1;
    transform: scale(1.009);
  }
  75% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}
@keyframes captionFadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  14% {
    opacity: 1;
    transform: translateY(0);
  }
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* -------------------------------------------------
   Highlight region + slideshow
-------------------------------------------------- */
.highlight {
  --slide-h: 700px; /* base height var */
  position: relative;
  min-height: var(--slide-h);
}
.highlight .slideshow {
  position: relative;
  width: 100%;
  height: var(--slide-h);
  overflow: hidden;
  background-color: #0b132b;
  color: #ffffff;
  margin: 0;
  padding: 0;
  list-style: none;
}
.highlight .slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent url(../../images/pattern.png) repeat top left;
  z-index: 0;
  pointer-events: none;
}
.highlight .slideshow li {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  /* Old animation name (overridden later by imageFade) */
  animation-name: slideFade;
  animation-duration: 18s;
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  /* perf hints */
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.highlight .slideshow li picture,
.highlight .slideshow li img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translateZ(0); /* GPU hint */
  will-change: opacity, transform;
}
.highlight .slideshow li {
  /* Soft gradient overlay for better text contrast */
}
.highlight .slideshow li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 19, 43, 0.85) 0%, rgba(11, 19, 43, 0.55) 22%, rgba(11, 19, 43, 0.2) 45%, transparent 60%);
}
.highlight .slideshow li .cb-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8rem + max(env(safe-area-inset-bottom, 0px), 0px));
  z-index: 2;
  text-align: center;
  color: #fff;
  /* Old caption animation (overridden later by titleFade) */
  animation-name: captionFadeUp;
  animation-duration: 18s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.highlight .slideshow li .cb-caption h3 {
  font-size: clamp(1.75rem, 8.5vw, 7.5rem);
  line-height: 1.05;
  color: #df9a57;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.95);
}
.highlight .slideshow li .cb-caption h3 a {
  color: inherit;
}
.highlight .slideshow li .cb-caption p {
  color: #f9fafb;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.9);
}
.highlight .slideshow {
  /* Stagger timings per slide (base animation delays) */
}
.highlight .slideshow li:nth-child(1) {
  animation-delay: 0s;
}
.highlight .slideshow li:nth-child(1) .cb-caption {
  animation-delay: 0s;
}
.highlight .slideshow li:nth-child(2) {
  animation-delay: 6s;
}
.highlight .slideshow li:nth-child(2) .cb-caption {
  animation-delay: 6s;
}
.highlight .slideshow li:nth-child(3) {
  animation-delay: 12s;
}
.highlight .slideshow li:nth-child(3) .cb-caption {
  animation-delay: 12s;
}
.highlight {
  /* Responsive heights via bridge mixins */
}
@media (max-width: 991.98px) {
  .highlight {
    --slide-h: 560px;
  }
}
@media (max-width: 767.98px) {
  .highlight {
    --slide-h: 480px;
  }
}
@media (max-width: 575.98px) {
  .highlight {
    --slide-h: 400px;
  }
}

/* 🔹 Stronger text readability on captions */
.highlight .slideshow li .cb-caption h3,
.highlight .slideshow li .cb-caption p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.9);
}

/* -------------------------------------------------
   Reduced motion: prefer static first slide
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .highlight .slideshow li,
  .highlight .slideshow li .cb-caption {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .highlight .slideshow li:not(:first-child) {
    display: none;
  }
}
/* -------------------------------------------------
   No-animation fallback (legacy)
-------------------------------------------------- */
.no-cssanimations .slideshow li {
  opacity: 1;
}
.no-cssanimations .slideshow li:not(:first-child) {
  display: none;
}

/* -------------------------------------------------
   FINAL keyframes used for click behaviour
   (pointer-events only on "visible" window)
-------------------------------------------------- */
@keyframes imageFade {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  5% {
    opacity: 1;
    pointer-events: auto;
  } /* start clickable */
  25% {
    opacity: 1;
    pointer-events: auto;
  } /* fully visible, clickable */
  30% {
    opacity: 0;
    pointer-events: none;
  } /* fade out, stop clicks */
  100% {
    opacity: 0;
    pointer-events: none;
  }
}
@keyframes titleFade {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  6% {
    opacity: 1;
    pointer-events: auto;
  }
  25% {
    opacity: 1;
    pointer-events: auto;
  }
  27% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}
/* Re-assert animations so these keyframes are used */
.highlight .slideshow li {
  animation: imageFade 18s linear infinite both;
}

.highlight .slideshow li .cb-caption {
  animation: titleFade 18s linear infinite both;
}

/* 3) Stagger delays across exactly $slides slides */
.highlight .slideshow li:nth-child(1) {
  animation-delay: 0s;
}

.highlight .slideshow li:nth-child(1) .cb-caption {
  animation-delay: 0s;
}

.highlight .slideshow li:nth-child(2) {
  animation-delay: 6s;
}

.highlight .slideshow li:nth-child(2) .cb-caption {
  animation-delay: 6s;
}

.highlight .slideshow li:nth-child(3) {
  animation-delay: 12s;
}

.highlight .slideshow li:nth-child(3) .cb-caption {
  animation-delay: 12s;
}

/* Optional perf hint + base click behaviour:
   default to non-clickable; keyframes turn clicks on when visible */
.highlight .slideshow li,
.highlight .slideshow li .cb-caption {
  will-change: opacity;
  pointer-events: none;
}
/*# sourceMappingURL=slideshow.min.css.map */