/* ============================================================
   苏高职体育文化节 · 电影化动效 & 统一视觉规范层 v4.0
   预设：05 Locomotive（电影感过渡/视差/节奏化入场）
   设计原则：
   1) transform/opacity-only 动画（GPU 合成层，不掉帧）
   2) 三档时长体系：fast 180ms / base 320ms / slow 680ms + 电影级开场 950ms
   3) 统一缓动族 --ease-out (出场主角) / --ease-spring (反馈回弹)
   4) prefers-reduced-motion 全面降级
   引入方式：common.css 或页面 <style> 之后 <link rel="stylesheet" href="/assets/enhance.css?v=20260916">
   ============================================================ */

:root{
  /* ---- 动效时长令牌 ---- */
  --d-fast:.18s; --d-base:.32s; --d-slow:.68s; --d-cine:.95s;
  /* ---- 动效缓动令牌 ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);        /* 电影化出场：快进缓停 */
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* 反馈回弹 */
  --ease-io:cubic-bezier(.65,.05,.36,1);      /* 双向过渡 */

  /* ---- 深空电影底色（Locomotive 夜幕层）---- */
  --cine-navy:#0d1f4d; --cine-deep:#0b1530; --cine-glow:#ff9d4d;

  /* ---- 统一阴影体系（替代散乱阴影）---- */
  --sh-1:0 2px 8px rgba(15,27,51,.06);
  --sh-2:0 10px 30px rgba(15,27,51,.08);
  --sh-3:0 18px 44px rgba(15,27,51,.14);
  --sh-brand:0 12px 28px rgba(255,90,31,.32);

  /* ---- 焦点/选择统一 ---- */
  --ring:0 0 0 3px rgba(255,90,31,.18);
}

/* ============ A. 视觉规范统一 ============ */

/* A1. 统一卡片质感：细边 + 层级阴影 + hover 浮起（全站 .card/.stat/.about-card/.flow/.ev-card/.p-card 等） */
.stat,.about-card,.flow,.q-card,.p-card,.ev-card,.l-card,.rec-card,.q-panel,.card,.d-card,.reg-card,.tl-body,.day-tab{
  box-shadow:var(--sh-2);
  will-change:transform;
}
.stat:hover,.about-card:hover,.flow:hover,.p-card:hover,.ev-card:hover,.l-card:hover,.q-card:hover{
  box-shadow:var(--sh-3),0 4px 18px rgba(255,90,31,.10);
}

/* A2. 统一圆角与描边细节：卡片 1px 内描边提升精致度 */
.stat,.about-card,.flow,.q-card,.p-card,.ev-card,.l-card,.card,.q-panel,.d-card,.reg-card{
  border:1px solid rgba(15,27,51,.05);
}
@media (max-width:640px){
  .stat,.about-card,.flow,.q-card,.p-card,.ev-card,.l-card,.card,.q-panel,.d-card,.reg-card{
    border-radius:14px;
  }
}

/* A3. 渐变分隔与段落节奏：主区块之间加"光带" */
.sec{position:relative}
.sec+.sec::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(560px,72vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,90,31,.22),transparent);
  pointer-events:none;
}

/* A4. 统一 chip 小图标底：饱和度收敛 */
.chip{backdrop-filter:saturate(1.2)}

/* A5. 页脚与深色区层次增强：微噪点光晕（纯 CSS，零成本） */
footer{position:relative;overflow:hidden}
footer::before{
  content:"";position:absolute;left:50%;top:-120px;transform:translateX(-50%);
  width:640px;height:240px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,122,61,.12),transparent 70%);
  pointer-events:none;
}

/* ============ B. 电影化开场：页面加载序幕（Locomotive 核心） ============ */

/* B1. 导航落下 */
nav{animation:cineDrop var(--d-cine) var(--ease-out) both}
@keyframes cineDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* B2. 首屏内容节奏化入场：kicker → 标题 → 副标 → meta → CTA 依次登场 */
.hero .kicker{animation:cineRise var(--d-cine) var(--ease-out) .12s both}
.hero .edition{animation:cineRise var(--d-cine) var(--ease-out) .22s both}
.hero h1{animation:cineRise var(--d-cine) var(--ease-out) .32s both}
.hero .slogan{animation:cineRise var(--d-cine) var(--ease-out) .44s both}
.hero .meta span{animation:cinePop var(--d-base) var(--ease-spring) both}
.hero .meta span:nth-child(1){animation-delay:.55s}
.hero .meta span:nth-child(2){animation-delay:.62s}
.hero .meta span:nth-child(3){animation-delay:.69s}
.hero .meta span:nth-child(4){animation-delay:.76s}
.hero .meta span:nth-child(5){animation-delay:.83s}
.hero .cta{animation:cineRise var(--d-slow) var(--ease-out) .9s both}
@keyframes cineRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes cinePop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

/* B3. 倒计时盒子 spring 弹入 */
.countdown .cd-box{animation:cinePop var(--d-base) var(--ease-spring) both}
.countdown .cd-box:nth-child(1){animation-delay:.55s}
.countdown .cd-box:nth-child(2){animation-delay:.63s}
.countdown .cd-box:nth-child(3){animation-delay:.71s}
.countdown .cd-box:nth-child(4){animation-delay:.79s}

/* B4. 登录门（register/admin）电影化 */
#regGate,#loginGate{animation:gateFade .5s var(--ease-out) both}
@keyframes gateFade{from{opacity:0}to{opacity:1}}
.reg-login,.login-card{animation:cineCard var(--d-cine) var(--ease-out) .1s both}
@keyframes cineCard{from{opacity:0;transform:translateY(46px) scale(.94)}to{opacity:1;transform:none}}
.reg-login .lk,.login-card .lk{animation:cinePop var(--d-slow) var(--ease-spring) .5s both}

/* ============ C. 滚动叙事：节奏化入场升级 ============ */

/* C1. reveal 统一升级为电影化位移+缩放 */
.reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* C2. 页面子头（page-hero）内容依次浮现 */
.page-hero .crumb{animation:cineRise var(--d-slow) var(--ease-out) .1s both}
.page-hero h1{animation:cineRise var(--d-slow) var(--ease-out) .2s both}
.page-hero .sub{animation:cineRise var(--d-slow) var(--ease-out) .3s both}
.page-hero .hero-chips span{animation:cinePop var(--d-base) var(--ease-spring) both}
.page-hero .hero-chips span:nth-child(1){animation-delay:.42s}
.page-hero .hero-chips span:nth-child(2){animation-delay:.5s}
.page-hero .hero-chips span:nth-child(3){animation-delay:.58s}

/* C2-fix. v3.0 存量 bug：common.css 从未定义 .hero-logo，子页校徽以原图尺寸渲染成巨幅横幅。
   此处补齐：小徽章随流排版，与 .wrap 左缘对齐。 */
.page-hero .hero-logo{display:block;height:72px;width:auto;max-width:calc(100% - 44px);margin:0 26px 12px;mix-blend-mode:screen;opacity:.96;pointer-events:none;user-select:none}
@media (max-width:860px){
  .page-hero .hero-logo{height:52px;margin:0 16px 8px}
}

/* C3. 时间轴项节奏入场（schedule 页，JS 加 .tl-in 触发；初始隐藏仅在 .fx-ready 下生效，JS 失败时不留隐形内容） */
html.fx-ready .tl-item{opacity:0;transform:translateY(18px)}
.tl-item.tl-in{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}

/* C4. 侧栏卡片浮现（schedule 公告栏） */
.side .card{transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.side .card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}

/* ============ D. 微交互升级 ============ */

/* D1. 按钮涟漪容器（JS 注入 .ripple-svg）——改用 box-shadow 脉冲代替（零 JS 成本） */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 60%);
  transform:scale(.6);pointer-events:none;transition:opacity .6s,transform .6s;
}
.btn:active::after{opacity:1;transform:scale(1.15);transition:0s}
.btn-primary{will-change:transform}
.btn-primary:hover{filter:saturate(1.08)}

/* D2. 主按钮 sheen 光泽：hover 时掠过（区别于无限循环的旧版） */
.btn-primary::before{
  content:"";position:absolute;top:0;left:-90px;width:44px;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn-primary:hover::before{animation:btnSheen .8s var(--ease-out)}
@keyframes btnSheen{0%{left:-90px;opacity:1}100%{left:130%;opacity:0}}

/* D3. 卡片图标微动：hover 时图标轻跳 */
.about-card .ai,.flow .fi,.p-card .pi,.ev-card .ev-icon,.l-card .li,.q-card .qi{
  transition:transform var(--d-base) var(--ease-spring);
}
.about-card:hover .ai,.flow:hover .fi,.p-card:hover .pi,.ev-card:hover .ev-icon,.l-card:hover .li,.q-card:hover .qi{
  transform:scale(1.12) rotate(-4deg);
}

/* D4. 表格行 hover 位移 + 斑马纹统一 */
.tbl tbody tr{transition:background var(--d-fast)}
.tbl tbody tr:hover td{background:#fff6f0}

/* D5. chip 悬停微弹 */
.chip{transition:transform var(--d-fast) var(--ease-spring)}
.chip:hover{transform:translateY(-1px) scale(1.04)}

/* D6. 导航链接：existing underline + 加 active 缩放反馈 */
.nav-links a{transition:color var(--d-fast),background var(--d-fast),transform var(--d-fast) var(--ease-spring)}
.nav-links a:active{transform:scale(.94)}

/* D7. 输入框聚焦光圈统一 */
input,select,textarea{transition:border-color var(--d-base),box-shadow var(--d-base)}
input:focus,select:focus,textarea:focus{box-shadow:var(--ring)}

/* D8. details 展开动画（grid-template 技巧，兼容 Chromium/FF/Safari 16+） */
@supports (interpolate-size:allow-keywords){
  details{interpolate-size:allow-keywords}
  details::details-content{transition:height var(--d-base) var(--ease-out),content-visibility var(--d-base);transition-behavior:allow-discrete}
}
@supports not (interpolate-size:allow-keywords){
  details .body{animation:cineFade var(--d-base) var(--ease-out)}
}
@keyframes cineFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* D9. progress bar 生长动画由 JS data-animate-width 驱动 */
.prog-bar i,.t-track i,.hot-row .ht i{transition:width .9s var(--ease-out)}

/* ============ E. 状态与反馈 ============ */

/* E1. 状态 chip 呼吸灯节奏统一 */
.chip.st-live{animation:pulse 1.8s var(--ease-io) infinite}
@keyframes pulse{50%{opacity:.68}}

/* E2. 弹窗电影化入场：遮罩淡入 + 卡片上浮 */
.overlay{animation:gateFade var(--d-base) var(--ease-out) both}
.overlay.show .modal{animation:modalIn .38s var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* E3. 成功态：徽章 spring 大弹出 + 编号高亮扫光 */
.success .ok{animation:okBounce .7s var(--ease-spring) both}
@keyframes okBounce{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.success .code{position:relative;overflow:hidden;animation:cinePop var(--d-base) var(--ease-spring) .25s both}

/* E4. toast 升级：底部上浮 + 轻微过冲 */
#toast{transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-spring)}

/* E5. 报名截止横幅：柔和提醒闪烁（reduced-motion 下静止） */
.demo-banner{position:relative;overflow:hidden}
.demo-banner::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,184,0,.12),transparent);
  animation:bannerSheen 7s var(--ease-io) infinite;
}
@keyframes bannerSheen{0%,72%{left:-70%}100%{left:135%}}

/* ============ F. 移动端适配 ============ */
@media (max-width:640px){
  /* 小屏降低位移幅度，避免长距离滑动感 */
  .hero .kicker,.hero .edition,.hero h1,.hero .slogan{animation-name:cineRiseM}
  @keyframes cineRiseM{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .reveal{transform:translateY(18px)}
}

/* ============ G. 动效减弱（可访问性硬约束） ============ */
@media (prefers-reduced-motion:reduce){
  nav,.hero .kicker,.hero .edition,.hero h1,.hero .slogan,.hero .meta span,.hero .cta,
  .countdown .cd-box,.reg-login,.login-card,.reg-login .lk,.login-card .lk,
  .page-hero .crumb,.page-hero h1,.page-hero .sub,.page-hero .hero-chips span{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .reveal{opacity:1;transform:none}
  .tl-item{opacity:1;transform:none}
  .btn::after,.btn-primary::before{display:none}
  .demo-banner::after{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============ W. 宽屏适配：导航撑满贴两侧 ============ */
/* ≥1400px 时取消导航 1140px 限宽，logo 贴左、按钮贴右；内容区仍保持 1140 对齐 */
@media (min-width:1400px){
  .nav-in{max-width:none;padding-left:clamp(28px,3.2vw,56px);padding-right:clamp(28px,3.2vw,56px)}
}

/* ============ W2. 标语排版美化：加宽字距 + 词语间隙 + 居中补偿 ============ */
/* 字距加宽后末尾多出一个字距宽度，导致视觉偏左；padding-left 等量补偿回正 */
.hero h1{letter-spacing:clamp(6px,1.6vw,20px);padding-left:clamp(6px,1.6vw,20px)}
/* 四字词组之间的呼吸间隙（燃动青春 | 赛出风采）*/
.h1-gap{display:inline-block;width:.42em}
@media (max-width:920px){
  .hero h1{font-size:clamp(32px,8.2vw,72px);letter-spacing:clamp(3px,1.8vw,12px);padding-left:clamp(3px,1.8vw,12px)}
}
@media (max-width:360px){
  .hero h1{font-size:29px;letter-spacing:3px;padding-left:3px}
}

/* ============ T. 排版精修 v6.3：标题衬线化 / 字距体系 / 防断字 ============ */

/* T1. 衬线标题字体栈（区块/子页/CTA 标题用；hero 主标语保持狂派手书，绝不覆盖） */
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:900;font-display:swap;src:local('Noto Serif SC'),local('Source Han Serif SC'),local('Songti SC'),local('SimSun')}
.page-hero h1,.cta-band h2,.sec-head h2,.tl-item.ceremony .tl-title{font-family:'Noto Serif SC','Noto Sans SC','PingFang SC','Microsoft YaHei',serif}

/* T2. 区块标题防断字 + 字距体系（hero 标语的字距由 W2 专项管，不在此覆盖） */
.page-hero h1,.sec-head h2,.cta-band h2{text-wrap:balance;letter-spacing:.06em}
.sec-head h2{font-weight:900}

/* T3. kicker 精简后重设计：去胶囊背景，改为校训引言式（侧翼细线 + 宽字距） */
.hero .kicker{background:none;border:none;box-shadow:none;padding:0;gap:14px;letter-spacing:.42em;text-indent:.42em;font-weight:600;font-size:clamp(11px,1.5vw,15px);color:rgba(255,255,255,.92);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero .kicker::before,.hero .kicker::after{content:"";width:clamp(26px,4vw,56px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,184,0,.75));flex:none}
.hero .kicker::after{background:linear-gradient(90deg,rgba(255,184,0,.75),transparent)}
.hero .kicker i{width:6px;height:6px}

/* T4. edition 行：两侧短徽线 + 加宽字距 */
.hero .edition{letter-spacing:clamp(2px,.55vw,6px);display:flex;align-items:center;justify-content:center;gap:16px}
.hero .edition::before,.hero .edition::after{content:"";width:34px;height:1px;background:rgba(255,255,255,.28)}

/* T5. hero 副标语 slogan：居中加宽 + 柔和颜色 */
.hero .slogan{letter-spacing:clamp(2px,.5vw,4.5px);color:rgba(255,255,255,.62);font-weight:400}

/* T6. 英文小标签（tag/chip 英文/hero-chips 脚标）统一 Rajdhani 竞技体 */
.sec-head .tag{font-family:'Rajdhani','Noto Sans SC',sans-serif;font-weight:700;letter-spacing:.32em;text-indent:.32em}

/* T7. 正文长文本可读性：段落最大宽度限制 */
.about-lead,.sec-head p{max-width:72ch;margin-left:auto;margin-right:auto}

/* T8. 统计数字用 Rajdhani 竞技体（index 内联页未引 num-font 规则，这里补齐） */
.stat b{font-family:'Rajdhani','Noto Sans SC',sans-serif}

/* ============ M. 移动端触摸体验：去系统蓝底 + 反馈补偿（v8.1） ============ */
/* Android WebView 默认 tap-highlight 是点击蓝底的万能解释；全部元素透明化 */
*{-webkit-tap-highlight-color:transparent!important}
html,body,a,button,input,select,textarea,label,[role=button]{-webkit-tap-highlight-color:transparent}
/* 去蓝底后给可点元素统一的按压反馈（opacity 轻降，触摸时激活） */
@media (hover:none){
  a:active,button:active,.btn:active,.tab:active,.chip:active,.pk:active,label:active,.q-card:active,.stat:active{opacity:.72;transition:opacity .08s}
  .lv-tabs a:active,.nav-links a:active,.day-tab:active,.campus-filter button:active,.filter-chip:active{opacity:.7}
}

/* ============ H. 旧变量兼容垫片（index/register 内联样式缺 --ease） ============ */
/* 说明：index/register 两页 :root 未定义 --ease 与 --shadow-lg，历史动画声明整体失效。
   此处在 :root 层补齐，让两页内联 CSS 中所有 var(--ease) 声明复活。 */
:root{--ease:cubic-bezier(.22,.61,.36,1);--shadow-lg:0 18px 44px rgba(15,27,51,.14)}