/* The original Antonia video and wordmarks inside a responsive portfolio preview. */
.antonia-motion { margin: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-alt); }
.antonia-motion-stage { position: relative; aspect-ratio: 774 / 484; overflow: hidden; background: #26211e; container-type: inline-size; }
.antonia-motion-poster, .antonia-motion-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.antonia-motion-video, .antonia-motion-design { opacity: 0; transition: opacity .25s ease; }
.antonia-motion.has-frame .antonia-motion-video, .antonia-motion.has-frame .antonia-motion-design { opacity: 1; }
.antonia-motion.has-frame .antonia-motion-poster { visibility: hidden; }
.antonia-motion-design { position: absolute; inset: 0; pointer-events: none; color: #fff; font-family: 'DM Sans', sans-serif; }
.antonia-motion-shade { position: absolute; inset: 0; background: linear-gradient(to right, #0000003d 0%, #0000000a 58%, #00000024 100%), linear-gradient(to top, #0000007a 0%, #0000000a 58%, #0000001f 100%); }
.antonia-motion-header { position: absolute; top: 3%; left: 4%; right: 4%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; font-size: 1cqw; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.antonia-motion-header > img { width: 6.5cqw; height: 3.2cqw; object-fit: contain; object-position: left center; }
.antonia-motion-nav { display: flex; gap: 2.5cqw; }
.antonia-motion-order { justify-self: end; text-decoration: underline; text-underline-offset: .4cqw; }
.antonia-motion-copy { position: absolute; top: 14%; left: 6%; right: 6%; bottom: 9%; display: flex; flex-direction: column; align-items: flex-start; }
.antonia-motion-eyebrow { font-size: 1.05cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; margin: 0 0 1.6cqw; color: #f8f3e9; }
.antonia-motion-copy .antonia-motion-wordmark { width: 45%; height: 45%; object-fit: contain; object-position: left center; }
.antonia-motion-tagline { font-family: 'Playfair Display', Georgia, serif; font-size: 2.65cqw; font-weight: 500; font-style: italic; line-height: 1.03; letter-spacing: -.03em; color: #f0d58a; margin: auto 0 1.8cqw; }
.antonia-motion-actions { display: flex; gap: 1cqw; text-transform: uppercase; font-size: .85cqw; font-weight: 700; letter-spacing: .03em; }
.antonia-motion-actions > span { border: 1px solid #ffffff70; border-radius: 999px; padding: 1.1cqw 1.6cqw; }
.antonia-motion-actions > span:first-child { background: #fff; border-color: #fff; color: #191919; }
.antonia-motion-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 16px 20px; }
.antonia-motion-caption { color: var(--muted); font-size: .8125rem; }
.antonia-motion-controls > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.antonia-motion-controls [hidden] { display: none !important; }
.antonia-motion-controls .btn { font-size: .875rem; padding: 8px 15px; }
.antonia-motion-live { font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:620px) { .antonia-motion-controls { padding: 16px; } }
@media(prefers-reduced-motion:reduce) { .antonia-motion-video, .antonia-motion-design { transition: none; } }