/* 生成した塗り壁と透過の葉影を、それぞれ独立した素材として使用。 */
:root {
  --bg: #fafaf8;
  --bg-soft: #f2f4ee;
  --paper-texture: url("./white-plaster.jpg");
  --leaf-shadow: url("./leaf-shadow.png");
  --texture-size: 627px 627px;
  --shadow-opacity: 0.32;
}

html {
  background: var(--bg);
}

body,
.site-header,
.site-footer {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)), var(--paper-texture);
  background-size: auto, var(--texture-size);
  background-repeat: repeat;
}

.section-alt {
  background-color: var(--bg-soft);
  background-image: linear-gradient(rgba(235, 240, 228, 0.24), rgba(235, 240, 228, 0.24)), var(--paper-texture);
  background-size: auto, var(--texture-size);
  background-repeat: repeat;
}

/* 影は壁画像に焼き込まず、装飾専用の独立レイヤーで配置。 */
.hero-text,
main > .section:first-child,
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-text::before,
main > .section:first-child::before,
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -42px;
  right: -42px;
  width: min(88%, 627px);
  aspect-ratio: 1;
  background: var(--leaf-shadow) center / contain no-repeat;
  opacity: var(--shadow-opacity);
  filter: blur(7px);
  pointer-events: none;
}

main > .section:first-child::before {
  width: min(48%, 627px);
}

.site-footer::before {
  top: -65px;
  right: 0;
  width: 340px;
  opacity: 0.2;
}

@media (max-width: 780px) {
  .hero-text::before,
  main > .section:first-child::before {
    top: -28px;
    right: -48px;
    width: 340px;
    opacity: 0.24;
    filter: blur(5px);
  }

  .nav-list {
    background-color: var(--bg);
    background-image: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)), var(--paper-texture);
    background-size: auto, var(--texture-size);
  }
}

/* 既存のダークモード指定で本文のテクスチャが隠れないようにする。 */
@media (prefers-color-scheme: dark) {
  main,
  section {
    background-color: transparent !important;
  }

  .section-alt {
    background-color: var(--bg-soft) !important;
  }
}