/* =========================
   RESET BÁSICO
   ========================= */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  background-color: #000;
  color: #e6cfa3;
  font-family: "Times New Roman", Times, serif;
  position: relative;
  overflow-x: hidden;
}

/* =====================================================
   INDEX (LANDING PAGE — ESCOLHA DE POV)
   ===================================================== */

body.index {
  display: flex;
  justify-content: center;
  align-items: center;

  background: url("../images/bgs/bg-stars.jpg") center / cover no-repeat fixed;
  color: #eaeaea;
}

/* Remove fundos atmosféricos no index */
body.index::before,
body.index::after {
  display: none;
}

/* CONTAINER DO INDEX */
.index .landing {
  text-align: center;
  max-width: 1000px;
  padding: 2rem;
}

/* FRASE DE ABERTURA */
.index .opening-line {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 3.5rem;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* ESCOLHAS */
.index .pov-choices {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}

/* OLHOS */
.index .pov img {
  width: 180px;
  max-width: 40vw;
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.4s ease;
  cursor: pointer;
}

.index .pov img:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* MOBILE — INDEX */
@media (max-width: 768px) {
  body.index {
    align-items: flex-start;
    padding-top: 4rem;
  }

  .index .opening-line {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
  }

  .index .pov-choices {
    flex-direction: column;
    gap: 2rem;
  }

  .index .pov img {
    width: 160px;
  }
}

/* =========================
   FUNDO DE ESTRELAS (GLOBAL – PÁGINAS INTERNAS)
   ========================= */

body::after {
  content: "";
  position: fixed;
  inset: 0;

  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 70%, #fff, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent);

  background-repeat: repeat;
  opacity: 0.15;

  z-index: -3;
  pointer-events: none;
}

/* =========================
   FUNDOS ATMOSFÉRICOS
   ========================= */

/* MAGE */
body.mage::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image: url("../images/bgs/alexander-bg.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.45;
  filter: blur(1.5px) saturate(95%) brightness(95%) hue-rotate(200deg);

  z-index: -2;
  pointer-events: none;
}

body.mage {
  color: #b8c2cc;
}

/* VAMP */
body.vamp {
  background-image: url("../images/bgs/barbara-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: #e6cfa3;
  position: relative;
}
/* OVERLAY ESCURO + BLUR */
body.vamp::after {
  content: "";
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(2px);

  z-index: -1;
  pointer-events: none;
}

/* LYCAN */
body.lycan {
  background-image: url("../images/bgs/lycan-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: #d8d0c2;
  position: relative;
}

/* OVERLAY ESCURO + BLUR */
body.lycan::after {
  content: "";
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  z-index: -1;
  pointer-events: none;
}

/* =========================
   CONTEÚDO (PÁGINAS INTERNAS)
   ========================= */

.content {
  position: relative;
  z-index: 2;

  max-width: 700px;
  margin: 6rem auto;
  padding: 0 1.5rem;
}

.text p {
  line-height: 1.6;
  margin-bottom: 1.2em;
}

/* =========================
   ASSINATURAS
   ========================= */

.signature {
  margin-top: 3rem;
  text-align: right;
  font-family: "Ink Free", "Segoe UI", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
}

body.mage .signature { color: #7a8896; }
body.vamp .signature { color: #e6cfa3; }


/* =========================
   DESKTOP
   ========================= */

@media (min-width: 769px) {
  body {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* =========================
   MOBILE — PÁGINAS INTERNAS
   ========================= */

@media (max-width: 768px) {

  body {
    overflow-y: auto;
  }

  body.vamp::before,
  body.vamp::after,

    position: absolute;
    inset: 0;
    min-height: 100vh;
  }

  body.vamp::before {
    filter: blur(3px) saturate(110%) brightness(95%);
  }

    .content {
    margin: 4rem auto;
    padding: 0 1.25rem;
  }

  .text p {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}

/* =========================
   AJUSTE DE TEXTO — LYCAN
   ========================= */

body.lycan .text p {
  font-size: 1.05rem;
  line-height: 1.55;
}

@media (max-width: 768px) {
  body.lycan .text p {
    font-size: 1.2rem;
    line-height: 1.45;
  }
}
/* =========================
   FADE-INS (INALTERADOS)
   ========================= */

/* ... todo o teu fade-in permanece igual ... */