@charset "utf-8";
/* ==========================================================================
   欧亚国际幼儿园 · 全站全局样式表  style.css
   --------------------------------------------------------------------------
   作用：全站统一的基础样式 / 组件样式 / 动画效果，与 Tailwind CSS v3 配合。
   说明：Tailwind 负责布局与工具类，本文件负责自定义组件与动画，
         全部带中文注释，方便后期按需修改。
   ========================================================================== */

/* ============ 1. CSS 变量：全站配色与字体 ============ */
:root {
  --brand: #52B788;              /* 主色：温柔青绿（成长 / 健康 / 自然） */
  --brand-deep: #2D6A4F;         /* 主色深一级（用于渐变与文字强调） */
  --brand-mid: #3D9B6E;          /* 主色中间值 */
  --brand-light: #D8F3DC;        /* 主色浅底（标签 / 悬停背景） */
  --accent: #FFB703;             /* 辅色：暖橘（童趣 / 活力） */
  --accent-light: #FFF3D6;       /* 辅色浅底 */
  --ink: #334155;                /* 正文深色（slate-700） */
  --ink-soft: #64748B;           /* 正文浅色（slate-500） */
  --bg-soft: #F6FAF8;            /* 页面浅灰渐变底色 */
}

/* ============ 2. 全局基础 ============ */
html { scroll-behavior: smooth; }                 /* 全局平滑滚动 */

body {
  font-family: 'Nunito', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', 'Noto Sans SC', sans-serif;  /* 圆润字体栈 */
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 文字选中颜色（品牌青绿） */
::selection { background: rgba(82, 183, 136, .25); }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBE6D8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* 尊重系统"减弱动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============ 3. 顶部导航栏（透明 ⇄ 实底切换） ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease;
}
/* 滚动后 / 非首页：白色毛玻璃实底 + 阴影 */
.site-header.solid,
.site-header.scrolled {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(15, 23, 42, .06);
}
/* 首页（has-hero）在未滚动时导航文字为白色，压在 Banner 图上清晰可读 */
.has-hero .site-header:not(.scrolled) .logo-title,
.has-hero .site-header:not(.scrolled) .nav-link,
.has-hero .site-header:not(.scrolled) .menu-btn { color: #fff; }
.has-hero .site-header:not(.scrolled) .logo-sub { color: rgba(255, 255, 255, .82); }
.has-hero .site-header:not(.scrolled) .nav-link:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.has-hero .site-header:not(.scrolled) .nav-link.active { background: rgba(255, 255, 255, .22); color: #fff; }

/* LOGO 文字 */
.logo-title, .logo-sub { transition: color .35s ease; }

/* ---------- 桌面端导航链接 ---------- */
.nav-link {
  display: inline-flex; align-items: center;
  padding: .5rem .95rem;
  border-radius: 999px;
  font-size: .92rem; font-weight: 600;
  color: var(--ink-soft);
  transition: all .25s ease;
}
.nav-link:hover { color: var(--brand-deep); background: var(--brand-light); }
.nav-link.active { color: var(--brand-deep); background: var(--brand-light); font-weight: 800; }

/* ---------- 移动端折叠菜单链接 ---------- */
.m-nav-link {
  display: block; padding: .7rem 1rem; border-radius: .8rem;
  font-weight: 600; color: var(--ink-soft); transition: all .25s ease;
}
.m-nav-link:hover { background: var(--brand-light); color: var(--brand-deep); }
.m-nav-link.active { background: var(--brand-light); color: var(--brand-deep); font-weight: 800; }

/* ============ 4. 按钮组件 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: all .3s ease;
}
/* 主按钮：青绿渐变 */
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(82, 183, 136, .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(82, 183, 136, .45); }
/* 辅按钮：暖橘渐变 */
.btn-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #FF9F1A 100%);
  color: #4A3800;
  box-shadow: 0 8px 20px rgba(255, 183, 3, .35);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255, 183, 3, .45); }
/* 半透明按钮（用于 Banner 深色背景上） */
.btn-ghost {
  background: rgba(255, 255, 255, .16);
  color: #fff; border: 1.5px solid rgba(255, 255, 255, .65);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .3); transform: translateY(-2px); }
/* 描边按钮 */
.btn-outline {
  border: 1.5px solid var(--brand); color: var(--brand-deep); background: #fff;
}
.btn-outline:hover { background: var(--brand-light); transform: translateY(-2px); }

/* ============ 5. 小标签（章节眉标） ============ */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .95rem; border-radius: 999px;
  background: var(--brand-light); color: var(--brand-deep);
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
}
.badge-accent { background: var(--accent-light); color: #B45309; }

/* ============ 6. 卡片与图片悬停 ============ */
/* 柔和白卡片：上浮 + 阴影加深 */
.card-soft {
  background: #fff;
  border: 1px solid #EAF3EE;
  border-radius: 1.4rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-soft:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, .10);
  border-color: #CFE8DC;
}
/* 图片放大容器：hover 时图片平滑放大 1.08 倍 */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* ============ 7. 滚动淡入上浮动画 ============ */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.revealed { opacity: 1; transform: none; }
/* 依次延迟（配合交错入场） */
.d-1 { transition-delay: .08s; }
.d-2 { transition-delay: .16s; }
.d-3 { transition-delay: .24s; }
.d-4 { transition-delay: .32s; }
.d-5 { transition-delay: .40s; }

/* ============ 8. 首页 Banner 轮播 ============ */
.banner-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
}
.banner-slide.active { opacity: 1; visibility: visible; }
/* 背景图缓慢缩放（Ken Burns 效果） */
.banner-slide img {
  transform: scale(1.06);
  transition: transform 7s ease;
}
.banner-slide.active img { transform: scale(1); }
/* 文案入场（晚于背景淡入） */
.banner-content {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s ease .35s, transform .8s ease .35s;
}
.banner-slide.active .banner-content { opacity: 1; transform: none; }

/* 轮播圆点 */
.banner-dot {
  width: .65rem; height: .65rem; border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer; transition: all .3s ease;
}
.banner-dot.active { width: 2.1rem; background: #fff; }
/* 左右箭头 */
.banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .35);
  transition: all .3s ease; cursor: pointer;
}
.banner-arrow:hover { background: rgba(255, 255, 255, .32); transform: translateY(-50%) scale(1.08); }

/* ============ 9. 装饰光斑（柔和色块） ============ */
.blob {
  position: absolute; border-radius: 9999px;
  filter: blur(70px); opacity: .45;
  pointer-events: none; z-index: 0;
}

/* ============ 10. 校园风采：分类筛选按钮 ============ */
.filter-btn {
  padding: .5rem 1.2rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700;
  color: var(--ink-soft); background: #fff;
  border: 1px solid #E2EDE7;
  transition: all .3s ease; cursor: pointer;
}
.filter-btn:hover { color: var(--brand-deep); border-color: var(--brand); }
.filter-btn.active {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 6px 14px rgba(82, 183, 136, .35);
}

/* 画廊卡片：悬停放大 + 遮罩标题 */
.gallery-card {
  position: relative; border-radius: 1.2rem; overflow: hidden; cursor: pointer;
}
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.gallery-card:hover img { transform: scale(1.1); }
.gallery-card .gallery-cap {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .72));
  color: #fff; font-weight: 700; font-size: .92rem;
  opacity: 0; transform: translateY(10px);
  transition: all .35s ease;
}
.gallery-card:hover .gallery-cap { opacity: 1; transform: none; }

/* ============ 11. 图片灯箱（画廊预览大图） ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
}
/* 确保 Tailwind 的 hidden 一定能覆盖 display:flex */
.lightbox.hidden { display: none; }

/* ============ 12. 课程页：分龄 Tab ============ */
.tab-btn {
  padding: .7rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem;
  color: var(--ink-soft); background: #fff;
  border: 1px solid #E2EDE7;
  transition: all .3s ease; cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { color: var(--brand-deep); border-color: var(--brand); }
.tab-btn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(82, 183, 136, .35);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .5s ease; }

/* ============ 13. 入园指南：三列时间轴 ============ */
.timeline { display: grid; grid-template-columns: 5rem 2.2rem 1fr; gap: .4rem 0; }
.timeline .tl-time { text-align: right; padding-top: .1rem; font-weight: 800; color: var(--brand-deep); font-size: .85rem; }
.timeline .tl-node { justify-self: center; position: relative; }
.timeline .tl-dot {
  width: .9rem; height: .9rem; border-radius: 999px;
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-light);
  margin-top: .3rem;
}
/* 竖线用 calc 从列宽推出，保证与圆点像素级对齐 */
.timeline .tl-node::after {
  content: ""; position: absolute; top: 1.4rem; left: 50%;
  width: 2px; height: calc(100% + .4rem);
  background: #CFE8DC; transform: translateX(-50%);
}
.timeline .tl-row:last-child .tl-node::after { display: none; }
.timeline .tl-content { padding: 0 0 1.6rem .4rem; }

/* ============ 14. 表单控件 ============ */
.form-input, .form-textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid #DDE9E2; border-radius: .9rem;
  background: #FBFDFC; color: var(--ink);
  font-size: .92rem; outline: none;
  transition: all .25s ease;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(82, 183, 136, .15);
}
.form-label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .4rem; }

/* ============ 15. 回到顶部按钮 ============ */
#backTop {
  position: fixed; right: 1.4rem; bottom: 1.6rem; z-index: 40;
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(82, 183, 136, .4);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .35s ease; cursor: pointer;
}
#backTop.show { opacity: 1; visibility: visible; transform: none; }
#backTop:hover { transform: translateY(-3px); }

/* ============ 16. 手风琴（报名须知 / FAQ） ============ */
.acc-item {
  border: 1px solid #E2EDE7; border-radius: 1rem;
  background: #fff; overflow: hidden;
  transition: all .3s ease;
}
.acc-item.open { border-color: var(--brand); box-shadow: 0 8px 20px rgba(82, 183, 136, .12); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }

/* ============ 17. 装饰动画 ============ */
/* 缓慢上下浮动（装饰元素） */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }
/* 向下轻微跳动（滚动提示） */
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(8px); opacity: .45; }
}
.bounce-soft { animation: bounce-soft 2.2s ease-in-out infinite; }
/* 通用淡入上浮（用于 Tab 面板切换） */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ============ 18. 小屏适配补充 ============ */
@media (max-width: 1023px) {
  .nav-link { padding: .4rem .7rem; font-size: .86rem; }
}