/* Motion never carries essential information. No hidden content without JS. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .eyebrow {
    animation: hero-enter 0.7s both;
  }
  .hero h1 {
    animation: hero-enter 0.85s 0.1s both;
  }
  .hero-copy > p {
    animation: hero-enter 0.85s 0.2s both;
  }
  .hero-actions {
    animation: hero-enter 0.8s 0.3s both;
  }
  .hero-art {
    animation: art-enter 1.1s 0.15s both;
  }
  .motion-ready .reveal {
    opacity: 0;
    translate: 0 24px;
    transition:
      opacity 0.65s ease,
      translate 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-ready .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }
  .project-card {
    transform: translateY(0);
    transition:
      transform 0.25s ease,
      border-color 0.25s,
      box-shadow 0.25s;
    isolation: isolate;
  }
  .project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px #0002;
  }
  .preview-window {
    transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .project-card:hover .preview-window {
    translate: 0 -7px;
  }
  .project-dialog[open],
  .editor-dialog[open],
  .confirm-dialog[open] {
    animation: dialog-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  dialog[open]::backdrop {
    animation: backdrop-enter 0.3s;
  }
  .toast:not([hidden]) {
    animation: toast-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .map-node {
    animation: node-enter 0.65s var(--node-delay, 0ms) both;
  }
  .map-link {
    animation: link-draw 1.5s ease both;
  }
  .design-options button:hover {
    translate: 0 -1px;
  }
  .brand-mark {
    transition: rotate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .brand:hover .brand-mark {
    rotate: -7deg;
  }
  .project-open {
    transition:
      translate 0.25s,
      border-color 0.25s,
      color 0.25s;
  }
  .project-card:hover .project-open {
    translate: 2px -2px;
  }
}
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes art-enter {
  from {
    opacity: 0;
    scale: 0.93;
  }
  to {
    opacity: var(--art-opacity, 1);
    scale: 1;
  }
}
@keyframes orbit-breathe {
  50% {
    transform: rotateX(66deg) rotateZ(-20deg);
  }
}
@keyframes orbit-sway {
  50% {
    transform: rotateY(67deg) rotateZ(45deg);
  }
}
@keyframes label-float {
  50% {
    translate: 0 -8px;
    rotate: 2deg;
  }
}
@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes toast-enter {
  from {
    opacity: 0;
    translate: 0 15px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes node-enter {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes hub-glow {
  50% {
    box-shadow:
      0 0 0 15px #34577222,
      0 0 0 31px #34577211,
      inset 0 0 30px #47748855;
  }
}
@keyframes link-draw {
  from {
    stroke-dashoffset: 5;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
::view-transition-old(root) {
  animation: design-out 0.16s ease both;
}
::view-transition-new(root) {
  animation: design-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes design-out {
  to {
    opacity: 0;
    scale: 0.995;
  }
}
@keyframes design-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal {
    opacity: 1;
    translate: none;
  }
  .map-pulse {
    display: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
  .project-card:hover {
    transform: none;
  }
  .hero-art {
    opacity: var(--art-opacity, 1);
  }
  .design-options button {
    transition: none;
  }
}

@media (max-width: 800px) {
  .hero-art {
    --art-opacity: 0.3;
  }
}
@media (max-width: 540px) {
  .hero-art {
    --art-opacity: 0.23;
  }
}