/* Motion only: final geometry, typography and colors come from the existing CSS. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
/* Edge-aligned regional artwork may travel in from outside the viewport. */
main { overflow-x: clip; }
svg.hero-art, svg.regional-art { height: auto; display: block; }
@media(max-width:1024px) {
 .menu-toggle[aria-expanded="true"] .menu-symbol { border-color: var(--purple); }
 .menu-toggle[aria-expanded="true"] .menu-symbol::after { background: var(--purple); }
 .menu-symbol { transition: border-color .18s ease; }
 .menu-symbol::after { transition: background-color .18s ease; }
}
.project-image { transform-origin: center; }
.boot-light { pointer-events: none; }
.motion-enabled .home-hero-copy::before {
  content: ''; position: absolute; inset: 0; background: #08090c;
  pointer-events: none; z-index: 3; opacity: 0;
  animation: screen-on .65s .55s both;
}
.motion-enabled .boot-light {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  overflow: hidden; opacity: 0; background: radial-gradient(ellipse, #7c3cff30, transparent 70%);
  animation: boot-pulse 1.1s .25s both;
}
.motion-enabled .boot-light::after {
  content: ''; position: absolute; left: 3%; right: 3%; top: -100%; height: 100%;
  background: linear-gradient(transparent 49.7%, #b184ff 50%, transparent 50.3%);
  animation: screen-sweep .6s .6s both;
}
.motion-enabled .home-hero-copy h1 { animation: screen-type .8s .85s both; }
.motion-enabled .home-hero-copy > p { animation: motion-up .6s 1.25s both; }
.motion-enabled .home-hero-copy > .button { animation: motion-up .6s 1.65s both; }
.motion-enabled .home-hero-copy { animation: screen-glow 2.25s both; }
.motion-pending .hero-copy > *, .motion-pending .hero-art { opacity: 0; }
@keyframes screen-on { from { opacity: 1; } to { opacity: 0; } }
@keyframes boot-pulse { 0% { opacity: 0; } 30% { opacity: .9; } 70% { opacity: .35; } 100% { opacity: 0; } }
@keyframes screen-sweep { from { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } to { transform: translateY(200%); opacity: 0; } }
@keyframes screen-glow { 0%,12% { box-shadow: 0 0 0 transparent; } 45% { box-shadow: 0 0 40px #7c3cff25; } 100% { box-shadow: 0 0 0 transparent; } }
@keyframes screen-type {
  0% { opacity: 0; transform: scale(.94); }
  35% { opacity: 1; transform: scale(1.03); }
  40% { opacity: .72; transform: translateX(1px) scale(1.02); }
  45% { opacity: 1; transform: scale(1.02); }
  50% { opacity: .82; transform: translateX(-1px) scale(1.01); }
  56%,100% { opacity: 1; transform: scale(1); }
}
@keyframes motion-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.about-hero { --portrait-tempo: 1; }
.motion-enabled .about-hero .page-hero::before {
 animation: portrait-edges calc(.45s * var(--portrait-tempo)) calc(.15s * var(--portrait-tempo)) both;
}
.motion-enabled .portrait-stage::before,
.motion-enabled .about-hero .page-hero::after {
 animation: motion-glow calc(.65s * var(--portrait-tempo)) calc(.65s * var(--portrait-tempo)) both;
}
@keyframes portrait-edges {
 from { opacity: 0; clip-path: inset(0 0 100% 0); }
 to { opacity: 1; clip-path: inset(0); }
}
@media(max-width:1180px) { .about-hero { --portrait-tempo: .85; } }
@media(max-width:700px) { .about-hero { --portrait-tempo: .72; } }
@keyframes motion-glow { from { opacity: 0; } to { opacity: 1; } }
@media(hover:hover) and (pointer:fine) {
 .project-image { transition: box-shadow .25s ease; }
 .project-image:hover { box-shadow: 0 0 32px #7c3cff45, 0 10px 24px #7c3cff20; }
 .service-card, .extra-grid .card, .solutions article, .benefit-list article {
  transition: translate .25s var(--motion-ease), box-shadow .25s ease;
 }
 .service-card:hover, .extra-grid .card:hover, .solutions article:hover, .benefit-list article:hover {
  translate: 0 -3px; box-shadow: 0 4px 20px #7c3cff18;
 }
 .motion-arrow { display: inline-block; transition: translate .2s ease; }
 .text-link:is(:hover, :focus-visible) .motion-arrow { translate: 3px 0; }
}
.button:focus-visible { box-shadow: 0 0 0 3px #7c3cff55; }
.field input, .field textarea, .field select { transition: border-color .2s ease, box-shadow .2s ease; }
.field :is(input, textarea, select):focus-visible { box-shadow: 0 0 0 2px #7c3cff35; }
@media(hover:none) { .button:hover { transform: none; } }
@media(max-width:700px) {
 .motion-enabled .home-hero-copy h1 { animation-duration: .55s; }
 .motion-enabled .home-hero-copy > .button { animation-delay: 1.25s; animation-duration: .5s; }
}
@media(prefers-reduced-motion:reduce) {
 .boot-light { display: none; }
 .motion-enabled *, .motion-enabled *::before, .motion-enabled *::after { animation: none !important; transition: none !important; }
 .motion-pending .hero-copy > *, .motion-pending .hero-art { opacity: 1; }
 .motion-enabled .home-hero-copy::before { display: none; }
}
.projects .project-image { position: relative; }
.project-open { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: zoom-in; }
/* Keep the preview's native playback controls reachable. */
.shop-project .project-open { bottom: 48px; height: auto; }
.project-open:focus-visible { outline: 3px solid #a477ff; outline-offset: -3px; }
.project-viewer-open { overflow: hidden; }
.project-viewer { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; width: 90vw; max-width: 90vw; max-height: 88dvh; overflow: visible; }
.project-viewer::backdrop { background: #000e; }
.viewer-content { display: flex; justify-content: center; }
.viewer-content > :is(img, video) { display: block; width: auto; max-width: 100%; height: auto; max-height: 88dvh; object-fit: contain; }
.viewer-accessible-close { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.viewer-accessible-close:focus-visible { clip-path: none; width: auto; height: auto; padding: 10px 16px; right: 0; top: 0; z-index: 2; background: #111214; color: white; outline: 2px solid #a477ff; }
.motion-enabled .laptop-screen-art { animation: screen-art-on .7s .55s both; }
@keyframes screen-art-on { from { opacity: 0; } to { opacity: 1; } }