/* =========================================================================
   情绪天气 · 情绪气象台
   深色影院外壳 + 全屏 3D 天光
   ========================================================================= */

:root{
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",sans-serif;
  --mono:"Cascadia Mono","Consolas","SF Mono","Menlo",monospace;
  --display:"Bahnschrift","DIN Alternate","Arial Black",sans-serif;

  --bg:#05070a;
  --ink:#f4f6f8;
  --muted:rgba(244,246,248,.62);
  --faint:rgba(244,246,248,.38);
  --line:rgba(255,255,255,.12);
  --accent:#f2c14e;
  --accent-deep:#c78f2b;

  --pad:clamp(22px, 3.3vw, 52px);
}

body[data-emotion="joy"]{
  --accent:#f2c14e; --accent-deep:#c78f2b;
  --sky-1:#2f9ede; --sky-2:#7fcdf1; --sky-3:#e9f9ff;
  --sun-op:.95; --cloud-op:1; --cloud-filter:none; --cloud-speed:1;
  --tint:rgba(255,206,140,.07); --tint-blend:screen;
  --scene-sat:1.06; --scene-bri:1.02;
  --video-sat:1.02; --video-bri:1.01; --video-con:1.01; --video-hue:0deg;
}
body[data-emotion="anger"]{
  --accent:#d8503a; --accent-deep:#9e2f21;
  --sky-1:#232c38; --sky-2:#4b5460; --sky-3:#7d838a;
  --sun-op:.18; --cloud-op:1; --cloud-filter:brightness(.42) saturate(.55); --cloud-speed:.45;
  --tint:rgba(30,18,16,.34); --tint-blend:multiply;
  --scene-sat:.72; --scene-bri:.82;
  --video-sat:.60; --video-bri:.80; --video-con:1.12; --video-hue:-8deg;
}
body[data-emotion="sad"]{
  --accent:#7aa7cf; --accent-deep:#40688c;
  --sky-1:#6c8595; --sky-2:#9fb3bd; --sky-3:#d3dee2;
  --sun-op:.22; --cloud-op:.92; --cloud-filter:brightness(.78) saturate(.5); --cloud-speed:.6;
  --tint:rgba(52,72,92,.30); --tint-blend:multiply;
  --scene-sat:.78; --scene-bri:.9;
  --video-sat:.60; --video-bri:.78; --video-con:1.02; --video-hue:6deg;
}
body[data-emotion="shock"]{
  --accent:#b9d2ea; --accent-deep:#7d9ab6;
  --sky-1:#a8cbe0; --sky-2:#dceef8; --sky-3:#ffffff;
  --sun-op:.45; --cloud-op:.85; --cloud-filter:brightness(1.06) saturate(.4); --cloud-speed:.8;
  /* 雪街实拍本身就是粉蓝暮色，色罩只留一点空气感，别把天光洗白 */
  --tint:rgba(226,240,250,.16); --tint-blend:screen;
  --scene-sat:.96; --scene-bri:1.00;
  --video-sat:.42; --video-bri:1.00; --video-con:.98; --video-hue:-4deg;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2{font-weight:400}

/* ---------------- 场景：窗外晴天 ---------------- */
.scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#bfe6f7;
  pointer-events:none;
  filter:saturate(var(--scene-sat,1)) brightness(var(--scene-bri,1));
  transition:filter 1.2s ease;
}

.sky{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg,
    var(--sky-1) 0%,
    var(--sky-2) 54%,
    var(--sky-3) 100%);
  transition:background 1.2s ease;
}

/* 晴的首屏直接用实拍定格帧打底：视频接管前不再闪出旧的 CSS 云层
   （那层灰白模糊云和现在的影片天空完全不是一回事）。
   视频就绪后由 .has-video 淡入盖住，构图/色温与定格帧一致。 */
body[data-emotion="joy"] .sky{
  background-image:url(../assets/sky-poster.jpg),
    linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 54%,var(--sky-3) 100%);
  background-size:cover,cover;
  background-position:50% 58%,center;
  background-repeat:no-repeat,no-repeat;
}
body[data-emotion="joy"] .cloud-layer,
body[data-emotion="joy"] .sun,
body[data-emotion="joy"] .sky-glow{opacity:0;visibility:hidden}

.sky-glow{
  position:absolute;
  inset:-12%;
  background:
    linear-gradient(200deg, rgba(255,251,230,.50) 0%, rgba(255,248,216,.22) 24%, rgba(255,248,216,0) 56%),
    linear-gradient(0deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%);
  mix-blend-mode:screen;
  animation:skyGlow 15s ease-in-out infinite alternate;
}

.sun{
  position:absolute;
  right:16vw; top:9vh;
  width:min(36vw, 620px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,252,236,.96) 0%,
    rgba(255,245,209,.55) 26%,
    rgba(255,238,190,.18) 52%,
    rgba(255,236,180,0) 72%);
  filter:blur(2px);
  opacity:var(--sun-op,1);
  mix-blend-mode:screen;
  transition:opacity 1.2s ease;
  animation:sunPulse 9s ease-in-out infinite alternate;
}

/* 实拍动态晴空：云卷云舒（已做无缝循环）；雷暴用另一段实拍云雨 */
.sky-video,.sky-video--storm{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
  opacity:0;
  transform:scale(1.02);
  filter:saturate(var(--video-sat,1)) brightness(var(--video-bri,1))
         contrast(var(--video-con,1)) hue-rotate(var(--video-hue,0deg));
  transition:opacity 1.2s ease, filter 1.2s ease;
}
.sky-video--storm{
  object-position:50% 50%;
  transform:scale(1.03);
  filter:saturate(.90) brightness(1.06) contrast(1.02) hue-rotate(-4deg);
}

/* 喜·晴的 3D 太阳光晕：独立画布，位置由脚本按视频里的日盘逐帧对齐。
   画布在 .sky 内，随天空的指针视差/透视一起移动；screen 混合只加光，
   不会把视频里的云遮住。 */
.sky-sun{
  position:absolute;
  left:0; top:0;
  display:block;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity 1.1s ease;
  will-change:transform;
}
body[data-emotion="joy"].is-sky3d-ready .sky-sun{opacity:1}
body:not([data-emotion="joy"]) .sky-sun{opacity:0}

/* 竖屏：16:9 素材会被裁成窄条，把取景左移，让中景的太阳落进画面右侧 */
@media (max-width:720px){
  .sky-video{object-position:38% 56%}
  body[data-emotion="joy"] .sky{background-position:38% 56%,center}
}

/* 哀·雨：蓝调雨街插画。海报先兜底，视频就绪后淡入；
   .rain-depth 单独承接指针视差，给景深层留出位移余量。 */
.rain-depth{
  position:absolute;
  inset:0;
  transform:scale(1.08);
  transform-origin:50% 58%;
  will-change:transform;
}
.rain-poster{
  position:absolute;
  inset:0;
  background:url(../assets/rain-poster.jpg) 50% 58% / cover no-repeat;
  opacity:0;
  transition:opacity 1.1s ease;
}
.sky-video--rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
  opacity:0;
  filter:saturate(.94) brightness(.88) contrast(1.04) hue-rotate(-2deg);
  transition:opacity 1.1s ease;
}
body[data-emotion="sad"] .rain-poster{opacity:1}
body[data-emotion="sad"] .scene.is-rain-ready .sky-video--rain{opacity:1}

/* 惊·骤雪：暮色雪街。海报先兜底，视频就绪后淡入；
   视频片头 0.7s 从黑场淡入、片尾淡出，循环时接回黑场不跳帧。 */
.snow-depth{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}
body[data-emotion="shock"] .snow-depth{
  opacity:1;
  visibility:visible;
  transition:opacity 1.1s ease, visibility 0s;
}
.snow-poster{
  position:absolute;
  inset:0;
  background:url(../assets/snow-poster.jpg) 50% 50% / cover no-repeat;
}
.sky-video--snow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0;
  transform:scale(1.02);
  filter:saturate(1.02) brightness(1.00) contrast(1.03) hue-rotate(-2deg);
  transition:opacity 1.1s ease;
}
body[data-emotion="shock"] .scene.is-snow-ready .sky-video--snow{opacity:1}

.scene.has-video .sky-video{opacity:1}
body[data-emotion="anger"] .scene.is-storm-ready .sky-video{opacity:0}
body[data-emotion="anger"] .scene.is-storm-ready .sky-video--storm{opacity:1}
body[data-emotion="sad"] .scene .sky-video{opacity:0}
body[data-emotion="shock"] .scene .sky-video{opacity:0}
.scene.has-video .cloud-layer,
.scene.has-video .sun,
.scene.has-video .sky-glow{opacity:0;visibility:hidden;transition:opacity 1.2s ease, visibility 1.2s}

/* 云：两层，速度不同 */
.cloud-layer{
  position:absolute;
  inset:0;
  filter:var(--cloud-filter,none);
  transition:filter 1.2s ease;
}

.cloud{
  position:absolute;
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:var(--cloud-op,1);
  animation:cloudDrift linear infinite both;
  will-change:transform;
}

.cl-b1{background-image:url(../assets/cloud-1.png);width:34vw;height:10.9vw;top:13vh;animation-duration:170s;animation-delay:-52s}
.cl-b2{background-image:url(../assets/cloud-2.png);width:26vw;height:8.5vw;top:31vh;animation-duration:150s;animation-delay:-118s}
.cl-b3{background-image:url(../assets/cloud-3.png);width:30vw;height:9.7vw;top:21vh;animation-duration:190s;animation-delay:-20s}

.cl-f1{background-image:url(../assets/cloud-2.png);width:44vw;height:14.4vw;top:41vh;animation-duration:120s;animation-delay:-78s}
.cl-f2{background-image:url(../assets/cloud-1.png);width:36vw;height:11.5vw;top:56vh;animation-duration:140s;animation-delay:-30s}
.cl-f3{background-image:url(../assets/cloud-3.png);width:52vw;height:17vw;top:34vh;animation-duration:165s;animation-delay:-140s}

/* 玻璃反光 */
.sheen{
  position:absolute;
  inset:-25%;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:sheenMove 26s ease-in-out infinite alternate;
}
.sheen--a{
  background:linear-gradient(113deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.20) 42%,
    rgba(255,255,255,.02) 48%,
    rgba(255,255,255,.14) 57%,
    rgba(255,255,255,0) 66%);
}
.sheen--b{
  background:linear-gradient(72deg,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.10) 63%,
    rgba(255,255,255,0) 72%);
  animation-duration:34s;
  animation-direction:alternate-reverse;
}

/* 天气层 */
.weather-rain,.weather-snow{
  position:absolute;
  inset:-15%;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.1s ease;
}

.weather-rain{
  background-image:repeating-linear-gradient(102deg,
    rgba(236,248,255,.55) 0 1px,
    rgba(236,248,255,0) 1px 7px);
  background-size:auto 100%;
}
body[data-emotion="sad"] .weather-rain{
  opacity:.5;
  animation:rainFall .5s linear infinite;
}
/* 景深雨幕接管后，撤掉原来平铺的斜纹雨，避免两层雨打架；
   减少动态或脚本未启用时仍由这层做静态兜底。 */
body[data-emotion="sad"].is-rain-live .weather-rain{opacity:0}

.weather-snow{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1.3px, rgba(255,255,255,0) 2px),
    radial-gradient(circle, rgba(255,255,255,.8) 1px, rgba(255,255,255,0) 1.8px);
  background-size:72px 72px, 43px 43px;
  background-position:0 0, 17px 29px;
}
body[data-emotion="shock"] .weather-snow{
  opacity:.85;
  animation:snowFall 9s linear infinite;
}
/* 实拍雪街有真实的落雪后，撤掉原来平铺的雪点，避免两层雪打架；
   视频未就绪、减少动态或脚本未启用时仍由这层兜底。 */
body[data-emotion="shock"].is-snow-live .weather-snow{opacity:0}

/* 喜/怒的天空 3D 层：晴的日光浮尘、雷暴的环绕乌云。
   放在 .scene 之外、UI 之下；normal 混合让暗色乌云不会被 screen 吃掉。
   晴的太阳光晕不用这一层，见 .sky 内的 .sky-sun。 */
.sky-3d{
  position:fixed;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease;
}
body[data-emotion="joy"] .sky-3d,
body[data-emotion="anger"] .sky-3d{opacity:1}

/* 3D 云层接管后，旧 CSS 云/太阳退场，避免双层云打架；
   脚本停止或减少动态时移除 is-sky3d-ready，旧层自动兜底。 */
body.is-sky3d-ready[data-emotion="joy"] .cloud-layer,
body.is-sky3d-ready[data-emotion="joy"] .sun,
body.is-sky3d-ready[data-emotion="joy"] .sky-glow,
body.is-sky3d-ready[data-emotion="anger"] .cloud-layer,
body.is-sky3d-ready[data-emotion="anger"] .sun,
body.is-sky3d-ready[data-emotion="anger"] .sky-glow{
  opacity:0;
  visibility:hidden;
  transition:opacity 1.2s ease, visibility 1.2s;
}

/* 哀的近景空间雨：在 rain.js 的远景雨幕之前补一层带 z 深度的雨丝。
   与 rain-fx 同层，DOM 顺序在后，所以画在远景雨之上。 */
.rain-3d{
  position:fixed;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity 1s ease;
}
body[data-emotion="sad"] .rain-3d{opacity:1}

/* 雷暴雨幕：canvas 里所有雨点都向鼠标汇聚，移出画面后恢复普通落雨。
   放在 .scene 之外、UI 之下，免得被场景色罩和压暗层吃掉亮度。 */
.storm-rain{
  position:fixed;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity .9s ease;
}
body[data-emotion="anger"] .storm-rain{opacity:1}

/* 哀雨幕：多层景深雨丝 + 湿路面透视涟漪 + 点击水花。
   与雷暴雨幕同层，两个 canvas 互斥显隐，UI 仍在它们之上。 */
.rain-fx{
  position:fixed;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity .9s ease;
}
body[data-emotion="sad"] .rain-fx{opacity:1}

/* 惊雪幕：近景透视雪片层。视频自带远景落雪，这层补六角晶体、
   散景雪团和指针互动；与雨幕同层，UI 仍在它之上。 */
.snow-fx{
  position:fixed;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease;
}
body[data-emotion="shock"] .snow-fx{opacity:1}

.lightning{
  position:absolute;
  inset:0;
  background:rgba(226,238,255,.9);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
body[data-emotion="anger"] .lightning{animation:lightning 11s linear infinite}

/* 空气中的微尘 */
.motes{position:absolute;inset:0;overflow:hidden;opacity:.7}
.motes i{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 8px 2px rgba(255,255,255,.55);
  animation:moteFloat 21s linear infinite;
}
.motes i:nth-child(1){left:14%;top:78%;animation-delay:-3s;animation-duration:19s}
.motes i:nth-child(2){left:27%;top:62%;animation-delay:-11s;animation-duration:24s}
.motes i:nth-child(3){left:41%;top:88%;animation-delay:-7s;animation-duration:17s;width:2px;height:2px}
.motes i:nth-child(4){left:56%;top:70%;animation-delay:-15s;animation-duration:26s}
.motes i:nth-child(5){left:68%;top:84%;animation-delay:-5s;animation-duration:22s;width:2px;height:2px}
.motes i:nth-child(6){left:79%;top:58%;animation-delay:-18s;animation-duration:20s}
.motes i:nth-child(7){left:88%;top:74%;animation-delay:-9s;animation-duration:23s;width:2px;height:2px}
.motes i:nth-child(8){left:34%;top:48%;animation-delay:-13s;animation-duration:27s}

/* 情绪色罩 / 颗粒 */
.scene-tint{
  position:absolute;
  inset:0;
  background:var(--tint);
  mix-blend-mode:var(--tint-blend);
  opacity:.9;
  transition:background 1.1s ease, opacity 1.1s ease;
}
.scene-grain{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:170px 170px;
  opacity:.06;
  mix-blend-mode:overlay;
}

@keyframes cloudDrift{
  from{transform:translate3d(-46vw, 0, 0)}
  to{transform:translate3d(112vw, 0, 0)}
}
@keyframes skyGlow{
  from{opacity:.82;transform:scale(1)}
  to{opacity:1;transform:scale(1.04)}
}
@keyframes sunPulse{
  from{transform:scale(.96);opacity:calc(var(--sun-op,1) * .85)}
  to{transform:scale(1.05);opacity:var(--sun-op,1)}
}
@keyframes sheenMove{
  from{transform:translate3d(-3%, -1.5%, 0)}
  to{transform:translate3d(3%, 1.5%, 0)}
}
@keyframes rainFall{
  from{background-position:0 0}
  to{background-position:-60px 90px}
}
@keyframes snowFall{
  from{background-position:0 0, 17px 29px}
  to{background-position:72px 72px, -26px 96px}
}
@keyframes lightning{
  0%, 91%, 100%{opacity:0}
  92%{opacity:.55}
  93%{opacity:.04}
  94%{opacity:.4}
  95%{opacity:0}
}
@keyframes moteFloat{
  0%{transform:translate3d(0, 4vh, 0);opacity:0}
  12%{opacity:.85}
  78%{opacity:.7}
  100%{transform:translate3d(4vw, -34vh, 0);opacity:0}
}

/* ---------------- 压暗 ---------------- */
.scrim{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(4,18,28,.58) 0%,
      rgba(4,18,28,.34) 18%,
      rgba(4,18,28,.08) 38%,
      rgba(4,18,28,0) 58%,
      rgba(4,18,28,.22) 100%),
    linear-gradient(180deg,
      rgba(4,15,22,.66) 0%,
      rgba(4,15,22,.26) 9%,
      rgba(4,15,22,0) 20%,
      rgba(4,15,22,0) 60%,
      rgba(4,15,22,.22) 74%,
      rgba(4,15,22,.78) 91%,
      #05070a 100%);
  transition:opacity 1.4s ease;
}
body.is-entered .scrim{opacity:.9}

/* 标题区脚下的一团柔影，保证白字压得住天光 */
.hero::before{
  content:"";
  position:absolute;
  left:calc(var(--pad) * -1);
  bottom:-14vh;
  width:64vw;
  height:66vh;
  pointer-events:none;
  background:radial-gradient(58% 62% at 26% 66%, rgba(4,16,24,.62), rgba(4,16,24,0) 72%);
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:6;
  display:flex;
  align-items:center;
  gap:clamp(24px, 4vw, 60px);
  padding:clamp(20px, 2.2vw, 30px) var(--pad);
  animation:fadeDown .9s cubic-bezier(.2,.7,.2,1) .15s both;
}

.brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;color:inherit}
.mark{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:none;
  flex:none;
  transition:background .6s, box-shadow .6s;
}
.brand-cn{
  font-family:var(--serif);
  font-size:clamp(14px,1.15vw,17px);
  letter-spacing:.30em;
  text-indent:.30em;
  white-space:nowrap;
}
.brand-en{
  font-family:var(--display);
  font-size:11px;
  letter-spacing:.24em;
  color:rgba(244,246,248,.58);
  margin-left:4px;
  white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.nav-item{
  position:relative;
  font-size:clamp(11px,1vw,13.5px);
  letter-spacing:.22em;
  text-indent:.22em;
  color:rgba(244,246,248,.70);
  padding:6px 0;
  transition:color .3s;
  white-space:nowrap;
}
.nav-item::after{
  content:"";
  position:absolute;
  left:50%; bottom:-2px;
  width:0; height:2px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.nav-item:hover{color:rgba(244,246,248,.9)}
.nav-item.is-active{color:var(--accent)}
.nav-item.is-active::after{width:14px}

.top-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(244,246,248,.58);
  white-space:nowrap;
}
.top-right .div{width:1px;height:10px;background:rgba(255,255,255,.26)}
.top-right .wx{color:rgba(244,246,248,.72)}

/* ---------------- 主标题区 ---------------- */
.hero{
  position:fixed;
  left:0; right:0;
  bottom:clamp(92px, 13vh, 132px);
  z-index:5;
  padding-left:var(--pad);
  padding-right:var(--pad);
  pointer-events:none;
}

.hero-copy{max-width:min(520px, 46vw)}

.kicker{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  color:rgba(244,246,248,.80);
  opacity:0;
  animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .85s both;
}
.kicker i{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:none;
  display:block;flex:none;
}

.meta{
  margin-top:12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(244,246,248,.72);
  opacity:0;
  animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .96s both;
}

.title{
  margin-top:6px;
  font-family:var(--serif);
  font-size:clamp(62px, 7.4vw, 104px);
  line-height:1.0;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 6px 44px rgba(0,0,0,.60), 0 2px 10px rgba(0,0,0,.40);
  opacity:0;
  animation:titleIn 1.25s cubic-bezier(.16,.8,.22,1) .48s both;
}

.tagline{
  margin-top:10px;
  font-size:clamp(13px,1.15vw,15.5px);
  letter-spacing:.18em;
  color:rgba(244,246,248,.86);
  text-shadow:0 2px 18px rgba(0,0,0,.75);
  opacity:0;
  animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1.02s both;
}

.actions{
  margin-top:clamp(18px,2.4vh,26px);
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:auto;
  opacity:0;
  animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1.26s both;
}

.btn-play{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 26px;
  border-radius:3px;
  background:var(--accent);
  color:#0a0c10;
  font-size:12.5px;
  letter-spacing:.16em;
  text-indent:.16em;
  font-weight:600;
  transition:transform .25s, background .4s, box-shadow .3s;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.btn-play:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,0,0,.55)}
.btn-play:active{transform:translateY(1px) scale(.99)}
.btn-play .ico{font-size:9px;line-height:1;transform:translateY(-.5px)}

/* ---------------- 情绪卡片 ---------------- */
.rail{
  position:fixed;
  right:var(--pad);
  bottom:clamp(78px, 11vh, 112px);
  z-index:6;
  text-align:right;
  max-width:calc(100vw - var(--pad) * 2);
  animation:railIn 1s cubic-bezier(.2,.7,.2,1) 1.35s both;
}

.rail-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  justify-content:flex-end;
  pointer-events:none;
}
.rail-head h2{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.30em;
  text-indent:.30em;
  color:rgba(244,246,248,.78);
}
.rail-head .rail-sub{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:rgba(244,246,248,.56);
}

.cards{
  display:flex;
  gap:9px;
  margin-top:10px;
  justify-content:flex-end;
  max-width:100%;
}

.card{
  position:relative;
  flex:0 0 clamp(104px, 8.6vw, 112px);
  aspect-ratio:16 / 9;
  border-radius:4px;
  overflow:hidden;
  padding:0;
  background:#0b0f14;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             border-color .35s,
             box-shadow .35s;
  isolation:isolate;
}
.card:hover{transform:translateY(-3px)}
.card:active{transform:translateY(-1px) scale(.985)}
.card.is-tilting{transition:border-color .35s, box-shadow .35s}
.card.is-active{
  border-color:var(--accent);
  border-width:2px;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
}

.card-shot{
  position:absolute;
  inset:0;
  background-image:url(../assets/cloud-2.png), linear-gradient(168deg,#59bbe8,#c8ecfb 62%,#f0fbff);
  background-size:150% auto, cover;
  background-position:58% 34%, center;
  background-repeat:no-repeat;
  background-color:#9ed3ef;
  transform:scale(1.04);
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s, filter .7s ease, background .7s ease;
  opacity:.94;
}
.card[data-emotion="joy"] .card-shot{
  background-image:url(../assets/card-joy.webp), linear-gradient(168deg,#59bbe8,#c8ecfb 62%,#f0fbff);
  background-size:cover, cover;
  background-position:50% 50%, center;
  background-color:#9ed3ef;
  filter:saturate(1.04) contrast(1.02) brightness(1.02);
}
.card[data-emotion="anger"] .card-shot{
  background-image:url(../assets/card-anger.webp), linear-gradient(168deg,#2b3440,#545f6b 66%,#78818a);
  background-size:cover, cover;
  background-position:50% 50%, center;
  background-color:#232b34;
  filter:saturate(.58) brightness(.8) contrast(1.04);
}
.card[data-emotion="sad"] .card-shot{
  background-image:url(../assets/card-rain.webp), linear-gradient(168deg,#1b3a5c,#3a6b8d 58%,#a7c7d8);
  background-size:cover, cover;
  background-position:50% 58%, center;
  background-color:#234760;
  filter:saturate(.82) brightness(.9);
}
.card[data-emotion="shock"] .card-shot{
  background-image:url(../assets/card-snow.webp), linear-gradient(168deg,#c5e0f1,#e7f4fb 60%,#ffffff);
  background-size:cover, cover;
  background-position:50% 55%, center;
  background-color:#c5e0f1;
  filter:saturate(.9) brightness(.96);
}
.card:hover .card-shot{transform:scale(1.10)}
.card.is-active .card-shot{opacity:1}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(3,6,10,0) 30%,
    rgba(3,6,10,.30) 62%,
    rgba(3,6,10,.80) 100%);
}

.card-body{
  position:absolute;
  left:9px; right:9px; bottom:9px;
  z-index:2;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
}
.card-title{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.14em;
  text-indent:.14em;
  color:#fff;
}
.card-sub{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(244,246,248,.80);
  white-space:nowrap;
}
.card-badge{
  position:absolute;
  top:6px; left:8px;
  z-index:2;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(244,246,248,.82);
  text-shadow:0 1px 4px rgba(3,7,12,.6);
}
.card.is-active .card-badge{color:var(--accent)}

/* ---------------- 底部提示 ---------------- */
.hints{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:6;
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 30px);
  padding:0 var(--pad) clamp(14px, 2vh, 24px);
  font-size:12px;
  letter-spacing:.12em;
  color:rgba(244,246,248,.55);
  pointer-events:none;
  animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1.5s both;
}
.hints span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
kbd{
  display:inline-block;
  min-width:18px;
  padding:1px 4px;
  text-align:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  color:rgba(244,246,248,.72);
}
/* ---------------- 无脚本提示 ---------------- */
.noscript{
  position:fixed;
  left:50%;
  bottom:clamp(18px, 4vh, 36px);
  transform:translateX(-50%);
  z-index:20;
  max-width:calc(100vw - 40px);
  padding:10px 18px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(9,13,19,.88);
  color:#fff;
  font-size:13px;
  letter-spacing:.08em;
  text-align:center;
  line-height:1.7;
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}

/* ---------------- 点击涟漪 ---------------- */
.ripple{
  position:fixed;
  z-index:2;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,255,255,.9) 0%,
    rgba(214,240,255,.5) 36%,
    rgba(190,228,255,0) 70%);
  mix-blend-mode:screen;
  animation:rippleOut 1.15s cubic-bezier(.16,.8,.22,1) forwards;
  will-change:transform, opacity;
}
@keyframes rippleOut{
  from{transform:scale(.35);opacity:.95}
  to{transform:scale(11);opacity:0}
}

/* ---------------- 入场题记 ---------------- */
.epigraph{
  position:fixed;
  left:50%; top:50%;
  z-index:7;
  transform:translate(-50%, -46%);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.epigraph.is-on{opacity:1;transform:translate(-50%, -50%)}
/* 2 秒后快速淡出，保证观感上确实是“2 秒消失” */
.epigraph.is-off{
  opacity:0;
  transform:translate(-50%, -53%);
  transition-duration:.45s;
}
.epigraph p{
  font-family:var(--serif);
  font-size:clamp(20px, 2.2vw, 30px);
  letter-spacing:.20em;
  text-indent:.20em;
  color:#fff;
  text-shadow:0 4px 34px rgba(0,0,0,.85), 0 1px 8px rgba(0,0,0,.6);
  white-space:nowrap;
}
.epigraph p + p{margin-top:14px}
.epigraph .ep-small{
  font-size:clamp(12px, 1.15vw, 15px);
  letter-spacing:.16em;
  text-indent:.16em;
  color:rgba(255,248,236,.78);
  line-height:2;
}

/* ---------------- 动画 ---------------- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes railIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes titleIn{
  from{opacity:0;transform:translateY(28px);filter:blur(12px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ---------------- 自适应 ---------------- */
@media (max-width:1180px){
  .brand-en{display:none}
  .top-right .clock{display:none}
  .top-right .div{display:none}
  .hero-copy{max-width:min(560px,64vw)}
}

@media (max-width:900px){
  .nav{gap:14px}
  .nav-item{letter-spacing:.14em;text-indent:.14em}
  /* Keep the rail at its base card size: 150px tiles run into the hero
     actions at 768–900px. Larger tiles return with the scroll strip at
     ≤720px, where the rail spans the full width. */
  .hints{flex-wrap:wrap;row-gap:6px}
}

@media (min-width:721px) and (max-width:900px){
  /* 104px tiles leave the last 30px of the ghost button covered at 721px;
     92px keeps a clear lane between the rail and the hero actions. */
  .card{flex:0 0 92px}
  .card-body{left:8px;right:8px;gap:4px}
}

@media (max-width:720px){
  .topbar{flex-wrap:wrap;gap:12px}
  .nav{order:3;width:100%;justify-content:flex-start;margin-top:10px}
  .top-right{margin-left:0}
  .hero{top:clamp(150px, 26vh, 230px)}
  .hero-copy{max-width:88vw}
  .title{font-size:clamp(72px, 22vw, 110px)}
  .cards{
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:4px;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 148px}

  /* 竖屏时标题区上移，柔影也要跟着上移，否则白字压不住亮云。
     收窄成一团贴着标题的暗角：原来的全屏大柔影会盖住右侧的太阳，
     把实拍日光压成灰绿色，3D 光晕也就发不出来了。 */
  .hero::before{
    left:calc(var(--pad) * -1);
    top:-10vh;
    bottom:auto;
    width:54vw;
    height:58vh;
    background:radial-gradient(46% 56% at 22% 68%,
      rgba(4,16,24,.58), rgba(4,16,24,0) 70%);
  }
  .kicker{color:rgba(244,246,248,.88);text-shadow:0 1px 10px rgba(0,0,0,.65)}
  .meta{color:rgba(244,246,248,.74);text-shadow:0 1px 12px rgba(0,0,0,.80)}
  .tagline{text-shadow:0 2px 20px rgba(0,0,0,.90)}

  .hints{gap:12px}
  .hints > span:nth-child(1),
  .hints > span:nth-child(2){display:none}

  /* 入场后中央题记会落在按钮所在的位置：手机上先收起 CTA，
     避免题记文字压在「进入这场雨」上；切模块仍可看题记。 */
  body.is-entered .actions{visibility:hidden;pointer-events:none}
}

@media (max-height:760px){
  .hero{top:clamp(104px, 20vh, 170px)}
  .title{font-size:clamp(70px, 8.4vw, 116px)}
  .actions{margin-top:18px}
  .rail{bottom:clamp(48px, 7vh, 66px)}
}

/* ---------------- 望鼠小人 ----------------
   预抠像透明视频叠在天空上；下落阴影跟着 alpha 边缘走。
   视频未就绪或浏览器不支持 alpha 时，三张定格按视线方向交叉淡入。 */
.sky-buddy{
  position:fixed;
  z-index:4;
  right:clamp(20px,3.2vw,52px);
  bottom:clamp(170px,25vh,230px);
  height:clamp(240px,38vh,360px);
  aspect-ratio:536 / 802;
  pointer-events:none;
  opacity:0;
  visibility:visible;
  animation:buddyIn 1.2s cubic-bezier(.2,.7,.2,1) 1.6s both;
}
.sky-buddy__body{
  --buddy-sat:1;
  --buddy-bri:1;
  --buddy-shadow-y:18px;
  --buddy-shadow-blur:26px;
  position:absolute;
  inset:0;
  filter:saturate(var(--buddy-sat)) brightness(var(--buddy-bri))
    drop-shadow(0 var(--buddy-shadow-y) var(--buddy-shadow-blur) rgba(4,20,30,.30));
  transition:filter 1.4s ease, opacity .55s ease;
  animation:buddyFloat 7.5s ease-in-out infinite;
  will-change:transform;
}
/* 鼠标在画面里的方位 -> 抬头/低头 + 左右转 + 轻微横移。
   视频素材只含左右转头，竖向与大角度由这一层的透视旋转补足；
   过渡比指针略慢，跟随时有呼吸感。 */
.sky-buddy__look{
  position:absolute;
  inset:0;
  transform-origin:50% 72%;
  transition:transform .18s cubic-bezier(.22,.7,.3,1);
  will-change:transform;
}
.sky-buddy__stills{
  position:absolute;
  inset:0;
  transition:opacity .5s ease;
}
.sky-buddy__stills img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .24s linear;
  user-select:none;
  -webkit-user-drag:none;
}
.sky-buddy__stills img[data-gaze="1"]{opacity:1}
.sky-buddy__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .5s ease;
}
/* 视频里已经抹掉了虹膜；这一层按指针方位把虹膜画回去。
   与视频同坐标、同尺寸，所以头转动/倾斜时不会错位。 */
.sky-buddy__eyes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.sky-buddy.is-video-ready:not(.is-fallback) .sky-buddy__eyes{opacity:1}
.sky-buddy.is-video-ready .sky-buddy__stills{opacity:0}
.sky-buddy.is-video-ready .sky-buddy__video{opacity:1}
.sky-buddy.is-fallback .sky-buddy__video{opacity:0}

/* 人物只属于晴：切到雷暴、雨、雪时淡出，回到晴再淡入 */
body:not([data-emotion="joy"]) .sky-buddy{
  visibility:hidden;
  transition:visibility 0s linear .55s;
}
body:not([data-emotion="joy"]) .sky-buddy__body{opacity:0}

@keyframes buddyIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes buddyFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,0)}
}

@media (max-width:720px){
  .sky-buddy{
    right:clamp(2px,2vw,12px);
    top:clamp(112px,16vh,164px);
    bottom:auto;
    height:clamp(112px,20vh,210px);
  }
  .sky-buddy__body{--buddy-shadow-y:10px;--buddy-shadow-blur:16px}
}


/* ---------------- 穿和服的柴犬 ----------------
   只住在「哀·雨」里：呼吸、眨眼、摇尾、踱步、张望、抖水；
   轻点会说一句雨里的话，按住可以拖到画面别处，不会跳转。 */
.shiba{
  position:fixed;
  left:0; top:0;
  z-index:6;
  width:clamp(150px, 14vw, 202px);
  transform:translate3d(-999px, -999px, 0);
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease, visibility 0s linear .5s;
  will-change:transform;
}
.shiba.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .55s ease, visibility 0s;
}
.shiba.is-dragging{cursor:grabbing}
.shiba:focus{outline:none}
.shiba:focus-visible .shiba__stage{
  outline:2px solid rgba(255,224,150,.85);
  outline-offset:6px;
  border-radius:24px;
}
.shiba__stage{
  position:relative;
  display:block;
  transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
/* 入场只淡入一次；平时的呼吸放在更里层，免得和跳跃、踱步打架 */
.shiba__figure{
  position:relative;
  transform-origin:50% 100%;
  opacity:0;
  transform:translateY(10px) scale(.965);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}
.shiba.is-visible .shiba__figure{opacity:1;transform:none}
.shiba__breath{
  position:relative;
  display:block;
  transform-origin:50% 100%;
  animation:shibaBreath 4.8s ease-in-out infinite;
  filter:saturate(.92) brightness(.97) drop-shadow(0 12px 14px rgba(5,15,24,.26));
}
.shiba__tail,
.shiba__art,
.shiba__eyes{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.shiba__tail{
  position:absolute;
  left:0; top:0;
  z-index:1;
  transform-origin:33% 58.8%;
  animation:shibaTailSway 5.6s ease-in-out infinite;
  will-change:transform;
}
.shiba__art{position:relative;z-index:2}
.shiba__eyes{
  position:absolute;
  left:0; top:0;
  z-index:3;
  opacity:0;
  transition:opacity .06s linear;
}
.shiba.is-blinking .shiba__eyes{opacity:1}
.shiba:not(.is-visible) .shiba__breath,
.shiba:not(.is-visible) .shiba__tail{animation-play-state:paused}
.shiba.is-flat .shiba__tail,
.shiba.is-flat .shiba__eyes{display:none}
.shiba__shadow{
  position:absolute;
  left:50%; bottom:1.2%;
  z-index:0;
  width:56%; height:9px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(4,12,20,.46), rgba(4,12,20,.20) 54%, rgba(4,12,20,0) 76%);
  transition:transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
.shiba.is-dragging .shiba__shadow{
  transform:translateX(-50%) scale(.8);
  opacity:.62;
}
.shiba.is-dragging .shiba__stage{
  transform:rotate(-4deg) translateY(-6px) scale(1.012);
}
.shiba.is-landing .shiba__stage{
  animation:shibaLand .54s cubic-bezier(.3,1.4,.4,1);
}

/* 气泡 */
.shiba__bubble{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  width:max-content;
  max-width:min(240px, 64vw);
  padding:9px 14px;
  border-radius:14px;
  background:rgba(11,19,28,.88);
  border:1px solid rgba(255,235,180,.24);
  box-shadow:0 12px 28px rgba(3,10,18,.34);
  color:#f7f4ec;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.02em;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, 8px) scale(.96);
  transform-origin:50% 100%;
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.15);
}
.shiba__bubble::after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  width:10px; height:10px;
  margin-left:-5px; margin-top:-5px;
  background:rgba(11,19,28,.88);
  border-right:1px solid rgba(255,235,180,.24);
  border-bottom:1px solid rgba(255,235,180,.24);
  border-radius:0 0 3px 0;
  transform:rotate(45deg);
}
.shiba.is-talking .shiba__bubble{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}
.shiba.is-bubble-below .shiba__bubble{
  bottom:auto;
  top:calc(100% + 10px);
  transform-origin:50% 0;
  transform:translate(-50%, -8px) scale(.96);
}
.shiba.is-bubble-below.is-talking .shiba__bubble{
  transform:translate(-50%, 0) scale(1);
}
.shiba.is-bubble-below .shiba__bubble::after{
  top:auto; bottom:100%;
  margin-top:0; margin-bottom:-5px;
  transform:rotate(225deg);
  border-radius:0 0 3px 0;
}
/* 靠近屏幕左右边缘时，气泡改成向画面内侧展开 */
.shiba.is-bubble-right .shiba__bubble{
  left:auto; right:-2px;
  transform-origin:78% 100%;
  transform:translate(0, 8px) scale(.96);
}
.shiba.is-bubble-left .shiba__bubble{
  left:-2px;
  transform-origin:22% 100%;
  transform:translate(0, 8px) scale(.96);
}
.shiba.is-bubble-right.is-talking .shiba__bubble,
.shiba.is-bubble-left.is-talking .shiba__bubble{
  transform:translate(0, 0) scale(1);
}
.shiba.is-bubble-right .shiba__bubble::after{left:auto;right:20px;margin-left:0}
.shiba.is-bubble-left .shiba__bubble::after{left:20px;margin-left:0}
.shiba.is-bubble-below.is-bubble-right .shiba__bubble,
.shiba.is-bubble-below.is-bubble-left .shiba__bubble{
  transform:translate(0, -8px) scale(.96);
}
.shiba.is-bubble-below.is-bubble-right.is-talking .shiba__bubble,
.shiba.is-bubble-below.is-bubble-left.is-talking .shiba__bubble{
  transform:translate(0, 0) scale(1);
}

/* 点击时抖落的水珠 */
.shiba__drop{
  position:absolute;
  left:50%; top:58%;
  width:6px; height:9px;
  border-radius:50% 50% 58% 58%;
  background:linear-gradient(180deg, #eaf8ff, rgba(130,190,228,.55));
  box-shadow:0 0 6px rgba(255,255,255,.42);
  opacity:0;
  pointer-events:none;
  animation:shibaDropFly .82s ease-out var(--delay, 0s) forwards;
}

/* 自动小动作：跳一下、抖水、踱步、张望、摇尾 */
.shiba.is-hopping .shiba__figure{animation:shibaHop .68s cubic-bezier(.3,1.3,.4,1)}
.shiba.is-shaking .shiba__figure{animation:shibaShake .66s ease-in-out}
.shiba.is-walking .shiba__stage{animation:shibaWaddle .52s ease-in-out infinite}
.shiba.is-looking .shiba__stage{animation:shibaLook 1.8s ease-in-out}
.shiba.is-wagging .shiba__tail{animation:shibaTailWag .42s ease-in-out 4}

@keyframes shibaBreath{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1.6px) scale(1.006)}
}
@keyframes shibaTailSway{
  0%,100%{transform:rotate(-2.4deg)}
  50%{transform:rotate(2.8deg)}
}
@keyframes shibaTailWag{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-7deg)}
  75%{transform:rotate(7deg)}
}
@keyframes shibaHop{
  0%{transform:translateY(0)}
  30%{transform:translateY(-7px)}
  62%{transform:translateY(0) scaleY(.982)}
  100%{transform:translateY(0) scaleY(1)}
}
@keyframes shibaLand{
  0%{transform:translateY(-7px) scale(.975,1.02)}
  42%{transform:translateY(0) scale(1.03,.94)}
  74%{transform:translateY(0) scale(.995,1.015)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes shibaShake{
  0%,100%{transform:rotate(0)}
  16%{transform:rotate(-2.6deg)}
  36%{transform:rotate(2.4deg)}
  56%{transform:rotate(-1.8deg)}
  76%{transform:rotate(1.1deg)}
}
@keyframes shibaWaddle{
  0%,100%{transform:rotate(-1.8deg) translateY(0)}
  25%{transform:rotate(-.5deg) translateY(-2px)}
  50%{transform:rotate(1.8deg) translateY(0)}
  75%{transform:rotate(.5deg) translateY(-2px)}
}
@keyframes shibaLook{
  0%,100%{transform:rotate(0)}
  28%{transform:rotate(-2.4deg)}
  66%{transform:rotate(2.2deg)}
}
@keyframes shibaDropFly{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  16%{opacity:.9}
  100%{opacity:0;transform:translate(var(--dx,0px), var(--dy,36px)) scale(.35)}
}

@media (max-width:720px){
  .shiba{width:clamp(104px, 28vw, 132px)}
  .shiba__bubble{font-size:12px;padding:8px 12px;max-width:min(210px, 68vw)}
  .shiba__shadow{height:7px}
}

/* 极窄或横屏的小窗里，人物、标题、卡片已经占满，
   柴犬让位，避免压住正文和中央题记；旋转或放大后自动回来。 */
@media (max-width:359px), (max-height:560px){
  .shiba{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-delay:0ms !important}
  .sky-video,.sky-video--storm,.sky-video--rain,.sky-video--snow,.sky-sun,.sky-3d,.rain-3d,.snow-fx{display:none}
  /* 减少动态时视频与 3D 层都退场；怒沿用旧的云/太阳/天光，
     晴在后面改用实拍定格帧，避免只剩一块渐变天空。 */
  body[data-emotion="joy"] .scene.has-video .cloud-layer,
  body[data-emotion="anger"] .scene.has-video .cloud-layer{opacity:1;visibility:visible;transition:none}
  body[data-emotion="joy"] .scene.has-video .sun,
  body[data-emotion="anger"] .scene.has-video .sun{opacity:var(--sun-op,1);visibility:visible;transition:none}
  body[data-emotion="joy"] .scene.has-video .sky-glow,
  body[data-emotion="anger"] .scene.has-video .sky-glow{opacity:1;visibility:visible;transition:none}
  /* 晴的减少动态兜底改用实拍定格帧，和新视频同一构图、同一色温，
     不再回落到旧的渐变天空与白色光团。 */
  body[data-emotion="joy"] .sky{
    background:url(../assets/sky-poster.jpg) 50% 58%/cover no-repeat;
  }
  body[data-emotion="joy"] .sun,
  body[data-emotion="joy"] .cloud-layer,
  body[data-emotion="joy"] .sky-glow{opacity:0 !important;visibility:hidden !important}
  @media (max-width:720px){
    body[data-emotion="joy"] .sky{background-position:38% 56%}
  }
  /* 卡片动图降级为同片源定格，构图和动图首帧一致 */
  .card[data-emotion="joy"] .card-shot{
    background-image:url(../assets/sky-poster.jpg), linear-gradient(168deg,#59bbe8,#c8ecfb 62%,#f0fbff);
    background-size:cover, cover;
    background-position:50% 50%, center;
  }
  .card[data-emotion="anger"] .card-shot{
    background-image:url(../assets/storm-poster.jpg), linear-gradient(168deg,#2b3440,#545f6b 66%,#78818a);
    background-size:cover, cover;
    background-position:50% 50%, center;
  }
  .card[data-emotion="sad"] .card-shot{
    background-image:url(../assets/rain-poster.jpg), linear-gradient(168deg,#1b3a5c,#3a6b8d 58%,#a7c7d8);
    background-size:cover, cover;
    background-position:50% 58%, center;
  }
  .card[data-emotion="shock"] .card-shot{
    background-image:url(../assets/snow-poster.jpg), linear-gradient(168deg,#c5e0f1,#e7f4fb 60%,#ffffff);
    background-size:cover, cover;
    background-position:50% 55%, center;
  }
  .sky-buddy,.sky-buddy__body{animation:none}
  .sky-buddy{opacity:1}
  .sky-buddy__body{transition:none}
  .sky-buddy__look{transition:none}
  body:not([data-emotion="joy"]) .sky-buddy{transition:none}
  .sky-buddy__stills img{transition:none}
  body[data-emotion="anger"] .storm-rain{opacity:0}
  body[data-emotion="anger"] .weather-rain{opacity:.35;animation:none}
  body[data-emotion="sad"] .rain-fx{opacity:0}
  .rain-depth{transform:none}
  .rain-poster{transition:none}
  body[data-emotion="sad"] .weather-rain{opacity:.45;animation:none}
  .shiba__breath,.shiba__tail{animation:none}
  .shiba__figure{transform:none;transition:opacity .25s ease}
  .shiba.is-visible .shiba__figure{transform:none}
  .shiba.is-hopping .shiba__figure,
  .shiba.is-shaking .shiba__figure,
  .shiba.is-walking .shiba__stage,
  .shiba.is-looking .shiba__stage,
  .shiba.is-wagging .shiba__tail{animation:none}
  .shiba__eyes{transition:none}
}