* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;

  background:
    #171719;
}

body {
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  color:
    #f4f0e8;

  background:
    #171719;

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


/* =========================================================
   PAPER / GRAIN
   ========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(110,90,155,.15),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 60%,
      rgba(70,110,140,.11),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      #171719,
      #202024 45%,
      #171719
    );
}


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

.teen-header {
  position: absolute;

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

  z-index: 10;

  display: flex;
  justify-content: space-between;

  padding:
    26px
    clamp(22px, 5vw, 76px);

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  color:
    rgba(255,255,255,.72);
}

.teen-header a {
  color:
    #fff;

  text-decoration:
    none;
}


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

.teen-scene {
  min-height:
    100svh;

  display:
    flex;

  align-items:
    center;

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

  position:
    relative;
}


.teen-content {
  width:
    min(790px, 100%);
}


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


/* =========================================================
   NUMBER
   ========================================================= */

.teen-number {
  display:
    block;

  margin-bottom:
    28px;

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;

  letter-spacing:
    .20em;

  opacity:
    .40;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2 {
  margin:
    0;

  font-weight:
    400;

  letter-spacing:
    -.045em;

  text-shadow:
    0 3px 12px rgba(0,0,0,.40);
}


h1 {
  font-size:
    clamp(56px, 7vw, 112px);

  line-height:
    .91;
}


h2 {
  font-size:
    clamp(48px, 6vw, 94px);

  line-height:
    .94;
}


.teen-lead,
.teen-copy {
  max-width:
    620px;

  margin-top:
    40px;

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

  line-height:
    1.5;

  color:
    rgba(255,255,255,.88);
}


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

.teen-note {
  margin:
    0 0 25px;

  max-width:
    620px;

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

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

  line-height:
    1.2;

  color:
    #b6a6dd;

  transform:
    rotate(-1deg);
}


.teen-note-big {
  margin-top:
    55px;

  font-size:
    clamp(30px, 4vw, 58px);
}


/* =========================================================
   ACCENTS
   ========================================================= */

.accent-violet {
  color:
    #ad98df;
}

.accent-pink {
  color:
    #e49bb6;
}

.accent-blue {
  color:
    #8ebdd9;
}


/* =========================================================
   FRAGMENTS
   ========================================================= */

.teen-fragments {
  margin-top:
    54px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    15px;
}


.teen-fragments span {
  display:
    inline-block;

  padding:
    9px 13px;

  background:
    #eee9df;

  color:
    #222;

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

  font-size:
    clamp(19px, 2vw, 29px);
}


.teen-fragments span:nth-child(1) {
  transform:
    rotate(-1deg);
}

.teen-fragments span:nth-child(2) {
  transform:
    rotate(1.3deg);
}

.teen-fragments span:nth-child(3) {
  transform:
    rotate(-.5deg);
}

.teen-fragments span:nth-child(4) {
  transform:
    rotate(.8deg);
}


/* =========================================================
   PRESSURE
   ========================================================= */

.pressure-list {
  margin-top:
    55px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    15px 26px;
}


.pressure-list span {
  font-family:
    Arial,
    sans-serif;

  font-weight:
    700;

  font-size:
    clamp(27px, 3.7vw, 60px);

  text-transform:
    uppercase;

  letter-spacing:
    -.03em;

  color:
    rgba(255,255,255,.25);
}


.pressure-list span:nth-child(2),
.pressure-list span:nth-child(5) {
  color:
    #dd8da9;
}

.pressure-list span:nth-child(3) {
  color:
    #ab99dc;
}

.pressure-list span:nth-child(6) {
  color:
    #88b7d2;
}


/* =========================================================
   CROSS WORD
   ========================================================= */

.cross-word {
  position:
    relative;

  display:
    inline-block;

  color:
    #dc8aa5;
}


.cross-word::after {
  content: "";

  position:
    absolute;

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

  top:
    53%;

  height:
    5px;

  background:
    currentColor;

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

  transform-origin:
    left center;

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


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


/* =========================================================
   DIALOGUE
   ========================================================= */

.dialogue {
  margin-top:
    50px;

  display:
    grid;

  gap:
    25px;
}


.dialogue p {
  margin:
    0;

  max-width:
    600px;

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

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

  line-height:
    1.18;
}


.dialogue-parent {
  color:
    rgba(255,255,255,.55);
}


.dialogue-teen {
  margin-left:
    auto !important;

  color:
    #b7a3e5;
}


/* =========================================================
   PHONE
   ========================================================= */

.teen-phone {
  display:
    inline-block;

  margin-top:
    38px;

  color:
    #fff;

  text-decoration:
    none;

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

  border-bottom:
    2px solid
    #a591dc;
}


/* =========================================================
   CONTACTS
   ========================================================= */

.teen-contacts {
  padding:
    100px
    clamp(24px, 7vw, 110px)
    120px;
}


.teen-contacts-inner {
  width:
    min(1180px, 100%);

  margin:
    0 auto;
}


.teen-contact-grid {
  display:
    grid;

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

  gap:
    20px;

  margin-top:
    45px;
}


.teen-card {
  position:
    relative;

  min-height:
    210px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    28px;

  color:
    #1c1c20;

  text-decoration:
    none;

  background:
    #eee9df;

  border:
    2px solid
    #1c1c20;

  box-shadow:
    6px 7px 0
    rgba(0,0,0,.38);
}


.teen-card:nth-child(1) {
  transform:
    rotate(-1.2deg);
}


.teen-card:nth-child(2) {
  transform:
    rotate(.7deg);

  background:
    #d8d0ec;
}


.teen-card:nth-child(3) {
  transform:
    rotate(-.4deg);

  background:
    #d5e3e7;
}


.teen-card small {
  font-family:
    "Comic Sans MS",
    cursive;

  font-size:
    18px;
}


.teen-card strong {
  font-size:
    clamp(24px, 2.3vw, 36px);

  font-weight:
    400;

  overflow-wrap:
    anywhere;
}


.teen-card > span {
  position:
    absolute;

  top:
    22px;

  right:
    24px;

  font-size:
    28px;
}


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

@media(max-width:750px) {

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

  .teen-header span {
    display:
      none;
  }

  .teen-scene {
    min-height:
      auto;

    padding:
      110px 21px
      90px;
  }

  .teen-cover {
    min-height:
      100svh;
  }

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

  h1 {
    font-size:
      clamp(52px, 14vw, 72px);
  }

  h2 {
    font-size:
      clamp(46px, 12vw, 64px);
  }

  .teen-contact-grid {
    grid-template-columns:
      1fr;
  }

  .teen-card {
    min-height:
      160px;
  }

}



/* =========================================================
   TEEN MOTION SYSTEM V2
   ========================================================= */


/* ---------------------------------------------------------
   AMBIENT BACKGROUND
   --------------------------------------------------------- */

body::before {
  transform:
    scale(1.05);

  animation:
    teenAmbient 16s
    ease-in-out
    infinite alternate;

  will-change:
    transform,
    opacity;
}

@keyframes teenAmbient {

  0% {
    transform:
      scale(1.04)
      translate3d(-1%, 0, 0);

    opacity:
      .82;
  }

  100% {
    transform:
      scale(1.09)
      translate3d(1.5%, -1%, 0);

    opacity:
      1;
  }

}


/* ---------------------------------------------------------
   GENERIC REVEAL
   --------------------------------------------------------- */

.motion-ready .reveal-item {
  opacity:
    0;

  transform:
    translate3d(0, 34px, 0);

  filter:
    blur(7px);

  transition:
    opacity .85s ease,
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .85s ease;

  transition-delay:
    var(--delay, 0ms);

  will-change:
    opacity,
    transform,
    filter;
}


.motion-ready .reveal-item.is-visible {
  opacity:
    1;

  transform:
    translate3d(0,0,0);

  filter:
    blur(0);
}


/* ---------------------------------------------------------
   SECTION NUMBER
   --------------------------------------------------------- */

.teen-number {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.teen-number::after {
  content: "";

  width:
    0;

  height:
    1px;

  background:
    rgba(255,255,255,.38);

  transition:
    width .8s
    cubic-bezier(.16,1,.3,1)
    .25s;
}


.teen-scene.is-active
.teen-number::after {
  width:
    72px;
}


/* ---------------------------------------------------------
   HAND NOTES
   --------------------------------------------------------- */

.motion-ready .teen-note.reveal-item {
  transform:
    translate3d(-24px,24px,0)
    rotate(-4deg);
}


.motion-ready .teen-note.reveal-item.is-visible {
  transform:
    translate3d(0,0,0)
    rotate(-1deg);
}


/* ---------------------------------------------------------
   LARGE TITLES
   --------------------------------------------------------- */

.motion-ready h1.reveal-item,
.motion-ready h2.reveal-item {
  transform:
    translate3d(0,48px,0)
    scale(.975);

  transform-origin:
    left bottom;
}


.motion-ready h1.reveal-item.is-visible,
.motion-ready h2.reveal-item.is-visible {
  transform:
    translate3d(0,0,0)
    scale(1);
}


/* ---------------------------------------------------------
   JOURNAL FRAGMENTS
   --------------------------------------------------------- */

.motion-ready
.teen-fragments span {
  opacity:
    0;

  transform:
    translate3d(-35px,18px,0)
    rotate(-5deg)
    scale(.94);

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

  transition-delay:
    var(--delay,0ms);
}


.motion-ready
.teen-fragments span.is-visible {
  opacity:
    1;
}


/* разные положения после появления */

.motion-ready
.teen-fragments span:nth-child(1).is-visible {
  transform:
    rotate(-1deg);
}

.motion-ready
.teen-fragments span:nth-child(2).is-visible {
  transform:
    rotate(1.3deg)
    translateX(28px);
}

.motion-ready
.teen-fragments span:nth-child(3).is-visible {
  transform:
    rotate(-.5deg)
    translateX(8px);
}

.motion-ready
.teen-fragments span:nth-child(4).is-visible {
  transform:
    rotate(.8deg)
    translateX(48px);
}


/* ---------------------------------------------------------
   PRESSURE WORDS
   --------------------------------------------------------- */

.motion-ready
.pressure-list span {
  opacity:
    0;

  transform:
    translate3d(0,30px,0)
    scale(.82)
    rotate(-3deg);

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

  transition-delay:
    var(--delay,0ms);
}


.motion-ready
.pressure-list span.is-visible {
  opacity:
    1;

  transform:
    translate3d(0,0,0)
    scale(1)
    rotate(0);
}


/* отдельные слова слегка кривые */

.pressure-list span:nth-child(2) {
  transform-origin:
    left bottom;
}

.pressure-list span:nth-child(3) {
  transform-origin:
    center bottom;
}

.pressure-list span:nth-child(5) {
  transform-origin:
    right bottom;
}


/* ---------------------------------------------------------
   DIALOGUE
   --------------------------------------------------------- */

.motion-ready
.dialogue-parent {
  opacity:
    0;

  transform:
    translate3d(-60px,0,0)
    rotate(-1deg);

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


.motion-ready
.dialogue-teen {
  opacity:
    0;

  transform:
    translate3d(60px,0,0)
    rotate(1deg);

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


.motion-ready
.dialogue-parent.is-visible,
.motion-ready
.dialogue-teen.is-visible {
  opacity:
    1;

  transform:
    translate3d(0,0,0)
    rotate(0);
}


/* ---------------------------------------------------------
   CONTACT CARDS
   --------------------------------------------------------- */

.motion-ready
.teen-card {
  opacity:
    0;

  transition:
    opacity .7s ease,
    transform .8s
    cubic-bezier(.16,1,.3,1),
    box-shadow .3s ease;

  transition-delay:
    var(--delay,0ms);
}


.motion-ready
.teen-card:nth-child(1) {
  transform:
    translateY(55px)
    rotate(-4deg);
}


.motion-ready
.teen-card:nth-child(2) {
  transform:
    translateY(70px)
    rotate(3deg);
}


.motion-ready
.teen-card:nth-child(3) {
  transform:
    translateY(60px)
    rotate(-2deg);
}


.motion-ready
.teen-card.is-visible {
  opacity:
    1;
}


.motion-ready
.teen-card:nth-child(1).is-visible {
  transform:
    translateY(0)
    rotate(-1.2deg);
}


.motion-ready
.teen-card:nth-child(2).is-visible {
  transform:
    translateY(0)
    rotate(.7deg);
}


.motion-ready
.teen-card:nth-child(3).is-visible {
  transform:
    translateY(0)
    rotate(-.4deg);
}


/* ---------------------------------------------------------
   ACCENT WORDS
   --------------------------------------------------------- */

.accent-violet,
.accent-pink,
.accent-blue {
  display:
    inline-block;

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


.teen-scene.is-active
.accent-violet {
  transform:
    rotate(-1deg);
}


.teen-scene.is-active
.accent-pink {
  transform:
    rotate(1.2deg);
}


.teen-scene.is-active
.accent-blue {
  transform:
    rotate(-.8deg);
}


/* ---------------------------------------------------------
   HOVER — DESKTOP
   --------------------------------------------------------- */

@media(hover:hover) {

  .teen-fragments span {
    transition:
      transform .25s ease,
      opacity .6s ease;
  }


  .teen-fragments span:hover {
    transform:
      rotate(0)
      translateX(12px)
      scale(1.04) !important;
  }


  .pressure-list span {
    transition:
      transform .25s ease,
      opacity .55s ease;
  }


  .pressure-list span:hover {
    transform:
      translateY(-5px)
      rotate(-2deg)
      scale(1.05) !important;
  }


  .teen-card:hover {
    box-shadow:
      10px 12px 0
      rgba(0,0,0,.42);
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

  body::before {
    animation:
      none !important;
  }


  .reveal-item,
  .teen-fragments span,
  .pressure-list span,
  .dialogue-parent,
  .dialogue-teen,
  .teen-card {

    opacity:
      1 !important;

    filter:
      none !important;

    transition:
      none !important;
  }

}




/* =========================================================
   TEEN DYNAMIC BACKGROUNDS V5
   ========================================================= */

.teen-background {
  position: fixed;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  height: 100lvh;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

  background: #171719;
}


.teen-bg-layer {
  position: absolute;

  inset: 0;

  background-repeat:
    no-repeat;

  background-size:
    cover;

  background-position:
    center center;

  opacity:
    0;

  transition:
    opacity 1.15s
    cubic-bezier(.4,0,.2,1);

  will-change:
    opacity;
}


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


/*
  Небольшое затемнение.
  Сам фон остаётся видимым,
  но белый текст не теряется.
*/

.teen-background::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    rgba(8,8,10,.16);

  pointer-events: none;
}


/* весь контент поверх фоновой сцены */

.teen-header,
main {
  position: relative;
  z-index: 2;
}


/*
  Сами секции прозрачны.
*/

.teen-scene,
.teen-contacts {
  background:
    transparent !important;
}


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

@media(max-width:750px) {

  .teen-background {
    height:
      100lvh;
  }


  .teen-bg-layer {
    /*
      На вертикальном экране cover сильно режет
      горизонтальную картинку.
      Позже для каждой сцены отдельно подгоним position.
    */

    background-position:
      center center;
  }


  .teen-background::after {
    background:
      rgba(8,8,10,.30);
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  .teen-bg-layer {
    transition:
      opacity .25s linear;
  }

}



/* =========================================================
   TEEN SCENE POSITIONS V6
   ========================================================= */


/* ---------------------------------------------------------
   01 — СИЛЬНЕЕ ВПРАВО
   --------------------------------------------------------- */

#teen-cover .teen-content {
  width:
    min(760px, 62vw);

  margin-left:
    auto !important;

  margin-right:
    0 !important;

  transform:
    translateX(clamp(35px, 5vw, 90px));
}


/* ---------------------------------------------------------
   02 — ВПРАВО
   --------------------------------------------------------- */

#teen-self .teen-content {
  width:
    min(760px, 68vw);

  margin-left:
    auto !important;

  margin-right:
    clamp(20px, 5vw, 90px) !important;

  transform:
    none !important;
}


/* ---------------------------------------------------------
   03 — НЕ ТРОГАЕМ
   --------------------------------------------------------- */

#teen-relationships .teen-content {
  /* intentionally unchanged */
}


/* ---------------------------------------------------------
   04 — ВЛЕВО
   --------------------------------------------------------- */

#teen-pressure .teen-content {
  width:
    min(790px, 72vw);

  margin-left:
    0 !important;

  margin-right:
    auto !important;

  transform:
    translateX(clamp(-40px, -3vw, -15px));
}


/* ---------------------------------------------------------
   05 — ЧУТЬ ПРАВЕЕ ЦЕНТРА
   --------------------------------------------------------- */

#teen-feelings .teen-content {
  width:
    min(790px, 68vw);

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  transform:
    translateX(clamp(35px, 5vw, 85px));
}


/* ---------------------------------------------------------
   06 — ПО ЦЕНТРУ
   --------------------------------------------------------- */

#teen-parents .teen-content {
  width:
    min(860px, 72vw);

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  transform:
    none !important;
}


/* ---------------------------------------------------------
   07 — ПО ЦЕНТРУ
   --------------------------------------------------------- */

#teen-therapy .teen-content {
  width:
    min(850px, 72vw);

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  transform:
    none !important;
}


/* ---------------------------------------------------------
   08 — ПО ЦЕНТРУ
   --------------------------------------------------------- */

#teen-start .teen-content {
  width:
    min(820px, 72vw);

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  transform:
    none !important;
}


/* =========================================================
   MOBILE
   На телефоне всё возвращаем в нормальный поток
   ========================================================= */

@media(max-width:750px) {

  #teen-cover .teen-content,
  #teen-self .teen-content,
  #teen-relationships .teen-content,
  #teen-pressure .teen-content,
  #teen-feelings .teen-content,
  #teen-parents .teen-content,
  #teen-therapy .teen-content,
  #teen-start .teen-content {

    width:
      100% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    transform:
      none !important;
  }

}



/* =========================================================
   TEEN SCENE POSITIONS V8
   ========================================================= */


/* 02 — LEFT */

#teen-self .teen-content {
  width:
    min(760px, 68vw) !important;

  margin-left:
    0 !important;

  margin-right:
    auto !important;

  transform:
    none !important;
}


/* 03 — оставляем как есть */


/* 04 — CENTER */

#teen-pressure .teen-content {
  width:
    min(790px, 70vw) !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  transform:
    none !important;
}


/* 05 — оставляем как есть */


/* 06 / 07 / 08
   центр + 1/8 экрана вправо */

#teen-parents .teen-content,
#teen-therapy .teen-content,
#teen-start .teen-content {

  width:
    min(760px, 62vw) !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  transform:
    translateX(12.5vw) !important;
}


/* MOBILE */

@media(max-width:750px) {

  #teen-self .teen-content,
  #teen-pressure .teen-content,
  #teen-parents .teen-content,
  #teen-therapy .teen-content,
  #teen-start .teen-content {

    width:
      100% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    transform:
      none !important;
  }

}



/* =========================================================
   TEEN TEXT SHADOWS + LINE MOTION V9
   ========================================================= */


/* ---------------------------------------------------------
   TEXT READABILITY
   --------------------------------------------------------- */

.teen-scene h1,
.teen-scene h2,
.teen-scene h3 {
  text-shadow:
    0 2px 5px rgba(0,0,0,.92),
    0 8px 22px rgba(0,0,0,.64),
    0 18px 48px rgba(0,0,0,.34);
}


.teen-scene p,
.teen-scene li,
.teen-scene .lead,
.teen-scene .copy,
.teen-scene .teen-copy,
.teen-scene .dialog,
.teen-scene .teen-dialog,
.teen-scene .fragment,
.teen-scene .teen-fragment {
  text-shadow:
    0 1px 3px rgba(0,0,0,.96),
    0 5px 15px rgba(0,0,0,.58);
}


/* рукописные фразы */

.teen-note,
.teen-handwritten,
.handwritten,
.teen-scene .note {
  text-shadow:
    0 2px 5px rgba(0,0,0,.88),
    0 0 14px rgba(170,115,255,.22),
    0 7px 20px rgba(0,0,0,.52);
}


/* ---------------------------------------------------------
   SECTION NUMBER LINE
   --------------------------------------------------------- */

/*
   Поддерживаем несколько возможных названий класса.
   Сработает тот, который реально есть в HTML.
*/

.scene-number,
.teen-number,
.section-number,
.teen-scene-number {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.scene-number::after,
.teen-number::after,
.section-number::after,
.teen-scene-number::after {
  content:
    "";

  display:
    block;

  width:
    clamp(52px, 8vw, 130px);

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      currentColor 0%,
      rgba(255,255,255,.48) 60%,
      transparent 100%
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  opacity:
    0;

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

  will-change:
    transform,
    opacity;
}


/* если линия уже отдельным HTML-элементом */

.scene-line,
.teen-line,
.section-line {
  transform:
    scaleX(0);

  transform-origin:
    left center;

  opacity:
    0;

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

  will-change:
    transform,
    opacity;
}


/* секция вошла в экран */

.teen-scene.is-line-active .scene-number::after,
.teen-scene.is-line-active .teen-number::after,
.teen-scene.is-line-active .section-number::after,
.teen-scene.is-line-active .teen-scene-number::after,
.teen-scene.is-line-active .scene-line,
.teen-scene.is-line-active .teen-line,
.teen-scene.is-line-active .section-line {
  transform:
    scaleX(1);

  opacity:
    .82;
}


/* ---------------------------------------------------------
   Маленькое оживление номера
   --------------------------------------------------------- */

.scene-number,
.teen-number,
.section-number,
.teen-scene-number {
  transition:
    opacity .6s ease,
    transform .8s cubic-bezier(.16,1,.3,1);
}


.teen-scene:not(.is-line-active) .scene-number,
.teen-scene:not(.is-line-active) .teen-number,
.teen-scene:not(.is-line-active) .section-number,
.teen-scene:not(.is-line-active) .teen-scene-number {
  opacity:
    .58;

  transform:
    translateX(-8px);
}


.teen-scene.is-line-active .scene-number,
.teen-scene.is-line-active .teen-number,
.teen-scene.is-line-active .section-number,
.teen-scene.is-line-active .teen-scene-number {
  opacity:
    1;

  transform:
    translateX(0);
}


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

@media(max-width:750px) {

  .teen-scene h1,
  .teen-scene h2,
  .teen-scene h3 {
    text-shadow:
      0 2px 4px rgba(0,0,0,.94),
      0 7px 18px rgba(0,0,0,.68);
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

  .scene-number::after,
  .teen-number::after,
  .section-number::after,
  .teen-scene-number::after,
  .scene-line,
  .teen-line,
  .section-line {
    transition:
      none !important;
  }

}


/* 06 — ближе к центру на 10vw */
#teen-parents .teen-content {
  transform: translateX(2.5vw) !important;
}

@media(max-width:750px) {
  #teen-parents .teen-content {
    transform: none !important;
  }
}


/* =========================================================
   MOBILE HARD FIX V10
   ========================================================= */

@media (max-width: 750px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .teen-scene {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-left: 18px;
    padding-right: 18px;
  }

  .teen-content,
  .teen-content-right,
  #teen-cover .teen-content,
  #teen-self .teen-content,
  #teen-relationships .teen-content,
  #teen-pressure .teen-content,
  #teen-feelings .teen-content,
  #teen-parents .teen-content,
  #teen-therapy .teen-content,
  #teen-start .teen-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box;
  }

  .teen-scene h1,
  .teen-scene h2,
  .teen-scene h3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  .teen-scene h1 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: .98;
  }

  .teen-scene h2 {
    font-size: clamp(38px, 10.5vw, 52px);
    line-height: 1;
  }

  .teen-lead,
  .teen-copy,
  .teen-note,
  .teen-note-big,
  .teen-fragments,
  .pressure-list,
  .dialogue,
  .dialogue-parent,
  .dialogue-teen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .teen-fragments span,
  .pressure-list span,
  .dialogue p {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transform: none !important;
  }

  .teen-number,
  .scene-number,
  .section-number,
  .teen-scene-number {
    max-width: 100%;
  }

}


/* =========================================================
   MOBILE HARD FIX V10
   ========================================================= */

@media (max-width: 750px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .teen-scene {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-left: 18px;
    padding-right: 18px;
  }

  .teen-content,
  .teen-content-right,
  #teen-cover .teen-content,
  #teen-self .teen-content,
  #teen-relationships .teen-content,
  #teen-pressure .teen-content,
  #teen-feelings .teen-content,
  #teen-parents .teen-content,
  #teen-therapy .teen-content,
  #teen-start .teen-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box;
  }

  .teen-scene h1,
  .teen-scene h2,
  .teen-scene h3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  .teen-scene h1 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: .98;
  }

  .teen-scene h2 {
    font-size: clamp(38px, 10.5vw, 52px);
    line-height: 1;
  }

  .teen-lead,
  .teen-copy,
  .teen-note,
  .teen-note-big,
  .teen-fragments,
  .pressure-list,
  .dialogue,
  .dialogue-parent,
  .dialogue-teen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .teen-fragments span,
  .pressure-list span,
  .dialogue p {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transform: none !important;
  }

  .teen-number,
  .scene-number,
  .section-number,
  .teen-scene-number {
    max-width: 100%;
  }

}



/* =========================================================
   TEEN START — MARIA PORTRAIT
   ========================================================= */

#teen-start {
  position: relative;
  overflow: hidden;
}

#teen-start .teen-maria-portrait {
  position: absolute;

  left: clamp(40px, 8vw, 135px);
  bottom: clamp(35px, 5vh, 70px);

  width: clamp(260px, 27vw, 420px);
  aspect-ratio: 2 / 3;

  overflow: hidden;

  z-index: 2;

  border-radius: 28px;

  transform: rotate(-1.5deg);

  box-shadow:
    0 28px 80px rgba(0,0,0,.30);
}

#teen-start .teen-maria-portrait::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius: inherit;
}

#teen-start .teen-maria-portrait img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 18%;
}

#teen-start .teen-content {
  position: relative;
  z-index: 3;
}


/* TABLET */

@media(max-width:1000px) {

  #teen-start .teen-maria-portrait {
    left: 28px;

    width: 280px;

    opacity: .94;
  }

}


/* MOBILE */

@media(max-width:700px) {

  #teen-start {
    display: flex;
    flex-direction: column;

    padding-top: 72px;
    padding-bottom: 72px;
  }

  #teen-start .teen-maria-portrait {
    position: relative;

    left: auto;
    bottom: auto;

    width: min(76vw, 320px);

    margin:
      0 auto
      46px;

    transform: rotate(-1deg);

    flex: 0 0 auto;
  }

  #teen-start .teen-content,
  #teen-start .teen-content-right {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

}


/* TEEN MARIA — POSITION UP */
#teen-start .teen-maria-portrait {
  bottom: clamp(135px, 14vh, 170px);
}


/* TEEN MARIA — POSITION UP */
#teen-start .teen-maria-portrait {
  bottom: clamp(135px, 14vh, 170px);
}