/* Final Axie-reference alignment for the welcome-panel title.
   Loaded after welcome-axie.css so the title stays centered inside the turquoise band. */
@media (min-width:1121px){
  .world-home .welcome-card-bar{
    top:92px!important;
    left:4.4%!important;
    right:41.6%!important;
    min-height:76px!important;
    padding:0 40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
    text-align:center!important;
  }
}

@media (min-width:1750px){
  .world-home .welcome-card-bar{
    top:96px!important;
    left:4.4%!important;
    right:41.6%!important;
  }
}

/* Paper transition layout pass. On desktop the paper starts almost exactly at the
   fold, like the Axie reference. Use vw for the overlap so browser zoom does not
   turn a small overlap into a much larger one. */
@media (min-width:1001px){
  body.world-home main > .world-paper-chapter{
    margin-top:-1.02vw!important;
    padding-top:clamp(220px,13vw,270px)!important;
    padding-bottom:clamp(270px,16vw,340px)!important;
    background-size:100% 100%!important;
    background-position:center center!important;
  }

  body.world-home main > .world-about{
    margin-top:clamp(-370px,-17vw,-290px)!important;
    padding-top:clamp(360px,20vw,430px)!important;
  }

  body.world-home main > .world-about::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:-380px!important;
    height:420px!important;
    background:#101e52!important;
    z-index:0!important;
    pointer-events:none!important;
  }

  body.world-home main > .world-about > *{
    position:relative!important;
    z-index:1!important;
  }
}

@media (max-width:1000px){
  body.world-home main > .world-paper-chapter{
    margin-top:-78px!important;
    padding-top:180px!important;
    padding-bottom:225px!important;
  }
  body.world-home main > .world-about{
    margin-top:-235px!important;
    padding-top:280px!important;
  }
  body.world-home main > .world-about::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:-255px!important;
    height:290px!important;
    background:#101e52!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  body.world-home main > .world-about > *{position:relative!important;z-index:1!important}
}

@media (max-width:680px){
  body.world-home main > .world-paper-chapter{
    margin-top:-42px!important;
    padding-top:132px!important;
    padding-bottom:165px!important;
    background-size:150% 100%!important;
    background-position:48% center!important;
  }
  body.world-home main > .world-about{
    margin-top:-178px!important;
    padding-top:218px!important;
  }
  body.world-home main > .world-about::before{
    top:-195px!important;
    height:225px!important;
  }
}

/* Use the original uploaded transparent paper PNG, but keep the hero media at the hero's
   real viewport height. */
body.world-home main > .world-paper-chapter{
  background-image:url('./assets/world/paper-wave-transition-original-004104.png?v=1')!important;
  background-color:transparent!important;
}
body.world-home .portal-hero{
  overflow:hidden!important;
}
body.world-home .portal-hero-bg,
body.world-home .portal-hero-video,
body.world-home .portal-hero::after,
body.world-home .hero-noise{
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-mask-size:auto!important;
  mask-size:auto!important;
}
body.world-home .portal-hero-video{
  object-fit:cover!important;
  object-position:center center!important;
}

@media(max-width:1000px){
  body.world-home .portal-hero-bg,
  body.world-home .portal-hero-video,
  body.world-home .portal-hero::after,
  body.world-home .hero-noise{
    height:100%!important;
  }
}

@media(max-width:680px){
  body.world-home .portal-hero-bg,
  body.world-home .portal-hero-video,
  body.world-home .portal-hero::after,
  body.world-home .hero-noise{
    height:100%!important;
  }
}

/* One continuous paper artwork. */
@media (min-width:1001px){
  body.world-home main > .world-paper-chapter{
    position:relative!important;
    isolation:isolate!important;
    z-index:7!important;
    overflow:visible!important;
    margin-top:-1.02vw!important;
    background-image:none!important;
    background-color:transparent!important;
  }

  body.world-home main > .world-paper-chapter::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    top:-0.213vw!important;
    width:100%!important;
    height:47.42vw!important;
    background-image:url('./assets/world/paper-wave-transition-original-004104.png?v=1')!important;
    background-position:center top!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    /* Measured from the two 100% Chrome screenshots: BabyT's paper averaged about
       RGB 252/236/162 while Axie averaged about 248/230/160 in the same flat paper
       region. This tiny correction preserves the artwork while matching Axie's
       on-page paper tone instead of the brighter yellow rendering. */
    filter:brightness(.978) hue-rotate(-1.5deg) saturate(.982)!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  body.world-home main > .world-paper-chapter::after{
    content:none!important;
    display:none!important;
  }

  body.world-home main > .world-paper-chapter > *{
    position:relative!important;
    z-index:2!important;
  }
}

/* Final measured desktop fold pass.
   Reference screenshots at 100% browser zoom are 1916px wide. In Axie the first
   pale paper pixels appear around y=1002, while the previous BabyT pass exposed
   them around y=974 and also let the hero media stop around y=969, leaving a flat
   navy strip underneath. Instead of stretching the video layer independently,
   make the HERO itself continue behind the paper wave. The added 11.5vw gives the
   top wave real moving video underneath its transparent notches; the -12.95vw
   chapter overlap then places only the tiny first paper tip at the viewport fold.
   Because both values are vw-based, the physical relationship remains stable when
   the browser is zoomed. The slightly taller cover area also produces the small,
   intentional video zoom requested without a separate scale transform. */
@media (min-width:1001px){
  body.world-home .portal-hero{
    height:calc(100vh + 11.5vw)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    z-index:6!important;
  }

  body.world-home .portal-hero-bg,
  body.world-home .portal-hero-video,
  body.world-home .portal-hero::after,
  body.world-home .hero-noise{
    width:100%!important;
    height:100%!important;
    top:0!important;
    bottom:auto!important;
  }

  body.world-home .portal-hero-video{
    object-fit:cover!important;
    object-position:center center!important;
  }

  body.world-home main > .world-paper-chapter{
    margin-top:-12.95vw!important;
  }

  body.world-home main > .world-paper-chapter::before{
    top:-0.213vw!important;
  }

  /* Keep the hero logo and pause control at their old viewport positions even
     though the media canvas now continues below the fold. */
  body.world-home .hero-game-title{
    transform:translateY(calc(-12vh - 5.75vw))!important;
  }
  body.world-home .hero-media-actions{
    bottom:calc(clamp(100px,13vh,150px) + 11.5vw)!important;
  }
}