/* «Новый сезон»: два слоя и «Три момента года».
   Префикс ns-. Токены берутся со страницы (скетч v3), здесь только запасные значения. */

.ns{
  --ns-ink:var(--ink,#0F1722);
  --ns-ink-2:var(--ink-2,rgba(15,23,34,.78));
  --ns-ink-3:var(--ink-3,rgba(15,23,34,.62));
  --ns-line-2:var(--line-2,rgba(15,23,34,.20));
  --ns-accent:var(--accent,#EA5F22);
  --ns-sky:var(--sky,#A9C1EE);
  --ns-head:var(--f-head,'Spectral',Georgia,serif);
  --ns-text:var(--f-text,'Onest',system-ui,sans-serif);
  --ns-s2:var(--s2,34px); --ns-s3:var(--s3,21px); --ns-s4:var(--s4,16px); --ns-s5:var(--s5,13px);
  --ns-ease:cubic-bezier(.16,1,.3,1);
  position:relative; color:var(--ns-ink);
  font:400 var(--ns-s4)/1.6 var(--ns-text);
}
.ns *,.ns *::before,.ns *::after{box-sizing:border-box}
.ns p,.ns h3{margin:0}
.ns button{font:inherit; color:inherit}
.ns :focus-visible{outline:2px solid var(--ns-ink); outline-offset:3px; border-radius:6px}

/* ---------- сцена и слои ----------
   Оба слоя — стекло без градиентов внутри. Прошлый сезон плотнее и в холодном тоне (ровная заливка),
   следующий — прозрачное белое стекло. Цвет — только светом за слоем (тень), не внутри. */
.ns-stage{position:relative; height:600px}
.ns-layer{position:absolute; border-radius:22px; overflow:hidden; border:1px solid rgba(15,23,34,.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  transition:transform .9s var(--ns-ease), opacity .9s var(--ns-ease), box-shadow .9s var(--ns-ease)}
.ns-past{left:0; top:0; width:64%; height:420px; background:rgba(212,225,246,.84);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.5), 0 30px 120px -20px rgba(169,193,238,.95)}
.ns-next{right:0; top:250px; width:50%; height:340px; background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 30px 120px -30px rgba(255,178,127,.55), 0 30px 60px -36px rgba(15,23,34,.18)}
.ns-front{z-index:2}
.ns-past.ns-front{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.5), 0 30px 120px -20px rgba(169,193,238,.95), 0 40px 70px -44px rgba(15,23,34,.30)}
.ns-next.ns-front{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 30px 120px -30px rgba(255,178,127,.6), 0 40px 70px -40px rgba(15,23,34,.28)}
.ns-past{scroll-margin-top:84px}
.ns-back{z-index:1; opacity:.82; transform:scale(.975)}
.ns-past.ns-back{opacity:.7; transform:translate(-6px,-8px) scale(.965)}
.ns-noanim .ns-layer,.ns-noanim .ns-layer *{transition:none !important}
/* закрытый следующий сезон отзывается на нажатие: прошлый слой коротко приподнимается */
.ns-nudge .ns-past.ns-front{animation:ns-nudge .9s var(--ns-ease)}
@keyframes ns-nudge{30%{transform:translateY(-6px)} to{transform:none}}
.ns-pre.ns-next{cursor:pointer}

.ns-hd{position:absolute; left:40px; top:36px; max-width:420px; z-index:1; pointer-events:none}
.ns-hd h3{font:300 var(--ns-s2)/1.15 var(--ns-head); letter-spacing:-.01em}
.ns-hd p{margin-top:10px; color:var(--ns-ink-2)}
.ns-next .ns-hd{top:auto; bottom:28px; max-width:340px}

/* кнопка-крышка, которой задний слой выходит вперёд */
.ns-lift{position:absolute; inset:0; z-index:6; width:100%; border:0; padding:0; margin:0; background:none; cursor:pointer; border-radius:22px}
.ns-lift:focus-visible{outline-offset:-6px; border-radius:18px}
.ns-layer.ns-back:has(.ns-lift:not([hidden]):hover){opacity:.95}

/* ---------- линия года ---------- */
.ns-year{position:absolute; inset:0}
.ns-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.ns-line{fill:none; stroke:#fff; stroke-width:1.6}
.ns-tick{stroke:#fff; stroke-width:1.2}
.ns-track{position:absolute; inset:0; z-index:2; outline:none}
.ns-track.is-near{cursor:pointer}
.ns-track:focus-visible{outline:1.5px solid rgba(15,23,34,.45); outline-offset:-8px; border-radius:16px}

.ns-ghost{position:absolute; left:0; top:0; z-index:3; width:0; height:0; pointer-events:none; opacity:0; transition:opacity .2s}
.ns-ghost.is-on{opacity:1}
.ns-ghost i{position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; border:1.2px solid var(--ns-ink-2); background:rgba(255,255,255,.7)}
/* пока на линии пусто — кольцо 24 px с тёплой точкой медленно дышит (как точка «ты здесь»): сюда можно нажать.
   Дышит, только пока модуль на экране (.ns-vis) */
.ns-ghost.is-idle .ns-mo{display:none}
.ns-ghost.is-idle i{left:-12px; top:-12px; width:24px; height:24px; border-color:rgba(15,23,34,.45); background:rgba(255,255,255,.75)}
.ns-ghost.is-idle i::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--ns-accent)}
.ns-vis .ns-ghost.is-idle i{animation:ns-breathe 6s ease-in-out infinite}
@keyframes ns-breathe{0%,100%{box-shadow:0 0 0 0 rgba(234,95,34,.18)} 50%{box-shadow:0 0 0 12px rgba(234,95,34,0)}}
.ns-track{cursor:pointer}
/* при наведении на линию над кольцом — пустая строка-поле с подсказкой модуля: так видно, что сюда впишется момент */
.ns-gfield{position:absolute; left:-90px; bottom:22px; width:180px; padding:6px 14px; border-radius:19px; border:1px dashed rgba(15,23,34,.24); background:rgba(255,255,255,.6);
  font:300 italic var(--ns-s4)/1.4 var(--ns-head); color:var(--ns-ink-3); text-align:left; white-space:nowrap; opacity:0; transition:opacity .2s}
.ns-ghost.is-on:not(.is-idle) .ns-gfield{opacity:1}
.ns-v .ns-gfield,.ns-ghost .ns-gfield:only-child{display:none}
@media (pointer:coarse){ .ns-gfield{display:none} }
.ns-nudge .ns-ghost i{animation:ns-call .7s var(--ns-ease) 2}
@keyframes ns-call{50%{transform:scale(1.6)}}

.ns-mo{position:absolute; white-space:nowrap; font:400 var(--ns-s5)/1.2 var(--ns-text); color:var(--ns-ink-2); pointer-events:none}
.ns-h .ns-mo{left:0; top:14px; transform:translateX(-50%)}
.ns-h .ns-mo.is-up{top:auto; bottom:14px}
.ns-v .ns-ghost .ns-mo{left:16px; top:-8px}

/* момент */
.ns-pts{position:absolute; inset:0; z-index:4; pointer-events:none}
.ns-pt{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border:0; padding:0; background:none; cursor:pointer; border-radius:50%; pointer-events:auto}
.ns-pt::after{content:""; position:absolute; left:9.5px; top:9.5px; width:11px; height:11px; border-radius:50%;
  background:var(--ns-accent); box-shadow:0 0 0 4px rgba(255,255,255,.7); transition:transform .25s var(--ns-ease)}
.ns-pt.is-empty::after{background:#fff; box-shadow:0 0 0 1.2px var(--ns-ink-2)}
.ns-pt:hover::after,.ns-pt:focus-visible::after{transform:scale(1.25)}
.ns-pt:focus-visible{outline-offset:0; border-radius:50%}
.ns-pt.is-new::after{animation:ns-pop .6s var(--ns-ease)}
@keyframes ns-pop{from{transform:scale(.2)} 60%{transform:scale(1.4)} to{transform:scale(1)}}
.ns-pt .ns-mo{opacity:0; transition:opacity .2s}
.ns-pt:hover .ns-mo,.ns-pt:focus-visible .ns-mo,.ns-pt.is-edit .ns-mo{opacity:1}
.ns-cap{position:absolute; left:15px; display:block; width:max-content; max-width:210px;
  font:300 italic var(--ns-s3)/1.25 var(--ns-head); color:var(--ns-ink); text-align:center; pointer-events:auto}
.ns-h .ns-cap{bottom:28px; transform:translateX(calc(-50% + var(--dx,0px)))}
.ns-h .ns-cap.is-down{bottom:auto; top:28px}
.ns-chg{display:block; margin-top:3px; font:400 var(--ns-s5)/1.35 var(--ns-text); font-style:normal; color:var(--ns-ink-2)}
.ns-v .ns-cap{left:30px; top:calc(15px - .62em + var(--dy,0px)); text-align:left; max-width:var(--mw,220px)}
.ns-v .ns-pt .ns-mo{left:30px; top:100%}
.ns-v .ns-pt.is-edit .ns-mo{top:-26px}

/* поле ввода момента: многострочное, растёт по тексту (ничего не обрезается) */
.ns-edit{position:absolute; z-index:5; display:block; width:220px; min-height:38px; margin:0; padding:7px 16px; border-radius:19px; resize:none; overflow:hidden;
  border:1px solid rgba(15,23,34,.14); background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font:300 italic var(--ns-s4)/1.4 var(--ns-head); color:var(--ns-ink); outline:none;
  box-shadow:0 10px 24px -14px rgba(15,23,34,.35)}
.ns-edit::placeholder{color:var(--ns-ink-3)}
.ns .ns-edit:focus,.ns .ns-edit:focus-visible{outline:none; border-radius:19px; border-color:rgba(15,23,34,.45); box-shadow:0 10px 24px -14px rgba(15,23,34,.35)}
.ns-edit[hidden]{display:none}

/* ---------- следующий сезон ---------- */
.ns-route{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.ns-route path{fill:none; stroke:rgba(15,23,34,.30); stroke-width:1; stroke-dasharray:2 6; transition:opacity .8s}
.ns-open .ns-route path{opacity:.5}
.ns-coord{position:absolute; width:0; height:0}
.ns-ring{position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; border:1px solid rgba(15,23,34,.55); background:rgba(255,255,255,.7); transition:border-color .4s, background .4s}
.ns-ring::before,.ns-ring::after{content:""; position:absolute; background:rgba(15,23,34,.45)}
.ns-ring::before{left:50%; top:-5px; bottom:-5px; width:1px; margin-left:-.5px}
.ns-ring::after{top:50%; left:-5px; right:-5px; height:1px; margin-top:-.5px}
.ns-coord.is-named .ns-ring{border-color:var(--ns-accent); background:var(--ns-accent)}
.ns-coord.is-named .ns-ring::before,.ns-coord.is-named .ns-ring::after{background:var(--ns-accent)}
.ns-focus{position:absolute; left:-75px; top:16px; display:block; width:150px; min-height:44px; margin:0; padding:10px 0 6px; border:0; border-bottom:1px solid var(--ns-line-2); border-radius:0;
  resize:none; overflow:hidden; background:transparent; text-align:center; font:300 italic var(--ns-s3)/1.25 var(--ns-head); color:var(--ns-ink); outline:none;
  transition:opacity .6s var(--ns-ease), border-color .2s}
.ns .ns-focus:focus,.ns .ns-focus:focus-visible{outline:none; border-radius:0; border-bottom-color:var(--ns-ink)}
.ns-focus::placeholder{font:400 var(--ns-s5)/1.4 var(--ns-text); color:var(--ns-ink-3)}
.ns-coord.is-named .ns-focus{border-bottom-color:transparent}
.ns-pre .ns-focus{opacity:0; visibility:hidden}
.ns-ring{transition:border-color .4s, background .4s, opacity .6s}

/* ---------- связи от моментов к фокусам ---------- */
.ns-links{position:absolute; left:0; top:0; z-index:5; width:100%; height:100%; overflow:visible; pointer-events:none}
.ns-links path{fill:none; stroke:rgba(15,23,34,.34); stroke-width:1; stroke-dasharray:2 5; opacity:0; animation:ns-in 1.2s var(--ns-ease) forwards}
.ns-links path.is-warm{stroke:var(--ns-accent)}
.ns-links path.is-pre{stroke:rgba(15,23,34,.24)}
@keyframes ns-in{to{opacity:1}}

/* ---------- финал и подвал ---------- */
.ns-end{display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; margin-top:40px;
  animation:ns-up .8s var(--ns-ease)}
.ns-end[hidden]{display:none}
.ns-end p{max-width:34em; color:var(--ns-ink-2)}
@keyframes ns-up{from{opacity:0; transform:translateY(10px)}}
.ns-cta{display:inline-flex; align-items:center; font:500 var(--ns-s4)/1 var(--ns-text); text-decoration:none; white-space:nowrap;
  padding:15px 22px; border-radius:999px; color:var(--ns-ink); cursor:pointer;
  background:var(--glass,rgba(255,255,255,.56)); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(15,23,34,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,34,.03), 0 22px 44px -28px rgba(15,23,34,.22);
  transition:background .2s, border-color .2s}
.ns-cta:hover{background:rgba(255,255,255,.82); border-color:rgba(15,23,34,.14)}
[data-cta="none"] .ns-cta{display:none}
.ns-foot{display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; margin-top:24px}
.ns-note{font-size:var(--ns-s5); line-height:1.45; color:var(--ns-ink-3); visibility:hidden}
.ns-note.is-on{visibility:visible}
.ns-clear{flex:none; border:0; padding:4px 0; background:none; cursor:pointer; font-size:var(--ns-s5); color:var(--ns-ink-3);
  text-decoration:underline; text-decoration-color:var(--ns-line-2); text-underline-offset:4px}
.ns-clear:hover{color:var(--ns-ink)}
.ns-clear[hidden]{display:none}
.ns-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- телефон: слои друг под другом, линия года вертикальная ---------- */
.ns.ns-v .ns-stage{height:auto}
.ns.ns-v .ns-layer{position:relative; left:auto; right:auto; top:auto; width:100%}
.ns.ns-v .ns-past{height:560px}
.ns.ns-v .ns-next{height:400px; margin-top:-24px}
.ns.ns-v .ns-hd{left:24px; right:24px; top:24px}
.ns.ns-v .ns-next .ns-hd{left:24px; right:24px; top:auto; bottom:58px}
.ns.ns-v .ns-back{transform:scale(.97)}
.ns.ns-v .ns-past.ns-back{transform:scale(.97)}
.ns.ns-v .ns-end{margin-top:28px; gap:20px}
.ns.ns-v .ns-cta{width:100%; justify-content:center}
.ns.ns-v .ns-foot{flex-direction:column; gap:10px}

@media (prefers-reduced-motion:reduce){
  .ns-layer,.ns-ghost,.ns-focus,.ns-ring,.ns-cta{transition:none}
  .ns-pt.is-new::after,.ns-end,.ns-ghost i,.ns-nudge .ns-past.ns-front{animation:none !important}
  .ns-links path{animation:none; opacity:1}
}