/* animations.css —— 全站的动作谱·让静态画活过来（8/6 第一轮·世界呼吸·贵气版）
   贵的秘诀：慢、柔、幅度小、光在表面上流。
   客人的系统开了减弱动效，全站立刻安静。*/

/* ===== 大门·天空慢慢走（电影级缓慢推移） ===== */
.hero { background: none; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center top / cover;
  animation: sky-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sky-drift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.08) translateY(-1.5%); }
}

/* ===== 大标题·呼吸微光 + 数码故障闪（8/6 梨亲设） =====
   平时慢慢呼吸；每 8 秒，红蓝两个影子替身闪出来抖零点几秒，
   像老屏幕信号抽了一下，标题本人一寸不挪。*/
.hero-title { position: relative; animation: title-glow 5.5s ease-in-out infinite; }
@keyframes title-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45)); }
}
.hero-title::before, .hero-title::after {
  content: 'YUAILOVE';
  position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
.hero-title::before { color: rgba(255, 60, 120, 0.85); animation: glitch-pink 8s linear infinite, ghost-hue 6s linear infinite; }
.hero-title::after { color: rgba(80, 240, 255, 0.85); animation: glitch-cyan 8s linear infinite, ghost-hue 6s linear infinite reverse; }
@keyframes ghost-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}
@keyframes glitch-pink {
  0%, 90%, 96%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  92% { opacity: 0.8; transform: translateX(4px); clip-path: inset(18% 0 42% 0); }
  94% { opacity: 0.8; transform: translateX(-3px); clip-path: inset(58% 0 12% 0); }
}
@keyframes glitch-cyan {
  0%, 90%, 96%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  92% { opacity: 0.8; transform: translateX(-4px); clip-path: inset(48% 0 20% 0); }
  94% { opacity: 0.8; transform: translateX(3px); clip-path: inset(8% 0 62% 0); }
}

/* ===== 大标题·字母挨个弹性登场（8/6 梨亲设·贵气版） =====
   八个字母一个接一个从底下弹上来，每个都弹过头一点点再坐稳，
   弹性曲线 cubic-bezier(0.34, 1.56, 0.64, 1)，回弹那一下就是贵。
   客人晕动（减弱动效）就老实直接显示，不藏不弹。*/
@media (prefers-reduced-motion: no-preference) {
  .hero-title .ht-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px) scale(0.6);
    animation:
      letter-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
      letter-wave 2.8s ease-in-out infinite;
  }
  .hero-title .ht-letter:nth-child(1) { animation-delay: 0.10s, 1.70s; }
  .hero-title .ht-letter:nth-child(2) { animation-delay: 0.18s, 2.05s; }
  .hero-title .ht-letter:nth-child(3) { animation-delay: 0.26s, 2.40s; }
  .hero-title .ht-letter:nth-child(4) { animation-delay: 0.34s, 2.75s; }
  .hero-title .ht-letter:nth-child(5) { animation-delay: 0.42s, 3.10s; }
  .hero-title .ht-letter:nth-child(6) { animation-delay: 0.50s, 3.45s; }
  .hero-title .ht-letter:nth-child(7) { animation-delay: 0.58s, 3.80s; }
  .hero-title .ht-letter:nth-child(8) { animation-delay: 0.66s, 4.15s; }
}
@keyframes letter-pop {
  0% { opacity: 0; transform: translateY(18px) scale(0.6); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 字母波浪：登场落定后接管，八个字母错开节奏此起彼伏，一直动 */
@keyframes letter-wave {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

/* ===== 大标题·电子显像管（8/6 梨亲设·一直动版） =====
   整行标题罩一层老式显像管的扫描线，贴着字面慢慢往下爬。
   （扫过整行的那条光带 8/6 梨拍板拆了，嫌它抢戏）*/
.hero-title-wrap::before {
  content: '';
  position: absolute; inset: -12px 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(160, 220, 255, 0.06) 3px 4px);
  animation: scan-drift 2s linear infinite;
  pointer-events: none;
}
@keyframes scan-drift {
  from { background-position: 0 0; }
  to { background-position: 0 4px; }
}
/* ===== 黄字条·吊牌轻晃 + 打字光标（8/6 梨亲设） =====
   像挂在门口的小吊牌，绕着顶边轻轻荡；尾巴后面跟一只一眨一眨的打字光标。
   居中那半步写进每一帧里，位置一寸不挪。*/
.hero-note { transform-origin: top center; animation: note-enter 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) 1.7s forwards, note-sway 6s ease-in-out 2.4s infinite; }
@keyframes note-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(1.4deg); }
  75% { transform: translateX(-50%) rotate(-1.4deg); }
}
.hero-note::after {
  content: '▍';
  margin-left: 5px;
  animation: caret-blink 1.2s steps(1) infinite;
}
@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes note-enter {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* 大门出场顺序（8/6 梨亲排）：标题先弹完 → 黄字条 → 进入按钮。
   后两位先藏好等点名，晕动的客人直接全看见。*/
@media (prefers-reduced-motion: no-preference) {
  .hero-note, .start-btn { opacity: 0; }
}

/* ===== 进入按钮·贵气流光 + 呼吸光晕 + 轻轻浮沉（8/6 梨亲设） ===== */
.start-btn { overflow: hidden; animation: btn-enter 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) 2.3s forwards, btn-glow 3.6s ease-in-out infinite, btn-float 3.6s ease-in-out 3.0s infinite; }
.start-btn::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 4.8s ease-in-out infinite;
}
@keyframes btn-glow {
  0%, 100% { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5), 0 0 0 rgba(255, 244, 90, 0); }
  50% { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 244, 90, 0.45); }
}
@keyframes btn-shine {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}
@keyframes btn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes btn-enter {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== 小机器人·会眨眼 + 摸它抖耳朵 ===== */
.btn-pet::before, .mini-pet::before {
  transform-origin: center;
  animation: pet-blink 4.6s ease-in-out infinite;
}
@keyframes pet-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}
.start-btn:hover .btn-pet::after, .mini-pet:hover::after {
  animation: ear-wiggle 0.5s ease-in-out;
}
@keyframes ear-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

/* ===== 关于梨·星空眨眼（两层星图错着节奏闪） ===== */
.stars { animation: stars-breathe 7s ease-in-out infinite; }
.stars::after {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.6;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><rect x="60" y="90" width="4" height="4" fill="white"/><rect x="200" y="50" width="4" height="4" fill="white"/><rect x="130" y="190" width="4" height="4" fill="white"/><rect x="230" y="150" width="4" height="4" fill="white"/></svg>') repeat;
  animation: stars-breathe 9s ease-in-out infinite reverse;
}
@keyframes stars-breathe {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* ===== 地球·真球（8/6 画布版） =====
   地球由 js/earth.js 画在画布上：球面投影、陆地贴球转、边缘自然压扁。
   这里只管圆窗和光晕，光自由化进黑夜没有框。*/
.earth { overflow: hidden; }

/* 光晕·跟地球焊死（8/6 梨亲设·第二版）：以前单独画一个蓝圆躲在球背后，
   球和光是两家，球一动光就在原地漏馅；现在改成地球自己的影子光，
   光长在地球身上，地球走到哪光跟到哪，天荒地老不分家。
   光色跟梨定的光晕 #bccff5 同款，大小随便拧下面两个数。
   圆窗照旧裁圆，球底照旧交给关于梨这一屏自己的底边裁（天生的地平线）。*/
.earth-wrapper { overflow: visible; }
.earth { box-shadow: 0 0 16px 5px rgba(188, 207, 245, 0); transition: box-shadow 1.4s ease 0.8s; } /* 星球先露面站稳，光晕晚一拍再晕开（8/6 梨亲设） */
.earth.glow-on { box-shadow: 0 0 16px 5px rgba(188, 207, 245, 0.85); } /* 星球真的露面才点亮（earth.js 里星球就绪才盖 glow-on 章） */
.earth canvas { filter: saturate(1.15) brightness(0.95); } /* 8/6 数码风滤镜·只罩画布，别跟影子光挤一个涂层（梨定：饱和115明度95，色相0对比100等于没动就不写） */

/* ===== 第二页·星球登场编排（8/6 梨亲导·一口钟定序版） =====
   全场只有一口钟：关于梨这一屏滚进屏幕上半区的那一秒，叫 T。
   T+0.0 我们是谁的问号出场；T+0.6 第一行字出场，星球同时开始边转边回家；
   T+1.4 第二行；T+2.2 第三行落定，T+3.0 星球同时落定，两个一起停；
   T+3.5 右边解释的话最后出场。慢，弹性，没有一根直线。
   所有初始状态挂在 js 标记上：哨兵不在岗，全部直接可见，绝不空屏。*/
.about .about-title { position: relative; z-index: 2; }
.js .about .about-title, .js .about .tl-line, .js .about .text-right {
  opacity: 0;
  transform: translateX(-30px);
}
.js .about .text-right { transform: translateX(30px); }
.js .about .earth-wrapper {
  transform: translateX(-50%) translate(100%, -35%) scale(1.8);
}
.about.aos-animate .about-title {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.about.aos-animate .tl-line {
  opacity: 1; transform: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.about.aos-animate .tl-line-1 { transition-delay: 0.6s; }
.about.aos-animate .tl-line-2 { transition-delay: 1.4s; }
.about.aos-animate .tl-line-3 { transition-delay: 2.2s; }
.about.aos-animate .earth-wrapper {
  transform: translateX(-50%) translate(0, 0) scale(1);
  transition: transform 3.5s cubic-bezier(0.37, 0, 0.31, 1) 1.15s; /* 一个方向的慢刹车·先等出场那下快速旋转走完（1.15 秒）再启程 */
}
.about.aos-animate .text-right {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease 3.0s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.0s;
}
@media (max-width: 768px) {
  /* 手机版星球：从更高、更大的样子落回中段现在的大小（8/6 傍晚梨亲定·重做版）。
     起步 2.8 倍、站在更上面偏右（45%, -320%），一路转一路收，落回中段 1.6 倍坐定，
     方向是从更大变到现在这么大。起点左右拧 45，高度拧 320，起步倍数拧 2.8，终点没动 */
  .js .about .earth-wrapper { transform: translateX(-50%) translate(45%, -320%) scale(2.8); }
  .about.aos-animate .earth-wrapper { transform: translateX(-50%) translate(30%, -170%) scale(1.6); }
}

/* ===== 减弱动效开关·客人晕动就全站安静 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}