/* Shared motion grammar. Content is visible until JavaScript opts it in. */
.studio-signature { justify-content: flex-start; }
.studio-signature .studio-since { margin-inline-start: 0; font-size: 13px; }
.studio-signature .studio-since b { margin-top: 6px; font-size: 28px; }

.page-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 100;
  background: var(--architect-blue); pointer-events: none;
  transform: scaleX(var(--page-progress, 0)); transform-origin: right;
}
.portrait-art[data-running="false"] .portrait-window img { transition: none !important; }
.motion-reveal {
  opacity: 1; translate: 0 0;
  transition: opacity 700ms ease, translate 900ms cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-reveal.motion-pending {
  opacity: 0; translate: var(--reveal-x, 0px) var(--reveal-y, 32px);
}
.motion-reveal[data-motion="right"] { --reveal-x: 30px; --reveal-y: 0px; }
.motion-reveal[data-motion="left"] { --reveal-x: -30px; --reveal-y: 0px; }
.motion-reveal:focus-within { opacity: 1; translate: 0 0; transition-delay: 0ms; }

/* Work covers keep their real dimensions; the surrounding card carries motion. */
.project-motion { width: 100%; min-width: 0; overflow: visible; transform: none; }
.site-motion .project-card.motion-reveal {
  opacity: 1; translate: 0 0; rotate: 0deg; transform-origin: 50% 100%;
  transition: opacity 800ms ease var(--reveal-delay, 0ms),
    translate 1100ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    rotate 1100ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
}
.site-motion .project-card:nth-child(even) { --project-entry-angle: 3deg; --project-entry-x: 18px; }
.site-motion .project-card.motion-reveal.motion-pending {
  opacity: 0; translate: var(--project-entry-x, -18px) 64px;
  rotate: var(--project-entry-angle, -3deg);
}
.site-motion .project-card.motion-reveal:focus-within {
  opacity: 1; translate: 0 0; rotate: 0deg; transition-delay: 0ms;
}
.site-motion .project-card[data-running="true"] .project-motion {
  transform: perspective(1200px) translate3d(0, var(--project-lift, 0px), 0)
    rotateX(var(--project-tilt-x, 0deg)) rotateY(var(--project-tilt-y, 0deg));
  transform-origin: center; transition: transform 550ms cubic-bezier(.22,1,.36,1);
}
.site-motion .project-card[data-running="true"][data-pointer-active="true"] .project-motion { will-change: transform; }
.site-motion .project-motion .project-image img { transform: none; transition: none; }
.site-motion .project-card .project-caption h3 a {
  background-image: linear-gradient(var(--calm-sand), var(--calm-sand));
  background-position: 100% 100%; background-size: 0% 1px; background-repeat: no-repeat;
  transition: background-size 500ms cubic-bezier(.22,1,.36,1), color 180ms ease;
}
.site-motion .project-card[data-running="true"]:is(:hover, :focus-within) .project-caption h3 a { background-size: 100% 1px; }
.site-motion .project-card[data-running="true"]:is(:hover, :focus-within) .project-open {
  transform: translate(-6px,-6px) rotate(-12deg);
}
.site-motion .project-card[data-running="false"] { transition: none; }
.site-motion .project-card[data-running="false"] .project-motion,
.site-motion .project-card[data-running="false"] .project-motion .project-open { transform: none; transition: none; will-change: auto; }
.site-motion .project-card[data-running="false"] .project-caption h3 a { background-size: 0% 1px; transition: none; }
.site-motion .brand img {
  transition: transform 450ms cubic-bezier(.22,1,.36,1);
}
.site-motion .brand:hover img, .site-motion .brand:focus-visible img {
  transform: translateY(-3px) rotate(-7deg);
}
.site-motion .button, .site-motion .nav-cta {
  transition: transform 300ms cubic-bezier(.22,1,.36,1), background 180ms, color 180ms;
}
.site-motion .button:hover, .site-motion .nav-cta:hover { transform: translateY(-3px); }
.site-motion .button:active, .site-motion .nav-cta:active { transform: translateY(0); }
.site-motion .button > span[aria-hidden],
.site-motion .text-link > span[aria-hidden],
.site-motion .nav-cta > span[aria-hidden] {
  display: inline-block; transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.site-motion .button:hover > span[aria-hidden],
.site-motion .text-link:hover > span[aria-hidden],
.site-motion .nav-cta:hover > span[aria-hidden] { transform: translate(3px,-3px); }
.site-motion #main-nav > a:not(.nav-cta)::before {
  content: ''; position: absolute; inset-inline: 0; bottom: -5px; height: 1px;
  background: var(--calm-sand); transform: scaleX(0); transform-origin: right;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.site-motion #main-nav > a:hover::before,
.site-motion #main-nav > a:focus-visible::before { transform: scaleX(1); }
.site-motion .project-open { transition: transform 350ms cubic-bezier(.22,1,.36,1); }
.site-motion .project-image:hover .project-open { transform: translate(-4px,-4px) rotate(-8deg); }
.site-motion .service-cards .service-row {
  transition: transform 450ms cubic-bezier(.22,1,.36,1),
    opacity 700ms ease var(--reveal-delay, 0ms),
    translate 900ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
}
.site-motion .service-cards .service-row:hover { transform: translateY(-6px); }
.site-motion .brief-sheet, .site-motion .hierarchy-bars, .site-motion .portfolio-shapes i {
  transition: transform 650ms cubic-bezier(.22,1,.36,1);
}
.site-motion .post-card:hover .brief-sheet,
.site-motion .post-card:focus-within .brief-sheet { transform: rotate(0) translateY(-6px); }
.site-motion .post-card:hover .hierarchy-bars,
.site-motion .post-card:focus-within .hierarchy-bars { transform: rotate(0) translateX(6px); }
.site-motion .post-card:hover .portfolio-shapes i:first-child { transform: rotate(-22deg) translateX(-5px); }
.site-motion .post-card:hover .portfolio-shapes i:last-child { transform: rotate(22deg) translateX(5px); }
.site-motion .social-links a { transition: transform 300ms ease; }
.site-motion .social-links a:hover { transform: translateY(-4px); }
.site-motion .social-links a:focus-visible { transform: translateY(-4px); }
.site-motion .menu-toggle { transition: transform 300ms ease; }
.site-motion .menu-toggle[aria-expanded="true"] { transform: rotate(90deg); }

/* Entrances and button feedback coexist when the link itself is a target. */
.site-motion .button.motion-reveal {
  transition: transform 300ms cubic-bezier(.22,1,.36,1), background 180ms, color 180ms,
    opacity 700ms ease var(--reveal-delay, 0ms),
    translate 900ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
}
.site-motion .motion-reveal:focus-within { transition-delay: 0ms; }
.site-motion .contact-option > span[aria-hidden] {
  transition: transform 350ms cubic-bezier(.22,1,.36,1);
}
.site-motion .contact-option:hover > span[aria-hidden],
.site-motion .contact-option:focus-visible > span[aria-hidden] { transform: translate(-4px,-4px); }
.site-motion .project-image:focus-visible .project-open { transform: translate(-4px,-4px) rotate(-8deg); }
.site-motion .service-cards .service-row:focus-within { transform: translateY(-6px); }
.site-motion .post-card:focus-within .portfolio-shapes i:first-child { transform: rotate(-22deg) translateX(-5px); }
.site-motion .post-card:focus-within .portfolio-shapes i:last-child { transform: rotate(22deg) translateX(5px); }
.site-motion .filters button {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.site-motion .table-of-contents nav a {
  transition: translate 250ms ease, color 180ms ease;
}
.site-motion .table-of-contents nav a:hover,
.site-motion .table-of-contents nav a:focus-visible { translate: -4px 0; }
.site-motion .project-form, .site-motion .project-form input,
.site-motion .project-form select, .site-motion .project-form textarea {
  transition: border-color 200ms ease;
}
.site-motion .project-form:focus-within,
.site-motion .project-form input:focus, .site-motion .project-form select:focus,
.site-motion .project-form textarea:focus { border-color: var(--architect-blue); }

@media (max-width: 600px) {
  .studio-signature .studio-since { font-size: 12px; }
  .studio-signature .studio-since b { font-size: 25px; }
  .motion-reveal { --reveal-x: 0px !important; --reveal-y: 22px !important; }
  .site-motion .project-card { --project-entry-x: 0px; --project-entry-angle: -2deg; }
  .site-motion .project-card:nth-child(even) { --project-entry-x: 0px; --project-entry-angle: 2deg; }
}
@media (hover: none) {
  .site-motion .service-cards .service-row:hover,
  .site-motion .service-cards .service-row:focus-within,
  .site-motion .button:hover, .site-motion .nav-cta:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-progress { display: none; }
  .project-card.motion-reveal, .project-card.motion-reveal.motion-pending {
    opacity: 1 !important; translate: 0 0 !important; rotate: 0deg !important;
    scale: 1 !important; transition: none !important;
  }
  .project-motion {
    transform: none !important; animation: none !important;
    transition: none !important; will-change: auto !important;
  }
  .motion-reveal, .motion-reveal.motion-pending {
    opacity: 1 !important; translate: 0 0 !important; transition: none !important;
  }
  .site-motion .brand img, .site-motion .button, .site-motion .nav-cta,
  .site-motion .service-cards .service-row, .site-motion .social-links a,
  .site-motion .project-open { transform: none !important; }
  .project-card .project-caption h3 a { background-size: 0% 1px !important; transition: none !important; }
}

/* Skill labels move as one readable strip, with a static two-column fallback. */
.site-motion .skills-viewport { overflow: hidden; padding-block: 6px; direction: ltr; }
.site-motion .skills-track {
  display: flex; width: max-content; direction: ltr;
  animation: skills-travel 28s linear infinite; animation-play-state: paused;
}
.site-motion .skills-list {
  display: flex; flex: 0 0 auto; gap: 20px; padding-inline-end: 20px;
}
.site-motion .skills-list li {
  flex: 0 0 210px; width: 210px; min-height: 96px; direction: rtl;
  transition: translate 300ms ease, border-color 300ms ease;
}
.site-motion .skills-block[data-running="true"] .skills-track { animation-play-state: running; }
.site-motion .skills-viewport:hover .skills-track,
.site-motion .skills-viewport:focus-within .skills-track { animation-play-state: paused; }
.site-motion .skills-list li:hover { translate: 0 -4px; border-color: var(--calm-sand); }
@keyframes skills-travel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .skills-track { display: block !important; width: auto !important; animation: none !important; transform: none !important; }
  .skills-duplicate { display: none !important; }
  .skills-list li { translate: 0 0 !important; transition: none !important; }
}