:root {
      /* ЛУЧИ */
      --edge: 0.55;
      /* 0..1 (ближе к 1 = резче) */
      --beamOpacity: 0.35;
      /* общая яркость слоя лучей */

      /* ГРАДИЕНТ ПРИ ПРОКРУТКЕ (цвета выберешь сам) */
      --scrollGradTop: rgba(0, 0, 20, 0.5);
      /* верхний цвет/прозрачность */
      --scrollGradBottom: rgba(20, 0, 0, 0.5);
      /* нижний цвет/прозрачность */
      --scrollGradStart: 45%;
      /* где начинается усиление */
      --scrollGradEnd: 100%;
      /* где максимум */
    }
    .half{
        width: 50%;
    }
    .full{
        width: 100%;
    }

    #block1 {

      background: url("/img/2.jpg") center/cover no-repeat;
      position: absolute;
      top: 0;
      height: 100vh;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }

    #block2 {
      background: url("/img/6.jpg") center/cover no-repeat;
      position: relative;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }
    
    #block3 {
      background: url("/img/10.jpg") center/cover no-repeat;
      position: relative;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }
    
    #block4 {
      background: url("/img/18.jpg") center/cover no-repeat;
      position: relative;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }

    #block5 {
      background: url("/img/19.jpg") top/cover no-repeat;
      position: relative;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }
    #block6 {
      background: url("/img/12.jpg") top/cover no-repeat;
      position: relative;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }
    #block7 {
      background: url("/img/7 — копия.jpg") center/cover no-repeat;
      position: relative;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
    }


    html,
    body {
      height: 100%;
      margin: 0;
      background: #05070b;
    }

    body {
      overflow: auto;
    }

    /* чтобы была прокрутка (можешь убрать/подогнать высоту) */
    .page {
      min-height: 220vh;
      position: relative;
    }

    .stage {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      filter: saturate(1.05) contrast(1.05);
      overflow: hidden;
      z-index: 99999;
    }

    .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1200px 800px at 50% 60%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .65)),
        radial-gradient(900px 600px at 40% 20%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 65%);
      pointer-events: none;
    }

    .beams {
      position: absolute;
      inset: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: var(--beamOpacity);
    }

    .beam {
      position: absolute;
      left: var(--left, -10vw);
      top: var(--top, -10vh);

      width: min(44vw, 620px);
      height: 160vh;

      transform-origin: 0% 0%;
      transform: rotate(var(--rot, 45deg));

      clip-path: polygon(0% 0%, 7% 0%, 100% 100%, 0% 100%);

      --feather: calc((1 - var(--edge)) * 22% + 2%);
      -webkit-mask-image: linear-gradient(to right,
          #000 0%,
          #000 calc(100% - var(--feather)),
          transparent 100%);
      mask-image: linear-gradient(to right,
          #000 0%,
          #000 calc(100% - var(--feather)),
          transparent 100%);

      background:
        radial-gradient(closest-side at 4% 6%, rgba(255, 255, 255, .70), rgba(255, 255, 255, 0) 70%),
        linear-gradient(to bottom,
          rgba(255, 255, 255, .11),
          rgba(255, 255, 255, .28) 22%,
          rgba(255, 255, 255, .12) 60%,
          rgba(255, 255, 255, 0) 100%);

      opacity: var(--op, .65);

      animation:
        sway var(--dur, 10s) ease-in-out infinite alternate,
        pulse 3.0s ease-in-out infinite;

      filter: blur(calc((1 - var(--edge)) * 1.1px));
    }


    .beam::before {
      content: "";
      position: absolute;
      inset: -10%;
      background:
        repeating-linear-gradient(0deg,
          rgba(255, 255, 255, .05) 0px,
          rgba(255, 255, 255, .02) 2px,
          rgba(255, 255, 255, 0) 7px);
      opacity: .28;
      filter: blur(1.4px);
      animation: drift 6s linear infinite;
    }

    .beam::after {
      display: none;
    }

    @keyframes sway {
      from {
        transform: rotate(calc(var(--rot, 45deg) - 4deg));
      }

      to {
        transform: rotate(calc(var(--rot, 45deg) + 4deg));
      }
    }


        
    @media (max-width: 700px) {
        .beam {
            width: min(76vw, 560px);        
        }
        .beam.left{            
           transform: rotate(-30deg);
        }
        .beam.right{
           transform: rotate(30deg);
        }

    }

    @keyframes pulse {

      0%,
      100% {
        opacity: var(--op, .65);
      }

      50% {
        opacity: calc(var(--op, .65) * 1.12);
      }
    }

    @keyframes drift {
      from {
        transform: translateY(0px);
      }

      to {
        transform: translateY(18px);
      }
    }


    @media (prefers-reduced-motion: reduce) {

      .beam,
      .beam::before {
        animation: none;
      }
    }

    /* ==== ГРАДИЕНТ ПРИ ПРОКРУТКЕ ==== */
    .scroll-gradient {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: var(--scrollK, 0);
      /* управляется JS: 0..1 */
      background: linear-gradient(to bottom,
          var(--scrollGradTop) 0%,
          color-mix(in srgb, var(--scrollGradTop) 60%, var(--scrollGradBottom)) var(--scrollGradStart),
          var(--scrollGradBottom) var(--scrollGradEnd));
      transition: opacity .06s linear;
    }

    /* если color-mix не поддерживается — всё равно будет работать */
    @supports not (background: color-mix(in srgb, red 50%, blue)) {
      .scroll-gradient {
        background: linear-gradient(to bottom,
            var(--scrollGradTop) 0%,
            var(--scrollGradBottom) 100%);
      }
    }

/* ===== Block1 hero text ===== */


#block1::after{
  /* subtle darkening for readability */
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  pointer-events:none;
}

#block1 .hero{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 6vh 6vw;
  z-index: 2;
}

#block1 .hero-title{
  margin:0;
  color:rgba(255,255,255,0.85);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(47px, 9vw, 127px);
  line-height: 1.02;
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn 5.1s ease-out forwards;
}

#block1 .hero-sub{
  margin-top: 5px;
  color: rgba(255,255,255,0.55);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: clamp(14px, 2.2vw, 22px);
  opacity: 0;
  transform: translateY(10px);
  animation: heroIn 1.1s ease-out forwards;
  animation-delay: 5.25s;

  /* "снизу лёгкую подпись" */
  left: 50%;
  bottom: 6vh;
  transform: translateX(-10%) translateY(00px);
}

@keyframes heroIn{
  to { opacity: 1; transform: translateY(0); }
}