/* Блок «Награды» на главной — «тетрадь и маркер» (home/_awards_notebook.html.erb). */
/* Блок «Награды», вариант 2 — «Тетрадь и маркер». Продолжение языка блока выше, но тише:
   чистая тёплая бумага без клетки, два предмета на столе — стопка наград ученикам (под скотчем)
   и письмо учителю с конвертом (под скрепкой). Маркер — три цвета трёх наград, ручка — метки.
   Появление: reveal ставит is-seen — мазки прочерчиваются; нарисованное состояние — основное. */

.a2{
  --a2-ink: #24243e;
  --a2-text: #4a4d66;
  --a2-vio: #6744d4;
  --a2-y: #fbd163;
  --a2-c: #94dcee;
  --a2-p: #f6b0d7;
  --a2-v: #d3c8f8;
  --a2-ease: cubic-bezier(.2, .75, .2, 1);
  --a2-sw: 214px;                    /* ширина листа в стопке */
  position: relative; isolation: isolate; overflow: hidden;
  scroll-margin-top: 24px;
  padding: 58px 0 68px;
  color: var(--a2-ink);
  background: linear-gradient(#fdfcf8, #fff);
}
.a2 .aw-anchor{ position: absolute; top: 0; left: 0; }
.a2-in{ position: relative; }

.a2-title{
  font-size: 50px; line-height: 1; font-weight: 800; letter-spacing: -.036em;
  color: var(--a2-ink);
}

/* ───────── две части ───────── */
.a2-parts{
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) 318px;
  column-gap: 88px;
  margin-top: 44px;
}

/* метки ручкой */
.a2-who{
  position: relative; justify-self: start; width: max-content;
  font-size: 25px; line-height: 1.1; font-weight: 700; font-style: italic; letter-spacing: -.012em;
  color: var(--a2-vio);
  rotate: -3deg; transform-origin: 0 100%;
}
.a2-who::after{
  content: ""; position: absolute; left: 0; right: -6px; bottom: -5px; height: 2.5px;
  border-radius: 2px; background: currentColor;
  rotate: -.9deg; transform-origin: 0 50%;
  transition: transform .4s var(--a2-ease) .25s;
}
.a2-pen{
  fill: none; stroke: var(--a2-vio); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.a2-pen path{
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s cubic-bezier(.5, 0, .2, 1) .7s, opacity .01s linear .7s;
}
.a2-pen .a2-pen-2{ transition-duration: .22s, .01s; transition-delay: 1.16s; }

.a2-h{
  font-size: 28px; line-height: 1.22; font-weight: 800; letter-spacing: -.02em;
  color: var(--a2-ink);
}
.a2-ul{
  --a2-k: var(--a2-y);
  margin: 0 -.1em; padding: 0 .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--a2-k), var(--a2-k)) no-repeat 0 86% / 100% .42em;
  transition: background-size .6s var(--a2-ease) .3s;
}
.a2-ul-v{ --a2-k: var(--a2-v); transition-delay: .7s; }
.a2-p{ font-size: 16.5px; line-height: 1.55; color: var(--a2-text); }

/* ───────── ученикам ───────── */
.a2-kids{
  display: grid; align-items: start;
  grid-template-columns: 322px minmax(0, 1fr);
  column-gap: 30px;
}
.a2-kids > *{ grid-column: 2; }
.a2-kids > .a2-stack{ grid-column: 1; grid-row: 1 / span 6; }
.a2-kids .a2-h{ margin-top: 16px; }
.a2-kids .a2-p{ margin-top: 12px; max-width: 26em; }

.a2-stack{
  position: relative; width: var(--a2-sw);
  margin: 22px 0 0 50px;
}
.a2-sh{
  display: block; border-radius: 2px; background: #fff;
  box-shadow: 0 1px 2px rgba(36, 36, 62, .16), 0 14px 22px -16px rgba(36, 36, 62, .3);
  transition: rotate .7s var(--a2-ease) .15s, translate .7s var(--a2-ease) .15s;
}
.a2-sh img{ display: block; width: 100%; height: auto; border-radius: 2px; }
.a2-sh-2, .a2-sh-3{ position: absolute; inset: 0; }
.a2-sh-2{ rotate: 6.5deg; translate: 40px -12px; }
.a2-sh-3{ rotate: -7deg; translate: -28px 5px; }
.a2-sh-1{
  position: relative; rotate: -1.6deg;
  box-shadow: 0 1px 1px rgba(36, 36, 62, .1), 0 3px 6px rgba(36, 36, 62, .06), 0 26px 38px -22px rgba(36, 36, 62, .42);
}
.a2-tape{
  position: absolute; top: -15px; left: 50%;
  width: 104px; height: 29px; margin-left: -52px;
  rotate: -3.2deg;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 6px),
    rgba(247, 185, 40, .7);
  clip-path: polygon(0 0, 3.5% 17%, 0 33%, 3.5% 50%, 0 67%, 3.5% 83%, 0 100%, 100% 100%, 96.5% 83%, 100% 67%, 96.5% 50%, 100% 33%, 96.5% 17%, 100% 0);
}

/* список: название закрашено маркером, порог — ручкой */
.a2-list{ list-style: none; margin: 22px 0 0; padding: 0; max-width: 420px; }
.a2-row{
  --a2-k: var(--a2-y);
  display: flex; align-items: baseline; gap: 14px;
  min-height: 44px; padding: 9px 0 0 .5em;
}
.a2-row-p{ --a2-k: var(--a2-p); }
.a2-row-c{ --a2-k: var(--a2-c); }
.a2-name{
  position: relative; z-index: 0; flex: none;
  font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.012em; color: var(--a2-ink);
  white-space: nowrap;
}
.a2-name::before{
  content: ""; position: absolute; z-index: -1;
  inset: -.26em -.5em -.24em -.5em;
  border-radius: .2em .5em .26em .56em / .5em .26em .56em .2em;
  background: var(--a2-k);
  rotate: -1.1deg; transform-origin: 0 50%;
  transition: transform .5s var(--a2-ease) .5s;
}
.a2-row-p .a2-name::before{ rotate: .7deg; transition-delay: .62s; }
.a2-row-c .a2-name::before{ rotate: -.6deg; transition-delay: .74s; }
.a2-dots{ flex: 1 1 12px; min-width: 12px; margin-left: .4em; border-bottom: 2px dotted #cfcadf; translate: 0 -.22em; }
.a2-from{
  flex: none; font-size: 17px; line-height: 1.25; font-weight: 600; font-style: italic; letter-spacing: -.01em;
  color: var(--a2-vio); white-space: nowrap;
}
.a2-fine{ margin-top: 18px; font-size: 15px; line-height: 1.45; color: #666982; }

/* ───────── учителям ───────── */
.a2-teach{
  position: relative;
  display: grid; align-items: start;
  grid-template-columns: 172px minmax(0, 1fr);
}
/* линия-разделитель от руки */
.a2-teach::before{
  content: ""; position: absolute; top: 6px; bottom: 2px; left: -50px;
  border-left: 2px dashed #d9d5e8;
  rotate: .5deg;
}
.a2-teach > *{ grid-column: 1 / -1; }
.a2-teach > .a2-letter{ grid-column: 1; grid-row: 1; }
.a2-teach > .a2-who{ grid-column: 2; grid-row: 1; margin: 34px 0 0 6px; }
.a2-who-arrow{ position: absolute; right: 44px; top: 100%; width: 60px; height: 45px; margin-top: 14px; }

.a2-letter{
  position: relative; z-index: 0; width: 158px;
  margin: 14px 0 0 8px;
  rotate: 2.6deg;
}
.a2-letter img{
  position: relative; display: block; width: 100%; height: auto; border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 36, 62, .14), 0 3px 6px rgba(36, 36, 62, .05), 0 22px 30px -20px rgba(36, 36, 62, .4);
}
.a2-env{
  position: absolute; left: 70px; bottom: -16px; width: 196px; height: auto;
  rotate: -7deg;
  fill: #f6efdf; stroke: #cdbf9c; stroke-width: 1.6; stroke-linejoin: round; overflow: visible;
  filter: drop-shadow(0 8px 8px rgba(36, 36, 62, .1));
}
.a2-clip{
  position: absolute; top: -17px; left: 20px; width: 21px; height: 50px;
  rotate: 7deg;
  fill: none; stroke: #7f84a3; stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(36, 36, 62, .18));
}
.a2-h-t{ margin-top: 42px; font-size: 22.5px; }
.a2-p-t{ margin-top: 10px; }

.a2-link{
  position: relative; justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 10px;
  font-size: 17.5px; line-height: 1.2; font-weight: 800; letter-spacing: -.012em;
  color: var(--a2-vio);
  -webkit-tap-highlight-color: transparent;
}
.a2-link-t{ position: relative; white-space: nowrap; }
.a2-link-t::after{
  content: ""; position: absolute; left: 0; right: -4px; bottom: -5px; height: 2.5px;
  border-radius: 2px; background: currentColor;
  rotate: -.7deg; transform-origin: 0 50%;
  transition: transform .45s var(--a2-ease) 1s;
}
.a2-link-arrow{
  flex: none; width: 25px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .22s var(--a2-ease);
}
.a2-link:focus-visible{ outline: 2.5px solid var(--a2-vio); outline-offset: 5px; border-radius: 4px; }

@media (hover: hover){
  .a2-link:hover{ color: #5233b8; }
  .a2-link:hover .a2-link-arrow{ translate: 5px 0; }
  .a2-stack:hover .a2-sh-2{ rotate: 7.6deg; translate: 44px -14px; }
  .a2-stack:hover .a2-sh-3{ rotate: -8deg; translate: -31px 6px; }
}

/* ───────── «ненарисованное» состояние до появления ───────── */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) and (scripting: enabled){
  .a2:not(.is-seen) .a2-pen path{ stroke-dashoffset: 1; opacity: 0; }
  .a2:not(.is-seen) .a2-who::after,
  .a2:not(.is-seen) .a2-link-t::after,
  .a2:not(.is-seen) .a2-name::before{ transform: scaleX(0); }
  .a2:not(.is-seen) .a2-ul{ background-size: 0 .42em; }
  .a2:not(.is-seen) .a2-sh-2{ rotate: 2.4deg; translate: 14px -4px; }
  .a2:not(.is-seen) .a2-sh-3{ rotate: -2.6deg; translate: -10px 2px; }
}

/* ───────── размеры ───────── */
/* части одна под другой; текст обеих — по одной линии */
@media (max-width: 1100px){
  .a2-parts{ grid-template-columns: minmax(0, 1fr); }
  .a2-teach{
    grid-template-columns: 322px minmax(0, 1fr); column-gap: 30px;
    margin-top: 44px; padding-top: 46px;
  }
  .a2-teach::before{
    top: 0; bottom: auto; left: 0; right: 0;
    border-left: 0; border-top: 2px dashed #d9d5e8;
    rotate: -.25deg;
  }
  .a2-teach > *{ grid-column: 2; }
  .a2-teach > .a2-letter{ grid-column: 1; grid-row: 1 / span 5; margin: 8px 0 22px 50px; }
  .a2-teach > .a2-who{ grid-column: 2; grid-row: auto; margin: 0; }
  .a2-who-arrow{ right: 100%; top: 16px; margin: 0 14px 0 0; }
  .a2-h-t{ margin-top: 16px; font-size: 26px; }
  .a2-p-t{ max-width: 26em; }
}

/* телефон */
@media (max-width: 600px){
  .a2{ --a2-sw: 172px; padding: 36px 0 44px; }
  .a2-title{ font-size: 36px; }
  .a2-parts{ margin-top: 26px; }
  .a2-who{ font-size: 23px; }
  .a2-kids{ display: block; }
  .a2-stack{ margin: 26px auto 0; translate: -6px 0; }
  .a2-tape{ width: 88px; height: 25px; margin-left: -44px; top: -13px; }
  .a2-sh-2{ rotate: 6.5deg; translate: 34px -10px; }
  .a2-sh-3{ rotate: -7deg; translate: -24px 4px; }
  .a2-kids .a2-h{ margin-top: 30px; font-size: 25px; }
  .a2-kids .a2-p{ margin-top: 10px; max-width: none; }
  .a2-p{ font-size: 16px; }
  .a2-list{ margin-top: 16px; max-width: none; }
  .a2-row{ flex-wrap: wrap; gap: 4px 10px; min-height: 42px; }
  .a2-name{ font-size: 17px; }
  .a2-from{ font-size: 16px; }
  .a2-fine{ margin-top: 14px; }

  .a2-teach{ grid-template-columns: 150px minmax(0, 1fr); column-gap: 0; margin-top: 28px; padding-top: 30px; }
  .a2-teach > *{ grid-column: 1 / -1; }
  .a2-teach > .a2-letter{ grid-column: 1; grid-row: 1; width: 132px; margin: 12px 0 0 8px; }
  .a2-teach > .a2-who{ grid-column: 2; grid-row: 1; margin: 26px 0 0 4px; }
  .a2-who-arrow{ right: 34px; top: 100%; width: 52px; height: 39px; margin: 12px 0 0; }
  .a2-env{ left: 58px; bottom: -13px; width: 166px; }
  .a2-clip{ top: -15px; left: 17px; width: 19px; height: 45px; }
  .a2-h-t{ margin-top: 36px; font-size: 22px; }
  .a2-link{ margin-top: 6px; font-size: 17px; }
}

@media (max-width: 374px){
  .a2-row{ gap: 4px 7px; }
  .a2-name{ font-size: 16px; }
  .a2-from{ font-size: 15.5px; }
  .a2-dots{ flex-basis: 8px; min-width: 8px; margin-left: .3em; }
}

@media (prefers-reduced-motion: reduce){
  .a2 *, .a2 *::before, .a2 *::after{ transition: none; animation: none; }
}