/* Camada de fundo: cada seção é uma área de Hallownest, mais funda a cada rolagem.
   A arte (SVG inline) e as partículas são montadas e animadas em hallownest.js. */
.pc-world {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.pc-area {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}

body[data-theme='day'] .pc-area[data-theme-area='day'],
body[data-theme='night'] .pc-area[data-theme-area='night'] {
  display: block;
}

.pc-area.is-active {
  opacity: var(--area-opacity, 1);
}

@starting-style {
  .pc-area.is-active {
    opacity: 0;
  }
}

.pc-area-side {
  position: absolute;
  bottom: 0;
  width: min(34vw, 440px);
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
  mask-image: linear-gradient(90deg, #000 62%, transparent);
}

.pc-area-side svg {
  display: block;
  width: auto;
  height: 100%;
}

.pc-area-side--left {
  left: 0;
}

.pc-area-side--right {
  right: 0;
  transform: scaleX(-1) translateY(6%);
}

/* No início, a lateral direita já é ocupada pelo cavaleiro. */
.pc-area[data-depth='1'] .pc-area-side--right {
  display: none;
}

.pc-area-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: var(--particles-mask);
  mask-image: var(--particles-mask);
}

.pc-area {
  --particles-mask: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}

.pc-area[data-area='dirtmouth'] {
  --area-opacity: 0.8;
}

.pc-area[data-area='greenpath'],
.pc-area[data-area='queens-gardens'] {
  --area-opacity: 0.6;
}

.pc-area[data-area='white-palace'] {
  --area-opacity: 0.85;
}

.pc-area[data-area='forgotten-crossroads'] {
  --area-opacity: 0.9;
}

/* A chuva cai na tela toda, mais fraca atrás do conteúdo. */
.pc-area[data-area='city-of-tears'] {
  --area-opacity: 0.95;
  --particles-mask: linear-gradient(
    90deg,
    #000,
    rgb(0 0 0 / 35%) 30%,
    rgb(0 0 0 / 35%) 70%,
    #000
  );
}

.pc-area[data-area='deepnest'] {
  --area-opacity: 0.95;
}

@media (max-width: 720px) {
  .pc-area {
    --area-opacity: 0.35 !important;
  }

  .pc-area-side {
    width: 30vw;
  }
}