/* ============================================================
   Sound Portal — Design Tokens v2 (Warm)
   Brand: 声浪橙红 + 琥珀金 + 暖深灰
   解决：1) 黑白跳变刺眼  2) 区块宽度贴边
   ============================================================ */

:root {
  /* ---- Brand Primary (声浪橙红) ---- */
  --snd-primary:        #FF4D1F;
  --snd-primary-foreground: #FFFFFF;
  --snd-primary-hover:  #E63E12;
  --snd-primary-active: #CC360F;
  --snd-primary-light:  #FF7A4D;
  --snd-primary-tint:   rgba(255, 77, 31, 0.08);
  --snd-primary-tint-2: rgba(255, 77, 31, 0.16);
  --snd-primary-glow:   rgba(255, 77, 31, 0.35);

  /* ---- Accent Gold (琥珀金 - 点缀用) ---- */
  --snd-gold:           #FFB547;
  --snd-gold-foreground: #2C2117;
  --snd-gold-tint:      rgba(255, 181, 71, 0.12);

  /* ---- Page ambient body color (暖米色填充层) ---- */
  --snd-page-bg:        #F8F4EE;

  /* ---- Background & Surface (统一暖米系) ---- */
  --snd-background:     #FAF7F2;
  --snd-foreground:     #1A1613;

  --snd-card:           #FFFFFF;
  --snd-card-foreground:#1A1613;

  --snd-popover:        #FFFFFF;
  --snd-popover-foreground:#1A1613;

  --snd-muted:          #EFE9DF;
  --snd-muted-foreground:#6B6258;

  /* ---- Dark surfaces (暖深灰, 避免纯黑冷硬) ---- */
  --snd-dark-bg:        #181412;
  --snd-dark-bg-2:      #25211E;
  --snd-dark-bg-3:      #2E2925;
  --snd-dark-card:      #302B27;
  --snd-dark-border:    rgba(255, 255, 255, 0.07);
  --snd-dark-text:      rgba(255, 255, 255, 0.92);
  --snd-dark-text-2:    rgba(255, 255, 255, 0.62);
  --snd-dark-text-3:    rgba(255, 255, 255, 0.38);

  /* ---- Border & Input (暖灰) ---- */
  --snd-border:         #E3DDD1;
  --snd-input:          #E3DDD1;
  --snd-ring:           #FF4D1F;

  /* ---- Neutral text hierarchy (暖基调) ---- */
  --snd-ink:            #1A1613;
  --snd-ink-2:          #554E47;
  --snd-ink-3:          #9A8F83;
  --snd-line:           #E3DDD1;

  /* ---- State colors ---- */
  --snd-success:        #16A374;
  --snd-warning:        #D97706;
  --snd-error:          #DC2626;
  --snd-info:           #2563EB;

  /* ---- Radius scale ---- */
  --snd-radius-sm: 4px;
  --snd-radius-md: 8px;
  --snd-radius-lg: 16px;
  --snd-radius-xl: 20px;

  /* ---- Typography ---- */
  --snd-font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --snd-font-display: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* ---- Section width constraint (与导航栏 max-w-7xl 对齐) ---- */
  --snd-section-max: 1280px;
  --snd-section-gap: 16px; /* 左右各留 16px 呼吸空间 */
}

/* ===== Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--snd-font-sans);
  background-color: var(--snd-page-bg);  /* 关键：统一暖米色填充层 */
  color: var(--snd-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ======================================================
   核心修复：所有 section / footer 宽度统一，不贴边
   与导航栏 max-w-7xl 完全对齐
   ====================================================== */
main > section,
footer {
  max-width: var(--snd-section-max);
  margin-left: auto;
  margin-right: auto;
}

/* body 不设左右 padding —— section 用 max-width 居中即可 */
/* 但在小屏幕上给 body 一点左右 padding，避免 section 贴边 */
@media (max-width: 639px) {
  main > section,
  footer {
    max-width: 100%;
    margin-left: var(--snd-section-gap);
    margin-right: var(--snd-section-gap);
    border-radius: 0;
  }
}

/* ===== Hero Dark Section (暖黑渐变) ===== */
.hero-section {
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(255, 77, 31, 0.28), transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255, 181, 71, 0.14), transparent 55%),
    linear-gradient(180deg, #181412 0%, #25211E 70%, #2E2925 100%);
  color: var(--snd-dark-text);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
/* 在桌面大屏给 hero 加顶部圆角更精致 */
@media (min-width: 768px) {
  /* hero-section 作为第一个 section，保持方形与 body 底色无缝衔接 */
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Gradient text ===== */
.gradient-text {
  background: linear-gradient(135deg, #FF4D1F 0%, #FF7A4D 40%, #FFB547 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #FFB547 0%, #FFD68A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Glass card ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Waveform animation ===== */
@keyframes wavePulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.wave-bar {
  animation: wavePulse 1.2s ease-in-out infinite;
  transform-origin: center;
}

.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
.wave-bar:nth-child(6) { animation-delay: 0.5s; }
.wave-bar:nth-child(7) { animation-delay: 0.4s; }
.wave-bar:nth-child(8) { animation-delay: 0.3s; }
.wave-bar:nth-child(9) { animation-delay: 0.2s; }
.wave-bar:nth-child(10) { animation-delay: 0.1s; }

/* ===== Card hover lift ===== */
.card-lift {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(255, 77, 31, 0.2);
  border-color: rgba(255, 77, 31, 0.3);
}

/* ===== Line clamp ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Button glow ===== */
.btn-glow {
  box-shadow: 0 4px 20px -4px rgba(255, 77, 31, 0.5);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-glow:hover {
  box-shadow: 0 8px 32px -4px rgba(255, 77, 31, 0.6);
  transform: translateY(-1px);
}

/* ===== Marquee ===== */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 40s linear infinite;
}

/* ===== Float animation ===== */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-anim {
  animation: floatY 4s ease-in-out infinite;
}

/* ===== Scroll reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.reveal-delay-1 { transition-delay: 0.08s; }
.reveal.reveal-delay-2 { transition-delay: 0.16s; }
.reveal.reveal-delay-3 { transition-delay: 0.24s; }
.reveal.reveal-delay-4 { transition-delay: 0.32s; }

/* ===== Tabs ===== */
[data-tab-group] [data-tab-panel] {
  display: block;
}
[data-tab-group] [data-tab-panel]:not(.tab-active) {
  display: none;
}

/* ===== Section divider ===== */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--snd-border), transparent);
}

/* ===== Range input styling ===== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF4D1F;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 77, 31, 0.4);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF4D1F;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 77, 31, 0.4);
}

/* ===== Scrollbar (desktop) ===== */
@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #D4CCC0;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #B8AEA0;
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .wave-bar { animation: none; }
  .marquee-track { animation: none; }
  .float-anim { animation: none; }
  html { scroll-behavior: auto; }
  .card-lift:hover { transform: none; box-shadow: none; }
  .btn-glow:hover { transform: none; box-shadow: 0 4px 20px -4px rgba(255, 77, 31, 0.5); }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE ENHANCEMENTS
   ============================================================ */

/* --- Small phones (< 380px) --- */
@media (max-width: 379px) {
  .hero-section h1 { font-size: 1.75rem !important; }
  .hero-section p { font-size: 0.85rem !important; }
}

/* --- Mobile landscape --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section { padding-top: 4rem !important; padding-bottom: 3rem !important; }
  #mobileDrawer { width: 100% !important; max-width: none; }
}

/* --- Very large desktop (≥ 1536px) --- */
@media (min-width: 1536px) {
  :root { --snd-section-max: 1400px; }
  .max-w-7xl { max-width: 1400px; }
}

/* --- Announcement bar on very small screens --- */
@media (max-width: 320px) {
  #announcementBar .flex > span { font-size: 10px; }
}

/* --- Hide mobile elements when JS disabled (progressive enhancement) --- */
.no-js #mobileDrawer { display: none; }
.no-js #mobileBottomBar { display: none; }

/* --- Focus ring accessibility --- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--snd-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Safe area padding for iOS --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  #mobileBottomBar { padding-bottom: env(safe-area-inset-bottom); }
}

/* --- Footer collapse on very small screens --- */
@media (max-width: 480px) {
  footer .grid { column-gap: 1.25rem; row-gap: 1.5rem; }
}