/* Avatar circle window with centered crop (portrait.jpg)
   - Applies to Butterfly's common avatar DOM and specifically to /img/portrait.jpg
   - Keeps layout intact; only shapes and fit are enforced
*/

/* Make avatar containers circular and clip overflow */
html body .avatar-img,
html body .site-author-image,
html body .author-info .avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Ensure the avatar image fills the circle and is centered */
html body .avatar-img img,
html body .site-author-image img,
html body .author-info .avatar img,
html body img.site-avatar,
html body img.avatar,
img[src$="/img/portrait.jpg"],
img[src*="/img/portrait.jpg"],
img[src$="/img/portrait.png"],
img[src*="/img/portrait.png"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* cover + center = 居中裁剪填充 */
  object-position: 50% 50% !important; /* 水平/垂直居中 */
  display: block;
  border-radius: 50% !important;     /* 双重保障为圆形 */
  transform-origin: 50% 50% !important; /* 旋转基点居中，防抖动 */
}

/* Hover-only rotation (robust) */
@keyframes avatar-rot { to { rotate: 1turn; } }
@keyframes avatar-spin { to { transform: rotate(360deg); } }

/* 使用独立 rotate 属性，避免与主题 transform 冲突 */
@supports (rotate: 1turn) {
  html body img.site-avatar:hover,
  html body img.avatar:hover,
  html body .site-author-image:hover img,
  html body .avatar-img:hover img,
  html body .author-info .avatar:hover img,
  html body img[src$="/img/portrait.jpg"]:hover,
  html body img[src*="/img/portrait.jpg"]:hover {
    animation: avatar-rot 2s linear infinite !important;
  }
}

/* --- Clouds on Home Banner --- */
.clouds-layer {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40vh;              /* limit to top area only */
  z-index: 2;              /* above banner, below UI overlays */
  pointer-events: none;    /* do not block clicks */
  overflow: hidden;
}

/* Single cloud image (set by JS via background-image) */
.cloud {
  position: absolute;
  top: 4vh;                /* JS will randomize to a small band near top */
  left: -20vw;
  width: 220px;
  height: 120px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .45;            /* JS will randomize per cloud to be less transparent */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.06));
  animation-name: cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes cloud-drift {
  from { transform: translateX(-25vw); }
  to   { transform: translateX(125vw); }
}

/* --- Falling Duck --- */
.duck-drop {
  position: fixed;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 32px; height: auto;   /* half size */
  z-index: 9999;
  pointer-events: none;
  will-change: transform, opacity;
  animation: duck-fall 2.8s cubic-bezier(.22,.61,.36,1) forwards; /* slower fall */
}

@keyframes duck-fall {
  0%   { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(60vh) rotate(var(--fall-rotate, 20deg)); opacity: 0; }
}

/* 回退方案：不支持 rotate 时使用 transform 旋转 */
@supports not (rotate: 1turn) {
  html body img.site-avatar:hover,
  html body img.avatar:hover,
  html body .site-author-image:hover img,
  html body .avatar-img:hover img,
  html body .author-info .avatar:hover img,
  html body img[src$="/img/portrait.jpg"]:hover,
  html body img[src*="/img/portrait.jpg"]:hover {
    animation: avatar-spin 1.2s linear infinite !important;
  }
}

/* --- Footer Styling & Walking Duck --- */
/* Make footer visually distinct from rightside settings (blue-on-blue issue) */
#footer, .footer, .footer-other {
  background: #0f2e5e !important; /* deep navy blue */
  color: #ffffff;
}
#footer a, .footer a, .footer-other a {
  color: #e6efff;
}
#footer a:hover, .footer a:hover, .footer-other a:hover {
  color: #ffffff;
}

/* Ensure positioning context for walking duck */
#footer, .footer, .footer-other { position: relative; }

.footer-duck {
  position: absolute;
  bottom: 8px; left: 0;
  width: 28px; height: auto;
  pointer-events: none;
  z-index: 3;
  animation: footer-duck-walk var(--footer-duck-duration, 22s) linear 1 forwards;
  transform: translateX(-10vw);
}

@keyframes footer-duck-walk {
  0%   { transform: translateX(-10vw); opacity: 0; }
  5%   { opacity: 1; }
  95%  { transform: translateX(110vw); opacity: 1; }
  100% { transform: translateX(110vw); opacity: 0; }
}