@charset "UTF-8";
/* ============================================================
   宠派π · 加载动画 v2 ——「π：无限不循环的爱」
   黑底 / 白墨 / 品牌金点缀；SVG + Canvas，零第三方依赖
   规则顺序：基础与降级 → 组件 → 响应式 → 无障碍
   时间轴总长 4.2s，3.3s 起收束（与 preloader.js 中的常量保持一致）
   ============================================================ */

:root {
  --pl-gold: #eadaaf;
  --pl-ease: cubic-bezier(.16, .84, .28, 1);
  --pl-ease-soft: cubic-bezier(.33, 0, .2, 1);
  --pl-emblem: clamp(188px, 25vmin, 296px);
}

/* 未启用（JS 禁用 / 本会话已看过 / 降低动效）时，预加载层与主体隐藏规则都不存在 */
#preloader { display: none; }

.pl-active {
  overflow: hidden;
}

.pl-active #preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 46%, #121212 0%, #080808 42%, #000 76%);
  opacity: 1;
  transition: opacity 1.1s var(--pl-ease-soft), transform 1.1s var(--pl-ease-soft), filter 1.1s var(--pl-ease-soft);
}

.pl-active #preloader.is-hidden {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(10px);
  pointer-events: none;
}

/* 主内容自下方轻柔浮起进入，与 preloader 的推入形成延续，而非生硬淡入 */
.pl-active #plMain {
  opacity: 0;
  transform: translateY(28px);
}
.pl-active #plMain.is-entered {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s var(--pl-ease-soft), transform 1.1s var(--pl-ease-soft);
}

/* ===== 背景层 1：太极粒子（粒子从四周汇聚拼出阴阳鱼） ===== */
.pl-field {
  position: absolute;
  top: -90px;
  left: -90px;
  width: calc(100% + 180px);
  height: calc(100% + 180px);
  opacity: 0;
  pointer-events: none;
  /* 中心完整显示，仅边缘轻微消隐，避免把太极挖空 */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, .9) 82%, rgba(0, 0, 0, 0) 96%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, .9) 82%, rgba(0, 0, 0, 0) 96%);
  animation: pl-field-in 1.8s ease-out .1s forwards;
}

@keyframes pl-field-in { to { opacity: 1; } }

/* ===== 背景层 2：胶片颗粒 ===== */
.pl-grain {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: pl-grain .9s steps(3, end) infinite;
}

@keyframes pl-grain {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-2%, 1.6%, 0); }
  66%  { transform: translate3d(1.6%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ===== 中景：圆 + π + 展开尺 ===== */
.pl-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.2vh, 38px);
}

.pl-emblem {
  position: relative;
  width: var(--pl-emblem);
  height: var(--pl-emblem);
  perspective: 900px;
}

.pl-emblem__tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.pl-ring {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pl-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, .11);
  stroke-width: 1;
  animation: pl-track 5.5s ease-in-out infinite;
}

@keyframes pl-track {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

.pl-ring__draw {
  fill: none;
  stroke: #fff;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 930 930;
  stroke-dashoffset: 930;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .32));
  animation: pl-ring-draw 1.35s cubic-bezier(.62, .03, .28, 1) .18s forwards;
}

@keyframes pl-ring-draw { to { stroke-dashoffset: 0; } }

.pl-ring__wave {
  fill: none;
  stroke: rgba(234, 218, 175, .6);
  stroke-width: 1;
  opacity: 0;
  transform-origin: 160px 160px;
}

#preloader.is-leaving .pl-ring__wave {
  animation: pl-wave 1.05s var(--pl-ease) forwards;
}

@keyframes pl-wave {
  0%   { opacity: 0;   transform: scale(.98); }
  18%  { opacity: .55; }
  100% { opacity: 0;   transform: scale(1.62); }
}

/* 巨大 π：衬线体才有笔画粗细对比，是"高级"的关键 */
.pl-pi {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", "Songti SC", STSong, serif;
  font-weight: 400;
  font-size: calc(var(--pl-emblem) * .66);
  line-height: 1;
  padding-bottom: .04em;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, var(--pl-gold) 50%, #fff 62%, #fff 100%);
  background-size: 300% 100%;
  background-position: 190% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: inset(102% 0 0 0);
  filter: blur(8px);
  opacity: 0;
  will-change: clip-path, filter, opacity, transform;
  animation:
    pl-pi-reveal 1s var(--pl-ease) .95s forwards,
    pl-pi-shine 1.7s var(--pl-ease) 1.7s forwards,
    pl-pi-breathe 4.6s ease-in-out 3s infinite;
}

@keyframes pl-pi-reveal {
  0%   { clip-path: inset(102% 0 0 0); filter: blur(8px); opacity: 0; }
  55%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    filter: blur(0);   opacity: 1; }
}

@keyframes pl-pi-shine { to { background-position: -60% 0; } }

@keyframes pl-pi-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.014); }
}

/* ===== 底部：进度线 ===== */

/* ===== Slogan：主文案，逐字浮现 + 金色高光扫过（字符由 preloader.js 拆分） ===== */
.pl-brand {
  margin-top: clamp(10px, 1.8vh, 20px);
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 400;
  letter-spacing: .14em;
  text-indent: .14em;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  /* 品牌金辉光，让 Slogan 在黑底中更醒目 */
  filter: drop-shadow(0 0 16px rgba(234, 218, 175, .35));
}

.pl-brand b {
  display: inline-block;
  font-weight: inherit;
  white-space: pre;
  /* 每字自带一道金色高光，落定时由金扫回白，更炫酷 */
  background: linear-gradient(102deg, #fff 0%, #fff 40%, var(--pl-gold) 52%, #fff 64%, #fff 100%);
  background-size: 260% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translateY(20px) scale(.8);
  filter: blur(7px);
  will-change: opacity, transform, filter, background-position;
  animation: pl-brand-char .72s var(--pl-ease) forwards;
}

@keyframes pl-brand-char {
  0%   { opacity: 0; transform: translateY(20px) scale(.8); filter: blur(7px); background-position: 150% 0; }
  55%  { opacity: 1; filter: blur(0); background-position: 28% 0; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); background-position: -45% 0; }
}

.pl-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.5vh;
  width: clamp(140px, 15vw, 190px);
  height: 1px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .13);
  overflow: hidden;
}

.pl-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(234, 218, 175, .3), var(--pl-gold));
  transform: scaleX(0);
  transform-origin: left center;
  animation: pl-meter 4.2s linear forwards;
}

@keyframes pl-meter { to { transform: scaleX(1); } }

/* ===== 收束 ===== */
#preloader.is-leaving .pl-core {
  opacity: 0;
  transform: translateY(-10px) scale(1.12);
  filter: blur(6px);
  transition: opacity .8s var(--pl-ease), transform .8s var(--pl-ease), filter .8s var(--pl-ease);
}

#preloader.is-leaving .pl-meter {
  opacity: 0;
  transition: opacity .6s var(--pl-ease);
}

#preloader.is-leaving .pl-field,
#preloader.is-leaving .pl-grain,
#preloader.is-leaving .pl-dot,
#preloader.is-leaving .pl-halo {
  opacity: 0;
  transition: opacity .6s var(--pl-ease);
}

/* 跳过提示 */
#preloader::after {
  content: "点击任意处跳过";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 2.8vh;
  text-align: center;
  font-size: 10px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: rgba(255, 255, 255, .22);
  opacity: 0;
  animation: pl-hint 1s ease-out 2.4s forwards;
}

@keyframes pl-hint { to { opacity: 1; } }

/* ===== 自制光标（仅精确指针） ===== */
.pl-dot,
.pl-halo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  will-change: transform;
}

.pl-dot {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--pl-gold);
  box-shadow: 0 0 16px rgba(234, 218, 175, .8);
}

.pl-halo {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 1px solid rgba(255, 255, 255, .4);
}

#preloader.pl-ready .pl-dot,
#preloader.pl-ready .pl-halo { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .pl-active #preloader { cursor: none; }
}

@media (hover: none), (pointer: coarse) {
  .pl-dot, .pl-halo { display: none; }
  #preloader::after { content: "轻触任意处跳过"; }
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  :root { --pl-emblem: clamp(150px, 44vmin, 224px); }
  .pl-core { gap: clamp(14px, 2.4vh, 24px); }
  .pl-copy__lead { font-size: 15px; letter-spacing: .5em; text-indent: .5em; }
  .pl-copy__note { font-size: 11px; margin-top: 12px; }
  .pl-stream__in { font-size: 9px; letter-spacing: .12em; }
  .pl-brand { font-size: clamp(17px, 5.2vw, 26px); letter-spacing: .1em; text-indent: .1em; }
  .pl-stream { bottom: 14vh; }
}

@media (max-width: 480px) {
  .pl-brand { font-size: clamp(15px, 5.6vw, 21px); letter-spacing: .06em; text-indent: .06em; }
  .pl-stream__in { font-size: 8px; letter-spacing: .08em; }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root { --pl-emblem: clamp(118px, 34vmin, 176px); }
  .pl-brand { font-size: clamp(14px, 3.4vh, 20px); }
  .pl-stream { bottom: 13vh; }
  .pl-brand { bottom: 8vh; }
  .pl-meter { bottom: 4.5vh; }
}

/* ===== 无障碍降级：CSS 层面兜底，JS 亦会直接跳过 ===== */
@media (prefers-reduced-motion: reduce) {
  .pl-active #preloader { display: none !important; }
  .pl-active #plMain { opacity: 1 !important; }
  .pl-active { overflow: visible; }
}