/* Motion is progressive: the static page stays fully readable without it. */
@media (prefers-reduced-motion: no-preference) {
  .portfolio-page .hero { isolation: isolate; }
  .portfolio-page .hero::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: min(880px, 90vw); aspect-ratio: 1; right: -10%; top: -30%;
    background: radial-gradient(ellipse, #416af526 0%, #416af50a 42%, transparent 68%);
    animation: saitora-glow-arrive 3.8s cubic-bezier(.2,.7,.2,1) both;
  }
  .portfolio-page .hero-work { transition: transform 380ms cubic-bezier(.2,.7,.2,1); }
  .portfolio-page .brand-mark svg { transition: transform 450ms cubic-bezier(.2,.7,.2,1); }
  .portfolio-page .brand:hover .brand-mark svg { transform: rotate(15deg); }
  .portfolio-page .button, .portfolio-page .service-demo-link, .portfolio-page .nav-cta {
    transition: transform 230ms ease, box-shadow 230ms ease, background 200ms ease, color 200ms ease;
  }
  .portfolio-page .button > [aria-hidden], .portfolio-page .service-demo-link > [aria-hidden], .portfolio-page .work-arrow {
    display: inline-block; transition: transform 230ms cubic-bezier(.2,.7,.2,1);
  }
  .portfolio-page .button:hover > [aria-hidden], .portfolio-page .service-demo-link:hover > [aria-hidden], .portfolio-page .hero-work-main:hover .work-arrow {
    transform: translate(3px, -3px);
  }
  .portfolio-page .button:active, .portfolio-page .service-demo-link:active, .portfolio-page .nav-cta:active { transform: scale(.98); }
  .portfolio-page .project-shot { transition: transform 360ms cubic-bezier(.2,.7,.2,1), box-shadow 360ms ease, border-color 250ms ease; }
  .portfolio-page .project-shot img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
  .portfolio-page .project-copy h3 { transition: color 240ms ease; }
  .portfolio-page .project-card:focus-within .project-copy h3 { color: #315ae5; }
  .portfolio-page .founder-profile { transition: border-color 250ms ease, background 250ms ease, transform 300ms ease; }
  .portfolio-page .founder-monogram { transition: transform 350ms ease, background 350ms ease; }
  .portfolio-page .step-number { transition: transform 250ms ease; }
  .portfolio-page .process-step { transition: border-color 300ms ease; }
  .portfolio-page .service-choice { transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease; }
  .portfolio-page .service-choice:active { transform: scale(.97); }
  .portfolio-page .contact-detail { transition: border-color 240ms ease; }
  .portfolio-page .contact-detail strong { display: inline-block; transition: transform 250ms ease; }
  .portfolio-page a.contact-detail:hover strong { transform: translateX(5px); }
  .portfolio-page .modal.is-open .modal-dialog { animation: saitora-dialog-in 260ms cubic-bezier(.2,.7,.2,1); }
  .portfolio-page .modal.is-open .modal-backdrop { animation: saitora-fade-in 220ms ease; }
  .portfolio-page .shot-lightbox.is-open img { animation: saitora-image-in 280ms cubic-bezier(.2,.7,.2,1); }
  .portfolio-page .hero-bottom a > [aria-hidden] { animation: saitora-down-cue 2.4s ease .7s 1; }
  @media (hover: hover) and (pointer: fine) {
    .portfolio-page .button:hover, .portfolio-page .service-demo-link:hover { transform: translateY(-3px); box-shadow: 0 9px 22px #111b311a; }
    .portfolio-page .project-shot:hover { transform: translateY(-5px); border-color: #b3c1df; box-shadow: 0 18px 35px #111b3112; }
    .portfolio-page .project-shot:hover img { transform: scale(1.04); }
    .portfolio-page .project-card:hover .project-copy h3 { color: #315ae5; }
    .portfolio-page .founder-profile:hover { transform: translateY(-4px); border-color: #748cba; background: #18263f; }
    .portfolio-page .founder-profile:hover .founder-monogram { transform: rotate(-7deg); background: #304775; }
    .portfolio-page .process-step:hover .step-number { transform: translateX(5px); }
  }
  .portfolio-page .button:active, .portfolio-page .service-demo-link:active, .portfolio-page .nav-cta:active { transform: scale(.98); }
  @media (max-width: 1080px) {
    .portfolio-page .nav-menu.is-open { animation: saitora-menu-in 230ms ease; }
  }
}
@keyframes saitora-glow-arrive {
  from { opacity: .15; transform: translate3d(36px, 24px, 0) scale(.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes saitora-dialog-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes saitora-image-in { from { opacity: .2; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes saitora-menu-in { from { opacity: .2; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes saitora-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes saitora-down-cue { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .portfolio-page .hero-work, .portfolio-page .project-shot, .portfolio-page .project-shot img { transform: none !important; }
}