/* ============================================================
   海南中学 · 设计系统 · Base
   Tokens / Reset / Typography / Layout / Utilities
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:"Sora";src:url("../fonts/sora-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* 深海 → 天空 */
  --ink:#0b1a26;
  --deep:#0c2233;
  --midnight:#102c42;
  --ocean:#17415e;
  --sea:#2d6e8e;
  --sky:#6fb0cf;
  --sky-pale:#bcdcec;
  --mist:#eaf2f5;
  /* 椰林 */
  --palm:#2e6a50;
  --palm-deep:#1c4a36;
  --palm-pale:#d9eee4;
  /* 夕阳强调 */
  --coral:#e86a3a;
  --coral-bright:#ff8552;
  --gold:#d9a662;
  /* 暖白 */
  --cream:#f6f4ef;
  --paper:#fbfaf7;

  /* 文字（深色模式） */
  --on-dark:#f4f8fa;
  --on-dark-70:rgba(244,248,250,.70);
  --on-dark-45:rgba(244,248,250,.45);
  /* 文字（浅色模式） */
  --on-light:#0b1a26;
  --on-light-70:rgba(11,26,38,.70);
  --on-light-45:rgba(11,26,38,.45);

  /* 线条 / 玻璃 */
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(11,26,38,.10);
  --glass-dark:rgba(255,255,255,.06);
  --glass-light:rgba(255,255,255,.62);

  /* 字体 */
  --f-en:"Sora","Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;
  --f-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;

  /* 节奏 */
  --gut:clamp(20px,5vw,88px);
  --sec:clamp(88px,13vh,180px);
  --r-sm:12px;
  --r-md:20px;
  --r-lg:30px;
  --r-xl:44px;

  /* 阴影 */
  --sh-sm:0 2px 10px rgba(11,26,38,.06);
  --sh-md:0 12px 40px rgba(11,26,38,.10);
  --sh-lg:0 30px 80px rgba(11,26,38,.16);
  --sh-glow:0 20px 60px rgba(232,106,58,.18);

  /* 缓动 */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-cn);
  font-size:16px;
  line-height:1.75;
  color:var(--on-light);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
::selection{background:var(--coral);color:#fff}

/* ---------- Typography ---------- */
.t-en{font-family:var(--f-en);font-weight:300;letter-spacing:.02em}
.t-display{
  font-family:var(--f-cn);
  font-weight:700;
  font-size:clamp(2.6rem,7.6vw,7rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.t-h1{font-size:clamp(2rem,4.6vw,3.8rem);font-weight:700;line-height:1.14;letter-spacing:-.015em}
.t-h2{font-size:clamp(1.55rem,3vw,2.5rem);font-weight:700;line-height:1.22;letter-spacing:-.01em}
.t-h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:600;line-height:1.4}
.t-lead{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.85;color:var(--on-light-70)}
.t-body{font-size:.98rem;line-height:1.9;color:var(--on-light-70)}
.t-small{font-size:.85rem;line-height:1.7;color:var(--on-light-45)}
.t-mono{font-family:var(--f-en);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.t-num{font-family:var(--f-en);font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:1080px}
.wrap-text{max-width:760px}
.sec{padding-block:var(--sec);position:relative}
.sec-lg{padding-block:calc(var(--sec) * 1.25)}
.grid{display:grid;gap:clamp(16px,2.2vw,32px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-s{gap:12px}.gap-m{gap:24px}.gap-l{gap:40px}

/* ---------- 表面材质 ---------- */
.on-dark{color:var(--on-dark);background:var(--deep)}
.on-dark .t-lead,.on-dark .t-body{color:var(--on-dark-70)}
.on-dark .t-small{color:var(--on-dark-45)}

.glass{
  background:var(--glass-light);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.5);
}
.glass-dark{
  background:var(--glass-dark);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line-dark);
}

/* 噪点颗粒 */
.noise::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* 渐变背景 */
.bg-deep{background:linear-gradient(170deg,#0c2233 0%,#102c42 55%,#0b1a26 100%)}
.bg-ocean{background:linear-gradient(135deg,var(--ocean) 0%,var(--midnight) 100%)}
.bg-sky{background:linear-gradient(180deg,var(--sky-pale) 0%,var(--mist) 60%,var(--paper) 100%)}
.bg-dusk{background:linear-gradient(160deg,#123049 0%,#2d4a63 40%,#8a5a45 80%,#e0864c 100%)}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-en);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;
  border:1px solid var(--line-light);color:var(--on-light-70);
  background:rgba(255,255,255,.5);
}
.tag-dark{border-color:var(--line-dark);color:var(--on-dark-70);background:rgba(255,255,255,.04)}
.tag-coral{color:#fff;background:var(--coral);border-color:transparent}
.tag-demo{color:#8a5a2a;background:#fdf1de;border-color:#f0dcbd}

/* ---------- 分隔 ---------- */
.rule{height:1px;background:var(--line-light);border:0;margin:0}
.rule-dark{background:var(--line-dark)}

/* ---------- Utilities ---------- */
.rel{position:relative}
.z1{position:relative;z-index:1}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:28px}.mt-l{margin-top:56px}.mt-xl{margin-top:88px}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:28px}.mb-l{margin-bottom:56px}
.no-scroll{overflow:hidden}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:999;
  background:var(--coral);color:#fff;padding:12px 20px;border-radius:8px;
  transition:top .25s var(--e-out);
}
.skip-link:focus{top:16px}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}
.reveal-d4{transition-delay:.36s}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity 1s var(--e-out),transform 1s var(--e-out)}
.reveal-scale.in{opacity:1;transform:none}

/* 逐字/逐行上浮 */
.line-mask{overflow:hidden;display:block}
.line-mask>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--e-out)}
.in .line-mask>span,.line-mask.in>span{transform:none}

/* ---------- 低性能 / 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal,.reveal-scale{opacity:1 !important;transform:none !important}
  .line-mask>span{transform:none !important}
}
.perf-lite .reveal{transition-duration:.4s}
.perf-lite .noise::after{display:none}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .smap{grid-template-columns:1fr}
  .sec{padding-block:clamp(64px,9vh,110px)}
}
@media (max-width:520px){
  body{font-size:15px;line-height:1.7}
  .t-lead{font-size:1rem}
}