/* This introduction belongs only to the home page. Shared pages keep their approved styles. */
.home-page .site-header {
  position: fixed;
  inset: 0 0 auto;
  transform: translateY(-105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s ease, opacity .3s ease, visibility .4s;
}
.home-page .site-header.is-revealed {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.home-page .seven-intro {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}
.home-page .intro-word {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: .12em;
  color: var(--red);
  font-size: clamp(78px, 14vw, 220px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  animation: intro-appear 1.15s cubic-bezier(.22,1,.36,1) both;
}
.home-page .intro-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.home-page .intro-shapes span {
  position: absolute;
  display: block;
  width: var(--size, 130px);
  height: var(--size, 130px);
  border: 1px solid rgba(230, 0, 0, .065);
  background: rgba(230, 0, 0, .018);
  border-radius: 3px;
  animation: intro-drift var(--duration, 26s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.home-page .intro-shapes span:nth-child(1) { --size: 150px; --angle: 18deg; --duration: 29s; --delay: -11s; left: 9%; top: 13%; }
.home-page .intro-shapes span:nth-child(2) { --size: 76px; --angle: 41deg; --duration: 22s; --delay: -6s; left: 41%; top: 12%; }
.home-page .intro-shapes span:nth-child(3) { --size: 205px; --angle: -13deg; --duration: 34s; --delay: -21s; right: 7%; top: 9%; }
.home-page .intro-shapes span:nth-child(4) { --size: 65px; --angle: 28deg; --duration: 24s; --delay: -15s; left: 3%; top: 51%; }
.home-page .intro-shapes span:nth-child(5) { --size: 110px; --angle: -25deg; --duration: 27s; --delay: -8s; right: 10%; top: 56%; }
.home-page .intro-shapes span:nth-child(6) { --size: 210px; --angle: 31deg; --duration: 32s; --delay: -18s; left: 17%; bottom: 5%; }
.home-page .intro-shapes span:nth-child(7) { --size: 85px; --angle: -9deg; --duration: 23s; --delay: -5s; left: 54%; bottom: 13%; }
.home-page .intro-shapes span:nth-child(8) { --size: 145px; --angle: -35deg; --duration: 30s; --delay: -24s; right: -3%; bottom: -1%; }
.home-page .intro-shapes span:nth-child(3n) {
  border-color: rgba(26, 26, 26, .055);
  background: rgba(26, 26, 26, .012);
}
@keyframes intro-drift {
  from { transform: translate3d(-12px, 15px, 0) rotate(var(--angle, 0deg)); }
  to { transform: translate3d(25px, -30px, 0) rotate(calc(var(--angle, 0deg) + 22deg)); }
}
@keyframes intro-appear {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  .home-page .intro-word { font-size: clamp(54px, 14.8vw, 104px); letter-spacing: .08em; padding-left: .08em; }
  .home-page .intro-shapes span { width: calc(var(--size, 130px) * .62); height: calc(var(--size, 130px) * .62); }
  .home-page .intro-shapes span:nth-child(6) { left: 6%; bottom: 10%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .site-header { transition: none; }
  .home-page .intro-word, .home-page .intro-shapes span { animation: none; }
  .home-page .intro-shapes span { transform: rotate(var(--angle, 0deg)); }
}