/* Bukkake Chiron — стили визитки */
:root {
  --bg: #050505;
  --fg: #f2f2f2;
  --dim: #8a8a8a;
  --line: rgba(255, 255, 255, .14);
  --panel: rgba(255, 255, 255, .03);
  --alert: #e56458;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Фон ---------- */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay; opacity: .5;
}
.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .06; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 10% { transform: translate(-4%, -4%); } 20% { transform: translate(3%, -2%); }
  30% { transform: translate(-3%, 4%); } 40% { transform: translate(2%, 3%); } 50% { transform: translate(-2%, -3%); }
  60% { transform: translate(4%, 2%); } 70% { transform: translate(-4%, 3%); } 80% { transform: translate(3%, -4%); }
  90% { transform: translate(-2%, 2%); } 100% { transform: translate(0, 0); }
}

/* ---------- HUD по углам ---------- */
.hud { position: fixed; z-index: 5; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 2px; color: var(--dim); padding: 14px 18px; text-transform: uppercase; user-select: none; }
.hud--tl { top: 0; left: 0; } .hud--tr { top: 0; right: 0; } .hud--bl { bottom: 0; left: 0; } .hud--br { bottom: 0; right: 0; }
.hud--tl, .hud--tr, .hud--br { text-transform: none; }
.clock {
  display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  color: var(--dim); font: inherit; letter-spacing: 2px; transition: color .2s; border-bottom: 1px dashed rgba(255,255,255,.25);
}
.clock:hover, .clock:focus-visible { color: var(--fg); outline: none; border-bottom-color: var(--fg); }
.clock__ico { font-size: 13px; }
.clock__hint { color: var(--fg); opacity: .55; font-size: 10px; }
.clock:hover .clock__hint { opacity: 1; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.status--online .status__dot { background: #fff; animation: pulse 1.8s infinite; }
.status--offline .status__dot { background: #4a4a4a; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Карточка ---------- */
.card { position: relative; z-index: 4; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 72px 20px; perspective: 1000px; }
.card__inner {
  position: relative; width: min(420px, 92vw); padding: 44px 34px 38px; text-align: center;
  background: linear-gradient(160deg, #101010, #070707 60%, #0a0a0a);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.75);
  transition: transform .15s ease-out;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
/* угловые скобки */
.card__inner::before, .card__inner::after { content: ""; position: absolute; width: 26px; height: 26px; border: 1px solid var(--fg); }
.card__inner::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card__inner::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- Аватар ---------- */
.avatar { display: flex; justify-content: center; margin-bottom: 26px; }
.avatar__frame { position: relative; width: 128px; height: 128px; border: 1px solid var(--line); overflow: hidden; }
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.avatar__img--r, .avatar__img--b { mix-blend-mode: screen; opacity: 0; }
.avatar__frame:hover .avatar__img--r { opacity: .6; animation: shiftR .4s steps(2) infinite; }
.avatar__frame:hover .avatar__img--b { opacity: .6; animation: shiftB .4s steps(2) infinite; }
@keyframes shiftR { 0% { transform: translate(2px, -2px); } 100% { transform: translate(-2px, 2px); } }
@keyframes shiftB { 0% { transform: translate(-2px, 2px); } 100% { transform: translate(2px, -2px); } }
/* глитч при смене аватара */
.avatar__frame.glitching .avatar__img { animation: flick .09s steps(2) 6; }
.avatar__frame.glitching .avatar__img--r { opacity: .75; animation: shiftR .1s steps(2) infinite; }
.avatar__frame.glitching .avatar__img--b { opacity: .75; animation: shiftB .1s steps(2) infinite; }
.avatar__frame.glitching::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0, rgba(255,255,255,.18) 2px, transparent 2px, transparent 5px);
  mix-blend-mode: screen; animation: slideDown .3s linear infinite;
}
@keyframes flick { 0% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(40% 0 20% 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes slideDown { from { background-position: 0 0; } to { background-position: 0 12px; } }

/* ---------- Имя + глитч ---------- */
.name { font-size: clamp(26px, 7vw, 40px); font-weight: 700; letter-spacing: 3px; line-height: 1.05; margin-bottom: 16px; position: relative; text-transform: uppercase; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: #fff; clip-path: inset(0 0 55% 0); transform: translate(-2px, -1px); opacity: .85; mix-blend-mode: screen; }
.glitch::after { color: #bdbdbd; clip-path: inset(55% 0 0 0); transform: translate(2px, 1px); opacity: .85; mix-blend-mode: screen; }
.glitch:hover::before { animation: gl1 .3s steps(2) infinite; }
.glitch:hover::after { animation: gl2 .3s steps(2) infinite; }
@keyframes gl1 { 0% { transform: translate(-2px, -1px); } 50% { transform: translate(-5px, 1px); } 100% { transform: translate(-1px, -2px); } }
@keyframes gl2 { 0% { transform: translate(2px, 1px); } 50% { transform: translate(5px, -1px); } 100% { transform: translate(1px, 2px); } }

/* ---------- Ник / био ---------- */
.handle { font-family: "JetBrains Mono", monospace; font-size: 16px; letter-spacing: 2px; color: var(--fg); margin-bottom: 16px; min-height: 22px; }
.caret { animation: blink 1s steps(2) infinite; color: var(--fg); }
@keyframes blink { 50% { opacity: .15; } }
.bio { font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--dim); letter-spacing: 3px; margin-bottom: 12px; }

/* ---------- Локация ---------- */
.loc {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--fg);
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 2px; margin-bottom: 22px; padding: 4px 2px;
  border-bottom: 1px dashed rgba(255,255,255,.25); transition: color .2s, border-color .2s;
}
.loc:hover, .loc:focus-visible { color: #fff; border-bottom-color: #fff; outline: none; }
.loc__ico { width: 15px; height: 15px; fill: currentColor; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.loc__hint { color: var(--dim); font-size: 10px; }
.loc:hover .loc__hint { color: var(--fg); }

.divider { position: relative; height: 1px; margin: 0 auto 28px; width: 80%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); }

/* ---------- Кнопки-ссылки ---------- */
.links { display: flex; flex-direction: column; gap: 14px; }
.btn {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-decoration: none; color: var(--fg);
  border: 1px solid var(--line); background: var(--panel); font-family: "JetBrains Mono", monospace; letter-spacing: 2px;
  overflow: hidden; transition: color .25s, border-color .25s; min-height: 52px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateX(-101%); transition: transform .35s cubic-bezier(.7, 0, .2, 1); z-index: 0; }
.btn:hover, .btn:focus-visible { color: var(--bg); border-color: var(--fg); outline: none; }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn > * { position: relative; z-index: 1; }
.btn__icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.btn__text { font-size: 14px; font-weight: 700; }
.btn__val { margin-left: auto; font-size: 12px; opacity: .7; }

.footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); padding: 12px; text-align: center; text-transform: uppercase; }

/* ---------- Прелоадер ---------- */
.preloader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .6s, visibility .6s; }
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader__text { font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 10px; color: var(--fg); }
.preloader__bar { width: 220px; height: 2px; background: var(--line); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--fg); }
.preloader__pct { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 3px; color: var(--dim); }

/* пошаговое появление */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

/* ---------- Модалки ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal__box {
  position: relative; width: min(400px, 94vw); background: linear-gradient(180deg, rgba(20,20,20,.98), rgba(8,8,8,.98));
  border: 1px solid var(--line); color: var(--fg); transform-origin: center center;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
/* открытие/закрытие в стиле macOS */
.modal.open .modal__box { animation: mopen .36s cubic-bezier(.2, .85, .25, 1.15); }
.modal.closing .modal__box { animation: mclose .22s cubic-bezier(.4, 0, 1, 1) forwards; }
.modal.closing .modal__backdrop { animation: mbackout .22s ease forwards; }
@keyframes mopen { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes mclose { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.82); } }
@keyframes mbackout { from { opacity: 1; } to { opacity: 0; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; }
.modal__status { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.modal__status.is-open { color: #fff; } .modal__status.is-closed { color: var(--alert); }
.modal__title { font-size: 13px; color: var(--dim); letter-spacing: 2px; margin-top: 4px; text-transform: uppercase; }
.modal__close { background: none; border: 0; color: var(--dim); font-size: 26px; line-height: 1; cursor: pointer; transition: color .2s; padding: 0 4px; }
.modal__close:hover, .modal__close:focus-visible { color: var(--fg); outline: none; }
.modal__note { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--dim); letter-spacing: 1px; padding: 10px 22px 20px; opacity: .75; }

/* ---------- График ---------- */
.sched { padding: 4px 22px 2px; }
.sched-hero {
  display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.sched-hero__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.sched-hero.is-open .sched-hero__dot { background: #fff; animation: pulse 1.8s infinite; }
.sched-hero.is-closed .sched-hero__dot { background: var(--alert); }
.sched-hero__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sched-hero__status { font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.sched-hero.is-open .sched-hero__status { color: #fff; }
.sched-hero.is-closed .sched-hero__status { color: var(--alert); }
.sched-hero__sub { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .5px; color: var(--dim); }
.sched-week { display: flex; flex-direction: column; }
.swk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.swk-row:last-child { border-bottom: 0; }
.swk-row.is-today { background: rgba(255,255,255,.06); border-left: 2px solid #fff; padding-left: 14px; }
.swk-day { font-size: 13px; letter-spacing: .5px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.swk-row.is-today .swk-day { color: #fff; font-weight: 500; }
.swk-tag { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 1px; color: var(--bg); background: #fff; padding: 2px 6px; border-radius: 2px; }
.swk-val { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .5px; color: var(--fg); white-space: nowrap; }
.swk-val.off { color: #6a6a6a; }

/* ---------- Карта ---------- */
.modal__box--map { width: min(440px, 94vw); }
.mapwrap { position: relative; margin: 2px 22px 0; height: 260px; border: 1px solid rgba(255,255,255,.1); overflow: hidden; background: #070707; }
#mapCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-scan {
  position: absolute; left: 0; right: 0; height: 60px; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.06));
  animation: mapscan 3.4s linear infinite; mix-blend-mode: screen;
}
@keyframes mapscan { 0% { top: -60px; } 100% { top: 100%; } }
.map-coords { position: absolute; left: 10px; bottom: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1px; color: #fff; text-shadow: 0 0 6px #000; z-index: 3; }
.map-place { position: absolute; right: 10px; top: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 3px; color: var(--dim); z-index: 3; }
.map-open { margin: 16px 22px 20px; justify-content: center; text-align: center; }
.map-open .btn__text { margin: 0 auto; }

/* ---------- Адаптив ---------- */
@media (max-width: 520px) {
  .hud { font-size: 9px; letter-spacing: 1px; padding: 10px 12px; }
  .clock__hint { font-size: 9px; }
  .card { padding: 64px 16px 72px; }
  .card__inner { padding: 34px 20px 28px; }
  .name { letter-spacing: 4px; }
  .avatar__frame { width: 112px; height: 112px; }
  .btn__val { display: none; }
  .footer { display: none; }
  .mapwrap { height: 220px; }
}
@media (max-width: 360px) {
  .hud--tr { font-size: 8px; }
  .name { font-size: 30px; letter-spacing: 3px; }
}
@media (hover: none) { .card__inner { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal-init { opacity: 1; transform: none; }
}