/* Mehrgan Hero V3 — fully isolated */
.mgsx-hero{
  --mgsx-fade:700ms;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100svh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#06131f!important;
  isolation:isolate!important;
}

.mgsx-hero *,
.mgsx-hero *::before,
.mgsx-hero *::after{box-sizing:border-box!important}

.mgsx-hero__stage{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:#06131f!important;
  touch-action:pan-y!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

.mgsx-hero.is-dragging .mgsx-hero__stage{cursor:grabbing!important}

.mgsx-hero__slide{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:scale(1.025)!important;
  transform-origin:center center!important;
  background:#06131f!important;
  z-index:1!important;
  transition:
    opacity var(--mgsx-fade) ease,
    transform calc(var(--mgsx-fade) + 220ms) ease,
    visibility 0s linear var(--mgsx-fade)!important;
}

.mgsx-hero__slide.is-active{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:scale(1)!important;
  z-index:2!important;
  transition-delay:0s!important;
}

.mgsx-hero__media{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none;
  filter:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
}

.mgsx-hero__video{
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  background:#06131f!important;
}

.mgsx-hero__veil{
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(3,13,21,.08) 0%,rgba(3,13,21,0) 48%,rgba(3,13,21,.24) 100%),
    linear-gradient(90deg,rgba(3,13,21,.08),transparent 22%,transparent 78%,rgba(3,13,21,.08))!important;
}

.mgsx-hero__nav{
  position:absolute!important;
  top:50%!important;
  z-index:8!important;
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:999px!important;
  background:rgba(4,17,28,.28)!important;
  color:#fff!important;
  box-shadow:0 10px 30px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  transform:translateY(-50%)!important;
  cursor:pointer!important;
  opacity:.9!important;
  transition:background .25s ease,border-color .25s ease,opacity .25s ease!important;
}

.mgsx-hero__nav:hover,
.mgsx-hero__nav:focus-visible{
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(255,255,255,.7)!important;
  opacity:1!important;
  outline:none!important;
}

.mgsx-hero__nav span{
  display:block!important;
  font-family:Arial,sans-serif!important;
  font-size:34px!important;
  font-weight:300!important;
  line-height:1!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
}

.mgsx-hero__nav--prev{left:max(20px,env(safe-area-inset-left))!important}
.mgsx-hero__nav--next{right:max(20px,env(safe-area-inset-right))!important}

.mgsx-hero__dots{
  position:absolute!important;
  left:50%!important;
  bottom:max(24px,calc(16px + env(safe-area-inset-bottom)))!important;
  z-index:9!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:auto!important;
  margin:0!important;
  padding:7px 9px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  background:rgba(4,17,28,.18)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  transform:translateX(-50%)!important;
  direction:ltr!important;
}

.mgsx-hero__dot{
  display:block!important;
  width:7px!important;
  min-width:7px!important;
  height:7px!important;
  min-height:7px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.44)!important;
  box-shadow:none!important;
  opacity:1!important;
  cursor:pointer!important;
  transition:width .28s ease,background .28s ease!important;
}

.mgsx-hero__dot.is-active{
  width:26px!important;
  background:#fff!important;
}

/* CSS fallback: PHP injects animation delay/duration variables.
   JS adds .is-js immediately and disables this fallback. */
.mgsx-hero:not(.is-js) .mgsx-hero__slide{
  visibility:visible!important;
  animation:mgsxFallbackFade var(--mgsx-cycle,32s) linear infinite!important;
  animation-delay:var(--mgsx-slide-delay,0s)!important;
  transition:none!important;
}
@keyframes mgsxFallbackFade{
  0%,16%{opacity:1}
  20%,96%{opacity:0}
  100%{opacity:1}
}

@media(max-width:767px){
  .mgsx-hero{
    height:100svh!important;
    min-height:100svh!important;
  }
  .mgsx-hero__nav{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
  }
  .mgsx-hero__nav span{font-size:29px!important}
  .mgsx-hero__nav--prev{left:max(10px,env(safe-area-inset-left))!important}
  .mgsx-hero__nav--next{right:max(10px,env(safe-area-inset-right))!important}
  .mgsx-hero__dots{
    bottom:max(18px,calc(10px + env(safe-area-inset-bottom)))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mgsx-hero__slide{
    transform:none!important;
    transition:opacity 260ms ease,visibility 0s linear 260ms!important;
  }
  .mgsx-hero:not(.is-js) .mgsx-hero__slide{
    animation:none!important;
  }
}


/* === Hero image motion effects === */
.mgsx-hero__image{
  will-change:transform!important;
  transform-origin:center center!important;
  animation:none;
}

.mgsx-hero__slide.is-active[data-motion="zoom-in"] .mgsx-hero__image{
  animation:mgsxZoomIn var(--mgsx-motion-duration,7400ms) cubic-bezier(.2,.55,.25,1) both!important;
}
.mgsx-hero__slide.is-active[data-motion="zoom-out"] .mgsx-hero__image{
  animation:mgsxZoomOut var(--mgsx-motion-duration,7400ms) cubic-bezier(.2,.55,.25,1) both!important;
}
.mgsx-hero__slide.is-active[data-motion="pan-left-right"] .mgsx-hero__image{
  animation:mgsxPanLeftRight var(--mgsx-motion-duration,7400ms) ease-in-out both!important;
}
.mgsx-hero__slide.is-active[data-motion="pan-right-left"] .mgsx-hero__image{
  animation:mgsxPanRightLeft var(--mgsx-motion-duration,7400ms) ease-in-out both!important;
}

@keyframes mgsxZoomIn{
  from{transform:scale(1.02)}
  to{transform:scale(1.13)}
}
@keyframes mgsxZoomOut{
  from{transform:scale(1.13)}
  to{transform:scale(1.02)}
}
@keyframes mgsxPanLeftRight{
  from{transform:scale(1.10) translate3d(-3.5%,0,0)}
  to{transform:scale(1.10) translate3d(3.5%,0,0)}
}
@keyframes mgsxPanRightLeft{
  from{transform:scale(1.10) translate3d(3.5%,0,0)}
  to{transform:scale(1.10) translate3d(-3.5%,0,0)}
}

@media(prefers-reduced-motion:reduce){
  .mgsx-hero__slide.is-active .mgsx-hero__image{
    animation:none!important;
    transform:none!important;
  }
}