/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Turbo 8 頁面切換：快速交叉淡入，降低換頁感。尊重「減少動態」偏好。 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
  }
}

/* Turbo 導航進度條（光裕 2026-08-06）：application.js 把出現時機提前到 100ms，
   這裡把預設的亮藍換成品牌漸層帶，並加粗到 3px 讓手機也看得見。 */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(to right, #3E5C76, #7DD3FC);
}

/* Turbo Frame 載入中（光裕 2026-08-06）：局部更新時 Turbo 會在 frame 上掛 [busy]/[aria-busy]。
   台灣連美國機房單趟就要 210ms，沒有這個回饋使用者會以為按了沒反應而重複點。 */
turbo-frame[busy], turbo-frame[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.12s ease-out;
  pointer-events: none;  /* 載入中禁止重複點，避免連發請求 */
}

/* 骨架屏微光（給 lazy frame 的 placeholder 用） */
@keyframes skeleton-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.skeleton-line {
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

/* 海豹吉祥物動畫 */
@keyframes seal-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes seal-pop { 0%,100%{transform:translateY(0) scale(1)} 30%{transform:translateY(-12px) scale(1.06)} 62%{transform:translateY(0) scale(.97)} }
@keyframes seal-wave { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-24deg)} 60%{transform:rotate(-6deg)} }
@keyframes seal-blink { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)} }
@keyframes seal-bubble { 0%{transform:translateY(0);opacity:0} 25%{opacity:.85} 100%{transform:translateY(-46px);opacity:0} }
.seal-float { animation: seal-float 3s ease-in-out infinite; }
.seal-pop { animation: seal-pop 1.6s ease-in-out infinite; }
.seal-wave { transform-box: fill-box; transform-origin: top center; animation: seal-wave 1.8s ease-in-out infinite; }
.seal-eye { transform-box: fill-box; transform-origin: center; animation: seal-blink 4.5s ease-in-out infinite; }
.seal-bubble { position: absolute; border-radius: 9999px; background: #7DD3FC; animation: seal-bubble 1.7s ease-in infinite; }
@media (prefers-reduced-motion: reduce) {
  .seal-float, .seal-pop, .seal-wave, .seal-eye, .seal-bubble { animation: none; }
}

/* 月曆選定日期高亮 */
.cal-selected { outline: 2px solid #3E5C76; outline-offset: -2px; background: #eff6ff !important; }

/* 床位管理・房客圖卡 bottom sheet 動畫（EPIC-013，照 HANDOFF.md：遮罩 fade .18s、sheet slide up .24s） */
@keyframes bed-card-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bed-card-up { from { transform: translateY(28px); opacity: .4 } to { transform: translateY(0); opacity: 1 } }
.bed-sheet-overlay { opacity: 0; }
.bed-sheet-overlay.is-open { animation: bed-card-fade .18s ease-out forwards; }
.bed-sheet-panel { transform: translateY(28px); opacity: 0; }
.bed-sheet-panel.is-open { animation: bed-card-up .24s cubic-bezier(.2,.9,.3,1) forwards; }

/* 時間軸空窗 segment：紅 45° 斜紋（Tailwind 難表達漸層條紋，直接用 class） */
.bed-gap-stripe {
  background-image: repeating-linear-gradient(45deg, #cf3b3b, #cf3b3b 3px, #f6c9c9 3px, #f6c9c9 6px);
}

/* 對外房源公開頁「共居生活」兩排照片自動輪播（EPIC-017 TASK-017-02）：純 CSS marquee，免 JS。
   每排的照片清單在 view 端已重複一次（* 2），animation 平移 -50% 即為無縫循環的第二份。
   兩排方向相反增加動感；hover（桌機）/ 按住（觸控 :active）暫停方便看清楚。 */
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marquee-track { display: flex; gap: 0.75rem; width: max-content; }
.marquee-left { animation: marquee-left 28s linear infinite; }
.marquee-right { animation: marquee-right 32s linear infinite; }
.marquee-row:hover .marquee-track,
.marquee-row:active .marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-left, .marquee-right { animation: none; }
}