/* Motion is an enhancement: the original layout works without this stylesheet or JS. */
.gta-motion { overflow-x: clip; }
.gta-motion .site-header { transition: background .3s, box-shadow .3s; }
.gta-motion .site-header.is-scrolled { background: rgb(217 217 217 / 94%); box-shadow: 0 1px 0 #1112; backdrop-filter: blur(14px); }
.motion-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; background: var(--orange); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.gta-motion .hero { position: relative; isolation: isolate; overflow: clip; }
.gta-motion .wordmark { position: relative; z-index: -1; translate: var(--title-x, 0) var(--title-y, 0); animation: gta-title-in 1.15s cubic-bezier(.16,1,.3,1) both; }
.gta-motion .manifesto { animation: gta-intro-in .85s .15s cubic-bezier(.16,1,.3,1) both; }
.gta-motion .hero-invitation { animation: gta-intro-in .85s .3s cubic-bezier(.16,1,.3,1) both; }
.motion-frame { position: relative; overflow: clip; background: var(--ink); }
.motion-frame .motion-image { width: 100%; height: 100%; max-width: none; object-fit: cover; scale: 1.18; translate: 0 var(--media-y, 0); }
.gta-motion .hero-portrait.motion-frame { animation: gta-photo-in 1.15s .1s cubic-bezier(.16,1,.3,1) both; }
.motion-reveal { opacity: 1; }
.gta-motion:not(.gta-motion-paused) .motion-reveal { opacity: 0; translate: 0 38px; transition: opacity .65s var(--reveal-delay, 0ms), translate .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms); }
.gta-motion:not(.gta-motion-paused) .motion-reveal.is-visible { opacity: 1; translate: 0 0; }
.gta-motion main .service-card { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .3s, box-shadow .3s, opacity .65s var(--reveal-delay,0ms), translate .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms); }
.gta-motion .service-card { overflow: clip; }
.gta-motion .service-card > img { transition: scale .7s cubic-bezier(.16,1,.3,1), filter .5s; }
.gta-motion .service-caption { position: relative; z-index: 1; }
.gta-motion .service-card:hover > img { scale: 1.035; }
.gta-motion .service-card:hover { box-shadow: 0 12px 32px #1112; }
.gta-motion .service-caption .icon { transition: rotate .3s; }
.gta-motion .service-card:hover .service-caption .icon { rotate: -35deg; }
.artist-photo { width: 100%; aspect-ratio: 310 / 360; overflow: hidden; }
.artist-photo > img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.16,1,.3,1); }
.artist-card:focus-visible .artist-photo > img { scale: 1.06; }
.gta-motion .button { transition: background .25s, color .25s, box-shadow .25s; }
.gta-motion .button .icon { transition: translate .35s cubic-bezier(.16,1,.3,1); }
.gta-motion .button:hover .icon { translate: 5px 0; }
.gta-motion .button:active { scale: .985; }
.gta-motion .main-nav a,
.gta-motion .main-nav button { position: relative; }
.gta-motion .main-nav a::after,
.gta-motion .main-nav button::after { content: ''; position: absolute; bottom: 4px; inset-inline: 0; height: 2px; background: var(--orange); scale: 0 1; transform-origin: left; transition: scale .3s; }
.gta-motion .main-nav a:hover::after,
.gta-motion .main-nav button:hover::after { scale: 1 1; }
.gta-motion .services-section { position: relative; background: var(--paper); }
.gta-motion .gallery-item img { transition: scale .8s cubic-bezier(.16,1,.3,1), filter .5s; }
.gta-motion .gallery-item:hover img { scale: 1.05; }
.gta-motion .gallery-zoom { transition: opacity .3s, rotate .3s; }
.gta-motion .gallery-item:hover .gallery-zoom { rotate: 90deg; }
.gta-motion .studio-preview .motion-frame { width: 100%; }
.gta-motion .callout { position: relative; overflow: clip; isolation: isolate; }
.gta-motion .callout::after { content: '✳'; position: absolute; z-index: -1; right: 3%; top: -70px; color: #111; opacity: .07; font-size: 460px; line-height: 1; animation: gta-star 45s linear infinite; pointer-events: none; }
.gta-motion .callout h2 { position: relative; max-width: 1050px; }
.gta-motion .faq-section details::details-content { transition: content-visibility .3s allow-discrete, opacity .3s; }
.gta-motion .dialog[open] { animation: gta-dialog-in .24s cubic-bezier(.16,1,.3,1); }
.gta-motion .dialog[open]::backdrop { animation: gta-backdrop-in .24s; }
.motion-pause { position: fixed; left: 20px; bottom: 24px; z-index: 45; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #1116; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 14px; box-shadow: 0 2px 12px #1111; }
.motion-pause:hover { background: var(--orange); }
.motion-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gta-cursor-active body,
  .gta-cursor-active a,
  .gta-cursor-active button,
  .gta-cursor-active summary { cursor: none; }
  .motion-cursor { display: grid; position: fixed; left: 0; top: 0; z-index: 200; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px solid var(--orange); border-radius: 50%; pointer-events: none; opacity: 0; background: transparent; transition: opacity .15s; }
  .motion-cursor::before { content: ''; width: 4px; height: 4px; position: absolute; border-radius: 50%; background: var(--orange); }
  .motion-cursor.is-visible { opacity: 1; }
  .artist-card:hover .artist-photo > img { scale: 1.06; }
  .gta-cursor-active .modal-open,
  .gta-cursor-active .modal-open * { cursor: auto; }
}
@media (max-width: 600px) {
  .artist-photo { aspect-ratio: auto; height: 400px; }
  .motion-pause { left: 16px; bottom: 26px; width: 34px; height: 34px; }
  .gta-motion .callout::after { font-size: 300px; right: -60px; top: -15px; }
}
.gta-motion-paused .motion-reveal { opacity: 1 !important; translate: none !important; }
.gta-motion-paused .wordmark { translate: none !important; }
.gta-motion-paused .motion-image { translate: none !important; scale: 1 !important; }
.gta-motion-paused .artist-photo > img { scale: 1 !important; }
.gta-motion-paused main .service-card,
.gta-motion-paused main .artist-card { transform: none !important; }
.gta-motion-paused *, .gta-motion-paused *::before, .gta-motion-paused *::after { animation: none !important; transition: none !important; }
.gta-motion-paused .motion-cursor { display: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-pause, .motion-cursor { display: none !important; }
  .gta-motion .motion-reveal { opacity: 1 !important; translate: none !important; }
  .gta-motion .wordmark, .gta-motion .motion-image { translate: none !important; }
  .gta-motion .motion-image { scale: 1; }
  .gta-motion main .service-card, .gta-motion main .artist-card { transform: none; }
  .gta-motion * { cursor: auto; }
  .gta-motion .gallery-item:hover img, .gta-motion .service-card:hover > img, .gta-motion .artist-photo > img { scale: 1; }
}
@keyframes gta-title-in { from { clip-path: inset(100% 0 0); transform: translateY(36px); } to { clip-path: inset(0); transform: translateY(0); } }
@keyframes gta-intro-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gta-photo-in { from { clip-path: inset(10% 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes gta-star { to { rotate: 360deg; } }
@keyframes gta-dialog-in { from { opacity: 0; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
@keyframes gta-backdrop-in { from { opacity: 0; } to { opacity: 1; } }