/* Ensure the row can host an absolute overlay */
.pugh-hero-video-row { position: relative; }

/* Overlay stretches full row and centers vertically */
.pugh-hero-slider{
  /*position: absolute;*/
  /*inset: 0;*/
  display: flex;
  align-items: center;            /* vertical center */
  padding: 24px;
  z-index: 5;                     /* above video background */
  color: var(--pugh-text-color, #fff);
}

.pugh-hero-slider__inner{
  width: 100%;
  max-width: var(--pugh-maxw, 900px);
  position: relative;
}

/* horizontal alignment */
.pugh-align-left   { justify-content: flex-start; text-align: left; }
.pugh-align-center { justify-content: center;     text-align: center; }
.pugh-align-right  { justify-content: flex-end;   text-align: right;  }

/* Slides base */
.pugh-hero-slide{
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pugh-dur, 700ms) ease;
  position: absolute;
}

.pugh-hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Buttons (colors via vars) */
.pugh-hero-slide__btn{
  display: inline-block;
  /*background: var(--pugh-btn-bg, #00B2B2);*/
  color: var(--pugh-btn-text, #fff);
  padding: 8px 18px;
  border: 1px solid #fff;
  text-decoration: none;
  transition: background 600ms ease, color 600ms ease, transform 600ms ease;
}
.pugh-hero-slide__btn:hover{
  background: var(--pugh-btn-bg, #00B2B2);
  color: var(--pugh-btn-text-hover, #fff);
  /*transform: translateY(-1px);*/
}

/* ========= Modern layer animation (title → subtitle → button) ========= */
.pugh-hero-slide__title,
.pugh-hero-slide__subtitle,
.pugh-hero-slide__cta{
  will-change: transform, opacity, filter;
}

/* none */
.pugh-hero-slider[data-anim-style="none"] .pugh-hero-slide__title,
.pugh-hero-slider[data-anim-style="none"] .pugh-hero-slide__subtitle,
.pugh-hero-slider[data-anim-style="none"] .pugh-hero-slide__cta{
  animation: none !important;
}

/* cinematic */
@keyframes pughCinematicIn{
  from {
    opacity: 0;
    transform: translate3d(var(--pugh-x, 60px), var(--pugh-y, 0px), 0) scale(.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
  }
}

/* gentle */
@keyframes pughGentleIn{
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
    filter: blur(0);
  }
}

/* Direction mapping (used mainly for cinematic, but ok for all) */
.pugh-hero-slider.pugh-slide[data-slide-dir="right"] { --pugh-x: 60px;  --pugh-y: 0px; }
.pugh-hero-slider.pugh-slide[data-slide-dir="left"]  { --pugh-x: -60px; --pugh-y: 0px; }
.pugh-hero-slider.pugh-slide[data-slide-dir="top"]   { --pugh-x: 0px;   --pugh-y: -40px; }
.pugh-hero-slider.pugh-slide[data-slide-dir="bottom"]{ --pugh-x: 0px;   --pugh-y: 40px; }

/* Run animations only when active + pugh-enter toggled */
.pugh-hero-slider[data-anim-style="cinematic"] .pugh-hero-slide.is-active.pugh-enter .pugh-hero-slide__title{
  animation: pughCinematicIn var(--pugh-dur,700ms) cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 0ms;
}
.pugh-hero-slider[data-anim-style="cinematic"] .pugh-hero-slide.is-active.pugh-enter .pugh-hero-slide__subtitle{
  animation: pughCinematicIn var(--pugh-dur,700ms) cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--pugh-stagger,120ms);
}
.pugh-hero-slider[data-anim-style="cinematic"] .pugh-hero-slide.is-active.pugh-enter .pugh-hero-slide__cta{
  animation: pughCinematicIn var(--pugh-dur,700ms) cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--pugh-stagger,120ms) * 2);
}

.pugh-hero-slider[data-anim-style="gentle"] .pugh-hero-slide.is-active.pugh-enter .pugh-hero-slide__title{
  animation: pughGentleIn var(--pugh-dur,700ms) ease both;
  animation-delay: 0ms;
}
.pugh-hero-slider[data-anim-style="gentle"] .pugh-hero-slide.is-active.pugh-enter .pugh-hero-slide__subtitle{
  animation: pughGentleIn var(--pugh-dur,700ms) ease both;
  animation-delay: var(--pugh-stagger,120ms);
}
.pugh-hero-slider[data-anim-style="gentle"] .pugh-hero-slide.is-active.pugh-enter .pugh-hero-slide__cta{
  animation: pughGentleIn var(--pugh-dur,700ms) ease both;
  animation-delay: calc(var(--pugh-stagger,120ms) * 2);
}


@media only screen and (max-width: 690px) {
	.pugh-hero-slide__title {
		font-size: 1.3em;
	}
}