/* ===== back-to-top: «карьерный лифт» =====
   Hidden message: каждый подъём = на уровень выше. Rising chevrons = этажи мастерства;
   школа «поднимает» дизайнера. Teal scan = render-pass (V-Ray), gold thread = Autodesk. */

.totop{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:90;
  width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;isolation:isolate;
  background:linear-gradient(160deg,rgba(20,30,46,.82),rgba(10,16,26,.92));
  border:1px solid rgba(18,181,168,.42);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 18px -6px rgba(18,181,168,.5);
  opacity:0;transform:translateY(22px) scale(.86);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,border-color .4s ease}
.totop[hidden]{display:grid}            /* keep in layout; visibility driven by .is-shown */
.totop.is-shown{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* breathing teal aura ring (idle, subtle) */
.totop__aura{position:absolute;inset:-6px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 60%,rgba(18,181,168,.4),transparent 68%);
  opacity:.45;filter:blur(2px);animation:totopBreath 3.4s ease-in-out infinite}
@keyframes totopBreath{0%,100%{opacity:.32;transform:scale(.94)}50%{opacity:.6;transform:scale(1.06)}}

/* floor rail dots behind the chevrons (the «этажи») */
.totop__floors{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:30px;width:2px;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;z-index:0;opacity:.0;transition:opacity .35s ease}
.totop__floors i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.45)}
.totop__floors i:first-child{background:var(--gold);box-shadow:0 0 6px rgba(224,164,49,.8)}

/* render-pass scanline (sweeps bottom→top on hover) */
.totop__scan{position:absolute;left:8px;right:8px;height:2px;bottom:10px;border-radius:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  opacity:0;transform:translateY(0);pointer-events:none}

/* the lift: 3 stacked chevrons */
.totop__lift{position:relative;z-index:2;width:24px;height:26px;display:block}
.totop__lift svg{width:100%;height:100%;overflow:visible}
.totop__lift .ch{stroke:#fff;stroke-width:2.1;opacity:0}
.totop__lift .ch1{opacity:1}                      /* idle: only the top arrow visible */
.totop__lift .ch2,.totop__lift .ch3{stroke:var(--teal)}

/* tooltip label that slides out (reveals the hidden message) */
.totop__tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;font-family:var(--ff-text);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;padding:.5em .8em;border-radius:8px;
  background:rgba(12,18,28,.9);border:1px solid rgba(18,181,168,.4);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.totop__tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:rgba(12,18,28,.9)}

/* ---------- HOVER / FOCUS: the lift ascends ---------- */
.totop:hover,.totop:focus-visible{
  border-color:rgba(18,181,168,.85);transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.75),0 0 24px -4px rgba(18,181,168,.7)}
.totop:hover .totop__floors,.totop:focus-visible .totop__floors{opacity:.55}
.totop:hover .totop__tip,.totop:focus-visible .totop__tip{opacity:1;transform:translateY(-50%) translateX(0)}
.totop:hover .totop__scan,.totop:focus-visible .totop__scan{animation:totopScan 1.5s ease-in-out infinite}
.totop:hover .ch2,.totop:hover .ch3,
.totop:focus-visible .ch2,.totop:focus-visible .ch3{animation:totopRise 1.5s ease-in-out infinite}
.totop:hover .ch3,.totop:focus-visible .ch3{animation-delay:.25s}
.totop:hover .ch1,.totop:focus-visible .ch1{animation:totopLead 1.5s ease-in-out infinite}

@keyframes totopRise{
  0%{opacity:0;transform:translateY(6px)}
  40%{opacity:.9}
  70%{opacity:.5}
  100%{opacity:0;transform:translateY(-7px)}}
@keyframes totopLead{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}}
@keyframes totopScan{
  0%{opacity:0;transform:translateY(4px)}
  20%{opacity:.9}
  100%{opacity:0;transform:translateY(-30px)}}

/* ---------- CLICK: launch burst ---------- */
.totop.is-launch{animation:totopLaunch .5s cubic-bezier(.2,.9,.25,1)}
.totop.is-launch .totop__aura{animation:totopBurst .5s ease-out}
@keyframes totopLaunch{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-7px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes totopBurst{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}

/* mobile: smaller, sits above safe-area, weak ambient (no continuous loops via hover) */
@media (max-width:560px){
  .totop{width:50px;height:50px;right:14px;bottom:max(14px,env(safe-area-inset-bottom))}
  .totop__lift{width:21px;height:23px}
  .totop__tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .totop,.totop__aura,.totop__scan,.totop .ch{animation:none!important;transition:opacity .3s ease!important}
}