/* V2.2: progressive, optional movement. Content remains visible without JS. */
.reading-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 90;
  pointer-events: none; transform: scaleX(var(--reading-progress, 0));
  transform-origin: left; background: linear-gradient(90deg, #176BE0, #67DBFF);
  box-shadow: 0 0 13px #44BCFF55;
}
.site-header.cs-scrolled { box-shadow: 0 8px 36px #061C3010; }

.motion-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 1px solid #DBE7F7; border-radius: 50%; background: #EDF4FC; color: #176BE0;
  font: 500 12px/1.25 Inter, sans-serif; letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.motion-toggle > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.motion-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
.motion-toggle:hover { background: #E0EEFD; border-color: #9CBFE8; }
.motion-toggle:focus-visible { outline: 3px solid #57CFFF; outline-offset: 4px; }
.motion-toggle[data-state="off"] { color: #405B75; }
.motion-toggle .motion-enable-icon, .motion-toggle[data-state="off"] .motion-pause-icon { display: none; }
.motion-toggle[data-state="off"] .motion-enable-icon { display: block; }
body.modal-open .motion-toggle { visibility: hidden; }

.motion-reveal {
  opacity: 1; translate: 0 0;
  transition: opacity 650ms cubic-bezier(.2,.7,.2,1), translate 650ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
html[data-motion="on"] .motion-reveal.is-pending { opacity: 0; translate: 0 var(--reveal-offset,22px); }
html[data-motion="off"] .motion-reveal { opacity: 1; translate: 0 0; transition: none; }

[data-cs-motion-surface] {
  transform: perspective(1100px) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg));
  transition: transform 350ms cubic-bezier(.2,.65,.3,1), box-shadow 250ms ease, border-color 250ms ease;
}
.motion-reveal[data-cs-motion-surface] {
  transition: transform 350ms cubic-bezier(.2,.65,.3,1), opacity 650ms cubic-bezier(.2,.7,.2,1), translate 650ms cubic-bezier(.2,.7,.2,1), box-shadow 250ms ease, border-color 250ms ease;
  transition-delay: 0ms, var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}
html[data-motion="on"] [data-cs-motion-surface].motion-pointer-active { transition-duration: 90ms, 250ms, 250ms; }
html[data-motion="on"] .motion-reveal[data-cs-motion-surface].motion-pointer-active { transition-duration: 90ms, 650ms, 650ms, 250ms, 250ms; }
.motion-sheen {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--motion-x, 50%) var(--motion-y, 50%), #A2E8FF21 0%, #57CFFF0B 36%, transparent 72%);
  box-shadow: inset 0 0 0 1px #A8DFFF23;
  transition: opacity 260ms ease;
}
html[data-motion="on"] .motion-pointer-active > .motion-sheen,
[data-cs-motion-surface]:focus-within > .motion-sheen { opacity: 1; }
html[data-motion="off"] [data-cs-motion-surface] { transform: none; transition: none; }
html[data-motion="off"] .motion-sheen { opacity: 0; transition: none; }
html[data-motion="off"] .service-card:hover > img,
html[data-motion="off"] .case-card:hover .case-image > img { transform: none; }

/* Explicit hooks for authored decorative objects. No JavaScript => no animation. */
html[data-motion] [data-ambient="float"] { animation: cs-ambient-float 9s ease-in-out infinite; animation-play-state: paused; }
html[data-motion] [data-ambient="breathe"] { animation: cs-ambient-breathe 8s ease-in-out infinite; animation-play-state: paused; }
html[data-motion] [data-ambient="trace"] { stroke-dasharray: 10 22; animation: cs-ambient-trace 12s linear infinite; animation-play-state: paused; }
html[data-motion] [data-ambient="orbit"] { animation: cs-ambient-orbit 48s linear infinite; animation-play-state: paused; transform-origin: center; }
html[data-motion="on"][data-page-visible="true"] [data-ambient] { animation-play-state: running; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after,
html[data-page-visible="false"] *, html[data-page-visible="false"] *::before, html[data-page-visible="false"] *::after {
  animation-play-state: paused !important;
}
html[data-motion="off"], html[data-motion="off"] * { scroll-behavior: auto !important; }
@keyframes cs-ambient-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes cs-ambient-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes cs-ambient-trace { to { stroke-dashoffset: -128; } }
@keyframes cs-ambient-orbit { to { rotate: 360deg; } }

@media (hover: none), (pointer: coarse) {
  [data-cs-motion-surface] { transform: none !important; }
  .motion-sheen { display: none; }
  .motion-reveal, html[data-motion="on"] .motion-reveal.is-pending { translate: none; }
}
@media (max-width: 760px) {
  .motion-toggle { align-self: stretch; flex: 0 0 auto; width: auto; height: auto; min-height: 44px; margin-top: 8px; padding: 12px 14px; gap: 9px; border-radius: 10px; justify-content: flex-start; font-size: 14px; }
  .motion-toggle > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .reading-progress { height: 2px; }
}
@media print {
  .reading-progress, .motion-toggle, .motion-sheen { display: none !important; }
  .motion-reveal, html[data-motion="on"] .motion-reveal.is-pending { opacity: 1 !important; translate: none !important; }
  [data-cs-motion-surface] { transform: none !important; }
}

/* Depth follows natural page movement. It never changes the scroll position. */
html[data-motion="on"] .cs-depth-layer { transform:translateY(var(--depth-shift,0px)) scale(1.045); }
.site-header { transition:box-shadow .3s ease, background-color .3s ease; }
.button { transition:background-color .22s ease, box-shadow .22s ease, translate .22s ease; }
@media(hover:hover) and (pointer:fine){
 html[data-motion="on"] .button.primary:hover,html[data-motion="on"] .button.white:hover { translate:0 -2px;box-shadow:0 7px 20px #176be021; }
}
@media(max-width:760px),(pointer:coarse){
 html[data-motion="on"] .cs-depth-layer{transform:none;}
 .motion-reveal{transition-duration:380ms;transition-delay:0ms;}
}
@media(prefers-reduced-motion:reduce){
 .motion-reveal,html[data-motion="on"] .motion-reveal.is-pending{opacity:1!important;translate:none!important;transition:none!important;}
 .cs-depth-layer,html[data-motion="on"] .cs-depth-layer{transform:none!important;}
 .site-header,.button,[data-cs-motion-surface]{transition:none!important;translate:none!important;}
 .motion-sheen{display:none!important;}
}
html[data-motion="off"] .cs-depth-layer{transform:none;}
html[data-motion="off"] .button{transition:none;translate:none;}