/*
  HOMEPAGE HERO CAROUSEL — CSS
  ============================
  - Default bg: black. Image fades in (reveals) left to right over black.
  - Title + line: fixed length, animate together from right to left (appear from dark).
  - Description: slides in top→bottom after title/line; on exit slides out bottom→top, then slide fades to black.
*/

:root {
  --pec-carousel-height: 97vh;
  --pec-carousel-height-max: none;
  --pec-carousel-overlay: rgba(0, 0, 0, 0.45);
  --pec-carousel-content-max: 720px;
  --pec-carousel-padding: clamp(1.5rem, 4vw, 3rem);
  --pec-carousel-title-size: clamp(2rem, 4vw, 3.5rem);
  --pec-carousel-desc-size: clamp(1rem, 1.5vw, 1.25rem);
  --pec-carousel-line-width: 80px;
  --pec-carousel-line-height: 3px;
  --pec-carousel-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pec-carousel-btn-size: 48px;
  --pec-carousel-btn-offset: clamp(1rem, 3vw, 2rem);
  /* Dark gradient (replaces solid black during slide change and exit) */
  --pec-carousel-bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #000 25%, #000 75%, #0c0c0c 100%);
  /* Timings */
  --pec-img-reveal-duration: 1.5s;
  --pec-img-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pec-title-line-duration: 0.6s;
  --pec-desc-enter-delay: 0.75s;
  --pec-desc-enter-duration: 0.5s;
  --pec-desc-exit-duration: 0.45s;
  --pec-slide-fade-duration: 0.6s;
}

.pec-hero-carousel {
  position: relative;
  width: 100%;
  min-height: var(--pec-carousel-height);
  max-height: var(--pec-carousel-height-max);
  overflow: hidden;
  isolation: isolate;
  background: var(--pec-carousel-bg-gradient);
}

.pec-carousel__track-wrap {
  position: absolute;
  inset: 0;
  background: var(--pec-carousel-bg-gradient);
}

.pec-carousel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.pec-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: var(--pec-carousel-bg-gradient);
  /* Exit: wait for desc to slide out, then fade gradiently into black/gradient */
  transition: opacity var(--pec-slide-fade-duration) var(--pec-carousel-ease) var(--pec-desc-exit-duration),
              visibility 0s linear calc(var(--pec-desc-exit-duration) + var(--pec-slide-fade-duration));
}

.pec-carousel__slide--active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  z-index: 1;
}

.pec-carousel__bg {
  position: absolute;
  inset: 0;
  background: var(--pec-carousel-bg-gradient);
}

/* Image: appears from left with gradient (opacity high left → transparent right); black disappears smoothly */
.pec-carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mask: opaque left (black), fade to transparent right; slide mask so image reveals left→right with soft edge */
  mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
  mask-size: 100% 100%;
  mask-position: 170% 0;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 170% 0;
  -webkit-mask-repeat: no-repeat;
  transition: mask-position var(--pec-img-reveal-duration) var(--pec-img-reveal-ease),
              -webkit-mask-position var(--pec-img-reveal-duration) var(--pec-img-reveal-ease);
}

.pec-carousel__slide--active .pec-carousel__img {
  /* Fully visible: mask shifted left so element sees only the black (opaque) part */
  mask-position: -50% 0;
  -webkit-mask-position: -50% 0;
}

.pec-carousel__overlay {
  position: absolute;
  inset: 0;
  background: var(--pec-carousel-overlay);
  pointer-events: none;
}

.pec-carousel__content {
  position: absolute;
  left: var(--pec-carousel-padding);
  top: 50%;
  transform: translateY(-50%);
  max-width: var(--pec-carousel-content-max);
  z-index: 2;
}

/* Title + line: fixed length, animate together from right to left (appear from dark as image reveals) */
.pec-carousel__title {
  margin: 0 0 0.5em;
  font-size: var(--pec-carousel-title-size);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  opacity: 0;
  transform: translateX(72px);
  transition: opacity var(--pec-title-line-duration) var(--pec-carousel-ease),
              transform var(--pec-title-line-duration) var(--pec-carousel-ease);
}

.pec-carousel__slide--active .pec-carousel__title {
  opacity: 1;
  transform: translateX(0);
}

.pec-carousel__line {
  display: block;
  width: var(--pec-carousel-line-width);
  height: var(--pec-carousel-line-height);
  background: #30a46c;
  margin: 0.75em 0 1em;
  opacity: 0;
  transform: translateX(72px);
  transition: opacity var(--pec-title-line-duration) var(--pec-carousel-ease),
              transform var(--pec-title-line-duration) var(--pec-carousel-ease);
}

.pec-carousel__slide--active .pec-carousel__line {
  opacity: 1;
  transform: translateX(0);
}

/* When slide changes: title and line disappear instantly (no exit animation) */
.pec-carousel__slide:not(.pec-carousel__slide--active) .pec-carousel__title,
.pec-carousel__slide:not(.pec-carousel__slide--active) .pec-carousel__line {
  transition: none;
}

/* Description: enters top→bottom after title+line; exits bottom→top then slide fades to black */
.pec-carousel__desc {
  margin: 0;
  font-size: var(--pec-carousel-desc-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transform: translateY(-32px);
  transition: opacity var(--pec-desc-enter-duration) var(--pec-carousel-ease) var(--pec-desc-enter-delay),
              transform var(--pec-desc-enter-duration) var(--pec-carousel-ease) var(--pec-desc-enter-delay);
}

.pec-carousel__slide--active .pec-carousel__desc {
  opacity: 1;
  transform: translateY(0);
}

.pec-carousel__slide:not(.pec-carousel__slide--active) .pec-carousel__desc {
  opacity: 0;
  transform: translateY(-36px);
  transition: opacity var(--pec-desc-exit-duration) var(--pec-carousel-ease) 0s,
              transform var(--pec-desc-exit-duration) var(--pec-carousel-ease) 0s;
}

.pec-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: var(--pec-carousel-btn-size);
  height: var(--pec-carousel-btn-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pec-carousel__btn:hover,
.pec-carousel__btn:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pec-carousel__btn--prev {
  left: var(--pec-carousel-btn-offset);
}

.pec-carousel__btn--next {
  right: var(--pec-carousel-btn-offset);
}

.pec-carousel__arrow {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

@media (max-width: 768px) {
  :root {
    --pec-carousel-height: 100vh;
  }
}