/* landing.css — 形象首頁（未登入時取代登入頁）(規格書未涵蓋，本次擴充新增)
   由設計畫布「形象首頁 v3（綠金＋名句動畫）」轉成正式網頁；所有規則都限定在 #landing-screen 裡，動畫名稱加 lp- 前綴，
   不會影響小荷包本身的樣式。照片：Pexels、Pixabay 免費授權圖庫；主視覺錢袋取自品牌素材。 */
#landing-screen { display: block; min-height: 100vh; }
#landing-screen[hidden] { display: none; }
body.landing-mode .topbar, body.landing-mode .ambient-mesh { display: none !important; }
body.landing-mode { background: #fffaf0; }
#landing-screen .lp-login-link { color: #13362b; text-decoration: none; font-weight: 700; }
#landing-screen .lp-login-link:hover { color: #087958; }
#landing-screen{margin:0;background:#fffaf0}
#landing-screen a{color:#087958}#landing-screen a:hover{color:#065c43}
#landing-screen a:focus-visible, #landing-screen button:focus-visible{outline:3px solid #f5b301;outline-offset:3px}
#landing-screen .v2{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:#13362b;-webkit-font-smoothing:antialiased}
#landing-screen .hand{font-family:"LXGW WenKai TC","Kaiti TC","BiauKai",serif;font-weight:700}
#landing-screen .wrap{max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box}
#landing-screen .nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
#landing-screen .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center}
#landing-screen .feat4{display:grid;grid-template-columns:repeat(4,1fr)}
#landing-screen .feat4>div+div{border-left:1px solid #c9dcd3}
#landing-screen .cards6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#landing-screen .split2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#landing-screen .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#landing-screen .promise3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@keyframes lp-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
#landing-screen .rise{animation:lp-rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes lp-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
#landing-screen .floaty{animation:lp-floaty 6s ease-in-out infinite}
@keyframes lp-swoosh{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
#landing-screen .swoosh path{stroke-dasharray:900;animation:lp-swoosh 1.4s .6s cubic-bezier(.3,.7,.2,1) both}
@keyframes lp-glow{0%,100%{opacity:.75}50%{opacity:1}}
#landing-screen .sun{animation:lp-glow 7s ease-in-out infinite}
@keyframes lp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#landing-screen .donate{animation:lp-pulse 2.8s ease-in-out infinite}
#landing-screen .donate:hover{animation-play-state:paused}
#landing-screen .card{transition:transform .25s ease,box-shadow .25s ease}
#landing-screen .card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(8,121,88,.45)}
#landing-screen .btn-main{transition:background .2s ease,transform .2s ease}
#landing-screen .btn-main:hover{background:#065c43 !important;transform:translateY(-1px)}
@media (max-width:980px){
  #landing-screen .hero-grid{grid-template-columns:1fr}
  #landing-screen .hero-art{order:-1;max-width:560px;margin:0 auto}
  #landing-screen .cards6{grid-template-columns:repeat(2,1fr)}
  #landing-screen .split2, #landing-screen .steps3, #landing-screen .promise3{grid-template-columns:1fr}
}
@media (max-width:640px){
  #landing-screen .wrap{padding:0 16px}
  #landing-screen .feat4{grid-template-columns:repeat(2,1fr);row-gap:18px}
  #landing-screen .feat4>div+div{border-left:0}
  #landing-screen .cards6{grid-template-columns:1fr}
  #landing-screen .hero-title{font-size:60px !important}
  #landing-screen .hero-slogan{font-size:30px !important}
  #landing-screen .nav-links{gap:6px 14px;font-size:14px}
  #landing-screen .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  #landing-screen .rise, #landing-screen .floaty, #landing-screen .swoosh path, #landing-screen .sun, #landing-screen .donate{animation:none}
}

/* ===== v3：固定背景＋名句、文字動畫 ===== */
#landing-screen{overflow-x:hidden}
#landing-screen [data-anim-root]{overflow-x:hidden}
@supports (overflow:clip){#landing-screen [data-anim-root]{overflow-x:clip}}
/* 意境照片：背景固定，捲動時照片不動、內容滑過去；綠色調遮罩配合品牌色 */
#landing-screen .quote-band{position:relative;height:600px;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;padding:0 24px;overflow:hidden}
#landing-screen .quote-band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,46,34,.18) 0%,rgba(4,46,34,.42) 55%,rgba(4,46,34,.62) 100%)}
#landing-screen .quote{position:relative;z-index:1;margin:0;max-width:22em;text-align:center;color:#ffffff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
#landing-screen .quote blockquote{margin:0;font-family:"LXGW WenKai TC","Kaiti TC","BiauKai",serif;font-weight:700;font-size:clamp(34px,5.2vw,66px);line-height:1.3;letter-spacing:.08em;text-wrap:balance}
#landing-screen .quote figcaption{margin-top:20px;font-size:16px;letter-spacing:.2em;color:#ffd75e}
#landing-screen .quote .q-line{display:block;width:84px;height:5px;border-radius:3px;background:#f5b301;margin:22px auto 0}
#landing-screen .qb-coins{background-image:url(../img/landing/quote-coins.jpg);background-position:center 70%}
#landing-screen .qb-trail{background-image:url(../img/landing/quote-trail.jpg);background-position:center 60%}
#landing-screen .qb-wheat{background-image:url(../img/landing/quote-wheat.jpg);background-position:center 55%}
#landing-screen .qb-books{background-image:url(../img/landing/quote-books.jpg);background-position:center 40%}
#landing-screen .qb-sea{background-image:url(../img/landing/quote-sea.jpg);background-position:center 60%}
@supports (-webkit-touch-callout: none){#landing-screen .quote-band{background-attachment:scroll}}
/* 名句逐字顯現：捲到才一個字一個字從模糊淡入，出處最後出現；捲走藏回去，再捲回來重播 */
#landing-screen .q-text .ch{display:inline-block}
#landing-screen .q-armed .q-text .ch, #landing-screen .q-armed .q-cap{opacity:0}
#landing-screen .q-text.play .ch{animation:lp-chIn 1s ease both}
#landing-screen .q-cap.play{animation:lp-quoteCap 1.6s ease both}
@keyframes lp-chIn{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:none}}
@keyframes lp-quoteCap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 設計稿檢視器裡頁面本身不捲：改成循環播放 */
#landing-screen .q-loop .q-text .ch{animation:lp-chLoop 9s ease infinite both}
#landing-screen .q-loop .q-cap{animation:lp-capLoop 9s ease infinite both}
@keyframes lp-chLoop{0%{opacity:0;filter:blur(10px)}11%{opacity:1;filter:none}80%{opacity:1;filter:none}92%{opacity:0;filter:blur(6px)}100%{opacity:0;filter:blur(10px)}}
@keyframes lp-capLoop{0%{opacity:0;transform:translateY(12px)}12%{opacity:1;transform:none}74%{opacity:1}86%{opacity:0}100%{opacity:0}}
/* 主視覺標語：開頁時逐字跳出 */
#landing-screen .hero-slogan .hc{display:inline-block;animation:lp-hcIn .6s cubic-bezier(.2,.8,.2,1.3) both}
@keyframes lp-hcIn{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
/* 移入動畫：有 JS 時才先藏起來，捲到加 .in 播放（淡入、上滑、左右滑入、彈跳） */
#landing-screen .anim-ready .anim{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
#landing-screen .anim-ready .anim:not(.in){opacity:0}
#landing-screen .anim-ready .anim-up:not(.in){transform:translateY(36px)}
#landing-screen .anim-ready .anim-left:not(.in){transform:translateX(-56px)}
#landing-screen .anim-ready .anim-right:not(.in){transform:translateX(56px)}
#landing-screen .anim-ready .anim-zoom:not(.in){transform:scale(.9)}
#landing-screen .anim-ready .anim-bounce{transition:none}
#landing-screen .anim-ready .anim-bounce:not(.in){opacity:0}
#landing-screen .anim-ready .anim-bounce.in{animation:lp-bounceIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes lp-bounceIn{0%{opacity:0;transform:scale(.6) translateY(20px)}55%{opacity:1;transform:scale(1.06) translateY(-6px)}75%{transform:scale(.97) translateY(2px)}100%{opacity:1;transform:none}}
@media (max-width:720px){#landing-screen .anim-ready .anim-left:not(.in){transform:translateX(-24px)}#landing-screen .anim-ready .anim-right:not(.in){transform:translateX(24px)}}
/* 打字顯示：中文一字約 1em，steps 逐字展開，結尾閃兩下游標 */
#landing-screen .type{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;border-right:.07em solid transparent;max-width:100%}
#landing-screen .anim-ready .type:not(.in){width:0}
#landing-screen .anim-ready .type.t9.in{animation:lp-typing-t9 .86s steps(9) both,lp-caret .7s step-end .86s 3}
@keyframes lp-typing-t9{from{width:0}to{width:9.3em}}
#landing-screen .anim-ready .type.t11.in{animation:lp-typing-t11 1.04s steps(11) both,lp-caret .7s step-end 1.04s 3}
@keyframes lp-typing-t11{from{width:0}to{width:11.3em}}
@keyframes lp-caret{50%{border-right-color:currentColor}}
@media (max-width:720px){#landing-screen .type{white-space:normal;width:auto!important;animation:none!important;border:none}}
@media (prefers-reduced-motion:reduce){
  #landing-screen .anim-ready .anim, #landing-screen .anim-ready .anim-bounce, #landing-screen .anim-ready .type, #landing-screen .q-text .ch, #landing-screen .q-cap, #landing-screen .hero-slogan .hc{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;filter:none!important}
  #landing-screen .anim-ready .type{width:auto!important;border:none}
}
/* 標語在 1280 左右的寬度會把「。」擠到第二行：依螢幕寬度縮放、桌面版不換行（手機版另外設定、可以換行） */
@media (min-width: 641px) { #landing-screen .hero-slogan { font-size: clamp(30px, 3.2vw, 46px) !important; white-space: nowrap; } }
/* 名句框原本 max-width: 22em（以 16px 算只有 352px），字放大到 66px 就被擠成三行、逗號跑到行首：改成依畫面寬度給足空間 */
#landing-screen .quote { max-width: min(92vw, 1080px); }