@layer components{.book-teaser{position:relative;padding-block:var(--space-2xl);padding-inline:var(--space-l);background-color:var(--color-surface-raised);overflow:hidden;& .book-teaser__bg{position:absolute;inset:0;z-index:0;opacity:.06;pointer-events:none;color:var(--color-text);& svg{width:100%;height:100%}}& .book-teaser__container{position:relative;z-index:1;max-width:1200px;margin-inline:auto;display:grid;grid-template-columns:300px 1fr;gap:var(--space-2xl);align-items:center}& .book-teaser__cover-wrap{position:relative;perspective:900px;cursor:pointer;width:100%;max-width:280px;justify-self:center}& .book-teaser__cover-inner{position:relative;transform-style:preserve-3d;transition:transform .12s ease-out;will-change:transform;border-radius:2px 8px 8px 2px;overflow:hidden;box-shadow:-4px 0 8px rgba(0,0,0,.15),0 20px 50px rgba(0,0,0,.25)}& .book-teaser__image{display:block;width:100%;height:auto}& .book-teaser__cover-shine{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none;border-radius:inherit}& .book-teaser__cover-shadow{position:absolute;bottom:-20px;left:5%;width:90%;height:30px;background:radial-gradient(ellipse,rgba(0,0,0,.35) 0%,transparent 70%);filter:blur(8px);transform:scaleY(.4)}& .book-teaser__content{display:flex;flex-direction:column;gap:var(--space-m)}& .book-teaser__genre{font-size:var(--size-step--1);font-weight:500;color:var(--color-accent);text-transform:uppercase;letter-spacing:.1em;margin:0;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;&.is-visible{opacity:1;transform:translateY(0)}}& .book-teaser__title{font-size:var(--size-step-4);font-weight:900;line-height:1;color:var(--color-text);margin:0;opacity:0;transform:translateY(16px);transition:opacity .5s ease .1s,transform .5s ease .1s;&.is-visible{opacity:1;transform:translateY(0)}}& .book-teaser__sentences{display:flex;flex-direction:column;gap:var(--space-s);margin-block:var(--space-s)}& .book-teaser__sentence{display:flex;gap:var(--space-s);align-items:baseline;font-size:var(--size-step-0);line-height:1.65;color:var(--color-text-muted);margin:0;opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .35s ease;min-height:1.65em;&.is-visible{opacity:1;transform:translateX(0)}}& .book-teaser__sentence-marker{color:var(--color-accent);font-weight:700;flex-shrink:0;line-height:1}& .book-teaser__sentence-text{&::after{content:'▋';display:inline-block;color:var(--color-accent);animation:blink .7s step-end infinite;margin-left:1px;font-size:.8em;opacity:0}}& .book-teaser__sentence.is-visible .book-teaser__sentence-text::after{opacity:1}& .book-teaser__sentence.is-done .book-teaser__sentence-text::after{display:none}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}& .book-teaser__cta{display:inline-flex;align-items:center;gap:var(--space-s);align-self:flex-start;padding:var(--space-s)var(--space-l);background-color:var(--color-accent);color:var(--color-surface);font-weight:700;font-size:var(--size-step-0);text-decoration:none;border-radius:2px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease,background-color .2s ease,gap .2s ease;&.is-visible{opacity:1;transform:translateY(0)}&:hover{background-color:color-mix(in srgb,var(--color-accent) 85%,white);gap:calc(var(--space-s) + 6px)}}& .book-teaser__cta-arrow{transition:transform .2s ease}& .book-teaser__cta:hover .book-teaser__cta-arrow{transform:translateX(4px)}@media(max-width:900px){& .book-teaser__container{grid-template-columns:1fr;justify-items:center}& .book-teaser__cover-wrap{max-width:200px}& .book-teaser__content{align-items:center;text-align:center}& .book-teaser__sentence{justify-content:center}& .book-teaser__cta{align-self:center}}}@media(prefers-color-scheme:dark){.book-teaser .book-teaser__cover-inner{box-shadow:-4px 0 8px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.6)}.book-teaser .book-teaser__bg{opacity:.04}}}