/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 20 2026 | 15:10:26 */
@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;600;700&display=swap");

.bc-wrapper {
  --dk-blue: #2d1c3d;
  --color-accent: #b478f4;
  --display-font: "Asap", Arial, Helvetica, sans-serif;

  width: min(1100px, 95vw);
  margin-left: auto;
  margin-right: auto;
}

.bc-wrapper,
.bc-wrapper * {
  box-sizing: border-box;
}

.bc-wrapper a {
  color: inherit;
  text-decoration: none;
}

.bc-wrapper img,
.bc-wrapper svg {
  display: block;
  max-width: 100%;
}

/* GRID PRINCIPAL */
.bc-grid {
  display: grid;
  grid-template-areas:
    "about all"
    "store all";
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 2fr 1fr;
  gap: 0.5rem;
  aspect-ratio: 3 / 2;
  max-height: 95vh;
  position: relative;
}

/* CARDS */
.bc-card {
  border: 3px solid #000;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* ÁREAS */
.bc-about {
  grid-area: about;
  background-color: var(--color-accent);
}

.bc-all {
  grid-area: all;
  z-index: 1;
}

.bc-store {
  grid-area: store;
  background-color: var(--dk-blue);
  z-index: 10;
  overflow: visible; /* deixa a loja sobressair */
}

/* HOVER BORDA BRANCA (todos clicáveis) */
.bc-about a:hover .bc-doll,
.bc-store a:hover img,
.bc-link:hover img {
  filter: drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff);
  transition: filter 0.15s ease;
}

/* ======= SOBRE MIM (SVG FUNDO) ======= */
.bc-about a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* ✅ centralizado, maior e sem “cortar” ao girar */
.bc-about-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170%;
  height: 170%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;

  /* mesmo efeito roxo */
  filter: hue-rotate(90deg);
  opacity: 0.95;
}

.bc-about-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  animation: bc-dragUp 1.5s ease-out;
}

.bc-doll {
  position: absolute;
  top: 5%;
  left: 7%;
  width: 90%;
  transform-origin: 40% 0;
  animation: bc-breathe 5s ease-in-out infinite;
}

/* ======= LOJA ======= */
.bc-store a {
  position: absolute;
  width: 105%;
  top: -20%;
  left: 0;
}

.bc-store-img {
  width: 100%;
  transform: rotate(12deg);
  transition: transform 0.2s;
}

.bc-store a:hover .bc-store-img {
  transform: rotate(14deg);
}

/* ======= TOPBAR + CENA ======= */
.bc-topbar {
  height: 10%;
  background-color: var(--color-accent);
  border-bottom: 3px solid #000;
  position: relative;
}

.bc-topbar > span {
  font-family: var(--display-font);
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.bc-bold {
  font-weight: 800;
}

.bc-scene {
  height: 90%;
  position: relative;
  background-image: url("https://babycoatnails.com.br/wp-content/uploads/2026/02/bg.png");
  background-size: auto 120%;
  animation: bc-bg-scroll 240s linear infinite;
}

.bc-link {
  position: absolute;
}

.bc-services {
  z-index: 3;
  width: 39%;
  top: -9%;
  left: 6%;
}

.bc-gallery {
  z-index: 3;
  width: 45%;
  top: 33%;
  left: 5%;
}

.bc-gallery img {
  transition: 0.2s;
  transform: rotate(-6deg);
}
.bc-gallery:hover img {
  transform: none;
}

.bc-notices {
  z-index: 3;
  width: 35%;
  top: 60%;
  left: 8%;
}

.bc-notices img {
  transform-origin: 50% 0;
  animation: bc-wind 3s ease-in-out infinite;
}

.bc-pole {
  z-index: 1;
  position: absolute;
  width: 5%;
  bottom: -10%;
  left: 21%;
}

.bc-ocs {
  z-index: 2;
  width: 60%;
  bottom: -5%;
  right: 3%;
}

.bc-ocs img {
  animation: bc-breathe 5s ease-in-out infinite;
}

/* ======= ANIMAÇÕES ======= */
@keyframes bc-dragUp {
  0% { transform: translateY(90%); }
  100% { transform: none; }
}

@keyframes bc-bg-scroll {
  0% { background-position: 0 100%; }
  100% { background-position: calc(1350px * 1.5) 100%; }
}

@keyframes bc-wind {
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(-10deg); }
}

@keyframes bc-breathe {
  0% { transform: translateY(2%); }
  50% { transform: translateY(0%); }
  100% { transform: translateY(2%); }
}

/* ======= MOBILE ======= */
@media (max-width: 500px) {
  .bc-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    aspect-ratio: unset;
    max-height: none;
  }

  .bc-about { aspect-ratio: 8 / 9; }
  .bc-store { aspect-ratio: 4 / 2; }
  .bc-all { aspect-ratio: 8 / 9; }
}