/* The Love Trumpet: Mission page enhancements
   1. Heart coherence wave   2. Breathing pacer
   3. One billion hearts     4. Imagine rotating lines */

/* 1. Heart coherence wave */
.tlt-coh{background:linear-gradient(#fdfcf9,#f4f1e9);padding:34px 0 10px}
.tlt-coh canvas{display:block;width:100%;height:150px}
.tlt-coh .lbl{display:flex;justify-content:space-between;max-width:1180px;margin:0 auto;padding:0 24px;font:500 16px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#000}

/* 2. Breathing pacer */
.tlt-breath{position:relative;overflow:hidden;margin:56px 0 8px;display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;padding:40px 44px;border-radius:28px;color:#fff;
  background:radial-gradient(circle at 15% 20%,rgba(255,95,162,.85),transparent 45%),radial-gradient(circle at 85% 15%,rgba(255,154,60,.8),transparent 45%),radial-gradient(circle at 25% 90%,rgba(123,108,255,.9),transparent 50%),radial-gradient(circle at 90% 85%,rgba(62,197,255,.75),transparent 45%),#3a1656;
  background-size:160% 160%;animation:tltGroove 18s ease-in-out infinite alternate;box-shadow:0 30px 60px -30px rgba(58,22,86,.6)}
@keyframes tltGroove{0%{background-position:0% 0%}50%{background-position:100% 40%}100%{background-position:30% 100%}}
.tlt-breath:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 0 100%,rgba(255,255,255,.06) 0 2px,transparent 2px 22px);pointer-events:none}
.tlt-orbwrap{position:relative;width:280px;height:280px}
.tlt-flower{position:relative;width:280px;height:280px;animation:tltSpin 40s linear infinite}
@keyframes tltSpin{to{transform:rotate(360deg)}}
.tlt-flower .pw{position:absolute;left:50%;top:50%;width:0;height:0}
.tlt-flower .pt{position:absolute;width:120px;height:120px;left:-60px;top:-60px;border-radius:50%;mix-blend-mode:screen;opacity:.85;transform:translateX(26px) scale(.72);box-shadow:0 0 30px rgba(255,255,255,.25) inset}
.tlt-breath.run .tlt-flower .pt{animation:tltPetal 10s ease-in-out infinite}
@keyframes tltPetal{0%,100%{transform:translateX(8px) scale(.5)}50%{transform:translateX(62px) scale(1)}}
.tlt-cue{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;z-index:2}
.tlt-cue b{display:block;font:italic 500 26px/1 "Cormorant Garamond",serif;text-shadow:0 2px 12px rgba(58,22,86,.7)}
.tlt-cue small{display:block;margin-top:8px;font:600 22px/1 Inter,system-ui,sans-serif;opacity:.9;text-shadow:0 2px 10px rgba(58,22,86,.7)}
.tlt-breath .txt{position:relative;z-index:1}
.tlt-breath .ey{font:600 14px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#ffe7a8;margin:0 0 12px}
.tlt-breath h4{font:500 34px/1.1 "Cormorant Garamond",serif;margin:0 0 12px;color:#fff}
.tlt-breath p{font:400 15px/1.6 Inter,system-ui,sans-serif;margin:0 0 20px;color:rgba(255,255,255,.9);max-width:44ch}
.tlt-breath button{font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;color:#3a1656;background:linear-gradient(90deg,#ffd23f,#ff9a3c,#ff5fa2);box-shadow:0 8px 24px -8px rgba(255,95,162,.8)}

/* 3. One billion hearts */
.tlt-bil{margin:48px 0 8px;display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:center;padding:34px 40px;border-radius:18px;background:#fdfcf9;border:1px solid rgba(156,130,74,.25)}
.tlt-bil canvas{width:320px;height:290px;max-width:100%}
.tlt-bil>div{min-width:0}
.tlt-bil .num{font:600 52px/1.1 "Cinzel","Cormorant Garamond",serif;letter-spacing:.04em;color:#0a1d30;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.tlt-bil .ey{font:500 18px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#7A5F28;margin:0 0 14px}
.tlt-bil .sub{font:italic 400 28px/1.3 "Cormorant Garamond",serif;color:#123a5c;margin:10px 0 0}
.tlt-bil .msg{font:400 17.8px/1.8 Inter,system-ui,sans-serif;color:#454b52;margin:14px 0 0}

/* 4. Imagine rotating lines */
.tlt-img{position:relative;max-width:980px;margin:10px 0 40px}
.tlt-img p{position:absolute;left:0;top:0;right:0;margin:0;font:italic 400 36px/1.3 "Cormorant Garamond",serif;color:#0a1d30;opacity:0;transition:opacity 2.2s ease}
.tlt-img p.on{opacity:1}
.tlt-img p b{font-weight:600;color:#b8860b;background:linear-gradient(100deg,#a8740a 0%,#d9a520 45%,#f0c24a 55%,#b8860b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Mobile */
@media (max-width:760px){
  .tlt-breath,.tlt-bil{grid-template-columns:1fr;justify-items:center;text-align:center;padding:28px 20px}
  .tlt-breath p{margin-left:auto;margin-right:auto}
  .tlt-bil .num{font-size:30px}
  .tlt-img p{font-size:26px}
}

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion:reduce){
  .tlt-breath,.tlt-flower{animation:none}
  .tlt-img p{transition:none}
}