/* ---------- CSS-vars ---------- */
:root{
      --bg-main:#000;
      --text-main:#f4f6fa;
      --accent-a:#00e1ff;
      --accent-b:#ff5e6c;
      --accent-c:#ffd166;
      --radius:12px;
      --shadow-lg:0 12px 34px rgba(0,0,0,.55);
      --bg-dynamic:var(--bg-main);
      --contact-bg:linear-gradient(135deg,#121f46 0%,#0d1328 100%);
}

/* светлая схема */
.light-skin{
  --bg-main:#f0f8ff;
  --text-main:#1a1a1a;
  --accent-a:#6bbfff;
  --accent-b:#94d1ff;
  --accent-c:#cde9ff;
  --contact-bg:linear-gradient(135deg,#eaf6ff 0%,#d0ecff 100%);
}

.hidden{display:none}

/* кнопка переключения темы */
#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;
}
#themeToggle:hover{background:rgba(255,255,255,.2)}
#themeToggle svg{width:20px;height:20px;fill:var(--accent-a)}
.light-skin #themeToggle svg{fill:var(--accent-b)}

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

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

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

    /* базовый сброс + типографика */
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%;scroll-behavior:smooth}
    body{
      font-family:"Inter",sans-serif;line-height:1.6;
      background:var(--bg-dynamic);color:var(--text-main);
      transition:background .8s ease;scroll-snap-type:y mandatory;overflow-y:scroll;
      position:relative;
    }

    body.light-skin{
      background:linear-gradient(to bottom,#eaf6ff,#cde4ff);
    }
    a{color:var(--accent-a)} a:hover{text-decoration:underline}

    /* Единый стиль карточек */
    .card{
      backdrop-filter:blur(14px) saturate(170%);
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius);
      box-shadow:var(--shadow-lg);
    }

    /* particle background */
    #particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    /* Добавьте анимацию движения */
    @keyframes float {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(5px, -10px); }
      50% { transform: translate(0, 10px); }
      75% { transform: translate(-5px, 0); }
    }
    .light-skin #particles{display:none}

    /* particles in hero */
    #hero-particles{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:-1;
    }
    .light-skin #hero-particles{display: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;animation:blink 1.1s infinite alternate}
    @keyframes blink{to{opacity:.3}}

/* ===== 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}
    #clouds{position:absolute;inset:0;
      background:url('clouds.svg') repeat-x;
      background-size:auto 100%;
      animation:moveClouds 60s linear infinite;
      z-index:-2;display:none}
    .light-skin #clouds{display:block}
    #mountains{
      display:none;
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-3;
      background:url('landscape-vertical.svg') center/cover no-repeat;
    }
    @media (min-width:1024px){
      #mountains{background-image:url('mountains-field.svg')}
    }
    .light-skin #mountains{display:block}
      .moon{width:230px;height:230px;border-radius:50%;background:radial-gradient(circle at 28% 35%,#e9e9e9 0%,#c7c7c7 55%,#9b9b9b 100%);
        box-shadow:0 0 46px 8px #fff7;display:flex;justify-content:center;align-items:center;animation:float-moon 9s ease-in-out infinite alternate}
    .moon span{font-size:2.25rem;font-weight:700;color:#151515;letter-spacing:5px;font-family:'Playfair Display',serif}
    .light-skin .moon{background:radial-gradient(circle at 28% 35%,#fffcd1 0%,#ffe88a 55%,#ffc938 100%);box-shadow:0 0 46px 8px #ffef8a;}
      @keyframes float-moon{0%{transform:translateY(-9px)}100%{transform:translateY(9px)}}
    @keyframes moveClouds{from{background-position:0 0}to{background-position:-1600px 0}}
    .subtitle{margin-top:30px;opacity:.85;font-style:italic;max-width:540px}
    .scroll-cue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:.9rem;color:var(--accent-c);animation:bounce 3s infinite}
    @keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

    /* 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{color:var(--accent-c);margin-bottom:12px}

    /* ===== 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)}

    /* ===== 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}

  /* Луна-логотип поменьше, чтобы поместилась без скролла */
  .moon{width:160px;height:160px}

  /* карточки портфолио — одна колонка и меньший 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}
}

    :root{
      --bg-dark : #000;
      --bg-light: #f9f8f5;
      --text-dark: #242424;
      --text-light:#ffffff;
      --accent   : #b59d7a;
    }

    /* базовые стили страницы */
    html,body{
      min-height:100%;
      margin:0;
      background:var(--bg-dark);
      color:#d1d5db;           /* мягкий off-white по умолчанию */
      font-family:'Inter',sans-serif;
      -webkit-font-smoothing:antialiased;
    }

    /* светлая «шкурка» для Aurora */
    .light-skin{
      background:var(--bg-light);
      color:var(--text-dark);
    }
    .light-skin :where(a,strong,h1,h2,h3,h4,h5,h6){color:inherit;} /* наследуем */

    /* старинная рамка */
    .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;}

@keyframes marquee {
  0%   { transform: translateX(0);   }
  100% { transform: translateX(-50%);}
}
.animate-marquee {
  animation: marquee 25s linear infinite;
}

/* === Light theme tweaks === */
.light-skin .moon span{
  color:#2a2a2a;
}
.light-skin .card{
  background:#e0f2ff;
  color:var(--text-main);
  border:1px solid rgba(0,0,0,.1);
}
.light-skin .card:hover{
  background:var(--accent-c);
}
.light-skin .project-card .descr{
  color:var(--text-main);
}
.light-skin #about h2{color:#000}
.light-skin #contact .contact-chip span{color:#000}

/* ===== CryptoInfo light mode ===== */
#crypto-info.light-mode{background:linear-gradient(to bottom right,#f7f7f7,#e2e4e8);color:#1a1a1a;}
#crypto-info.light-mode a{color:inherit;}