/* =========================================================
   コネクト カテゴリー変更依頼 — 夕凪（ゆうなぎ）
   琉球ライトの配色・書体を引き継ぎ、情景を「夕暮れの水平線」に変えたもの
   ========================================================= */

:root {
  --color-canvas:   #fdf4ea;
  --color-paper:    #ffffff;
  --color-cream:    #fbf7ee;
  --color-abyss:    #0a1929;
  --color-ink:      #1f3252;
  --color-mist:     #64748b;
  --color-hair:     rgba(15, 30, 59, 0.08);
  --color-hair-strong: rgba(15, 30, 59, 0.14);

  --color-aqua:     #00a89c;
  --color-aqua-lo:  #d6f4f1;
  --color-coral:    #e13757;
  --color-coral-lo: #ffe4e8;
  --color-gold:     #d19d2f;
  --color-gold-lo:  #fbf1d8;
  --color-sunset:   #ee6b3e;

  --shadow-glow-aqua:  0 4px 24px rgba(0,168,156,0.18), 0 1px 3px rgba(0,168,156,0.10);
  --shadow-panel:      0 14px 44px -14px rgba(120,60,30,0.22), 0 2px 8px -4px rgba(15,30,59,0.08);
  --panel-inner-top:   inset 0 1px 0 rgba(255,255,255,0.9);

  --font-display: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-body:    'Noto Sans JP', system-ui, -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --ease-elastic: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100vh; }
body {
  margin: 0;
  color: var(--color-abyss);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  background: var(--color-canvas);
  overflow-x: hidden;
  position: relative;
}
::selection { background: rgba(0,168,156,0.20); color: var(--color-abyss); }
a { color: var(--color-aqua); text-decoration: none; }

/* ---------- 情景 ---------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.scene__sky {
  position: absolute; inset: 0 0 34% 0;
  background: linear-gradient(180deg, #fdf6ee 0%, #ffe9d6 38%, #ffd2bd 70%, #ffbfae 100%);
}
.scene__cloud {
  position: absolute; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.85) 70%, transparent);
  animation: cloud-drift 90s linear infinite;
}
.scene__cloud--a { top: 30%; left: -10%; width: 46%; }
.scene__cloud--b { top: 41%; left: 30%; width: 60%; height: 7px; animation-duration: 130s; animation-direction: reverse; opacity: 0.8; }
.scene__cloud--c { top: 52%; left: 5%; width: 38%; height: 6px; animation-duration: 110s; opacity: 0.7; }
@keyframes cloud-drift { from { transform: translateX(-8vw); } to { transform: translateX(28vw); } }

.scene__sun {
  position: absolute; left: 68%; bottom: 34%;
  width: clamp(120px, 20vw, 220px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, 42%);
  background: radial-gradient(circle, #fff6df 0%, #ffd98a 38%, #ff9f6b 72%, rgba(255,159,107,0) 73%);
}
.scene__sun::before {
  content: ""; position: absolute; inset: -70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,190,130,0.55) 0%, rgba(255,190,130,0) 62%);
  animation: sun-breathe 9s ease-in-out infinite;
}
@keyframes sun-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }

.scene__sea {
  position: absolute; inset: 66% 0 0 0;
  background: linear-gradient(180deg, #f6b9a4 0%, #9fd8d0 22%, #6cc7be 60%, #46b3ab 100%);
}
/* 夕日の照り返し：水平線から手前へ伸びる光の道 */
.scene__glitter {
  position: absolute; top: 0; bottom: 0; left: 68%; width: clamp(150px, 26vw, 300px);
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,236,196,0.95) 0 3px, rgba(255,236,196,0) 3px 11px);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%);
  animation: glitter 5s linear infinite;
}
@keyframes glitter { from { background-position-y: 0; } to { background-position-y: 22px; } }

.scene__swell {
  position: absolute; left: 0; width: 200%; height: 40px;
  background-repeat: repeat-x; background-size: 50% 100%;
  animation: swell 26s linear infinite;
}
.scene__swell--a { top: 20%; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 4 300 20 T600 20 T900 20 T1200 20 V40 H0Z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E"); }
.scene__swell--b { top: 48%; opacity: 0.6; animation-duration: 38s; animation-direction: reverse; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q100 8 200 22 T400 22 T600 22 T800 22 T1000 22 T1200 22 V40 H0Z' fill='%23ffffff' fill-opacity='.28'/%3E%3C/svg%3E"); }
.scene__swell--c { top: 74%; height: 56px; opacity: 0.7; animation-duration: 20s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q200 0 400 18 T800 18 T1200 18 V40 H0Z' fill='%23ffffff' fill-opacity='.32'/%3E%3C/svg%3E"); }
@keyframes swell { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 帆かけサバニ（沖縄の伝統的な小舟）が水平線をゆっくり渡る */
.scene__boat {
  position: absolute; bottom: 34%; left: 0; width: clamp(54px, 7vw, 86px);
  color: #7a4a4a; opacity: 0.75; margin-bottom: -6px;
  animation: boat-cross 140s linear infinite;
}
.scene__boat svg { display: block; width: 100%; height: auto; animation: boat-bob 5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes boat-cross { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
@keyframes boat-bob { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-2px); } }

.scene__bird {
  position: absolute; width: 26px; color: #8a5a5a; opacity: 0.6;
  animation: bird-glide 70s linear infinite;
}
.scene__bird svg { display: block; width: 100%; height: auto; animation: bird-flap 1.6s ease-in-out infinite; transform-origin: 50% 60%; }
.scene__bird--a { top: 20%; }
.scene__bird--b { top: 24%; width: 18px; animation-delay: -4s; margin-left: -46px; }
.scene__bird--c { top: 15%; width: 20px; animation-duration: 96s; animation-delay: -40s; }
@keyframes bird-glide { from { transform: translate(-10vw, 0); } 50% { transform: translate(52vw, -4vh); } to { transform: translate(112vw, 2vh); } }
@keyframes bird-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }

/* デイゴの花びらが風に舞う */
.scene__petal {
  position: absolute; top: -24px; width: 12px; height: 16px;
  border-radius: 80% 0 80% 0; background: var(--color-coral); opacity: 0.5;
  animation: petal-fall 22s linear infinite;
}
.scene__petal:nth-child(1) { left: 8%;  animation-delay: -3s; }
.scene__petal:nth-child(2) { left: 24%; animation-delay: -12s; animation-duration: 28s; width: 9px; height: 12px; }
.scene__petal:nth-child(3) { left: 46%; animation-delay: -18s; animation-duration: 25s; background: var(--color-sunset); }
.scene__petal:nth-child(4) { left: 83%; animation-delay: -8s; animation-duration: 31s; width: 9px; height: 12px; }
.scene__petal:nth-child(5) { left: 93%; animation-delay: -15s; background: var(--color-sunset); }
@keyframes petal-fall {
  from { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-7vw, 55vh) rotate(200deg); }
  to   { transform: translate(4vw, 112vh) rotate(420deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before { animation: none !important; }
  .scene__petal { display: none; }
}