.resource-mockup{width:100%;height:300px;background:#f5ecc2;border-radius:12px;position:relative;overflow:hidden;margin-bottom:30px;perspective:1000px}
.resource-mockup.prompts{background:#a7d4e4}
.mock-book{position:absolute;left:17%;top:38px;width:47%;height:225px;padding:23px 20px;background:var(--cream,#fafaf7);border-left:7px solid #f5ecc2;box-shadow:12px 17px 24px #7d133a30;transform:rotate(-9deg);transition:transform .55s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;justify-content:space-between;color:var(--ink,#7d133a)}
.mock-book span{font:800 8px/1.4 Raleway;letter-spacing:2px}.mock-book strong{font:32px/1.05 'DM Serif Display';font-weight:400}.mock-book small{font:9px/1.4 Raleway}.mock-book svg{width:30px;height:30px;color:#7d133a}.mock-book path{fill:none;stroke:currentColor;stroke-width:2.8}
.mock-sheet{position:absolute;background:#fafaf7;width:40%;height:210px;padding:24px 18px;box-shadow:5px 12px 20px #7d133a22;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.sheet-back{right:8%;top:8px;transform:rotate(17deg)}.sheet-front{right:3%;top:105px;transform:rotate(9deg)}.mock-sheet:before{content:'';display:block;height:35px;background:#7d133a;margin-bottom:25px}.mock-sheet i{display:block;background:#7d133a26;height:3px;margin:11px 0}.mock-sheet i:nth-child(2){width:70%}.mock-sheet i:nth-child(4){width:85%}.prompts .mock-book{background:#7d133a;color:#fafaf7;border-left-color:#7d133a}.prompts .mock-sheet:before{background:#7d133a}
.resource-card:hover .mock-book,.card:hover .mock-book{transform:translateY(-8px) rotate(-5deg)}.resource-card:hover .sheet-back,.card:hover .sheet-back{transform:translateY(-4px) rotate(21deg)}.resource-card:hover .sheet-front,.card:hover .sheet-front{transform:translateX(6px) rotate(5deg)}
.screen-mockup{padding:0;background:#fafaf7;border:1px solid #7d133a30;border-radius:12px;box-shadow:0 17px 32px #7d133a1c;overflow:hidden;transition:transform .4s,box-shadow .4s}.screen-bar{display:flex;gap:5px;align-items:center;height:25px;padding:0 12px;background:#f5ecc2;border-bottom:1px solid #7d133a15}.screen-bar b{width:6px;height:6px;background:#7d133a50;border-radius:50%}.screen-bar b:first-child{background:#7d133a}.screen-mockup img{border:0!important;border-radius:0!important;box-shadow:none!important}.screen-mockup figcaption{padding:0 15px 12px}.project-card:hover .screen-mockup{transform:translateY(-6px) rotate(-1deg);box-shadow:0 23px 36px #7d133a25}
.motion-ready .motion-item{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--entry-delay,0ms)}.motion-ready .motion-item.motion-visible{opacity:1;transform:translateY(0)}
@media(max-width:800px){.resource-mockup{height:265px}.mock-book{height:200px;top:30px;padding:18px 14px}.mock-book strong{font-size:28px}.mock-sheet{height:180px}.sheet-front{top:85px}}
@media(prefers-reduced-motion:reduce){.motion-ready .motion-item{opacity:1;transform:none;transition:none}.mock-book,.mock-sheet,.screen-mockup{transition:none}.resource-card:hover .mock-book,.card:hover .mock-book{transform:rotate(-9deg)}.resource-card:hover .sheet-back,.card:hover .sheet-back{transform:rotate(17deg)}.resource-card:hover .sheet-front,.card:hover .sheet-front{transform:rotate(9deg)}.project-card:hover .screen-mockup{transform:none}}