/* HERO */
.c-hero{
  position:relative; isolation:isolate; min-block-size:72vh;
  padding-inline:48px; padding-block:48px; display:grid; align-content:end;
  --gx:90%; --gy:8%;
  background-image: var(--gradient-core), url("../assets/noise.avif");
  background-size: cover, auto;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, soft-light;
}
.c-hero__title{ max-inline-size:16ch; font-family:var(--font-heading); font-size:var(--fs-700); line-height:1.2; letter-spacing:-0.01em; margin:0; text-wrap:balance }


/* Глобальный оверлей — один раз в документе */
.c-lines{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: var(--lines-opacity);
  mix-blend-mode: var(--lines-blend);
  will-change: background-position;
  display: none;
  background-image:
    /* современный синтаксис */
    repeating-linear-gradient(
      var(--lines-orient),
      rgb(var(--lines-color-rgb) / var(--lines-alpha)) 0 calc(var(--lines-width)),
      transparent calc(var(--lines-width)) calc(var(--lines-gap))
    );
}
/* Фолбэк для браузеров без rgb()/alpha синтаксиса — просто переопределяем картинку */
@supports not (color: rgb(0 0 0 / .5)) {
  .c-lines{
    background-image:
      repeating-linear-gradient(
        var(--lines-orient),
        var(--lines-color-rgba) 0 var(--lines-width),
        transparent var(--lines-width) var(--lines-gap)
      );
  }
}




* 34. vertical lines */
.vertical-lines-wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
margin: 0;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 2;
}

.vertical-lines {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.vertical-effect {
position: relative;
width: 25%;
height: 100%;
float: left;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
border-right: 1px solid rgba(119, 119, 119, .2);
}

.vertical-effect::before {
content: "";
position: absolute;
display: block;
width: 3px;
-webkit-animation-direction: normal;
   -moz-animation-direction: normal;
    -ms-animation-direction: normal;
     -o-animation-direction: normal;
        animation-direction: normal;
}

.vertical-effect:first-child::before,
.vertical-effect:last-child::before {
content: "";
position: absolute;
right: -2px;
}

.vertical-effect:first-child::before {
top: 0;
-webkit-animation: raindrop 6s ease-out infinite;
   -moz-animation: raindrop 6s ease-out infinite;
    -ms-animation: raindrop 6s ease-out infinite;
     -o-animation: raindrop 6s ease-out infinite;
        animation: raindrop 6s ease-out infinite;
background: -webkit-linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
background: -ms-linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
background: linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
}

.vertical-effect:last-child::before {
bottom: 0;
-webkit-animation: raindrop-reverse 6s ease-out infinite;
   -moz-animation: raindrop-reverse 6s ease-out infinite;
    -ms-animation: raindrop-reverse 6s ease-out infinite;
     -o-animation: raindrop-reverse 6s ease-out infinite;
        animation: raindrop-reverse 6s ease-out infinite;
background: -webkit-linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
background: -ms-linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
background: linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
}

@-webkit-keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}
@-ms-keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}
@keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}

@-webkit-keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    height: 35%;
  }
}
@-ms-keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    height: 35%;
  }
}
@keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
   }
  100% {
    bottom: 100%;
    height: 35%;
  }
}




/* MODAL */
.work-modal{ position:fixed; inset:0; z-index:9999; display:none }
.work-modal.is-open{ display:block }
.work-modal__backdrop{ position:absolute; inset:0; background:rgba(6,8,12,.6); backdrop-filter:blur(6px); opacity:0 }
.work-modal__content{ position:absolute; inset:4vh 4vw; background:var(--surface-1);
  border-radius:calc(16px + 6px); box-shadow:0 10px 30px rgba(0,0,0,.45); overflow:auto; max-block-size:92vh; opacity:0; transform:translateY(20px) }
.work-modal__close{ position:sticky; top:0; margin-inline-start:auto; background:transparent; border:0; color:var(--ink-1); font-size:22px; padding:12px 14px; cursor:pointer }
.work-modal__body{ padding:48px }