/**
 * Hero Cityscape Element - CSS Styles
 * Converted from SCSS for WP Bricks
 *
 * Required CSS variables (customize as needed):
 * --color-reflex: #1e1bb2 (Broadsign brand blue)
 */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes gradientBlueEnter {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes buildingsEnter {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes personEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.flex {
  display: flex;
}

.align-items-end {
  align-items: flex-end;
}

.w-full {
  width: 100%;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

/* ============================================
   BASE HERO STYLES
   ============================================ */

.brxe-hero-cityscape .blue_gradient {
  background: linear-gradient(272.11deg, #7399ef 1.93%, #ceddfe 48.3%);
  height: 100%;
  left: -16px;
  max-width: 100vw;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 1;
}

.brxe-hero-cityscape .slides {
  height: 100%;
  left: -16px;
  max-width: 100vw;
  overflow: hidden;
  width: 100vw;
  z-index: 10;
  position: relative;
}

/* ============================================
   SLIDE 1 - CITYSCAPE
   ============================================ */

.brxe-hero-cityscape .slide_1 .inner {
  z-index: 1;
}

.brxe-hero-cityscape .slide_1 .inner:after {
  background: #fff;
  content: "";
  height: 50px;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 100;
}

.brxe-hero-cityscape .slide_1 .buildings {
  height: auto;
  max-height: 520px;
  max-width: 900px;
  position: relative;
  width: 130vw;
  z-index: 0;
}

.brxe-hero-cityscape .slide_1 .buildings img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brxe-hero-cityscape .slide_1 .buildings img.positioning-image {
  opacity: 0;
  visibility: hidden;
}

.brxe-hero-cityscape .slide_1 .buildings img.actual-image {
  top: 0px;
  left: 0px;
  object-position: left bottom;
  position: absolute;
}

.brxe-hero-cityscape .slide_1 .person {
  bottom: 0;
  left: 50%;
  max-height: 270px;
  max-width: 380px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 62%;
  z-index: 10;
}

.brxe-hero-cityscape .slide_1 .person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brxe-hero-cityscape .slide_1 .ooh_wrapper {
  max-height: 520px;
  max-width: 900px;
  width: 130vw;
  z-index: 5;
}

/* ============================================
   OOH BILLBOARDS - BASE STYLES
   ============================================ */

.brxe-hero-cityscape .slide_1 .ooh {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.brxe-hero-cityscape .slide_1 .ooh .state {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.brxe-hero-cityscape .slide_1 .ooh .state img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brxe-hero-cityscape .slide_1 .ooh .state.active {
  opacity: 1;
}

/* ============================================
   OOH BILLBOARDS - CLIP PATHS
   ============================================ */

.brxe-hero-cityscape .slide_1 .ooh_1 {
  clip-path: polygon(0% 10%, 12% 10%, 12% 40%, 0% 40%);
}

.brxe-hero-cityscape .slide_1 .ooh_2 {
  clip-path: polygon(18% 15%, 37% 15%, 37% 40%, 18% 40%);
}

.brxe-hero-cityscape .slide_1 .ooh_3 {
  clip-path: polygon(49% 0%, 59% 0%, 59% 29%, 49% 29%);
}

.brxe-hero-cityscape .slide_1 .ooh_4 {
  clip-path: polygon(60% 5%, 72.5% 5%, 72.5% 37%, 60% 37%);
}

.brxe-hero-cityscape .slide_1 .ooh_5 {
  clip-path: polygon(72.5% 19%, 84% 19%, 84% 60%, 72.5% 60%);
}

.brxe-hero-cityscape .slide_1 .ooh_6 {
  clip-path: polygon(1% 43%, 10% 43%, 10% 82%, 1% 82%);
}

.brxe-hero-cityscape .slide_1 .ooh_7 {
  clip-path: polygon(10% 34%, 18% 34%, 18% 63%, 10% 63%);
}

.brxe-hero-cityscape .slide_1 .ooh_8 {
  clip-path: polygon(22% 39%, 37% 39%, 37% 79%, 22% 79%);
}

.brxe-hero-cityscape .slide_1 .ooh_9 {
  clip-path: polygon(54% 62%, 79% 62%, 79% 90%, 54% 90%);
}

.brxe-hero-cityscape .slide_1 .ooh_10 {
  clip-path: polygon(79% 58%, 91% 58%, 91% 100%, 79% 100%);
}

.brxe-hero-cityscape .slide_1 .ooh_10 img,
.brxe-hero-cityscape .slide_1 .ooh_10 picture {
  object-position: center bottom;
}

/* ============================================
   OOH WRAPPER - BG MIXIN EQUIVALENT
   ============================================ */

.brxe-hero-cityscape .slide_1 .ooh_wrapper.bg {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  z-index: 0;
}

/* ============================================
   RESPONSIVE: SMALL TO MEDIUM
   ============================================ */

@media (max-width: 899px) {
  .brxe-hero-cityscape {
    position: relative;
  }
  .brxe-hero-cityscape .slide_1 {
    position: relative;
    max-width: 100%;
  }
  .brxe-hero-cityscape .slide_1 .inner {
    position: relative;
    max-width: 100%;
  }
  .brxe-hero-cityscape .slide_1 .inner .buildings {
    display: block;
  }
}

@media (min-width: 599px) and (max-width: 899px) {
  .brxe-hero-cityscape .ooh_wrapper {
    bottom: 0;
    top: auto;
  }

  .brxe-hero-cityscape .ooh_wrapper img,
  .brxe-hero-cityscape .ooh_wrapper picture {
    object-position: center bottom;
  }
}



/* ============================================
   RESPONSIVE: MEDIUM (900px+)
   ============================================ */

@media (min-width: 900px) {
  .brxe-hero-cityscape .blue_gradient {
    border-radius: 15px 0px 0px 15px;
    left: min(8vw, 50px);
    max-width: 760px;
    width: 50vw;
  }

  .brxe-hero-cityscape .slides {
    left: 0;
    max-width: 820px;
    width: 54vw;
  }

  .brxe-hero-cityscape .slide {
    width: 100%;
  }

  .brxe-hero-cityscape .slide_1 .buildings {
    height: 568px;
    margin-bottom: 50px;
    max-height: 568px;
    display: block;
  }

  .brxe-hero-cityscape .slide_1 .ooh_wrapper {
    height: 552px;
    max-height: 552px;
  }

  .brxe-hero-cityscape .slide_1 .ooh_10 {
    transform: translateY(16px);
  }

  .brxe-hero-cityscape.desktop_resize {
    position: absolute;
    transform: scale(0.65);
    transform-origin: left top;
    /*width: 100%;*/
  }

  .brxe-hero-cityscape.desktop_resize .slides {
    overflow: visible;
  }

  .brxe-hero-cityscape.desktop_resize .blue_gradient {
    max-width: 800px;
    width: 80vw;
  }

  .brxe-hero-cityscape.desktop_resize .person {
    left: 37vw;
  }

  /* Padding utilities for medium screens */
  .md\:pl-6 {
    padding-left: 1.5rem;
  }
}

/* ============================================
   RESPONSIVE: 1100px+
   ============================================ */

@media (min-width: 1100px) {
  .brxe-hero-cityscape.desktop_resize {
    transform: scale(0.8);
  }

  .brxe-hero-cityscape.desktop_resize .blue_gradient {
    max-width: 770px;
  }

  .brxe-hero-cityscape.desktop_resize .person {
    left: 31vw;
  }
}

/* ============================================
   RESPONSIVE: LARGE (1024px+)
   ============================================ */

@media (min-width: 1024px) {
  .brxe-hero-cityscape .blue_gradient {
    animation: 0.6s ease-out 0.4s 1 normal forwards running gradientBlueEnter;
    opacity: 0;
  }

  .brxe-hero-cityscape .slide_1 .buildings {
    animation: 0.5s ease-out 1s 1 normal forwards running buildingsEnter;
    opacity: 0;
  }

  .brxe-hero-cityscape .slide_1 .person {
    animation: 0.6s ease-out 1.2s 1 normal forwards running personEnter;
    opacity: 0;
  }

  .brxe-hero-cityscape .slide_1 .ooh_wrapper {
    animation: 0.5s ease-out 1s 1 normal forwards running buildingsEnter;
    opacity: 0;
  }

  /* Padding utilities for large screens */
  .lg\:pl-0 {
    padding-left: 0;
  }
}

/* ============================================
   RESPONSIVE: EXTRA LARGE (1280px+)
   ============================================ */

@media (min-width: 1280px) {
  .brxe-hero-cityscape.desktop_resize {
    transform: scale(0.9);
    transform-origin: left top;
  }

  .brxe-hero-cityscape.desktop_resize .person {
    left: 50%;
  }
}

/* ============================================
   RESPONSIVE: 1500px+
   ============================================ */

@media (min-width: 1500px) {
  .brxe-hero-cityscape.desktop_resize .slides {
    overflow: hidden;
  }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion) {
  .brxe-hero-cityscape .blue_gradient,
  .brxe-hero-cityscape .slide_1 .person,
  .brxe-hero-cityscape .slide_1 .buildings,
  .brxe-hero-cityscape .slide_1 .ooh {
    animation: none;
    opacity: 1;
  }

  .brxe-hero-cityscape .slide_1 .ooh .state {
    transition: none;
  }
}