/* A typographic signature in normal flow, a second title scene on desktop. */
.wolf-signature {
  top: 35%; right: var(--pad); width: 142px;
  writing-mode: horizontal-tb; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
  text-shadow: 0 2px 18px #0008;
}
.wolf-kicker, .wolf-address {
  display: block; font: 400 9px/1.4 Mono, monospace; letter-spacing: .22em;
}
.wolf-signature .wolf-kicker { color: var(--paper); }
.wolf-signature strong {
  display: block; font: 700 91px/.88 Display, 'Arial Narrow', sans-serif;
  letter-spacing: -.035em; color: var(--red); margin: 9px 0 12px;
}
.wolf-signature .wolf-address {
  font-size: 7px; letter-spacing: .16em;
  border-top: 1px solid #ed4a3780; padding-top: 9px;
}
.wolf-reveal { display: none; pointer-events: none; }

@media (min-width:980px) and (min-height:700px) {
  .motion-ready:not(.motion-off) .hero-scroll { height: 215svh; }
  .motion-ready:not(.motion-off) .hero-name {
    opacity: calc(1 - var(--hero-p, 0) * 4);
  }
  .motion-ready:not(.motion-off) .wolf-reveal {
    display: block; position: absolute; z-index: 1;
    left: var(--pad); right: var(--pad); top: 32%;
    opacity: var(--wolf-opacity, 0);
    transform: translateY(calc((.4 - var(--hero-p, 0)) * 55px));
  }
  .wolf-type {
    width: max-content; max-width: 100%;
    clip-path: inset(0 calc((1 - var(--wolf-reveal, 0)) * 100%) 0 0);
  }
  .wolf-type .wolf-kicker {
    margin-left: .5vw; font-size: clamp(10px, 1vw, 17px); letter-spacing: .45em;
  }
  .wolf-word {
    display: block; font: 700 min(34vw, 60svh, 650px)/.8 Display, 'Arial Narrow', sans-serif;
    letter-spacing: -.025em; margin: 20px 0 26px;
    color: var(--paper); text-shadow: 0 8px 55px #0005;
  }
  .wolf-type .wolf-address {
    margin-left: .5vw; font-size: clamp(10px, 1.15vw, 19px); letter-spacing: .32em;
  }
  .wolf-rule {
    position: absolute; left: 0; top: 63%; width: 88%; height: 2px;
    background: var(--red); transform-origin: left;
    transform: scaleX(var(--wolf-reveal, 0)) rotate(-5deg);
  }
  .motion-ready:not(.motion-off) .hero-line {
    opacity: calc((1 - var(--wolf-opacity, 0)) * (.3 + var(--hero-p, 0) * .65));
  }
}

@media (max-width:979px) and (min-width:641px) {
  .wolf-signature { top: 40%; width: 120px; }
  .wolf-signature strong { font-size: 78px; }
}
@media (max-width:640px) {
  .wolf-signature {
    top: 393px; left: var(--pad); right: auto; width: 150px;
    align-items: flex-start; text-align: left;
  }
  .wolf-signature .wolf-kicker { font-size: 8px; letter-spacing: .25em; }
  .wolf-signature strong { font-size: 80px; margin: 8px 0 10px; }
  .wolf-signature .wolf-address { font-size: 7px; letter-spacing: .17em; padding-top: 7px; }
  .hero-system { top: 541px; }
  .hero-system h2 { font-size: 43px; }
}
@media (max-width:365px) {
  .wolf-signature { top: 378px; }
  .wolf-signature strong { font-size: 73px; }
  .hero-system { top: 519px; }
  .hero-system h2 { font-size: 41px; }
}