/* 每日欢迎开屏 R11「1.5 倍流转后定格退模糊」（2026-09-15 接入，替换旧星河—地球—季节序列）。
   时间轴（HANDOFF 契约）：长卷 2254ms 到位（保留 19px 模糊）→ 3775ms 背景/时间全清晰 →
   3875ms 天气、3935ms 日期显现 → 4700ms 可交互。reduced-motion 直接最终态。 */
.welcome-is-active { overflow: hidden; }
.welcome-opening[hidden] { display: none !important; }
.welcome-opening {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  color: #f5f7f4;
  background: #0d1a1e;
  opacity: 1;
  isolation: isolate;
  cursor: default;
  transition: opacity .5s ease, visibility .5s ease;
}
.welcome-opening:focus { outline: none; }
.welcome-opening.is-leaving { opacity: 0; visibility: hidden; }
.welcome-scene { position: absolute; inset: 0; overflow: hidden; background: #0d1a1e; }

/* 长卷：200% 宽单向流转，最终停在 translate3d(-50%,0,0)（右侧 2560×1440 = V1 秋季画面） */
.panorama-scene {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  opacity: 1;
  user-select: none;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.panorama-scene.is-broken { display: none; }

/* ── R11 时间轴（variant-blur-settle-1-5x） ── */
.welcome-opening.is-playing .panorama-scene {
  animation: blur-settle-1-5x-panorama 3775ms linear both;
}
.welcome-opening.is-playing .welcome-time {
  animation: blur-settle-1-5x-time 3775ms linear both;
}
.welcome-opening.is-playing .welcome-weather {
  animation: welcome-meta-top 600ms cubic-bezier(.20, .78, .24, 1) 3875ms both;
}
.welcome-opening.is-playing .welcome-date {
  animation: welcome-meta-bottom 600ms cubic-bezier(.20, .78, .24, 1) 3935ms both;
}
.welcome-opening.is-loading .panorama-scene,
.welcome-opening.is-loading .welcome-time,
.welcome-opening.is-loading .welcome-weather,
.welcome-opening.is-loading .welcome-date { opacity: 0; }
/* 显式最终态：跳过/加载兜底/reduced-motion 都停在同一画面，不回长卷起点 */
.welcome-opening.is-final .panorama-scene {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  filter: none;
  animation: none;
}
.welcome-opening.is-final .welcome-time { opacity: 1; filter: none; animation: none; }
.welcome-opening.is-final .welcome-weather,
.welcome-opening.is-final .welcome-date { opacity: 1; filter: none; animation: none; }

@keyframes blur-settle-1-5x-panorama {
  0% { opacity: .70; filter: blur(52px) saturate(.80) brightness(1.10); transform: translate3d(0, 0, 0); }
  9.5% { opacity: .77; filter: blur(46px) saturate(.83) brightness(1.08); transform: translate3d(-15%, 0, 0); }
  21.6% { opacity: .84; filter: blur(39px) saturate(.86) brightness(1.07); transform: translate3d(-29%, 0, 0); }
  35.5% { opacity: .90; filter: blur(31px) saturate(.90) brightness(1.05); transform: translate3d(-41%, 0, 0); }
  47.6% { opacity: .95; filter: blur(24px) saturate(.93) brightness(1.04); transform: translate3d(-47.5%, 0, 0); }
  59.7% { opacity: .97; filter: blur(19px) saturate(.95) brightness(1.03); transform: translate3d(-50%, 0, 0); }
  72.7% { opacity: .98; filter: blur(13px) saturate(.97) brightness(1.02); transform: translate3d(-50%, 0, 0); }
  87% { opacity: .99; filter: blur(6px) saturate(.99) brightness(1.01); transform: translate3d(-50%, 0, 0); }
  100% { opacity: 1; filter: blur(0) saturate(1) brightness(1); transform: translate3d(-50%, 0, 0); }
}
@keyframes blur-settle-1-5x-time {
  0% { opacity: .13; filter: blur(36px); }
  14.7% { opacity: .21; filter: blur(32px); }
  32% { opacity: .34; filter: blur(26px); }
  48.5% { opacity: .52; filter: blur(19px); }
  59.7% { opacity: .65; filter: blur(14px); }
  72.7% { opacity: .78; filter: blur(9px); }
  87% { opacity: .90; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes welcome-meta-top {
  0% { opacity: 0; filter: blur(8px); transform: translate(-50%, 10px); }
  100% { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
}
@keyframes welcome-meta-bottom {
  0% { opacity: 0; filter: blur(8px); transform: translate(-50%, -10px); }
  100% { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
}

/* ── 加载指示 ── */
.welcome-loader {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-top-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  opacity: 0;
  animation: welcome-spin 1s linear infinite;
  transition: opacity .23s;
}
.welcome-opening.is-loading .welcome-loader { opacity: 1; }
@keyframes welcome-spin { to { transform: rotate(360deg); } }

/* ── 信息层（对齐 R11 原型：巨大细体时间 + 大号纯文本天气/日期，无装饰框） ── */
.welcome-time {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Segoe UI Light", "Microsoft YaHei UI Light", "Microsoft YaHei", sans-serif;
  font-size: min(34.4vw, 76vh);
  font-weight: 300;
  line-height: .80;
  letter-spacing: -.052em;
  font-variant-numeric: tabular-nums lining-nums;
  color: #f7f3e9;
  white-space: nowrap;
  text-shadow:
    0 .018em .035em rgba(5, 17, 25, .72),
    0 .045em .10em rgba(5, 17, 25, .48);
  will-change: opacity, filter;
}
.welcome-weather {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 96vw;
  font-size: clamp(22px, 2.05vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  color: #f7f3e9;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 3px 10px rgba(5, 17, 25, .86),
    0 8px 26px rgba(5, 17, 25, .60);
}
.welcome-date {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 96vw;
  font-size: clamp(22px, 2.05vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  color: #f7f3e9;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 3px 10px rgba(5, 17, 25, .86),
    0 8px 26px rgba(5, 17, 25, .60);
}

/* 键盘提示与备案样式见下方终态区块 */

/* ── 终态左右热区与滑出面板（2026-09-16：取代原计划选择页） ── */
.welcome-hotzone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25vw;
  z-index: 6;
  display: none;
}
.hot-left { left: 0; }
.hot-right { right: 0; }
.welcome-opening.is-final .welcome-hotzone { display: block; }

/* 边缘常显竖排提示（终态淡入，悬停对应热区时高亮） */
.welcome-edge {
  position: absolute;
  z-index: 8;
  top: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .3em;
  color: rgba(247, 243, 233, .55);
  text-shadow: 0 2px 10px rgba(5, 17, 25, .8);
  opacity: 0;
  transition: opacity .8s .4s ease, color .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.edge-left { left: 10px; transform: translateY(-50%); }
.edge-right { right: 10px; transform: translateY(-50%); }
.welcome-opening.is-final .welcome-edge { opacity: 1; }
.hot-left:hover ~ .edge-left { color: rgba(247, 243, 233, .95); }
.hot-right:hover ~ .edge-right { color: rgba(247, 243, 233, .95); }

.welcome-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40vw;
  min-width: 300px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 8vh 4vw;
  color: #f7f3e9;
  background: rgba(10, 24, 30, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform .38s cubic-bezier(.22, .72, .24, 1), opacity .3s ease, visibility .3s;
  text-shadow: 0 2px 14px rgba(5, 17, 25, .72);
}
.panel-work { left: 0; transform: translateX(-100%); border-left: 0; border-radius: 0 18px 18px 0; }
.panel-study { right: 0; transform: translateX(100%); border-right: 0; border-radius: 18px 0 0 18px; text-align: right; }
/* 热区与其面板两两相邻（HTML 顺序：hot-left + panel-work、hot-right + panel-study） */
.hot-left:hover + .panel-work,
.panel-work:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.hot-right:hover + .panel-study,
.panel-study:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.welcome-panel:hover .wp-cta { letter-spacing: .3em; }
.wp-eyebrow { margin: 0; font-size: clamp(10px, .8vw, 13px); letter-spacing: .34em; opacity: .66; }
.wp-title { margin: 0; font-size: clamp(30px, 3.4vw, 52px); font-weight: 300; letter-spacing: .1em; }
.wp-desc { margin: 0; font-size: clamp(13px, 1.1vw, 17px); line-height: 1.9; opacity: .88; }
.wp-tags { margin: 0; font-size: clamp(11px, .85vw, 14px); letter-spacing: .12em; opacity: .6; }
.wp-cta { margin: 10px 0 0; font-size: clamp(14px, 1.2vw, 19px); letter-spacing: .22em; transition: letter-spacing .3s ease; }

/* 键盘提示与备案（终态显示） */
.welcome-hint {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 40px);
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(11px, .9vw, 14px);
  letter-spacing: .24em;
  color: rgba(247, 243, 233, .6);
  text-shadow: 0 2px 12px rgba(5, 17, 25, .8);
  opacity: 0;
  transition: opacity .8s .3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.welcome-beian {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(247, 243, 233, .55);
  text-shadow: 0 1px 8px rgba(5, 17, 25, .8);
  opacity: 0;
  transition: opacity .8s .3s ease;
  pointer-events: auto;
  white-space: nowrap;
}
.welcome-beian a { color: rgba(247, 243, 233, .55); text-decoration: none; }
.welcome-beian a + a { margin-left: 12px; }
.welcome-beian a:hover { text-decoration: underline; }
.welcome-opening.is-final .welcome-hint { opacity: 1; }
.welcome-opening.is-final .welcome-beian { opacity: 1; }

@media (max-width: 640px) {
  .date, .welcome-date { font-size: clamp(16px, 3.2vw, 34px); }
  .welcome-weather { font-size: clamp(16px, 3.2vw, 34px); }
  /* 触屏无 hover：终态常显两个入口面板（各 44vw） */
  .welcome-panel { width: 46vw; min-width: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; padding: 6vh 3vw; border-radius: 14px; top: auto; height: 40vh; bottom: 12vh; justify-content: flex-end; background: rgba(10, 24, 30, .48); }
  .panel-work { left: 2vw; }
  .panel-study { right: 2vw; }
  .wp-title { font-size: 20px; }
  .wp-desc { display: none; }
  .wp-tags { display: none; }
  .welcome-hint { display: none; }
  .welcome-edge { display: none; }
  .welcome-beian { bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-opening *,
  .welcome-opening *::before,
  .welcome-opening *::after { animation: none !important; transition-duration: .01ms !important; }
}