/* Transform-only animation preserves layout and readable chart values. */
:root{--ease-in-out:cubic-bezier(.77,0,.175,1)}
body{overflow-x:clip}.bar{transform-origin:left center}svg.pie path{transform-origin:120px 120px}
.hero-screen,.screen-figure a{perspective:1000px}.screen-figure a{display:block;border-radius:22px}.hero-screen img,.screen-figure img{transform-origin:center center}

html[data-motion=full] .hero-screen img,
html[data-motion=full] .screen-figure img,
html[data-motion=full] .featured-loop-visual img,
html[data-motion=full] .discipline-art,
html[data-motion=full] .discipline-tile,
html[data-motion=full] .product-object,
html[data-motion=full] .object-button,
html[data-motion=full] .orbit-line,
html[data-motion=full] .graphic-type,
html[data-motion=full] .graphic-grid,
html[data-motion=full] .motion-rings,
html[data-motion=full] .motion-rings i,
html[data-motion=full] .motion-play,
html[data-motion=full] .featured-loop,
html[data-motion=full] .chart-row,
html[data-motion=full] svg.pie path,
html[data-motion=full] .bar,
html[data-motion=full] .prototype-link{transition:transform 400ms cubic-bezier(.16,1,.3,1),opacity 300ms ease,box-shadow 400ms ease!important}

.research-chart .chart-row{padding:5px 6px;border-radius:6px}.screen-figure a:focus-visible{outline:3px solid var(--blue);outline-offset:8px}

@media(hover:hover) and (pointer:fine){
 html[data-motion=full] .hero-screen:hover img{transform:translateY(-10px) rotateY(-5deg) rotateX(3deg) scale(1.035);box-shadow:0 24px 48px rgba(23,23,23,0.22)}
 html[data-motion=full] .screen-figure a:hover img{transform:translateY(-8px) rotateY(4deg) scale(1.03);box-shadow:0 24px 48px rgba(23,23,23,0.22)}
 
 html[data-motion=full] .featured-loop{transform-origin:center center}
 html[data-motion=full] .featured-loop:hover{transform:translateY(-5px);box-shadow:0 24px 48px -12px rgba(23,23,23,0.12)}
 html[data-motion=full] .featured-loop:hover .featured-loop-visual img:first-child{transform:translateY(12px) rotate(-9deg) scale(1.05)}
 html[data-motion=full] .featured-loop:hover .featured-loop-visual img:last-child{transform:translateY(-25px) rotate(9deg) scale(1.05)}
 
 html[data-motion=full] .discipline-tile:hover{transform:translateY(-6px)}
 html[data-motion=full] .discipline-tile:hover .discipline-art{transform:translateY(-8px);box-shadow:0 18px 36px -8px rgba(0,0,0,0.12)}
 
 html[data-motion=full] .product-tile:hover .product-object{transform:translate(-50%,-56%) rotate(-4deg) scale(1.04);box-shadow:18px 28px 38px #273b7633}
 html[data-motion=full] .product-tile:hover .object-button{transform:scale(1.22) rotate(12deg)}
 html[data-motion=full] .product-tile:hover .orbit-line{transform:rotate(-32deg) scale(1.05)}
 
 html[data-motion=full] .graphic-tile:hover .graphic-type{transform:translate(-50%,-52%) rotate(-6deg) scale(1.05)}
 html[data-motion=full] .graphic-tile:hover .graphic-type>span{transform:translate(4px,-4px) scale(1.12)}
 html[data-motion=full] .graphic-tile:hover .graphic-grid{transform:scale(1.03);opacity:0.9}
 
 html[data-motion=full] .motion-tile:hover .motion-rings{transform:rotate(-16deg) scale(1.05)}
 html[data-motion=full] .motion-tile:hover .motion-rings i:nth-child(1){transform:translateX(-8px) scale(1.04)}
 html[data-motion=full] .motion-tile:hover .motion-rings i:nth-child(2){transform:translateX(-4px) scale(1.03)}
 html[data-motion=full] .motion-tile:hover .motion-rings i:nth-child(3){transform:translateX(0px) scale(1.02)}
 html[data-motion=full] .motion-tile:hover .motion-rings i:nth-child(4){transform:translateX(4px) scale(1.03)}
 html[data-motion=full] .motion-tile:hover .motion-rings i:nth-child(5){transform:translateX(8px) scale(1.04);border-color:#cbb5f8}
 html[data-motion=full] .motion-tile:hover .motion-play{transform:translate(6px,-3px) scale(1.18);color:#fff}

 html[data-motion=full] .chart-row:hover{transform:translateX(8px);background:rgba(53,92,222,0.08)}
 html[data-motion=full] .chart-row:hover .bar{transform:scaleY(1.7);filter:brightness(1.15)}
 html[data-motion=full] svg.pie:hover path{opacity:.5}
 html[data-motion=full] svg.pie path:hover{opacity:1;transform:scale(1.08)}
 html[data-motion=full] .prototype-link:hover{transform:translateY(-4px) scale(1.02)}
}

html[data-motion=reduced] *{animation:none!important;transition:none!important}
html[data-motion=reduced] .hero-screen img,
html[data-motion=reduced] .screen-figure img,
html[data-motion=reduced] .discipline-art,
html[data-motion=reduced] .discipline-tile,
html[data-motion=reduced] .chart-row,
html[data-motion=reduced] .bar,
html[data-motion=reduced] svg.pie path,
html[data-motion=reduced] .prototype-link{transform:none!important}
html[data-motion=reduced]{scroll-behavior:auto}

/* Keep non-spatial feedback even when the OS requests reduced motion. */
html[data-motion=reduced] .hero-screen img,
html[data-motion=reduced] .screen-figure img,
html[data-motion=reduced] .featured-loop-visual img,
html[data-motion=reduced] .chart-row,
html[data-motion=reduced] svg.pie path{transition:opacity 250ms ease!important}

@media(hover:hover) and (pointer:fine){
 html[data-motion=reduced] .hero-screen:hover img,html[data-motion=reduced] .screen-figure a:hover img{opacity:.82}
 html[data-motion=reduced] .featured-loop:hover .featured-loop-visual img{opacity:.82}
 html[data-motion=reduced] .chart-row:hover{background:#dde3ef}
 html[data-motion=reduced] svg.pie:hover path{opacity:.45}
 html[data-motion=reduced] svg.pie path:hover{opacity:1}
}
@media(max-width:760px){.hero-screens{padding-inline:20px}}