/* =====================================================================
   living.css — 与論島BBQ リッチ化レイヤー（2026-07-05）
   ヨロンブルー×砂×珊瑚の「生きている背景」＋マーキー＋巨大タイポ帯。
   既存のreveal/疑似視差はそのまま活かす。CSSアニメのみ・WebGL不使用。
   ===================================================================== */

/* ---------- 1. リビング背景（海色ブロブ＋ゆらぐ光） ---------- */
.living-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  pointer-events: none; background: transparent;
}
.living-bg .blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42;
  will-change: transform;
}
.living-bg .blob.b1 {
  width: 48vw; height: 48vw; left: -14vw; top: 4vh;
  background: radial-gradient(circle, rgba(24,176,196,.34), rgba(24,176,196,0) 66%);
  animation: yb-d1 28s ease-in-out infinite alternate;
}
.living-bg .blob.b2 {
  width: 42vw; height: 42vw; right: -12vw; top: 34vh;
  background: radial-gradient(circle, rgba(95,211,216,.30), rgba(95,211,216,0) 64%);
  animation: yb-d2 34s ease-in-out infinite alternate;
}
.living-bg .blob.b3 {
  width: 34vw; height: 34vw; left: 30vw; bottom: -12vh;
  background: radial-gradient(circle, rgba(255,122,77,.20), rgba(255,122,77,0) 62%);
  animation: yb-d3 31s ease-in-out infinite alternate;
}
@keyframes yb-d1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes yb-d2 { from { transform: translate(0,0) scale(1.04); } to { transform: translate(-7vw, -7vh) scale(.95); } }
@keyframes yb-d3 { from { transform: translate(0,0) scale(.97); } to { transform: translate(5vw, -6vh) scale(1.08); } }

/* 水面のきらめき（小さな光点がゆっくり明滅） */
.living-bg .glint {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(95,211,216,.4) 70%, transparent);
  animation: yb-glint ease-in-out infinite;
}
@keyframes yb-glint {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: .85; transform: scale(1.25); }
}

/* ---------- 2. キーワード・マーキー ---------- */
.yoron-marquee {
  overflow: hidden; white-space: nowrap; user-select: none;
  padding: 16px 0; background: rgba(251,248,241,.6); backdrop-filter: blur(2px);
  border-top: 1px solid rgba(10,142,160,.12); border-bottom: 1px solid rgba(10,142,160,.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.yoron-marquee .track { display: inline-block; animation: ym-scroll 38s linear infinite; }
.yoron-marquee span {
  font-family: 'Cormorant Garamond', 'Zen Old Mincho', serif; font-style: italic;
  font-size: 1.08rem; letter-spacing: .16em; margin: 0 28px; color: rgba(6,83,106,.42);
}
.yoron-marquee span.hot { color: rgba(255,122,77,.62); }
@keyframes ym-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 3. 巨大タイポ帯（フッター前のシネマティック締め） ---------- */
.yoron-giant-band {
  position: relative; overflow: hidden; text-align: center;
  padding: 76px 16px 60px;
  background: linear-gradient(180deg, rgba(7,34,46,0), #07222e 30%, #052029 100%);
}
.yoron-giant-band .giant {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 8rem); line-height: 1.02; letter-spacing: .03em;
  background: linear-gradient(180deg, #aef1f4 0%, #18b0c4 55%, #06536a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yoron-giant-band .sub {
  margin-top: 14px; color: rgba(244,236,221,.72);
  font-family: 'Zen Old Mincho', serif; letter-spacing: .22em; font-size: .92rem;
}
.yoron-giant-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #18b0c4, #5fd3d8, #ff7a4d, transparent);
  background-size: 200% 100%;
  animation: yg-line 7s ease-in-out infinite;
}
@keyframes yg-line { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ---------- 4. リビールの方向・stagger強化（既存.revealに追い足し） ---------- */
.reveal { transition-duration: .7s !important; transition-timing-function: cubic-bezier(.22,.9,.3,1) !important; }

/* ---------- 5. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .living-bg .blob, .living-bg .glint, .yoron-marquee .track, .yoron-giant-band::before { animation: none !important; }
}