/* Hero slider — cinematic multi-effect transitions */

.hero__slides {
  overflow: hidden;
  isolation: isolate;
}

.hero__slide {
  opacity: 0;
  z-index: 0;
  transition: none;
  transform: none;
  will-change: transform, opacity, clip-path, filter;
}

.hero__slide.active {
  opacity: 1;
  z-index: 1;
}

.hero__slide-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  will-change: transform;
}

.hero__slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: filter 0.85s ease, transform 0.85s ease;
}

.hero__slide.is-video-outro video {
  filter: blur(14px) brightness(0.95);
  transform: scale(1.04);
}

.hero__slide.is-video-outro .hero__slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(12, 14, 18, 0.18);
  pointer-events: none;
  transition: opacity 0.85s ease;
}

.hero__slide.active.zoom .hero__slide-media,
.hero__slide.active.zoom video {
  animation: heroKenBurns 5s ease-in-out infinite;
}

.hero__slide.is-video-outro.active.zoom video {
  animation: none;
}

@keyframes heroKenBurns {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* —— CSS-driven transitions —— */
.hero__slide.is-leaving,
.hero__slide.is-entering {
  opacity: 1;
  z-index: 3;
}

.hero__slide.is-entering-behind {
  opacity: 1;
  z-index: 1;
}

/* Fade + blur */
.hero__slide.is-leaving--fade {
  animation: heroLeaveFade 1.05s ease forwards;
  z-index: 2;
}
@keyframes heroLeaveFade {
  to { opacity: 0; filter: blur(16px); transform: scale(1.04); }
}

.hero__slide.is-entering--fade {
  animation: heroEnterFade 1.05s ease forwards;
  z-index: 1;
}
@keyframes heroEnterFade {
  from { opacity: 0; filter: blur(12px); transform: scale(1.06); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* Slide horizontal */
.hero__slide.is-leaving--slide-x {
  animation: heroLeaveSlideX 1.1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  z-index: 2;
}
@keyframes heroLeaveSlideX {
  to { transform: translateX(-18%) scale(0.94); opacity: 0; filter: brightness(0.7); }
}
.hero__slide.is-entering--slide-x {
  animation: heroEnterSlideX 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroEnterSlideX {
  from { transform: translateX(22%) scale(1.06); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* Slide vertical */
.hero__slide.is-leaving--slide-y {
  animation: heroLeaveSlideY 1.1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  z-index: 2;
}
@keyframes heroLeaveSlideY {
  to { transform: translateY(-14%) scale(0.92); opacity: 0; }
}
.hero__slide.is-entering--slide-y {
  animation: heroEnterSlideY 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroEnterSlideY {
  from { transform: translateY(18%) scale(1.08); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Fly / 3D */
.hero__slide.is-leaving--fly {
  animation: heroLeaveFly 1.15s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  z-index: 2;
  transform-origin: center center;
}
@keyframes heroLeaveFly {
  to {
    transform: perspective(900px) translate3d(-12%, -8%, 120px) rotateY(18deg) rotateX(8deg) scale(0.82);
    opacity: 0;
    filter: blur(4px);
  }
}
.hero__slide.is-entering--fly {
  animation: heroEnterFly 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroEnterFly {
  from {
    transform: perspective(900px) translate3d(14%, 10%, -80px) rotateY(-16deg) rotateX(-6deg) scale(1.12);
    opacity: 0;
  }
  to {
    transform: perspective(900px) translate3d(0, 0, 0) rotateY(0) rotateX(0) scale(1);
    opacity: 1;
  }
}

/* Zoom */
.hero__slide.is-leaving--zoom {
  animation: heroLeaveZoom 1.05s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  z-index: 2;
}
@keyframes heroLeaveZoom {
  to { transform: scale(1.35); opacity: 0; filter: brightness(1.2); }
}
.hero__slide.is-entering--zoom {
  animation: heroEnterZoom 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroEnterZoom {
  from { transform: scale(0.72); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Wave clip-path */
.hero__slide.is-leaving--wave {
  animation: heroLeaveWave 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  z-index: 2;
}
@keyframes heroLeaveWave {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    opacity: 0.85;
  }
}
.hero__slide.is-entering--wave {
  animation: heroEnterWave 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
@keyframes heroEnterWave {
  0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

/* Broken / slice strips */
.hero__slide.is-leaving--slice {
  animation: heroLeaveSlice 0.95s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  z-index: 2;
}
@keyframes heroLeaveSlice {
  0% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  35% { clip-path: inset(0 0 0 0); transform: translateX(-4%) skewX(-3deg); }
  100% { clip-path: inset(0 100% 0 0); transform: translateX(-14%) skewX(-8deg); opacity: 0; }
}
.hero__slide.is-entering--slice {
  animation: heroEnterSlice 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroEnterSlice {
  from { clip-path: inset(0 0 0 100%); transform: translateX(12%) skewX(4deg); opacity: 0.6; }
  to { clip-path: inset(0 0 0 0); transform: translateX(0) skewX(0); opacity: 1; }
}

/* Glitch broken */
.hero__slide.is-leaving--glitch {
  animation: heroLeaveGlitch 0.85s steps(2, end) forwards;
  z-index: 2;
}
@keyframes heroLeaveGlitch {
  0% { transform: translate(0); filter: none; opacity: 1; }
  20% { transform: translate(-3%, 1%); filter: hue-rotate(20deg); }
  40% { transform: translate(2%, -2%); clip-path: inset(8% 0 12% 0); }
  60% { transform: translate(-4%, 0); clip-path: inset(20% 0 30% 0); opacity: 0.7; }
  100% { transform: translate(8%, 3%); clip-path: inset(50% 0 50% 0); opacity: 0; filter: blur(6px); }
}
.hero__slide.is-entering--glitch {
  animation: heroEnterGlitch 0.85s steps(2, end) forwards;
}
@keyframes heroEnterGlitch {
  from { transform: translate(-6%, 0); clip-path: inset(40% 0 40% 0); opacity: 0; filter: contrast(1.4); }
  to { transform: translate(0); clip-path: inset(0); opacity: 1; filter: none; }
}

/* Pixel / shatter grid overlay */
.hero-t-grid {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  pointer-events: none;
  overflow: hidden;
}

.hero-t-grid__cell {
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  will-change: transform, opacity;
}

.hero-t-grid__cell--pixel {
  animation: heroPixelOut 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroPixelOut {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--px-x, 0), var(--px-y, -40px), 0) scale(0.2);
    opacity: 0;
  }
}

.hero-t-grid__cell--shatter {
  animation: heroShatterOut 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroShatterOut {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--px-x, 0), var(--px-y, 0), 0) rotate(var(--px-r, 45deg)) scale(0.1);
    opacity: 0;
  }
}

.hero-t-grid__cell--wave {
  animation: heroWaveOut 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes heroWaveOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(110%) scale(0.85); opacity: 0; }
}

.hero__slides.is-transitioning .hero__slide.active.zoom .hero__slide-media,
.hero__slides.is-transitioning .hero__slide.active.zoom video {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.active.zoom .hero__slide-media,
  .hero__slide.active.zoom video {
    animation: none;
  }

  .hero__slide.is-leaving,
  .hero__slide.is-entering,
  .hero-t-grid__cell {
    animation: none !important;
  }

  .hero__slide {
    transition: opacity 0.5s ease;
  }
}