/* skript. — design tokens, components, animations. Shared by index.html, python.html, javascript.html. */
:root { 
  color-scheme: dark; 
  
  /* --- ИЕРАРХИЯ ФОНОВ (От глубокого к светлому) --- */
  --bg-base: #050505;      /* 1. Самый глубокий фон (почти черный) */
  --bg-section: #111113;   /* 2. Фон для чередующихся блоков (чтобы разбить страницу) */
  --bg-surface: #1C1C1E;   /* 3. Терминалы, подложки для кода, боковые панели */
  --bg-card: #28282C;      /* 4. Карточки проектов, кнопки (самые светлые) */
  
  /* Линии и текст */
  --border-color: #333338; /* Мягкие, едва заметные разделители */
  --text-main: #F5F5F7;    /* Мягкий белый (не бьет по глазам) */
  --text-muted: #A1A1A6;   /* Спокойный серый для второстепенного текста */
  --accent: #0071E3;       /* Твой фирменный синий */
}

body { 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
  background-color: var(--bg-base); /* Применяем самый глубокий фон ко всему сайту */
  color: var(--text-main);
}
  html{ scroll-behavior: smooth; }
  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; }

  /* 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{ 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-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; }

  .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); }

  /* less-transparent variant, used for the floating hero chips that sit on busy backgrounds */
  .token-tag.chip-solid.token-fn{ background:rgba(13,138,128,.22); border-color:rgba(13,138,128,.45); }
  .token-tag.chip-solid.token-str{ background:rgba(180,83,9,.22); border-color:rgba(180,83,9,.45); }

  .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; }

  .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; }

  @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; }
  }

  .img-tile{ background: linear-gradient(135deg, #F5F5F2, #E9E9E2); }

  /* speech-bubble tail pointing out to the right, like a chat message */
  .speech-bubble-right{ position: relative; }
  .speech-bubble-right::after{
    content:'';
    position:absolute;
    right:-18px;
    bottom:36px;
    width:0;
    height:0;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    border-left:18px solid #F5F5F2;
    filter: drop-shadow(2px 2px 1px rgba(20,20,26,0.04));
  }
  @media (max-width: 640px){
    .speech-bubble-right::after{ right:-12px; border-left-width:12px; border-top-width:10px; border-bottom-width:10px; }
  }


  /* Базовая секция (самая темная) */
.section-base {
  background-color: var(--bg-base);
}

/* Чередующаяся секция (чуть светлее) */
.section-alt {
  background-color: var(--bg-section);
  /* Добавляем тонкие линии сверху и снизу для идеального отделения */
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}