/* Back to top: ring shows page progress, tier-specific launch effect on click */
.tt{--e:cubic-bezier(.2,.7,.2,1);position:fixed;z-index:75;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:var(--tt-bg,#12361f);color:var(--tt-ink,#12361f);cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.35);opacity:0;transform:translateY(40px) scale(.3) rotate(-120deg);pointer-events:none;transition:opacity .35s,transform .7s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;-webkit-tap-highlight-color:transparent}
.tt.show{opacity:1;transform:none;pointer-events:auto}
.tt:hover{transform:translateY(-4px) scale(1.08)}
.tt:active{transform:scale(.94)}
.tt__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.tt__track,.tt__prog{fill:none;stroke-width:3}
.tt__track{stroke:rgba(255,255,255,.18)}
.tt__prog{stroke:var(--tt-ring,#8fd14f);stroke-linecap:round;stroke-dashoffset:144.5;transition:stroke-dashoffset .15s linear;filter:drop-shadow(0 0 4px var(--tt-ring,#8fd14f))}
.tt__halo{position:absolute;inset:-9px;border-radius:50%;pointer-events:none;border:2px dashed var(--tt-ring,#8fd14f);opacity:.55;animation:ttSpin 9s linear infinite}
.tt__halo::after{content:"";position:absolute;left:50%;top:-5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--tt-ring,#8fd14f);box-shadow:0 0 12px 3px var(--tt-ring,#8fd14f)}
.tt:hover .tt__halo{animation-duration:2.4s;opacity:1}
@keyframes ttSpin{to{transform:rotate(360deg)}}
.tt__core{position:absolute;inset:7px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--tt-core,#8fd14f);box-shadow:inset 0 -6px 12px rgba(0,0,0,.18),inset 0 4px 8px rgba(255,255,255,.25)}
.tt__arrow{position:absolute;width:22px;height:22px;fill:none;stroke:var(--tt-ink,#12361f);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:ttUp 1.9s var(--e) infinite}
.tt__arrow--2{animation-name:ttUp2}
.tt:hover .tt__arrow{animation-duration:.8s}
@keyframes ttUp{0%{transform:translateY(0);opacity:1}55%,100%{transform:translateY(-30px);opacity:0}}
@keyframes ttUp2{0%,45%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}
.tt__lbl{position:absolute;right:calc(100% + 12px);top:50%;padding:.45em .9em;border-radius:999px;background:var(--tt-lbl-bg,#fff);color:var(--tt-lbl-ink,#000);font:700 .82rem/1 system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap;opacity:0;transform:translate(10px,-50%);transition:opacity .3s,transform .4s var(--e);pointer-events:none}
.tt:hover .tt__lbl,.tt:focus-visible .tt__lbl{opacity:1;transform:translate(0,-50%)}
.tt:focus-visible{outline:3px solid #ffbf47;outline-offset:6px}
/* launch */
.tt.go{animation:ttLaunch var(--dur,1.4s) cubic-bezier(.5,0,.3,1) both}
@keyframes ttLaunch{0%{transform:scale(1)}8%{transform:translateY(8px) scale(.86,.7)}22%{transform:translateY(-30px) scale(.9,1.22)}60%{transform:translateY(-18px) scale(1)}100%{transform:none}}
.tt.go .tt__arrow{animation-duration:.35s}
.tt.go .tt__halo{animation-duration:.7s}

.tt-fx{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden}
.tt-fx .p{position:fixed;left:var(--x);top:var(--y);width:var(--w,6px);height:var(--h,6px);margin:calc(var(--h,6px) / -2) 0 0 calc(var(--w,6px) / -2);border-radius:var(--r,50%);background:var(--pc);box-shadow:var(--ps,none);transform:translate(0,0) rotate(0);opacity:0;animation:ttBurst var(--pd,1s) cubic-bezier(.15,.7,.3,1) var(--dl,0s) forwards}
@keyframes ttBurst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot,0deg)) scale(1.1)}}

/* ----- Essential: "Mow Back": lanes of stripes sweep up with a mower at each lead edge ----- */
.tt--ess{right:20px;bottom:88px;--tt-bg:#12361f;--tt-ring:#8fd14f;--tt-core:#8fd14f;--tt-ink:#12361f;--tt-lbl-bg:#12361f;--tt-lbl-ink:#fff}
.tt-fx--ess{display:flex}
.tt-fx--ess .s{position:relative;flex:1;background:#1c6a39;transform:translateY(106%);animation:ttLane var(--dur,1.4s) cubic-bezier(.62,.05,.28,1) calc(var(--i) * 55ms) both}
.tt-fx--ess .s:nth-child(even){background:#8fd14f}
.tt-fx--ess .s::before{content:"";position:absolute;left:50%;top:-34px;width:30px;height:46px;margin-left:-15px;background:url("../img/mower.svg") center/contain no-repeat;transform:rotate(180deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
@keyframes ttLane{0%{transform:translateY(106%)}42%,52%{transform:translateY(0)}100%{transform:translateY(-130%)}}
.tt--ess~.tt-fx .p,.tt-fx--ess .p{--w:4px;--h:16px;--r:4px 4px 0 0}
@media (max-width:700px){.tt--ess{right:12px;bottom:76px}}

/* ----- Premium: "Sunrise": a sun blooms from the button and floods the screen with gold ----- */
.tt--prm{right:25px;bottom:98px;--tt-bg:#3a2716;--tt-ring:#f0b24a;--tt-core:#f0b24a;--tt-ink:#3a2716;--tt-lbl-bg:#fff8ea;--tt-lbl-ink:#3a2716}
.tt--prm .tt__core{background:radial-gradient(circle at 50% 38%,#ffe08a,#f0b24a 60%,#e8a33d)}
.tt-fx--prm .sun{position:fixed;left:var(--x);top:var(--y);width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 18%,#ffd36e 34%,#f0b24a 55%,rgba(240,178,74,0) 70%);transform:scale(0);animation:ttSun var(--dur,1.4s) cubic-bezier(.5,0,.3,1) both}
@keyframes ttSun{0%{transform:scale(0);opacity:1}55%{transform:scale(38);opacity:1}100%{transform:scale(60);opacity:0}}
.tt-fx--prm .ray{position:fixed;left:var(--x);top:var(--y);width:3px;height:0;transform-origin:50% 0;transform:rotate(var(--a));background:linear-gradient(180deg,#fff3c4,rgba(255,211,110,0));animation:ttRay 1s cubic-bezier(.2,.7,.2,1) var(--dl,0s) both}
@keyframes ttRay{0%{height:0;opacity:1}60%{height:34vmax;opacity:.9}100%{height:46vmax;opacity:0}}
.tt-fx--prm .p{--pc:#ffe08a;--ps:0 0 10px 3px rgba(255,200,90,.8)}
@media (max-width:860px){.tt--prm{right:17px;bottom:84px}}

/* ----- Signature: "Lift-off": a coral beam climbs the screen with a mower and fireflies ----- */
.tt--sig{right:29px;bottom:102px;--tt-bg:#0a1626;--tt-ring:#ff6a5c;--tt-core:#f4efe2;--tt-ink:#0a1626;--tt-lbl-bg:#f4efe2;--tt-lbl-ink:#0a1626}
.tt-fx--sig .veil{position:absolute;inset:0;background:radial-gradient(ellipse at var(--xp) 100%,rgba(255,106,92,.5),rgba(10,22,38,.7) 60%);opacity:0;animation:ttVeil var(--dur,1.4s) ease-in-out both}
@keyframes ttVeil{0%{opacity:0}35%,60%{opacity:1}100%{opacity:0}}
.tt-fx--sig .beam{position:fixed;left:var(--x);top:0;bottom:0;width:6px;margin-left:-3px;background:linear-gradient(0deg,rgba(255,106,92,0),#ff6a5c 40%,#fff 50%,rgba(255,106,92,0));filter:blur(.5px) drop-shadow(0 0 14px #ff6a5c);transform:translateY(105%);animation:ttBeam calc(var(--dur,1.4s) * .8) cubic-bezier(.55,.05,.3,1) both}
@keyframes ttBeam{0%{transform:translateY(105%)}100%{transform:translateY(-105%)}}
.tt-fx--sig .fm{position:fixed;left:var(--x);bottom:0;width:34px;height:52px;margin-left:-17px;background:url("../img/mower.svg") center/contain no-repeat;transform:translateY(60px) rotate(180deg);filter:drop-shadow(0 0 12px #ff6a5c);animation:ttFly calc(var(--dur,1.4s) * .85) cubic-bezier(.55,.05,.3,1) both}
@keyframes ttFly{0%{transform:translateY(60px) rotate(180deg)}100%{transform:translateY(calc(-100vh - 80px)) rotate(180deg)}}
.tt-fx--sig .p{--pc:#ffe9a8;--ps:0 0 12px 4px rgba(255,226,140,.8)}
@media (max-width:760px){.tt--sig{right:23px;bottom:90px}}

@media (prefers-reduced-motion:reduce){.tt,.tt__halo,.tt__arrow{animation:none!important;transition-duration:.01s!important}.tt.show{transform:none}.tt__arrow--2{display:none}}