:root {
  --cream: #f4eee2;
  --ink: #3a2e22;
  --brown: #4a3a2c;
  --muted: #55463a;
  --gold: #9a7c50;
  --accent: #b4552d;
  --hair: #d8c6a6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: var(--ink);
  line-height: 2;
  background: var(--cream);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }

::selection { background: var(--brown); color: var(--cream); }

/* ===== 背景（カフェの写真 + 被せ） ===== */
.bg {
  position: fixed;
  inset: -3%;
  z-index: -2;
  background: url("bg.jpg") center / cover no-repeat;
  filter: blur(3px) brightness(1.04) saturate(1.02);
  transform: scale(1.02);
  animation: kenburns 40s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.1) translateY(-1.5%); }
}

.bg-tint {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(246, 240, 228, .78), rgba(246, 240, 228, .84)),
    radial-gradient(120% 90% at 50% 10%, rgba(255, 253, 247, .5), transparent 60%);
}

/* 読了プログレスバー */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--brown));
  z-index: 60;
}

/* ===== 開幕ゲート ===== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(240, 232, 218, .6);
  backdrop-filter: blur(6px);
  transition: opacity .9s ease, visibility .9s ease;
}
.overlay.hidden { opacity: 0; visibility: hidden; }

.overlay-card {
  text-align: center;
  max-width: 540px;
  width: 100%;
  padding: clamp(40px, 7vw, 60px) clamp(26px, 6vw, 60px);
  border: 1px solid rgba(74, 58, 44, .45);
  outline: 1px solid rgba(74, 58, 44, .35);
  outline-offset: 7px;
  background: rgba(252, 248, 240, .72);
}

.overlay-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: .76rem;
  letter-spacing: .42em;
  color: var(--gold);
  margin-bottom: 22px;
}

.overlay-title {
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: .14em;
  margin-bottom: 18px;
}

.overlay-copy {
  font-size: .92rem;
  line-height: 2.3;
  color: var(--muted);
  margin-bottom: 34px;
}

.enter-btn {
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: .5em;
  text-indent: .5em;
  padding: 15px 54px;
  color: var(--cream);
  background: var(--brown);
  border: 1.5px solid var(--brown);
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(74, 58, 44, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .3s ease, color .3s ease;
}
.enter-btn:hover {
  background: var(--cream);
  color: var(--brown);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(74, 58, 44, .22);
}
.enter-btn:active { transform: none; box-shadow: 3px 3px 0 rgba(74, 58, 44, .22); }

/* ===== ヒーロー ===== */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  position: relative;
}

.hero-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: .82rem;
  letter-spacing: .48em;
  color: var(--gold);
  margin-bottom: 28px;
}

.hero-title {
  font-weight: 600;
  font-size: clamp(2.2rem, 7.5vw, 4.2rem);
  letter-spacing: .12em;
  line-height: 1.6;
}

.hero-sub {
  margin-top: 30px;
  font-size: .98rem;
  letter-spacing: .1em;
  color: var(--muted);
}

.hero-scroll {
  position: absolute;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: "Cormorant Garamond", serif;
  font-size: .72rem;
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--gold);
}
.hero-scroll .line {
  width: 1px;
  height: 46px;
  background: var(--gold);
  animation: drip 1.9s infinite ease-in-out;
}
@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ===== 本文セクション ===== */
.essay-sec {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(70px, 10vh, 110px) 28px;
}

.essay-sec h2 {
  font-size: clamp(1.32rem, 3vw, 1.85rem);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .06em;
  margin-bottom: 42px;
}

.essay-sec h2 .no {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: .95rem;
  letter-spacing: .42em;
  color: var(--accent);
  margin-bottom: 14px;
}

.essay-sec p {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 2.35;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 1.8em;
  text-align: justify;
  text-justify: inter-ideograph;
}
.essay-sec p:last-child { margin-bottom: 0; }

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
}
.divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hair), transparent); }
.divider i { font-style: normal; font-size: .68rem; color: var(--gold); }

/* ===== フッター ===== */
.footer {
  text-align: center;
  padding: 90px 24px 110px;
}
.footer-fine {
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 2.2;
  color: #8d7d67;
}

/* ===== 音楽トグル ===== */
.music-btn {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--brown);
  background: rgba(250, 245, 235, .88);
  backdrop-filter: blur(4px);
  color: var(--brown);
  font-size: 20px;
  line-height: 1;
  z-index: 50;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.music-btn::before {
  content: "";
  position: absolute;
  left: 11px; right: 11px;
  top: calc(50% - 1px);
  height: 2px;
  background: currentColor;
  transform: rotate(-42deg);
  opacity: 1;
  transition: opacity .2s ease;
}
.music-btn.on { background: var(--brown); color: var(--cream); animation: pulse 2.4s infinite; }
.music-btn.on::before { opacity: 0; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 58, 44, .35); }
  100% { box-shadow: 0 0 0 15px rgba(74, 58, 44, 0); }
}

/* ===== 出現アニメーション ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .essay-sec p { text-align: left; }
  .music-btn { right: 16px; bottom: 16px; }
}