/* ============================================================
   祈福卡（絵馬）— framework-free styles. Drop into taipei-trees.org.
   Pure CSS + the tokens below. No React, no build step.
   ------------------------------------------------------------
   PRODUCTION NOTE: the :root block is only here so this file works
   standalone. In the real repo you already load styles.css / tokens,
   so DELETE the ":root (standalone tokens)" block and these vars will
   resolve from your global stylesheet.
   ============================================================ */


/* ── App shell ────────────────────────────────────────────── */
* { box-sizing: border-box; }
.tt-app {
  position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh;
  background: var(--surface-page); font-family: var(--font-sans); color: var(--ink-green);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* ============================================================
   絵馬 plaque
   ============================================================ */
.ema {
  --ema-w: 240px;
  width: var(--ema-w); margin: 0; display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 1px; will-change: transform;
}
.ema__cord { position: relative; width: 100%; height: 26px; }
.ema__cord::before, .ema__cord::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 22px;
  background: var(--cord); border-radius: 2px; transform-origin: top center;
}
.ema__cord::before { transform: rotate(13deg); }
.ema__cord::after  { transform: rotate(-13deg); }
.ema__knot { position: absolute; top: 1px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px;
  border-radius: 50%; background: var(--cord); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cord) 30%, transparent); }
.ema__knot::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--knot); }

.ema__plaque {
  position: relative; width: 100%; height: calc(var(--ema-w) * 0.9); margin-top: -5px;
  background: var(--wood);
  clip-path: polygon(50% 0%, 100% 16%, 100% 100%, 0 100%, 0 16%);
  box-shadow: 0 10px 24px var(--glow), inset 0 0 0 2px rgba(255,255,255,.18);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--ema-w) * 0.19) calc(var(--ema-w) * 0.11) calc(var(--ema-w) * 0.085);
  overflow: hidden;
}
.ema__grain { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(91deg, var(--grain) 0 1.5px, transparent 1.5px 9px); }
.ema__frame { position: absolute; left: 5%; right: 5%; top: 13.5%; bottom: 5%;
  border: 1.5px solid var(--frame); border-radius: 3px; opacity: .55; pointer-events: none; }
.ema__hole { position: absolute; top: 8.5%; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }

.ema__focus { position: relative; display: inline-flex; align-items: center; gap: .25em; white-space: nowrap;
  background: var(--focus); color: #fff; font-family: var(--font-brush); font-weight: 700;
  font-size: 13px; padding: .12em .7em; border-radius: 999px; letter-spacing: .04em;
  margin-bottom: .5em; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.ema__to { position: relative; font-family: var(--font-brush); color: var(--ink); font-weight: 700;
  font-size: 17px; opacity: .92; margin-bottom: .15em; letter-spacing: .02em; }
.ema__wish { position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  margin: 0; font-family: var(--font-brush); color: var(--ink); font-weight: 500; font-size: 22px;
  line-height: 1.55; letter-spacing: .03em; overflow-wrap: anywhere; text-wrap: balance; }
.ema__wish.is-empty { opacity: .5; }
.ema__sig { position: relative; display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; gap: .6em; margin-top: .4em; font-family: var(--font-brush); color: var(--ink);
  opacity: .78; font-size: 12px; }
.ema__sig > :first-child { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ema__sig > :last-child { flex: none; white-space: nowrap; }
.ema__furin { position: absolute; right: 7%; bottom: 5%; font-size: 20px; opacity: .85; }
.ema__motif { position: absolute; pointer-events: none; user-select: none; }

/* ── Theme palettes ───────────────────────────────────────── */
.ema--sakura    { --wood:linear-gradient(165deg,#fdeef4,#f8d6e4 52%,#efbcd4); --frame:#dd6f9c; --ink:#8a2150; --focus:#c14b7c; --cord:#d94f86; --knot:#fff;    --grain:rgba(140,33,80,.05);  --glow:rgba(221,111,156,.35); }
.ema--evergreen { --wood:linear-gradient(165deg,#19492e,#103f2c 58%,#0a3122);  --frame:#cda44c; --ink:#fbf3da; --focus:#caa24a; --cord:#caa24a; --knot:#f3e3b0; --grain:rgba(255,255,255,.05); --glow:rgba(205,164,76,.4); }
.ema--amber     { --wood:linear-gradient(165deg,#fbe6bd,#f2c264 52%,#e2972f);  --frame:#b1530b; --ink:#7a3608; --focus:#bd5410; --cord:#c2410c; --knot:#fde9c8; --grain:rgba(122,54,8,.06);   --glow:rgba(226,151,47,.4); }
.ema--sky       { --wood:linear-gradient(165deg,#e0f0ff,#bbdefb 52%,#90c6f2);  --frame:#2f74c0; --ink:#0f3d6e; --focus:#2563c4; --cord:#2f74c0; --knot:#fff;    --grain:rgba(15,61,110,.05);  --glow:rgba(47,116,192,.35); }
/* senior-friendly: larger, bolder wish text */
.ema--evergreen .ema__wish { font-size: 25px; font-weight: 700; }

/* ── Sway animation ───────────────────────────────────────── */
@keyframes emaSwingIn { 0%{transform:rotate(-15deg)} 22%{transform:rotate(10.5deg)} 45%{transform:rotate(-6deg)} 65%{transform:rotate(3.6deg)} 82%{transform:rotate(-1.7deg)} 100%{transform:rotate(0)} }
@keyframes emaSway   { 0%,100%{transform:rotate(-2.4deg)} 50%{transform:rotate(2.4deg)} }
.ema[data-swing="idle"] { animation: emaSway 4.7s ease-in-out infinite; }
.ema[data-swing="in"]   { animation: emaSwingIn 1.3s cubic-bezier(.2,.72,.3,1) both, emaSway 4.7s 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ema[data-swing] { animation: none !important; } }

/* ── Falling petals ───────────────────────────────────────── */
@keyframes emaFall { 0%{transform:translateY(-12%) translateX(0) rotate(0);opacity:0} 8%{opacity:.9} 100%{transform:translateY(112%) translateX(var(--dx)) rotate(calc(var(--sp)*360deg));opacity:.85} }
.tt-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.tt-petal { position: absolute; top: 0; }
@media (prefers-reduced-motion: reduce) { .tt-petal { display: none; } }

/* ── Branch ───────────────────────────────────────────────── */
.tt-branch { position: relative; height: 15px; background: linear-gradient(180deg,#7a5230,#5e3d20);
  box-shadow: 0 4px 10px rgba(60,40,20,.28); }
.tt-branch--round { border-radius: 999px; }

/* ============================================================
   Composer
   ============================================================ */
.cmp__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--green-600); color: #fff; }
.cmp__head .t { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.cmp__head .s { font-size: .78rem; opacity: .82; }
.cmp__head .mono { font-family: var(--font-mono); }
.cmp__mute { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.15); color: #fff; font-size: 1rem; cursor: pointer; flex: none; }
.cmp__stage { position: relative; background: radial-gradient(circle at 50% -20%, #fff, transparent 55%), linear-gradient(180deg,#eef6f0,#e1eee4); padding-bottom: 18px; }
.cmp__preview { display: flex; justify-content: center; padding-top: 2px; min-height: 230px; }
.cmp__hung { text-align: center; font-family: var(--font-brush); font-weight: 700; font-size: 1rem; padding-top: 4px; animation: ttFadeUp .6s ease both; }
.cmp__body { padding: 16px 18px 28px; display: grid; gap: 16px; }
.cmp__steplabel { font-size: .85rem; font-weight: 900; color: var(--green-600); }
.cmp__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp__rec { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--green-050); color: var(--green-600); }

.cmp__themes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.cmp__theme { display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; padding: 10px 11px;
  border-radius: var(--radius-md); border: 1.5px solid var(--border-mint); background: var(--surface-input); transition: all .14s; }
.cmp__theme.is-on { border-width: 2px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cmp__theme .chip { width: 30px; height: 34px; flex: none; border-radius: 4px;
  clip-path: polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.cmp__theme .n { display: block; font-size: .85rem; font-weight: 700; color: var(--ink-green); }
.cmp__theme .b { display: block; font-size: .72rem; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }

.cmp__form { display: grid; gap: 10px; }
.cmp__input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--border-mint); border-radius: var(--radius-sm);
  background: var(--surface-input); font: inherit; color: var(--ink-900); outline: none; }
.cmp__input:focus { border-color: var(--green-600); background: #fff; }
textarea.cmp__input { min-height: 76px; resize: vertical; font-family: var(--font-brush); font-size: 1.05rem; line-height: 1.6; }
.cmp__suggs { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp__sugg { border: 1px solid var(--frame, #d99); color: var(--ink, #555); background: #fff; border-radius: 999px;
  padding: 5px 11px; font-size: .78rem; cursor: pointer; font-family: var(--font-brush); }
.cmp__hang { width: 100%; min-height: 52px; border: none; border-radius: var(--radius-sm); color: #fff; cursor: pointer;
  font-family: var(--font-brush); font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; transition: filter .15s, opacity .15s; }
.cmp__hang:disabled { opacity: .45; cursor: not-allowed; }
.cmp__hint { text-align: center; color: var(--text-faint); font-size: .72rem; margin: 0; line-height: 1.6; }

/* ============================================================
   Share sheet
   ============================================================ */
.sheet__scrim { position: fixed; inset: 0; background: rgba(20,40,28,.55); backdrop-filter: blur(2px); z-index: 3000; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; z-index: 3001;
  background: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-sheet); animation: ttSlideUp .3s ease; }
.sheet__grab { width: 40px; height: 4px; background: #d0d0d0; border-radius: 2px; margin: 12px auto 0; }
.sheet__in { padding: 12px 20px 26px; text-align: center; }
.sheet__kick { font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.sheet h2 { font-size: 1.4rem; margin: 4px 0 2px; color: var(--ink-green); }
.sheet p.sub { font-size: .85rem; color: var(--text-muted); margin: 0 0 14px; }
.sheet__channels { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.chn { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; }
.chn i { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-style: normal; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.chn span { font-size: .72rem; color: var(--text-muted); }
.sheet__url { display: flex; gap: 8px; align-items: center; background: var(--surface-soft); border: 1px solid var(--border-mint);
  border-radius: var(--radius-sm); padding: 8px 8px 8px 12px; margin-bottom: 10px; }
.sheet__url code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-copy { flex: none; padding: 7px 14px; border-radius: var(--radius-sm); border: none; background: var(--green-600); color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; }
.sheet__row { display: flex; gap: 8px; }
.btn-preview { flex: 1; padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--green-600); background: var(--green-050); color: var(--green-600); font-weight: 700; cursor: pointer; font-size: 1rem; }
.btn-more { flex: none; padding: 12px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-mint); background: #fff; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.btn-again { margin-top: 12px; background: none; border: none; color: var(--text-faint); font-size: .85rem; cursor: pointer; }
.btn-wall { display: block; margin-top: 8px; padding: 11px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-mint); background: var(--green-050, #f0faf2); color: var(--green-600); font-size: .9rem; font-weight: 700; text-align: center; text-decoration: none; }

/* ── Canvas share image preview ─────────────────────────── */
.sheet__img-wrap { margin: 0 -4px 14px; }
.sheet__img-preview { width: 100%; border-radius: 14px; display: block; box-shadow: 0 4px 18px rgba(0,0,0,0.14); }
.btn-save-img {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm);
  background: var(--green-600); color: #fff; font-size: 1.05rem; font-weight: 800;
  cursor: pointer; letter-spacing: .04em; margin-bottom: 6px;
}
.btn-save-img:hover { background: #14491f; }
.share-hint { font-size: .7rem; color: var(--text-faint); text-align: center; margin: 0 0 12px; line-height: 1.55; }
.tt-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: rgba(20,40,28,.92); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: .85rem; z-index: 4000; animation: ttFadeUp .3s ease; }

/* ============================================================
   Landing (friend's view)
   ============================================================ */
.land { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: #0f2419; overflow: hidden; }
.land__map { position: absolute; inset: 0; z-index: 0; filter: saturate(.85) brightness(.82); }
.land__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,30,20,.55) 0%, rgba(12,30,20,.05) 28%, rgba(12,30,20,.25) 62%, rgba(12,30,20,.92) 100%); }
.land__top { position: relative; z-index: 6; padding: 16px 18px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.land__top .t { font-size: .85rem; font-weight: 700; }
.land__top .s { font-size: .72rem; opacity: .85; margin-top: 2px; }
.land__hang { position: relative; z-index: 6; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; }
.land__branch { position: relative; width: 82%; max-width: 300px; height: 16px; border-radius: 999px;
  background: linear-gradient(180deg,#7a5230,#5e3d20); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.land__branch .lf { position: absolute; top: -12px; font-size: 1.2rem; }
.land__card { position: relative; z-index: 6; background: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 18px 18px 22px; box-shadow: 0 -6px 24px rgba(0,0,0,.3); }
.land__who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.land__who b { font-size: 1rem; color: var(--ink-green); }
.land__who span { font-size: .78rem; color: var(--text-muted); }
.land__loc { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-body); margin-bottom: 14px; }
.land__cta { width: 100%; min-height: 52px; border: none; border-radius: var(--radius-sm); color: #fff; cursor: pointer;
  font-family: var(--font-brush); font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; }
.land__links { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.land__links a { color: var(--green-600); text-decoration: none; font-size: .78rem; font-weight: 700; }
.land__foot { text-align: center; color: var(--text-faint); font-size: .68rem; margin: 12px 0 0; line-height: 1.6; }

@keyframes ttSlideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes ttFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.leaflet-container { font-family: var(--font-sans); background: #cfe0d4; }

/* ============================================================
   Wish Gallery（祈福卡牆）
   ============================================================ */
.wish-gallery { }
.wg-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wg-header b { font-size: .82rem; color: var(--ink-green); }
.wg-count { font-size: .72rem; color: var(--text-muted); }

.wg-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.wg-strip::-webkit-scrollbar { height: 4px; }
.wg-strip::-webkit-scrollbar-thumb { background: var(--border-mint); border-radius: 2px; }

.wg-card {
  flex: none; scroll-snap-align: start; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .12s;
}
.wg-card:hover { transform: scale(1.04); }
.wg-card:active { transform: scale(0.97); }

.wg-loading { color: var(--text-faint); font-size: .78rem; padding: 8px 0; }
.wg-empty { color: var(--text-faint); font-size: .78rem; padding: 8px 0; line-height: 1.6; }

/* Popup overlay */
.wg-scrim { position: fixed; inset: 0; background: rgba(10,24,16,.6); backdrop-filter: blur(3px); z-index: 6000; }
.wg-popup {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6001; background: #fff; border-radius: var(--radius-xl); padding: 20px 20px 16px;
  max-width: 320px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: ttFadeUp .25s ease;
}
.wg-close {
  display: block; width: 100%; padding: 11px; border: 1.5px solid var(--border-mint);
  border-radius: var(--radius-sm); background: #fff; color: var(--text-muted);
  font-size: .9rem; cursor: pointer; margin-top: 8px;
}
.wg-close:hover { background: var(--surface-soft); }

/* ============================================================
   進場動畫 — golden tree intro splash (Design v2, 2026-06-14)
   ============================================================ */
.ttintro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 90% 80% at 50% 55%,#244d2a 0%,#122817 55%,#070f09 100%);opacity:0;animation:ttintroFadeIn .35s ease forwards;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ttintro.is-leaving{animation:ttintroFadeOut .44s ease forwards}
.ttintro__stage{position:relative;width:360px;max-width:90vw;height:460px;margin:auto;display:flex;align-items:center;justify-content:center}
.ttintro__tree{position:relative;width:60%;max-width:220px;height:auto;transform-origin:50% 100%;opacity:0;transform:translateY(70px) scale(.9);filter:drop-shadow(0 0 20px rgba(255,215,0,.9)) drop-shadow(0 0 50px rgba(255,215,0,.4));animation:ttintroRise .85s cubic-bezier(.22,1,.36,1) .15s forwards}
.ttintro__glow{position:absolute;left:50%;top:47%;width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,215,0,.45),rgba(255,165,0,.16) 45%,transparent 68%);opacity:0;animation:ttintroBreathe 2.2s ease-in-out 1.1s infinite}
.ttintro__card{position:absolute;width:22px;height:26px;clip-path:polygon(50% 0%,100% 22%,100% 100%,0 100%,0 22%);transform-origin:50% -7px;opacity:0;box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.4);animation:ttintroCardIn .5s cubic-bezier(.18,1.5,.4,1) forwards;will-change:transform,opacity}
.ttintro__card::before{content:"";position:absolute;left:50%;top:-7px;width:1px;height:7px;background:rgba(255,215,0,.85);transform:translateX(-50%)}
.ttintro__card--1{left:38%;top:20%;background:#fdeef4;animation-delay:.75s;--sway:6.2s}
.ttintro__card--2{left:58%;top:17%;background:#d4f8d4;animation-delay:.83s;--sway:5.4s}
.ttintro__card--3{left:30%;top:33%;background:#e0f0ff;animation-delay:.91s;--sway:6.8s}
.ttintro__card--4{left:66%;top:32%;background:#fff3cd;animation-delay:.99s;--sway:5.0s}
.ttintro__card--5{left:47%;top:28%;background:#ffe5cc;animation-delay:1.07s;--sway:5.9s}
.ttintro__card--6{left:54%;top:40%;background:#fdeef4;animation-delay:1.15s;--sway:6.4s}
.ttintro__spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFFFFF;opacity:0;transform:scale(.4);animation:ttintroSpark 1.7s ease-in-out forwards}
.ttintro__spark::before,.ttintro__spark::after{content:"";position:absolute;left:50%;top:50%;background:#FFD700;box-shadow:0 0 5px 1px rgba(255,215,0,.9)}
.ttintro__spark::before{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.ttintro__spark::after{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.ttintro__spark--1{left:20%;top:26%;animation-delay:.90s}
.ttintro__spark--2{left:78%;top:22%;animation-delay:1.02s}
.ttintro__spark--3{left:30%;top:14%;animation-delay:1.14s}
.ttintro__spark--4{left:70%;top:12%;animation-delay:1.26s}
.ttintro__spark--5{left:14%;top:44%;animation-delay:1.38s}
.ttintro__spark--6{left:86%;top:40%;animation-delay:1.50s}
.ttintro__spark--7{left:26%;top:52%;animation-delay:1.62s}
.ttintro__spark--8{left:74%;top:54%;animation-delay:1.74s}
.ttintro__spark--9{left:50%;top:9%;animation-delay:1.86s}
.ttintro__spark--10{left:40%;top:60%;animation-delay:1.98s}
.ttintro__spark--11{left:62%;top:62%;animation-delay:2.10s}
.ttintro__spark--12{left:12%;top:32%;animation-delay:2.22s}
.ttintro__spark--13{left:88%;top:30%;animation-delay:2.30s}
.ttintro__sub{position:absolute;left:0;right:0;bottom:130px;margin:0;text-align:center;font-family:"Noto Sans TC",sans-serif;font-weight:500;font-size:1.12rem;letter-spacing:.05em;color:#FFD700;text-shadow:0 0 16px rgba(255,215,0,.6),0 2px 4px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);animation:ttintroTextIn .6s ease 2s forwards}
@keyframes ttintroFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ttintroFadeOut{from{opacity:1}to{opacity:0}}
@keyframes ttintroRise{0%{opacity:0;transform:translateY(70px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ttintroBreathe{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes ttintroCardIn{0%{opacity:0;transform:translateY(-10px) rotate(-14deg) scale(.6)}70%{opacity:1;transform:translateY(0) rotate(6deg) scale(1.04)}100%{opacity:1;transform:rotate(0deg) scale(1)}}
@keyframes ttintroSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes ttintroSpark{0%{opacity:0;transform:scale(.3) rotate(0deg)}35%{opacity:1;transform:scale(1.15) rotate(25deg)}70%{opacity:.85;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:scale(.7) rotate(70deg)}}
@keyframes ttintroTextIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:768px) and (max-width:1023px){.ttintro__stage{width:300px}}
@media (max-width:767px){.ttintro__stage{width:90vw;max-width:300px}.ttintro__tree{max-width:180px}.ttintro__sub{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.ttintro,.ttintro__tree,.ttintro__card,.ttintro__spark,.ttintro__sub,.ttintro__glow{animation-duration:.01ms!important;animation-iteration-count:1!important;opacity:1!important;transform:none!important}}


/* CTA button inside intro (no-code route only) */
.ttintro__cta{
  position:absolute;left:50%;bottom:52px;transform:translateX(-50%);
  display:inline-block;padding:13px 32px;
  background:#FFD700;color:#122817;
  border-radius:100px;text-decoration:none;
  font-family:"Noto Sans TC",sans-serif;font-weight:700;font-size:.95rem;
  white-space:nowrap;letter-spacing:.04em;
  box-shadow:0 4px 24px rgba(255,215,0,.5),0 1px 4px rgba(0,0,0,.2);
  opacity:0;animation:ttintroTextIn .6s ease 2.0s forwards;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.ttintro__cta:hover,.ttintro__cta:active{background:#FFE44D}

/* Wish char counter */
.cmp__counter{font-size:.72rem;color:var(--text-muted);text-align:right;margin-top:-6px;margin-bottom:6px;opacity:.6;transition:color .2s,opacity .2s}
.cmp__counter.is-near{color:#d97706;opacity:1}
.cmp__counter.is-full{color:#dc2626;opacity:1}
.ttintro__quote{
  position:absolute;top:28px;left:0;right:0;
  width:min(340px,88vw);margin-left:auto;margin-right:auto;text-align:center;
  color:rgba(255,215,0,.82);
  font-family:"Noto Serif TC",serif;font-size:.82rem;font-weight:500;
  line-height:1.9;letter-spacing:.05em;white-space:pre-line;
  opacity:0;animation:ttintroTextIn .9s ease .25s forwards;
  padding:0 4px;pointer-events:none;user-select:none;
}
@media (max-width:767px){.ttintro__quote{font-size:.78rem;top:18px}}