@import url('./welcome-axie.css?v=7');

/* Transition from the illustrated paper chapter into the compact about section. */
.world-home .world-paper-chapter{
  isolation:isolate!important;
  background-color:#fded8c!important;
  background-image:url('./assets/world/paper-yellow-texture.webp')!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:repeat-y!important;
}
.world-home .world-paper-chapter > *{position:relative;z-index:2}

/* Top hand-off: keep the yellow paper BEHIND the hero. The hero/video owns the
   actual fade (hero-transition.css), so nothing yellow is painted over the video. */
@media(min-width:1001px){
  .world-home .portal-hero{height:100dvh!important;min-height:0!important}
  .world-home .world-paper-chapter{margin-top:-82px!important;padding-top:181px!important}
}
@media(min-width:1800px){
  .world-home .world-paper-chapter{padding-top:216px!important}
}

.world-home .world-paper-chapter::before,
.world-home .world-paper-chapter::after{
  content:none!important;
  display:none!important;
}

/* Bottom hand-off: use the SAME technique and fade profile as the hero above.
   Instead of painting a blue/yellow gradient on top, the final 40px of the paper
   itself become transparent and reveal the blue About section underneath. */
.world-home .world-paper-chapter{
  -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;
}

/* Restore the original transparent title artwork that was uploaded for this
   section. The later text heading remains in the markup only for accessibility,
   but is not rendered visually. */
.world-home .works-heading{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0 auto 34px!important;
  padding:0 20px!important;
}
.world-home .works-heading > *{
  display:none!important;
}
.world-home .works-heading::before{
  content:"";
  display:block!important;
  width:clamp(250px,18vw,330px)!important;
  max-width:72vw!important;
  aspect-ratio:720 / 316;
  background:url('./assets/brand/in-the-works-title.png?v=3') center/contain no-repeat!important;
}

/* Remove the caption below the concept-art gallery. */
.world-home .works-caption{
  display:none!important;
}

/* Pull the blue section behind the transparent edge, then compensate its top
   padding so the About content stays at the same visual position as before. */
.world-home .world-about{
  margin-top:-40px!important;
  padding-top:190px!important;
  background:#101e52!important;
}
.world-home .world-about::before{background:#101e52!important}
.world-home .world-about::after{content:none!important;display:none!important}

@media(max-width:1000px){
  .world-home .world-paper-chapter{margin-top:-68px!important;padding-top:153px!important}
  .world-home .world-paper-chapter{
    -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;
  }
  .world-home .works-heading{margin-bottom:28px!important}
  .world-home .works-heading::before{width:min(300px,62vw)!important}
  .world-home .world-about{margin-top:-34px!important;padding-top:184px!important}
}

@media(max-width:900px){
  .world-home .world-about{padding-top:144px!important}
}

@media(max-width:680px){
  .world-home .world-paper-chapter{margin-top:-48px!important;padding-top:108px!important}
  .world-home .world-paper-chapter{
    -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;
  }
  .world-home .works-heading{margin-bottom:22px!important}
  .world-home .works-heading::before{width:min(265px,72vw)!important}
  .world-home .world-about{margin-top:-26px!important;padding-top:136px!important}
}

@media(max-width:560px){
  .world-home .world-about{padding-top:106px!important}
}

/* Compact the Works chapter. Keep the gallery close to both its heading and the
   blue About section so the page reads as one continuous layout rather than two
   blocks separated by a large empty yellow band. */
.world-home .world-paper-chapter{
  padding-bottom:28px!important;
}
.world-home .world-paper-chapter .works{
  padding-top:58px!important;
  padding-bottom:24px!important;
}
.world-home .works-title-wrap{
  margin-bottom:22px!important;
}
.world-home .world-about{
  padding-top:88px!important;
}

@media(max-width:1000px){
  .world-home .world-paper-chapter{padding-bottom:24px!important}
  .world-home .world-paper-chapter .works{padding-top:50px!important;padding-bottom:22px!important}
  .world-home .works-title-wrap{margin-bottom:20px!important}
  .world-home .world-about{padding-top:86px!important}
}

@media(max-width:680px){
  .world-home .world-paper-chapter{padding-bottom:20px!important}
  .world-home .world-paper-chapter .works{padding-top:40px!important;padding-bottom:18px!important}
  .world-home .works-title-wrap{margin-bottom:16px!important}
  .world-home .world-about{padding-top:70px!important}
}

@media(max-width:560px){
  .world-home .world-about{padding-top:62px!important}
}

/* Final paper hand-off: use the exact paper-wave-transition.png artwork without
   distorting it. Width follows the viewport; height follows the PNG's own aspect ratio. */
body.world-home main > .world-paper-chapter{
  position:relative!important;
  isolation:isolate!important;
  z-index:7!important;
  margin-top:clamp(-260px,-14vw,-170px)!important;
  padding-top:clamp(190px,12vw,245px)!important;
  padding-bottom:clamp(160px,11vw,235px)!important;
  background-color:transparent!important;
  background-image:url('./assets/world/paper-wave-transition.png?v=9')!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  overflow:visible!important;
}
body.world-home main > .world-paper-chapter > *{
  position:relative!important;
  z-index:2!important;
}

/* Let the actual hero remain visible in the transparent notches of the top wave. */
body.world-home .portal-hero-bg,
body.world-home .portal-hero-video,
body.world-home .portal-hero::after,
body.world-home .hero-noise,
body.world-home .hero-stars{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Pull the navy About block underneath the bottom paper edge so every cut-out in
   the silhouette reveals the section itself rather than the page background. */
body.world-home main > .world-about{
  position:relative!important;
  z-index:1!important;
  margin-top:clamp(-220px,-10vw,-145px)!important;
  padding-top:clamp(205px,13vw,280px)!important;
  background:#101e52!important;
}

@media(max-width:1000px){
  body.world-home main > .world-paper-chapter{
    margin-top:-145px!important;
    padding-top:165px!important;
    padding-bottom:165px!important;
  }
  body.world-home main > .world-about{
    margin-top:-145px!important;
    padding-top:190px!important;
  }
}

@media(max-width:680px){
  body.world-home main > .world-paper-chapter{
    margin-top:-95px!important;
    padding-top:120px!important;
    padding-bottom:125px!important;
    background-size:100% auto!important;
    background-position:center top!important;
  }
  body.world-home main > .world-about{
    margin-top:-105px!important;
    padding-top:145px!important;
  }
}