/* Глобальные настройки */
body {
    font-family: 'Noto Sans', sans-serif;
    overflow-x: clip; 
  }
  
  /* Облака */
  @keyframes cloudMoveRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100vw); }
  }
  @keyframes cloudMoveLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100vw); }
  }
  .cloud-01-top { animation: cloudMoveRight 100s linear infinite; }
  .cloud-01-bottom { animation: cloudMoveLeft 120s linear infinite; }
  .cloud-02 { animation: cloudMoveLeft 60s linear infinite; }
  .cloud-03 { animation: cloudMoveRight 80s linear infinite; }
  
  /* Появление текста на главном экране */
  @keyframes dropIn {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .hero-elem {
    opacity: 0;
    animation: dropIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  /* Анимации для карточек героев (понадобятся позже) */
  @keyframes revealBlack {
    from { filter: brightness(0); }
    to { filter: brightness(1); }
  }
  @keyframes revealWhite {
    from { filter: brightness(10) contrast(0); }
    to { filter: brightness(1) contrast(1); }
  }
  .reveal-black { animation: revealBlack 3s ease-out forwards; }
  .reveal-white { animation: revealWhite 3s ease-out forwards; }
  
  .timeline-desc-hover:hover {
    background: linear-gradient(to bottom, #111111, #A33B2D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* Затемнение для секции about */
  #about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.80); 
    z-index: 10;
  }
  #about::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 45%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 100%);
    z-index: 10;
  }