:root {
  --accent: #2d5a4a;
  --accent-bright: #4fae86;
  --text: #eceef0;
  --bg: #0a0e17;
  --reveal-duration: 0.9s;
  --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 28px;
}

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

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 800px 500px at 15% 0%, rgba(66, 140, 110, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(255, 183, 94, 0.16), transparent 60%),
    radial-gradient(ellipse 900px 600px at 50% 100%, rgba(66, 140, 110, 0.14), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal;
  background-attachment: fixed;
  line-height: 1.8;
}

/* 漂う光の玉（蛍エフェクト） */
.fireflies {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fireflies span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 158, 0.95), rgba(255, 183, 94, 0.5) 45%, transparent 70%);
  box-shadow: 0 0 10px 3px rgba(255, 200, 120, 0.55);
  opacity: 0;
  animation: firefly-drift 16s ease-in-out infinite, firefly-glow 6s ease-in-out infinite;
}

.fireflies span:nth-child(1) { left: 8%;  top: 70%; animation-delay: 0s, 0.3s; animation-duration: 15s, 5.5s; }
.fireflies span:nth-child(2) { left: 20%; top: 30%; animation-delay: 2s, 1.5s; animation-duration: 18s, 6.5s; }
.fireflies span:nth-child(3) { left: 35%; top: 80%; animation-delay: 4s, 0.8s; animation-duration: 14s, 5s; }
.fireflies span:nth-child(4) { left: 50%; top: 15%; animation-delay: 1s, 2.2s; animation-duration: 20s, 7s; }
.fireflies span:nth-child(5) { left: 65%; top: 60%; animation-delay: 3s, 1s; animation-duration: 16s, 6s; }
.fireflies span:nth-child(6) { left: 78%; top: 25%; animation-delay: 5s, 2.8s; animation-duration: 19s, 5.8s; }
.fireflies span:nth-child(7) { left: 88%; top: 75%; animation-delay: 0.5s, 0.4s; animation-duration: 13s, 6.2s; }
.fireflies span:nth-child(8) { left: 45%; top: 45%; animation-delay: 6s, 1.8s; animation-duration: 21s, 7.5s; }

@keyframes firefly-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(24px, -34px); }
  50%  { transform: translate(-18px, -64px); }
  75%  { transform: translate(20px, -30px); }
  100% { transform: translate(0, 0); }
}

@keyframes firefly-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.page {
  position: relative;
  z-index: 1;
}

h2 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255, 140, 40, 0.85),
    0 0 20px rgba(255, 140, 40, 0.5);
}

/* お祭りについて・メニュー・会場の様子・街の様子 共通トンマナ（文字色は白） */
.about,
.menu,
.interior,
.street {
  color: #ffffff;
}

section {
  padding: 4rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* ヒーロー */
.hero {
  height: 80vh;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 8px;
}

.hero-title {
  font-size: 3rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  text-shadow:
    0 0 6px rgba(255, 224, 130, 0.85),
    0 0 16px rgba(255, 183, 94, 0.55),
    0 0 34px rgba(79, 174, 134, 0.35);
  animation: neon-flicker 3.4s ease-in-out infinite;
}

@keyframes neon-flicker {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(255, 224, 130, 0.85),
      0 0 16px rgba(255, 183, 94, 0.55),
      0 0 34px rgba(79, 174, 134, 0.35);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 224, 130, 1),
      0 0 22px rgba(255, 183, 94, 0.75),
      0 0 42px rgba(79, 174, 134, 0.5);
  }
}

.hero-catch {
  font-size: 1.2rem;
}

/* お店について */
.about {
  text-align: center;
}

.about p {
  max-width: 640px;
  margin: 0 auto;
}

.event-info {
  max-width: 500px;
  margin: 2rem auto 0;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}

.event-info p {
  margin: 0;
}

/* メニュー */
.menu-cards {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  width: 280px;
  text-align: center;
  padding-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.menu-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.menu-card:hover img {
  transform: scale(1.08);
}

.menu-card h3 {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.menu-card .price {
  color: #ffffff;
  font-weight: bold;
  margin-top: 0.3rem;
}

.menu-card.recommended {
  border: 1px solid rgba(45, 90, 74, 0.4);
  animation: card-glow 2.6s ease-in-out infinite;
}

@keyframes card-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(45, 90, 74, 0.25), 0 8px 32px rgba(45, 90, 74, 0.12);
  }
  50% {
    box-shadow: 0 0 26px rgba(45, 90, 74, 0.55), 0 8px 32px rgba(45, 90, 74, 0.12);
  }
}

/* 店内の様子 */
.interior {
  text-align: center;
}

.interior-image-frame {
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
}

.interior-image {
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}

.interior-image-frame:hover .interior-image {
  transform: scale(1.08);
}

/* 街の様子 */
.street {
  text-align: center;
}

.street-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, 200px);
  gap: 1.2rem;
}

.street-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.street-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.street-item:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.street-item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.street-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.street-item:hover img {
  transform: scale(1.08);
}

/* フッター */
.footer {
  background-color: var(--accent);
  color: #ffffff;
  text-align: center;
  padding: 2rem 1rem;
}

.footer p:first-child {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* スクロール連動フェード（全セクション共通） */
.reveal {
  animation: reveal-in var(--reveal-duration) var(--reveal-easing) both;
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
  }

  .hero {
    background-attachment: scroll;
  }

  .hero-title {
    animation: none;
  }

  .fireflies span {
    animation: none;
    opacity: 0.5;
  }
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .hero-title {
    font-size: 2rem;
  }

  section {
    padding: 3rem 1rem;
  }

  .menu-cards {
    flex-direction: column;
    align-items: center;
  }

  .menu-card {
    width: 100%;
    max-width: 320px;
  }

  .street-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .street-item,
  .street-item:nth-child(1),
  .street-item:nth-child(2),
  .street-item:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    height: 220px;
  }

  .event-info {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}