/* 门禁页专用样式（登录、注册、验证码、发信出错），只有这些页面引入。
   内容：跨页过渡。用浏览器自带的 View Transitions：点「用邀请码注册」时不是白屏重画，
   而是玻璃卡从登录页的尺寸弹性地拉到注册页的尺寸，星空底几乎不动，品牌行与版本号原地不动。
   工具页不做页面过渡（规范 5.6：工具页近乎无感）。不支持的浏览器自动退回普通跳转，什么都不用改。 */

/* 同源页面之间的跳转自动做过渡（两边页面都要有这一条，门禁页共用本文件所以都有） */
@view-transition { navigation: auto; }

/* 给要「接着动」的元素起名字：同名元素在新旧页面之间被当作同一个东西来变形 */
.gate .glass { view-transition-name: gate-card; }
.gate .gate-brand { view-transition-name: gate-brand; }
.gate .fine { view-transition-name: gate-fine; }

/* 整页底色与星图：短促交叉淡化。星星是固定种子，位置一样，所以几乎看不出换页 */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease-out); }

/* 玻璃卡：位置与尺寸用弹性曲线过去，560ms，过冲一点再落定，就是果冻感（规范 5.1 的 bouncy 档） */
::view-transition-group(gate-card) { animation-duration: 0.56s; animation-timing-function: var(--spring-bouncy); }
/* 卡里的内容：旧的快速淡出，新的稍后淡入，中途看到的是正在被拉长的卡身 */
::view-transition-old(gate-card) { animation: gate-out 0.18s var(--ease-out) both; }
::view-transition-new(gate-card) { animation: gate-in 0.4s var(--ease-out) both; animation-delay: 0.12s; }
/* 新旧快照都贴着卡的顶边、铺满当前尺寸，卡在变形时内容跟着从上往下展开，不是被硬裁 */
::view-transition-old(gate-card),
::view-transition-new(gate-card) { height: 100%; width: 100%; object-fit: cover; object-position: top center; }
@keyframes gate-out { to { opacity: 0; } }
@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }

/* 品牌行与版本号：位置微调时平滑跟过去，不弹 */
::view-transition-group(gate-brand),
::view-transition-group(gate-fine) { animation-duration: 0.42s; animation-timing-function: var(--ease-out); }

/* 减弱动效：直接切换，不做变形 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0.01s !important; }
}