/* =========================================================
   HSHS entertainment — 单页官网
   品牌色 #009FFF（改色只改 --blue 一行）
   结构：开场动画 → 蓝色首屏（字标 + 业务标题逐条生长）→ 蓝色页尾
   ========================================================= */

@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue:#009FFF;
  --ink:#0A0A0B;
  --white:#FFFFFF;
  --pad:clamp(20px,4.2vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:"Inter","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei",Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--blue); }
body{
  margin:0;
  font-family:var(--font);
  color:var(--white);
  background:var(--blue);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; }

h1,h2,p,ol,li{ margin:0; padding:0; }
ol,ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
address{ font-style:normal; }

/* 只给读屏和爬虫看的文字 */
.sr-only{
  position:absolute;
  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;
}

.wrap{ width:100%; max-width:1600px; margin-inline:auto; padding-inline:var(--pad); }

/* ==================== 开场动画 ==================== */
.intro{
  position:fixed; inset:0;
  z-index:100;
  display:grid; place-items:center;
  background:var(--blue);
  transition:opacity .8s var(--ease) .1s, visibility .8s;
}
.intro__stage{
  position:relative;
  width:min(78vw,1100px);
  display:grid; place-items:center;
  transition:transform 1s var(--ease-out);
}
.intro__ring{
  width:100%; height:auto; display:block;
  overflow:visible;
}
.intro__ring-path{
  stroke-dasharray:0 2000;
  stroke-dashoffset:0;
}

.intro__logo{
  position:absolute;
  width:min(24vw,300px);
  height:auto;
  opacity:0;
  transform:scale(.94);
  /* 线快画完（约 96%）时 logo 就开始淡入，线与 logo 交接得上 */
  animation:logo-in .8s var(--ease-out) 1.58s forwards;
}
@keyframes logo-in{
  to{ opacity:1; transform:scale(1); }
}

/* 收尾：整体淡出 + 轻微放大 */
.intro.is-done{
  opacity:0;
  visibility:hidden;
}
.intro.is-done .intro__stage{ transform:scale(1.06); }

/* ==================== 首屏 ==================== */
.boss{
  position:relative;
  height:calc(100svh + 150vh);   /* 100svh 舞台 + 1.5 屏滚动长度 */
  background:var(--blue);
}
.boss__stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,2.6vw,30px) var(--pad) clamp(16px,2.2vw,26px);
}

/* 顶栏 */
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex:none;
  will-change:transform;   /* 标题堆满后被顶出画面，由脚本驱动 */
}

.lockup{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:.86;
}
.lockup__a{
  font-size:clamp(48px,min(15.2vw,21vh),290px);
  font-weight:800;
  letter-spacing:-.05em;
  line-height:.82;
}
.lockup__b{
  font-size:clamp(30px,min(9.9vw,13.2vh),180px);
  font-weight:400;
  letter-spacing:-.038em;
  line-height:.96;
  margin-top:clamp(2px,.5vw,8px);
}

.logo{
  flex:none;
  width:clamp(44px,3.8vw,60px);
  border-radius:11px;
  overflow:hidden;
  transition:transform .5s var(--ease-out);
}
.logo:hover{ transform:scale(1.06); }
.logo img{ width:100%; height:auto; }

/* 业务标题列表：贴页面底部；长成大字的那几条不缩回去，整摞向上生长，
   超出部分从顶部柔和淡出 */
.rows-clip{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.rows-clip::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:clamp(14px,2vh,26px);
  background:linear-gradient(to bottom,
    var(--blue) 0%,
    rgba(0,159,255,.55) 55%,
    rgba(0,159,255,0) 100%);
  pointer-events:none;
}
.rows{
  position:relative;
  flex:0 0 auto;          /* 不许被压缩，超出就从顶部裁掉 */
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.6vh,18px);
}
.row{
  display:grid;
  grid-template-columns:clamp(38px,4.4vw,74px) minmax(0,1fr);
  align-items:start;
  column-gap:clamp(6px,1.1vw,16px);
}
.row__idx{
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
  padding-top:.55em;
  opacity:0;
  transition:opacity .6s var(--ease) .15s;
}
.row__clip{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;      /* 给中文降部留位置，避免裁到 */
}
.row__title{
  display:block;
  font-size:30px;              /* 由脚本按滚动距离实时改写 */
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.025em;
  white-space:nowrap;
  transform:translate3d(0,115%,0);
  transition:transform .95s var(--ease-out);
}
.row.is-in .row__idx{ opacity:1; }
.row.is-in .row__title{ transform:translate3d(0,0,0); }

/* 首屏底部 */
.boss__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:none;
  margin-top:0;
  padding-top:clamp(16px,3vh,32px);
  font-size:11px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.7);
  transition:opacity .6s var(--ease);
}
.boss__foot.is-hidden{ opacity:0; }
.hint{ display:flex; align-items:center; gap:12px; }
.hint__line{
  display:block; width:46px; height:1px; background:currentColor;
  transform-origin:left center;
  animation:line-pulse 2.8s var(--ease) infinite;
}
@keyframes line-pulse{
  0%,100%{ transform:scaleX(.35); opacity:.4; }
  50%    { transform:scaleX(1);   opacity:.85; }
}

/* 背景线稿 */
.boss__wave{
  position:absolute;
  left:-4%; right:-4%; bottom:-6%;
  height:46%;
  pointer-events:none;
  opacity:.16;
  z-index:-1;
}
.boss__wave svg{ width:100%; height:100%; }

/* ==================== 页尾 ==================== */
.footer{
  position:relative;
  background:var(--blue);
  padding:clamp(64px,8vw,120px) 0 clamp(26px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.22);
}

.eyebrow{
  display:flex; align-items:baseline; gap:14px;
  font-size:11px; font-weight:400; letter-spacing:.24em;
  color:rgba(255,255,255,.62);
  margin-bottom:clamp(14px,2.2vw,22px);
}
.eyebrow__cn{ font-size:12px; letter-spacing:.3em; font-weight:600; color:var(--white); }
.eyebrow__en{ font-size:10px; letter-spacing:.26em; }

.footer__about{
  margin-bottom:clamp(38px,5.4vw,70px);
  max-width:78ch;
}
.footer__about p{
  font-size:clamp(15px,1.42vw,21px);
  line-height:1.85;
  letter-spacing:.01em;
  color:rgba(255,255,255,.92);
}
.footer__about p + p{ margin-top:.2em; }

.contact{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,48px);
  padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.28);
}
.contact__col{ display:flex; flex-direction:column; gap:10px; }
.contact__label{ font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.6); }
.contact__val{
  font-size:clamp(15px,1.5vw,21px);
  line-height:1.55;
  font-weight:500;
  width:fit-content;
  position:relative;
}
a.contact__val::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .45s var(--ease-out);
}
a.contact__val:hover::after{ transform:scaleX(1); transform-origin:left center; }
.contact__val--text{ font-weight:400; color:rgba(255,255,255,.9); }

/* 微信：桌面悬停 / 手机点击 出二维码 */
.contact__wx{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0; padding:0;
  background:none; border:0;
  font-family:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.contact__wx:focus-visible{ outline:none; }
.contact__wx-txt{
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.contact__wx:hover .contact__wx-txt,
.contact__wx:focus-visible .contact__wx-txt,
.contact__wx[aria-expanded="true"] .contact__wx-txt{
  border-bottom-color:rgba(255,255,255,.55);
}
.contact__wx-ico{
  width:13px; height:13px;
  flex:none;
  color:rgba(255,255,255,.55);
  transition:color .3s var(--ease), transform .35s var(--ease-out);
}
.contact__wx:hover .contact__wx-ico,
.contact__wx:focus-visible .contact__wx-ico,
.contact__wx[aria-expanded="true"] .contact__wx-ico{
  color:var(--white);
  transform:scale(1.08);
}

/* 二维码卡片：坐标由脚本按视口定位，避免被页尾或屏幕边缘裁掉 */
.qr{
  position:fixed;
  left:0; top:0;
  z-index:90;
  width:226px;
  padding:12px 12px 11px;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 24px 64px rgba(0,30,60,.36), 0 2px 8px rgba(0,30,60,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  --ty:10px;
  transform:translateY(var(--ty)) scale(.965);
  transform-origin:50% 100%;
  transition:opacity .24s var(--ease-out),
             transform .24s var(--ease-out),
             visibility .24s;
}
.qr.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.qr img{ width:100%; height:auto; display:block; border-radius:7px; }
.qr__cap{
  margin-top:9px;
  font-size:10.5px;
  line-height:1.5;
  letter-spacing:.02em;
  text-align:center;
  color:rgba(6,44,72,.62);
}
.qr::after{
  content:"";
  position:absolute;
  left:var(--ax,50%);
  width:13px; height:13px;
  margin-left:-6.5px;
  background:var(--white);
  border-radius:2px;
  transform:rotate(45deg);
}
/* 看不见的「桥」：填住文字与卡片之间的空隙，鼠标经过时不会误判为移出 */
.qr::before{
  content:"";
  position:absolute;
  left:0; right:0;
  height:20px;
  bottom:-20px;
}
.qr[data-side="bottom"]::before{ bottom:auto; top:-20px; }
.qr[data-side="top"]::after{ bottom:-5.5px; }
.qr[data-side="bottom"]::after{ top:-5.5px; }
.qr[data-side="bottom"]{ --ty:-10px; transform-origin:50% 0; }

.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(44px,6vw,88px);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:10.5px; letter-spacing:.16em;
  color:rgba(255,255,255,.6);
}
.footer__icp{
  color:inherit;
  transition:color .3s var(--ease);
}
.footer__icp:hover{ color:rgba(255,255,255,.92); text-decoration:underline; text-underline-offset:3px; }

/* ==================== 响应式 ==================== */
@media (max-width:900px){
  .boss{ height:calc(100svh + 130vh); }
  .contact{ grid-template-columns:1fr 1fr; }
  .footer__bottom{ flex-direction:column; }
  .boss__wave{ height:32%; }

}
@media (max-width:560px){
  .lockup__a{ font-size:clamp(44px,16vw,80px); }
  .lockup__b{ font-size:clamp(24px,10vw,50px); }
  .logo{ width:clamp(38px,10vw,48px); }
  .row{ grid-template-columns:minmax(0,1fr); }
  .row__idx{ display:none; }        /* 小屏去掉序号，把宽度全让给标题 */
  .contact{ grid-template-columns:1fr; }
  .boss__meta{ display:none; }
  .intro__stage{ width:92vw; }
  .intro__logo{ width:30vw; }
  .boss__wave{ top:32%; bottom:auto; height:36%; }   /* 把线稿挪到中段留白里 */
}

/* 减少动态：直接跳过开场 */
@media (prefers-reduced-motion:reduce){
  .intro{ display:none; }
  body.is-loading{ overflow:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .row__idx{ opacity:1; }
  .row__title{ transform:none; }
}