/* Hey Time · анимированный локскрин (два состояния: focus = ландшафт, pause = портрет)
   Размеры и цвета сняты с кадров Figma «Блокировка / по записи». Экран всегда тёмный. */
@font-face{font-family:"Martian Mono";font-weight:700;font-display:swap;src:url(/assets/fonts/martian-mono-bold.woff2) format("woff2")}

.ls-wrap{
  --bz-body:#292b31;--bz-border:#44464c;
  position:relative;width:100%;max-width:var(--ls-max,none);margin-inline:auto;
  filter:var(--phone-shadow,none);contain:layout paint;
  -webkit-user-select:none;user-select:none;
}
:root[data-theme=light] .ls-wrap{--bz-body:#e3e7ed;--bz-border:#c3c6cc}
.ls--port{aspect-ratio:417/876}
.ls--land{aspect-ratio:876/417}

.ls-dev{
  position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--s,1));
  width:calc((var(--W) + 24) * 1px);height:calc((var(--H) + 24) * 1px);
  padding:12px;border-radius:59px;background:var(--bz-body);box-shadow:inset 0 0 0 2px var(--bz-border);
}
.ls-screen{position:relative;width:calc(var(--W) * 1px);height:calc(var(--H) * 1px);border-radius:47px;overflow:hidden;isolation:isolate;
  font:500 16px/20px Manrope,system-ui,sans-serif;color:#f4f7fd;-webkit-font-smoothing:antialiased}
.ls-screen *{box-sizing:border-box}
.ls-screen [data-abs],.ls-bg,.ls-fg{position:absolute}
.ls-bg,.ls-fg{inset:0}
.ls-fg > *,.ls-card > *{position:absolute}

/* ---------- фон ---------- */
.ls-st-focus .ls-bg{background:linear-gradient(180deg,#162a6c 0%,#1e428a 38%,#122054 70%,#1c1648 100%)}
.ls-st-pause .ls-bg{background:linear-gradient(180deg,#12544e 0%,#1a6c5c 40%,#103c34 75%,#0a2624 100%)}
.ls-bl{position:absolute;border-radius:50%;filter:blur(35px);will-change:transform}
.ls-bl.b1{animation:ls-b1 19s ease-in-out infinite alternate}
.ls-bl.b2{animation:ls-b2 26s ease-in-out infinite alternate}
.ls-bl.b3{animation:ls-b3 22s ease-in-out infinite alternate}
.ls-bl.b4{animation:ls-b4 31s ease-in-out infinite alternate}
@keyframes ls-b1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(90px,-60px) scale(1.18)}}
@keyframes ls-b2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-110px,-70px) scale(.9)}}
@keyframes ls-b3{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-70px,80px) scale(1.2)}}
@keyframes ls-b4{0%{transform:translate(0,0) scale(1)}100%{transform:translate(100px,-40px) scale(1.15)}}

/* кольца от виджета в паузе */
.ls-rw{position:absolute;pointer-events:none}
.ls-rp{position:absolute;inset:0;border:3px solid #e6fff5;border-radius:24px;opacity:0;animation:ls-rp 3.8s cubic-bezier(.22,.6,.4,1) infinite;animation-delay:calc(var(--i) * -.95s)}
@keyframes ls-rp{
  0%{inset:0;border-radius:24px;opacity:.7}
  30%{opacity:.5}
  70%{opacity:.2}
  100%{inset:-520px;border-radius:544px;opacity:0}
}

/* ---------- верх ---------- */
.ls-date{font-family:"Martian Grotesk",Manrope,sans-serif;font-weight:500;color:rgba(236,240,250,.92);opacity:.9;white-space:nowrap}
.ls-date b{font-weight:700}
.ls-clock{font-family:"Martian Grotesk",Manrope,sans-serif;font-weight:800;letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ls-st-focus .ls-clock{color:#f4f7fd}
.ls-st-pause .ls-clock{color:#c8ffe8}

/* ---------- карточка ---------- */
.ls-card{border-radius:30px;overflow:hidden}
.ls-st-focus .ls-card{background:rgba(12,20,44,.78);box-shadow:inset 0 0 0 4px rgba(8,12,30,.45)}
.ls-st-pause .ls-card{background:rgba(10,24,26,.82);box-shadow:inset 0 0 0 4px rgba(6,16,18,.5)}
.ls-card .ls-lb{left:0;right:0;top:28px;text-align:center;font-weight:500;font-size:16px;line-height:20px;letter-spacing:.1px}
.ls-st-focus .ls-lb{color:#c8d0e4}.ls-st-pause .ls-lb{color:#cee2de}
.ls-tm{left:0;right:0;top:48px;text-align:center;font:700 40px/40px "Martian Mono",ui-monospace,monospace;color:#f6f8fd;transition:opacity .08s linear;font-variant-numeric:tabular-nums}
.ls-dots{top:100px;left:50%;width:152px;margin-left:-76px;height:12px;display:flex;gap:8px}
.ls-dots i{width:12px;height:12px;border-radius:50%;background:rgba(96,108,138,.8)}
.ls-today{left:0;right:0;top:118px;text-align:center;font-weight:500;font-size:15px;line-height:20px;letter-spacing:.1px;color:#bec8e0;white-space:nowrap}
.ls-today b{font-weight:700;color:#e2e8f6}
.ls-btns{left:0;top:150px;height:100px}
.ls-btns > div{position:absolute;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;height:46px}
.ls-main{left:0;top:0;font-weight:500;font-size:16px}
.ls-st-focus .ls-main{background:#006fe0;color:#fff}
.ls-st-pause .ls-main{background:#58d6a0;color:#081612}
.ls-stop{top:0;width:52px;background:#585e72}
.ls-rot{left:0;top:54px;right:0;background:rgba(10,16,38,.35);color:rgba(148,160,190,.85);box-shadow:inset 0 0 0 1px rgba(148,160,190,.3)}
.ls-rot > *{opacity:.4}
.ls-ico{width:18px;height:18px;flex:none;display:block}
.ls-ring{left:8px;top:8px;overflow:visible;pointer-events:none}
.ls-ring path{fill:none;stroke-width:7.5;stroke-linecap:round}
.ls-ring .trk{stroke:#545c74;opacity:.75}
.ls-st-focus .ls-ring .fg{stroke:#006fe0}
.ls-st-pause .ls-ring .fg{stroke:#58d6a0}

/* ---------- плеер ---------- */
.ls-pl{border-radius:22px;background:rgba(12,22,52,.5);box-shadow:inset 0 0 0 1px rgba(170,196,255,.14)}
.ls-st-pause .ls-pl{background:rgba(12,26,40,.5)}
.ls-pl > *{position:absolute}
.ls-cv{left:13px;top:13px;width:40px;height:40px;border-radius:10px;overflow:hidden;transition:opacity .2s}
.ls-cv i{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.ls-cv i.on{opacity:.92}
.ls-tt{left:65px;top:13px;height:36px;transition:opacity .2s,transform .2s;white-space:nowrap}
.ls-tt b{display:block;font-weight:500;font-size:16px;line-height:20px;letter-spacing:.1px;color:#f4f7fd}
.ls-tt span{display:block;font-weight:400;font-size:14px;line-height:16px;letter-spacing:.5px;color:rgba(156,184,222,.66)}
.ls-sw{opacity:0;transform:translateY(4px)}
.ls-cb{top:12px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .12s ease-out,background-color .12s ease-out}
.ls-cb svg{fill:#f4f7fd;display:block}
.ls-cb.on{transform:scale(.84);background:rgba(244,247,253,.18)}
.ls-pb{top:62px;left:20px;right:20px;height:3px;border-radius:1.5px;background:rgba(244,247,253,.22);overflow:hidden}
.ls-pb i{display:block;height:100%;width:0;background:#e8eaf0;border-radius:1.5px}

/* ---------- яркость (только focus) ---------- */
.ls-br{border-radius:16px;background:rgba(10,20,50,.55);box-shadow:inset 0 0 0 1px rgba(170,196,255,.14)}
.ls-br > *{position:absolute}
.ls-br .tr{left:46px;top:20px;height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.ls-br .fl{left:46px;top:20px;height:6px;border-radius:3px;background:#006fe0}
.ls-br .th{top:13px;width:17px;height:17px;border-radius:50%;background:#f4f7fd}
.ls-br .sun{left:15px;top:12px;width:18px;height:18px}
.ls-br .pc{top:12px;right:12px;font-weight:700;font-size:15px;line-height:20px;color:#f4f7fd;font-variant-numeric:tabular-nums}

.ls-hint{font-weight:400;font-size:15px;line-height:20px;letter-spacing:.25px;color:rgba(176,186,214,.85);opacity:.6;white-space:nowrap}
.ls-home{height:5px;border-radius:2.5px;background:rgba(206,206,230,.75)}

/* ---------- без движения ---------- */
.ls--static .ls-bl,.ls--static .ls-rp{animation:none}
.ls--static .ls-rp:nth-child(1){inset:-38px;border-radius:62px;opacity:.5}
.ls--static .ls-rp:nth-child(2){inset:-183px;border-radius:207px;opacity:.42}
.ls--static .ls-rp:nth-child(3){inset:-305px;border-radius:329px;opacity:.3}
.ls--static .ls-rp:nth-child(4){inset:-430px;border-radius:454px;opacity:.16}
.ls-wrap:not(.ls--run) .ls-bl,.ls-wrap:not(.ls--run) .ls-rp{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ls-bl,.ls-rp{animation:none}}