/* ============================================================
   爱上水果 · 开启仪式  ceremony.css
   ------------------------------------------------------------
   · 依赖：index.html 头部设置的 --fx-accent（随主题变色）
   · 编排：光环描边 → logo 浮现 → 逐字标题 → 副标题 → 光束 → 掀幕
   · 登录页瀑布式错峰入场；reduced-motion 自动降级
   ============================================================ */

/* ---------- 舞台强制可见（覆盖 app.js 提前收起） ---------- */
#splash.fx-ceremony {
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
  overflow: hidden;
  transition: opacity .45s ease, visibility .45s ease, transform .45s ease, filter .45s ease;
}

/* ---------- Logo 容器 + 光环 ---------- */
#splash .fx-logo-wrap {
  position: relative;
  display: inline-block;
}
#splash .fx-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#splash.fx-ceremony .fx-ring circle {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: fxRingDraw .9s cubic-bezier(0.2, 0, 0, 1) forwards;
  filter: drop-shadow(0 0 8px var(--fx-accent));
}
@keyframes fxRingDraw { to { stroke-dashoffset: 0; } }

#splash.fx-ceremony .fx-logo-wrap img {
  animation: fxLogoIn .8s cubic-bezier(0.2, 0, 0, 1) .25s both;
}
@keyframes fxLogoIn {
  from { opacity: 0; transform: scale(.68); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ---------- 逐字标题（宽字距收缩 定格：高端书法式入场） ---------- */
#splash.fx-ceremony .splash-title {
  font-size: clamp(30px, 8vw, 46px);
  letter-spacing: .55em;
  text-indent: .55em;
  margin-top: 20px;
  white-space: nowrap;
  opacity: 0;
  animation: fxTrack 1.25s cubic-bezier(0.2, 0, 0, 1) .8s both;
}
@keyframes fxTrack {
  from { opacity: 0; letter-spacing: .55em; filter: blur(5px); }
  to   { opacity: 1; letter-spacing: .18em; filter: blur(0); }
}
#splash.fx-ceremony .splash-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  background: linear-gradient(180deg, #ffffff 42%, var(--fx-char-end, #EDE7DC));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxCharIn .55s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(.95s + var(--i) * .07s);
}
@keyframes fxCharIn {
  to { opacity: 1; transform: none; }
}

/* ---------- 环绕卫星光点 ---------- */
#splash .fx-orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: fxOrbitSpin 2.6s linear infinite;
}
#splash .fx-orbit::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px var(--fx-accent);
}
@keyframes fxOrbitSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- 副标题 ---------- */
#splash.fx-ceremony .splash-sub {
  opacity: 0;
  letter-spacing: .3em;
  text-indent: .3em;
  animation: fxFadeIn .6s ease 1.55s both;
}
@keyframes fxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 光束扫过 ---------- */
#splash .fx-beam {
  position: absolute;
  top: -20%; left: -30%;
  width: 45%; height: 140%;
  background: linear-gradient(100deg, transparent, var(--fx-accent), var(--fx-accent2, var(--fx-accent)), transparent);
  opacity: .12;
  transform: skewX(-18deg);
  pointer-events: none;
}
#splash.fx-ceremony .fx-beam {
  animation: fxBeam .7s ease-in-out 1.85s both;
}
@keyframes fxBeam {
  from { transform: skewX(-18deg) translateX(0); }
  to   { transform: skewX(-18deg) translateX(430%); }
}

/* ---------- 跳过提示 ---------- */
#splash .fx-skiphint {
  position: absolute;
  bottom: 26px; left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .38);
  font-size: 12px;
  letter-spacing: .24em;
  opacity: 0;
  animation: fxFadeIn .5s ease 1.15s both;
  pointer-events: none;
}

/* ---------- 掀幕 ---------- */
#splash.fx-ceremony.fx-lift {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(4px);
}

/* ---------- 登录页瀑布式入场 ---------- */
body.fx-entered:not(.fx-instant) .login-brand .logo,
body.fx-entered:not(.fx-instant) .login-brand h1,
body.fx-entered:not(.fx-instant) .login-brand .sys,
body.fx-entered:not(.fx-instant) .login-brand .slogan,
body.fx-entered:not(.fx-instant) .login-brand .points div,
body.fx-entered:not(.fx-instant) .login-card {
  opacity: 0;
  animation: fxEnter .65s cubic-bezier(0.2, 0, 0, 1) both;
}
body.fx-entered:not(.fx-instant) .login-brand .logo        { animation-delay: .05s; }
body.fx-entered:not(.fx-instant) .login-brand h1           { animation-delay: .13s; }
body.fx-entered:not(.fx-instant) .login-brand .sys         { animation-delay: .21s; }
body.fx-entered:not(.fx-instant) .login-brand .slogan      { animation-delay: .29s; }
body.fx-entered:not(.fx-instant) .login-brand .points div:nth-child(1) { animation-delay: .37s; }
body.fx-entered:not(.fx-instant) .login-brand .points div:nth-child(2) { animation-delay: .44s; }
body.fx-entered:not(.fx-instant) .login-brand .points div:nth-child(3) { animation-delay: .51s; }
body.fx-entered:not(.fx-instant) .login-card               { animation-delay: .24s; animation-name: fxEnterCard; }
@keyframes fxEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fxEnterCard {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 无障碍：减弱动态效果时全部降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  #splash .fx-ring,
  #splash .fx-beam,
  #splash .fx-orbit,
  #splash .fx-skiphint { display: none !important; }
  #splash.fx-ceremony .splash-title .char,
  #splash.fx-ceremony .fx-logo-wrap img,
  #splash.fx-ceremony .splash-sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.fx-entered:not(.fx-instant) .login-brand .logo,
  body.fx-entered:not(.fx-instant) .login-brand h1,
  body.fx-entered:not(.fx-instant) .login-brand .sys,
  body.fx-entered:not(.fx-instant) .login-brand .slogan,
  body.fx-entered:not(.fx-instant) .login-brand .points div,
  body.fx-entered:not(.fx-instant) .login-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}