/* Small 2D hover effects only. No perspective or permanent compositing layers. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 body[data-page-type="home"] .btn{transition:translate .25s ease,box-shadow .25s ease,background-color .2s ease}
 body[data-page-type="home"] .btn:hover{translate:0 -3px;box-shadow:0 8px 20px #0b15361a}
 body[data-page-type="home"] .btn span{display:inline-block;transition:transform .25s ease}
 body[data-page-type="home"] .btn:hover span{transform:translateX(5px)}
 body[data-page-type="home"] .app-icon{transition:transform .35s cubic-bezier(.22,.7,.25,1)}
 body[data-page-type="home"] .app-card:hover .app-icon{transform:translateY(-5px) rotate(-4deg)}
 body[data-page-type="home"] .service-number{display:inline-block;transition:transform .3s ease,color .3s ease}
 body[data-page-type="home"] .service-row:hover .service-number{transform:translateY(-4px);color:var(--studio-primary)}
}

/* Each headline line arrives independently; no clipping or 3D layers. */
.home-title-line{display:inline-block}
@media(prefers-reduced-motion:no-preference){
 body[data-page-type="home"] .hero-visual:before{animation:home-blue-enter 1.2s cubic-bezier(.16,1,.3,1) both}
 body[data-page-type="home"] .hero-visual:after{animation:home-orange-enter 1.25s cubic-bezier(.16,1,.3,1) both}
 body[data-page-type="home"] .accent-dot{display:inline-block;animation:home-dot-pop 1.2s cubic-bezier(.34,1.56,.64,1) both}
}
@keyframes home-blue-enter{from{transform:translateX(90px);opacity:.4}to{transform:none;opacity:1}}
@keyframes home-orange-enter{from{translate:100px -35px;opacity:.3}to{translate:0 0;opacity:1}}
@keyframes home-dot-pop{0%,30%{transform:scale(.4)}65%{transform:scale(1.35)}100%{transform:scale(1)}}