/* ============================================================
   SECTION OCEAN LOOPS — v7, premium pass.
   Band layers (reef/sharks-top/surface/current) span full
   width and fade only vertically — their sides coincide with
   section edges. Patch layers use radial masks that reach
   full transparency BEFORE the layer edge, so no rectangle
   is ever visible. Hero sharks: sharpest element on page.
   ============================================================ */

.sec-gif{
  position:absolute;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.sec-gif img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.05);
  user-select:none;
  -webkit-user-drag:none;
}

/* ---------- I. HERO — АКУЛЫ: резкие, звезда экрана ---------- */
.sec-gif--hero{
  right:-3%;
  top:-6%;
  width:54%;
  height:60%;
  opacity:.48;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 56% at 50% 50%, #000 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,.28) 68%, transparent 92%);
  mask-image:radial-gradient(ellipse 50% 56% at 50% 50%, #000 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,.28) 68%, transparent 92%);
}
.sec-gif--hero img{
  filter:saturate(.72) brightness(1.04) contrast(1.45) hue-rotate(-6deg);
  object-position:50% 45%;
  animation:secGifDriftX 54s ease-in-out infinite alternate;
}

/* черепаха: компактное пятно в размытой глубине слева */
.sec-gif--hero2{
  left:-6%;
  bottom:-10%;
  width:46%;
  height:58%;
  opacity:.24;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 44%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 44%, transparent 80%);
}
.sec-gif--hero2 img{
  filter:saturate(.5) brightness(.85) contrast(1.08) hue-rotate(-10deg) blur(3px);
  object-position:40% 60%;
  animation:secGifFloat 48s ease-in-out infinite alternate;
}

/* ---------- II. MANIFEST — косяк: смысл движется ---------- */
.sec-gif--manifest{
  right:-10%;
  top:6%;
  width:62%;
  height:50%;
  opacity:.17;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.55) 42%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.55) 42%, transparent 80%);
}
.sec-gif--manifest img{
  filter:saturate(.45) brightness(.75) contrast(1.08) hue-rotate(-12deg);
  object-position:70% 40%;
  animation:secGifDriftX 64s ease-in-out infinite alternate;
}

/* биолюминесценция: свет смысла изнутри */
.sec-gif--manifest2{
  left:-10%;
  bottom:-14%;
  width:52%;
  height:58%;
  opacity:.2;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 80%);
}
.sec-gif--manifest2 img{
  filter:saturate(.7) brightness(1) contrast(1.08) hue-rotate(-14deg) blur(2.5px);
  object-position:40% 60%;
  animation:secGifFloat 52s ease-in-out infinite alternate;
}

/* ---------- III. SERVICES — риф: полоса-фундамент ---------- */
.sec-gif--services{
  left:0;
  bottom:-12%;
  width:100%;
  height:54%;
  opacity:.32;
  mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 34%, transparent 70%);
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 34%, transparent 70%);
}
.sec-gif--services img{
  filter:saturate(.55) brightness(.7) contrast(1.08) hue-rotate(-10deg);
  object-position:50% 80%;
  animation:secGifBreathe 58s ease-in-out infinite alternate;
}

/* течение сверху: ритм над карточками */
.sec-gif--services2{
  right:-10%;
  top:-8%;
  width:54%;
  height:46%;
  opacity:.15;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.42) 40%, transparent 78%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.42) 40%, transparent 78%);
}
.sec-gif--services2 img{
  filter:saturate(.45) brightness(.85) contrast(1.1) blur(2.5px);
  object-position:70% 20%;
  animation:secGifDriftY 56s ease-in-out infinite alternate-reverse;
}

/* ---------- IV. CREOVIBE — биолюминесцентное поле AI ---------- */
.sec-gif--creovibe{
  right:-10%;
  top:6%;
  width:58%;
  height:66%;
  opacity:.3;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 42%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 42%, transparent 80%);
}
.sec-gif--creovibe img{
  filter:saturate(.8) brightness(1.05) contrast(1.05) hue-rotate(-16deg);
  object-position:65% 35%;
  animation:secGifFloat 50s ease-in-out infinite alternate-reverse;
}

/* тёмная бездна: AI уходит в глубину */
.sec-gif--creovibe2{
  left:-12%;
  bottom:-16%;
  width:54%;
  height:64%;
  opacity:.26;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 44%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 44%, transparent 80%);
}
.sec-gif--creovibe2 img{
  filter:saturate(.55) brightness(.9) contrast(1.15) hue-rotate(-8deg) blur(3px);
  object-position:35% 65%;
  animation:secGifBreathe 62s ease-in-out infinite alternate;
}

/* ---------- V. QUIZ — лунная вода: поиск ответа ---------- */
.sec-gif--quiz{
  right:-10%;
  top:-4%;
  width:56%;
  height:60%;
  opacity:.18;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.42) 44%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.42) 44%, transparent 80%);
}
.sec-gif--quiz img{
  filter:saturate(.35) brightness(.8) contrast(1.1) hue-rotate(-12deg);
  object-position:60% 25%;
  animation:secGifDriftY 58s ease-in-out infinite alternate;
}

/* косяк внизу: где-то там ответ */
.sec-gif--quiz2{
  left:-10%;
  bottom:-12%;
  width:50%;
  height:48%;
  opacity:.12;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.4) 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.4) 42%, transparent 78%);
}
.sec-gif--quiz2 img{
  filter:saturate(.4) brightness(.8) contrast(1.1) hue-rotate(-12deg) blur(2.5px);
  object-position:40% 70%;
  animation:secGifDriftX 68s ease-in-out infinite alternate-reverse;
}

/* ---------- VI. CASES — акулы: полоса охоты сверху ---------- */
.sec-gif--cases{
  left:-10%;
  top:-6%;
  width:64%;
  height:62%;
  opacity:.3;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.55) 42%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.55) 42%, transparent 80%);
}
.sec-gif--cases img{
  filter:saturate(.68) brightness(.98) contrast(1.4) hue-rotate(-5deg);
  object-position:50% 35%;
  animation:secGifDriftX 72s ease-in-out infinite alternate-reverse;
}

/* риф: добыча живёт на глубине */
.sec-gif--cases2{
  right:-10%;
  bottom:-10%;
  width:46%;
  height:52%;
  opacity:.14;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
}
.sec-gif--cases2 img{
  filter:saturate(.6) brightness(.8) contrast(1.14) hue-rotate(-10deg) blur(2.5px);
  object-position:30% 65%;
  animation:secGifDriftY 60s ease-in-out infinite alternate;
}

/* ---------- VII. PROCESS — течение: маршрут ---------- */
.sec-gif--process{
  inset:0;
  width:100%;
  height:100%;
  opacity:.26;
  mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.sec-gif--process img{
  filter:saturate(.4) brightness(.75) contrast(1.1);
  animation:secGifBreathe 66s ease-in-out infinite alternate;
}

/* косяк в потоке: клиенты идут по течению */
.sec-gif--process2{
  right:-10%;
  top:8%;
  width:48%;
  height:44%;
  opacity:.13;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
}
.sec-gif--process2 img{
  filter:saturate(.4) brightness(.8) contrast(1.08) hue-rotate(-10deg) blur(2px);
  animation:secGifDriftX 70s ease-in-out infinite alternate;
}

/* ---------- VIII. ARTIFACT — глубокая синева: письмо из глубины ---------- */
.sec-gif--artifact{
  right:-10%;
  top:6%;
  width:56%;
  height:66%;
  opacity:.32;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 44%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.5) 44%, transparent 80%);
}
.sec-gif--artifact img{
  filter:saturate(.5) brightness(.8) contrast(1.1) hue-rotate(-10deg);
  object-position:65% 55%;
  animation:secGifFloat 56s ease-in-out infinite alternate-reverse;
}

/* луна над бездной: свет, к которому идёт письмо */
.sec-gif--artifact2{
  left:-10%;
  top:-8%;
  width:48%;
  height:54%;
  opacity:.22;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
}
.sec-gif--artifact2 img{
  filter:saturate(.4) brightness(.9) contrast(1.1) hue-rotate(-8deg) blur(2.5px);
  object-position:60% 30%;
  animation:secGifFloat 60s ease-in-out infinite alternate-reverse;
}

/* ---------- IX. CONTACT — свет поверхности: выход на связь ---------- */
.sec-gif--contact{
  left:0;
  right:0;
  top:0;
  width:100%;
  height:38%;
  opacity:.15;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 40%, transparent 82%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 40%, transparent 82%);
}
.sec-gif--contact img{
  filter:saturate(.4) brightness(.9) contrast(1.06) hue-rotate(-8deg);
  object-position:50% 20%;
  animation:secGifDriftY 54s ease-in-out infinite alternate;
}

/* черепаха поднимается к свету: компактное пятно */
.sec-gif--contact2{
  right:-11%;
  bottom:-12%;
  width:44%;
  height:58%;
  opacity:.26;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.48) 44%, transparent 80%);
  mask-image:radial-gradient(ellipse 50% 55% at 50% 50%, #000 0%, rgba(0,0,0,.48) 44%, transparent 80%);
}
.sec-gif--contact2 img{
  filter:saturate(.5) brightness(.9) contrast(1.12) hue-rotate(-8deg) blur(2.5px);
  object-position:40% 40%;
  animation:secGifFloat 58s ease-in-out infinite alternate;
}

/* ---------- плавные медленные дрейфы ---------- */
@keyframes secGifFloat{
  from{ transform:scale(1.05) translate3d(0,0,0); }
  to  { transform:scale(1.08) translate3d(-1.6%,1.4%,0); }
}
@keyframes secGifDriftX{
  from{ transform:scale(1.05) translate3d(-1.4%,0,0); }
  to  { transform:scale(1.07) translate3d(1.4%,0,0); }
}
@keyframes secGifDriftY{
  from{ transform:scale(1.05) translate3d(0,-1.4%,0); }
  to  { transform:scale(1.07) translate3d(0,1.4%,0); }
}
@keyframes secGifBreathe{
  from{ transform:scale(1.04); }
  to  { transform:scale(1.08); }
}

/* ---------- scroll-driven parallax (Chrome 115+, graceful fallback) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec-gif{
      animation:gifScrollParallax linear both;
      animation-timeline:view();
    }
    .sec-gif:not([class*="2"]){ --pq:4%; }
    .sec-gif[class*="2"]{ --pq:8%; }
  }
  @keyframes gifScrollParallax{
    from{ transform:translate3d(0, var(--pq, 4%), 0); }
    to  { transform:translate3d(0, calc(var(--pq, 4%) * -1), 0); }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  .sec-gif--hero{ width:70%; right:-14%; opacity:.4; }
  .sec-gif--hero2{ width:54%; left:-14%; opacity:.16; }
  .sec-gif--manifest{ width:72%; right:-16%; opacity:.12; }
  .sec-gif--manifest2{ opacity:.13; }
  .sec-gif--services{ opacity:.24; }
  .sec-gif--services2{ width:64%; right:-14%; opacity:.1; }
  .sec-gif--creovibe{ width:68%; right:-18%; opacity:.22; }
  .sec-gif--creovibe2{ width:64%; left:-18%; opacity:.18; }
  .sec-gif--quiz{ width:66%; right:-16%; opacity:.13; }
  .sec-gif--quiz2{ width:62%; left:-16%; opacity:.09; }
  .sec-gif--cases{ opacity:.24; }
  .sec-gif--cases2{ width:56%; right:-16%; opacity:.1; }
  .sec-gif--artifact{ width:68%; right:-16%; opacity:.24; }
  .sec-gif--artifact2{ width:58%; left:-14%; opacity:.15; }
  .sec-gif--contact{ opacity:.1; }
  .sec-gif--contact2{ width:54%; right:-16%; opacity:.18; }
}

@media (max-width: 640px){
  .sec-gif--hero{ width:86%; right:-24%; height:62%; opacity:.28; }
  .sec-gif--hero2{ display:none; }
  .sec-gif--manifest{ display:none; }
  .sec-gif--manifest2{ width:80%; left:-22%; opacity:.12; }
  .sec-gif--services{ opacity:.18; }
  .sec-gif--services2{ opacity:.08; }
  .sec-gif--creovibe{ width:80%; right:-26%; opacity:.15; }
  .sec-gif--creovibe2{ width:84%; left:-26%; opacity:.13; }
  .sec-gif--quiz{ width:78%; right:-24%; opacity:.09; }
  .sec-gif--quiz2{ display:none; }
  .sec-gif--cases{ opacity:.15; }
  .sec-gif--cases2{ display:none; }
  .sec-gif--process{ opacity:.15; }
  .sec-gif--process2{ opacity:.07; }
  .sec-gif--artifact{ width:80%; right:-24%; opacity:.17; }
  .sec-gif--artifact2{ width:74%; left:-22%; opacity:.12; }
  .sec-gif--contact{ opacity:.08; }
  .sec-gif--contact2{ width:72%; right:-24%; opacity:.14; }
}

@media (prefers-reduced-motion: reduce){
  .sec-gif, .sec-gif img{ animation:none !important; }
}