/* ============================================================
   FLORA — canvas 花海第一屏（1:1 study after gladeye.com FlowerValley）
   花全部在一张 <canvas> 里画（z 深度粒子场 + 相机持续前推 dolly）。
   暗角 / 颗粒 / 居中衬线标题 / 药丸导航为 CSS 覆盖层。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

:root { --glow: #0f160c; }
body[data-season='winter'] { --glow: #0c1013; }

body {
  font-family: 'Fraunces', Georgia, serif;
  background: #000; color: #fff;
  overflow: hidden;                 /* 只做第一屏 */
  -webkit-font-smoothing: antialiased;
}

.scene { position: fixed; inset: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #000; }

/* 黑底 + 中心极暗绿辉光（花海深处透一点光） */
.bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 92% at 50% 48%, var(--glow) 0%, #050604 46%, #000 100%);
  transition: background 900ms ease;
}

/* 花海 canvas */
#field { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }

/* 暗角：只压外圈 + 中心轻压给文字（花海边缘融进黑） */
.vignette {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 15%, transparent 30%),
    radial-gradient(135% 130% at 50% 50%, transparent 66%, rgba(0,0,0,0.55) 88%, #000 100%);
}

/* 胶片颗粒 */
.grain {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncG type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncB type='linear' slope='1.4' intercept='-0.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 168px 168px;
}

/* 一点点全局色散：画面左右边缘极淡的红/青错色（模拟镜头边缘色散） */
.scene::after {
  content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  mix-blend-mode: screen;
  box-shadow: inset 6px 0 44px -28px rgba(255,45,95,0.55), inset -6px 0 44px -28px rgba(40,175,255,0.55);
}

/* ============================================================ 前景 UI ============================================================ */
.topbar {
  position: fixed; z-index: 20; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(18px, 3vw, 40px);
}
.brand { font-weight: 400; font-size: 22px; letter-spacing: 0.01em; color: #fff; text-decoration: none; }
.menu-pill {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: 9px 26px; border: 0; border-radius: 999px;
  background: rgba(20,20,18,0.72); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background 0.25s;
}
.menu-pill:hover { background: rgba(40,40,36,0.85); }
.mark { display: inline-flex; color: #fff; }

.hero {
  position: fixed; z-index: 10; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; padding: 0 24px;
}
.hero h1 {
  margin: 0; text-align: center;
  font-weight: 300; font-size: clamp(2.2rem, 5.6vw, 5rem);
  line-height: 1.06; letter-spacing: -0.015em; color: #fdfcf9;
  text-shadow: 0 6px 44px rgba(0,0,0,0.65);
}
.hero h1 em { font-style: italic; font-weight: 400; }

.explore {
  position: fixed; z-index: 20; left: 50%; bottom: clamp(26px, 6vh, 54px); transform: translateX(-50%);
  display: inline-block; padding: 15px 34px; border: 0; border-radius: 999px; background: #fbf7ee; color: #14140f;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s, background 0.25s;
}
.explore:hover { transform: translateX(-50%) translateY(-2px); background: #fff; }

.season {
  position: fixed; z-index: 20; left: clamp(18px, 3vw, 40px); bottom: clamp(26px, 6vh, 54px);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.25s;
}
.season:hover { background: rgba(255,255,255,0.14); }
.season .dot { width: 8px; height: 8px; border-radius: 50%; background: #8fd6a0; box-shadow: 0 0 10px 2px rgba(143,214,160,0.75); transition: background 0.4s, box-shadow 0.4s; }

.hint {
  position: fixed; z-index: 20; right: clamp(18px, 3vw, 40px); bottom: clamp(28px, 6vh, 56px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  animation: pulse 2.6s ease-in-out infinite; transition: opacity 0.6s;
}
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.8; } }

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .hint { display: none; }
  /* 按钮不换行、缩小、抬到季节药丸上方一行，避免与 SUMMER 重叠 */
  .explore { padding: 13px 26px; font-size: 14px; bottom: 92px; }
  .season { bottom: 34px; padding: 9px 14px; }
}