/* Хэллоуин: всё под html.hw, класс ставит hw.js (до 3 ноября). Без класса файл ничего не меняет. */
html.hw { --bg: #07040c; --hw-orange: #ff8a1f; --hw-lilac: #b79be6; }
html.hw body { background: #07040c; }

html.hw .aurora i:nth-child(1) { background: radial-gradient(circle, #3d2760 0%, transparent 65%); }
html.hw .aurora i:nth-child(2) { background: radial-gradient(circle, #24173a 0%, transparent 65%); }
html.hw .aurora i:nth-child(3) { background: radial-gradient(circle, rgba(255, 138, 31, .55) 0%, transparent 62%); opacity: .22; }
html.hw .aurora i:nth-child(4) { background: radial-gradient(circle, #3d8462 0%, transparent 65%); opacity: .2; }

html.hw h1 em, html.hw h2 em {
  background-image: linear-gradient(100deg, #ffd27a 0%, var(--hw-orange) 40%, #ffb054 70%, var(--hw-lilac) 100%);
}
html.hw .btn-main {
  color: #1a0f05;
  background: linear-gradient(135deg, #ffd9a0 0%, #ffa94d 45%, #e0681c 100%);
  box-shadow: 0 10px 30px -8px rgba(255, 138, 31, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html.hw .btn-main:hover { box-shadow: 0 16px 40px -10px rgba(255, 138, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .6); }
html.hw .eyebrow .dot { background: var(--hw-orange); animation-name: hwping; }
@keyframes hwping { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 31, .6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255, 138, 31, 0); } }
html.hw .hero-trust svg { stroke: var(--hw-orange); }

/* первый экран: рендер вместо живого узла */
html.hw .hero-knot { cursor: default; }
html.hw .hero-knot .knot-canvas, html.hw .hero-knot .knot-status { display: none; }
html.hw .hero-knot::before { display: none; }
.hw-scene {
  position: absolute; inset: 0;
  background: url(site.jpg) 96% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent), linear-gradient(90deg, transparent 0%, #000 34%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 82%, transparent), linear-gradient(90deg, transparent 0%, #000 34%);
  mask-composite: intersect;
  animation: hwin 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.hw-scene::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(40% 50% at 64% 74%, rgba(255, 150, 60, .16), transparent 70%);
  mix-blend-mode: screen; animation: hwflicker 3.4s infinite;
}
@keyframes hwin { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes hwflicker { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 44% { opacity: .45; } 48% { opacity: .9; } 72% { opacity: .7; } }

html.hw .final {
  background:
    radial-gradient(70% 110% at 85% 50%, rgba(255, 138, 31, .26), transparent 62%),
    radial-gradient(50% 80% at 0% 100%, rgba(183, 155, 230, .18), transparent 60%),
    radial-gradient(40% 50% at 40% 0%, rgba(61, 39, 96, .55), transparent 70%),
    linear-gradient(135deg, #1a1129, #07040c);
  border-color: rgba(255, 138, 31, .26);
  box-shadow: 0 60px 120px -60px rgba(255, 138, 31, .38);
}

@media (max-width: 860px) {
  .hw-scene {
    background-image: url(square.jpg); background-position: 50% 42%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw-scene, .hw-scene::after { animation: none; }
}