/* Immersive equipment gallery */
.home-gallery .solution-quicklinks {
  display: none;
}

.home-gallery #portfolio {
  padding-top: 75px;
}

.solution-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050f1b;
}

.solution-section:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(#75dfff07 1px, transparent 1px),
    linear-gradient(90deg, #75dfff07 1px, transparent 1px),
    radial-gradient(ellipse at 0 20%, #154d6655, transparent 55%);
  background-size:
    72px 72px,
    72px 72px,
    100% 100%;
  mask-image: linear-gradient(#000, transparent);
}

.solution-section h2 {
  max-width: 960px;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.45;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 11px;
  color: #75f4dc;
  letter-spacing: 3px;
  margin-bottom: 24px;
}

.section-kicker:before {
  content: "";
  width: 35px;
  height: 1px;
  background: #75f4dc;
  box-shadow: 0 0 15px #75f4dc;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 35px 0 28px;
  padding-block: 20px;
  border-block: 1px solid #9aefff20;
}

.gallery-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery-filter {
  border: 1px solid #95cddd24;
  color: #a7bfce;
  background: #0c2032;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 12px;
  transition: 0.3s;
}

.gallery-filter[aria-pressed="true"] {
  background: #a0ffe3;
  color: #062031;
  box-shadow: 0 0 25px #75ffe12b;
}

.gallery-total {
  font-size: 10px;
  letter-spacing: 2px;
  color: #8baabf;
  white-space: nowrap;
}

.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 0;
}

.portfolio-grid .portfolio-item,
.portfolio-grid .portfolio-item:first-child,
.portfolio-grid .portfolio-item:last-child {
  display: flex;
  flex-direction: column;
  grid-column: auto;
  min-height: 465px;
  border-radius: 18px;
  background: #0a1b2b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #a3f8ff35;
  box-shadow: 0 20px 60px #0004;
  transition:
    transform 0.5s,
    border-color 0.5s,
    box-shadow 0.5s;
}

.portfolio-grid .portfolio-item[hidden] {
  display: none;
}

.portfolio-grid .portfolio-item img,
.portfolio-grid .portfolio-item:first-child img,
.portfolio-grid .portfolio-item:last-child img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0.75;
  z-index: -2;
  transition:
    transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1),
    opacity 0.7s,
    filter 0.7s;
}

.portfolio-grid .portfolio-item:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    #04101b 3%,
    #061526ee 24%,
    #07172460 65%,
    #04121c20
  );
  transition: opacity 0.5s;
}

.portfolio-grid .portfolio-item:after {
  background:
    linear-gradient(115deg, transparent 25%, #9dfcff16 45%, transparent 65%),
    radial-gradient(
      350px circle at var(--mx, 50%) var(--my, 0%),
      #77ffe52a,
      transparent 65%
    );
  z-index: 1;
}

.portfolio-grid .portfolio-item:hover,
.portfolio-grid .portfolio-item:focus-within {
  border-color: #9affea;
  box-shadow:
    0 30px 70px #0008,
    0 0 35px #65ffdd20;
  transform: perspective(1000px) rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg)) translateY(-8px);
}

.portfolio-grid .portfolio-item:hover img,
.portfolio-grid .portfolio-item:focus-within img {
  transform: scale(1.1);
  opacity: 1;
  filter: saturate(1.25);
}

.portfolio-content {
  margin-top: auto;
  padding: 30px;
  z-index: 2;
  transition: transform 0.5s;
}

.portfolio-grid .portfolio-content h3,
.portfolio-grid .portfolio-item:first-child h3 {
  font-size: 24px;
  color: #f3ffff;
  margin-bottom: 12px;
}

.portfolio-content p {
  font-size: 13px;
  line-height: 1.8;
  color: #bfd2dd;
}

.equipment-tag {
  position: absolute;
  top: 23px;
  left: 23px;
  right: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 2px;
  color: #d5fff5;
  z-index: 2;
}

.equipment-tag span:first-child {
  background: #061725a8;
  padding: 9px 13px;
  border: 1px solid #b4ffec40;
  backdrop-filter: blur(12px);
  border-radius: 5px;
}

.equipment-tag span:last-child {
  font-size: 28px;
  font-weight: 300;
  text-shadow: 0 0 20px #5dffe5;
}

.equipment-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 22px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid #b0ffe635;
  color: #95ffe3;
  background: none;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.equipment-open:after {
  content: "↗";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #93ffe14a;
  border-radius: 50%;
  transition:
    transform 0.4s,
    background 0.4s;
}

.equipment-open:hover:after {
  transform: rotate(45deg);
  background: #70ffe125;
}

.home-gallery .portfolio-item:first-child {
  grid-column: span 2;
}

.home-gallery .portfolio-item:first-child .portfolio-content {
  max-width: 560px;
}

.home-gallery .portfolio-item:first-child h3 {
  font-size: 36px;
}

.home-gallery .portfolio-item:last-child {
  grid-column: auto;
}

.home-gallery .portfolio-grid .portfolio-item:first-child img {
  object-position: center 45%;
}

.portfolio-lab .portfolio-page-title {
  min-height: 600px;
  padding: 75px 6vw 70px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 90% 50%, #175d714d, transparent 60%), #06111e;
  border-bottom: 1px solid #91e7ff25;
}

.portfolio-page-title h1 {
  position: relative;
  z-index: 2;
  max-width: 750px !important;
  font-size: clamp(35px, 4.2vw, 64px);
  margin-top: 5px;
}

.portfolio-page-title p {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.lab-word {
  font-size: clamp(70px, 11vw, 160px);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 1.25;
  color: transparent;
  -webkit-text-stroke: 1px #a2f3ff60;
  text-shadow: 0 0 70px #69edff25;
  position: relative;
  z-index: 2;
}

.lab-enter {
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  color: #93ffe1;
  padding: 14px 0;
  border-bottom: 1px solid #70ffe1;
  position: relative;
  z-index: 2;
}

.lab-orbits {
  position: absolute;
  right: 5vw;
  top: 75px;
  width: 440px;
  height: 440px;
  display: grid;
  place-items: center;
  z-index: 0;
  opacity: 0.8;
  filter: drop-shadow(0 0 25px #53eacb30);
}

.lab-orbits i {
  position: absolute;
  inset: 0;
  border: 1px solid #7cffe960;
  border-radius: 50%;
  transform: rotateX(55deg) rotateZ(-25deg);
  animation: lab-orbit 18s linear infinite;
}

.lab-orbits i:nth-child(2) {
  inset: 35px;
  border-color: #70bfff70;
  animation-direction: reverse;
  transform: rotateY(55deg) rotateZ(25deg);
}

.lab-orbits i:nth-child(3) {
  inset: 70px;
  border-style: dashed;
  animation-duration: 30s;
}

.lab-orbits i:after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 13%;
  left: 13%;
  background: #a8ffdf;
  border-radius: 50%;
  box-shadow: 0 0 20px #70ffe1;
}

.lab-orbits > span {
  font-size: 90px;
  font-weight: 600;
  color: #99ffe3;
  letter-spacing: -8px;
  text-shadow: 0 0 45px #70ffe170;
}

.lab-orbits > span > span {
  display: block;
  font-size: 9px;
  letter-spacing: 3px;
  text-align: center;
}

.portfolio-lab .portfolio-item:nth-child(4n + 1) {
  grid-column: span 2;
}

.portfolio-lab .portfolio-item:nth-child(4n + 1) .portfolio-content {
  max-width: 550px;
}

.portfolio-lab .portfolio-item {
  min-height: 500px;
}

.portfolio-lab .portfolio-item:nth-child(3n + 2) {
  --accent: #a7a0ff;
}

.equipment-dialog {
  padding: 0;
  border: 1px solid #87ffe46b;
  border-radius: 24px;
  max-width: 1040px;
  width: calc(100% - 40px);
  max-height: 90svh;
  overflow: auto;
  background: #081b2b;
  color: #eaffff;
  box-shadow: 0 0 100px #56ffdf18;
}

.equipment-dialog::backdrop {
  background: #010812d9;
  backdrop-filter: blur(14px);
}

.dialog-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.dialog-photo {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.equipment-dialog.brand-image-dialog .dialog-photo {
  object-fit: cover;
  object-position: center;
}

.dialog-copy {
  padding: 60px 35px 35px;
  align-self: center;
}

.dialog-copy h2 {
  font-size: 30px;
}

.dialog-copy p {
  color: #b4cddc;
  line-height: 1.9;
}

.dialog-copy .image-disclosure {
  font-size: 11px;
  color: #8da6b7;
  margin-top: 30px;
}

.dialog-close {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 3;
  background: #051421db;
  color: white;
  border: 1px solid #9fffff60;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 23px;
}

.dialog-open {
  overflow: hidden;
}

@keyframes lab-orbit {
  to {
    transform: rotateX(55deg) rotateZ(335deg);
  }
}

@media (min-width: 1450px) {
  .portfolio-page-title {
    padding-left: max(6vw, calc((100vw - 1280px) / 2)) !important;
  }

  .lab-orbits {
    right: max(5vw, calc((100vw - 1330px) / 2));
  }
}

@media (max-width: 1000px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-gallery .portfolio-item:first-child,
  .portfolio-lab .portfolio-item:nth-child(4n + 1) {
    grid-column: auto;
  }

  .lab-orbits {
    right: -150px;
    opacity: 0.35;
  }

  .portfolio-page-title p {
    max-width: 520px;
  }

  .portfolio-grid .portfolio-content h3,
  .portfolio-grid .portfolio-item:first-child h3 {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .home-gallery #portfolio {
    padding-top: 45px;
  }

  .solution-section h2 {
    font-size: 32px;
  }

  .gallery-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .gallery-filter {
    padding: 9px 13px;
    font-size: 11px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-grid .portfolio-item,
  .portfolio-lab .portfolio-item {
    min-height: 445px;
  }

  .portfolio-content {
    padding: 25px;
  }

  .portfolio-lab .portfolio-page-title {
    min-height: 520px;
    padding: 45px 24px;
  }

  .lab-word {
    font-size: 80px;
    margin-block: 15px;
  }

  .portfolio-page-title h1 {
    font-size: 35px !important;
  }

  .lab-orbits {
    width: 320px;
    height: 320px;
    top: 90px;
    right: -190px;
    opacity: 0.3;
  }

  .dialog-layout {
    grid-template-columns: 1fr;
  }

  .dialog-photo {
    height: 240px;
    min-height: 0;
  }

  .dialog-copy {
    padding: 25px;
  }

  .dialog-copy h2 {
    font-size: 25px;
  }

  .equipment-dialog {
    width: calc(100% - 24px);
  }

  .section-kicker {
    font-size: 9px;
    letter-spacing: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-orbits i {
    animation: none;
  }

  .portfolio-grid .portfolio-item:hover,
  .portfolio-grid .portfolio-item:focus-within,
  .portfolio-grid .portfolio-item:hover img {
    transform: none;
  }
}

.equipment-heading {
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.45;
  letter-spacing: -1px;
  color: #eaffff;
  margin: 14px 0 25px;
}

.portfolio-page-title h1 {
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.5;
}

.portfolio-page-title h1,
.equipment-heading {
  word-break: normal;
  overflow-wrap: normal;
}

/* Keep decorative orbital artwork clear of interactive controls. */
.lab-orbits {
  pointer-events: none;
}

.lab-orbits .orbit-logo {
  position: relative;
  z-index: 1;
  width: 260px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 22px #70ffe14d);
}

/* Contain the button shine inside its own box, not the dialog viewport. */
.action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.equipment-dialog {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4b877f #081b2b;
}

.dialog-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.dialog-layout > * {
  min-width: 0;
}

.dialog-photo {
  display: block;
}

.dialog-copy {
  min-width: 0;
}

.dialog-copy .action {
  max-width: 100%;
}

.cnc-gimmick {
  margin: 20px 0 24px;
  border: 1px solid #75ffe12b;
  border-radius: 12px;
  background: linear-gradient(120deg, #0e2839, #071521);
  padding: 10px 12px 4px;
  overflow: hidden;
}

.cnc-gimmick[hidden] {
  display: none;
}

.cnc-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7ddbc9;
  font-size: 10px;
  letter-spacing: 2px;
}

.cnc-toggle {
  width: 28px;
  height: 28px;
  background: #123649;
  border: 1px solid #70ffe13b;
  border-radius: 50%;
  color: #b7ffeb;
  font-size: 12px;
  letter-spacing: 0;
}

.cnc-gimmick svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 125px;
}

.cnc-rotation {
  animation: lathe-spin 0.55s linear infinite;
}

.cnc-carriage {
  animation: lathe-feed 5s ease-in-out infinite;
}

.cnc-chips {
  animation: lathe-chips 0.7s ease-in-out infinite;
}

.equipment-dialog:not([open]) .cnc-gimmick *,
.cnc-gimmick.is-paused * {
  animation-play-state: paused !important;
}

@keyframes lathe-spin {
  to {
    transform: translateY(13px);
  }
}

@keyframes lathe-feed {
  0%,
  10% {
    transform: translateX(140px);
  }

  45%,
  55% {
    transform: translateX(0);
  }

  65% {
    transform: translate(0, 12px);
  }

  90% {
    transform: translate(140px, 12px);
  }

  100% {
    transform: translateX(140px);
  }
}

@keyframes lathe-chips {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.85;
  }
}

@media (max-width: 600px) {
  .dialog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialog-photo {
    height: 210px;
  }

  .dialog-copy {
    padding: 24px;
  }

  .cnc-gimmick {
    margin: 16px 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cnc-gimmick * {
    animation: none !important;
  }
}

/* Live CNC illustrations next to the homepage equipment heading. */
.equipment-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 45px;
  align-items: center;
}

.equipment-intro-copy {
  min-width: 0;
}

.home-gallery .equipment-intro .equipment-heading {
  font-size: clamp(30px, 3.25vw, 48px);
  line-height: 1.5;
  margin-bottom: 0;
}

.equipment-intro .section-kicker {
  font-size: 10px;
  letter-spacing: 1.7px;
  line-height: 1.8;
}

.home-machining {
  min-width: 0;
  border: 1px solid #6eeed230;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 70% 40%, #12435b70, transparent 75%), #071724b3;
  padding: 15px 20px 12px;
  box-shadow:
    0 0 50px #42d8db0a,
    inset 0 0 35px #49e9df05;
}

.machining-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8affe0;
  font-size: 9px;
  letter-spacing: 2px;
}

.machining-toggle {
  border: 1px solid #70ffe140;
  background: #143747;
  color: #afffed;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.machine-demo {
  margin-top: 8px;
}

.machine-demo + .machine-demo {
  border-top: 1px solid #8ffff018;
  padding-top: 12px;
}

.machine-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #b5d9e4;
}

.machine-label small {
  font-size: 10px;
  color: #7fa8b8;
  letter-spacing: 0;
}

.machine-demo svg {
  display: block;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.mill-head {
  animation: mill-feed 6s ease-in-out infinite;
}

.mill-flutes {
  animation: mill-spin 0.35s linear infinite;
}

.mill-chips {
  animation: lathe-chips 0.5s linear infinite;
}

.home-machining.is-paused * {
  animation-play-state: paused !important;
}

@keyframes mill-feed {
  0%,
  10% {
    transform: translateX(0);
  }

  48%,
  58% {
    transform: translateX(200px);
  }

  68% {
    transform: translate(200px, -14px);
  }

  90% {
    transform: translate(0, -14px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes mill-spin {
  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 1000px) {
  .equipment-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }

  .home-machining {
    max-width: 650px;
    width: 100%;
    justify-self: center;
  }

  .equipment-intro-copy .equipment-heading {
    font-size: clamp(30px, 5vw, 46px) !important;
  }

  .home-machining {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
  }

  .machining-top {
    grid-column: 1/-1;
  }

  .machine-demo + .machine-demo {
    border-top: 0;
    padding-top: 0;
    margin-top: 8px;
  }

  .machine-demo svg {
    height: 110px;
  }

  .machine-label {
    flex-wrap: wrap;
    gap: 4px;
  }

  .machine-label small {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .home-machining {
    display: block;
    padding: 14px 16px;
  }

  .machine-demo + .machine-demo {
    border-top: 1px solid #8ffff018;
    padding-top: 12px;
  }

  .machine-label {
    flex-wrap: nowrap;
  }

  .machine-label small {
    width: auto;
  }

  .machine-demo svg {
    height: 95px;
  }

  .equipment-intro {
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-machining * {
    animation: none !important;
  }
}

/* Portfolio: all six learning areas are expanded on the page. */
.portfolio-lab .portfolio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.portfolio-lab .portfolio-grid .portfolio-item,
.portfolio-lab .portfolio-grid .portfolio-item:first-child,
.portfolio-lab .portfolio-grid .portfolio-item:last-child,
.portfolio-lab .portfolio-grid .portfolio-item:nth-child(4n + 1) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-column: auto;
  min-height: 460px;
  isolation: isolate;
  transform: none;
}

.portfolio-lab .portfolio-grid .portfolio-item > img,
.portfolio-lab .portfolio-grid .portfolio-item:first-child > img,
.portfolio-lab .portfolio-grid .portfolio-item:last-child > img {
  position: relative;
  inset: auto;
  height: 100%;
  width: 100%;
  min-height: 460px;
  opacity: 1;
  z-index: 0;
  object-fit: cover;
  transform: none;
}

.portfolio-lab .portfolio-grid .portfolio-item:before,
.portfolio-lab .portfolio-grid .portfolio-item:after {
  display: none;
}

.portfolio-lab .portfolio-grid .portfolio-content,
.portfolio-lab
  .portfolio-grid
  .portfolio-item:nth-child(4n + 1)
  .portfolio-content {
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 55px 35px 35px;
  align-self: center;
}

.portfolio-lab .equipment-tag {
  left: calc(50% + 35px);
  right: 35px;
  top: 19px;
  pointer-events: none;
}

.portfolio-lab .equipment-tag span:first-child {
  border: 0;
  background: none;
  padding: 0;
  color: #8affe0;
}

.portfolio-lab .equipment-tag span:last-child {
  font-size: 16px;
  color: #7196a7;
}

.portfolio-lab .portfolio-grid .portfolio-content h3 {
  font-size: 27px;
}

.portfolio-lab .portfolio-content .action {
  font-size: 12px;
  margin-top: 20px;
  max-width: 100%;
}

.inline-machine {
  margin-top: 22px;
  border: 1px solid #6eeed230;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 80% 20%, #16495c60, transparent 70%), #081d2b;
  padding: 10px 12px 3px;
  overflow: hidden;
}

.inline-machine-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8bdecf;
  font-size: 9px;
  letter-spacing: 1.7px;
}

.inline-machine svg {
  display: block;
  width: 100%;
  height: 125px;
  overflow: hidden;
}

.inline-machine.is-paused *,
.inline-machine.is-offscreen * {
  animation-play-state: paused !important;
}

.demo-signal {
  animation: signal-flow 1.5s linear infinite;
}

.demo-belt {
  animation: signal-flow 1s linear infinite;
}

.demo-led {
  animation: led-pulse 2s ease-in-out infinite;
}

.demo-wave {
  stroke-dasharray: 140;
  animation: wave-draw 3s linear infinite;
}

.demo-robot {
  transform-origin: 87px 88px;
  animation: robot-pick 6s ease-in-out infinite;
}

.robot-gripper {
  transform-origin: 199px 78px;
  animation: gripper-cycle 6s ease-in-out infinite;
}

.robot-infeed-package {
  animation: robot-infeed-package-cycle 6s linear infinite;
}

.robot-held-package {
  opacity: 0;
  animation: robot-held-package-cycle 6s linear infinite;
}

.robot-outfeed-package {
  opacity: 0;
  animation: robot-outfeed-package-cycle 6s linear infinite;
}

.sensor-lens {
  animation: sensor-lens-pulse 1.3s ease-in-out infinite;
}

.sensor-scan {
  animation: sensor-scan 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #75ffe1);
}

.sensor-package {
  animation: sensor-package-flow 5s linear infinite;
}

.demo-beam {
  animation: led-pulse 2s ease-in-out infinite;
}

.demo-package {
  animation: package-flow 5s linear infinite;
}

.demo-lift {
  animation: warehouse-lift 5s ease-in-out infinite;
}

.maintenance-spindle {
  transform-origin: 222px 70px;
  animation: maintenance-spin 1.25s linear infinite;
}

.maintenance-tool {
  animation: maintenance-probe 2.8s ease-in-out infinite;
}

.maintenance-scan {
  animation: maintenance-scan 2.4s ease-in-out infinite;
}

@keyframes signal-flow {
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes led-pulse {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@keyframes wave-draw {
  0% {
    stroke-dashoffset: 140;
  }

  75%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes robot-pick {
  0%, 32%, 72%, 100% {
    transform: rotate(0deg);
  }

  43%, 58% {
    transform: rotate(-18deg);
  }
}

@keyframes gripper-cycle {
  0%, 28%, 74%, 100% {
    transform: scaleY(1);
  }

  34%, 68% {
    transform: scaleY(.68);
  }
}

@keyframes robot-infeed-package-cycle {
  0%, 10% {
    translate: 0 0;
    opacity: 1;
  }

  26%, 33% {
    translate: -66px 0;
    opacity: 1;
  }

  35%, 100% {
    translate: -66px 0;
    opacity: 0;
  }
}

@keyframes robot-held-package-cycle {
  0%, 32%, 72%, 100% {
    opacity: 0;
  }

  35%, 69% {
    opacity: 1;
  }
}

@keyframes robot-outfeed-package-cycle {
  0%, 69% {
    translate: 0 0;
    opacity: 0;
  }

  72% {
    translate: 0 0;
    opacity: 1;
  }

  100% {
    translate: 100px 0;
    opacity: 1;
  }
}

@keyframes sensor-lens-pulse {
  0%,
  100% {
    opacity: 0.45;
    filter: drop-shadow(0 0 2px #78ffe0);
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px #78ffe0);
  }
}

@keyframes sensor-scan {
  0%,
  100% {
    transform: translateY(-30px);
    opacity: 0.25;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

@keyframes sensor-package-flow {
  from {
    translate: -20px 0;
  }

  to {
    translate: 95px 0;
  }
}

.contact-box::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, #55b7c7 15%, #55b7c7 85%, transparent);
  transform: translateX(-50%);
  opacity: .65;
  z-index: 0;
}

.contact-box a {
  position: relative;
  z-index: 1;
}

.contact-box .line {
  color: #fff;
  background: #06c755;
  border-color: #50ef91;
  box-shadow: 0 8px 22px #06c75542;
}

.contact-box .line:hover,
.contact-box .line:focus-visible {
  background: #08b94f;
  box-shadow: 0 10px 28px #06c75566;
}

@keyframes package-flow {
  from {
    translate: 0 0;
  }

  to {
    translate: 100px 0;
  }
}

@keyframes warehouse-lift {
  0%,
  15%,
  100% {
    translate: 0 0;
  }

  45%,
  65% {
    translate: 0 -48px;
  }
}

@keyframes maintenance-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes maintenance-probe {
  0%,
  100% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(-5px);
  }
}

@keyframes maintenance-scan {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.2;
  }

  50% {
    transform: translateX(174px);
    opacity: 0.9;
  }
}

@media (max-width: 700px) {
  .portfolio-lab .portfolio-grid .portfolio-item,
  .portfolio-lab .portfolio-grid .portfolio-item:first-child,
  .portfolio-lab .portfolio-grid .portfolio-item:last-child,
  .portfolio-lab .portfolio-grid .portfolio-item:nth-child(4n + 1) {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .portfolio-lab .portfolio-grid .portfolio-item > img,
  .portfolio-lab .portfolio-grid .portfolio-item:first-child > img,
  .portfolio-lab .portfolio-grid .portfolio-item:last-child > img {
    height: 230px;
    min-height: 0;
  }

  .portfolio-lab .portfolio-grid .portfolio-content,
  .portfolio-lab
    .portfolio-grid
    .portfolio-item:nth-child(4n + 1)
    .portfolio-content {
    padding: 25px;
  }

  .portfolio-lab .equipment-tag {
    left: 20px;
    right: 20px;
    top: 18px;
  }

  .portfolio-lab .equipment-tag span:first-child {
    padding: 8px 10px;
    background: #061725cf;
    border-radius: 5px;
  }

  .portfolio-lab .equipment-tag span:last-child {
    color: #caffed;
  }

  .inline-machine svg {
    height: 115px;
  }

  .portfolio-lab .portfolio-grid .portfolio-content h3 {
    font-size: 23px;
  }
}

.portfolio-lab .portfolio-grid .portfolio-item[hidden] {
  display: none;
}

/* Product image slideshows */
.portfolio-grid .portfolio-item > .portfolio-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.portfolio-grid .portfolio-item .portfolio-media > img,
.portfolio-grid .portfolio-item:first-child .portfolio-media > img,
.portfolio-grid .portfolio-item:last-child .portfolio-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035) translateX(5%);
  transition:
    opacity 1.55s ease,
    transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.7s ease;
  z-index: 0;
}

.portfolio-grid .portfolio-item .portfolio-media > img.is-active {
  opacity: 0.78;
  transform: scale(1.065) translateX(0);
  z-index: 2;
}

.portfolio-grid .portfolio-item .portfolio-media > img.is-leaving {
  opacity: 0;
  transform: scale(1.065) translateX(-5%);
  z-index: 1;
}

.portfolio-grid .portfolio-item:hover .portfolio-media > img:not(.is-active),
.portfolio-grid .portfolio-item:focus-within .portfolio-media > img:not(.is-active) {
  opacity: 0;
}

.portfolio-grid .portfolio-item:hover .portfolio-media > img.is-active,
.portfolio-grid .portfolio-item:focus-within .portfolio-media > img.is-active {
  opacity: 1;
  transform: scale(1.09) translateX(0);
  filter: saturate(1.18);
}

.portfolio-slide-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  display: flex;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #9affea30;
  border-radius: 999px;
  background: #03111bc7;
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

.portfolio-slide-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #b8d7dd80;
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.portfolio-slide-dot[aria-pressed="true"] {
  width: 22px;
  background: #83ffe4;
  box-shadow: 0 0 12px #6effe0a8;
}

.portfolio-lab .portfolio-grid .portfolio-item > .portfolio-media {
  position: relative;
  inset: auto;
  width: 100%;
  height: 250px;
  min-height: 0;
  flex: 0 0 250px;
  z-index: 0;
}

.portfolio-lab .portfolio-grid .portfolio-item .portfolio-media > img,
.portfolio-lab .portfolio-grid .portfolio-item:first-child .portfolio-media > img,
.portfolio-lab .portfolio-grid .portfolio-item:last-child .portfolio-media > img {
  min-height: 0;
  opacity: 0;
}

.portfolio-lab .portfolio-grid .portfolio-item .portfolio-media > img.is-active {
  opacity: 1;
}

.portfolio-lab .portfolio-slide-dots {
  bottom: 14px;
}

@media (max-width: 700px) {
  .portfolio-lab .portfolio-grid .portfolio-item > .portfolio-media {
    height: 230px;
    flex-basis: 230px;
  }

  .portfolio-slide-dots {
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-grid .portfolio-item .portfolio-media > img {
    transition: opacity 0.3s ease;
    transform: none !important;
  }
}

/* Discourage casual downloading and dragging of visual assets. */
img,
picture,
.portfolio-media,
.dialog-photo {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.content-protection-notice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100000;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 1px solid #7affe0;
  border-radius: 999px;
  background: #061725f2;
  color: #dffff8;
  box-shadow: 0 14px 45px #000a, 0 0 24px #64ffdc24;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.content-protection-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media print {
  img,
  picture,
  .portfolio-media,
  .dialog-photo {
    visibility: hidden !important;
  }
}

/* Welcome experience */
body.welcome-open {
  overflow: hidden;
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 18%, #1a9fc22e, transparent 34%),
    radial-gradient(circle at 86% 80%, #49eab425, transparent 34%),
    #020c15ee;
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.welcome-overlay.is-visible {
  opacity: 1;
}

.welcome-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

.welcome-panel {
  position: relative;
  width: min(680px, 100%);
  padding: 52px 58px 42px;
  overflow: hidden;
  border: 1px solid #74ffe072;
  border-radius: 28px;
  background:
    linear-gradient(145deg, #0b2635ed, #061522f5 62%),
    #071824;
  box-shadow:
    0 36px 100px #000c,
    0 0 55px #62ffdc1c,
    inset 0 1px 0 #c8fff129;
  text-align: center;
  transform: translateY(28px) scale(0.965);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-overlay.is-visible .welcome-panel {
  transform: translateY(0) scale(1);
}

.welcome-grid {
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image:
    linear-gradient(#75ffe31c 1px, transparent 1px),
    linear-gradient(90deg, #75ffe31c 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  pointer-events: none;
}

.welcome-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #75ffe2, #51bfff, transparent);
  box-shadow: 0 0 24px #70ffe4;
}

.welcome-panel::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -155px;
  bottom: -155px;
  border: 1px solid #6affe044;
  border-radius: 50%;
  box-shadow: 0 0 0 34px #59ddc20a, 0 0 0 70px #59ddc20a;
  pointer-events: none;
}

.welcome-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #86ffe15c;
  border-radius: 50%;
  background: #071824c9;
  color: #dffff7;
  font: 300 24px/1 sans-serif;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.welcome-close:hover,
.welcome-close:focus-visible {
  border-color: #8affe2;
  background: #103347;
  transform: rotate(8deg);
}

.welcome-logo-wrap {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-height: 78px;
  margin-bottom: 12px;
}

.welcome-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 18% -22%;
  border-radius: 50%;
  background: #57e6d52c;
  filter: blur(24px);
}

.welcome-logo {
  position: relative;
  width: min(230px, 64vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px #0009);
}

.welcome-eyebrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 15px;
  color: #77ffe1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.welcome-eyebrow span {
  width: 28px;
  height: 1px;
  background: #78ffe3;
  box-shadow: 0 0 12px #78ffe3;
}

.welcome-panel h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #f3fffc;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.welcome-lead {
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
  color: #a3ffe9;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
}

.welcome-body {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 15px auto 28px;
  color: #b7cbd4;
  font-size: 15px;
  line-height: 1.85;
}

.welcome-enter {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 10px 0 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #91ffe5, #5fd6ee);
  color: #032031;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 35px #45dccc2e;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.welcome-enter:hover,
.welcome-enter:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px #45dccb52;
}

.welcome-enter-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #06283b;
  color: #8fffe5;
  font-size: 17px;
}

.welcome-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  color: #6e94a2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.welcome-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #75ffe0;
  box-shadow: 0 0 13px #75ffe0;
  animation: welcome-pulse 1.8s ease-in-out infinite;
}

.welcome-ambient {
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid #6affe025;
  border-radius: 50%;
  pointer-events: none;
  animation: welcome-orbit 18s linear infinite;
}

.welcome-ambient-one {
  top: -180px;
  left: -100px;
}

.welcome-ambient-two {
  right: -150px;
  bottom: -210px;
  width: 480px;
  height: 480px;
  animation-direction: reverse;
  animation-duration: 24s;
}

@keyframes welcome-pulse {
  50% { opacity: 0.35; transform: scale(0.75); }
}

@keyframes welcome-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .welcome-overlay {
    padding: 16px;
  }

  .welcome-panel {
    padding: 44px 22px 30px;
    border-radius: 22px;
  }

  .welcome-body {
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-overlay,
  .welcome-panel,
  .welcome-status-dot,
  .welcome-ambient {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inline-machine * {
    animation: none !important;
  }
}

/* Two equipment cards per row, with their demos visible. */
.portfolio-lab .portfolio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.portfolio-lab .portfolio-grid .portfolio-item,
.portfolio-lab .portfolio-grid .portfolio-item:first-child,
.portfolio-lab .portfolio-grid .portfolio-item:last-child,
.portfolio-lab .portfolio-grid .portfolio-item:nth-child(4n + 1) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  grid-column: auto;
}

.portfolio-lab .portfolio-grid .portfolio-item > img,
.portfolio-lab .portfolio-grid .portfolio-item:first-child > img,
.portfolio-lab .portfolio-grid .portfolio-item:last-child > img {
  width: 100%;
  height: 250px;
  min-height: 0;
  flex-shrink: 0;
  object-fit: cover;
}

.portfolio-lab .portfolio-grid .portfolio-content,
.portfolio-lab
  .portfolio-grid
  .portfolio-item:nth-child(4n + 1)
  .portfolio-content {
  padding: 28px;
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-lab .portfolio-content .inline-machine {
  margin-top: auto;
}

.portfolio-lab .portfolio-content p {
  margin-bottom: 22px;
}

.portfolio-lab .portfolio-content .action {
  align-self: flex-start;
}

.portfolio-lab .equipment-tag {
  left: 20px;
  right: 20px;
  top: 18px;
}

.portfolio-lab .equipment-tag span:first-child {
  padding: 8px 10px;
  background: #061725dc;
  border-radius: 5px;
}

.portfolio-lab .equipment-tag span:last-child {
  color: #caffed;
  text-shadow: 0 2px 10px #000;
}

@media (max-width: 700px) {
  .portfolio-lab .portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .portfolio-lab .portfolio-grid .portfolio-item > img,
  .portfolio-lab .portfolio-grid .portfolio-item:first-child > img,
  .portfolio-lab .portfolio-grid .portfolio-item:last-child > img {
    height: 230px;
  }

  .portfolio-lab .portfolio-grid .portfolio-content,
  .portfolio-lab
    .portfolio-grid
    .portfolio-item:nth-child(4n + 1)
    .portfolio-content {
    padding: 25px;
  }
}

.portfolio-lab .portfolio-grid .portfolio-item[hidden] {
  display: none;
}

.product-logo-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.product-logo-banner .banner-copy {
  width: 100% !important;
  text-align: center !important;
}

.product-logo-banner .banner-copy h2 {
  width: 100% !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
}

.product-logo-list {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.product-logo-list img {
  width: 220px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
/* Animated welcome light show */
.welcome-panel { background: radial-gradient(260px circle at var(--light-x,50%) var(--light-y,20%), #56ffe21c, transparent 80%), linear-gradient(145deg,#0b2635f5,#061522fa 62%); }
.welcome-rings { position:absolute; top:18px; left:50%; width:250px; height:180px; transform:translateX(-50%); pointer-events:none; opacity:.5; }
.welcome-rings i { position:absolute; inset:0; border:1px solid #70ffe036; border-radius:50%; transform:rotateX(65deg); animation:welcome-ring-spin 12s linear infinite; }
.welcome-rings i:nth-child(2) { inset:15px; border-style:dashed; border-color:#59cfff80; animation-direction:reverse; animation-duration:18s; }
.welcome-rings i:nth-child(3) { inset:30px; border-top:2px solid #9affe9; border-bottom:2px solid #5bbaff; border-left-color:transparent; border-right-color:transparent; animation-duration:7s; }
.welcome-scan { position:absolute; inset:-100% 0 auto; height:100%; background:linear-gradient(transparent 93%,#75ffe019 98%,#94ffed70 100%); animation:welcome-scan-pass 7s ease-in-out infinite; pointer-events:none; }
.welcome-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.welcome-particles i { position:absolute; left:var(--x); bottom:-10px; width:3px; height:3px; border-radius:50%; background:#91ffe6; box-shadow:0 0 9px #55ffdf; animation:welcome-float calc(6s + var(--n)*.3s) linear infinite; animation-delay:calc(var(--n)*-.8s); opacity:0; }
.welcome-overlay.is-visible .welcome-logo-wrap { animation:welcome-reveal .9s .1s both, welcome-logo-hover 5s 1s ease-in-out infinite; }
.welcome-overlay.is-visible .welcome-eyebrow { animation:welcome-reveal .8s .25s both; }
.welcome-overlay.is-visible h2 { animation:welcome-reveal .9s .4s both; text-shadow:0 0 34px #75ffe02e; }
.welcome-overlay.is-visible .welcome-lead { animation:welcome-reveal .8s .55s both; }
.welcome-overlay.is-visible .welcome-body { animation:welcome-reveal .8s .7s both; }
.welcome-overlay.is-visible .welcome-enter { animation:welcome-reveal .8s .85s both; overflow:hidden; }
.welcome-enter::after { content:''; position:absolute; inset:-100% auto -100% -80%; width:40%; background:linear-gradient(90deg,transparent,#ffffff80,transparent); transform:skewX(-22deg); animation:welcome-button-shine 5s 2s infinite; pointer-events:none; }
.welcome-overlay.is-closing .welcome-panel { transform:translateY(-15px) scale(1.04); filter:blur(7px); transition:transform .5s ease,filter .5s ease; }
@keyframes welcome-ring-spin { to { transform:rotateX(65deg) rotate(360deg); } }
@keyframes welcome-scan-pass { 0%,15% { transform:translateY(0); } 70%,100% { transform:translateY(210%); } }
@keyframes welcome-float { 0% { transform:translateY(0); opacity:0; } 15%,75% { opacity:.65; } 100% { transform:translate(25px,-650px); opacity:0; } }
@keyframes welcome-reveal { from { opacity:0; transform:translateY(20px); filter:blur(6px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes welcome-logo-hover { 50% { transform:translateY(-5px); } }
@keyframes welcome-button-shine { 0%,60% { left:-80%; } 100% { left:160%; } }
@media(prefers-reduced-motion:reduce) { .welcome-overlay *, .welcome-overlay *::after { animation:none!important; transition:none!important; } }
/* Robot delivers the Motion logo, releases it, and retracts. */
.welcome-logo-wrap { display:grid; width:100%; height:150px; margin-bottom:8px; }
.welcome-robot { position:absolute; width:520px; max-width:none; height:220px; left:50%; top:-48px; transform:translateX(-50%); overflow:visible; z-index:3; pointer-events:none; }
.welcome-overlay.is-visible .welcome-logo-wrap { animation:none; }
.welcome-overlay.is-visible .welcome-logo { animation:motion-logo-delivery 3.6s cubic-bezier(.45,0,.2,1) both; }
.welcome-overlay.is-visible .welcome-robot-body { animation:motion-robot-delivery 3.6s cubic-bezier(.45,0,.2,1) both; }
.welcome-overlay.is-visible .welcome-grip-left { animation:motion-grip-left 3.6s ease both; }
.welcome-overlay.is-visible .welcome-grip-right { animation:motion-grip-right 3.6s ease both; }
.welcome-landing-glow { position:absolute; bottom:14px; left:15%; width:70%; height:2px; background:linear-gradient(90deg,transparent,#8affe1,transparent); box-shadow:0 0 22px #6affdf; opacity:0; }
.welcome-overlay.is-visible .welcome-landing-glow { animation:motion-landing 3.6s ease both; }
.welcome-overlay.is-visible .welcome-eyebrow { animation-delay:2.1s; }
.welcome-overlay.is-visible h2 { animation-delay:2.25s; }
.welcome-overlay.is-visible .welcome-lead { animation-delay:2.4s; }
.welcome-overlay.is-visible .welcome-body { animation-delay:2.55s; }
.welcome-overlay.is-visible .welcome-enter { animation-delay:2.7s; }
@keyframes motion-logo-delivery { 0%,8% { opacity:0; transform:translate(155px,-78px) rotate(9deg) scale(.8); } 16% { opacity:1; } 54%,100% { opacity:1; transform:translate(0,0) rotate(0) scale(1); } }
@keyframes motion-robot-delivery { 0%,8% { opacity:0; transform:translate(155px,-78px); } 16% { opacity:1; } 54%,66% { opacity:1; transform:translate(0,0); } 82% { opacity:1; transform:translate(30px,-55px); } 100% { opacity:0; transform:translate(190px,-90px); } }
@keyframes motion-grip-left { 0%,57% { transform:translateX(0); } 66%,100% { transform:translateX(-16px); } }
@keyframes motion-grip-right { 0%,57% { transform:translateX(0); } 66%,100% { transform:translateX(16px); } }
@keyframes motion-landing { 0%,51% { opacity:0; transform:scaleX(.3); } 60% { opacity:1; transform:scaleX(1.15); } 78%,100% { opacity:.55; transform:scaleX(1); } }
@media(max-width:600px) { .welcome-robot { width:430px; height:182px; top:-10px; } .welcome-logo-wrap { height:145px; } }
@media(prefers-reduced-motion:reduce) { .welcome-robot { display:none; } .welcome-overlay.is-visible .welcome-logo { animation:none; } .welcome-landing-glow { opacity:.5; } }
/* Random classic / robot welcome variants. */
.welcome-classic .welcome-robot, .welcome-classic .welcome-landing-glow { display:none; }
.welcome-classic .welcome-logo-wrap { display:inline-grid; width:auto; height:auto; min-height:78px; margin-bottom:12px; }
.welcome-classic.is-visible .welcome-logo-wrap { animation:welcome-reveal .9s .1s both, welcome-logo-hover 5s 1s ease-in-out infinite; }
.welcome-classic.is-visible .welcome-logo { animation:none; }
.welcome-classic.is-visible .welcome-eyebrow { animation-delay:.25s; }
.welcome-classic.is-visible h2 { animation-delay:.4s; }
.welcome-classic.is-visible .welcome-lead { animation-delay:.55s; }
.welcome-classic.is-visible .welcome-body { animation-delay:.7s; }
.welcome-classic.is-visible .welcome-enter { animation-delay:.85s; }
@media(prefers-reduced-motion:reduce) { .welcome-classic.is-visible .welcome-logo-wrap { animation:none!important; } }
.welcome-robot-theme.is-visible .welcome-logo { animation:none; }
.welcome-robot-theme .welcome-robot { top:-48px; }
@media(max-width:600px) { .welcome-robot-theme .welcome-robot { top:-23px; } }
.welcome-classic .welcome-logo-wrap { display:grid; width:100%; height:180px; }
.welcome-classic.is-visible .welcome-logo-wrap { animation:none; }
.welcome-classic.is-visible .welcome-logo { position:absolute; left:50%; top:44px; animation:mill-logo-finish 5.5s both; }
.welcome-milling { position:absolute; inset:0; width:100%; animation:mill-stage-finish 5.5s both; }
.welcome-milling svg { width:100%; height:180px; overflow:visible; }
.mill-head { animation:mill-traverse 4.2s .3s both; }
.mill-cut-mask { animation:mill-engrave 3.3s .7s linear both; }
.mill-sparks { animation:mill-chip-flash .12s infinite alternate; }
.mill-flutes { animation:mill-chip-flash .07s infinite alternate; }
.welcome-robot-theme .welcome-robot { filter:drop-shadow(4px 7px 4px #0008); }
.welcome-classic.is-visible .welcome-eyebrow { animation-delay:4.4s; }
.welcome-classic.is-visible h2 { animation-delay:4.55s; }
.welcome-classic.is-visible .welcome-lead { animation-delay:4.7s; }
.welcome-classic.is-visible .welcome-body { animation-delay:4.85s; }
.welcome-classic.is-visible .welcome-enter { animation-delay:5s; }
@keyframes mill-traverse { 0% { transform:translate(80px,-45px); } 10% { transform:translate(80px,52px); } 85% { transform:translate(440px,52px); } 100% { transform:translate(440px,-70px); } }
@keyframes mill-engrave { to { width:380px; } }
@keyframes mill-chip-flash { to { opacity:.15; } }
@keyframes mill-stage-finish { 0%,78% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.94); visibility:hidden; } }
@keyframes mill-logo-finish { 0%,80% { opacity:0; transform:translateX(-50%) scale(.9); } 100% { opacity:1; transform:translateX(-50%) scale(1); } }
@media(prefers-reduced-motion:reduce) { .welcome-milling { display:none; } .welcome-classic.is-visible .welcome-logo { opacity:1; transform:translateX(-50%); } }
/* Keep the actual logo engraved on the plate after the milling pass. */
.welcome-classic .welcome-milling { animation:none; opacity:1; visibility:visible; }
.welcome-classic.is-visible .welcome-logo { display:none; }
@media(prefers-reduced-motion:reduce) { .welcome-classic .welcome-milling { display:block; } .mill-head { display:none; } .mill-cut-mask { width:380px; } }
body.contact-popup-open { overflow:hidden; }
.contact-popup { padding:0; border:0; border-radius:28px; background:transparent; color:#e9fffa; width:min(660px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.contact-popup::backdrop { background:#020c15e8; backdrop-filter:blur(14px); }
.contact-popup .welcome-panel { width:100%; box-sizing:border-box; padding:42px 36px 32px; transform:none; animation:welcome-reveal .5s both; }
.contact-popup-logo { position:relative; width:180px; height:auto; margin-bottom:18px; }
.contact-popup .welcome-panel h2 { font-size:36px; }
.contact-popup .welcome-body { margin-bottom:18px; }
.contact-popup-product { position:relative; color:#85ead8; font-size:13px; }
.contact-popup-links { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
.contact-popup-links a { display:flex; flex-direction:column; gap:7px; padding:17px; border:1px solid #79ffe033; border-radius:14px; background:#12304488; text-decoration:none; color:#e4fff7; transition:background .25s,transform .25s,border-color .25s; min-width:0; }
.contact-popup-links a:hover { background:#194557; border-color:#80ffe1; transform:translateY(-3px); }
.contact-popup-links span { font-size:12px; color:#82d7cf; }
.contact-popup-links strong { font-size:14px; overflow-wrap:anywhere; }
.contact-popup-links .contact-popup-map { grid-column:1/-1; text-align:center; background:linear-gradient(100deg,#91ffe5,#5fd6ee); color:#06283b; }
@media(max-width:520px) { .contact-popup .welcome-panel { padding:45px 20px 24px; } .contact-popup-links { grid-template-columns:1fr; } }
/* Contact entrance shares the welcome light effects. */
.contact-popup-effects { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.contact-popup .welcome-rings { top:4px; }
.contact-popup[open] .contact-popup-logo { animation:welcome-reveal .7s .08s both, welcome-logo-hover 5s 1s ease-in-out infinite; }
.contact-popup[open] .welcome-eyebrow { animation:welcome-reveal .65s .17s both; }
.contact-popup[open] h2 { animation:welcome-reveal .7s .25s both; }
.contact-popup[open] .welcome-body { animation:welcome-reveal .7s .33s both; }
.contact-popup[open] .contact-popup-product { animation:welcome-reveal .7s .4s both; }
.contact-popup[open] .contact-popup-links a { animation:contact-card-enter .65s both; }
.contact-popup[open] .contact-popup-links a:nth-child(1) { animation-delay:.42s; }
.contact-popup[open] .contact-popup-links a:nth-child(2) { animation-delay:.5s; }
.contact-popup[open] .contact-popup-links a:nth-child(3) { animation-delay:.58s; }
.contact-popup[open] .contact-popup-links a:nth-child(4) { animation-delay:.66s; }
.contact-popup[open] .contact-popup-links a:nth-child(5) { animation-delay:.74s; }
@keyframes contact-card-enter { from { opacity:0; translate:0 16px; filter:blur(4px); } to { opacity:1; translate:0 0; filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { .contact-popup *, .contact-popup *::after { animation:none!important; transition:none!important; } }
.product-gallery-open {position:absolute;inset:0;z-index:3;border:0;background:transparent;cursor:zoom-in;color:#a1ffe9;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;}
.product-gallery-open span {display:grid;place-items:center;width:34px;height:34px;border:1px solid #80ffe177;border-radius:50%;background:#061725cf;font-size:24px;}
.portfolio-slide-dots{z-index:5;}
body.image-viewer-open{overflow:hidden;}
.product-image-viewer{width:min(1100px,calc(100% - 28px));max-height:calc(100dvh - 28px);box-sizing:border-box;padding:24px;border:1px solid #7affe177;border-radius:22px;background:#061725;color:#e6fff8;overflow:auto;}
.product-image-viewer::backdrop{background:#020b14ed;backdrop-filter:blur(14px);}
.product-image-viewer h2{font-size:20px;margin:0 45px 20px 0;}
.viewer-close{position:absolute;right:14px;top:12px;border:1px solid #8afade88;border-radius:50%;width:36px;height:36px;background:#123447;color:#dffff5;font-size:25px;cursor:pointer;}
.viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#020b12;border-radius:12px;overflow:hidden;}
.viewer-stage img{width:100%;height:min(60vh,650px);object-fit:contain;}
.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:42px;height:52px;border:1px solid #8afade88;border-radius:12px;background:#061725dd;color:#92ffe3;font-size:36px;cursor:pointer;}
.viewer-prev{left:10px}.viewer-next{right:10px}
.viewer-thumbs{display:flex;justify-content:center;gap:10px;margin-top:16px;}
.viewer-thumbs button{padding:3px;border:1px solid #466777;background:transparent;border-radius:8px;cursor:pointer;}
.viewer-thumbs button[aria-pressed=true]{border-color:#80ffe1;box-shadow:0 0 12px #80ffe133;}
.viewer-thumbs img{width:82px;height:52px;object-fit:cover;border-radius:5px;}
.viewer-count{text-align:center;font-size:13px;color:#8dd8ce;margin:12px 0 0;}
@media(max-width:600px){.product-image-viewer{padding:16px}.viewer-thumbs img{width:60px;height:42px}.product-image-viewer h2{font-size:16px}}
.new-scan-line{animation:added-scan 3s ease-in-out infinite alternate;}
.new-status-pulse{animation:added-pulse .8s ease-in-out infinite alternate;}
.new-print-head{animation:added-print 2.6s ease-in-out infinite alternate;}
.new-drone-hover{animation:added-hover 3s ease-in-out infinite;}
.new-weld-sparks{transform-origin:229px 108px;animation:added-sparks .17s infinite alternate;}
.new-humanoid-idle{animation:added-hover 3.2s ease-in-out infinite;}
.new-humanoid-arm{transform-origin:222px 51px;animation:added-wave 2s ease-in-out infinite alternate;}
@keyframes added-scan{to{transform:translateX(72px)}}
@keyframes added-pulse{to{opacity:.35}}
@keyframes added-print{0%{transform:translateX(-30px)}100%{transform:translateX(35px)}}
@keyframes added-hover{50%{transform:translateY(-5px)}}
@keyframes added-sparks{to{opacity:.3;transform:scale(.65)}}
@keyframes added-wave{to{transform:rotate(-24deg)}}
.inline-machine.is-paused *, .inline-machine.is-offscreen *{animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){.inline-machine *{animation:none!important;}}