/* ==========================================================================
   慈航市市政大厅 · 磁贴依次入场  tiles.css
   --------------------------------------------------------------------------
   各页面在 <head> 末尾引入，**必须写在 responsive.css 之后**。

   覆盖全站所有「磁贴」：
     ① 首页 · 窗口导引四块磁贴          .portalgrid > .portal
     ② 各层顶部磁贴行（身份 / 复活币）  .tilerow > .idbar / .cointile
     ③ 三楼 · 开房两枚磁贴              .tiletwo > .card
     ④ 首页 · 签到办理 / 大厅状态        .grid > .ci-tile

   节奏（2026-10-11 第二版）：
     · 单枚 1s 淡入上浮，缓动 cubic-bezier(.22,.88,.3,1.03)（尾部一点微回弹）；
     · 每枚错开 200ms，自左上而右下「一枚一枚落定」；
     · 按用户要求「整串 2s 内全部显示」：首页自 0 起算，
       4 块窗口导引磁贴 0 / 200 / 400 / 600ms → 签到办理 800ms → 大厅状态 1000ms，
       最后一枚 1000ms 起动、**2000ms 落定**，正好 2s 收场。
     · 先到的磁贴在等自己那一拍时保持不可见（fill-mode:backwards）。

   两张卡片（.ci-tile）的延迟接在四块窗口导引磁贴之后（800 / 1000ms），
   让首页从上到下连成一条完整的落定序列，而不是上下两串各走各的。

   注意两处约定：
     · fill-mode 用 backwards 而**不是** both —— 动画结束后立刻交还样式，
       否则会一直压住鼠标悬停的 translateY（首页磁贴的上浮手感会失效）。
     · 手机端 device.js 会全站关闭动画；本文件用**更高特异性的 !important** 给这批磁贴
       开一个例外（一次性入场动效，不常驻、不循环，代价极低）。
   ========================================================================== */

@keyframes ciTileIn{
  0%   {opacity:0;transform:translateY(18px) scale(.978)}
  55%  {opacity:1}
  100% {opacity:1;transform:none}
}
@-webkit-keyframes ciTileIn{
  0%   {opacity:0;-webkit-transform:translateY(18px) scale(.978)}
  55%  {opacity:1}
  100% {opacity:1;-webkit-transform:none}
}

/* —— 每枚磁贴的入场时刻（自定义属性，桌面端 / 手机端共用同一份节奏）—— */
.portalgrid>.portal:nth-child(1),.tilerow>:nth-child(1),.tiletwo>:nth-child(1){--ci-tile-d:0ms}
.portalgrid>.portal:nth-child(2),.tilerow>:nth-child(2),.tiletwo>:nth-child(2){--ci-tile-d:200ms}
.portalgrid>.portal:nth-child(3),.tilerow>:nth-child(3),.tiletwo>:nth-child(3){--ci-tile-d:400ms}
.portalgrid>.portal:nth-child(4),.tilerow>:nth-child(4),.tiletwo>:nth-child(4){--ci-tile-d:600ms}
.portalgrid>.portal:nth-child(5),.tilerow>:nth-child(5),.tiletwo>:nth-child(5){--ci-tile-d:800ms}
.portalgrid>.portal:nth-child(6),.tilerow>:nth-child(6),.tiletwo>:nth-child(6){--ci-tile-d:1000ms}
/* 兜底：与第 6 枚同步起动（一串里实际不会有这么多），保证任何情况下都在 2s 内落定 */
.portalgrid>.portal:nth-child(n+7),.tilerow>:nth-child(n+7),.tiletwo>:nth-child(n+7){--ci-tile-d:1000ms}

/* —— 首页两张卡片：接在四块窗口导引磁贴之后，连成一条序列 —— */
.grid>.ci-tile:nth-child(1){--ci-tile-d:800ms}
.grid>.ci-tile:nth-child(2){--ci-tile-d:1000ms}
.grid>.ci-tile:nth-child(3){--ci-tile-d:1000ms}
.grid>.ci-tile:nth-child(n+4){--ci-tile-d:1000ms}

/* —— 桌面端（以及任何未被 device.js 干预的环境）—— */
.portalgrid>.portal,
.tilerow>.idbar,
.tilerow>.cointile,
.tiletwo>.card,
.grid>.ci-tile{
  animation-name:ciTileIn;
  animation-duration:1s;
  animation-timing-function:cubic-bezier(.22,.88,.3,1.03);
  animation-fill-mode:backwards;
  animation-delay:var(--ci-tile-d,0ms);
  -webkit-animation-name:ciTileIn;
  -webkit-animation-duration:1s;
  -webkit-animation-timing-function:cubic-bezier(.22,.88,.3,1.03);
  -webkit-animation-fill-mode:backwards;
  -webkit-animation-delay:var(--ci-tile-d,0ms);
}

/* —— 手机端例外 ——
   device.js 的 `html.cihang-mobile *{animation:none!important}` 特异性为 (0,1,1)，
   下列规则为 (0,2,1) 且同为 !important，故手机端这批磁贴照常依次入场；
   延迟仍取上面的 --ci-tile-d（自定义属性不受 animation 简写复位影响）。 */
html.cihang-mobile .portalgrid>.portal,
html.cihang-mobile .tilerow>.idbar,
html.cihang-mobile .tilerow>.cointile,
html.cihang-mobile .tiletwo>.card,
html.cihang-mobile .grid>.ci-tile{
  animation-name:ciTileIn!important;
  animation-duration:1s!important;
  animation-timing-function:cubic-bezier(.22,.88,.3,1.03)!important;
  animation-fill-mode:backwards!important;
  animation-delay:var(--ci-tile-d,0ms)!important;
  -webkit-animation-name:ciTileIn!important;
  -webkit-animation-duration:1s!important;
  -webkit-animation-timing-function:cubic-bezier(.22,.88,.3,1.03)!important;
  -webkit-animation-fill-mode:backwards!important;
  -webkit-animation-delay:var(--ci-tile-d,0ms)!important;
}

/* —— 尊重「减少动态效果」：不播入场，磁贴直接到位 ——
   放在文件最后，手机端与上面的例外同为 (0,2,1) 且都标 !important，按后到者胜出。 */
@media (prefers-reduced-motion:reduce){
  .portalgrid>.portal,
  .tilerow>.idbar,
  .tilerow>.cointile,
  .tiletwo>.card,
  .grid>.ci-tile,
  html.cihang-mobile .portalgrid>.portal,
  html.cihang-mobile .tilerow>.idbar,
  html.cihang-mobile .tilerow>.cointile,
  html.cihang-mobile .tiletwo>.card,
  html.cihang-mobile .grid>.ci-tile{
    animation:none!important;
    -webkit-animation:none!important;
  }
}