/* ============================================
   台湾沿海 · 夏日晴天 · 青春风格
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');

/* --- CSS 变量 --- */
:root {
  --sky-top: #4facfe;
  --sky-bottom: #00f2fe;
  --sunset-top: #ff6b6b;
  --sunset-mid: #ee5a6f;
  --sunset-bottom: #f093fb;
  --ocean-deep: #1a6b8a;
  --ocean-mid: #2e9cca;
  --ocean-light: #5cc8e8;
  --sand: #f5e6ca;
  --text-dark: #3a2a1a;
  --text-light: #fff8f0;
}

/* --- 全局重置 --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Noto Sans TC', 'Microsoft YaHei', sans-serif;
}

/* --- 场景容器 --- */
.scene {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s ease, visibility 0s 2s;
  overflow: hidden;
}

.scene.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s ease, visibility 0s 0s;
}

/* ============================================
   场景一：夏日沿海晴天（写实风格）
   ============================================ */

#scene-summer {
  background: linear-gradient(180deg,
    #1a5c9e 0%,     /* 高空深蓝 */
    #2b7fc1 15%,    /* 中高天蓝 */
    #4a9cd8 30%,    /* 中天蓝 */
    #6db8e8 50%,    /* 白天蓝 */
    #8cccf0 65%,    /* 近地平线浅蓝 */
    #b0ddf5 80%,    /* 地平线淡蓝 */
    #c8e8f8 90%,    /* 地平线白蓝 */
    #d6eefb 100%    /* 极淡蓝白 */
  );
}

/* ===== 写实天空 ===== */
.real-sky {
  position: absolute;
  inset: 0 0 52% 0;
  overflow: hidden;
}

/* --- 太阳 --- */
.sun-glow-area {
  position: absolute;
  top: 10%;
  right: 18%;
  width: 100px;
  height: 100px;
  z-index: 1;
}

.sun-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: radial-gradient(circle, #ffffff 0%, #fffde8 25%, #ffe8a0 55%, rgba(255,210,80,0) 100%);
  border-radius: 50%;
  z-index: 3;
}

.sun-corona {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.corona-1 {
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(255,240,200,0.7) 0%, rgba(255,210,100,0.3) 40%, rgba(255,180,50,0) 70%);
  z-index: 2;
}

.corona-2 {
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255,220,140,0.35) 0%, rgba(255,190,80,0.15) 50%, rgba(255,150,30,0) 75%);
  z-index: 1;
  animation: corona-breathe 4s ease-in-out infinite;
}

.corona-3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,200,120,0.15) 0%, rgba(255,170,60,0.06) 55%, rgba(255,140,20,0) 80%);
  z-index: 0;
  animation: corona-breathe 4s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes corona-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.85; }
}

/* --- 太阳光线 --- */
.sun-rays {
  position: absolute;
  top: 10%; right: 18%;
  width: 400px;
  height: 400px;
  transform: translate(30px, 30px);
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(255,255,240,0.03) 3deg, transparent 6deg,
      transparent 15deg, rgba(255,255,240,0.04) 18deg, transparent 21deg,
      transparent 30deg, rgba(255,255,240,0.025) 32deg, transparent 34deg,
      transparent 50deg, rgba(255,255,240,0.035) 53deg, transparent 56deg,
      transparent 70deg, rgba(255,255,240,0.03) 72deg, transparent 74deg,
      transparent 85deg, rgba(255,255,240,0.04) 88deg, transparent 91deg,
      transparent 100deg, rgba(255,255,240,0.025) 102deg, transparent 104deg,
      transparent 120deg, rgba(255,255,240,0.035) 123deg, transparent 126deg,
      transparent 140deg, rgba(255,255,240,0.03) 142deg, transparent 144deg,
      transparent 160deg, rgba(255,255,240,0.04) 163deg, transparent 166deg,
      transparent 180deg, rgba(255,255,240,0.025) 182deg, transparent 184deg,
      transparent 200deg, rgba(255,255,240,0.035) 203deg, transparent 206deg,
      transparent 220deg, rgba(255,255,240,0.03) 222deg, transparent 224deg,
      transparent 240deg, rgba(255,255,240,0.04) 243deg, transparent 246deg,
      transparent 260deg, rgba(255,255,240,0.025) 262deg, transparent 264deg,
      transparent 280deg, rgba(255,255,240,0.03) 283deg, transparent 286deg,
      transparent 300deg, rgba(255,255,240,0.035) 302deg, transparent 304deg,
      transparent 320deg, rgba(255,255,240,0.04) 323deg, transparent 326deg,
      transparent 340deg, rgba(255,255,240,0.025) 342deg, transparent 344deg,
      transparent 360deg
    );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: rays-rotate 120s linear infinite;
}

@keyframes rays-rotate {
  from { transform: translate(30px, 30px) rotate(0deg); }
  to { transform: translate(30px, 30px) rotate(360deg); }
}

/* ===== 积云（写实立体云） ===== */
.cumulus {
  position: absolute;
  z-index: 2;
}

.cumulus-1 {
  top: 14%; left: 8%;
  width: 180px; height: 80px;
  animation: cumulus-drift 35s linear infinite;
}

.cumulus-2 {
  top: 22%; left: 52%;
  width: 140px; height: 65px;
  animation: cumulus-drift 28s linear infinite;
  animation-delay: -12s;
}

.cumulus-3 {
  top: 8%; left: 72%;
  width: 120px; height: 55px;
  animation: cumulus-drift 32s linear infinite;
  animation-delay: -20s;
}

.cu-bump {
  position: absolute;
  border-radius: 50%;
}

/* 云朵亮面 */
.cumulus .cu-bump {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,248,252,0.9) 50%, rgba(220,230,240,0.8) 100%);
  box-shadow: inset 0 -8px 20px rgba(180,200,220,0.3);
}

/* 云底阴影 */
.cumulus::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 25px;
  background: linear-gradient(180deg, rgba(180,195,215,0.5) 0%, rgba(160,175,200,0.3) 50%, transparent 100%);
  border-radius: 50%;
  z-index: -1;
}

/* cumulus-1 bumps */
.cumulus-1 .cu-b1 { width: 60px; height: 55px; top: -25px; left: 10px; }
.cumulus-1 .cu-b2 { width: 75px; height: 60px; top: -20px; left: 35px; }
.cumulus-1 .cu-b3 { width: 80px; height: 65px; top: -10px; left: 60px; }
.cumulus-1 .cu-b4 { width: 65px; height: 50px; top: -30px; left: 80px; }
.cumulus-1 .cu-b5 { width: 70px; height: 55px; top: -5px; left: 100px; }
.cumulus-1 .cu-b6 { width: 50px; height: 40px; top: -15px; left: 130px; }

/* cumulus-2 bumps */
.cumulus-2 .cu-b1 { width: 55px; height: 50px; top: -22px; left: 5px; }
.cumulus-2 .cu-b2 { width: 70px; height: 55px; top: -18px; left: 30px; }
.cumulus-2 .cu-b3 { width: 60px; height: 45px; top: -25px; left: 60px; }
.cumulus-2 .cu-b4 { width: 65px; height: 50px; top: -8px; left: 85px; }

/* cumulus-3 bumps */
.cumulus-3 .cu-b1 { width: 45px; height: 42px; top: -18px; left: 5px; }
.cumulus-3 .cu-b2 { width: 60px; height: 48px; top: -15px; left: 25px; }
.cumulus-3 .cu-b3 { width: 55px; height: 42px; top: -22px; left: 50px; }
.cumulus-3 .cu-b4 { width: 50px; height: 38px; top: -8px; left: 70px; }
.cumulus-3 .cu-b5 { width: 40px; height: 35px; top: -12px; left: 90px; }

@keyframes cumulus-drift {
  0% { transform: translateX(-250px); }
  100% { transform: translateX(calc(100vw + 250px)); }
}

/* ===== 高积云（高层薄云） ===== */
.altocumulus {
  position: absolute;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(8px);
  z-index: 1;
}

.alto-1 {
  top: 5%; left: 35%;
  width: 200px; height: 30px;
  animation: alto-drift 50s linear infinite;
}
.alto-1::before {
  content: ''; position: absolute;
  width: 140px; height: 25px;
  background: rgba(255,255,255,0.35);
  border-radius: 50%; top: -10px; left: 30px;
}

.alto-2 {
  top: 8%; left: 60%;
  width: 160px; height: 22px;
  animation: alto-drift 45s linear infinite;
  animation-delay: -20s;
}

@keyframes alto-drift {
  0% { transform: translateX(-250px); }
  100% { transform: translateX(calc(100vw + 250px)); }
}

/* ===== 海鸥（SVG写实） ===== */
.seagull-group {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.sg {
  position: absolute;
  width: 50px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.sg-1 { top: 25%; left: 25%; animation: sg-fly-1 9s ease-in-out infinite; }
.sg-2 { top: 30%; left: 40%; animation: sg-fly-2 11s ease-in-out infinite; animation-delay: -3s; width: 42px; }
.sg-3 { top: 22%; left: 60%; animation: sg-fly-3 8s ease-in-out infinite; animation-delay: -6s; width: 46px; }
.sg-4 { top: 28%; left: 50%; animation: sg-fly-1 10s ease-in-out infinite; animation-delay: -4s; width: 38px; }

@keyframes sg-fly-1 {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25% { transform: translate(80px, -25px) rotate(3deg); }
  50% { transform: translate(150px, -8px) rotate(-3deg); }
  75% { transform: translate(80px, -20px) rotate(2deg); }
}

@keyframes sg-fly-2 {
  0%, 100% { transform: translate(0, 0) rotate(1deg) scaleX(-1); }
  30% { transform: translate(-60px, -18px) rotate(-2deg) scaleX(-1); }
  60% { transform: translate(-130px, -5px) rotate(3deg) scaleX(-1); }
  80% { transform: translate(-70px, -15px) rotate(-1deg) scaleX(-1); }
}

@keyframes sg-fly-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(50px, -28px) rotate(4deg); }
  66% { transform: translate(110px, -12px) rotate(-3deg); }
}

/* ===== 远海地平线 ===== */
.horizon {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 6%;
  z-index: 2;
}

.distant-island {
  position: absolute;
  bottom: 0;
  left: 62%;
  width: 12%;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(90,140,160,0.35) 0%,
    rgba(80,135,150,0.45) 40%,
    rgba(70,125,140,0.5) 70%,
    rgba(65,110,130,0.4) 100%
  );
  clip-path: polygon(0% 100%, 10% 50%, 25% 35%, 40% 55%, 55% 20%, 70% 40%, 85% 25%, 100% 60%, 100% 100%);
  filter: blur(1px);
}

.distant-island-small {
  position: absolute;
  bottom: 0;
  left: 78%;
  width: 6%;
  height: 70%;
  background: linear-gradient(180deg,
    rgba(85,135,150,0.3) 0%,
    rgba(75,125,140,0.4) 60%,
    rgba(65,110,125,0.35) 100%
  );
  clip-path: polygon(0% 100%, 20% 55%, 50% 40%, 80% 65%, 100% 50%, 100% 100%);
  filter: blur(1.5px);
}

/* ===== 写实海洋 ===== */
.real-ocean {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 32%;
  overflow: hidden;
  z-index: 3;
}

/* 深海底色 */
.ocean-deep-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12,85,120,0.9) 0%,
    rgba(15,100,140,0.85) 30%,
    rgba(24,125,165,0.8) 60%,
    rgba(35,150,190,0.75) 100%
  );
}

/* 波浪 SVG */
.real-ocean svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
}

.ow-1 { animation: ocean-swell 7s ease-in-out infinite; z-index: 4; }
.ow-2 { animation: ocean-swell 5.5s ease-in-out infinite; z-index: 3; animation-delay: -1.5s; }
.ow-3 { animation: ocean-swell 6.5s ease-in-out infinite; z-index: 2; animation-delay: -3s; }
.ow-4 { animation: ocean-swell 4.8s ease-in-out infinite; z-index: 1; animation-delay: -4.5s; }

@keyframes ocean-swell {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-3%) translateY(-3px); }
  50% { transform: translateX(-7%) translateY(0); }
  75% { transform: translateX(-4%) translateY(2px); }
}

/* --- 海面日光反射 --- */
.sun-reflection {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 90%;
  background: linear-gradient(180deg,
    rgba(255,240,200,0.5) 0%,
    rgba(255,230,160,0.7) 10%,
    rgba(255,255,200,0.5) 20%,
    rgba(255,240,180,0.3) 35%,
    rgba(255,255,220,0.6) 45%,
    rgba(255,235,170,0.4) 55%,
    rgba(255,255,210,0.5) 65%,
    rgba(255,240,180,0.25) 80%,
    rgba(255,250,220,0.15) 100%
  );
  border-radius: 50%;
  z-index: 5;
  animation: reflection-shimmer 2.5s ease-in-out infinite;
  filter: blur(2px);
}

.sun-reflection-sub {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 80%;
  background: linear-gradient(180deg,
    rgba(255,240,200,0.2) 0%,
    rgba(255,230,170,0.25) 25%,
    rgba(255,245,200,0.18) 50%,
    rgba(255,235,180,0.2) 75%,
    transparent 100%
  );
  border-radius: 50%;
  z-index: 4;
  animation: reflection-shimmer 2.5s ease-in-out infinite;
  animation-delay: -0.8s;
  filter: blur(4px);
}

@keyframes reflection-shimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* --- 白浪花 --- */
.whitecap {
  position: absolute;
  background: rgba(255,255,255,0.6);
  border-radius: 3px;
  z-index: 6;
  animation: whitecap-fade 4s ease-in-out infinite;
}

.wc-1 { top: 15%; left: 25%; width: 40px; height: 3px; animation-delay: 0s; }
.wc-2 { top: 35%; left: 60%; width: 30px; height: 2px; animation-delay: -1.5s; }
.wc-3 { top: 55%; left: 40%; width: 35px; height: 2.5px; animation-delay: -3s; }

@keyframes whitecap-fade {
  0%, 100% { opacity: 0; transform: scaleX(0.5); }
  30% { opacity: 0.7; transform: scaleX(1); }
  60% { opacity: 0.2; transform: scaleX(0.8); }
}

/* ===== 岸边岩石 ===== */
.rocky-outcrop {
  position: absolute;
  bottom: 18%;
  right: 3%;
  z-index: 7;
}

.rock {
  position: absolute;
  border-radius: 40% 50% 30% 45%;
}

.rock-main {
  width: 70px; height: 55px;
  bottom: 0; right: 0;
  background: linear-gradient(135deg, #7a7060 0%, #5c5448 40%, #4a4238 70%, #6b6255 100%);
  box-shadow: inset 2px -3px 8px rgba(0,0,0,0.3), inset -3px 2px 6px rgba(255,255,255,0.08);
}

.rock-small {
  width: 40px; height: 30px;
  bottom: 25px; right: 55px;
  background: linear-gradient(135deg, #8a8070 0%, #685e52 40%, #5a5045 70%, #72685a 100%);
  box-shadow: inset 1px -2px 5px rgba(0,0,0,0.3);
}

.rock-tiny {
  width: 22px; height: 16px;
  bottom: 8px; right: 65px;
  background: linear-gradient(135deg, #908878 0%, #706860 50%, #605850 100%);
  box-shadow: inset 1px -1px 3px rgba(0,0,0,0.25);
}

/* ===== 写实沙滩 ===== */
.real-beach {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 4;
}

/* 湿沙区（近海） */
.wet-sand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(180deg,
    #c8b898 0%,
    #d4c4a4 30%,
    #ddd0b2 60%,
    #e5d8bc 100%
  );
}

/* 泡沫边 */
.foam-edge {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.3) 10%,
    rgba(255,255,255,0.7) 25%, rgba(255,255,255,0.5) 40%,
    rgba(255,255,255,0.75) 55%, rgba(255,255,255,0.4) 70%,
    rgba(255,255,255,0.6) 80%, rgba(255,255,255,0.2) 90%,
    transparent 100%
  );
  animation: foam-surge 5s ease-in-out infinite;
  filter: blur(1px);
}

.receding-foam {
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.15) 15%,
    rgba(255,255,255,0.3) 35%, rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.25) 65%, rgba(255,255,255,0.1) 85%,
    transparent 100%
  );
  animation: foam-surge 5s ease-in-out infinite;
  animation-delay: -1.5s;
  filter: blur(2px);
}

@keyframes foam-surge {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.8; }
  50% { transform: translateY(4px) scaleY(1.5); opacity: 1; }
}

/* 干沙区 */
.dry-sand {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(180deg,
    #e5d8bc 0%,
    #ecdcc0 25%,
    #efe0c5 50%,
    #f0e2c8 75%,
    #eeddc2 100%
  );
}

/* 沙粒纹理 */
.sand-grain {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(180,160,130,0.12) 0.5px, transparent 0.5px),
    radial-gradient(circle at 25% 8%, rgba(170,150,120,0.1) 0.8px, transparent 0.8px),
    radial-gradient(circle at 40% 25%, rgba(190,170,140,0.08) 0.6px, transparent 0.6px),
    radial-gradient(circle at 55% 12%, rgba(175,155,125,0.11) 0.7px, transparent 0.7px),
    radial-gradient(circle at 70% 30%, rgba(185,165,135,0.09) 0.5px, transparent 0.5px),
    radial-gradient(circle at 85% 18%, rgba(170,150,120,0.1) 0.6px, transparent 0.6px),
    radial-gradient(circle at 15% 50%, rgba(180,160,130,0.07) 0.4px, transparent 0.4px),
    radial-gradient(circle at 35% 45%, rgba(175,155,125,0.1) 0.6px, transparent 0.6px),
    radial-gradient(circle at 60% 55%, rgba(190,170,140,0.08) 0.5px, transparent 0.5px),
    radial-gradient(circle at 78% 42%, rgba(170,150,120,0.09) 0.7px, transparent 0.7px),
    radial-gradient(circle at 50% 70%, rgba(180,160,130,0.1) 0.5px, transparent 0.5px),
    radial-gradient(circle at 22% 75%, rgba(175,155,125,0.08) 0.4px, transparent 0.4px),
    radial-gradient(circle at 68% 78%, rgba(185,165,135,0.09) 0.6px, transparent 0.6px),
    radial-gradient(circle at 88% 68%, rgba(170,150,120,0.07) 0.5px, transparent 0.5px);
  pointer-events: none;
}

/* 沙纹 */
.sand-ripple {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(160,140,115,0.12) 20%,
    rgba(160,140,115,0.18) 50%,
    rgba(160,140,115,0.12) 80%, transparent
  );
  border-radius: 30%;
}

.sr-1 { top: 20%; left: 10%; width: 35%; }
.sr-2 { top: 45%; left: 35%; width: 40%; }
.sr-3 { top: 70%; left: 5%; width: 30%; }

/* ===== 沙滩细节 ===== */
.beach-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 6;
  pointer-events: none;
}

.pebble {
  position: absolute;
  border-radius: 45% 55% 50% 50%;
}

.pebble-1 {
  bottom: 25%; left: 18%;
  width: 14px; height: 10px;
  background: linear-gradient(135deg, #b8a898 0%, #8a7a6a 60%, #9a8a7a 100%);
  box-shadow: inset 1px -1px 2px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.05);
}

.pebble-2 {
  bottom: 15%; left: 75%;
  width: 10px; height: 7px;
  background: linear-gradient(135deg, #c0b0a0 0%, #908070 50%, #a09080 100%);
  box-shadow: inset 0.5px -0.5px 1.5px rgba(0,0,0,0.2);
}

.pebble-3 {
  bottom: 40%; left: 45%;
  width: 8px; height: 6px;
  background: linear-gradient(135deg, #d0c0b0 0%, #a89888 50%, #b0a090 100%);
  box-shadow: inset 0.5px -0.5px 1px rgba(0,0,0,0.15);
}

.seashell-real {
  position: absolute;
}

.sh-1 {
  bottom: 20%; left: 30%;
  width: 10px; height: 12px;
  background: radial-gradient(ellipse at 40% 35%, #fff8f0 0%, #f0e0d0 40%, #e0c8b0 80%, #d0b898 100%);
  border-radius: 40% 50% 30% 45%;
  transform: rotate(15deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sh-2 {
  bottom: 32%; left: 82%;
  width: 8px; height: 10px;
  background: radial-gradient(ellipse at 40% 35%, #faf5ee 0%, #efe0d5 40%, #e5d0c0 80%, #d8c0a8 100%);
  border-radius: 45% 35% 40% 50%;
  transform: rotate(-20deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.driftwood {
  position: absolute;
  bottom: 10%; left: 55%;
  width: 35px; height: 4px;
  background: linear-gradient(90deg, #8a7a65, #6b5c4a, #7a6b58, #5c4e3c);
  border-radius: 2px;
  transform: rotate(-8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ===== 海边植被 ===== */
.coastal-plants {
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 100%;
  z-index: 8;
  pointer-events: none;
}

.beach-grass {
  position: absolute;
  bottom: 0;
}

.bg-left {
  left: 5%;
  width: 80px; height: 60px;
}

.bg-right {
  right: 10%;
  width: 60px; height: 45px;
}

.grass-blade {
  position: absolute;
  bottom: 0;
  width: 3px;
  border-radius: 60% 40% 0 0;
  transform-origin: bottom center;
  background: linear-gradient(180deg, #5a8a3c 0%, #4a7030 50%, #3a6025 100%);
}

.bg-left .grass-blade:nth-child(1) { height: 50px; left: 8px; transform: rotate(-15deg); }
.bg-left .grass-blade:nth-child(2) { height: 58px; left: 18px; transform: rotate(-5deg); }
.bg-left .grass-blade:nth-child(3) { height: 44px; left: 30px; transform: rotate(5deg); }
.bg-left .grass-blade:nth-child(4) { height: 52px; left: 42px; transform: rotate(12deg); }
.bg-left .grass-blade:nth-child(5) { height: 38px; left: 55px; transform: rotate(20deg); }

.bg-right .grass-blade:nth-child(1) { height: 40px; left: 5px; transform: rotate(-10deg); }
.bg-right .grass-blade:nth-child(2) { height: 46px; left: 15px; transform: rotate(0deg); }
.bg-right .grass-blade:nth-child(3) { height: 36px; left: 28px; transform: rotate(8deg); }
.bg-right .grass-blade:nth-child(4) { height: 42px; left: 38px; transform: rotate(18deg); }

/* ===== 问题卡片（海滩自然风格） ===== */
.question-card {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  animation: card-bob 3s ease-in-out infinite;
}

@keyframes card-bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-6px); }
}

.card-inner {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,252,245,0.82) 30%,
    rgba(250,245,235,0.8) 70%,
    rgba(245,238,225,0.78) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 22px;
  padding: 36px 48px;
  text-align: center;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.12),
    0 3px 10px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1.5px solid rgba(255,255,255,0.5);
  position: relative;
  max-width: 440px;
}

.question-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2a8aaa;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.question-text {
  font-size: 2rem;
  font-weight: 700;
  color: #3a2a1a;
  margin-bottom: 26px;
  letter-spacing: 3px;
  line-height: 1.4;
}

.input-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.answer-input {
  flex: 1;
  min-width: 180px;
  padding: 14px 20px;
  font-size: 1.2rem;
  border: 2px solid #c8dde0;
  border-radius: 50px;
  background: rgba(255,255,255,0.65);
  color: #2a4a5a;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
  text-align: center;
  letter-spacing: 2px;
}

.answer-input:focus {
  border-color: #5ab0c8;
  box-shadow: 0 0 20px rgba(90,176,200,0.25);
  background: rgba(255,255,255,0.9);
}

.submit-btn {
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #f0a060 0%, #e88050 100%);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 2px;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(232,128,80,0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232,128,80,0.4);
}

.submit-btn:active {
  transform: translateY(0);
}

.hint-text {
  margin-top: 12px;
  font-size: 0.95rem;
  color: #c06040;
  min-height: 22px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

/* --- 输入错误抖动 --- */
.shake {
  animation: input-shake 0.5s ease-in-out;
}

@keyframes input-shake {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  20% { transform: translate(-50%, -50%) translateX(-10px); }
  40% { transform: translate(-50%, -50%) translateX(10px); }
  60% { transform: translate(-50%, -50%) translateX(-6px); }
  80% { transform: translate(-50%, -50%) translateX(6px); }
}

/* ============================================
   场景二：黄昏单车骑行（照片背景）
   ============================================ */

#scene-sunset {
  background: #1a0a2e; /* 照片加载前的备选底色 */
}

/* --- 照片背景 --- */
.photo-bg {
  position: absolute;
  inset: 0;
  background: url('../images/sunset-bg.jpg') center center / cover no-repeat;
  z-index: 0;
  /* 照片加载动画 */
  animation: photo-reveal 2.5s ease-out forwards;
}

@keyframes photo-reveal {
  0% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- 照片上方渐变遮罩 (保护文字可读性) --- */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,5,20,0.25) 0%,
    rgba(20,10,40,0.1) 30%,
    transparent 55%,
    rgba(10,5,20,0.15) 75%,
    rgba(5,2,10,0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* --- 旧日落天空/云/太阳已移除，由照片背景替代 --- */

/* --- 星星 --- */
.stars-container {
  position: absolute;
  inset: 0 0 55% 0;
  z-index: 2;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  animation: star-twinkle 3s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* --- 沿海公路 (叠加在照片之上) --- */
.coastal-road {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  perspective: 600px;
  z-index: 5;
}

.road-surface {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 100%;
  background:
    linear-gradient(180deg,
      rgba(60,55,50,0.5) 0%,
      rgba(50,46,42,0.55) 30%,
      rgba(45,40,38,0.6) 60%,
      rgba(40,36,34,0.65) 100%
    );
  clip-path: polygon(20% 0%, 80% 0%, 95% 100%, 5% 100%);
  transform-origin: bottom center;
  backdrop-filter: blur(0.5px);
}

/* 道路中线 */
.road-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 200%;
  background: repeating-linear-gradient(
    0deg,
    #ffcc33 0px,
    #ffcc33 30px,
    transparent 30px,
    transparent 60px
  );
  animation: road-scroll 1.5s linear infinite;
}

.road-line:last-child {
  left: 50%;
  animation-delay: -0.75s;
}

@keyframes road-scroll {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(60px); }
}

.road-edge {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 100%;
  background: rgba(255,255,255,0.3);
}

.road-edge-left  { left: 10%; clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%); }
.road-edge-right { right: 10%; clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 100%); }

/* --- 护栏 --- */
.guardrail {
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 84%;
  height: 100%;
  z-index: 6;
}

.guardrail-post {
  position: absolute;
  bottom: 15%;
  width: 8px;
  height: 40px;
  background: linear-gradient(180deg, #c0c0c0, #888);
  border-radius: 2px;
  animation: post-move 2s linear infinite;
  transform: translateY(100px);
  opacity: 0.7;
}

@keyframes post-move {
  0% { transform: translateY(120px); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-100px); opacity: 0; }
}

/* --- 路边树 --- */
.roadside-trees {
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 4;
  overflow: hidden;
}

.tree {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 80px;
}

.tree-1 { left: 5%; animation: tree-move 5s linear infinite; }
.tree-2 { left: 50%; animation: tree-move 5s linear infinite; animation-delay: -1.5s; }
.tree-3 { left: 85%; animation: tree-move 5s linear infinite; animation-delay: -3s; }

@keyframes tree-move {
  0% { transform: translateY(120px) scale(0.5); opacity: 0; }
  15% { opacity: 0.6; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-150px) scale(1.5); opacity: 0; }
}

.tree::before {
  content: '';
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(40,80,40,0.7) 0%, rgba(30,60,30,0.5) 60%, transparent 70%);
  border-radius: 50% 50% 30% 30%;
}

.tree::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 30px;
  background: linear-gradient(180deg, rgba(80,50,30,0.7), rgba(60,40,20,0.5));
}

/* --- 单车容器 --- */
.bicycle-container {
  position: absolute;
  bottom: 18%;
  left: 45%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bike-bob 1s ease-in-out infinite alternate;
}

@keyframes bike-bob {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-4px); }
}

.bicycle {
  width: 140px;
  height: 100px;
  position: relative;
}

.bike-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.bike-shadow {
  position: absolute;
  bottom: -15px;
  left: 10%;
  width: 80%;
  height: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  animation: shadow-pulse 1s ease-in-out infinite alternate;
}

@keyframes shadow-pulse {
  0% { transform: scaleX(0.9); opacity: 0.25; }
  100% { transform: scaleX(1.1); opacity: 0.35; }
}

/* ===== 线条小狗装饰 ===== */
.line-dogs {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.line-dog {
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

/* 左下角坐着的小狗 */
.ld-1 {
  bottom: 15%;
  left: 5%;
  width: 100px;
  height: 120px;
  animation: ld-appear 1s ease-out 2.5s forwards,
             ld-sit 4s ease-in-out 3.5s infinite;
}

/* 右上角举爱心的小狗 */
.ld-2 {
  top: 8%;
  right: 8%;
  width: 90px;
  height: 110px;
  animation: ld-appear 1s ease-out 3s forwards,
             ld-float 4s ease-in-out 4s infinite;
}

/* 右下角趴着的小狗 */
.ld-3 {
  bottom: 12%;
  right: 6%;
  width: 100px;
  height: 85px;
  animation: ld-appear 1s ease-out 3.5s forwards,
             ld-wiggle 5s ease-in-out 4.5s infinite;
}

/* 中间上方飘浮的小狗 */
.ld-4 {
  top: 22%;
  left: 15%;
  width: 70px;
  height: 75px;
  animation: ld-appear 1s ease-out 4s forwards,
             ld-float-high 5s ease-in-out 5s infinite;
}

/* 小狗出现动画 */
@keyframes ld-appear {
  0% { opacity: 0; transform: translateY(20px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 坐着的小狗轻微晃动 */
@keyframes ld-sit {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(1deg); }
  75% { transform: translateY(-3px) rotate(-1deg); }
}

/* 举爱心小狗浮动 */
@keyframes ld-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-8px) rotate(2deg); }
  60% { transform: translateY(-4px) rotate(-2deg); }
  85% { transform: translateY(-10px) rotate(1deg); }
}

/* 趴着小狗微动 */
@keyframes ld-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(0.5deg); }
}

/* 高处飘浮小狗 */
@keyframes ld-float-high {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-12px) translateX(6px) rotate(2deg); }
  50% { transform: translateY(-6px) translateX(12px) rotate(-1deg); }
  75% { transform: translateY(-15px) translateX(6px) rotate(3deg); }
}

/* --- 我爱你文字 --- */
.love-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.love-text {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 20px;
  text-shadow:
    0 0 20px rgba(255,100,100,0.8),
    0 0 40px rgba(255,150,100,0.6),
    0 0 80px rgba(255,200,150,0.4),
    0 0 120px rgba(255,150,100,0.3),
    0 4px 8px rgba(0,0,0,0.3);
  color: #fff5f0;
  user-select: none;
  margin-bottom: 20px;
}

.love-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.love-text .char.visible {
  opacity: 1;
  transform: translateY(0);
}

.love-text .char.char-1 { color: #ffe0e0; }
.love-text .char.char-2 { color: #ffcccc; }
.love-text .char.char-3 { color: #ffb8b8; }

/* --- 我爱你呼吸动画 --- */
.love-text.breathing {
  animation: love-breathe 3s ease-in-out infinite;
}

@keyframes love-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* --- 爱心粒子 --- */
.hearts-area {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.heart-particle {
  position: absolute;
  font-size: 1.5rem;
  animation: heart-float 4s ease-out forwards;
  pointer-events: none;
}

@keyframes heart-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(-30px) scale(1.2) rotate(10deg);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-150px) scale(1) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-300px) scale(0.5) rotate(20deg);
  }
}

/* --- 音乐信息 --- */
.music-info {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 30;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 0.9rem;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease 2s;
  border: 1px solid rgba(255,255,255,0.2);
}

.music-info.visible {
  opacity: 1;
  transform: translateY(0);
}

.music-icon {
  animation: music-pulse 1.5s ease-in-out infinite;
  font-size: 1.2rem;
}

@keyframes music-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ============================================
   响应式设计
   ============================================ */

@media (max-width: 768px) {
  .question-text { font-size: 1.5rem; }
  .card-inner { padding: 28px 24px; margin: 0 16px; }
  .question-title { font-size: 1.1rem; }

  .sun-core { width: 36px; height: 36px; }
  .corona-1 { width: 56px; height: 56px; }
  .corona-2 { width: 100px; height: 100px; }
  .corona-3 { width: 160px; height: 160px; }
  .sun-glow-area { top: 8%; right: 12%; width: 70px; height: 70px; }
  .ld-1 { width: 75px; height: 90px; }
  .ld-2 { width: 65px; height: 80px; }
  .ld-3 { width: 75px; height: 65px; }
  .ld-4 { width: 50px; height: 55px; }

  .cumulus-1 { width: 120px; height: 55px; }
  .cumulus-2 { width: 100px; height: 45px; }
  .cumulus-3 { width: 80px; height: 40px; }
  .rock-main { width: 50px; height: 40px; }
  .rock-small { width: 28px; height: 22px; }

  .love-text { font-size: 3rem; letter-spacing: 12px; }

  .bicycle { width: 100px; }
  .bicycle-container { bottom: 22%; }

  .music-info { bottom: 15px; right: 15px; font-size: 0.75rem; padding: 8px 16px; }
}

@media (max-width: 480px) {
  .question-text { font-size: 1.2rem; letter-spacing: 1px; }
  .card-inner { padding: 20px 16px; }
  .question-title { font-size: 1rem; }
  .answer-input { font-size: 1rem; padding: 12px 16px; }
  .submit-btn { font-size: 0.95rem; padding: 12px 22px; }

  .input-group { flex-direction: column; width: 100%; }
  .answer-input { width: 100%; }
  .submit-btn { width: 100%; }

  .sun-core { width: 28px; height: 28px; }
  .corona-1 { width: 44px; height: 44px; }
  .corona-2 { width: 76px; height: 76px; }
  .corona-3 { width: 120px; height: 120px; }
  .sun-glow-area { top: 6%; right: 8%; width: 50px; height: 50px; }
  /* 照片背景已在 .photo-bg 中处理 */

  .cumulus-1 { width: 90px; height: 40px; }
  .cumulus-2 { width: 70px; height: 35px; }
  .cumulus-3 { width: 60px; height: 30px; }
  .rock-main { width: 36px; height: 30px; }

  .ld-1 { width: 55px; height: 65px; bottom: 18%; }
  .ld-2 { width: 48px; height: 58px; top: 5%; right: 5%; }
  .ld-3 { width: 55px; height: 48px; }
  .ld-4 { width: 38px; height: 42px; top: 18%; left: 10%; }

  .love-text { font-size: 2.2rem; letter-spacing: 8px; }
  .bicycle { width: 80px; }
}