/* Three motion systems: scroll reveals, direct feedback, and content transitions. */
:root {
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-fast: 180ms;
  --motion-medium: 350ms;
}
.reveal-pending {
  opacity: 0;
}
.reading-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  background: var(--blue-bright);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-background {
  transform: translate3d(0, var(--hero-drift, 0px), 0) scale(1.12);
}
.hero-copy > .hero-eyebrow {
  animation: hero-copy-in 650ms 70ms var(--motion-ease) both;
}
.hero-copy > h1 {
  animation: hero-copy-in 800ms 160ms var(--motion-ease) both;
}
.hero-copy > .hero-description {
  animation: hero-copy-in 800ms 260ms var(--motion-ease) both;
}
.hero-copy > .action-wrap {
  animation: hero-copy-in 800ms 350ms var(--motion-ease) both;
}
.hero-bottom svg {
  animation: scroll-cue 2.4s 1s ease-in-out 3;
}
[data-ripple] {
  position: relative;
  overflow: hidden;
}
.interaction-ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: currentColor;
  z-index: 4;
}
.service-tile {
  transition:
    transform var(--motion-medium) var(--motion-ease),
    box-shadow var(--motion-medium),
    background var(--motion-medium),
    border-color var(--motion-medium);
}
.service-tile {
  overflow: hidden;
}
.service-tile::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  width: 42%;
  left: -90%;
  background: linear-gradient(90deg, transparent, #ffffff12, transparent);
  transform: skewX(-20deg);
  transition: left 650ms var(--motion-ease);
  pointer-events: none;
}
.service-icon {
  transition: transform var(--motion-medium) var(--motion-ease);
}
.service-arrow svg,
.case-detail-link svg,
.text-link svg,
.viewer-consult svg,
.brief-copy-button > svg:last-child,
.hero-bottom a svg {
  transition: transform var(--motion-medium) var(--motion-ease);
}
.service-arrow {
  transition:
    background var(--motion-medium),
    border-color var(--motion-medium);
}
.uiverse-button,
.header-contact,
.brief-copy-button,
.viewer-consult,
.icon-button,
.floating-contact {
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast),
    border-color var(--motion-fast);
}
.uiverse-button:active,
.header-contact:active,
.brief-copy-button:active,
.viewer-consult:active,
.icon-button:active,
.service-tile:active,
.floating-contact:active {
  transform: scale(0.96);
}
.work-filters {
  position: relative;
}
.work-filters .filter-marker {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--blue);
  pointer-events: none;
  transition:
    transform var(--motion-medium) var(--motion-ease),
    width var(--motion-medium) var(--motion-ease),
    opacity var(--motion-fast);
}
.work-filters button.filter-active,
.work-filters button:hover {
  border-bottom-color: transparent;
}
.work-filters button {
  transition:
    color var(--motion-fast),
    background var(--motion-fast);
}
.work-filters button:active {
  background: #e4effb;
}
.case-list {
  animation: case-list-in 360ms var(--motion-ease) both;
}
.case-preview {
  perspective: 1000px;
}
.case-preview > .product-media,
.case-preview > .freight-diagram {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: center;
  transition:
    transform 220ms ease-out,
    box-shadow var(--motion-medium);
}
.product-mobile {
  transition: transform 450ms var(--motion-ease);
}
.case-number svg {
  transition: transform var(--motion-medium) var(--motion-ease);
}
.case-detail-link {
  transition:
    gap var(--motion-medium),
    border-color var(--motion-fast);
}
.gallery-copy {
  transition: transform 450ms var(--motion-ease);
}
.gallery-copy > svg {
  transition: transform 450ms var(--motion-ease);
}
.gallery-overlay {
  transition: opacity 450ms;
}
.company-intro summary svg,
.viewer-description summary svg {
  transition: transform var(--motion-medium) var(--motion-ease);
}
.company-intro[open] > p,
.viewer-description[open] > p {
  animation: detail-in 300ms var(--motion-ease) both;
}
.brief-form input,
.brief-form textarea,
.brief-form select {
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    background var(--motion-fast);
}
.brief-form input:focus,
.brief-form textarea:focus,
.brief-form select:focus {
  border-color: #7fc8ff;
  box-shadow: 0 0 0 4px #49a6ff20;
  outline-offset: 1px;
}
.brief-copy-button.copy-success {
  background: #14744d;
}
.copy-success > svg:first-child {
  animation: copy-check 320ms var(--motion-ease) both;
}
.copy-feedback:not(:empty) {
  animation: detail-in 250ms var(--motion-ease) both;
}
.case-dialog[open] {
  animation: dialog-in 280ms var(--motion-ease) both;
}
.case-dialog[open]::backdrop {
  animation: backdrop-in 220ms ease both;
}
.case-dialog.dialog-closing {
  animation: dialog-out 180ms ease-in both;
  pointer-events: none;
}
.case-dialog.dialog-closing::backdrop {
  animation: backdrop-out 180ms ease-in both;
}
.viewer-image > img {
  animation: image-in 300ms var(--motion-ease) both;
}
.viewer-info {
  animation: detail-in 300ms var(--motion-ease) both;
}
.image-thumbnails > button {
  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}
.image-thumbnails > button:active {
  transform: scale(0.93);
}
.case-preview:active > .product-media,
.case-preview:active > .freight-diagram {
  transform: scale(0.99);
}
.gallery-item:active .gallery-overlay {
  opacity: 0.65;
}
.image-thumbnails .thumbnail-active {
  transform: translateY(-2px);
}
.viewer-footer button {
  transition:
    color var(--motion-fast),
    gap var(--motion-fast);
}
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover:active {
    transform: translateY(-3px) scale(0.97);
  }
  .service-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 13px 26px #00112240;
  }
  .service-tile:hover::after {
    left: 145%;
  }
  .service-tile:hover .service-icon {
    transform: translateY(-3px) scale(1.09);
  }
  .service-tile:hover .service-arrow {
    border-color: #ffffffa0;
    background: #ffffff15;
  }
  .service-tile:hover .service-arrow svg,
  .text-link:hover svg,
  .case-detail-link:hover svg,
  .viewer-consult:hover svg,
  .brief-copy-button:hover > svg:last-child {
    transform: translateX(4px);
  }
  .case-preview:hover > .product-media,
  .case-preview:hover > .freight-diagram {
    box-shadow: 0 14px 28px #13294a1c;
  }
  .case-preview:hover .product-mobile {
    transform: translateY(-5px);
  }
  .case-detail-link:hover {
    gap: 29px;
  }
  .case-copy:hover .case-number svg {
    transform: translateY(-3px);
  }
  .gallery-item:hover .gallery-copy {
    transform: translateY(-8px);
  }
  .gallery-item:hover .gallery-copy > svg {
    transform: translate(4px, -4px);
  }
  .icon-button:hover {
    background: #eaf4ff;
    border-color: #91c3f3;
  }
  .image-thumbnails > button:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
  }
  .floating-contact:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 23px #082d6350;
  }
  .viewer-footer button:hover {
    gap: 10px;
  }
}
@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scroll-cue {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(5px);
  }
}
@keyframes case-list-in {
  from {
    opacity: 0.35;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes detail-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dialog-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backdrop-out {
  to {
    opacity: 0;
  }
}
@keyframes image-in {
  from {
    opacity: 0.2;
    transform: translateX(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes copy-check {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-30deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@media (max-width: 680px) {
  .case-dialog[open] {
    animation-name: mobile-dialog-in;
  }
  .gallery-strip {
    scroll-snap-type: x proximity;
  }
  .gallery-item {
    scroll-snap-align: center;
  }
}
@keyframes mobile-dialog-in {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Scroll-linked layers keep the page layout fixed while the imagery moves. */
.services .section-photo,
.contact .section-photo,
.process-panel > img {
  transform: translate3d(0, var(--scroll-distance, 0px), 0) scale(1.15);
}
.process-panel {
  overflow: hidden;
}
.case-preview > .product-media,
.case-preview > .freight-diagram {
  transform: translate3d(0, var(--scroll-distance, 0px), 0)
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.case-number > span {
  transform: translate3d(0, calc(var(--scroll-distance, 0px) * -0.35), 0);
}
.gallery-item > img {
  transform: translate3d(0, var(--scroll-distance, 0px), 0) scale(1.18);
  transition: transform 220ms ease-out;
}
.gallery-item:nth-child(even) > img {
  transform: translate3d(0, calc(var(--scroll-distance, 0px) * -1), 0)
    scale(1.18);
}
.portfolio-heading h2::after,
.process-copy h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 15px;
  background: var(--blue);
  transform: scaleX(var(--line-progress, 1));
  transform-origin: left;
}
.portfolio-heading h2::after {
  margin-inline: auto;
  transform-origin: center;
}
.process-steps li {
  position: relative;
}
.process-steps li::before,
.process-steps li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 25px;
  bottom: -15px;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}
.process-steps li::after {
  background: var(--blue);
  transform: scaleY(var(--step-progress, 1));
  transform-origin: top;
}
.process-steps li:nth-last-child(-n + 2)::before,
.process-steps li:nth-last-child(-n + 2)::after {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover > img {
    transform: translate3d(0, var(--scroll-distance, 0px), 0) scale(1.24);
  }
  .gallery-item:nth-child(even):hover > img {
    transform: translate3d(0, calc(var(--scroll-distance, 0px) * -1), 0)
      scale(1.24);
  }
}
@media (prefers-reduced-motion: reduce) {
  .services .section-photo,
  .contact .section-photo,
  .process-panel > img,
  .case-number > span,
  .gallery-item > img,
  .gallery-item:hover > img,
  .gallery-item:nth-child(even) > img,
  .gallery-item:nth-child(even):hover > img {
    transform: none;
  }
  .portfolio-heading h2::after,
  .process-copy h2::after,
  .process-steps li::after {
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-pending {
    opacity: 1;
  }
  .hero-background {
    transform: scale(1.12);
  }
  .service-tile:hover,
  .case-preview > .product-media,
  .case-preview > .freight-diagram,
  .gallery-item:hover .gallery-copy,
  .gallery-item:hover .gallery-copy > svg,
  .case-preview:hover .product-mobile {
    transform: none;
  }
  .interaction-ripple {
    display: none;
  }
}