﻿/* ============================================================
   2027 台灣燈會在苗栗 — 全國花燈競賽 油桐花游標（115.9.11 依客戶示範檔 JOB/0911 調整）
   歷程：115.9.8 長官要求全站游標改官方小花燈 → 115.9.9 客戶覺得小顆，放大 48px 並加油桐花飄落軌跡
         → 115.9.10 客戶（JOB/0910）選「鼠標油桐花、軌跡花瓣」，游標改為手繪五瓣桐花 48px
         → 115.9.11 客戶提供示範檔 JOB/0911（v4 → 同日 v5 光暈版：tung-flower-cursor.css / tung-flower-trail.js）：
           游標本體改為實拍去背油桐花（示範檔 flower-cursor.png），尺寸照示範檔 64px，熱點在花心 (35,38)；
           軌跡花瓣改用實拍花瓣圖，單片 75%／雙片 25%，v5 再加上柔光層與沿軌跡拉長的光暈拖尾（/scripts/tl-cursor-trail.js）。
   示範檔的游標無描邊，白底上偏淡，因此一般版疊了淡淡暗影；可點擊元素沿用本站「點亮」版（橘色光暈）保留 hover 回饋，
   若要完全照示範檔（連結與一般相同），把第二組規則的圖檔換成 cursor_tung_photo*.png 即可。
         → 115.9.14（JOB/0914）：頁首、主選單與競賽辦法黏性導覽改掛 32px 版桐花，解決貼近視窗上緣時退回箭頭的問題（見下方說明）。
   輸入框維持文字游標；觸控裝置不套用。Chrome 對大於 32px 的自訂游標在貼近視窗邊緣會暫時退回預設箭頭，屬正常行為。
   圖檔：/images/kv/cursor_tung_photo.png（64px）、cursor_tung_photo_2x.png（128px，Retina）、
         cursor_tung_photo_lit.png / cursor_tung_photo_lit_2x.png（點亮版）。
   舊圖 cursor_tung*.png（手繪桐花 48px，熱點 24,24）與 cursor_lantern*.png（花燈 48px，熱點 24,2）保留未刪，要切回只需換檔名與熱點。
   ============================================================ */
html, body {
    cursor: url(/images/kv/cursor_tung_photo.png?001) 35 38, auto;
    cursor: -webkit-image-set(url(/images/kv/cursor_tung_photo.png?001) 1x, url(/images/kv/cursor_tung_photo_2x.png?001) 2x) 35 38, auto;
}
a, button, .btn, [role="button"], input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"], input[type="file"], select, label[for], summary,
.nav-link, .dropdown-item, .swal2-styled, .page-link, .nav-tabs a, .lf-rules-nav a {
    cursor: url(/images/kv/cursor_tung_photo_lit.png?001) 35 38, pointer !important;
    cursor: -webkit-image-set(url(/images/kv/cursor_tung_photo_lit.png?001) 1x, url(/images/kv/cursor_tung_photo_lit_2x.png?001) 2x) 35 38, pointer !important;
}
/* ------------------------------------------------------------
   115.9.14 修正單（JOB/0914 五之(一)、六）：
   Chrome／Edge 為防止網頁用自訂游標偽造瀏覽器介面，只要自訂游標大於 32×32，
   游標一靠近視窗上緣就會自動退回系統箭頭 —— 這就是客戶反映「頁首標題處」與
   「競賽辦法頂端功能按鈕（黏性導覽）處」桐花會變回箭頭的原因，並非游標沒套到。
   因此頁首識別列、主選單與競賽辦法黏性導覽改掛 32px 版桐花（同一張圖縮小），
   在視窗頂端也能正常顯示；同時花朵變小，也比較不會遮住主選單文字。
   ------------------------------------------------------------ */
.lf-top-header, .lf-top-header *,
.menu, .menu *,
.lf-rules-nav, .lf-rules-nav * {
    cursor: url(/images/kv/cursor_tung_photo_32.png?001) 18 19, auto !important;
}
.lf-top-header a, .lf-top-header a *,
.menu a, .menu a *,
.lf-rules-nav a, .lf-rules-nav a * {
    cursor: url(/images/kv/cursor_tung_photo_lit_32.png?001) 18 19, pointer !important;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea { cursor: text !important; }
button:disabled, .btn:disabled, .btn.disabled { cursor: not-allowed !important; }
@media (hover: none), (pointer: coarse) {
    html, body, a, button, .btn, select, label[for] { cursor: auto !important; }
    .lf-top-header, .lf-top-header *,
    .menu, .menu *,
    .lf-rules-nav, .lf-rules-nav * { cursor: auto !important; }
}

/* ------------------------------------------------------------
   花瓣軌跡的三層元素（由 /scripts/tl-cursor-trail.js 動態產生；對應示範檔 v5 的 .tung-petal*）
   .tl-petal       外框：固定定位、不吃事件、最上層；寬高 = 花瓣寬 × 3.2，讓光暈與拖尾有空間
   .tl-petal-aura  橢圓柔光：依飄落方向旋轉、隨速度往後拉長成拖尾；screen 混色 → 黑底才看得到，白底自然消失
   .tl-petal-glow  發光層：同一張花瓣模糊＋放亮，screen 混色
   .tl-petal-core  花瓣本體：帶淡白 drop-shadow；遠景花瓣由 JS 再加 blur（整串 filter 一起寫，不蓋掉 drop-shadow）
   ------------------------------------------------------------ */
.tl-petal {
    position: fixed; left: 0; top: 0;
    pointer-events: none; user-select: none;
    z-index: 2147483647;
    will-change: transform, opacity;
}
.tl-petal-aura {
    position: absolute; left: 50%; top: 50%;
    border-radius: 999px;
    background: radial-gradient(ellipse at 36% 50%,
        rgba(255,255,255,0.68) 0%,
        rgba(255,252,240,0.30) 32%,
        rgba(255,240,220,0.16) 58%,
        rgba(255,255,255,0.00) 100%);
    filter: blur(8px);
    transform-origin: 50% 50%;
    mix-blend-mode: screen;
}
.tl-petal-glow, .tl-petal-core {
    position: absolute; left: 50%; top: 50%;
    width: auto; height: auto;
    transform-origin: 50% 50%;
}
.tl-petal-glow {
    filter: blur(2.8px) brightness(1.35) drop-shadow(0 0 4px rgba(255,255,255,0.55)) drop-shadow(0 0 8px rgba(255,248,230,0.32));
    mix-blend-mode: screen;
}
.tl-petal-core {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.32)) drop-shadow(0 0 7px rgba(255,248,220,0.12));
}
@media (prefers-reduced-motion: reduce) {
    .tl-petal { display: none !important; }
}
