/* ══════════════════════════════════════════════════
   AAGTI Hero Slider
   ══════════════════════════════════════════════════ */

/* ── Base ── */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 580px;
  max-height: 820px;
  overflow: hidden;
  background: #0a0a0a
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), visibility 1.1s cubic-bezier(.4, 0, .2, 1)
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2
}

/* ── Background layer ── */
.hero-slide__bg {
  position: absolute;
  inset: 0;
  z-index: 0
}

.hero-slide__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1
}

.hero-slide__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* ── Layout ── */
.hero-slide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: inherit;
  height: 100%
}

.hero-slide__inner--split {
  grid-template-columns: 1fr 340px;
  gap: 32px
}

/* ── Content ── */
.hero-slide__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 90px
}

.hero-slide__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px)
}

.hero-slide__label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px
}

/* ── Heading: typewriter line + subtitle line ── */
.hero-slide__heading {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -0.02em
}

.hero-slide__heading .tw-line {
  display: block;
  font-size: clamp(28px, 4.2vw, 48px);
  min-height: 1.15em;
  overflow: hidden;
  opacity: 0
}

.hero-slide__heading .tw-line .tw-text {
  display: inline;
  border-right: 2px solid;
  padding-right: 2px
}

.hero-slide__heading .tw-line .tw-text.tw-typing {
  animation: cursorBlink .7s steps(1) infinite
}

.hero-slide__heading .tw-line .tw-text.tw-done {
  border-right-color: transparent
}

.hero-slide__heading .sub-line {
  display: block;
  font-size: clamp(22px, 3vw, 36px);
  opacity: 0;
  transform: translateY(12px)
}

/* ── Description ── */
.hero-slide__desc {
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px)
}

/* ── Buttons ── */
.hero-slide__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px)
}

/* ── Info items (for Reconnect bullet points / schedule) ── */
.hero-slide__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(16px)
}

.hero-slide__info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.85)
}

.hero-slide__info-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.hero-slide__schedule {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(16px)
}

/* ── Figure (woman image) ── */
.hero-slide__figure {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-top: 60px;
  opacity: 0;
  transform: translateX(30px) scale(.96)
}

.hero-slide__figure img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center
}


/* ══════════════════════════════════════════════════
   SLIDE THEMES
   ══════════════════════════════════════════════════ */

/* ─── HLS: Deep Violet / Magenta Purple ─── */
.hero-slide--hls .hero-slide__bg::after {
  background: linear-gradient(145deg, #120824 0%, #1f0a3d 35%, #2a1050 65%, #1a0830 100%)
}

.hero-slide--hls .hero-slide__bg::before {
  content: '';
  position: absolute;
  right: 10%;
  bottom: -5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, .12) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none
}

.hero-slide--hls .hero-slide__label {
  color: #c084fc
}

.hero-slide--hls .hero-slide__label::before {
  background: #c084fc
}

.hero-slide--hls .hero-slide__heading {
  color: #fff
}

.hero-slide--hls .hero-slide__heading .accent {
  color: #c084fc
}

.hero-slide--hls .hero-slide__heading .tw-line .tw-text {
  border-right-color: #c084fc
}

.hero-slide--hls .hero-slide__desc {
  color: rgba(255, 255, 255, .6)
}

.hero-slide--hls .hero-slide__figure img {
  filter: drop-shadow(0 0 50px rgba(168, 85, 247, .18))
}

/* ─── Reconnect: Dark Navy-Purple + Orange/Gold (matching flyer) ─── */
.hero-slide--reconnect .hero-slide__bg::after {
  background: linear-gradient(155deg, #0f0728 0%, #1a0e40 25%, #271458 50%, #1a0e40 75%, #0f0728 100%)
}

/* Bokeh light orbs */
.hero-slide--reconnect .hero-slide__bg::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 12%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(200, 120, 50, .18) 0%, rgba(180, 80, 220, .08) 40%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  animation: floatOrb 9s ease-in-out infinite
}

.hero-slide--reconnect::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(220, 160, 60, .1) 0%, rgba(120, 60, 200, .05) 50%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  animation: floatOrb 7s ease-in-out 1.5s infinite reverse;
  pointer-events: none
}

/* Third bokeh */
.hero-slide--reconnect .bokeh-orb {
  position: absolute;
  top: 40%;
  right: 30%;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(180, 100, 255, .12) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  animation: floatOrb 6s ease-in-out 3s infinite
}

.hero-slide--reconnect .hero-slide__label {
  color: #f59e0b
}

.hero-slide--reconnect .hero-slide__label::before {
  background: #f59e0b
}

.hero-slide--reconnect .hero-slide__heading {
  color: #fff
}

.hero-slide--reconnect .hero-slide__heading .accent {
  color: #f59e0b
}

.hero-slide--reconnect .hero-slide__heading .tw-line .tw-text {
  border-right-color: #f59e0b
}

.hero-slide--reconnect .hero-slide__desc {
  color: rgba(255, 255, 255, .65)
}

.hero-slide--reconnect .hero-slide__info-item::before {
  background: #f59e0b
}

.hero-slide--reconnect .hero-slide__schedule {
  color: #fff
}

.hero-slide--reconnect .hero-slide__schedule span {
  color: #f59e0b
}

/* Torn paper bottom edge */
.hero-slide--reconnect .torn-edge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 3;
  overflow: hidden
}

.hero-slide--reconnect .torn-edge::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2%;
  width: 104%;
  height: 40px;
  background: #fff;
  clip-path: polygon(
    0% 100%, 0% 65%, 2% 50%, 4% 60%, 6% 45%, 8% 55%, 10% 40%,
    12% 52%, 14% 38%, 16% 48%, 18% 35%, 20% 50%, 22% 42%,
    24% 55%, 26% 40%, 28% 50%, 30% 38%, 32% 48%, 34% 36%,
    36% 52%, 38% 40%, 40% 55%, 42% 38%, 44% 50%, 46% 35%,
    48% 48%, 50% 38%, 52% 52%, 54% 40%, 56% 55%, 58% 42%,
    60% 50%, 62% 35%, 64% 48%, 66% 38%, 68% 52%, 70% 42%,
    72% 55%, 74% 38%, 76% 50%, 78% 40%, 80% 52%, 82% 36%,
    84% 48%, 86% 38%, 88% 52%, 90% 40%, 92% 55%, 94% 45%,
    96% 52%, 98% 38%, 100% 50%, 100% 100%
  );
  opacity: .12
}

/* Cross motif */
.hero-slide--reconnect .reconnect-motif {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 160px;
  opacity: .04;
  z-index: 0
}

.hero-slide--reconnect .reconnect-motif::before,
.hero-slide--reconnect .reconnect-motif::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 3px
}

.hero-slide--reconnect .reconnect-motif::before {
  width: 3px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%)
}

.hero-slide--reconnect .reconnect-motif::after {
  height: 3px;
  width: 100%;
  top: 50%;
  transform: translateY(-50%)
}

/* ─── AAGTI Hero: Dark + Gold ─── */
.hero-slide--aagti .hero-slide__bg::after {
  background: linear-gradient(135deg, rgba(0, 0, 0, .82) 0%, rgba(10, 8, 4, .78) 50%, rgba(0, 0, 0, .85) 100%)
}

.hero-slide--aagti .hero-slide__bg img {
  opacity: .2
}

.hero-slide--aagti .hero-slide__label {
  color: var(--gold, #C8A951)
}

.hero-slide--aagti .hero-slide__label::before {
  background: var(--gold, #C8A951)
}

.hero-slide--aagti .hero-slide__heading {
  color: #fff
}

.hero-slide--aagti .hero-slide__heading .accent {
  color: var(--gold, #C8A951)
}

.hero-slide--aagti .hero-slide__heading .tw-line .tw-text {
  border-right-color: var(--gold, #C8A951)
}

.hero-slide--aagti .hero-slide__desc {
  color: rgba(255, 255, 255, .6)
}


/* ══════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════ */

.hero-slider__counter {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 10;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  letter-spacing: 2px
}

.hero-slider__counter-current {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  vertical-align: baseline
}

.hero-slider__dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10
}

.hero-slider__dot {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.hero-slider__dot.is-active {
  width: 44px;
  background: #fff
}

.hero-slider__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: 10;
  transition: width linear
}

.hero-slider[data-active="0"] .hero-slider__progress { background: #a855f7 }
.hero-slider[data-active="1"] .hero-slider__progress { background: #f59e0b }
.hero-slider[data-active="2"] .hero-slider__progress { background: var(--gold, #C8A951) }

.hero-slider__arrows {
  position: absolute;
  right: 32px;
  bottom: 28px;
  display: flex;
  gap: 6px;
  z-index: 10
}

.hero-slider__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  backdrop-filter: blur(8px);
  padding: 0
}

.hero-slider__arrow:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .25)
}

.hero-slider__arrow svg {
  width: 16px;
  height: 16px;
  stroke-width: 2
}


/* ══════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════ */

.hero-slide.is-active .hero-slide__label {
  animation: hReveal .6s .15s cubic-bezier(.16, 1, .3, 1) forwards
}

.hero-slide.is-active .hero-slide__heading .tw-line {
  animation: hRevealFade .4s .3s ease forwards
}

.hero-slide.is-active .hero-slide__heading .sub-line {
  animation: hReveal .6s 1.2s cubic-bezier(.16, 1, .3, 1) forwards
}

.hero-slide.is-active .hero-slide__desc {
  animation: hReveal .6s 1.5s cubic-bezier(.16, 1, .3, 1) forwards
}

.hero-slide.is-active .hero-slide__info {
  animation: hReveal .6s 1.6s cubic-bezier(.16, 1, .3, 1) forwards
}

.hero-slide.is-active .hero-slide__schedule {
  animation: hReveal .6s 1.7s cubic-bezier(.16, 1, .3, 1) forwards
}

.hero-slide.is-active .hero-slide__actions {
  animation: hReveal .6s 1.8s cubic-bezier(.16, 1, .3, 1) forwards
}

.hero-slide.is-active .hero-slide__figure {
  animation: hRevealRight .8s .5s cubic-bezier(.16, 1, .3, 1) forwards
}

/* Reset on inactive */
.hero-slide:not(.is-active) .hero-slide__label,
.hero-slide:not(.is-active) .hero-slide__heading .sub-line,
.hero-slide:not(.is-active) .hero-slide__desc,
.hero-slide:not(.is-active) .hero-slide__info,
.hero-slide:not(.is-active) .hero-slide__schedule,
.hero-slide:not(.is-active) .hero-slide__actions {
  opacity: 0;
  transform: translateY(16px)
}

.hero-slide:not(.is-active) .hero-slide__heading .tw-line {
  opacity: 0
}

.hero-slide:not(.is-active) .hero-slide__figure {
  opacity: 0;
  transform: translateX(30px) scale(.96)
}

.hero-slide:not(.is-active) .hero-slide__heading .tw-line .tw-text {
  border-right-color: transparent
}

@keyframes hReveal {
  from { opacity: 0; transform: translateY(18px) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes hRevealFade {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes hRevealRight {
  from { opacity: 0; transform: translateX(30px) scale(.96) }
  to   { opacity: 1; transform: translateX(0) scale(1) }
}

@keyframes cursorBlink {
  0%, 100% { border-right-color: currentColor }
  50%      { border-right-color: transparent }
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1) }
  33%      { transform: translate(12px, -18px) scale(1.05) }
  66%      { transform: translate(-8px, 12px) scale(.95) }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media(max-width:1024px) {
  .hero-slider {
    height: auto;
    min-height: 520px;
    max-height: none
  }

  .hero-slide__inner--split {
    grid-template-columns: 1fr;
    gap: 0
  }

  .hero-slide__figure {
    display: none
  }

  .hero-slide__content {
    padding: 90px 0 80px
  }

  .hero-slider__arrows,
  .hero-slider__counter {
    display: none
  }

  .hero-slide__info {
    grid-template-columns: 1fr
  }
}

@media(max-width:767px) {
  .hero-slider {
    min-height: auto;
    height: auto
  }

  .hero-slide.is-active {
    position: relative
  }

  .hero-slide__inner {
    padding: 0 16px
  }

  .hero-slide__content {
    padding: 80px 0 70px
  }

  .hero-slide__label {
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 14px
  }

  .hero-slide__label::before {
    width: 18px
  }

  .hero-slide__heading {
    margin-bottom: 14px
  }

  .hero-slide__heading .tw-line {
    font-size: clamp(22px, 7vw, 32px);
    min-height: 1.1em
  }

  .hero-slide__heading .sub-line {
    font-size: clamp(17px, 5vw, 24px)
  }

  .hero-slide__desc {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px
  }

  .hero-slide__actions {
    gap: 10px
  }

  .hero-slide__actions .btn {
    padding: 10px 20px;
    font-size: 13px
  }

  .hero-slide__info {
    gap: 8px;
    margin-bottom: 16px
  }

  .hero-slide__info-item {
    font-size: 12px;
    gap: 6px
  }

  .hero-slide__info-item::before {
    width: 5px;
    height: 5px
  }

  .hero-slide__schedule {
    font-size: 12px;
    margin-bottom: 6px
  }

  .hero-slider__dots {
    bottom: 20px
  }

  .hero-slider__dot {
    width: 18px;
    height: 2px
  }

  .hero-slider__dot.is-active {
    width: 32px
  }

  .hero-slide--reconnect .torn-edge {
    height: 30px
  }

  .hero-slide--reconnect .reconnect-motif {
    width: 100px;
    height: 100px
  }
}

@media(max-width:480px) {
  .hero-slide__content {
    padding: 70px 0 60px
  }

  .hero-slide__heading .tw-line {
    font-size: clamp(20px, 6.5vw, 28px)
  }

  .hero-slide__heading .sub-line {
    font-size: clamp(15px, 4.5vw, 20px)
  }

  .hero-slide__desc {
    font-size: 12.5px;
    margin-bottom: 16px
  }

  .hero-slide__actions .btn {
    padding: 9px 16px;
    font-size: 12px
  }

  .hero-slide__info-item {
    font-size: 11px
  }

  .hero-slide__schedule {
    font-size: 11px
  }

  .hero-slide--reconnect .bokeh-orb,
  .hero-slide--reconnect .reconnect-motif {
    display: none
  }
}