html { scroll-behavior: smooth; }
    body { overflow-x: hidden; }

    /* ========== Sections (100vh) ========== */
    .screen{
      position: relative;
      height: 100vh;                 /* requirement */
      overflow: hidden;
      background-image: url("/asset/img/brick-wall.jpg"); /* requirement */
      background-size: cover;
      background-position: 50% 20%;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
    .screen::before,
    .screen::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index: 1;
    }

    /* screen1: 50% white overlay + dynamic darkening on scroll */
    .screen--light::before{ background: rgba(255,255,255,.50); }
    .screen--light::after { background: rgba(0,0,0,var(--screen1-shade,0)); }

    /* screen2: 50% black overlay + extra vignette (your “дополнительный …”) */
    .screen--dark::before{ background: rgba(0,0,0,.50); }
    .screen--dark::after{
      background:
        radial-gradient(60% 60% at 50% 45%,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,.25) 55%,
          rgba(0,0,0,.55) 100%);
      opacity: .85;
    }

    .screen__content{
      position: relative;
      z-index: 2; /* above overlays */
      height: 100%;
    }

    /* ========== First screen typography (like firstscreen.jpg) ========== */
    .main_screen__text{
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    .main_screen__h1_1{
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 400;
      font-size: clamp(3.2rem, 6.2vw, 8rem);
      line-height: 1;
      letter-spacing: .01em;
      margin: 0;
      will-change: transform;
      transform: translateX(var(--h1-left, 0px));
    }

    .main_screen__h1_2{
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: 700;
      font-size: clamp(6rem, 16vw, 19rem);
      line-height: .85;
      letter-spacing: .02em;
      margin: -0.06em 0 0.1em;
      will-change: transform;
      transform: translateX(var(--h1-right, 0px));
    }

    .main_screen__h2{
      max-width: 900px;
      margin: 0 auto;
      color: #111;
      font-size: clamp(1.05rem, 1.2vw, 1.6rem);
      line-height: 1.4;
    }

    /* ========== Clouds (kept behavior) ========== */
    .main_screen__cloud{
      position: absolute;
      top: 0;
      opacity: 0;
      will-change: opacity, transform;
      pointer-events: none;
      z-index: 4; /* above text */
      width: calc(0.05208% * var(--cloud_width, 0));
      padding-bottom: calc(0.05208% * var(--cloud_height, 0));
    }
    .main_screen__cloud--left{ --cloud_width:1350; --cloud_height:1000; left:0; }
    .main_screen__cloud--right{ --cloud_width:1000; --cloud_height:900; right:0; }

    .main_screen__cloud img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }

    .main_screen__left_cloud1{ animation:left_cloud1 12s ease-in-out infinite; }
    .main_screen__left_cloud2{ animation:left_cloud2 12s ease-in-out 2s infinite; }
    .main_screen__left_cloud3{ animation:left_cloud3 12s ease-in-out 4s infinite; }
    .main_screen__right_cloud1{ animation:right_cloud1 12s ease-in-out infinite; }
    .main_screen__right_cloud2{ animation:right_cloud2 12s ease-in-out 2s infinite; }
    .main_screen__right_cloud3{ animation:right_cloud3 12s ease-in-out 4s infinite; }

    @keyframes left_cloud1{
      0%{transform:translate(-1.35%,-8.8%);opacity:1}
      25%{opacity:.5}
      41.6667%{transform:translate(-48.33%,-.8%);opacity:1}
      75%{opacity:.5}
      100%{transform:translate(-1.35%,-8.8%);opacity:1}
    }
    @keyframes left_cloud2{
      0%{transform:translate(-13.5%);opacity:0}
      41.6667%{opacity:1}
      50%{transform:translate(-31.32%,-5.2%);opacity:1}
      66.6667%{opacity:.4}
      83.3333%{opacity:.6}
      100%{transform:translate(-13.5%);opacity:0}
    }
    @keyframes left_cloud3{
      0%{transform:translate(-28.08%);opacity:0}
      58.3333%{opacity:1}
      66.6667%{transform:translate(-1.62%,-7.6%);opacity:1}
      83.3333%{opacity:.5}
      100%{transform:translate(-28.08%);opacity:0}
    }
    @keyframes right_cloud1{
      0%{transform:translate(10.5%);opacity:1}
      25%{opacity:.5}
      50%{transform:translate(2%,-11.07%);opacity:1}
      58.3333%{opacity:.8}
      100%{transform:translate(10.5%);opacity:1}
    }
    @keyframes right_cloud2{
      0%{transform:translate(7%,-1.44%);opacity:0}
      41.6667%{opacity:1}
      50%{transform:translateY(-17.1%);opacity:1}
      66.6667%{opacity:.3}
      83.3333%{opacity:.7}
      100%{transform:translate(7%,-1.44%);opacity:0}
    }
    @keyframes right_cloud3{
      0%{transform:translateY(-9.9%);opacity:0}
      58.3333%{opacity:1}
      75%{transform:translate(15.8%,-1.26%);opacity:1}
      100%{transform:translateY(-9.9%);opacity:0}
    }

    /* ========== Scroll arrow (bouncing + link) ========== */
    .scroll-down{
      z-index: 5;
      position: absolute;
      left: 50%;
      bottom: 1.25rem;
      transform: translateX(-50%);
      width: 56px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      color: inherit;
      text-decoration: none;
      animation: scrollBounce .85s ease-in-out infinite alternate;
    }
    @keyframes scrollBounce{ to { transform: translateX(-50%) translateY(14px); } }
    .scroll-down svg{ width: 32px; height: 32px; }

    @media (prefers-reduced-motion: reduce){
      .scroll-down{ animation: none; }
      .main_screen__cloud{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    }