/* ==========================================================
   Hero background (new_fon_1.jpg) + ambient animations
   Layers are laid out on a "stage" that has the image's aspect
   ratio and covers the hero; hero-fx.js sizes it.
   ========================================================== */

.section__hero {
  background-image: none;
  background-color: #070b18;
  overflow: hidden;
}

.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-fx__stage {
  position: absolute;
  left: var(--stage-x, 0px);
  top: var(--stage-y, 0px);
  width: var(--stage-w, 100%);
  height: var(--stage-h, 100%);
}

.hero-fx__img,
.hero-fx__glow,
.hero-fx__runes {
  position: absolute;
  inset: 0;
  background: url("new_fon_1.jpg") 0 0 / 100% 100% no-repeat;
}

/* before JS runs (or without it) the plain image still covers the hero */
.hero-fx:not(.is-ready) .hero-fx__stage { left: 0; top: 0; width: 100%; height: 100%; }
.hero-fx:not(.is-ready) .hero-fx__img { background-size: cover; background-position: 50% 50%; }

/* --- floating cards + castle windows: slow light pulse --- */
.hero-fx__glow {
  mix-blend-mode: screen;
  filter: contrast(2.4) brightness(.75) saturate(1.7) blur(2px);
  -webkit-mask-image: radial-gradient(60% 34% at 50% 58%, #000 55%, transparent 100%);
  mask-image: radial-gradient(60% 34% at 50% 58%, #000 55%, transparent 100%);
  opacity: 0;
  will-change: opacity;
  animation: fx-pulse 6.5s ease-in-out infinite;
}

/* --- runes on the floor: brighter, faster pulse --- */
.hero-fx__runes {
  mix-blend-mode: screen;
  filter: contrast(3.2) brightness(.7) saturate(2) blur(1.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 66%, #000 76%);
  mask-image: linear-gradient(180deg, transparent 66%, #000 76%);
  opacity: 0;
  will-change: opacity;
  animation: fx-pulse 4.2s ease-in-out infinite;
  animation-delay: -1.3s;
}

/* --- vortex: a copy of the swirl, un-squashed to a circle, rotated, squashed back --- */
.hero-fx__vortex {
  position: absolute;
  left: var(--vx);
  top: var(--vy);
  width: var(--vd);
  height: var(--vd);
  margin: calc(var(--vd) / -2) 0 0 calc(var(--vd) / -2);
  transform: scaleY(var(--vk));
  -webkit-mask-image:
    radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, .7) 74%, transparent 94%),
    linear-gradient(180deg, #000 49%, transparent 55%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, .7) 74%, transparent 94%),
    linear-gradient(180deg, #000 49%, transparent 55%);
  mask-composite: intersect;
}
.hero-fx__vx-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
/* outer arms sway a little, the core sways more: the spiral twists and untwists */
.hero-fx__vx-layer--outer { animation: fx-twist-outer 10s ease-in-out infinite; }
.hero-fx__vx-layer--inner {
  -webkit-mask-image: radial-gradient(closest-side, #000 28%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 28%, transparent 62%);
  animation: fx-twist-inner 10s ease-in-out infinite;
}
.hero-fx__vortex-img {
  position: absolute;
  left: var(--vix);
  top: var(--viy);
  width: var(--viw);
  height: var(--vih);
  background: url("new_fon_1.jpg") 0 0 / 100% 100% no-repeat;
}
/* energy streaks running around the spiral */
.hero-fx__vx-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(170, 190, 255, .0) 20deg, rgba(190, 205, 255, .55) 38deg, transparent 60deg,
    transparent 150deg, rgba(255, 210, 140, .45) 172deg, transparent 196deg,
    transparent 250deg, rgba(200, 160, 255, .5) 272deg, transparent 298deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 40%, #000 70%, transparent 92%);
  mask-image: radial-gradient(closest-side, transparent 22%, #000 40%, #000 70%, transparent 92%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: .55;
  will-change: transform;
  animation: fx-spin 16s linear infinite;
}
/* soft pulsing light in the eye of the vortex */
.hero-fx__eye {
  position: absolute;
  left: var(--vx);
  top: var(--vy);
  width: calc(var(--vd) * .9);
  height: calc(var(--vd) * .9 * var(--vk));
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(150, 170, 255, .38), rgba(120, 90, 220, .16) 45%, transparent 75%);
  mix-blend-mode: screen;
  animation: fx-eye 5s ease-in-out infinite;
}

/* --- sparks canvas + readability shade --- */
.hero-fx__sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-fx__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 32% at 50% 40%, rgba(5, 8, 20, .45), transparent 75%),
    linear-gradient(180deg, rgba(5, 8, 20, .35) 0%, transparent 18%);
}

/* content above the effects */
.section__hero .main-container { position: relative; z-index: 2; }
.section__hero .h1 { text-shadow: 0 4px 28px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5); }

@keyframes fx-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: .75; }
}
@keyframes fx-spin {
  to { transform: rotate(-360deg); }
}
@keyframes fx-twist-outer {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
}
@keyframes fx-twist-inner {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(-12deg); }
}
@keyframes fx-eye {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx__glow, .hero-fx__runes, .hero-fx__vx-layer, .hero-fx__vx-sweep, .hero-fx__eye { animation: none; }
  .hero-fx__sparks { display: none; }
}