/* Scroll cues stay decorative; the content and navigation keep their native flow. */
.reading-progress{display:none;position:absolute;left:30px;right:30px;bottom:4px;height:2px;border-radius:20px;overflow:hidden;background:#102b320a;pointer-events:none}
.has-scroll-effects .reading-progress{display:block}
.reading-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#d98c77,#699c9f);transform:scaleX(var(--reading-progress,0));transform-origin:left center}
.art-depth{position:absolute;inset:0;transform:translate3d(0,var(--logo-depth,0px),0)}
.art-glow{transform:translate3d(0,var(--halo-depth,0px),0)}

.has-timeline{position:relative}
.has-timeline::before,.has-timeline::after{content:"";position:absolute;left:16px;top:var(--timeline-top,17px);width:2px;height:var(--timeline-height,0px);border-radius:2px;pointer-events:none}
.has-timeline::before{background:#3b606421}
.has-timeline::after{background:linear-gradient(180deg,#d98c77,#527e81);transform:scaleY(var(--timeline-progress,0));transform-origin:top center}
.has-timeline .project-step{position:relative;z-index:1}
.has-timeline .step-number{position:relative;display:grid;place-items:center;align-self:start;width:34px;height:34px;padding:0;border:1px solid #a9bcb7;border-radius:50%;background:#e9eeea;color:#426064;font-size:12px;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.has-timeline .is-step-active .step-number{background:#23494f;border-color:#23494f;color:#f4f1e9;box-shadow:0 0 0 5px #699c9f1a}

/* The original accent wrappers remain separate from the word wrappers. */
.is-title-ready{position:relative}
.title-word{display:inline-block;white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .is-title-ready .title-word{opacity:0;transform:translateY(16px);transition:opacity var(--reveal-duration) var(--motion-ease),transform var(--reveal-duration) var(--motion-ease);transition-delay:var(--word-delay,0ms)}
  .is-title-visible .title-word{opacity:1;transform:none}
}

/* Pointer transforms compose with the existing entrance and button hover effects. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pointer-effects .service-card.is-visible{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:opacity var(--reveal-duration) var(--motion-ease) var(--reveal-delay,0ms),transform .45s var(--motion-ease);backface-visibility:hidden}
  .pointer-effects .service-card.is-visible.is-pointer-active{transition:opacity var(--reveal-duration) var(--motion-ease),transform .12s ease-out}
  .pointer-effects .button-primary,.pointer-effects .nav-contact{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .4s var(--motion-ease),transform .3s var(--ease),box-shadow .3s,background .3s}
  .pointer-effects .button-primary.is-pointer-active,.pointer-effects .nav-contact.is-pointer-active{transition:translate .12s ease-out,transform .3s var(--ease),box-shadow .3s,background .3s}
}
@media(max-width:720px){.reading-progress{left:23px;right:23px;bottom:3px}.has-timeline .step-number{font-size:11px}}
@media(prefers-reduced-motion:reduce){
  .art-depth,.art-glow{transform:none!important}
  .title-word{opacity:1!important;transform:none!important}
  .button-primary,.nav-contact{translate:none!important}
}
@media print{.reading-progress,.has-timeline::before,.has-timeline::after{display:none}.title-word{opacity:1!important;transform:none!important}.art-depth,.art-glow{transform:none!important}}