/* Second-screen scroll entrance */
.intro.entrance-pending .intro-scroll-stage .intro-entrance-fragment,
.intro.entrance-pending .intro-scroll-stage .sticker,
.intro.entrance-pending .intro-scroll-stage .green,
.intro.entrance-pending .intro-scroll-stage .intro-books { visibility: hidden; }
.intro .intro-books,
.intro h2,
.intro .sticker,
.intro .green { will-change: transform, opacity, filter; }

.intro .intro-books { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.intro h2 { opacity: 0; transform: translateY(72px) scale(.96); filter: blur(8px); transition: opacity .7s ease .08s, transform .9s cubic-bezier(.22,1,.36,1) .08s, filter .65s ease .08s; }
.intro .intro-designer-subtitle { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .65s ease .16s, transform .85s cubic-bezier(.22,1,.36,1) .16s, filter .6s ease .16s; }
.intro .s1 { opacity: 0; transform: translate(-34px, 68px) rotate(-38deg) scale(.72); transition: opacity .55s ease .18s, transform .9s cubic-bezier(.16,1,.3,1) .18s; }
.intro .s2 { opacity: 0; transform: translate(38px, 72px) rotate(41deg) scale(.72); transition: opacity .55s ease .28s, transform .9s cubic-bezier(.16,1,.3,1) .28s; }
.intro .s3 { opacity: 0; transform: translate(-46px, 45px) rotate(-31deg) scale(.75); transition: opacity .55s ease .37s, transform .85s cubic-bezier(.16,1,.3,1) .37s; }
.intro .s4 { opacity: 0; transform: translate(46px, 45px) rotate(25deg) scale(.75); transition: opacity .55s ease .46s, transform .85s cubic-bezier(.16,1,.3,1) .46s; }
.intro .green { opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .45s ease .58s, transform .65s cubic-bezier(.22,1,.36,1) .58s; }

.intro.is-visible .intro-books { opacity: 1; transform: translateY(0); }
.intro.is-visible h2 { opacity: 1; transform: translateY(-24px) scale(1); filter: blur(0); }
.intro.is-visible .intro-designer-subtitle { opacity: 1; transform: translateY(32px); filter: blur(0); }
.intro.is-visible .s1 { opacity: 1; transform: rotate(-26deg); }
.intro.is-visible .s2 { opacity: 1; transform: rotate(30deg); }
.intro.is-visible .s3 { opacity: 1; transform: rotate(-19deg); }
.intro.is-visible .s4 { opacity: 1; transform: rotate(13deg); }
.intro.is-visible .green { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .intro .intro-books, .intro h2, .intro .intro-designer-subtitle, .intro .sticker, .intro .green { opacity: 1; filter: none; transition: none; }
}