/* =========================================================================
   Cornote · 页眉栏杆上的静态角色
   当前使用透明静态帧；容器尺寸和座位锚点与未来 8 帧精灵图保持一致。
   ========================================================================= */

.dblrule{
  isolation:isolate;
}

.dblrule::before,
.dblrule::after{
  z-index:0;
}

.notebook-mascot{
  --mascot-height:100px;
  --seat-y:78.125%; /* 250 / 320：静态帧与未来精灵帧共用 */
  position:absolute;
  z-index:1;
  top:8px;
  left:clamp(520px,63%,calc(100% - 210px));
  width:calc(var(--mascot-height) * .8); /* 256 / 320 */
  height:var(--mascot-height);
  transform:translate(-50%,calc(-1 * var(--seat-y)));
  pointer-events:none;
  user-select:none;
  contain:layout paint;
}

.notebook-mascot picture,
.notebook-mascot img{
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% var(--seat-y);
}

.notebook-mascot picture{
  position:relative;
  z-index:1;
  animation:cornote-idle-sway 2.8s ease-in-out infinite alternate both;
}

.notebook-mascot img{
  object-fit:contain;
  animation:cornote-idle-breathe 3.8s ease-in-out infinite both;
}

/* 红线在座位接触处轻轻吃力，让静态图真的像坐在“栏杆”上。 */
.notebook-mascot::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:var(--seat-y);
  width:22px;
  height:5px;
  border-top:1.5px solid var(--margin);
  border-radius:50%;
  opacity:.22;
  transform:translate(-50%,-1px) scaleX(.88);
  transform-origin:center top;
  animation:cornote-seat-pressure 3.8s ease-in-out infinite both;
}

/* 笔尖附近偶尔依次写出两道极短墨迹，不尝试伪造手臂逐帧动作。 */
.notebook-mascot picture::before,
.notebook-mascot picture::after{
  content:"";
  position:absolute;
  z-index:2;
  left:46%;
  top:64%;
  width:9px;
  height:1.5px;
  background:var(--ink-soft);
  opacity:0;
  transform:rotate(7deg) scaleX(0);
  transform-origin:left center;
  animation:cornote-note-mark 6.8s ease-out infinite both;
}

.notebook-mascot picture::after{
  left:48%;
  top:67%;
  animation-delay:.18s;
}

@keyframes cornote-idle-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scaleY(1.014);}
}

@keyframes cornote-idle-sway{
  from{transform:rotate(-2.2deg);}
  to{transform:rotate(2.2deg);}
}

@keyframes cornote-seat-pressure{
  0%,100%{opacity:.22;transform:translate(-50%,-1px) scaleX(.88);}
  50%{opacity:.52;transform:translate(-50%,-1px) scaleX(1.08);}
}

@keyframes cornote-note-mark{
  0%,8%,24%,100%{opacity:0;transform:rotate(7deg) scaleX(0);}
  10%{opacity:.65;transform:rotate(7deg) scaleX(0);}
  16%{opacity:.65;transform:rotate(7deg) scaleX(1);}
  21%{opacity:0;transform:rotate(7deg) scaleX(1);}
}

@media (prefers-reduced-motion:reduce){
  .notebook-mascot picture,
  .notebook-mascot img,
  .notebook-mascot picture::before,
  .notebook-mascot picture::after{
    animation:none;
  }
  .notebook-mascot picture,
  .notebook-mascot img{transform:none;}
  .notebook-mascot picture::before,
  .notebook-mascot picture::after{display:none;}
}

/* 页眉开始换行前收起纯装饰角色，避免遮挡导航和查找。 */
@media (max-width:1140px){
  .notebook-mascot{display:none;}
}