/* Legion reference background — content layers remain unchanged. */
.film {
  background:
    linear-gradient(90deg, rgba(5, 7, 16, .86) 0%, rgba(8, 10, 24, .63) 38%, rgba(27, 12, 61, .24) 65%, rgba(10, 8, 28, .36) 100%),
    linear-gradient(0deg, rgba(6, 5, 18, .24), rgba(18, 19, 38, .04)),
    url('assets/images/legion-guardian.webp') center center / cover no-repeat !important;
}

.legion-hero-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.82) saturate(.9) contrast(1.03);
  pointer-events: none;
}

/* Match the reference hero's compact type scale and right-side card proportion. */
.film .copy h1 {
  max-width: 560px;
  font-size: clamp(72px, 6.9vw, 136px);
  line-height: .82;
  margin: 20px 0 32px;
}

.film .copy p,
.film .copy > div {
  font-size: clamp(8px, .58vw, 10px);
}

.film .portrait {
  right: clamp(52px, 7vw, 142px);
  bottom: clamp(38px, 6vh, 72px);
  width: min(15vw, 220px);
  height: min(22vw, 320px);
}

.film .portrait b {
  right: -18px;
  font-size: 8px;
}

.film .portrait img {
  filter: contrast(1.04) saturate(.85) drop-shadow(0 0 16px rgba(182, 109, 255, .72));
}

/* The large frosted information panel mirrors the reference's middle-right card. */
.hero-glass-panel {
  position: absolute;
  z-index: 2;
  right: calc(clamp(52px, 7vw, 142px) + min(15vw, 220px) + clamp(44px, 4vw, 86px));
  bottom: clamp(34px, 4vh, 58px);
  width: min(19.5vw, 405px);
  height: min(29vw, 570px);
  overflow: hidden;
  border: 1px solid rgba(237, 244, 255, .28);
  border-radius: 36px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(176, 196, 234, .08) 38%, rgba(21, 17, 45, .16)),
    rgba(20, 30, 54, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 22px 52px rgba(2, 4, 18, .2);
  backdrop-filter: blur(9px) saturate(1.06);
  -webkit-backdrop-filter: blur(9px) saturate(1.06);
  pointer-events: none;
}

.hero-glass-panel::before,
.hero-glass-panel::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(244, 242, 255, .21);
  border-radius: 50%;
}
.hero-glass-panel::before { width: 52px; height: 52px; top: 40px; left: 40px; }
.hero-glass-panel::after { width: 360px; height: 360px; right: -190px; bottom: -188px; }
.hero-glass-copy {
  position: absolute;
  z-index: 1;
  right: 34px;
  bottom: 37px;
  left: 34px;
  color: #f7f4ff;
}
.hero-glass-copy small {
  display: block;
  color: #d9ceee;
  font: 9px 'DM Mono', monospace;
  letter-spacing: .14em;
}
.hero-glass-copy h2 {
  margin: 21px 0 18px;
  font: 600 clamp(26px, 2.1vw, 39px)/.88 'DM Sans', sans-serif;
  letter-spacing: -.08em;
}
.hero-glass-copy h2 em { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.hero-glass-copy p {
  margin: 0;
  color: rgba(246, 241, 255, .84);
  font-size: 12px;
  line-height: 1.8;
}
.hero-glass-copy > div {
  display: grid;
  gap: 7px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(245, 242, 255, .3);
}
.hero-glass-copy span { color: #cfc2e5; font: 8px 'DM Mono', monospace; letter-spacing: .13em; }
.hero-glass-copy b { color: #fff; font: 600 9px 'DM Mono', monospace; letter-spacing: .06em; }

/* Keep the existing LYC universe system as a quiet foreground signal, not a second background. */
.film #star-field { opacity: .3; }
.film .grain { opacity: .055; mix-blend-mode: screen; }
.film .nebula { opacity: .22; filter: blur(30px); }
.film .vignette {
  background:
    linear-gradient(90deg, rgba(3, 3, 12, .12), transparent 56%),
    radial-gradient(ellipse at center, transparent 32%, rgba(2, 3, 11, .27) 100%);
}

@media (max-width: 750px) {
  .film {
    background-position: 59% center !important;
    background-image:
      linear-gradient(0deg, rgba(5, 6, 16, .86) 0%, rgba(7, 8, 22, .22) 64%, rgba(12, 11, 31, .18) 100%),
      url('assets/images/legion-guardian.webp') !important;
  }
  .film #star-field { opacity: .22; }
  .legion-hero-video { object-position: 58% center; }
  .film .copy h1 { font-size: clamp(58px, 17vw, 88px); }
  .film .portrait {
    right: -7vw;
    bottom: 3vh;
    width: min(46vw, 220px);
    height: min(66vw, 320px);
  }
  .hero-glass-panel { display: none; }
}