/* Página inicial do lunarush.io (captura de 18/03/2022). Regras portadas do app.css original
   (content/assets/...) + o pedaço do Angular Material / normalize / h5bp / Swiper que a página usa. */

/* ------------------------------------------------------------ fontes (content/assets/fonts/style.css) */
@font-face { font-family: 'agency fb bold'; src: url('../img/site/fonts/agencyfb-bold.woff2') format('woff2'); }
@font-face { font-family: 'agency fb'; src: url('../img/site/fonts/agencyfb.woff2') format('woff2'); }

/* ------------------------------------------------------------ base (normalize + h5bp + angular-material) */
html, body { height: 100%; position: relative; }
html { color: #222; font-size: 16px; line-height: 1.4; background-color: #fafafa; font-family: Roboto, 'Helvetica Neue', sans-serif; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; }
.cx_nav *, .cx_nav *::before, .cx_nav *::after { box-sizing: border-box; }
img { border: 0; vertical-align: middle; }
a { background-color: transparent; }
b { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
iframe { border: 0; }
section, header, footer { display: block; }

/* layout do Angular Material (atributos layout / flex) */
[layout] { box-sizing: border-box; display: flex; }
[layout="row"] { flex-direction: row; }
[layout="column"] { flex-direction: column; }
[layout-wrap] { flex-wrap: wrap; }
[layout-align="space-between center"] { justify-content: space-between; align-items: center; align-content: center; max-width: 100%; }
[layout-align="space-between stretch"] { justify-content: space-between; align-items: stretch; align-content: stretch; }
[layout-align="center center"] { justify-content: center; align-items: center; align-content: center; max-width: 100%; }
[layout-align="center center"] > * { max-width: 100%; box-sizing: border-box; }
[flex] { flex: 1; box-sizing: border-box; }
[layout="row"] > [flex] { min-width: 0; }
[layout="column"] > [flex] { min-height: 0; }
[layout="row"] > [flex="100"] { flex: 1 1 100%; max-width: 100%; max-height: 100%; }
[layout="row"] > [flex="95"] { flex: 1 1 95%; max-width: 95%; max-height: 100%; }
[layout-margin], [layout-margin] > * { margin: 8px; }
@media (min-width: 600px) and (max-width: 959px) {
  [layout-sm="column"] { flex-direction: column; }
  [layout="row"] > [flex-sm="30"] { flex: 1 1 30%; max-width: 30%; }
}
@media (max-width: 599px) {
  [layout-xs="column"] { flex-direction: column; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  [layout="row"] > [flex-md="15"] { flex: 1 1 15%; max-width: 15%; max-height: 100%; }
}
@media (min-width: 1280px) and (max-width: 1919px) {
  [layout="row"] > [flex-lg="15"] { flex: 1 1 15%; max-width: 15%; max-height: 100%; }
}
@media (min-width: 1920px) {
  [layout="row"] > [flex-gt-lg="15"] { flex: 1 1 15%; max-width: 15%; max-height: 100%; }
  [layout="row"] > [flex-gt-lg="30"] { flex: 1 1 30%; max-width: 30%; max-height: 100%; }
  [layout="row"] > [flex-gt-lg="25"] { flex: 1 1 25%; max-width: 25%; max-height: 100%; }
}
@media (min-width: 960px) {
  [layout="row"] > [flex-gt-sm="30"] { flex: 1 1 30%; max-width: 30%; max-height: 100%; }
  [layout="row"] > [flex-gt-sm="25"] { flex: 1 1 25%; max-width: 25%; max-height: 100%; }
}

/* md-button */
.md-button { box-sizing: border-box; display: inline-block; position: relative; cursor: pointer; min-height: 36px; min-width: 88px; line-height: 36px; vertical-align: middle; text-align: center; border-radius: 2px; user-select: none; outline: none; border: 0; padding: 0 8px; margin: 6px 8px; background: transparent; color: currentColor; white-space: nowrap; text-transform: uppercase; font-weight: 500; font-size: 14px; letter-spacing: .01em; text-decoration: none; overflow: hidden; transition: background-color .4s cubic-bezier(.25, .8, .25, 1); }
.md-button:hover { background-color: rgba(158, 158, 158, .2); }

/* ------------------------------------------------------------ helpers/general.css + typography.css */
body { font-family: 'agency fb' !important; overflow-x: hidden; font-size: 1.3rem; -webkit-font-smoothing: antialiased; text-shadow: rgba(0, 0, 0, .01) 0 0 1px; text-rendering: optimizeLegibility; background: linear-gradient(to bottom, #1c0c3d 45%, #361e38 100%); color: rgba(0, 0, 0, .87); }
h1, h2, h3, h4, h5, h6 { font-family: 'agency fb bold' !important; margin-bottom: .8em; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
h1 { font-size: 3rem; }
h2 { font-size: 1.5em; margin-top: .83em; }
h3 { font-size: 1.17em; margin-top: 1em; }
p { margin: 1em 0; }
.text-center { text-align: center; }
.d-block { display: block; }
.d-none { display: none; }
@media (min-width: 959px) { .d-inline-md { display: inline-block !important; } }
.cx_lead { font-size: 1.5rem; text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.cx_headline h2 { font-size: 2.3rem; margin-bottom: .3em; }
.text-white { color: #fff; }
.text-drkWhite { color: #cec4d3; }
.text-orange { color: #ea8308; }
.text-pink { color: #ff309e; }
.text-yellow { color: #ff0; }
.object-fit_cover { object-fit: cover; }
.img-fluid { max-width: 100%; height: auto; }

/* ------------------------------------------------------------ helpers/background.css */
.bg-drkPink { background-color: #3c0049; }
.bg-drkBlue { background-color: #030036; }
.bg-ldrkBlue { background-color: #1c0c3d; }
.grad-drkPink-drkBlue { background: linear-gradient(to bottom, #590f40 45%, #1c0c3d 100%); }
.grad-drkBlue-drkPink { background: linear-gradient(to bottom, #1c0c3d 45%, #361e38 100%); }
.overlay-article.top-grd-img::before { top: -294px; background: url('../img/site/mask_pink.png') repeat-x 0 0; min-height: 300px; }
.overlay-article.top-grd-img-blue::before { top: -294px; background: url('../img/site/mask-blue.png') repeat-x 0 0; }

/* ------------------------------------------------------------ helpers/animation.css */
.cx_add-anim-float { transform: translatey(0); animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translatey(0); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } }

/* ------------------------------------------------------------ layout/layout.css */
/* as estrelas (::after a 2560px) passavam do rodapé e alongavam a página: corta no fim do rodapé */
.site-page { overflow: hidden; overflow: clip; }
.cx_main-wrapper { background: linear-gradient(to bottom, #be4949 45%, #992525 100%); }
.cx_footer-branding { margin-bottom: 25px; display: block; }
.cx_ft-copy-right { text-align: center; padding: .1rem 0; color: #cec4d3; font-size: 1rem; border-top: 1px solid #dd5353; background-color: #02002c; padding-bottom: 50px; padding-left: 15px; }
@media (min-width: 960px) { .cx_ft-copy-right { text-align: left; } }
@media (min-width: 1200px) { .container { max-width: 1144px; } }
.container { margin-right: auto; margin-left: auto; }
.cx_loading-spiner-holder { z-index: 99999; text-align: center; align-items: center; justify-content: center; position: fixed; inset: 0; width: 100%; height: 100%; display: flex; background: radial-gradient(ellipse at center, #dc2ccd 0%, #53067f 100%); transition: opacity .3s; }
.cx_loading-spiner-holder.hide { opacity: 0; pointer-events: none; }
.cx_loading-spiner-holder .cx_loading-spiner { width: 320px; }
.cx_loading-spiner-holder .cx_text-loading { font-family: 'agency fb bold' !important; font-size: 2rem; display: inline-block; color: #c726c1; position: relative; margin-top: -35px; }
.cx_text-loading::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; color: #ff309e; border-bottom: 7px solid #ff309e; animation: lod 1s linear infinite; overflow: hidden; white-space: nowrap; font-family: 'agency fb bold' !important; }
@keyframes lod { 0% { width: 0; } 100% { width: 100%; } }

/* ------------------------------------------------------------ elements/hero.css */
.cx_hero { position: relative; width: 100%; height: 100%; min-height: 100%; padding-top: 30px; background: #590f40; box-sizing: content-box; }
.cx_hero video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: #030036; object-fit: cover; }
.cx_viewport-header { position: relative; height: 100vh; text-align: left; display: flex; align-items: center; color: #fff; padding: 10px; z-index: 10; padding-top: 100px; }
@media (min-width: 959px) { .cx_viewport-header { max-width: 261px !important; padding: 0 !important; } }
@media (max-width: 380px) { .cx_hero video { height: 54%; } .overlay-article.top-grd-img::before { top: -507px !important; } }
@media (min-width: 381px) and (max-width: 480px) { .cx_hero video { height: 75%; } .overlay-article.top-grd-img::before { top: -422px; } }

/* ------------------------------------------------------------ elements/nav.css */
.cx_nav { position: absolute; width: 100%; left: 0; top: 0; z-index: 999; color: #fff; font-size: 20px; line-height: 1.4; }
.cx_nav > .container > div { flex: 1; }
.cx_branding { width: 100px; margin-top: .5rem; }
.cx_branding img { height: 63px; }
.cx_menu { position: relative; display: flex; align-items: center; }
.cx_menu .md-button { font-size: 1.3em; font-weight: 800; text-shadow: 0 0 4px rgba(0, 0, 0, .9); color: #fff; }
.cx_menu .md-button.off { cursor: default; }
.cx_menu::before { content: ''; right: -45px; position: absolute; width: 100%; height: 100%; background: url('../img/site/bg-menu.png') no-repeat 0 0; z-index: -1; }
@media (min-width: 600px) { .cx_menu::before { left: 58px; right: 0; } }
/* celular: o menu inteiro (~600px) empurrava a página para o lado; fica só o "Play now", como no whitepaper */
@media (max-width: 599px) {
  .cx_menu { margin-left: auto; }
  .cx_menu .md-button:not(.cx_btn-play-game), .cx_menu::before { display: none; }
}
@media (max-width: 480px) {
  .cx_menu .cx_btn-play-game { width: 170px; height: 48px; background-size: contain; }
}

/* ------------------------------------------------------------ elements/button.css + sprite.css */
.cx_panpoo a { display: inline-block; margin-right: 7px; }
.cx_panpoo-ic-pancake { width: 145px; height: 34px; }
.cx_panpoo-ic-poocoin { width: 115px; height: 34px; }
.cx_panpoo-m-ic-pancake { height: 24px; }
.cx_btn-play-game { width: 227px; height: 64px; display: inline-block; background: url('../img/site/play-btn-2.png') no-repeat; }
.cx_btn-play-game:hover { background-color: transparent; filter: brightness(1.08); }
/* o svg.svg original (13 MB) virou um PNG com a mesma folha de sprites, na escala de 478px que a página usa */
.cx_charactersTab-button-next, .cx_charactersTab-button-prev, .cx_timeline-button-next, .cx_timeline-button-prev { width: 45px; height: 45px; background: url('../img/site/sprite.png') no-repeat; background-size: 478px; box-sizing: content-box; }
.cx_charactersTab-button-prev, .cx_timeline-button-prev { background-position: -242px 0; }
.cx_charactersTab-button-next, .cx_timeline-button-next { background-position: -287px 0; }
.cx_have-line { position: relative; }
.cx_have-line::before { position: absolute; top: -50px; left: 50%; margin-left: -76px; content: ''; background: url('../img/site/sprite.png') no-repeat; width: 155px; height: 20px; background-size: 478px; background-position: 0 -93px; }

/* ------------------------------------------------------------ elements/article.css */
.cx_article { position: relative; width: 100%; padding: 20px 0; }
.cx_article-content { position: relative; height: 100%; color: #fff; z-index: 10; }
.overlay-article::before { top: 0; content: ''; position: absolute; width: 100%; height: 100%; z-index: 3; left: 0; pointer-events: none; }
.cx_thumb-bcoinToken { width: 315px; height: 384px; }
@media (min-width: 959px) {
  .cx_characterBox { margin: 0 auto !important; }
  .cx_article-content-padding { padding: 0 180px; }
  .cx_thumb-bcoinToken { width: 480px; margin: 0 auto; }
  .cx_charactersTab-thumb { height: 400px; width: 500px; }
  .cx_charactersTab .cx_character-text { width: 50%; padding: 0 5rem; position: relative; top: -70px; margin-bottom: -70px; }
  .cx_charactersTab .cx_character-text > h3 { text-align: center; }
}
.cx_thumb-bcoinToken { background: url('../img/site/chest.png') no-repeat center center; background-size: contain; }
.cx_character-text { display: block; }
.cx_characterBox { width: 250px; position: relative; display: flex; flex-direction: column; margin: 2rem auto; text-decoration: none; color: #00e; }
.cx_characterBox .cx_character-text, .cx_characterBox .cx_img-character, .cx_characterBox .cx_img-placholder { position: absolute; }
.cx_characterBox .cx_img-character { z-index: 1; width: 250px; bottom: 29px; margin: 0 auto; }
.cx_characterBox .cx_img-character.cx_img-character-md { width: 188px; }
.cx_characterBox .cx_img-placholder { width: 250px; bottom: 0; }
.cx_charactersTab-desc { display: flex; width: 100%; height: 100%; position: relative; margin: 5rem auto 0; }
.cx_charactersTab-thumb { text-align: center; }
.cx_charactersTab-thumb img { width: auto; height: auto; max-width: 52%; max-height: 100%; transform: translate(0, -18%); }
.cx_characterBox.cx_size-character-sm { width: 100px; height: 184px; }
.cx_characterBox.cx_size-character-sm .cx_img-character, .cx_characterBox.cx_size-character-sm .cx_img-placholder { width: 100px; }
.cx_characters .cx_characterBox .cx_character-text, .cx_characters .cx_characterBox .cx_img-character, .cx_characters .cx_characterBox .cx_img-placholder { position: relative; }
.cx_normal-section { padding: 100px 0; }

/* ------------------------------------------------------------ elements/timeline.css + swiper */
.swiper-container, .swiper-container-timeline-normal { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; }
.cx_characters, .cx_charactersTab { position: relative; }
.cx_characters { padding: 5rem 0; }
.cx_charactersTab-items .swiper-slide div { opacity: .4; top: 0; }
.cx_charactersTab-items .swiper-slide-active div { opacity: 1; }
.cx_charactersTab-contents .swiper-slide div { opacity: .4; }
.cx_charactersTab-contents .swiper-slide-active div { opacity: 1; }
.cx_charactersTab-desc { margin-top: 5rem; }
.cx_charactersTab-buttons-container { position: absolute; top: 52px; left: 0; right: 0; }
.cx_charactersTab-button-next, .cx_charactersTab-button-prev { position: absolute; top: 50%; margin-top: 0; z-index: 2; cursor: pointer; padding: 5px; }
.cx_charactersTab-button-next { right: 0; }
.cx_charactersTab-button-prev { left: 0; }
.swiper { width: 100%; height: 100%; }
.cx_timeline-normal { margin-top: 5rem; position: relative; }
.swiper-container-timeline-normal .swiper-slide { display: flex; justify-content: center; align-items: center; }
.swiper-container-timeline-normal::after { content: ''; width: 100%; height: 2px; position: absolute; top: 1.4rem; opacity: .5; border-bottom: 2px solid #686868; }
.swiper-container-timeline-normal .cx_timeline-date { position: relative; top: -2px; color: #ff309e; display: block; }
.swiper-container-timeline-normal .cx_timeline-date::after { content: ''; width: .4rem; height: .4rem; position: absolute; bottom: -.4rem; background-color: #707070; border: 3px solid #3c0049; border-radius: 50%; left: 50%; margin-right: -50%; transform: translateY(-8%); box-sizing: content-box; }
.cx_timeline-buttons-container { position: absolute; top: -25px; right: 0; left: 0; }
.cx_timeline-button-next, .cx_timeline-button-prev { position: absolute; top: 50%; margin-top: 0; z-index: 2; cursor: pointer; padding: 5px; }
.cx_timeline-button-next { right: 15px; }
.cx_timeline-button-prev { left: 15px; }
.cx_charactersTab .swiper-slide.cx_characterBox-item { cursor: pointer; width: auto; height: 100%; display: flex; justify-content: center; align-items: center; }
.cx_charactersTab-button-next:hover, .cx_charactersTab-button-prev, .cx_timeline-button-next:hover, .cx_timeline-button-prev:hover { opacity: .8; }
.swiper-button-disabled { opacity: .1 !important; cursor: not-allowed !important; }
.cx_timeline-normal-container { overflow: hidden; padding: 0 20px; }
@media (min-width: 959px) {
  .cx_timeline-normal-container { margin: 0 auto; padding: 0 !important; }
  .cx_charactersTab-buttons-container { right: -3.5rem !important; left: -3.5rem !important; }
  .cx_charactersTab-button-next { right: 30px !important; }
  .cx_charactersTab-button-prev { left: 30px !important; }
}
@media (min-width: 1200px) { .cx_timeline-normal-container { width: 1200px; overflow: hidden; margin: 0 auto 70px; } }

/* ------------------------------------------------------------ elements/list.css, socail.css, grid.css */
.cx-socail { position: fixed; z-index: 999; right: 20px; top: 30vh; padding: 10px; border-radius: 25px; background-color: #2a1766; border: 1px solid #85339e; box-shadow: rgba(92, 92, 104, .25) 0 15px 30px -12px inset, rgba(0, 0, 0, .3) 0 9px 12px -9px inset; }
.cx-socail a { display: block; }
/* sem link: os ícones ficam só de enfeite (no original eram clicáveis) */
.cx-socail img { width: 30px; margin-bottom: 5px; }
.cx_list-link-ft li > a { color: #cec4d3; text-decoration: none; }
.cx_list-link-ft li > a.off { cursor: default; }
.cx_list-link-ft { text-align: center; list-style: none; padding: 0; margin: 0; }
@media (min-width: 959px) { .cx_list-link-ft { text-align: left; } }
.cx_rect-branding { display: flex; justify-content: stretch; flex-wrap: wrap; }
.cx_rect-branding-item { width: 200px; object-fit: cover; text-align: center; flex: 1; }
.cx_rect-branding-item img { height: 90px; }
/* "Available on": a pílula da pump.fun num quadro no mesmo estilo do selo da Verichains que ficava aqui */
.pf-tile { display: inline-flex; align-items: center; gap: 14px; height: 90px; padding: 0 24px 0 18px; background: rgba(255, 255, 255, .15); color: #fff; font: 600 32px/1 'Segoe UI', Arial, sans-serif; text-transform: none; text-decoration: none; }
a.pf-tile[href]:hover { background: rgba(255, 255, 255, .25); }
/* linha do CA na seção do token (aparece quando o data-ca da seção está preenchido) */
.ca-row[hidden] { display: none; }
.ca-addr { word-break: break-all; }
.ca-copy { margin-left: 6px; padding: 2px 12px; border: 0; border-radius: 4px; background: #ff309e; color: #fff; font: inherit; font-size: .8em; cursor: pointer; vertical-align: middle; }
.ca-copy:hover { background: #ff58b1; }
.cx_rect-branding-item .pf-tile img { height: 58px; width: 58px; }
/* o quadro é mais largo que a caixa de 200px do selo original: a caixa acompanha o quadro para ficar centralizada */
.cx_rect-branding-item.pf-item { width: auto; flex: 0 0 auto; }

/* ------------------------------------------------------------ elements/partical.css (estrelas subindo) */
.particle, .particle::after { background: transparent; }
.particle::after { position: absolute; content: ''; top: 2560px; }
.particle-1 { animation: animParticle 60s linear infinite; height: 1px; width: 1px; }
.particle-1::after { height: 1px; width: 1px; }
.particle-2 { animation: animParticle 120s linear infinite; height: 2px; width: 2px; }
.particle-2::after { height: 2px; width: 2px; }
@keyframes animParticle { from { transform: translateY(0); } to { transform: translateY(-2560px); } }