/* One-time quill opening (see js/core/intro.js). Sits above the page and never blocks clicks. */
.intro-veil{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:#e8ddef40;pointer-events:none;will-change:opacity}
.intro-quill{width:min(62vw,420px);height:auto;transform-origin:50% 50%;will-change:transform,opacity;filter:saturate(.3) brightness(1.1)}

/* Header quill: wiggles and travels to the end of the tagline every 8 seconds, then settles. */
.logo-img{transform-origin:20% 90%;animation:quill-write 8s ease-in-out infinite}
@keyframes quill-write{
  0%{transform:translate(0,0) rotate(0)}
  4%{transform:translate(40px,2px) rotate(-12deg)}
  6%{transform:translate(64px,-2px) rotate(-18deg)}
  8%{transform:translate(92px,3px) rotate(-10deg)}
  10%{transform:translate(120px,-1px) rotate(-16deg)}
  12%{transform:translate(150px,2px) rotate(-8deg)}
  14%{transform:translate(180px,-2px) rotate(-14deg)}
  16%{transform:translate(214px,3px) rotate(-9deg)}
  18%{transform:translate(236px,0) rotate(-12deg)}
  22%{transform:translate(236px,0) rotate(0)}
  28%{transform:translate(0,0) rotate(0)}
  100%{transform:translate(0,0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){.logo-img{animation:none}}

/* While the intro plays, the card stacks stay hidden so they do not shuffle on screen; they fade in when it ends. */
#studio{transition:opacity .9s ease}
.intro-running{background:#e8ddef}
.intro-running #studio{opacity:0}