/*
 * 深圳语言跳动教育科技有限公司官网品牌样式
 * 温暖童趣 · 亲子阅读 · 语言启蒙
 */

/* ===== 品牌原色 ===== */
:root {
  --ytd-orange-50: #FFF5F0;
  --ytd-orange-100: #FFE8DE;
  --ytd-orange-200: #FFCCB8;
  --ytd-orange-300: #FFA883;
  --ytd-orange-400: #F98152;
  --ytd-orange-500: #F26B3A;
  --ytd-orange-600: #E05528;
  --ytd-orange-700: #B9421F;

  --ytd-cream-50: #FFFDF9;
  --ytd-cream-100: #FFF8F0;
  --ytd-cream-200: #FDF0E3;
  --ytd-cream-300: #F7E6D4;

  --ytd-neutral-0: #FFFFFF;
  --ytd-neutral-50: #FAFAFA;
  --ytd-neutral-100: #F5F5F5;
  --ytd-neutral-200: #E5E5E5;
  --ytd-neutral-300: #D4D4D4;
  --ytd-neutral-400: #A3A3A3;
  --ytd-neutral-500: #737373;
  --ytd-neutral-600: #525252;
  --ytd-neutral-700: #404040;
  --ytd-neutral-800: #262626;
  --ytd-neutral-900: #171717;

  /* 语义别名 */
  --ytd-background: var(--ytd-cream-50);
  --ytd-foreground: var(--ytd-neutral-800);
  --ytd-card: var(--ytd-neutral-0);
  --ytd-card-foreground: var(--ytd-neutral-800);
  --ytd-popover: var(--ytd-neutral-0);
  --ytd-popover-foreground: var(--ytd-neutral-800);
  --ytd-primary: var(--ytd-orange-500);
  --ytd-primary-foreground: var(--ytd-neutral-0);
  --ytd-muted: var(--ytd-cream-200);
  --ytd-muted-foreground: var(--ytd-neutral-500);
  --ytd-border: var(--ytd-cream-300);
  --ytd-input: var(--ytd-neutral-200);
  --ytd-ring: var(--ytd-orange-400);

  --ytd-radius-small: 4px;
  --ytd-radius-medium: 8px;
  --ytd-radius-large: 12px;

  /* 状态色 */
  --state-success: #22C55E;
  --state-success-bg: #DCFCE7;
  --state-warning: #F59E0B;
  --state-warning-bg: #FEF3C7;
  --state-error: #EF4444;
  --state-error-bg: #FEE2E2;
  --state-info: #3B82F6;
  --state-info-bg: #DBEAFE;

  /* 字体系统 */
  --font-title: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

@theme inline {
  --color-ytd-background: var(--ytd-background);
  --color-ytd-foreground: var(--ytd-foreground);
  --color-ytd-card: var(--ytd-card);
  --color-ytd-card-foreground: var(--ytd-card-foreground);
  --color-ytd-popover: var(--ytd-popover);
  --color-ytd-popover-foreground: var(--ytd-popover-foreground);
  --color-ytd-primary: var(--ytd-primary);
  --color-ytd-primary-foreground: var(--ytd-primary-foreground);
  --color-ytd-muted: var(--ytd-muted);
  --color-ytd-muted-foreground: var(--ytd-muted-foreground);
  --color-ytd-border: var(--ytd-border);
  --color-ytd-input: var(--ytd-input);
  --color-ytd-ring: var(--ytd-ring);

  --color-ytd-orange-50: var(--ytd-orange-50);
  --color-ytd-orange-100: var(--ytd-orange-100);
  --color-ytd-orange-200: var(--ytd-orange-200);
  --color-ytd-orange-300: var(--ytd-orange-300);
  --color-ytd-orange-400: var(--ytd-orange-400);
  --color-ytd-orange-500: var(--ytd-orange-500);
  --color-ytd-orange-600: var(--ytd-orange-600);
  --color-ytd-orange-700: var(--ytd-orange-700);

  --color-ytd-cream-50: var(--ytd-cream-50);
  --color-ytd-cream-100: var(--ytd-cream-100);
  --color-ytd-cream-200: var(--ytd-cream-200);
  --color-ytd-cream-300: var(--ytd-cream-300);

  --color-neutral-0: var(--ytd-neutral-0);
  --color-neutral-50: var(--ytd-neutral-50);
  --color-neutral-100: var(--ytd-neutral-100);
  --color-neutral-200: var(--ytd-neutral-200);
  --color-neutral-300: var(--ytd-neutral-300);
  --color-neutral-400: var(--ytd-neutral-400);
  --color-neutral-500: var(--ytd-neutral-500);
  --color-neutral-600: var(--ytd-neutral-600);
  --color-neutral-700: var(--ytd-neutral-700);
  --color-neutral-800: var(--ytd-neutral-800);
  --color-neutral-900: var(--ytd-neutral-900);

  --color-state-success: var(--state-success);
  --color-state-warning: var(--state-warning);
  --color-state-error: var(--state-error);
  --color-state-info: var(--state-info);

  --color-background: var(--ytd-background);
  --color-foreground: var(--ytd-foreground);
  --color-card: var(--ytd-card);
  --color-card-foreground: var(--ytd-card-foreground);
  --color-popover: var(--ytd-popover);
  --color-popover-foreground: var(--ytd-popover-foreground);
  --color-primary: var(--ytd-primary);
  --color-primary-foreground: var(--ytd-primary-foreground);
  --color-muted: var(--ytd-muted);
  --color-muted-foreground: var(--ytd-muted-foreground);
  --color-border: var(--ytd-border);
  --color-input: var(--ytd-input);
  --color-ring: var(--ytd-ring);

  --radius-sm: var(--ytd-radius-small);
  --radius-md: var(--ytd-radius-medium);
  --radius-lg: var(--ytd-radius-large);
  --radius-full: 9999px;

  --font-family-title: var(--font-title);
  --font-family-body: var(--font-body);
}

/* ===== 基础排版 ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--ytd-background);
  color: var(--ytd-foreground);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ===== 顶部导航栏 ===== */
body > header.fixed {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ytd-cream-200);
  box-shadow: 0 1px 2px rgba(40, 25, 15, 0.04);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

body > header.fixed.is-scrolled {
  background-color: rgba(255, 255, 255, 0.7);
  border-bottom-color: var(--ytd-cream-300);
  box-shadow: 0 4px 16px rgba(40, 25, 15, 0.06), 0 1px 2px rgba(40, 25, 15, 0.05);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ytd-neutral-900);
}

/* ===== 通用工具类 ===== */
.ytd-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.ytd-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.ytd-card {
  background-color: var(--ytd-card);
  border: 1px solid var(--ytd-border);
  border-radius: var(--ytd-radius-large);
}

.ytd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--ytd-radius-medium);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

.ytd-btn-primary {
  background-color: var(--ytd-primary);
  color: var(--ytd-primary-foreground);
  box-shadow: 0 2px 8px rgba(242, 107, 58, 0.18);
}

.ytd-btn-primary:hover {
  background-color: var(--ytd-orange-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(242, 107, 58, 0.24);
}

.ytd-btn-soft {
  background-color: var(--ytd-orange-100);
  color: var(--ytd-orange-700);
}

.ytd-btn-soft:hover {
  background-color: var(--ytd-orange-200);
}

.ytd-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--ytd-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--ytd-orange-100);
  color: var(--ytd-orange-700);
}

/* ===== 装饰元素 ===== */
.ytd-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}

/* ===== 滚动条隐藏 ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 图标 ===== */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

img { max-width: 100%; height: auto; }

/* ===== 动画 ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.55; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

/* 滚动触发动画 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 返回顶部按钮 ===== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--ytd-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(242, 107, 58, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.15s ease;
  z-index: 40;
  border: none;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--ytd-orange-600);
}

/* ===== 移动端菜单 ===== */
.mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid var(--ytd-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  z-index: 49;
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--ytd-neutral-600);
  font-weight: 500;
  border-bottom: 1px solid var(--ytd-cream-100);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-menu a:hover,
.mobile-menu a.is-active {
  color: var(--ytd-primary);
  background-color: var(--ytd-orange-50);
}

/* ===== 汉堡按钮 ===== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--ytd-neutral-700);
}

@media (max-width: 767px) {
  .menu-toggle {
    display: inline-flex;
  }
  .desktop-nav {
    display: none !important;
  }
}

/* ===== 表单样式 ===== */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ytd-neutral-200);
  border-radius: var(--ytd-radius-medium);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ytd-foreground);
  background-color: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--ytd-ring);
  box-shadow: 0 0 0 3px rgba(249, 129, 82, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ytd-neutral-400);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--ytd-neutral-700);
}

/* ===== 表单状态提示 ===== */
.form-status {
  display: none;
}

.form-status.success {
  display: block;
  background-color: var(--state-success-bg);
  color: #15803d;
}

.form-status.error {
  display: block;
  background-color: var(--state-error-bg);
  color: #b91c1c;
}

.form-status.info {
  display: block;
  background-color: var(--state-info-bg);
  color: #1d4ed8;
}