@font-face{
  font-family:'BPreplay';
 src:url('src/fonts/BPreplay.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}
p{
  font-family:'BPreplay', sans-serif;
}
:root{
  --white:#fff;
 --purple:#432dB6;
  --azuzinho:#8aeafa;
  --neon-pink:#ea94ff;
  --midnight:#1e1e2f;
}


.bangers-regular{
  font-family:"Bangers", system-ui;
  font-weight:400;
  font-style:normal;
 }
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


body{
  background:var(--white);
  font-family:"Bangers", sans-serif;
  line-height:1.5;
  color:var(--white);
}
.hero{
  background-color:var(--purple);
  position:relative;
  width:100%;
  padding-bottom:2rem;
  text-align:center;
 }

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-color:rgba(67, 45, 182, 0.8);
 backdrop-filter:blur(6px);
  padding:1rem 2rem;
  border-radius:0;
  width:100%;
}

.navbar-ghastcore{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-image:url('src/imagens/flores_bg.jpg');
  background-attachment:fixed;
  background-repeat:repeat;
  background-size:80px;
  backdrop-filter:blur(6px);
  padding:1rem 2rem;
  border-radius:0;
  width:100%;

  animation:navbar-bg-move 30s linear infinite;
  will-change:background-position;
}



@keyframes navbar-bg-move{
  from{ background-position:0 0; }
  to{ background-position:800px 0; } 
}

@media (prefers-reduced-motion: reduce){
  .navbar-ghastcore{ animation:none !important; }
}


.navbar-merch{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-image:url('src/imagens/GHAST_Background_Green.jpg');
  background-size:60px;
  background-repeat:repeat;
  background-attachment:fixed;
  background-color:#e0f7ff;
  backdrop-filter:blur(6px);
  padding:1rem 2rem;
  border-radius:0;
  width:100%;
  animation:navbarmerch-bg-move 30s linear infinite;
  will-change:background-position;
}


@keyframes navbarmerch-bg-move{
  from{ background-position:0 0; }
  to{ background-position:800px 0; } 
}

@media (prefers-reduced-motion: reduce){
  .navbar-merch{ animation:none !important; }
}
 

.navbar-contato{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-image:url('src/imagens/GHAST_Background_Pink.svg');
  background-size:340px;
  background-repeat:repeat;
  background-color:#e0f7ff;
  padding:1rem 2rem;
  border-radius:0;
  width:100%;
  animation:navbarcontato-bg-move 30s linear infinite;
  will-change:background-position;
}


@keyframes navbarcontato-bg-move{
  from{ background-position:0 0; }
  to{ background-position:800px 0; } 
}

@media (prefers-reduced-motion: reduce){
  .navbar-contato{ animation:none !important; }
}


.merch-camisa{
  max-width:600px;
  padding:2rem 1.5rem;
  border-radius:20px;
  color:var(--midnight);
  text-align:left;
  box-shadow:0 6px 12px rgba(0,0,0,0.2);
 transition:transform 0.3s ease, box-shadow 0.3s ease; 
}
.merch-poster{
  max-width:600px;
  padding:2rem 1.5rem;
  border-radius:20px;
  color:var(--midnight);
 text-align:left;
  box-shadow:0 6px 12px rgba(0,0,0,0.2);
  transition:transform 0.3s ease, box-shadow 0.3s ease;  
}
.merch-adesivo{
  max-width:600px;
 padding:2rem 1.5rem;
  border-radius:20px;
  color:var(--midnight);
  text-align:left;
  box-shadow:0 6px 12px rgba(0,0,0,0.2);
 transition:transform 0.3s ease, box-shadow 0.3s ease;  
}



.logo{
  height:100px;
  cursor:pointer;
 }

.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.2rem;
  border:2px solid var(--azuzinho);
  color:var(--azuzinho);
  padding:0.25rem 0.8rem;
  margin-left:1rem;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  font-family:'BPreplay';
 transition:color 0.3s ease;
}
.nav-links a::before,
.nav-links a::after{
  content:"★";
  color:var(--azuzinho);
  font-size:0.7rem;
  opacity:0;
  transform:scale(0);
  transition:all 0.25s ease;
}

.nav-links a::before{
  margin-right:0.25rem;
 }

.nav-links a::after{
  margin-left:0.25rem;
}
.nav-links a:hover::before,
.nav-links a:hover::after{
  opacity:1;
  transform:scale(1);
 }

.nav-links.ghastcore a{
  border:2px solid #432DB6;
  color:#432DB6;
  padding:0.25rem 1rem;
  margin-left:1rem;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  transition:background 0.2s, color 0.2s;
  font-family:'BPreplay';
}
.nav-links.ghastcore a::before,
.nav-links.ghastcore a::after{
  content:"★";
 color:var(--purple);
  font-size:0.7rem;
  opacity:0;
  transform:scale(0);
  transition:all 0.25s ease;
}

.nav-links.ghastcore a:hover::before,
.nav-links.ghastcore a:hover::after{
  opacity:1;
 transform:scale(1);
}


.hero-ghastcore{
  background-color:#d9d9d9;
}
.hero-title{
  color:var(--neon-pink);
  font-size:4.25rem;
  margin-top:1.5rem;
  font-family:'Bangers', cursive;
 font-style:normal;
}

.hero-text{
  max-width:40rem;
  margin:0.5rem auto 0;
  font-size:1rem;
  padding:0 1rem;
  margin-top:1rem;
 }

.btn-area{
  display:flex;
  justify-content:center;
  margin-top:1.5rem;
}

.btn-primary{
  background:#db2777;
  color:var(--white);
  font-weight:bold;
 padding:0.5rem 2rem;
  border-radius:9999px;
  border:none;
  box-shadow:0 4px 6px rgba(0,0,0,0.3);
  cursor:pointer;
  transition:background 0.2s;
 }
.btn-primary:hover{
  background:#f472b6;
}
.wave-divider{
  position:relative;
  width:100%;
  height:60px;
 background:linear-gradient(to bottom, var(--purple) 50%, #B9F5FF 50%);
  overflow:hidden;
}
.wave-divider::after{
  content:'';
  position:absolute;
  top:0; left:0;
 width:100%; height:100%;
  background:url('src/imagens/rapport_divisoria.png') repeat-x center;
  background-size:auto 60px;
}

.wave-divider-outro{
  position:relative;
  width:100%;
  height:60px;
 background:linear-gradient(to bottom, #B9F5FF 57%, var(--purple) 4%);
  overflow:hidden;
}
.wave-divider-outro::after{
  content:'';
  position:absolute;
  top:0; left:0;
 width:100%; height:100%;
  background:url('src/imagens/rapport2.svg') repeat-x left;
  background-size:auto 60px;
}

.wave-divider-estrelas{
  position:relative;
  width:100%;
  height:60px;
 background:none;
  overflow:hidden;
}

.wave-divider-estrelas::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
 background:url('src/imagens/div_stars.svg') repeat-x center;
  background-size:auto 60px;
}

.wave-divider-footer{
  position:relative;
  width:100%;
  height:48px;
  background:linear-gradient(to bottom, #EA94FF 60%, #6e44fe 40%);
  overflow:hidden;
}

.wave-divider-footer::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:url('src/imagens/serrilhado.svg') repeat-x center;
  background-size:auto 30px;
}

.wave-divider-footer-ghastcore{
  position:relative;
  width:100%;
  height:48px;
  background:linear-gradient(to bottom, #B9F5FF 60%, #6e44fe 40%);
  overflow:hidden;
}

.wave-divider-footer-ghastcore::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:url('src/imagens/serrilhado.svg') repeat-x center;
  background-size:auto 30px;
}

.wave-divider-footer-merch{
  position:relative;
  width:100%;
  height:48px;
  background:linear-gradient(to bottom, #D1FF61 60%, #6e44fe 40%);
  overflow:hidden;
  
}

.wave-divider-footer-merch::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:url('src/imagens/serrilhado.svg') repeat-x center;
  background-size:auto 30px;
}
.wave-divider-roxo{
  position:relative;
  width:100%;
  height:60px;
 background:linear-gradient(to bottom, #FBC5FF 50%, #432dB6 50%);
  overflow:hidden;
}

.wave-divider-roxo::after{
  content:'';
  position:absolute;
  top:0; left:0;
 width:100%; height:100%;
  background:url('src/imagens/rapport_roxo.svg') repeat-x center;
  background-size:auto 60px;
}

.wave-divider-rosa{
  position:relative;
  width:100%;
  height:60px;
 background:linear-gradient(to bottom, var(--purple) 50%, #EA94FF 50%);
  overflow:hidden;
}
.wave-divider-rosa::after{
  content:'';
  position:absolute;
  top:0; left:0;
 width:100%; height:100%;
  background:url('src/imagens/rapport_divisoria.png') repeat-x center;
  background-size:auto 60px;
 }

section.about{
  background-image:url('src/imagens/GHAST_Background_LightBlue.svg');
  background-size:80px;
  background-repeat:repeat;
 background-color:#e0f7ff;
}

.about.ghastcore{
  background-image:url('src/imagens/GHAST_Background_Purple.svg');
  background-size:80px;
  background-repeat:repeat;
  background-color:#e0f7ff;
  padding-bottom:2rem;
  background-position: 0 0;
}



.about-outro{
  background-image:url('src/imagens/GHAST_Background_Purple.svg');
  background-size:80px;
  background-repeat:repeat;
  background-color:#e0f7ff;
  position: relative;
  z-index: 0;



}




.about-embeds{
  background-image:url('src/imagens/GHAST_Background_Pink.svg');
  background-size:340px;
  background-repeat:repeat;
  background-color:#e0f7ff;
}

.exp iframe {
  display: block;
  margin: 3rem auto;
  width: 80%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  border: none;
}
.slideshow-container {
    
    width: 90vw;
    height: 56.25vw; 
  
    max-width: 1200px; 
    min-width: 300px; 
    max-height: 750px;
    
    overflow: hidden; 
    position: relative;
    margin: 20px auto;
}

.slides {
    width: 900%; 
    height: 100%;
    display: flex;
    animation: slide-show 27s infinite ease-in-out;
}

.slide {
    width: 11.11%; 
    position: relative;
}

.slide img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes slide-show {
    0% { margin-left: 0; }
    11% { margin-left: 0; } 
    13% { margin-left: -100%; } 
    22% { margin-left: -100%; } 


    24% { margin-left: -200%; }
    33% { margin-left: -200%; }


    35% { margin-left: -300%; }
    44% { margin-left: -300%; }


    46% { margin-left: -400%; }
    55% { margin-left: -400%; }
    
   
    57% { margin-left: -500%; }
    66% { margin-left: -500%; }


    68% { margin-left: -600%; }
    77% { margin-left: -600%; }


    79% { margin-left: -700%; }
    88% { margin-left: -700%; }

  
    90% { margin-left: -800%; } 
    100% { margin-left: -800%; } 
}


.cinza{
  background-image:url(src/imagens/flores_bg.jpg);
  background-size:80px;
  background-attachment:fixed;
  background-repeat:repeat;
  position:relative;
  overflow:visible;
  padding:5.5rem 0 4rem;

  animation:cinza-bg-move 30s linear infinite;
  will-change:background-position;
}

.cinza,
.navbar-ghastcore{
  background-position:0 0;
}

@keyframes cinza-bg-move{
  from{ background-position:0 0; }
  to{ background-position:800px 0; } 
}

@media (prefers-reduced-motion: reduce){
  .cinza{ animation:none !important; }
}

.cinza-inner{
  max-width:1200px;
  margin:0 auto;
  padding:3rem 2rem 0;
  text-align:left;
  position:relative;
  z-index:2;
}
.cinza .section-title{
  text-align:left;
  margin:0 0 1rem 0;
  padding:1rem;
  font-family:'Bangers', cursive;
  font-size:4rem;
  color:#432DB6;
  line-height:1.05;
 }

.cinza .section-text{
  max-width:600px;         
  color:#432DB6;
  font-family:'BPreplay', sans-serif;
  line-height:1.6;
 margin:0 0 1rem 0;
  text-align:left;
}


.cinza-pompom{
  position:absolute;
  left:6%;
  width:320px;
  z-index:1;
  pointer-events:auto; 
  top:-40px;
  transition:transform 0.4s ease;
}

.cinza-pompom:hover{
  transform:scale(1.1) rotate(5deg);
}

.cinza-pompom.behind{
  opacity:0.98;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.06));
  z-index:0;
  pointer-events:auto; 
  transition:transform 0.4s ease; 
}
 
.cinza-pompom.behind:hover{
  transform:scale(1.08) rotate(-3deg);
}

.flores{
  position:absolute;
  bottom:0;
  right:0;
  width:800px;
  height:600px;
  background:url("src/imagens/flores.webp") no-repeat bottom right;
  background-size:contain;
  z-index:1;
  transition:background-image 0.3s ease; 
}

.flores:hover{
  background:url("src/imagens/flores_hover.webp") no-repeat bottom right;
  background-size:contain;
}

.merch{
  background:#D1FF61;
  position:relative;
  overflow:visible;
  padding:5.5rem 0 4rem;
}

.info-cards {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.card-link {
  max-width: 420px; 
  padding-bottom: 2.5rem;
}

.card-link img.card-img {
  width: 100%;
  height: auto;
  border-radius: 25px;
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.card-link img.card-img:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.flowers {
  position: absolute;
  pointer-events: none;
  user-select: none;
  display: block;
  z-index:1;
  transform: translateZ(0);
}

.flores-left {
  left: 0%;
  top: 50%;
  width: 160px;
}

.flores-right {
  right: 0%;
  bottom: 50%;
  width: 160px;
}


.section-title{
  color:var(--purple);
  font-size:3.25rem;
  text-align:center;
  margin-bottom:1rem;
  font-family:'Bangers', regular;
  font-style:normal;
 }
.about .section-title{
  position:absolute;
  padding:2rem 1rem;
  top:0;
  left:0;
  width:100%;
  text-align:center;
  color:var(--purple);
  font-size:3.25rem;
  font-family:'Bangers', regular;
  font-style:normal;
}


.subtitle{
  color:var(--purple);
  font-size:2.5rem;
  margin-top:1.5rem;
  font-family:'Bangers';
  font-style:normal;
}

.subtitle.right{
  text-align:right;
 }

.section-text{
  max-width:40rem;
  margin-top:0.5rem;
  font-size:0.75rem;
  font-size:1.15rem;
  line-height:1.7;
  color:var(--purple)
}

.section-text.center{
  text-align:center;
 padding:2rem 2rem;
  color:var(--purple);
  max-width:none
}

.about-container{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2rem;
 max-width:1200px;
  margin:0 auto;
}

.about-container.reverse{
  align-items:right;
  gap:12rem;
}

.about-container-ghastcore{
  position:relative;
  display:flex;
 justify-content:space-between;
  align-items:flex-start;
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
}

.about-container-ghastcore.reverse{
  align-items:right;
  gap:12rem;
 }


.title-ghastcore{
  color:var(--azuzinho);
  font-size:4.25rem;
  text-align:center;
  margin-bottom:1rem;
  font-family:'Bangers', cursive;
  font-style:normal;
  position:absolute;
  padding:2rem 1rem;
  top:0;
  left:0;
  width:100%;
  text-align:center;
}


.title-princesa{
  color:#432DB6;
  font-size:4.25rem;
  font-family:'Bangers', cursive;
  text-align:center;
  margin-bottom:3rem;
  letter-spacing:1px;
  padding:2rem;
}




.subtitle-ghastcore{
  color:var(--azuzinho);
  font-size:3.5rem;;
  margin-top:1.5rem;
  font-family:'Bangers', cursive;
  font-style:normal;
}

.section-text-ghastcore{
  max-width:32rem;
  margin-top:0.5rem;
  margin-bottom:1.5rem;
  line-height:1.7;
  color:var(--azuzinho);
 font-family:'BPreplay', sans-serif;
}



.section-text-princesa{
  max-width:40rem;
  font-size:1rem;
  text-align: left;
  margin-top:0.5rem;
  line-height:1.7;
  color:var(--purple);
  font-family:'BPreplay', sans-serif;
 }
.about-text{
  flex:1;
  min-width:280px;
  padding-top:6rem;
}

.about iframe{
  display:block;
  margin:3rem auto;
  width:80%;
 max-width:900px;
  aspect-ratio:16 / 9;
  border-radius:20px;
  box-shadow:0 6px 16px rgba(0, 0, 0, 0.25);
  border:none;
 }

.about iframe{
  display:block;
  margin:3rem auto;
  width:80%;
  max-width:900px;
  aspect-ratio:16 / 9;
  border-radius:20px;
 box-shadow:0 6px 16px rgba(0, 0, 0, 0.25);
  border:none;
}


.about-photo-chloe,
.about-photo-desenho{
  flex:1;
  min-width:300px;
  text-align:center;
 }

.about-photo-chloe img{
  max-width:100%;
  margin-top:25%;
  height:auto;
  transition:transform 0.4s ease;
}

.about-photo-chloe img:hover{
  transform:scale(1.1) rotate(+5deg);
}

.about-photo-desenho img{
  max-width:100%;
  margin-top:30%;
  height:auto;
 }

.about-photo-desenho img:hover{
  transform:scale(1.1) rotate(-5deg);
}


.about-chloe{
  flex:1;
  min-width:300px;
  text-align:center;
}

.about-chloe img{
  max-width:100%;
  margin-top:0%;
  height:auto;
  cursor:pointer;
 }

 .about-chloe img:hover{
  transform:scale(1.1) rotate(+5deg);
}
.about-photo-pompom{
  flex:1;
  min-width:300px;
  text-align:center;
}

.about-photo-pompom img{
  max-width:100%;
  margin-top:20%;
  height:auto;
  transition:transform 0.4s ease;
}

.about-photo-pompom img:hover{
  transform:scale(1.1) rotate(-5deg);
}

.geral-title{
  color:var(--neon-pink);
  font-size:3.25rem;
  font-family:'Bangers', cursive;
  font-style:normal;
  text-align:center;
  margin-bottom:2rem;
  padding:1.5rem 1.5rem;
 }

.grid-embeds{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
  justify-items:center;
  align-items:start;
  max-width:1300px;
  margin:0 auto;
 padding:1.5rem 1rem;
}

.embed{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:360px;
  border-radius:16px;
  padding:0.75rem;
 }

.embed iframe{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:12px;
  background-color:#d9d9d9;
  border:none;
 }

.embed p{
  margin-top:0.8rem;
  font-weight:bold;
  font-size:1rem;
  color:#432DB6;
  font-family:'BPreplay';
}

.about-embeds{
  padding:3rem 1rem;
 text-align:center;
}
.footer{
  background-color:#6e44fe;
  padding:2rem 1rem;
  margin-top:auto;
}

.footer-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6rem;
  max-width:1300px;
  margin:0 auto;
  text-align:center;
  flex-wrap:wrap;
}

.footer-logo{
  height:90px;
  width:auto;
 }

.footer-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
}

.footer-text{
  font-family:'BPreplay', sans-serif;
  color:#bdf3ff;
 text-transform:uppercase;
  font-size:0.9rem;
  margin:0;
}

.footer-icons{
  display:flex;
  gap:1rem;
  justify-content:center;
 }

.footer-icons i{
  font-size:1.8rem;
  color:#bdf3ff;
  transition:transform 0.2s ease, opacity 0.2s ease;
 }

.footer-icons i:hover{
  transform:scale(1.1);
  opacity:0.8;
}

.footer-princesa{
  height:100px;
  width:auto;
 }



.galeria-ghast{
  background-image:url('src/imagens/GHAST_Background_LightBlue.svg');
  background-size:80px;
  background-repeat:repeat;
  background-color:#e0f7ff;
  padding:4rem 1rem 6rem;
  text-align:center;
  position:relative;
}

.galeria-container{
  max-width:1200px;
 margin:0 auto;
}

.galeria-title{
  font-family:'Bangers', cursive;
  color:var(--purple);
  font-size:2.8rem;
  margin-bottom:2.5rem;
  letter-spacing:1px;
 }

.galeria-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.8rem;
  justify-items:center;
}

.instagram-media{
  width:100% !important;
 min-width:320px !important;
  max-width:400px !important;
  border-radius:12px !important;
  background:#fff;
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.1);
 transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.instagram-media:hover{
  transform:scale(1.03);
  box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);
 }
body.merch-page{
  background-image:url('src/imagens/GHAST_Background_Green.jpg');
  background-repeat:repeat;
  background-attachment:fixed;
  background-size:60px;
  background-color:#e0f7ff;
  color:var(--purple);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  animation:merch-bg-move 30s linear infinite;
  will-change:background-position;
}

.body.merch-page,
.navbar-merch{
  background-position:0 0;
}

@keyframes merch-bg-move{
  from{ background-position:0 0; }
  to{ background-position:800px 0; } 
}

@media (prefers-reduced-motion: reduce){
  .body.merch-page{ animation:none !important; }
}

.merch-page-container{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-bottom:4rem;
  flex:1;
 }
.merch-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  text-align:center;
  padding:2rem 2rem;
 position:relative;
  z-index:10;
}

.merch-header h1{
  font-family:'Bangers';
  font-size:5rem;
  color:var(--purple);
 }

.merch-header p{
  font-family:'BPreplay', sans-serif;
  font-size:1.rem;
  margin-top:1rem;
  color:var(--purple);
}
.merch-grid{
  display:flex;
 justify-content:center;
  align-items:flex-start;
  gap:2.5rem;
  flex-wrap:wrap;
  padding:2rem 1rem;
 position:relative;
  z-index:10;
}

.merch-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.merch-item-image{
  width:280px;
 height:350px;
  background-color:#c9f9ff;
  border:4px solid #f29cff;
  border-radius:25px;
  box-shadow:0 6px 12px rgba(0,0,0,0.15);
  transition:transform 0.3s ease;
 }

.merch-item-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.merch-item-image:hover{
  transform:translateY(-5px) scale(1.02);
 }

.merch-item-title{
  font-family:'BPreplay', sans-serif;
  font-weight:bold;
  font-size:1.25rem;
  color:var(--purple);
  padding:1rem;
 }

.deco-element{
  flex-shrink:0;
  pointer-events:auto; 
  transition:transform 0.4s ease; 
}

.deco-element:hover{
  transform:scale(1.1); 
}

.deco-creature{
  width:450px;
  transform:rotate(-2deg);
  transition:transform 0.4s ease; 
}

.deco-creature:hover{
  transform:scale(1.1) rotate(-7deg); 
}

.deco-chloe-pose{
  width:360px;
  transform:rotate(2deg);
  transition:transform 0.4s ease;
}

.deco-chloe-pose:hover{
  transform:scale(1.1) rotate(+7deg); 
}

body.contato-page{
  background-image:url('src/imagens/GHAST_Background_Pink.svg');
  background-size:340px;
  background-repeat:repeat;
  background-color:#e0f7ff;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  animation:contato-bg-move 30s linear infinite;
  will-change:background-position;
}

.body.contato-page,
.navbar-contato{
  background-position:0 0;
}

@keyframes contato-bg-move{
  from{ background-position:0 0; }
  to{ background-position:800px 0; } 
}

@media (prefers-reduced-motion: reduce){
  .body.contato-page{ animation:none !important; }
}


.contato-container{
  position:relative;
  overflow-x:hidden;
  padding:2rem 0;
  flex:1;
 }


.conheca-chloe{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:3rem 2rem;
 max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:10;
}

.conheca-imagem img{
  max-width:450px;
  filter:drop-shadow(5px 5px 15px rgba(0,0,0,0.2));
 }

.conheca-texto{
  max-width:500px;
}

.conheca-texto h1{
  font-family:'Bangers', cursive;
  font-size:3.5rem;
  color:#B9F5FF;
  line-height:1.1;
 text-shadow:3px 3px 0px var(--purple);
  margin-bottom:1rem;
}

.conheca-texto p{
  font-family:'BPreplay', sans-serif;
  font-size:1.1rem;
  line-height:1.6;
  color:var(--purple);
 margin-bottom:1.5rem;
}

.social-icons-contato{
  display:flex;
  gap:1rem;
}

.social-icons-contato a{
  display:flex;
  align-items:center;
  justify-content:center;
 width:45px;
  height:45px;
  background-color:var(--azuzinho);
  border-radius:50%;
  text-decoration:none;
  transition:transform 0.3s ease;
}

.social-icons-contato i{
  color:var(--purple);
 font-size:1.5rem;
}

.social-icons-contato a:hover{
  transform:translateY(-4px);
}
.form-section{
  text-align:center;
  padding:4rem 1rem 6rem 1rem;
  background-size:auto 60px;
  position:relative;
  z-index:10;
}

.form-section h2{
  font-family:'Bangers', cursive;
  text-align:center;
  font-size:3rem;
  color:var(--purple);
  margin-bottom:2rem;
}

.form-wrapper{
  background-color:var(--azuzinho);
  max-width:800px;
  margin:0 auto;
  border-radius:20px;
  padding:2.5rem;
 box-shadow:0 10px 30px rgba(0,0,0,0.15);
  text-align:left;
}

.form-wrapper h3{
  font-family:'BPreplay', sans-serif;
  text-align:center;
  font-size:1.8rem;
  color:var(--midnight);
  margin-bottom:2rem;
 }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.form-group{
  display:flex;
  flex-direction:column;
 }

.form-group.full-width{
  grid-column:1 / -1;
}

.form-group input,
.form-group textarea{
  width:100%;
 padding:1rem;
  border:2px solid #e0e0e0;
  border-radius:10px;
  font-family:'BPreplay', sans-serif;
  font-size:1rem;
  background-color:#f7f7f7;
 transition:border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--purple);
 box-shadow:0 0 0 3px rgba(67, 45, 182, 0.2);
}

.submit-button-container{
  text-align:center;
}

.form-group button{
  background-color:#3b82f6;
  color:white;
  font-family:'BPreplay', sans-serif;
  font-size:1.1rem;
  font-weight:bold;
  padding:0.8rem 2.5rem;
  border:none;
 border-radius:50px;
  cursor:pointer;
  transition:background-color 0.3s ease, transform 0.3s ease;
  box-shadow:0 4px 10px rgba(59, 130, 246, 0.4);
 }

.form-group button:hover{
  background-color:#2563eb;
  transform:translateY(-3px);
}
.deco-element-contato{
  position:absolute;
  z-index:1;
 pointer-events:none;
}

.mural-container{

  position:relative;

  max-width:1400px;
 margin:0 auto;
  padding:1rem;
}

.grid-sizer,
.mural-item{
  width:23%;
 margin-bottom:1rem;
}

.mural-item{
  margin-bottom:16px;
 overflow:hidden;
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
 background:white;
}

.mural-item video,
.mural-item iframe {
  width: 100%; 
  height: 100%;
  object-fit: cover; 
  display: block;
  border: none; /
}

.mural-item.small{ height:180px;
 }
.mural-item.medium{ height:280px;
 }
.mural-item.large{ height:400px;
 }


.mural-item img{
  width:100%;
 height:100%;
  object-fit:cover;
  display:block;
 }

.mural-item:hover{
  transform:scale(1.03);
 box-shadow:0 6px 15px rgba(0,0,0,0.2);
}

#lightbox-modal{
  display:none;
  position:fixed;
 z-index:1000;
  top:0;
  left:0;
  width:100%;
  height:100%;
  justify-content:center;
  align-items:center;
 }
.lightbox-overlay{
  position:absolute;
 width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.85);
  backdrop-filter:blur(5px);
  cursor:pointer;
}

#lightbox-media-container {
  position:relative;
  z-index: 1001;
  max-width: 90vw;
  max-height: 90vh;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90vw; 
  height: 90vh;
  display: flex;

}

#lightbox-media-container img,
#lightbox-media-container video,
#lightbox-media-container iframe {
  max-width: 100%;
  max-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit:contain;
  border: none;
}

.lightbox-close{
  position:absolute;
 z-index:1002;
  top:20px;
  right:30px;
  color:var(--white);
  font-size:3rem;
  font-family:sans-serif;
  font-weight:bold;
  cursor:pointer;
 text-shadow:0 0 10px rgba(0,0,0,0.5);
}

.lightbox-close:hover{
  opacity:0.8;
 }
@media (max-width: 900px){
  .navbar,
  .navbar-ghastcore,
  .navbar-merch,
  .navbar-contato{
    flex-direction:column;
  gap:1rem;
    padding:1rem;
  }
  
  .logo{
    height:80px;
  }

  .nav-links{
    margin-left:0;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:0.5rem;
 }

 .subtitle-ghastcore {
    font-size:2.5rem;;
 }
  
  .nav-links a{
    font-size:0.9rem;
    padding:0.2rem 0.6rem;
    margin-left:0.5rem;
  }

  .section-title, .geral-title{
    font-size:2.5rem;
    padding:1.5rem 1rem;
 }

 .slideshow-container {
        width: 98vw; 
        height: 55vw; 
        margin: 10px auto;
    }
  .footer-content{
    flex-direction:column;
    gap:2.5rem;
 }
  
  .footer-logo{
    height:80px;
  }

  .info-cards {
    padding: 0 20px;          
    gap: 20px;              
  }

  .card-link img.card-img {
    width: 100%;              
    max-width: 320px;        
    margin: 0 auto;          
    border-radius: 20px;
  }
  
  .footer-princesa{
    height:90px;
  }
  
  .hero-title{
    font-size:3.5rem;
    text-align: center;
 }

  .about-container{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
    padding:0 1rem;
  }
  
  .about-container.reverse{
    flex-direction:column-reverse;
    gap:2rem;
 }

  .about-text{
    padding-top:0;
    flex:1;
    min-width:100%;
 }
  .about .section-title{
    position:static; 
    padding:0 0 1rem 0;
    font-size: 3.25rem;
    text-align:center;
 }
  .flowers {
    display: none;
  }
  .subtitle.right,
  .section-text.right{
    text-align:center;
  }

  .about-photo-chloe img,
  .about-photo-desenho img{
    max-width:80%;
    margin-top:1rem;
 }

  .about iframe{
    width:95%;
 }

  .grid-embeds{
    grid-template-columns:1fr;
 gap:2rem;
  }

  .cinza{ 
    padding:3.5rem 0 3rem;
 }
   
.section-text-princesa{
    text-align:center;
  }
  .cinza-inner{ 
    padding:0 1rem; 
    text-align:center;
  }
  
  .cinza .section-title{
    font-size:2.8rem;
    text-align:center;
  }
  
  .cinza .section-text{ 
    max-width:100%;
    text-align:center;
 }

  .cinza .cinza-pompom,
  .cinza .flores{
    display:none !important;
    visibility:hidden;
  }
  
  .about-container-ghastcore{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
    padding:0 1rem;
  }
  
  .about-container-ghastcore.reverse{
    flex-direction:column-reverse;
    align-items:center;
    text-align:center;
    gap:2rem;
  }
  
  .title-ghastcore{
    position:static;
    padding:2rem 1rem 1rem;
    font-size:3rem;
  }
  
  .section-text-ghastcore{
    max-width:100%;
  }

  .about-photo-pompom img{
    max-width:80%;
    margin-top:1rem;
  }
  
  .title-princesa{
    font-size:3rem;
    margin-bottom:1.5rem;
    padding:1rem;
  }
  
  .about-chloe img{
    max-width:80%; 
  }
  
  .exp iframe{
    width:95%;
  }
  .galeria-title{
    font-size:2.2rem;
 }
    
  .mural-container{
    padding:0;
  }
  
  .mural-item,
  .grid-sizer{
    width:48%;
    margin-bottom:1rem;
 }

 .home-video{
    width:90%; 
    margin:0 auto;
  }

  .merch-header{
    flex-direction:column;
    gap:0.5rem;
    padding:1rem;
  }
  
  .merch-header h1{
    font-size:3rem;
  }
  
  .merch-header p{
    font-size:0.9rem;
    margin-top:0;
  }

  .deco-element{
    display:none;
  }

  .merch-grid{
    gap:1.5rem;
  }

  .conheca-chloe{
    flex-direction:column;
    text-align:center;
    padding:2rem 1rem;
 }
    
  .conheca-imagem img{
    max-width:300px;
 }
    
  .conheca-texto h1{
    font-size:2.5rem;
  }
  
  .social-icons-contato{
    justify-content:center;
  }

  .form-section{
    padding:4rem 1rem 4rem 1rem;
  }
  
  .form-section h2{
    font-size:2.2rem;
  }
  
  .form-wrapper{
    padding:1.5rem;
  }
  
  .form-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 500px){
  .mural-item,
  .grid-sizer{
    width:98%;
 }
    
  .hero-title{
    font-size:3.25rem;
  }
  
  
  .grid-embeds{
    gap:1rem;
  }
  
  .embed{
    padding:0.5rem;
  }
}



.home-video{
  width:100%; 
  height:50vh;
  object-fit:cover; 
  display:block;
}

  .info-cards {
    padding: 0 20px;          /* margem lateral */
    gap: 20px;                /* espaço menor entre cards */
  }

  .card-link img.card-img {
    width: 100%;              /* ocupa toda a largura disponível */
    max-width: 320px;         /* tamanho máximo para não ficar exagerado */
    margin: 0 auto;           /* centraliza */
    border-radius: 20px;
  }

.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}
.popup-box{
  background:var(--azuzinho);
  padding:25px 30px;
  border-radius:10px;
  max-width:350px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  animation:popupShow .25s ease-out;
}

.popup-box h3{
  margin-bottom:10px;
  color:var(--purple)
}

.popup-box p{
  color:var(--purple)
}


.popup-box button{
  margin-top:15px;
  padding:8px 16px;
  cursor:pointer;
  border:none;
  background:#8a42ff;
  color:#fff;
  border-radius:6px;
  font-weight:600;
}
@keyframes popupShow{
  from{ transform:scale(0.85); opacity:0; }
  to{ transform:scale(1);   opacity:1; }
}