#memorial-bg {
  --kanata-blue-light: #e0f7fa;
  --kanata-blue-main: #81d4fa;
  --feather-fallback-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 文字特效 */
.floating-text {
  position: absolute;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(41, 182, 246, 0.6);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
  animation: textFadeFlow 8s ease-in-out forwards;
  z-index: 0;
}

@keyframes textFadeFlow {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(5px); }
  20% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  80% { opacity: 1; transform: translateY(-20px) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.05); filter: blur(8px); }
}

/* 羽毛容器：負責「向上飛」的位移 */
.feather-container {
  position: absolute;
  bottom: -150px; /* 稍微再往下藏一點 */
  will-change: transform, opacity;
  /* JS 會注入以下變數，這裡設預設值防呆 
    --target-opacity: 最終透明度
  */
}

/* 內容層：負責「左右搖曳」與「自我旋轉」 
   CSS Shape 和 Img 都通用這個動畫
*/
.feather-css-shape,
.feather-img-tag {
  display: block;
  /* 搖曳動畫：時間與延遲由 JS 隨機決定，製造錯落感 */
  animation: featherSway var(--sway-duration, 8s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
  transform-origin: center center;
}

/* 情況 A: CSS 繪製的羽毛 */
.feather-css-shape {
  width: 100%;
  height: 100%;
  background: var(--feather-fallback-color);
  border-radius: 0% 100% 0% 100%;
  box-shadow: 0 0 5px rgba(255,255,255,0.8);
}

.feather-css-shape::after {
  content: '';
  position: absolute;
  top: 10%; left: 10%; width: 80%; height: 1px;
  background: rgba(200, 200, 200, 0.5);
  transform: rotate(45deg); transform-origin: center;
}

/* 情況 B: 圖片羽毛 */
.feather-img-tag {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
}

/* 向上飛的動畫 
*/
@keyframes featherFloatUp {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: var(--target-opacity, 0.9); }
  90% { opacity: var(--target-opacity, 0.9); }
  100% { transform: translateY(-130vh); opacity: 0; }
}

/* 搖曳動畫
*/
@keyframes featherSway {
  0% { 
    transform: rotate(var(--r-from)) translateX(var(--x-from)); 
  }
  100% { 
    transform: rotate(var(--r-to)) translateX(var(--x-to)); 
  }
}