/* ============================================================
   浩瀚体育 · JW73  —  /assets/site.css
   共享外壳：变量 / 重置 / 中文排版 / 头部 / 页脚 / 基础组件
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
hr{border:0}

:root{
  --navy:#0B1B2B;
  --navy-2:#0A1826;
  --navy-3:#081521;
  --ink:#06111C;
  --ink-2:#071422;
  --cream:#F4EBDD;
  --cream-2:#EDE1CE;
  --brown:#201A17;
  --gold:#F5A623;
  --gold-lift:#FFB93F;
  --flame:#E4572E;
  --teal:#2EC4B6;
  --rose:#D72663;
  --rose-lift:#F2699A;
  --mist:#8FA3B5;
  --sand:#D9C7A7;
  --mint:#7BE0D6;

  --font-display:"Barlow Condensed","Oswald","HarmonyOS Sans SC","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1280px;
  --gutter:clamp(18px,4vw,56px);
  --header-h:74px;

  --edge:1px solid rgba(143,163,181,.28);
  --lift:0 22px 48px -28px rgba(3,10,18,.92);
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:900px){
  :root{--header-h:62px}
}

body{
  min-height:100vh;
  padding-top:var(--header-h);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.012em;
  color:var(--cream);
  background-color:var(--navy);
  background-image:
    radial-gradient(1100px 620px at 88% -10%, rgba(245,166,35,.13), transparent 60%),
    radial-gradient(900px 520px at 2% 3%, rgba(46,196,182,.09), transparent 62%),
    linear-gradient(180deg,#0B1B2B 0%,#0A1826 52%,#081521 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.01em;
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- 焦点与跳转链 ---------- */
:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed;
  top:8px;left:8px;
  z-index:400;
  padding:10px 16px;
  border-radius:2px;
  background-color:var(--mint);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  transform:translateY(-180%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- 滚动进度光带（JS 注入） ---------- */
.scroll-meter{
  position:fixed;
  top:0;left:0;
  z-index:200;
  width:100%;height:3px;
  background-image:linear-gradient(90deg,var(--teal) 0%,var(--gold) 62%,var(--flame) 100%);
  transform:scaleX(0);
  transform-origin:0 50%;
  pointer-events:none;
}

/* ============================================================
   页头
   ============================================================ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:var(--header-h);
  padding:0 var(--gutter);
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-pinned{
  background-color:rgba(6,17,28,.96);
  border-bottom-color:rgba(245,166,35,.34);
  box-shadow:0 18px 34px -26px #000;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  padding:6px 0;
  flex:0 0 auto;
}
.brand__zh{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(17px,2vw,21px);
  line-height:1;
  letter-spacing:.14em;
  color:var(--cream);
  transition:color .2s var(--ease);
}
.brand__code{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  padding:5px 7px;
  border-radius:2px;
  color:var(--ink);
  background-color:var(--gold);
}
.brand:hover .brand__zh,
.brand:focus-visible .brand__zh{color:var(--gold)}

/* 移动端开关 */
.nav-toggle{
  position:relative;
  z-index:2;
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid rgba(143,163,181,.42);
  border-radius:2px;
  background-color:rgba(6,17,28,.55);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);
}
.nav-toggle:hover{border-color:var(--gold);color:var(--gold)}
.nav-toggle__label{line-height:1}
.nav-toggle__box{
  position:relative;
  display:block;
  width:18px;height:12px;
}
.nav-toggle__box span{
  position:absolute;
  left:0;
  width:100%;height:2px;
  border-radius:2px;
  background-color:currentColor;
  transition:transform .28s var(--ease),opacity .2s var(--ease);
}
.nav-toggle__box span:nth-child(1){top:0}
.nav-toggle__box span:nth-child(2){top:5px}
.nav-toggle__box span:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 主导航 */
.primary-nav{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.6vw,22px);
}
.primary-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
}
.primary-nav__item{position:relative}
.primary-nav__link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:9px 10px;
  border-radius:2px;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.05em;
  color:rgba(244,235,221,.78);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.primary-nav__num{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(143,163,181,.85);
  transition:color .2s var(--ease);
}
.primary-nav__link:hover{
  color:var(--cream);
  background-color:rgba(244,235,221,.07);
}
.primary-nav__link:hover .primary-nav__num{color:var(--teal)}
.primary-nav__link[aria-current="page"]{color:var(--gold)}
.primary-nav__link[aria-current="page"] .primary-nav__num{color:var(--gold)}
.primary-nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:4px;
  height:2px;
  border-radius:2px;
  background-color:var(--gold);
}
.primary-nav__note{display:none}

/* ============================================================
   页脚
   ============================================================ */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,110px);
  padding:clamp(36px,5vw,64px) var(--gutter) 26px;
  background-color:var(--ink);
  background-image:
    radial-gradient(760px 320px at 10% 0%, rgba(245,166,35,.11), transparent 66%),
    radial-gradient(640px 300px at 92% 8%, rgba(46,196,182,.08), transparent 68%);
  border-top:1px solid rgba(245,166,35,.30);
  color:var(--cream);
}

.site-footer__inner{
  display:grid;
  grid-template-columns:minmax(240px,1.6fr) repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);
  max-width:var(--shell);
  margin-inline:auto;
  padding-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid rgba(143,163,181,.22);
}

.footer-lead{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.footer-brand{display:inline-flex;align-items:center;gap:10px}
.footer-brand__zh{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(20px,2.6vw,26px);
  line-height:1;
  letter-spacing:.12em;
  color:var(--cream);
  transition:color .2s var(--ease);
}
.footer-brand__code{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  padding:5px 7px;
  border-radius:2px;
  color:var(--ink);
  background-color:var(--gold);
}
.footer-brand:hover .footer-brand__zh{color:var(--gold)}
.footer-lead__note{
  font-size:15px;
  letter-spacing:.03em;
  color:rgba(244,235,221,.78);
}
.footer-lead__meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--mist);
}
.footer-lead__meta .mono{color:var(--teal)}
.footer-lead__cta{margin-top:4px}

.footer-col{min-width:0}
.footer-col__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(16px,1.8vw,18px);
  line-height:1.2;
  letter-spacing:.1em;
  color:var(--cream);
}
.footer-col__title a{
  display:inline-block;
  padding-bottom:6px;
  border-bottom:2px solid rgba(245,166,35,.5);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer-col__title a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.footer-col__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.footer-col__list li{
  position:relative;
  padding-left:13px;
  font-size:13.5px;
  letter-spacing:.04em;
  color:rgba(244,235,221,.62);
  transition:color .2s var(--ease);
}
.footer-col__list li::before{
  content:"";
  position:absolute;
  left:0;top:.78em;
  width:4px;height:4px;
  border-radius:50%;
  background-color:var(--mist);
  transition:background-color .2s var(--ease);
}
.footer-col__list li:hover{color:var(--cream)}
.footer-col__list li:hover::before{background-color:var(--gold)}

.footer-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 26px;
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(18px,2.4vw,26px) 0;
  border-bottom:1px solid rgba(143,163,181,.22);
}
.footer-contact__label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--gold);
}
.footer-contact__item{
  font-size:13.5px;
  letter-spacing:.04em;
  color:rgba(244,235,221,.82);
  font-variant-numeric:tabular-nums;
}
.footer-contact__item--mail{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--cream);
}
.footer-contact__hours{
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--mist);
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  max-width:var(--shell);
  margin-inline:auto;
  padding-top:20px;
}
.footer-base__icp,
.footer-base__copy{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:rgba(143,163,181,.9);
}
.footer-base__links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.footer-base__links a{
  position:relative;
  font-size:12.5px;
  letter-spacing:.08em;
  color:rgba(244,235,221,.72);
  transition:color .2s var(--ease);
}
.footer-base__links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:1px;
  background-color:var(--mint);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .24s var(--ease);
}
.footer-base__links a:hover{color:var(--mint)}
.footer-base__links a:hover::after{transform:scaleX(1)}

/* ============================================================
   基础组件
   ============================================================ */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.panel{
  position:relative;
  padding:clamp(22px,3.4vw,44px);
  border-radius:3px;
  background-color:var(--cream);
  color:var(--brown);
  box-shadow:var(--lift);
}
.panel--glass{
  background-color:rgba(11,27,43,.62);
  color:var(--cream);
  border:1px solid rgba(143,163,181,.32);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:.1em;
  cursor:pointer;
  transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{
  background-color:var(--gold);
  color:var(--ink);
  box-shadow:0 14px 26px -18px rgba(245,166,35,.95);
}
.btn--primary:hover{background-color:var(--gold-lift)}
.btn--ghost{
  background-color:transparent;
  color:var(--cream);
  border-color:rgba(143,163,181,.55);
}
.btn--ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn--dark{background-color:var(--ink);color:var(--cream)}
.btn--dark:hover{background-color:#0A1D2F}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--mist);
}
.breadcrumb a{color:rgba(244,235,221,.8);transition:color .2s var(--ease)}
.breadcrumb a:hover{color:var(--mint)}
.breadcrumb__sep{color:rgba(143,163,181,.6)}
.breadcrumb [aria-current="page"]{color:var(--gold)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--gold);
}
.eyebrow::before{
  content:"";
  display:block;
  width:22px;height:2px;
  background-color:var(--gold);
}

.rule{
  height:1px;
  margin:0;
  background-color:rgba(143,163,181,.28);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid rgba(46,196,182,.42);
  border-radius:2px;
  background-color:rgba(46,196,182,.16);
  color:var(--teal);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
}
.tag--gold{
  border-color:rgba(245,166,35,.46);
  background-color:rgba(245,166,35,.16);
  color:var(--gold);
}
.tag--rose{
  border-color:rgba(215,38,99,.46);
  background-color:rgba(215,38,99,.16);
  color:var(--rose-lift);
}

/* 图片容器基础规则（页面阶段放占位图使用） */
.img-frame{
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  border-radius:2px;
  background-color:var(--ink);
}
.img-frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.img-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:linear-gradient(200deg,rgba(245,166,35,.22) 0%,rgba(11,27,43,0) 44%,rgba(6,17,28,.74) 100%);
}
.img-frame--3x2{aspect-ratio:3/2}
.img-frame--4x3{aspect-ratio:4/3}
.img-frame--16x6{aspect-ratio:16/6}
.img-frame--square{aspect-ratio:1/1}
.img-frame--slant{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.img-frame--slant-r{clip-path:polygon(0 0,100% 0,100% 100%,0 92%)}
.img-frame:hover > img{transform:scale(1.035)}

/* 视口渐显 */
.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

/* ============================================================
   断点
   ============================================================ */
@media (max-width:1080px){
  .site-footer__inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .footer-lead{grid-column:1 / -1}
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}

  .primary-nav{
    position:fixed;
    top:0;right:0;bottom:0;
    z-index:1;
    width:min(340px,88vw);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:calc(var(--header-h) + 20px) 22px 30px;
    background-color:var(--ink-2);
    background-image:linear-gradient(180deg,#0A1B2B 0%,#050E18 100%);
    border-left:1px solid rgba(245,166,35,.26);
    box-shadow:-34px 0 70px -34px #000;
    overflow-y:auto;
    visibility:hidden;
    transform:translateX(102%);
    transition:transform .34s var(--ease),visibility 0s linear .34s;
  }
  .primary-nav[data-open]{
    visibility:visible;
    transform:translateX(0);
    transition:transform .34s var(--ease),visibility 0s linear 0s;
  }

  .primary-nav__list{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .primary-nav__item{width:100%}
  .primary-nav__link{
    width:100%;
    padding:15px 6px;
    border-radius:0;
    border-bottom:1px solid rgba(143,163,181,.16);
    font-size:16px;
    letter-spacing:.08em;
  }
  .primary-nav__link:hover{background-color:rgba(244,235,221,.05)}
  .primary-nav__link[aria-current="page"]{
    background-color:rgba(245,166,35,.12);
    box-shadow:inset 3px 0 0 var(--gold);
  }
  .primary-nav__link[aria-current="page"]::after{display:none}

  .primary-nav__note{
    display:block;
    margin-top:auto;
    padding-top:22px;
    border-top:1px solid rgba(143,163,181,.2);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.16em;
    color:rgba(143,163,181,.85);
  }
}

@media (max-width:760px){
  .footer-contact{gap:8px 18px}
  .footer-base{justify-content:flex-start}
}

@media (max-width:560px){
  .site-footer__inner{grid-template-columns:minmax(0,1fr)}
  .footer-lead{grid-column:auto}
  .footer-lead__cta{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .btn:hover{transform:none}
  .img-frame:hover > img{transform:none}
}