/* кнопка переключения темы */
#themeToggle{
  position:fixed;
  top:20px;right:20px;
  padding:8px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  cursor:pointer;
  z-index:1000;
  transition:background .3s;
  overflow:hidden;
}
#themeToggle:hover{background:rgba(255,255,255,.2)}
#themeToggle svg{width:20px;height:20px;fill:var(--accent-a)}

#themeToggle::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:100%;
  height:100%;
  border-radius:50%;
  background:radial-gradient(circle,var(--accent-a),var(--accent-b));
  transform:translate(-50%,-50%) scale(0);
  opacity:.6;
  transition:transform .4s ease,opacity .4s ease;
  pointer-events:none;
}
#themeToggle:hover::after{
  transform:translate(-50%,-50%) scale(2.4);
  opacity:0;
}

/* ---------- CURSOR BEHAVIOUR ---------- */

/* По-умолчанию (мышь/трекпад) полностью прячем системный курсор */
body{cursor:none}

/* На устройствах с "грубым" указателем (touch) возвращаем системный    */
/* курсор и выключаем наш #cursor, чтобы ничего не мигало и не мешало   */
@media (pointer: coarse) {
  body{cursor:auto}
  #cursor{display:none}
}

    /* particle background */
    #particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Use a non-negative stacking order so the canvas isn't hidden
         behind the body's background on initial page load */
      z-index: 0;
      pointer-events: none;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    /* Добавьте анимацию движения */
    @media (prefers-reduced-motion: no-preference){
      @keyframes float {
        0%, 100% { transform: translate(0, 0); }
        25% { transform: translate(5px, -10px); }
        50% { transform: translate(0, 10px); }
        75% { transform: translate(-5px, 0); }
      }
    }
    @media (prefers-reduced-motion: reduce){
      .particle{animation:none;}
    }
    /* ===== PRELOADER ===== */
    #preloader{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:#000;
      z-index:9999;transition:opacity .6s,visibility .6s}
    #preloader.hidden{opacity:0;visibility:hidden}
    #preloader span{font-size:2.5rem;color:var(--accent-a);letter-spacing:4px;}
    @media (prefers-reduced-motion: no-preference){
      #preloader span{animation:blink 1.1s infinite alternate}
      @keyframes blink{to{opacity:.3}}
    }
    @media (prefers-reduced-motion: reduce){
      #preloader span{animation:none}
    }

/* ===== CUSTOM CURSOR (fixed) ===== */
#cursor{
  position:fixed;
  top:0;left:0;
  width:20px;height:20px;
  border:2px solid var(--accent-a);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;

  /* перемещается моментально → без transition */
  transform:translate3d(-50%,-50%,0);

  /* плавно меняем ТОЛЬКО цвет рамки */
  transition:border-color .25s;

  /* подсказка движку: этот элемент часто двигается */
  will-change:transform;
}

/* когда нужен «большой» курсор — анимируем масштаб */
.hover-big #cursor{
  transform:translate3d(-50%,-50%,0) scale(1.8);
  transition:transform .12s ease-out, border-color .25s;
}

/* ссылка подсвечивает рамку — тут ничего менять не нужно */
.cursor-link:hover ~ #cursor{
  border-color:var(--accent-c);
}


    /* ===== NAV DOTS ===== */
    #nav-dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:100}
    #nav-dots button{width:10px;height:10px;border-radius:50%;background:#555;border:none;cursor:pointer;transition:.3s}
    #nav-dots button.active{background:var(--accent-b);transform:scale(1.4)}

    /* ===== HERO ===== */
    .hero{scroll-snap-align:start;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden;z-index:0}
    #sky{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      display:none;
    }
    .light-skin #sky{display:block}
    #sky svg{width:100%; height:100%;}
    .moon{
      width:230px;
      height:230px;
      border-radius:50%;
      overflow:hidden;
    }
    .scroll-cue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:.9rem;color:var(--accent-c);}
    @media (prefers-reduced-motion: no-preference){
      .scroll-cue{animation:bounce 3s infinite}
      @keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
    }
    @media (prefers-reduced-motion: reduce){
      .scroll-cue{animation:none;transform:translate(-50%,0)}
    }

    /* landscape container */
    #landscape{display:none}



    /* ===== COMMON SECTION ===== */
    section{padding:80px 10%;scroll-snap-align:start}
    /* ===== ABOUT ===== */
    .about-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    .about-card{padding:26px;border-left:4px solid var(--accent-a);transition:.35s}
    .about-card:hover{transform:translateY(-8px)}
    .about-card h3{margin-bottom:12px}
    .about-card:nth-child(1) h3{color:var(--about-skill-color)}
    .about-card:nth-child(2) h3{color:var(--about-approach-color)}
    .about-card:nth-child(3) h3{color:var(--about-goal-color)}

    /* ===== PORTFOLIO GRID ===== */
    .projects-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
    .project-card{position:relative;overflow:hidden;transition:.45s}
    .project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,.65),0 0 22px var(--accent-a)}
    .preview-wrapper{aspect-ratio:16/9;overflow:hidden}
    .preview-wrapper img{width:100%;height:100%;object-fit:cover}
    .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:20px;
      background:linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.75));opacity:0;transform:translateY(20%);transition:.4s}
    .project-card:hover .overlay{opacity:1;transform:translateY(0)}
    .overlay a{background:var(--accent-a);padding:12px 28px;border-radius:var(--radius);font-weight:600;color:#000;text-decoration:none}
    .overlay a:hover{background:var(--accent-c)}
    .project-card header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 0}
    .project-card h3{font-size:clamp(1.4rem,1.1vw+1rem,2rem);color:var(--accent-a)}
    .project-card span{font-size:.9rem;color:var(--accent-c)}
    .project-card .descr{padding:14px 20px 26px;font-size:.95rem;color:rgba(255,255,255,.85)}

    .light-skin .card,
    .light-skin .project-card {
      background: var(--card-bg-light);
      color: var(--card-text-light);
    }
    .light-skin .project-card .descr { color: var(--card-text-light); }

    /* ===== CONTACT SECTION (NEW STYLE) ===== */
    .contact-wrapper{
      max-width:1100px;margin:0 auto;
      padding:60px 50px;display:grid;gap:60px;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    }
    .contact-info ul{list-style:none;display:grid;gap:22px}
    .contact-chip{display:flex;align-items:center;gap:14px;padding:12px 18px;transition:.3s}
    .contact-chip:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 14px var(--accent-a,.6)}
    .contact-chip svg{flex:none;width:26px;height:26px;fill:var(--accent-a)}
    .contact-chip span{font-size:.95rem}
    .contact-form input,.contact-form textarea{
      width:100%;padding:12px 15px;background:#1c2541;color:#fff;
      border:none;border-bottom:2px solid #334;border-radius:4px;margin-bottom:16px;
    }
    .contact-form textarea{resize:vertical}
    .contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:var(--accent-b)}
    .contact-form button{width:100%;padding:14px;background:var(--accent-b);color:#000;font-weight:600;
      border:none;border-radius:4px;cursor:pointer;transition:.3s}
    .contact-form button:hover{background:var(--accent-a)}

    /* ===== FADE ANIMATION ===== */
    .fade{opacity:0;transform:translateY(70px);transition:.9s}
    .fade.show{opacity:1;transform:none}

    /* ===== FOOTER ===== */
    footer{background:#05070e;border-top:1px solid rgba(0,225,255,.08);
      text-align:center;padding:26px 0;font-size:.9rem;color:#6c6c79}

/* ==== SUPPORT BLOCK ==== */
#support {
    display: none; /* Это правило скроет всю секцию поддержки */
}
    
.support-block {
  max-width: 430px;
  margin: 0 auto;
  padding: 40px 34px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.support-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.progress-bar {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--accent-a);
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.progress-separator {
  color: #fff6;
  font-size: 1.6rem;
}
.progress-bg {
  width: 100%;
  height: 14px;
  border-radius: 7px;
  background: #222c49;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  border-radius: 7px;
  width: 0;
  transition: width 0.7s cubic-bezier(.55,1.5,.58,1);
}
.support-desc {
  font-size: 1.09rem;
  color: #e0e4f7c4;
  text-align: center;
  margin-bottom: 18px;
}
.support-btn {
  padding: 14px 44px;
  background: var(--accent-a);
  color: #151b2f;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  font-size: 1.09rem;
  text-decoration: none;
  transition: background .18s, color .18s, box-shadow .18s;
  box-shadow: 0 4px 16px rgba(0,225,255,.13);
}
.support-btn:hover {
  background: var(--accent-b);
  color: #fff;
}
@media (max-width: 600px) {
  .support-block { padding: 26px 10px 18px }
  .progress-bar { font-size: 1.4rem }
}

    
    /* ===== MOBILE TWEAKS ===== */
@media (max-width:600px){

  /* отступы секций чуть меньше, чтобы контент не "утекал" под экранную клавиатуру */
  section{padding:60px 6%}

  /* заголовки короче, чтобы не было длинных переносов */
  .hero h1{font-size:2.4rem}
  section h2{font-size:1.8rem}

  /* карточки портфолио — одна колонка и меньший min-width */
  .projects-grid{grid-template-columns:1fr;gap:28px}
  .projects-grid .project-card{max-width:460px;margin:0 auto}

  /* сетка "Обо мне" — тоже одна колонка */
  .about-grid{grid-template-columns:1fr}

  /* контактная карточка растягивается на всю ширину */
  .contact-wrapper{grid-template-columns:1fr;padding:40px 28px}
}
    /* старинная рамка */
    .oldframe{
      color:var(--text-dark);
      background:linear-gradient(145deg,#d6b072 70%,#b08c52 100%);
      border:8px solid #be9978;
      border-radius:22px;
      box-shadow:0 10px 32px #c2a16a99,0 2px 0 #fff7d4 inset;
      padding:6px;
      position:relative;
    }
    .oldframe:after{
      content:'';
      position:absolute;inset:0;
      border-radius:18px;
      border:2px solid #ffffff99;
      pointer-events:none;
    }

    /* подложка под подписи фото */
    .photo-caption-gradient{
      position:absolute;inset:0;
      background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 40%,transparent);
      opacity:0;transition:opacity .4s ease;
    }
    .group:hover .photo-caption-gradient{opacity:1;}

@media (prefers-reduced-motion: no-preference){
  @keyframes marquee {
    0%   { transform: translateX(0);   }
    100% { transform: translateX(-50%);}
  }
  .animate-marquee {
    animation: marquee 25s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce){
  .animate-marquee{animation:none}
}

/* === Light theme tweaks === */

/* ===== CryptoInfo light mode ===== */
/* Gallery page helpers */
.center-card{text-align:center;padding:40px;}
.chart-card{margin-top:30px;padding:20px;}
.ticker-card{margin-bottom:20px;padding:10px;text-align:center;}
.news-content{padding:24px;display:flex;flex-direction:column;gap:12px;}
.ticker-item{display:flex;align-items:center;gap:8px;}
.ticker-icon{width:20px;height:20px;}
.ticker-price{font-family:monospace;}
.price-up{color:#22c55e;}
.price-down{color:#ef4444;}
.fade-hide{opacity:0;}
.fade-show{opacity:1;}
.slide-down{transform:translateY(2.5rem);}
.slide-none{transform:translateY(0);}
.transition-base{transition:all .2s;}
.duration-slow{transition-duration:.7s;}
.ease-out-smooth{transition-timing-function:ease-out;}