/* H-Donghua V2 Single Page Header Banner Stylesheet */
/* Single Anime Page Next-Gen 2027 Premium Styles */

/* 1. PARALLAX BACKDROP BANNER */
.hd-single-banner {
  position: relative;
  height: 480px;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hd-banner-mask-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, rgba(8, 9, 12, 0.8) 0%, rgba(8, 9, 12, 0) 100%);
  pointer-events: none;
}

.hd-banner-mask-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(8, 9, 12, 1) 0%, rgba(8, 9, 12, 0.4) 50%, rgba(8, 9, 12, 0) 100%);
  pointer-events: none;
}

/* Responsive overrides */
@media (max-width: 768px) {
/* ==========================================================================
   🚨 MOBILE-FIRST SINGLE ANIME & EPISODE PAGE REDESIGN
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Backdrop Banner height reduction */
  .hd-single-banner {
    height: 240px;
  }

  /* Reduce pull-up margin on mobile to avoid overlapping header */
  .hd-single-banner + .container {
    margin-top: -50px;
  }

  /* 2. Floating Poster positioning */
  .hd-single-poster-wrap {
    width: 140px;
    margin: -60px auto 16px auto; /* Centered, pulled up less */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 10;
    display: block;
    float: none;
  }

}