/* ===== Scoped Reset ===== */
.pb-wrapper *,
.pb-wrapper *::before,
.pb-wrapper *::after {
  box-sizing: border-box;
}

.pb-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #333;
  width: 100%;
  position: relative;
}

/* ============================================================
   BANNER
   ============================================================ */
.pb-wrapper .pb-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Bottom white skew */
.pb-wrapper .pb-banner::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  height: 120px;
  background: #fff;
  transform: skewY(-2.4deg);
  transform-origin: left bottom;
  z-index: 300;
}

/* Full-width background image */
.pb-wrapper .pb-banner > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: blur(8px);
  transition: filter 2s cubic-bezier(0.7, 0.01, 0.3, 1);
  will-change: filter;
}

.pb-wrapper .pb-banner > img.go {
  filter: blur(0);
}

/* Blue sweep mask — mix-blend-mode overlays the photo */
.pb-wrapper .pb-banner > .pb-mask {
  mix-blend-mode: multiply;
  position: absolute;
  width: 100%;
  height: 100%;
  right: 100%;
  bottom: 0;
  margin: auto;
  background-color: #275cfd;
  z-index: 200;
  transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
  transform-origin: 0 50%;
}

.pb-wrapper .pb-banner > .pb-mask.go {
  animation: pb-bannergo 2s forwards ease-in-out;
  -webkit-animation: pb-bannergo 2s forwards ease-in-out;
}

@keyframes pb-bannergo {
  0% {
    right: 100%;
    opacity: 1;
  }
  60% {
    right: -100%;
    opacity: 1;
  }
  60.0001% {
    right: 100%;
    opacity: 0;
  }
  100% {
    right: 63%;
    opacity: 1;
  }
}

/* Text overlay */
.pb-wrapper .pb-banner > .pb-txt {
  position: absolute;
  top: -30%;
  bottom: 0;
  left: 20%;
  margin: auto;
  z-index: 1001;
  height: 120px;
  color: transparent;
  transition: 1.2s all ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pb-wrapper .pb-banner > .pb-txt > .pb-title {
  font-size: 42px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
  margin-bottom: 16px;
  transition: 1.5s all ease-in-out 1.2s;
}

.pb-wrapper .pb-banner > .pb-txt > .pb-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0);
  font-size: 14px;
  letter-spacing: 2px;
  transition: 1.5s color ease-in-out 1.2s;
}

.pb-wrapper .pb-banner > .pb-txt.go {
  top: 0;
  color: #fff;
}

.pb-wrapper .pb-banner > .pb-txt.go > .pb-scroll {
  color: rgba(255, 255, 255, 0.8);
}

.pb-wrapper .pb-banner > .pb-txt .pb-scroll-icon {
  width: 18px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
}

.pb-wrapper .pb-banner > .pb-txt .pb-scroll-icon::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 6px;
  background: #fff;
  border-radius: 2px;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  animation: pb-scrollDot 1.2s ease-in-out infinite;
}

@keyframes pb-scrollDot {
  0% {
    top: 4px;
    opacity: 1;
  }
  100% {
    top: 14px;
    opacity: 0;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large Desktop ≤ 1440px */
@media screen and (max-width: 1440px) {
  .pb-wrapper .pb-banner > .pb-txt {
    left: 12%;
  }
}

/* Small Desktop / Laptop ≤ 1280px */
@media screen and (max-width: 1280px) {
  .pb-wrapper .pb-banner > .pb-txt {
    left: 10%;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-title {
    font-size: 36px;
  }
}

/* Tablet Landscape ≤ 1024px (iPad Pro) */
@media screen and (max-width: 1024px) {
  .pb-wrapper .pb-banner {
    min-height: 360px;
  }

  .pb-wrapper .pb-banner > .pb-txt {
    left: 8%;
    height: 110px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-title {
    font-size: 32px;
    letter-spacing: 3px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-scroll {
    font-size: 13px;
  }
}

/* Tablet Portrait ≤ 800px (iPad) */
@media screen and (max-width: 800px) {
  .pb-wrapper .pb-banner {
    min-height: 280px;
  }

  .pb-wrapper .pb-banner > .pb-txt {
    left: 8%;
    height: 100px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-title {
    font-size: 28px;
    letter-spacing: 2px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-scroll {
    font-size: 12px;
  }
}

/* Large Phone ≤ 640px */
@media screen and (max-width: 640px) {
  .pb-wrapper .pb-banner {
    min-height: 240px;
  }

  .pb-wrapper .pb-banner > .pb-txt {
    left: 6%;
    height: 90px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-title {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-scroll {
    font-size: 11px;
  }

  .pb-wrapper .pb-banner::after {
    height: 80px;
    bottom: -60px;
  }
}

/* Phone ≤ 480px */
@media screen and (max-width: 480px) {
  .pb-wrapper .pb-banner {
    min-height: 220px;
  }

  .pb-wrapper .pb-banner > .pb-txt {
    left: 5%;
    height: 80px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-title {
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-scroll {
    font-size: 11px;
    gap: 6px;
  }

  .pb-wrapper .pb-banner > .pb-txt .pb-scroll-icon {
    width: 14px;
    height: 22px;
  }
}

/* Small Phone ≤ 375px (iPhone SE) */
@media screen and (max-width: 375px) {
  .pb-wrapper .pb-banner {
    min-height: 180px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-title {
    font-size: 20px;
  }

  .pb-wrapper .pb-banner > .pb-txt > .pb-scroll {
    display: none;
  }
}

/* ===== Accessibility: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .pb-wrapper .pb-banner > img {
    filter: blur(0) !important;
    transition: none !important;
    will-change: auto;
  }
  .pb-wrapper .pb-banner > img.go {
    filter: blur(0);
  }
  .pb-wrapper .pb-mask {
    animation: none !important;
  }
  .pb-wrapper .pb-txt {
    transition: none !important;
  }
  .pb-wrapper .pb-title {
    transition: none !important;
  }
  .pb-wrapper .pb-scroll-icon::after {
    animation: none !important;
  }
}