/* A decorative, non-interactive crochet atmosphere shared by every route. */
.academy-ambient {
  position: fixed;
  inset: 74px 0 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}

.academy-ambient__motif {
  position: absolute;
  display: block;
  width: min(31vw, 390px);
  height: auto;
  opacity: .22;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(106, 67, 54, .07));
}

.academy-ambient__motif--left {
  top: 5%;
  left: max(-148px, -11vw);
  animation: crochet-float-left 18s ease-in-out infinite alternate;
}

.academy-ambient__motif--right {
  right: max(-155px, -11vw);
  bottom: -8%;
  opacity: .18;
  animation: crochet-float-right 21s ease-in-out infinite alternate;
}

.academy-ambient__thread {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: min(21vh, 175px);
  overflow: visible;
  opacity: .25;
}

.academy-ambient__thread path {
  fill: none;
  stroke: #bd8d7b;
  stroke-width: 1.3;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  animation: crochet-thread-flow 22s linear infinite;
}

.academy-ambient__wordmark {
  position: absolute;
  bottom: 22px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #69453c;
  direction: ltr;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(.68rem, 1.05vw, .86rem);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-align: left;
  text-shadow: 0 1px 0 #fff9;
  opacity: .24;
  animation: crochet-wordmark-breathe 13s ease-in-out infinite alternate;
}

.academy-ambient__wordmark small {
  color: #a7785e;
  font-size: .74em;
  letter-spacing: .38em;
}

@keyframes crochet-float-left {
  from { transform: translate3d(0, 0, 0) rotate(-7deg); }
  to { transform: translate3d(17px, 22px, 0) rotate(2deg); }
}

@keyframes crochet-float-right {
  from { transform: translate3d(0, 0, 0) rotate(13deg) scale(.87); }
  to { transform: translate3d(-19px, -28px, 0) rotate(3deg) scale(.94); }
}

@keyframes crochet-thread-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -120; }
}

@keyframes crochet-wordmark-breathe {
  from { opacity: .17; }
  to { opacity: .30; }
}

@media (max-width: 760px) {
  .academy-ambient { inset-block-start: 62px; }
  .academy-ambient__motif { width: min(53vw, 280px); opacity: .14; }
  .academy-ambient__motif--left { top: 9%; left: -23vw; }
  .academy-ambient__motif--right { right: -28vw; bottom: 4%; opacity: .12; }
  .academy-ambient__thread { height: 105px; opacity: .17; }
  .academy-ambient__wordmark { left: 14px; bottom: 12px; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .academy-ambient__motif,
  .academy-ambient__thread path,
  .academy-ambient__wordmark { animation: none; will-change: auto; }
}