/* The original layout and subtle treatment remain in styles.css. */
:root{--motion-story:1050ms;--motion-stagger:130ms}
.feature-media{overflow:hidden}
.feature-media>.photo{height:100%;aspect-ratio:inherit;object-position:inherit}
.motion-mask{display:block;overflow:clip;overflow-clip-margin:.08em}
.motion-line{display:block}
.motion-preview{position:fixed;z-index:3;right:16px;bottom:16px;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;box-shadow:0 5px 24px #08283e14;font-size:12px}
.motion-preview summary{min-height:30px;padding:0;font-size:12px}
.motion-preview label{display:block;margin-top:10px;font-weight:650}
.motion-preview select{width:100%;min-height:44px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px;font:inherit}
.motion-preview p{font-size:11px;margin:10px 0}
.motion-preview button{background:var(--ink);color:#fff;min-height:44px;padding:8px 14px;border-radius:5px}
.motion-preview select:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media(max-width:767px){
  :root{--motion-story:780ms;--motion-stagger:85ms}
  .motion-preview{bottom:76px;right:12px}
}
@media(prefers-reduced-motion:no-preference){
  html[data-motion=showcase] .feature-media>.photo{transition:transform 650ms var(--motion-ease)}
  html[data-motion=showcase] .audience-links>a{transition:background-color var(--motion-ui),border-color var(--motion-ui)}
  html[data-motion=showcase] .audience-links>a:is(:hover,:focus-visible){border-color:var(--teal);background:var(--surface)}
  html[data-motion=showcase] .circle-arrow{transition:background-color var(--motion-ui),border-color var(--motion-ui),transform 350ms var(--motion-ease)}
  html[data-motion=showcase] .feature:focus-visible .circle-arrow{transform:rotate(-35deg)}
  html[data-motion=showcase] .button:is(:hover,:focus-visible) .icon-arrow-right{transform:translateX(4px)}
  html[data-motion=showcase] .text-link:is(:hover,:focus-visible) .icon{transform:translateX(4px)}
  html[data-motion=showcase] summary>span{transition:transform var(--motion-ui) var(--motion-ease)}
  @media(hover:hover) and (pointer:fine){
    html[data-motion=showcase] .feature:hover{transform:none}
    html[data-motion=showcase] .feature:hover .feature-media>.photo{transform:scale(1.035)}
    html[data-motion=showcase] .feature:hover .circle-arrow{transform:rotate(-35deg)}
  }
}
@media print,(forced-colors:active){.motion-preview{display:none!important}}