/* Design Decor — cinematic movement, original layout and official identity. */
.hero-image,
.hero-line > span,
.hero-enter {
  animation: none;
}

html[data-motion-ready] .hero-image {
  inset: -7% -3%;
  width: 106%;
  height: 114%;
  max-width: none;
  translate: var(--dd-hero-x, 0px) var(--dd-hero-y, 0px);
  will-change: auto;
}

html[data-motion-ready] .scroll-progress {
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #b87958, #d4bc91, #b87958);
}

html[data-motion-ready] .site-header {
  transition: box-shadow .4s ease, background .4s ease;
}

html[data-motion-ready] .site-header.motion-header-scrolled {
  background: #f5f3eef5;
  box-shadow: 0 1px 0 #28302414, 0 8px 32px #26302108;
  backdrop-filter: blur(18px);
}

/* Only prepared elements are hidden. Everything is readable before JS starts. */
html[data-motion-active="true"] [data-motion-stage="queued"][data-motion-kind="reveal"] {
  opacity: 0;
}

.motion-word {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-bottom: .15em;
  margin-bottom: -.15em;
}

.motion-word-inner {
  display: inline-block;
  transform-origin: 0 100%;
}

html[data-motion-active="true"] [data-motion-stage="queued"][data-motion-kind="heading"] .motion-word-inner {
  opacity: 0;
  translate: 0 108%;
}

html[data-motion-active="true"] [data-motion-stage="queued"][data-motion-kind="photo"] {
  /* Keep the observed box intact: a fully clipped target never intersects. */
  opacity: 0;
}

html[data-motion-ready] .closing > img {
  top: -6%;
  height: 112%;
  translate: 0 var(--dd-closing-y, 0px);
}

html[data-motion-ready] .hero-scroll .scroll-line:after {
  animation-play-state: inherit;
}

/* The rail is a quiet spatial cue; native anchors remain keyboard accessible. */
.motion-chapters {
  position: fixed;
  z-index: 23;
  right: 13px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 7px;
  opacity: 0;
  visibility: hidden;
  translate: 6px -50%;
  transition: opacity .45s ease, translate .45s ease, visibility .45s;
}

.motion-chapters.is-visible,
.motion-chapters:focus-within {
  opacity: 1;
  visibility: visible;
  translate: 0 -50%;
}

.motion-chapters a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 25px;
}

.motion-chapter-mark {
  display: grid;
  place-items: center;
  width: 17px;
  height: 2px;
  overflow: hidden;
  background: #7e8a7350;
  font-size: 0;
  transition: width .35s ease, height .35s ease, color .35s ease, background .35s ease;
}

.motion-chapters [aria-current] .motion-chapter-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2b342b;
  color: #f5f3ee;
  font-size: 8px;
  letter-spacing: .6px;
}

.motion-chapter-label {
  position: absolute;
  right: 38px;
  padding: 5px 9px;
  background: #f5f3eef5;
  border: 1px solid #a7b19b35;
  box-shadow: 0 3px 12px #17211408;
  color: #35402f;
  font-size: 10px;
  letter-spacing: .3px;
  white-space: nowrap;
  opacity: 0;
  translate: 5px 0;
  pointer-events: none;
  transition: opacity .25s ease, translate .25s ease;
}

.motion-chapters a:hover .motion-chapter-label,
.motion-chapters a:focus-visible .motion-chapter-label {
  opacity: 1;
  translate: 0 0;
}

/* Tilt belongs to the image, keeping the label / action perfectly legible. */
html[data-motion-active="true"] .motion-tilt-surface {
  transform: perspective(1200px) rotateX(var(--dd-tilt-x, 0deg)) rotateY(var(--dd-tilt-y, 0deg));
  transition: transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  transform-origin: center;
}

html[data-motion-active="true"] .client-window.motion-tilt-surface {
  transform: perspective(1200px) rotate(-3deg) rotateX(var(--dd-tilt-x, 0deg)) rotateY(var(--dd-tilt-y, 0deg));
}

html[data-motion-active="true"] .motion-hover .motion-tilt-surface,
html[data-motion-active="true"] .motion-hover.motion-tilt-surface {
  transition-duration: .14s, .5s;
}

.motion-interactive.price-card {
  position: relative;
  isolation: isolate;
}

.motion-interactive.price-card:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(350px circle at var(--dd-light-x, 50%) var(--dd-light-y, 50%), #d8b99020, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.motion-interactive.price-card.motion-hover:after {
  opacity: 1;
}

.motion-interactive.price-card.motion-hover,
.motion-interactive.inspiration-card.motion-hover {
  box-shadow: 0 18px 45px #26302012;
}

html[data-motion-active="true"] .motion-magnetic {
  translate: var(--dd-magnet-x, 0px) var(--dd-magnet-y, 0px);
  transition: translate .5s cubic-bezier(.18,.8,.22,1), background .3s ease, color .3s ease;
}

.motion-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.motion-button:after {
  content: '';
  position: absolute;
  inset: -50% -20%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #fff2 48%, transparent 60%);
  translate: -100% 0;
}

.project-card:focus-visible .view-project {
  opacity: 1;
  transform: translate(-50%, -50%);
}

html[data-motion-ready] .button .arrow-round,
html[data-motion-ready] .text-link > span,
html[data-motion-ready] .project-description > span {
  transition: rotate .45s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
}

@media (hover: hover) and (pointer: fine) {
  html[data-motion-active="true"] .motion-button:hover:after {
    translate: 100% 0;
    transition: translate .95s cubic-bezier(.2,.6,.2,1);
  }
  html[data-motion-active="true"] .button:hover .arrow-round,
  html[data-motion-active="true"] .text-link:hover > span,
  html[data-motion-active="true"] .project-card:hover .project-description > span {
    rotate: 45deg;
  }
}

@media (max-width: 1099px) {
  .motion-chapters { display: none; }
}

@media (pointer: coarse), (hover: none) {
  html[data-motion-active="true"] .motion-tilt-surface { transform: none; }
  html[data-motion-active="true"] .client-window.motion-tilt-surface { transform: rotate(-3deg); }
  html[data-motion-active="true"] .motion-magnetic { translate: 0 0; }
}

html[data-motion-active="false"] .hero-image,
html[data-motion-active="false"] .closing > img,
html[data-motion-active="false"] .motion-magnetic {
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion-ready] [data-motion-stage],
  html[data-motion-ready] .motion-word-inner {
    opacity: 1 !important;
    clip-path: none !important;
    translate: 0 0 !important;
    rotate: none !important;
  }
  html[data-motion-ready] .hero-image,
  html[data-motion-ready] .closing > img,
  html[data-motion-ready] .motion-magnetic { translate: 0 0 !important; }
  html[data-motion-ready] .motion-tilt-surface { transform: none !important; }
  html[data-motion-ready] .client-window.motion-tilt-surface { transform: rotate(-3deg) !important; }
  .motion-button:after { display: none; }
}