/* Homepage hero: fill the first screen, then hand off into a BabyT-themed paper section. */
.portal-hero{
  height:100dvh!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  position:relative!important;
  z-index:6!important;
  background:transparent!important;
}
.portal-hero-bg,
.portal-hero-video,
.portal-hero::after,
.hero-noise{inset:0!important;width:100%!important;height:100%!important}

/* Show the video's poster from the very first paint. portal.css normally keeps the
   video layer at opacity:0 until JS fires `playing`, which briefly exposes the
   yellow paper underneath during page load. The poster is already the intended
   hero fallback, so keep this layer visible continuously and switch to motion
   without a delayed opacity fade. */
.world-home .portal-hero-video{
  opacity:1!important;
  transition:none!important;
}

/* Keep a static copy of the same hero poster underneath only while the video is
   still loading. This avoids an empty/transparent media layer on slow loads. As
   soon as playback starts, remove the fallback immediately so a different video
   frame can never ghost through the bottom fade. */
.portal-hero-bg{
  opacity:1!important;
  visibility:visible!important;
  transition:none!important;
}
.has-trailer .portal-hero-bg{
  opacity:0!important;
  visibility:hidden!important;
}

/* Keep the hero visually intact almost all the way to the edge. Only a very short,
   restrained fade remains at the bottom so the yellow paper is revealed without
   the broad bright/glowing band the previous transition created. Apply the exact
   same edge to the loading poster fallback so the composition does not jump once
   the video begins playing. */
.portal-hero-bg,
.portal-hero-video,
.portal-hero::after,
.hero-noise,
.hero-stars{
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 calc(100% - 40px),
    rgba(0,0,0,.995) calc(100% - 31px),
    rgba(0,0,0,.97) calc(100% - 23px),
    rgba(0,0,0,.86) calc(100% - 15px),
    rgba(0,0,0,.52) calc(100% - 8px),
    rgba(0,0,0,.18) calc(100% - 3px),
    transparent 100%
  )!important;
  mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 calc(100% - 40px),
    rgba(0,0,0,.995) calc(100% - 31px),
    rgba(0,0,0,.97) calc(100% - 23px),
    rgba(0,0,0,.86) calc(100% - 15px),
    rgba(0,0,0,.52) calc(100% - 8px),
    rgba(0,0,0,.18) calc(100% - 3px),
    transparent 100%
  )!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
}

.hero-content{
  width:min(1320px,calc(100% - 44px));
  margin:0 auto;
  padding:86px 0 112px!important;
  max-width:none!important;
}
.hero-logo-stage{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:104px 0 116px!important;
}
.hero-game-title{
  display:block;
  width:clamp(430px,40vw,720px);
  max-width:100%;
  height:auto;
  object-fit:contain;
  transform:translateY(-12vh);
  filter:brightness(1.45) contrast(1.08) saturate(1.08) drop-shadow(0 8px 18px rgba(0,0,0,.24));
}
.hero-title{
  max-width:760px;
  font-size:clamp(58px,6.6vw,108px)!important;
  line-height:.90!important;
}
.hero-lead{max-width:610px!important;font-size:18px!important;line-height:1.5!important;margin-top:22px!important}
.hero-actions{margin-top:26px!important}
.hero-stats{display:none!important}
.hero-corner{bottom:34px!important}

.hero-transition{display:none!important}
.marquee{display:none!important}

/* The paper itself stays fully opaque; only the hero artwork/video fades away. */
.world-paper-chapter{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

@media(max-height:760px) and (min-width:1001px){
  .hero-content{padding:72px 0 84px!important}.hero-logo-stage{padding:86px 0 90px!important}
  .hero-game-title{width:clamp(390px,36vw,640px);transform:translateY(-9vh)}
}
@media(max-width:1000px){
  .portal-hero{height:100svh!important}.hero-content{padding:108px 0 96px!important}
  .hero-logo-stage{padding:118px 0 104px!important}.hero-game-title{width:min(78vw,680px);transform:translateY(-6vh)}
  .portal-hero-bg,.portal-hero-video,.portal-hero::after,.hero-noise,.hero-stars{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 34px),rgba(0,0,0,.98) calc(100% - 25px),rgba(0,0,0,.84) calc(100% - 15px),rgba(0,0,0,.44) calc(100% - 7px),rgba(0,0,0,.14) calc(100% - 2px),transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 34px),rgba(0,0,0,.98) calc(100% - 25px),rgba(0,0,0,.84) calc(100% - 15px),rgba(0,0,0,.44) calc(100% - 7px),rgba(0,0,0,.14) calc(100% - 2px),transparent 100%)!important;
  }
}
@media(max-width:680px){
  .hero-content{width:min(100% - 30px,1320px);padding:92px 0 82px!important}
  .hero-logo-stage{padding:104px 0 88px!important}.hero-game-title{width:min(90vw,620px);transform:translateY(-4vh)}
  .portal-hero-bg,.portal-hero-video,.portal-hero::after,.hero-noise,.hero-stars{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 26px),rgba(0,0,0,.96) calc(100% - 18px),rgba(0,0,0,.76) calc(100% - 10px),rgba(0,0,0,.36) calc(100% - 4px),rgba(0,0,0,.12) calc(100% - 1px),transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 26px),rgba(0,0,0,.96) calc(100% - 18px),rgba(0,0,0,.76) calc(100% - 10px),rgba(0,0,0,.36) calc(100% - 4px),rgba(0,0,0,.12) calc(100% - 1px),transparent 100%)!important;
  }
}