* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background: #eee6d5;
}

body {
  margin: 0;
  padding: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color: #29261f;

  background: transparent;
}


/* =========================================================
   DYNAMIC BACKGROUND
   ========================================================= */

.site-background {
  position: fixed;
  inset: 0;

  z-index: 0;

  overflow: hidden;
  pointer-events: none;

  background: #eee6d5;
}

.site-background-layer {
  position: absolute;
  inset: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  opacity: 0;

  transition:
    opacity 1.2s ease-in-out;

  will-change: opacity;
}

.bg-layer-a {
  opacity: 1;
}


/* =========================================================
   CONTENT ABOVE BACKGROUND
   ========================================================= */

.child-header,
.children-story,
.child-footer {
  position: relative;
  z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.child-header {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    28px
    clamp(24px, 5vw, 80px);

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  letter-spacing: .1em;
  text-transform: uppercase;
}

.child-header a {
  color: inherit;
  text-decoration: none;
}

.section-label {
  opacity: .6;
}


/* =========================================================
   SCENES
   ========================================================= */

.children-story {
  width: 100%;
}

.scene {
  position: relative;

  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;

  padding:
    110px
    clamp(28px, 7vw, 110px);

  background: transparent;

  border: 0;
  box-shadow: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.scene-content {
  width: min(720px, 100%);
}

.scene-content-wide {
  width: min(1100px, 100%);
}

.scene-content-right {
  margin-left: auto;
}


/* =========================================================
   NUMBERS
   ========================================================= */

.scene-number {
  margin:
    0 0 28px;

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  letter-spacing: .18em;

  opacity: .5;
}


/* =========================================================
   TITLES
   ========================================================= */

.hero-title,
.scene-title {
  margin: 0;

  font-weight: 400;

  letter-spacing: -.04em;
}

.hero-title {
  max-width: 1050px;

  font-size:
    clamp(54px, 7vw, 110px);

  line-height: .94;
}

.scene-title {
  max-width: 900px;

  font-size:
    clamp(46px, 5.4vw, 86px);

  line-height: .98;
}


/* =========================================================
   TEXT
   ========================================================= */

.hero-copy,
.scene-copy {
  max-width: 620px;

  margin:
    38px 0 0;

  font-size:
    clamp(19px, 1.5vw, 25px);

  line-height: 1.5;
}


/* =========================================================
   HAND NOTES
   ========================================================= */

.hand-note {
  margin:
    0 0 26px;

  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive;

  font-size:
    clamp(20px, 2vw, 30px);

  line-height: 1.2;

  transform:
    rotate(-1deg);

  opacity: .72;
}


/* =========================================================
   CROSSED
   ========================================================= */

.crossed {
  position: relative;

  display: inline-block;

  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive;

  font-weight: 400;

  color: #9a5b4b;
}

.crossed::after {
  content: "";

  position: absolute;

  left: -4%;
  right: -4%;

  top: 52%;

  height: 3px;

  background: currentColor;

  transform:
    rotate(-5deg);
}


/* =========================================================
   WORDS
   ========================================================= */

.words {
  display: flex;
  flex-wrap: wrap;

  gap:
    14px 32px;

  margin-top: 44px;
}

.words span {
  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive;

  font-size:
    clamp(26px, 3vw, 44px);
}


/* =========================================================
   REQUESTS
   ========================================================= */

.requests {
  display: grid;

  gap: 20px;

  margin-top: 48px;
}

.requests p {
  margin: 0;

  font-size:
    clamp(25px, 2.8vw, 46px);

  line-height: 1.15;
}

.requests p:nth-child(even) {
  margin-left:
    clamp(30px, 7vw, 120px);
}


/* =========================================================
   PERSPECTIVES
   ========================================================= */

.perspectives {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(40px, 8vw, 130px);

  margin-top:
    clamp(50px, 7vw, 90px);
}

.perspective-label {
  display: block;

  margin-bottom: 20px;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  letter-spacing: .16em;
  text-transform: uppercase;

  opacity: .5;
}

.perspective p {
  margin: 0;

  font-size:
    clamp(28px, 3.2vw, 52px);

  line-height: 1.08;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(30px, 5vw, 80px);

  margin-top:
    clamp(50px, 7vw, 90px);
}

.process-item span {
  display: block;

  margin-bottom: 18px;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  letter-spacing: .16em;

  opacity: .5;
}

.process-item p {
  margin: 0;

  font-size:
    clamp(21px, 2vw, 31px);

  line-height: 1.25;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-link {
  display: inline-block;

  margin-top: 38px;

  color: inherit;

  text-decoration: none;

  font-size:
    clamp(26px, 3vw, 44px);

  border-bottom:
    1px solid currentColor;
}


/* =========================================================
   FOOTER
   ========================================================= */

.child-footer {
  padding:
    28px
    clamp(22px, 5vw, 76px)
    40px;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;
}

.child-footer a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px) {

  .section-label {
    display: none;
  }

  .child-header {
    padding:
      20px 18px;
  }

  .scene {
    min-height: 100svh;

    padding:
      90px 21px;
  }

  .scene-content-right {
    margin-left: 0;
  }

  .hero-title {
    font-size:
      clamp(48px, 13vw, 68px);
  }

  .scene-title {
    font-size:
      clamp(42px, 11vw, 60px);
  }

  .hero-copy,
  .scene-copy {
    font-size: 19px;
  }

  .perspectives,
  .process {
    grid-template-columns: 1fr;
  }

  .site-background-layer {
    background-position:
      43% center;
  }

}


/* =========================================================
   TEXT SHADOWS V101
   ========================================================= */

.hero-title,
.scene-title,
.hero-copy,
.scene-copy,
.hand-note,
.requests p,
.perspective p,
.process-item p,
.contact-link,
.scene-number,
.perspective-label,
.process-item span {

  text-shadow:
    0 1px 2px rgba(255,255,255,.92),
    0 3px 10px rgba(255,255,255,.72),
    0 8px 24px rgba(255,255,255,.42);
}


/* заголовки чуть плотнее */

.hero-title,
.scene-title {

  text-shadow:
    0 1px 2px rgba(255,255,255,.96),
    0 4px 12px rgba(255,255,255,.78),
    0 10px 28px rgba(255,255,255,.48);
}


/* рукописные элементы */

.hand-note,
.crossed,
.words span {

  text-shadow:
    0 1px 2px rgba(255,255,255,.9),
    0 4px 12px rgba(255,255,255,.55);
}


/* если когда-нибудь понадобится белый текст
   на тёмной сцене */

.text-light,
.text-light .hero-title,
.text-light .scene-title,
.text-light .hero-copy,
.text-light .scene-copy {

  color: #fff;

  text-shadow:
    0 2px 4px rgba(0,0,0,.78),
    0 6px 16px rgba(0,0,0,.58),
    0 14px 34px rgba(0,0,0,.38);
}



/* =========================================================
   DARK TEXT SHADOWS V102
   ========================================================= */

.hero-title,
.scene-title,
.hero-copy,
.scene-copy,
.hand-note,
.requests p,
.perspective p,
.process-item p,
.contact-link,
.scene-number,
.perspective-label,
.process-item span,
.words span,
.crossed {

  text-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 3px 8px rgba(0,0,0,.18),
    0 8px 20px rgba(0,0,0,.10);
}


/* крупные заголовки чуть выразительнее */

.hero-title,
.scene-title {

  text-shadow:
    0 2px 3px rgba(0,0,0,.30),
    0 5px 12px rgba(0,0,0,.18),
    0 12px 28px rgba(0,0,0,.10);
}


/* мелкий текст мягче */

.scene-number,
.perspective-label,
.process-item span {

  text-shadow:
    0 1px 2px rgba(0,0,0,.18);
}



/* =========================================================
   WHITE TEXT + DARK SHADOWS V103
   ========================================================= */

body,
.child-header,
.child-header a,
.section-label,
.hero-title,
.scene-title,
.hero-copy,
.scene-copy,
.hand-note,
.requests p,
.perspective p,
.process-item p,
.contact-link,
.scene-number,
.perspective-label,
.process-item span,
.words span {

  color: #fff !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.55),
    0 5px 14px rgba(0,0,0,.34),
    0 12px 30px rgba(0,0,0,.20);
}


/* крупные заголовки чуть плотнее */

.hero-title,
.scene-title {

  text-shadow:
    0 2px 4px rgba(0,0,0,.68),
    0 6px 16px rgba(0,0,0,.42),
    0 14px 34px rgba(0,0,0,.24);
}


/* мелкие подписи */

.scene-number,
.perspective-label,
.process-item span,
.section-label {

  text-shadow:
    0 1px 3px rgba(0,0,0,.65),
    0 4px 10px rgba(0,0,0,.30);
}


/* зачёркнутое слово можно оставить акцентным */

.crossed {

  color: #f3b6a5 !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.55),
    0 5px 12px rgba(0,0,0,.30);
}


/* линия зачёркивания тоже акцентная */

.crossed::after {
  background:
    currentColor !important;
}



/* =========================================================
   LOCAL TEXT BLUR V104
   blur только под текстовым контентом
   ========================================================= */

.scene-content {
  position: relative;
  z-index: 2;

  isolation: isolate;
}


/*
  Размытая область находится ПОЗАДИ текста.
  Края специально растворяются,
  чтобы это не выглядело прямоугольной карточкой.
*/

.scene-content::before {
  content: "";

  position: absolute;

  inset:
    -32px
    -38px;

  z-index: -1;

  pointer-events: none;

  border-radius: 32px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(20,18,15,.20) 0%,
      rgba(20,18,15,.13) 55%,
      rgba(20,18,15,.04) 78%,
      transparent 100%
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 55%,
      rgba(0,0,0,.8) 72%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      #000 55%,
      rgba(0,0,0,.8) 72%,
      transparent 100%
    );
}


/* крупный первый экран — чуть мягче */

.scene-cover .scene-content::before {
  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  background:
    radial-gradient(
      ellipse at center,
      rgba(15,14,12,.18) 0%,
      rgba(15,14,12,.10) 58%,
      transparent 100%
    );
}


/* =========================================================
   MOBILE
   меньше blur = меньше нагрузки и чище картинка
   ========================================================= */

@media(max-width:700px) {

  .scene-content::before {
    inset:
      -22px
      -18px;

    border-radius: 24px;

    backdrop-filter:
      blur(7px);

    -webkit-backdrop-filter:
      blur(7px);

    background:
      radial-gradient(
        ellipse at center,
        rgba(15,14,12,.22) 0%,
        rgba(15,14,12,.12) 60%,
        transparent 100%
      );
  }

}



/* =========================================================
   WORD ANIMATION — CROSSED "ПРОСТО" V105
   ========================================================= */

.crossed {
  position: relative;
  display: inline-block;

  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.16,1,.3,1);
}


/* линия сначала спрятана */

.crossed::after {
  content: "";

  position: absolute;

  left: -5%;
  right: -5%;

  top: 53%;

  height: 4px;

  border-radius: 999px;

  background:
    currentColor !important;

  transform:
    rotate(-5deg)
    scaleX(0);

  transform-origin:
    left center;

  opacity: .9;

  transition:
    transform .7s
    cubic-bezier(.22,.8,.25,1);
}


/* когда JS включает анимацию */

.crossed.crossed-active::after {
  transform:
    rotate(-5deg)
    scaleX(1);
}


/* само слово чуть меняется после перечёркивания */

.crossed.crossed-active {
  opacity: .72;

  transform:
    rotate(-1.5deg)
    translateY(1px);
}


/* accessibility */

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

  .crossed,
  .crossed::after {
    transition: none !important;
  }

  .crossed::after {
    transform:
      rotate(-5deg)
      scaleX(1);
  }

}



/* =========================================================
   COLORED WORD ACCENTS V106
   ========================================================= */

.word-accent {
  display: inline-block;

  text-shadow:
    0 2px 4px rgba(0,0,0,.58),
    0 6px 14px rgba(0,0,0,.32);
}


/* терракота */

.word-terracotta {
  color: #e58f74 !important;
}


/* охра */

.word-ochre {
  color: #e5b95f !important;
}


/* оливковый */

.word-olive {
  color: #a8bc77 !important;
}


/* мягкий голубой */

.word-blue {
  color: #8ec1d8 !important;
}


/* розовый */

.word-pink {
  color: #e7a6b8 !important;
}


/* тёплый кремовый */

.word-cream {
  color: #ffe0a3 !important;
}


/* чуть более светлый белый акцент */

.word-white {
  color: #ffffff !important;
}


/* рукописные цветные слова */

.words .word-accent,
.hand-note .word-accent {

  text-shadow:
    0 2px 4px rgba(0,0,0,.52),
    0 5px 12px rgba(0,0,0,.26);
}



/* =========================================================
   SEMANTIC WORD COLORS V107

   pink        = чувства / переживания
   ochre       = игра
   blue        = слова / рисунок / образ
   terracotta  = поведение / напряжение
   olive       = отношения / семья / взрослые
   cream       = начало / контакт
   ========================================================= */

.word-accent {
  display: inline-block;

  text-shadow:
    0 2px 4px rgba(0,0,0,.62),
    0 6px 14px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.18);
}

.word-pink {
  color: #f0a9bd !important;
}

.word-ochre {
  color: #efbd62 !important;
}

.word-blue {
  color: #91cbe3 !important;
}

.word-terracotta {
  color: #ed9277 !important;
}

.word-olive {
  color: #b3c883 !important;
}

.word-cream {
  color: #ffe1a1 !important;
}

/* перечёркнутое "просто" */

.crossed {
  color: #ed9277 !important;
}

/* рукописные акценты */

.hand-note .word-accent,
.words .word-accent {
  text-shadow:
    0 2px 4px rgba(0,0,0,.60),
    0 5px 12px rgba(0,0,0,.32);
}



/* =========================================================
   SOFT EDGE TEXT BLUR V108
   ========================================================= */

.scene-content::before {
  content: "";

  position: absolute;

  /*
    Blur намного шире самого текста,
    поэтому его физическая граница
    находится далеко от букв.
  */
  inset:
    -90px
    -120px !important;

  z-index: -1;

  pointer-events: none;

  border-radius: 50% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(10,10,10,.20) 0%,
      rgba(10,10,10,.15) 35%,
      rgba(10,10,10,.08) 58%,
      rgba(10,10,10,.025) 76%,
      transparent 96%
    ) !important;

  backdrop-filter:
    blur(11px) !important;

  -webkit-backdrop-filter:
    blur(11px) !important;


  /*
    Ключевой момент:
    сам blur тоже плавно исчезает
    к краям, а не обрывается.
  */

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 38%,
      rgba(0,0,0,.82) 55%,
      rgba(0,0,0,.42) 72%,
      rgba(0,0,0,.12) 86%,
      transparent 100%
    ) !important;

  mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 38%,
      rgba(0,0,0,.82) 55%,
      rgba(0,0,0,.42) 72%,
      rgba(0,0,0,.12) 86%,
      transparent 100%
    ) !important;
}


/*
  Справа blur уходит ещё дальше за край экрана,
  чтобы вообще не было видно его границы.
*/

.scene-content-right::before {
  inset:
    -90px
    -150px
    -90px
    -110px !important;
}


/*
  Первый экран — чуть слабее.
*/

.scene-cover .scene-content::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(10,10,10,.16) 0%,
      rgba(10,10,10,.10) 52%,
      rgba(10,10,10,.03) 76%,
      transparent 96%
    ) !important;

  backdrop-filter:
    blur(8px) !important;

  -webkit-backdrop-filter:
    blur(8px) !important;
}


/* =========================================================
   RIGHT SCENES
   ========================================================= */

#child-behaviour .scene-content,
#child-language .scene-content,
#play-therapy .scene-content,
#art-therapy .scene-content,
#parents-requests .scene-content,
#parent-child .scene-content {

  margin-left:
    auto !important;

  margin-right:
    0 !important;
}


/*
  Не прижимаем текст прямо к краю —
  оставляем нормальную композицию.
*/

#child-behaviour .scene-content,
#play-therapy .scene-content,
#parents-requests .scene-content {

  width:
    min(720px, 100%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px) {

  /*
    На телефоне всё снова выравниваем нормально,
    иначе длинные заголовки справа будут тесными.
  */

  #child-behaviour .scene-content,
  #child-language .scene-content,
  #play-therapy .scene-content,
  #art-therapy .scene-content,
  #parents-requests .scene-content,
  #parent-child .scene-content {

    margin-left:
      0 !important;

    margin-right:
      0 !important;
  }


  .scene-content::before,
  .scene-content-right::before {

    inset:
      -55px
      -38px !important;

    border-radius:
      45% !important;

    backdrop-filter:
      blur(8px) !important;

    -webkit-backdrop-filter:
      blur(8px) !important;
  }

}



/* =========================================================
   SCENES 06 + 08 — FURTHER RIGHT V109
   ========================================================= */

#parents-requests .scene-content,
#parent-child .scene-content {
  position: relative;

  left:
    clamp(45px, 6vw, 110px) !important;
}


/* на мобильном никаких боковых сдвигов */

@media(max-width:700px) {

  #parents-requests .scene-content,
  #parent-child .scene-content {
    left: 0 !important;
  }

}



/* =========================================================
   SCENES 07 + 09 — RIGHT ALIGN V110
   ========================================================= */

#two-perspectives .scene-content,
#child-process .scene-content {
  margin-left: auto !important;
  margin-right: 0 !important;

  position: relative;

  left:
    clamp(45px, 6vw, 110px) !important;
}


/* mobile */

@media(max-width:700px) {

  #two-perspectives .scene-content,
  #child-process .scene-content {
    margin-left: 0 !important;
    margin-right: 0 !important;

    left: 0 !important;
  }

}



/* =========================================================
   SCENES 07 + 09 — REAL RIGHT POSITION V111
   ========================================================= */


/* 07 — Взрослый / ребёнок */

#two-perspectives .scene-content {
  width: min(900px, 72vw) !important;

  margin-left: auto !important;
  margin-right: 0 !important;

  left: auto !important;

  transform:
    translateX(clamp(30px, 4vw, 80px)) !important;
}


/* 09 — процесс */

#child-process .scene-content {
  width: min(820px, 68vw) !important;

  margin-left: auto !important;
  margin-right: 0 !important;

  left: auto !important;

  transform:
    translateX(clamp(30px, 4vw, 80px)) !important;
}


/*
  Заголовки тоже не растягиваем
  на всю ширину экрана.
*/

#two-perspectives .scene-title {
  max-width: 850px !important;
}

#child-process .scene-title {
  max-width: 780px !important;
}


/*
  Процесс остаётся внутри
  правого контейнера.
*/

#child-process .process {
  width: 100% !important;
}


/* MOBILE */

@media(max-width:700px) {

  #two-perspectives .scene-content,
  #child-process .scene-content {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
  }

}



/* =========================================================
   SCENE 01 — RIGHT POSITION V112
   ========================================================= */

#children-cover .scene-content {
  width: min(900px, 72vw) !important;

  margin-left: auto !important;
  margin-right: 0 !important;

  transform:
    translateX(clamp(30px, 4vw, 80px)) !important;
}

#children-cover .hero-title {
  max-width: 860px !important;
}

#children-cover .hero-copy {
  max-width: 560px !important;
}


/* MOBILE */

@media(max-width:700px) {

  #children-cover .scene-content {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
  }

}



/* =========================================================
   RECTANGULAR FEATHERED BLUR V113
   blur плавно исчезает к краям
   ========================================================= */

.scene-content::before {
  content: "";

  position: absolute;

  inset:
    -80px
    -110px !important;

  z-index: -1;

  pointer-events: none;

  /* никаких овалов */
  border-radius: 0 !important;


  /*
    Лёгкое затемнение под белым текстом.
    Оно тоже будет затухать вместе с маской.
  */

  background:
    rgba(10, 10, 10, .12) !important;


  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;


  /*
    Горизонтальное затухание
  */

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.10) 4%,
      rgba(0,0,0,.35) 9%,
      rgba(0,0,0,.70) 15%,
      #000 24%,
      #000 76%,
      rgba(0,0,0,.70) 85%,
      rgba(0,0,0,.35) 91%,
      rgba(0,0,0,.10) 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.12) 5%,
      rgba(0,0,0,.40) 11%,
      rgba(0,0,0,.75) 18%,
      #000 27%,
      #000 73%,
      rgba(0,0,0,.75) 82%,
      rgba(0,0,0,.40) 89%,
      rgba(0,0,0,.12) 95%,
      transparent 100%
    );

  -webkit-mask-composite:
    source-in;


  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.10) 4%,
      rgba(0,0,0,.35) 9%,
      rgba(0,0,0,.70) 15%,
      #000 24%,
      #000 76%,
      rgba(0,0,0,.70) 85%,
      rgba(0,0,0,.35) 91%,
      rgba(0,0,0,.10) 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.12) 5%,
      rgba(0,0,0,.40) 11%,
      rgba(0,0,0,.75) 18%,
      #000 27%,
      #000 73%,
      rgba(0,0,0,.75) 82%,
      rgba(0,0,0,.40) 89%,
      rgba(0,0,0,.12) 95%,
      transparent 100%
    );

  mask-composite:
    intersect;
}


/*
  Для правых блоков делаем область чуть шире,
  чтобы край эффекта не был виден рядом с текстом.
*/

.scene-content-right::before,
#children-cover .scene-content::before,
#parents-requests .scene-content::before,
#two-perspectives .scene-content::before,
#parent-child .scene-content::before,
#child-process .scene-content::before {

  inset:
    -90px
    -140px !important;
}


/* MOBILE */

@media(max-width:700px) {

  .scene-content::before,
  .scene-content-right::before,
  #children-cover .scene-content::before,
  #parents-requests .scene-content::before,
  #two-perspectives .scene-content::before,
  #parent-child .scene-content::before,
  #child-process .scene-content::before {

    inset:
      -50px
      -32px !important;

    backdrop-filter:
      blur(8px) !important;

    -webkit-backdrop-filter:
      blur(8px) !important;

    background:
      rgba(10,10,10,.10) !important;
  }

}



/* =========================================================
   HAND DRAWN CONTACT CARDS V115
   ========================================================= */

.contact-cards {
  gap:
    clamp(18px, 2.5vw, 34px);
}


/* ---------------------------------------------------------
   BASE PAPER
   --------------------------------------------------------- */

.contact-card {
  position: relative;

  min-height:
    220px;

  padding:
    30px;

  overflow: visible;

  color:
    #302a24 !important;

  background:
    rgba(250,244,226,.93) !important;

  border:
    2px solid
    rgba(50,43,35,.72) !important;

  border-radius:
    5px 11px 7px 4px !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  box-shadow:
    5px 7px 0
    rgba(50,43,35,.10) !important;

  transition:
    transform .35s
    cubic-bezier(.16,1,.3,1) !important;
}


/* второй неровный карандашный контур */

.contact-card::before {
  content: "";

  position: absolute;

  inset:
    4px -5px -5px 5px;

  z-index: -1;

  border:
    1.5px solid
    rgba(50,43,35,.40);

  border-radius:
    8px 4px 12px 6px;

  pointer-events: none;
}


/* маленький нарисованный штрих */

.contact-card::after {
  content: "";

  position: absolute;

  left:
    28px;

  bottom:
    23px;

  width:
    46px;

  height:
    4px;

  border-radius:
    50%;

  background:
    currentColor;

  opacity:
    .32;

  transform:
    rotate(-4deg);
}


/* ---------------------------------------------------------
   EACH CARD HAS ITS OWN CHARACTER
   --------------------------------------------------------- */

.contact-card:nth-child(1) {
  transform:
    rotate(-1.3deg);

  background:
    rgba(250,233,207,.94) !important;
}


.contact-card:nth-child(2) {
  transform:
    rotate(.9deg);

  background:
    rgba(220,238,241,.94) !important;
}


.contact-card:nth-child(3) {
  transform:
    rotate(-.5deg);

  background:
    rgba(229,236,207,.94) !important;
}


/* ---------------------------------------------------------
   HANDWRITTEN LABEL
   --------------------------------------------------------- */

.contact-card-label {
  color:
    rgba(48,42,36,.70) !important;

  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive !important;

  font-size:
    18px !important;

  letter-spacing:
    .02em !important;

  text-transform:
    none !important;

  text-shadow:
    none !important;
}


/* основной текст */

.contact-card strong {
  color:
    #302a24 !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    400;

  text-shadow:
    none !important;
}


/* ---------------------------------------------------------
   DRAWN ARROW
   --------------------------------------------------------- */

.contact-card-arrow {
  color:
    #302a24 !important;

  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive;

  font-size:
    30px;

  text-shadow:
    none !important;

  transform:
    rotate(-8deg);
}


/* ---------------------------------------------------------
   DIFFERENT ACCENT STROKES
   --------------------------------------------------------- */

.contact-card:nth-child(1)::after {
  background:
    #d9846d;
}

.contact-card:nth-child(2)::after {
  background:
    #6fa8bf;
}

.contact-card:nth-child(3)::after {
  background:
    #899d60;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media(hover:hover) {

  .contact-card:nth-child(1):hover {
    transform:
      rotate(-1.3deg)
      translateY(-7px);
  }

  .contact-card:nth-child(2):hover {
    transform:
      rotate(.9deg)
      translateY(-7px);
  }

  .contact-card:nth-child(3):hover {
    transform:
      rotate(-.5deg)
      translateY(-7px);
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:800px) {

  .contact-card {
    min-height:
      165px;

    padding:
      25px;
  }

  .contact-card:nth-child(1) {
    transform:
      rotate(-.6deg);
  }

  .contact-card:nth-child(2) {
    transform:
      rotate(.5deg);
  }

  .contact-card:nth-child(3) {
    transform:
      rotate(-.3deg);
  }

}



/* =========================================================
   HOME LINK V116
   ========================================================= */

.back-link {
  display: inline-block;

  color: #fff !important;
  text-decoration: none;

  cursor: pointer;

  text-shadow:
    0 2px 4px rgba(0,0,0,.65),
    0 5px 12px rgba(0,0,0,.30);

  transition:
    opacity .25s ease,
    transform .25s ease;
}

@media(hover:hover) {

  .back-link:hover {
    opacity: .72;

    transform:
      translateX(-2px);
  }

}

.back-link:focus-visible {
  outline:
    2px solid rgba(255,255,255,.8);

  outline-offset:
    6px;
}