/* Cinematic hero: artwork remains behind readable, interactive content. */
.anime-hero {
  padding: 150px 0 190px;
}
.anime-ambient {
  background:
    radial-gradient(ellipse at 75% 25%, #1b4a70 0, transparent 42%),
    radial-gradient(ellipse at 65% 73%, #123047 0, transparent 40%),
    linear-gradient(110deg, #050d17 18%, #0b2035 68%, #07111e);
}
.anime-hero::after {
  z-index: 2;
  background:
    linear-gradient(90deg, #050d17e6 0, #050d17c9 29%, #050d1770 44%, transparent 62%),
    linear-gradient(0deg, #07111e 0, #07111e9c 10%, transparent 28%);
}
.anime-hero-main {
  min-height: calc(100svh - 340px);
}
.anime-scene-copy {
  width: 58%;
  max-width: 710px;
}
.anime-scene-copy h1 {
  font-size: clamp(76px, 7.5vw, 108px);
  line-height: .98;
  text-shadow: 0 3px 24px #050d1740;
}
html[lang=vi] .anime-scene-copy h1 {
  font-size: clamp(66px, 6.65vw, 96px);
  line-height: 1.04;
}
.anime-hero-description {
  max-width: 490px;
  font-size: 18px;
  color: #d0dce6;
}
.anime-mascot-stage {
  z-index: 1;
}
.anime-mascot {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 57%, #000000b3 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 57%, #000000b3 72%, transparent 97%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.anime-mascot-health {
  top: 52px;
  right: -70px;
  bottom: auto;
  width: clamp(820px, 73vw, 1140px);
  height: auto;
  aspect-ratio: 1;
  align-items: flex-start;
}
.anime-mascot-health .anime-mascot {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 48%, #00000073 68%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0, #000 48%, #00000073 68%, transparent 82%);
}
.anime-mascot-health .anime-mascot-aura {
  inset: 0 0 28%;
  background: radial-gradient(ellipse at 47% 36%, #76c6fa25, transparent 64%);
}
.anime-mascot-health .anime-handnote {
  top: 16%;
  right: 11%;
  max-width: 180px;
  font-size: 26px;
}
.anime-mascot-modcare,
.anime-mascot-nightwatch {
  right: 1%;
  bottom: 70px;
  width: 52%;
  height: min(80svh, 740px);
}
.anime-scene-navigation {
  bottom: 65px;
}
.anime-scene-tab {
  background: #0a1c2b85;
  border-color: #4260788c;
}
.anime-scene-tab.is-active {
  background: #102b409e;
}
.anime-scene-tab[data-anime-slide="0"] img {
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  object-fit: cover;
  object-position: 42% 18%;
}
@media (min-width: 1600px) {
  .anime-mascot-health { right: calc((100vw - 1600px) / 2 - 100px); }
}
@media (max-height: 780px) and (min-width: 901px) {
  .anime-hero { padding-top: 120px; padding-bottom: 172px; }
  .anime-hero-main { min-height: calc(100svh - 292px); }
  .anime-scene-copy h1 { font-size: clamp(72px, 7vw, 90px); margin-bottom: 20px; }
  html[lang=vi] .anime-scene-copy h1 { font-size: clamp(64px, 6.3vw, 82px); }
  .anime-hero-description { font-size: 16px; line-height: 25px; margin-bottom: 23px; }
  .anime-mascot-health { top: 30px; right: -90px; width: 73vw; }
  .anime-mascot-health .anime-handnote { font-size: 22px; top: 14%; }
  .anime-mascot-modcare, .anime-mascot-nightwatch { height: 83svh; bottom: 60px; }
  .anime-scene-navigation { bottom: 59px; }
}
@media (min-width: 521px) and (max-width: 900px) {
  .anime-hero { padding-top: 168px; padding-bottom: 200px; min-height: 900px; }
  .anime-hero-main { min-height: 532px; align-items: center; }
  .anime-scene-copy { width: 62%; max-width: 480px; }
  .anime-scene-copy h1 { font-size: clamp(54px, 8.2vw, 72px); }
  html[lang=vi] .anime-scene-copy h1 { font-size: clamp(48px, 7.25vw, 64px); }
  .anime-hero-description { font-size: 16px; line-height: 26px; max-width: 340px; }
  .anime-mascot-health { width: 760px; top: 95px; right: -230px; }
  .anime-mascot-health .anime-handnote { display: none; }
  .anime-mascot-modcare, .anime-mascot-nightwatch { width: 50%; height: 550px; bottom: 180px; right: -4%; }
  .anime-hero::after {
    background: linear-gradient(90deg, #050d17e8 0, #050d17ae 36%, transparent 75%),
      linear-gradient(0deg, #07111e 0, #07111e80 15%, transparent 35%);
  }
  .anime-scene-navigation { bottom: 78px; }
}
@media (max-width: 520px) {
  .anime-hero { padding: 324px 0 184px; min-height: max(844px, 100svh); }
  .anime-hero-main { min-height: 336px; align-items: flex-start; }
  .anime-scene-copy { width: 100%; max-width: 100%; }
  .anime-kicker { margin-bottom: 14px; }
  .anime-scene-copy h1 { font-size: clamp(44px, 14.3vw, 56px); line-height: 1.01; margin-bottom: 18px; }
  html[lang=vi] .anime-scene-copy h1 { font-size: clamp(40px, 12vw, 47px); line-height: 1.08; }
  .anime-hero-description { font-size: 14px; line-height: 22px; max-width: 340px; margin-bottom: 22px; }
  .anime-scene-status { max-width: 320px; }
  .anime-mascot-health { width: 530px; top: 69px; right: calc((100vw - 390px) / 2 - 116px); }
  .anime-mascot-health .anime-mascot {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 39%, #00000073 62%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0, #000 39%, #00000073 62%, transparent 92%);
  }
  .anime-mascot-modcare, .anime-mascot-nightwatch {
    top: 75px; bottom: auto; right: calc((100vw - 390px) / 2 - 5px);
    width: 360px; height: 340px;
  }
  .anime-handnote { display: none; }
  .anime-hero::after {
    background: linear-gradient(0deg, #07111e 0, #07111ef2 39%, #07111ea6 58%, transparent 74%);
  }
  .anime-scene-navigation { bottom: 63px; }
  .anime-hero-foot { bottom: 17px; }
  .anime-scene-tab[data-anime-slide="0"] img {
    width: 180%; max-width: none; height: 200%; top: 0; right: -60%; bottom: auto; object-position: 42% 0;
  }
}