.hero-art{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;visibility:hidden;direction:ltr}
.hero-art.is-ready{visibility:visible}
.hero-art-plane{position:absolute;top:0;left:0;width:1672px;height:941px;transform-origin:0 0;background:var(--hero) 0 0/100% 100% no-repeat}
.hero-pen{position:absolute;z-index:1;left:557px;top:495px;width:8px;height:134px;opacity:1;transform:rotate(3deg);transform-origin:50% 95%;filter:drop-shadow(1px 2px 1px #1b110d80)}
.hero-pen-barrel{position:absolute;inset:0 0 5%;border-radius:40% 40% 22% 22% / 2% 2% 1% 1%;background:linear-gradient(90deg,#583a16 0%,#b98235 16%,#e9c577 35%,#fff0b2 46%,#d6a855 62%,#9a6928 83%,#4d3212 100%);box-shadow:inset 0 0 0 .5px #e2be70}
.hero-pen-top{position:absolute;left:8%;right:8%;top:0;height:4%;border-radius:50% 50% 12% 12%;background:linear-gradient(90deg,#8b622c,#fff0ae 45%,#977036)}
.hero-pen-band{position:absolute;left:-4%;right:-4%;top:27%;height:2.2%;background:linear-gradient(90deg,#6e4a20,#f1d58c 45%,#7b5628);box-shadow:0 1px 0 #4b351980}
.hero-pen-clip{position:absolute;left:-25%;top:5%;width:35%;height:25%;border-radius:35% 20% 55% 30%;background:linear-gradient(90deg,#77511d,#fff0a9 60%,#b88638);box-shadow:-.5px 0 1px #38250c90}
.hero-pen-nib{position:absolute;bottom:0;left:7%;right:7%;height:7%;background:linear-gradient(90deg,#775524,#eacb87 44%,#443117);clip-path:polygon(0 0,100% 0,60% 88%,50% 100%,40% 88%)}
.hero-pocket-front{position:absolute;inset:0;z-index:2;background:var(--hero) 0 0/100% 100% no-repeat;clip-path:polygon(515px 537px,599px 517px,620px 660px,490px 660px)}
.hero-art[data-motion="play"] .hero-pen{animation:hero-pen-drop 2.15s .75s both}
@keyframes hero-pen-drop{
  0%{opacity:0;transform:translate(300%,-420%) rotate(22deg)}
  6%{opacity:1;transform:translate(290%,-415%) rotate(21deg);animation-timing-function:cubic-bezier(.48,.04,.85,.55)}
  68%{opacity:1;transform:translate(25%,-35%) rotate(5deg);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  83%{transform:translate(0,7%) rotate(3deg);animation-timing-function:ease-out}
  100%{opacity:1;transform:translate(0,0) rotate(3deg)}
}
@media(prefers-reduced-motion:reduce){.hero-art[data-motion="play"] .hero-pen{animation:none}}
@media print{.hero-art{display:none}}