:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-soft-border: rgba(242, 236, 224, 0.16);
}

body {
  animation: motionPageIn 350ms ease both;
}

@keyframes motionPageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f5ee;
  color: #17130f;
  transition: opacity 650ms ease, visibility 650ms ease;
}

.loader.motion-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.motion-loader-inner {
  width: min(220px, 52vw);
  text-align: center;
}

.motion-loader-number {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}

.motion-loader-line {
  width: 100%;
  height: 1px;
  margin-top: 20px;
  overflow: hidden;
  background: rgba(23, 19, 15, 0.14);
}

.motion-loader-progress {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(23, 19, 15, 0.72);
}

.motion-hero-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--motion-ease), transform 700ms var(--motion-ease);
  transition-delay: var(--hero-delay, 0ms);
}

body.motion-loaded .motion-hero-item,
body:not(.motion-waiting) .motion-hero-item {
  opacity: 1;
  transform: translateY(0);
}

body.motion-waiting .hero-media {
  opacity: 0;
  transform: translateY(18px);
}

body.motion-loaded .hero-media {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--motion-ease) 480ms, transform 700ms var(--motion-ease) 480ms;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--motion-ease), transform 800ms var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible,
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.project-card,
.proj-card {
  border: 1px solid rgba(242, 236, 224, 0.06);
  box-shadow: none;
  transition: border-color 500ms var(--motion-ease), background 500ms var(--motion-ease);
}

.project-card:hover,
.proj-card:hover {
  border-color: var(--motion-soft-border);
}

.project-card .card-media,
.proj-card .card-media,
.image-hover,
.media-item,
.video-item,
.chain-item,
.compare-col,
.case-contrast-col,
.garden-img-wrap,
.xq-gallery-item,
.entry-img,
.article-video-wrap,
.proj-hero {
  overflow: hidden;
}

.project-card .card-media img,
.proj-card .card-media img {
  transform: scale(1);
  filter: brightness(1);
  transition: transform 500ms var(--motion-ease), filter 500ms var(--motion-ease), opacity 500ms var(--motion-ease);
}

.project-card:hover .card-media img,
.proj-card:hover .card-media img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.project-card .card-title,
.proj-card .card-title {
  transition: transform 500ms var(--motion-ease), color 500ms var(--motion-ease), opacity 500ms var(--motion-ease);
}

.project-card:hover .card-title,
.proj-card:hover .card-title {
  transform: translateY(-4px);
}

.project-card .card-cta,
.proj-card .card-cta,
.thinking-item .arrow,
.thinking-entry .arrow,
.research-entry .entry-arrow {
  display: inline-block;
  transition: transform 500ms var(--motion-ease), color 500ms var(--motion-ease), opacity 500ms var(--motion-ease);
}

.project-card:hover .card-cta,
.proj-card:hover .card-cta,
.thinking-item:hover .arrow,
.thinking-entry:hover .arrow,
.research-entry:hover .entry-arrow {
  transform: translateX(6px);
}

.image-hover img,
img.image-hover,
.media-item img,
.video-item video,
.chain-item img,
.compare-col img,
.case-contrast-col img,
.garden-img-wrap img,
.xq-gallery-item img,
.entry-img img,
.proj-hero img,
.proj-hero video {
  transition: transform 700ms var(--motion-ease), filter 700ms var(--motion-ease), opacity 700ms var(--motion-ease);
}

.image-hover:hover img,
img.image-hover:hover,
.media-item:hover img,
.video-item:hover video,
.chain-item:hover img,
.compare-col:hover img,
.case-contrast-col:hover img,
.garden-img-wrap:hover img,
.xq-gallery-item:hover img,
.entry-img:hover img {
  transform: scale(1.02);
  filter: brightness(1.05);
}

.nav,
#nav {
  transition: padding 500ms var(--motion-ease), background 500ms ease, border-color 500ms ease, backdrop-filter 500ms ease;
}

.nav.motion-scrolled,
#nav.motion-scrolled,
.nav.scrolled,
#nav.scrolled {
  background: rgba(10, 9, 8, 0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(242, 236, 224, 0.08);
}

.nav-links a {
  transition: color 350ms ease, opacity 350ms ease;
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: rgba(242, 236, 224, 0.88);
}

.motion-button {
  transition: transform 500ms var(--motion-ease), border-color 500ms var(--motion-ease), background 500ms var(--motion-ease), color 500ms var(--motion-ease);
}

.motion-button:hover {
  transform: translateX(2px);
  border-color: rgba(242, 236, 224, 0.34);
}

.motion-button .arrow {
  display: inline-block;
  transition: transform 500ms var(--motion-ease);
}

.motion-button:hover .arrow {
  transform: translateX(6px);
}

.thinking-item,
.thinking-entry,
.research-entry {
  transition: border-color 500ms var(--motion-ease), opacity 500ms var(--motion-ease);
}

.thinking-item:hover .entry-title,
.thinking-entry:hover .entry-title,
.research-entry:hover .entry-title {
  opacity: 0.72;
}

.flow-step,
.flow-n {
  transition-delay: var(--reveal-delay, 0ms);
}

.cursor-dot,
.cursor-ring {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 768px), (pointer: coarse) {
  body {
    cursor: auto !important;
  }

  a,
  button {
    cursor: pointer !important;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  .parallax-image {
    transform: none !important;
  }

  .project-card:hover .card-media img,
  .proj-card:hover .card-media img,
  .image-hover:hover img,
  img.image-hover:hover,
  .media-item:hover img,
  .video-item:hover video,
  .chain-item:hover img,
  .compare-col:hover img,
  .case-contrast-col:hover img,
  .garden-img-wrap:hover img,
  .xq-gallery-item:hover img,
  .entry-img:hover img {
    transform: none;
    filter: none;
  }
}