/* ==========================================
   Background System - Photography + Overlay
   ========================================== */

:root {
  --grain-opacity:   .05;
  --contour-opacity: .12;
  --dots-opacity:    .06;
}

body {
  background: var(--cream);
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url('../images/backgrounds/texture-grain.svg');
  background-repeat: repeat;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: calc(var(--grain-opacity) * 0.6); }
}

.bg-hero {
  position: relative;
  background-image: url('../images/backgrounds/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-about {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                    url('../images/backgrounds/about-bg.jpg');
  background-size: cover;
  background-position: center;
  background-color:rgba(255,255,255,0.5);
}

.bg-worries {
  background-image: url('../images/backgrounds/worries-bg.jpg');
  background-size: cover;
  background-position: center;
}

.bg-product {
  background-image: url('../images/backgrounds/product-bg.jpg');
  background-size: cover;
  background-position: center;
}

.bg-cases {
  background-image: url('../images/backgrounds/cases-bg.jpg');
  background-size: cover;
  background-position: center;
}

.bg-ambient {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
  url('../images/backgrounds/ambient-bg.jpg');
  background-size: cover;
  background-position: center;
}

.bg-cta {
  background-image: url('../images/backgrounds/cta-bg.jpg');
  background-size: cover;
  background-position: center;
}

.bg-footer {
  background-image: url('../images/backgrounds/footer-bg.jpg');
  background-size: cover;
  background-position: center;
}

.bg-hero::before,
.bg-about::before,
.bg-worries::before,
.bg-product::before,
.bg-cases::before,
.bg-ambient::before,
.bg-cta::before,
.bg-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 248, 245, 0.55) 0%,
    rgba(255, 248, 245, 0.75) 100%);
  pointer-events: none;
  z-index: 0;
}

.bg-hero > *,
.bg-about > *,
.bg-worries > *,
.bg-product > *,
.bg-cases > *,
.bg-ambient > *,
.bg-cta > *,
.bg-footer > * {
  position: relative;
  z-index: 1;
}

.bg-hero,
.bg-about,
.bg-worries,
.bg-product,
.bg-cases,
.bg-ambient,
.bg-cta,
.bg-footer {
  position: relative;
}

.bg-hairline-rules::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/backgrounds/hairline-rules.svg');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.bg-contour::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/backgrounds/contour-lines.svg');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

.bg-footer {
  color: var(--ink);
}

/* R4-1: パララックス（デスクトップのみ／写真背景に奥行き） */
.bg-hero,
.bg-product,
.bg-cases {
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .bg-hero,
  .bg-about,
  .bg-worries,
  .bg-product,
  .bg-cases,
  .bg-ambient,
  .bg-cta,
  .bg-footer {
    background-attachment: scroll;
  }
}

/* R4-4: モーション減らす設定時はパララックスOFF */
@media (prefers-reduced-motion: reduce) {
  .bg-hero,
  .bg-product,
  .bg-cases {
    background-attachment: scroll;
  }
}

.particles-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.particles-hero canvas {
  display: block;
  filter: blur(0.8px);
}

.bg-hero > .particles-hero {
  z-index: 10;
}

.bg-hero > :not(.particles-hero) {
  position: relative;
  z-index: 2;
}

/* R4-3: Product粒子（薄め・3〜5粒） */
.particles-product {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.particles-product canvas {
  display: block;
  filter: blur(0.6px);
}

.bg-product > .particles-product {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .particles-product { display: none; }
}

/* ==========================================
   文字可読性保証
   ========================================== */

.bg-footer h1,
.bg-footer h2,
.bg-footer h3,
.bg-footer h4 {
  color: var(--ink);
}

.bg-footer p,
.bg-footer li,
.bg-footer address,
.bg-footer small {
  color: var(--text-gray);
}

.bg-footer a {
  color: var(--ink);
  opacity: 0.85;
}

.bg-footer a:hover {
  color: var(--coral-deep);
  opacity: 1;
}

.bg-cta h2,
.bg-cta h3 {
  color: var(--primary-pink);
  text-shadow: 0 1px 2px rgba(255, 248, 245, 0.6);
}

.bg-cta p {
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(255, 248, 245, 0.6);
}

.bg-cta .section__title-sub {
  color: var(--gold);
  text-shadow: none;
}

.bg-hero, .bg-about, .bg-worries, .bg-product,
.bg-cases, .bg-ambient {
  color: var(--ink);
}

.bg-hero::before,
.bg-about::before,
.bg-worries::before,
.bg-product::before,
.bg-cases::before,
.bg-ambient::before,
.bg-cta::before {
  background: linear-gradient(180deg,
    rgba(255, 248, 245, 0.55) 0%,
    rgba(255, 248, 245, 0.82) 100%);
}

.bg-footer::before {
  background: linear-gradient(180deg,
    rgba(255, 248, 245, 0.3) 0%,
    rgba(255, 248, 245, 0.4) 100%);
}