/* ============================================
   Hero Image Carousel — carousel.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ── */
:root {
  --hic-font-display : 'Cormorant Garamond', serif;
  --hic-font-body    : 'DM Sans', sans-serif;
  --hic-accent       : #0049A9;          /* brand blue */
  --hic-accent-end   : #00b4d8;          /* gradient end – cyan */
  --hic-accent-grad  : linear-gradient(90deg, #0049A9 0%, #0077cc 50%, #00b4d8 100%);
  --hic-white        : #ffffff;
  --hic-overlay-from : rgba(10, 8, 20, 0.55);
  --hic-overlay-to   : rgba(10, 8, 20, 0.20);
  --hic-arrow-bg     : rgba(255,255,255,0.12);
  --hic-arrow-hover  : rgba(255,255,255,0.28);
  --hic-dot-size     : 8px;
  --hic-radius       : 0px;              /* set to e.g. 16px for rounded */
  --hic-transition   : 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}

/* ── Wrapper ── */
.hic-carousel {
  position     : relative;
  width        : 100%;
  height       : var(--hic-height, 580px);
  overflow     : hidden;
  border-radius: var(--hic-radius);
  font-family  : var(--hic-font-body);
  user-select  : none;
  -webkit-user-select: none;
}

/* ── Track ── */
.hic-track {
  position: relative;
  width   : 100%;
  height  : 100%;
}

/* ── Slide ── */
.hic-slide {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  opacity   : 0;
  visibility: hidden;
  transition: opacity var(--hic-transition), visibility var(--hic-transition);
  will-change: opacity;
}
.hic-slide.hic-active {
  opacity   : 1;
  visibility: visible;
  z-index   : 2;
}

/* Slide effect: slide (horizontal) */
.hic-effect-slide .hic-slide {
  transform : translateX(100%);
  transition: transform var(--hic-transition), opacity 0s var(--hic-transition), visibility 0s var(--hic-transition);
  opacity   : 1;
  visibility: visible;
}
.hic-effect-slide .hic-slide.hic-active {
  transform : translateX(0);
  transition: transform var(--hic-transition);
  z-index   : 2;
}
.hic-effect-slide .hic-slide.hic-leaving {
  transform : translateX(-100%);
  z-index   : 1;
  transition: transform var(--hic-transition);
}

/* ── Background image ── */
.hic-slide-bg {
  position           : absolute;
  inset              : 0;
  background-size    : cover;
  background-position: center center;
  background-repeat  : no-repeat;
  transform          : scale(1);
  transition         : transform 8s ease-out;
  will-change        : transform;
}
.hic-slide.hic-active .hic-slide-bg {
  transform: scale(1.06);
}

/* ── Gradient overlay ── */
.hic-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    135deg,
    var(--hic-overlay-from) 0%,
    var(--hic-overlay-to)   100%
  );
}

/* ── Content block ── */
.hic-content {
  position        : absolute;
  bottom          : 0;
  left            : 0;
  right           : 0;
  padding         : 3.5rem 4rem 4.5rem;
  z-index         : 5;
  display         : flex;
  flex-direction  : column;
  align-items     : flex-start;
  gap             : 1rem;
  background      : linear-gradient(to top, rgba(5,4,12,0.72) 0%, transparent 100%);
}

.hic-title {
  margin         : 0;
  font-family    : var(--hic-font-display);
  font-size      : clamp(2.2rem, 4.5vw, 4rem);
  font-weight    : 700;
  line-height    : 1.12;
  letter-spacing : -0.02em;
  color          : var(--hic-white);
  text-shadow    : 0 2px 24px rgba(0,0,0,0.4);
  opacity        : 0;
  transform      : translateY(28px);
  transition     : opacity 0.7s 0.15s ease, transform 0.7s 0.15s ease;
}
.hic-caption {
  margin         : 0;
  font-family    : var(--hic-font-body);
  font-size      : clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight    : 300;
  letter-spacing : 0.04em;
  color          : rgba(255,255,255,0.82);
  opacity        : 0;
  transform      : translateY(24px);
  transition     : opacity 0.7s 0.28s ease, transform 0.7s 0.28s ease;
}
.hic-btn {
  display        : inline-block;
  margin-top     : 0.4rem;
  padding        : 0.75rem 2rem;
  border         : none;
  color          : #ffffff;
  background     : var(--hic-accent-grad);
  background-size: 200% auto;
  font-family    : var(--hic-font-body);
  font-size      : 0.82rem;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  text-decoration: none;
  cursor         : pointer;
  border-radius  : 2px;
  box-shadow     : 0 4px 18px rgba(0, 73, 169, 0.45);
  opacity        : 0;
  transform      : translateY(20px);
  transition     : opacity 0.7s 0.40s ease,
                   transform 0.7s 0.40s ease,
                   background-position 0.5s ease,
                   box-shadow 0.3s ease;
}
.hic-btn:hover {
  background-position: right center;
  box-shadow : 0 6px 24px rgba(0, 73, 169, 0.65);
  color      : #ffffff;
}

/* Animate in when slide is active */
.hic-slide.hic-active .hic-title,
.hic-slide.hic-active .hic-caption,
.hic-slide.hic-active .hic-btn {
  opacity  : 1;
  transform: translateY(0);
}

/* ── Arrow buttons ── */
.hic-arrow {
  position        : absolute;
  top             : 50%;
  transform       : translateY(-50%);
  z-index         : 10;
  width           : 50px;
  height          : 50px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : var(--hic-arrow-bg);
  border          : 1.5px solid rgba(255,255,255,0.20);
  border-radius   : 50%;
  color           : var(--hic-white);
  cursor          : pointer;
  backdrop-filter : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition      : background 0.3s ease, transform 0.3s ease, border-color 0.3s;
  padding         : 0;
}
.hic-arrow:hover {
  background  : var(--hic-arrow-hover);
  border-color: rgba(255,255,255,0.50);
  transform   : translateY(-50%) scale(1.08);
}
.hic-arrow svg {
  width : 18px;
  height: 18px;
}
.hic-prev { left : 1.4rem; }
.hic-next { right: 1.4rem; }

/* ── Dot indicators ── */
.hic-dots {
  position       : absolute;
  bottom         : 1.4rem;
  right          : 2rem;
  z-index        : 10;
  display        : flex;
  gap            : 8px;
  align-items    : center;
}
.hic-dot {
  width           : var(--hic-dot-size);
  height          : var(--hic-dot-size);
  border-radius   : 50%;
  border          : 1.5px solid rgba(255,255,255,0.55);
  background      : transparent;
  cursor          : pointer;
  padding         : 0;
  transition      : background 0.3s ease,
                    border-color 0.3s ease,
                    transform 0.3s ease;
}
.hic-dot.hic-dot-active {
  background  : var(--hic-accent-grad);
  border-color: var(--hic-accent);
  transform   : scale(1.25);
}
.hic-dot:hover:not(.hic-dot-active) {
  background  : rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.80);
}

/* ── Progress bar ── */
.hic-progress {
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  height    : 3px;
  background: rgba(255,255,255,0.15);
  z-index   : 10;
  overflow  : hidden;
}
.hic-progress-bar {
  height    : 100%;
  width     : 0%;
  background: var(--hic-accent-grad);
  animation : hicProgress var(--hic-interval, 5000ms) linear forwards;
}
@keyframes hicProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Slide counter (top-right) ── */
.hic-counter {
  position     : absolute;
  top          : 1.4rem;
  right        : 2rem;
  z-index      : 10;
  font-family  : var(--hic-font-body);
  font-size    : 0.78rem;
  font-weight  : 400;
  letter-spacing: 0.08em;
  color        : rgba(255,255,255,0.65);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hic-carousel { --hic-height: 480px; }
  .hic-content  { padding: 2.5rem 3rem 3.5rem; }
}
@media (max-width: 768px) {
  .hic-carousel { --hic-height: 420px; }
  .hic-content  { padding: 2rem 1.6rem 3rem; }
  .hic-arrow    { width: 40px; height: 40px; }
  .hic-arrow svg{ width: 16px; height: 16px; }
  .hic-prev     { left : 0.8rem; }
  .hic-next     { right: 0.8rem; }
}
@media (max-width: 480px) {
  .hic-carousel { --hic-height: 360px; }
  .hic-content  { padding: 1.4rem 1.2rem 2.6rem; }
  .hic-arrow    { display: none; }   /* swipe only on small phones */
  .hic-dots     { right: 50%; transform: translateX(50%); }
}