/* ===== Глобальные ===== */
:root{ color-scheme: light; }
html{ scroll-behavior: smooth; }
body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
section[id]{ scroll-margin-top: 88px; }
[x-cloak]{ display:none !important; }
::selection{ background:#0071E3; color:#fff; }
:focus-visible{ outline: 2px solid #0071E3; outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background:#E1E1DB; border-radius:999px; border:2px solid #fff; }
::-webkit-scrollbar-thumb:hover{ background:#C7C7C0; }

/* ===== TICKER ===== */
.ticker-wrap{ overflow:hidden; white-space:nowrap; }
.ticker-track{ display:inline-flex; align-items:center; animation: ticker 26s linear infinite; will-change: transform; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-wrap:hover .ticker-track{ animation-play-state: paused; }

/* Добавить в styles.css если нет */
.accent { color: #0071E3; }
.bg-accent { background: #0071E3; }
/* и т.д. — или просто используйте готовый styles.css */

/* ===== REVEAL ===== */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

[data-line-fill]{ width:0%; transition: width 1.3s cubic-bezier(.16,1,.3,1) .25s; }
[data-line-fill].is-visible{ width:100%; }

/* ===== CAROUSELS ===== */
.carousel-track{ scrollbar-width:none; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{ scroll-snap-align:center; }
.carousel-dot{ width:6px; height:6px; border-radius:999px; background:#E1E1DB; transition: all .3s ease; cursor:pointer; }
.carousel-dot.active{ background:#14141A; width:20px; }

/* ===== BLINK CURSOR ===== */
.blink-cursor{ display:inline-block; width:7px; height:1em; background:currentColor; margin-left:2px; vertical-align:text-bottom; animation: blink 1s step-start infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ===== CODE LINES (для IDE) ===== */
.code-line{ opacity:0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.tab-active .code-line{ opacity:1; transform:translateY(0); }
.code-line:nth-child(1){ transition-delay:.03s; } .code-line:nth-child(2){ transition-delay:.10s; }
.code-line:nth-child(3){ transition-delay:.17s; } .code-line:nth-child(4){ transition-delay:.24s; }
.code-line:nth-child(5){ transition-delay:.31s; } .code-line:nth-child(6){ transition-delay:.38s; }
.code-line:nth-child(7){ transition-delay:.45s; } .code-line:nth-child(8){ transition-delay:.52s; }

/* ===== ACCORDION ===== */
.acc-body{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1); }
.acc-body.open{ grid-template-rows:1fr; }
.acc-inner{ overflow:hidden; }

/* ===== CARDS & BUTTONS ===== */
.card-hover{ transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover{ transform: translateY(-4px); }
.btn-press{ transition: transform .15s ease, background-color .25s ease, box-shadow .25s ease; }
.btn-press:active{ transform: scale(.97); }

/* ===== CURSOR SPOTLIGHT ===== */
.spot-card{ position:relative; overflow:hidden; }
.spot-card::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background: radial-gradient(260px circle at var(--x,50%) var(--y,50%), rgba(0,113,227,0.10), transparent 70%); }
.spot-card:hover::before{ opacity:1; }

/* ===== TOKEN TAGS ===== */
.token-tag{ display:inline-flex; align-items:center; gap:.4em; font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; padding:.36em .75em; border-radius:.5em; border-width:1px; }
.token-comment{ color:#83838C; background:#F5F5F2; border-color:#E1E1DB; }
.token-keyword{ color:#8250DF; background:rgba(130,80,223,.10); border-color:rgba(130,80,223,.24); }
.token-fn{ color:#0D8A80; background:rgba(13,138,128,.10); border-color:rgba(13,138,128,.24); }
.token-type{ color:#0071E3; background:rgba(0,113,227,.10); border-color:rgba(0,113,227,.24); }
.token-num{ color:#15803D; background:rgba(21,128,61,.10); border-color:rgba(21,128,61,.24); }
.token-str{ color:#B45309; background:rgba(180,83,9,.10); border-color:rgba(180,83,9,.24); }
.token-cond{ color:#E11D6E; background:rgba(225,29,110,.10); border-color:rgba(225,29,110,.24); }

/* ===== HIGHLIGHTS ===== */
.hl{ background-image: linear-gradient(120deg, rgba(0,113,227,.18), rgba(0,113,227,.18)); background-repeat:no-repeat; background-size:100% 38%; background-position:0 86%; }
.hl-teal{ background-image: linear-gradient(120deg, rgba(13,138,128,.20), rgba(13,138,128,.20)); background-repeat:no-repeat; background-size:100% 38%; background-position:0 86%; color:#0D8A80; }
.hl-violet{ background-image: linear-gradient(120deg, rgba(130,80,223,.18), rgba(130,80,223,.18)); background-repeat:no-repeat; background-size:100% 38%; background-position:0 86%; color:#8250DF; }

/* ===== MISC ===== */
.dot-grid{ background-image: radial-gradient(rgba(20,20,26,0.08) 1px, transparent 1px); background-size: 22px 22px; }
.diff-line-plus{ background: rgba(26,127,55,0.06); border-left: 3px solid #1A7F37; }
.diff-line-minus{ background: rgba(207,34,46,0.05); border-left: 3px solid #CF222E; }
.img-tile{ background: linear-gradient(135deg, #F5F5F2, #E9E9E2); }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-line-fill]{ width:100% !important; transition:none !important; }
  .blink-cursor{ animation:none; opacity:1; }
  .code-line{ opacity:1 !important; transform:none !important; }
  .card-hover:hover{ transform:none; }
}

.spot-card.overflow-visible {
  overflow: visible;
}