/* Mechanical: add this page's custom section styles here. Shared catalogue styles load first. */


/*section 1 mechanical start here*/


/* =========================================================
   MECHANICAL PRODUCTS HERO
========================================================= */

.mechanical-hero {
  --mechanical-pointer-x: 50%;
  --mechanical-pointer-y: 42%;

  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;
  isolation: isolate;

  color: var(--white);

  background:
    #090b10;
}


/* =========================================================
   MEDIA
========================================================= */

.mechanical-hero
  .mechanical-hero-media {
  position: absolute;
  z-index: -7;

  inset: 0;

  overflow: hidden;
}


.mechanical-hero
  .mechanical-hero-media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.58)
    contrast(1.12)
    brightness(0.66);

  transform:
    translate3d(
      var(--mechanical-image-x, 0px),
      var(--mechanical-image-y, 0px),
      0
    )
    scale(1.07);

  transition:
    transform 900ms
    cubic-bezier(0.2, 0.7, 0.2, 1);

  animation:
    mechanical-image-breathe
    20s ease-in-out
    infinite alternate;
}


/* =========================================================
   OVERLAY
========================================================= */

.mechanical-hero
  .mechanical-hero-overlay {
  position: absolute;
  z-index: -6;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(31, 24, 48, 0.3),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      rgba(7, 5, 13, 0.94),
      rgba(15, 11, 23, 0.58) 50%,
      rgba(7, 5, 13, 0.94)
    ),
    linear-gradient(
      0deg,
      rgba(7, 5, 13, 0.99),
      rgba(7, 5, 13, 0.14) 45%,
      rgba(7, 5, 13, 0.76)
    );

  pointer-events: none;
}


/* =========================================================
   BLUEPRINT
========================================================= */

.mechanical-hero
  .mechanical-hero-blueprint {
  position: absolute;
  z-index: -5;

  inset: 0;

  opacity: 0.17;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.13) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.13) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(155, 77, 255, 0.16) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(155, 77, 255, 0.16) 1px,
      transparent 1px
    );

  background-size:
    80px 80px,
    80px 80px,
    400px 400px,
    400px 400px;

  pointer-events: none;
}


/* =========================================================
   METAL LIGHT
========================================================= */

.mechanical-hero
  .mechanical-hero-metal-light {
  position: absolute;
  z-index: -4;

  top: 0;
  bottom: 0;
  left: -25%;

  width: 34%;

  background:
    linear-gradient(
      108deg,
      transparent,
      rgba(255, 122, 0, 0.09),
      rgba(255, 255, 255, 0.045),
      transparent
    );

  transform:
    skewX(-15deg);

  animation:
    mechanical-metal-sweep
    11s ease-in-out infinite;

  pointer-events: none;
}


/* =========================================================
   POINTER LIGHT
========================================================= */

.mechanical-hero
  .mechanical-hero-pointer {
  position: absolute;
  z-index: -2;

  top:
    var(--mechanical-pointer-y);

  left:
    var(--mechanical-pointer-x);

  width:
    min(42vw, 520px);

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 122, 0, 0.12),
      rgba(155, 77, 255, 0.045) 42%,
      transparent 70%
    );

  transform:
    translate(-50%, -50%);

  transition:
    top 450ms ease,
    left 450ms ease;

  pointer-events: none;
}


/* =========================================================
   GEARS
========================================================= */

.mechanical-hero
  .mechanical-hero-gear {
  position: absolute;
  z-index: -2;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  pointer-events: none;
}


.mechanical-hero
  .mechanical-hero-gear::before,
.mechanical-hero
  .mechanical-hero-gear::after,
.mechanical-hero
  .mechanical-hero-gear i {
  position: absolute;

  border-radius: 50%;

  content: "";
}


.mechanical-hero
  .mechanical-hero-gear::before {
  inset: 15px;

  border:
    1px dashed
    rgba(155, 77, 255, 0.27);
}


.mechanical-hero
  .mechanical-hero-gear::after {
  inset: 38%;

  border:
    1px solid
    rgba(255, 122, 0, 0.42);

  box-shadow:
    0 0 24px
    rgba(255, 122, 0, 0.12);
}


.mechanical-hero
  .mechanical-hero-gear i {
  top: 50%;
  left: 50%;

  width: 115%;
  height: 7px;

  border-radius: 2px;

  background:
    linear-gradient(
      90deg,
      transparent 2%,
      rgba(255, 255, 255, 0.18) 3%,
      rgba(255, 255, 255, 0.18) 8%,
      transparent 9%,
      transparent 91%,
      rgba(255, 255, 255, 0.18) 92%,
      rgba(255, 255, 255, 0.18) 97%,
      transparent 98%
    );

  transform:
    translate(-50%, -50%);
}


.mechanical-hero
  .mechanical-hero-gear i:nth-child(2) {
  transform:
    translate(-50%, -50%)
    rotate(60deg);
}


.mechanical-hero
  .mechanical-hero-gear i:nth-child(3) {
  transform:
    translate(-50%, -50%)
    rotate(120deg);
}


.mechanical-hero
  .mechanical-hero-gear--large {
  top: 12%;
  right: 5%;

  width: 220px;

  aspect-ratio: 1;

  animation:
    mechanical-gear-rotate
    34s linear infinite;
}


.mechanical-hero
  .mechanical-hero-gear--small {
  bottom: 20%;
  left: 7%;

  width: 108px;

  aspect-ratio: 1;

  animation:
    mechanical-gear-rotate
    24s linear
    infinite reverse;
}


/* =========================================================
   TECHNICAL CODES
========================================================= */

.mechanical-hero
  .mechanical-hero-code {
  position: absolute;
  z-index: 3;

  top: 32px;

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.18em;
}


.mechanical-hero
  .mechanical-hero-code--left {
  left:
    clamp(20px, 3vw, 44px);
}


.mechanical-hero
  .mechanical-hero-code--right {
  right:
    clamp(20px, 3vw, 44px);
}


/* =========================================================
   CONTENT
========================================================= */

.mechanical-hero
  .mechanical-hero-inner {
  position: relative;
  z-index: 3;

  display: grid;

  flex: 1 1 auto;

  width:
    min(100% - 40px, 1220px);

  min-height: 0;

  margin-inline: auto;

  padding:
    clamp(96px, 11vh, 135px)
    0
    clamp(66px, 8vh, 96px);

  place-items: center;
}


/* =========================================================
   COPY
========================================================= */

.mechanical-hero
  .mechanical-hero-copy {
  width:
    min(100%, 900px);

  text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.mechanical-hero
  .mechanical-hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.78);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.mechanical-hero
  .mechanical-hero-eyebrow-icon {
  position: relative;

  display: grid;

  width: 24px;

  aspect-ratio: 1;

  place-items: center;

  border:
    1px solid
    rgba(255, 122, 0, 0.42);

  border-radius: 50%;

  background:
    rgba(255, 122, 0, 0.08);
}


.mechanical-hero
  .mechanical-hero-eyebrow-icon::before,
.mechanical-hero
  .mechanical-hero-eyebrow-icon::after {
  position: absolute;

  border:
    1px solid
    rgba(255, 122, 0, 0.22);

  border-radius: 50%;

  animation:
    mechanical-signal
    2.4s ease-out infinite;

  content: "";
}


.mechanical-hero
  .mechanical-hero-eyebrow-icon::before {
  inset: -5px;
}


.mechanical-hero
  .mechanical-hero-eyebrow-icon::after {
  inset: -10px;

  animation-delay:
    0.8s;
}


.mechanical-hero
  .mechanical-hero-eyebrow-icon i {
  width: 5px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 13px
    var(--orange);
}


/* =========================================================
   MAIN TITLE
   OUR 34–39PX STANDARD
========================================================= */

.mechanical-hero
  .mechanical-hero-title {
  max-width: 820px;

  margin:
    22px
    auto
    18px;

  color:
    var(--white);

  font-size:
    clamp(34px, 3vw, 39px);

  font-weight: 800;

  line-height: 1.04;
  letter-spacing: -0.04em;

  text-wrap: balance;
}


.mechanical-hero
  .mechanical-hero-title span {
  display: block;

  padding-bottom:
    0.04em;

  color:
    var(--purple);

  background:
    linear-gradient(
      100deg,
      #d5d8e4 0%,
      var(--purple-dark) 34%,
      var(--purple) 63%,
      var(--orange) 100%
    );

  background-clip: text;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(
      0 10px 30px
      rgba(155, 77, 255, 0.16)
    );
}


/* =========================================================
   DESCRIPTION
========================================================= */

.mechanical-hero
  .mechanical-hero-description {
  max-width: 790px;

  margin:
    0
    auto;

  color:
    rgba(235, 232, 244, 0.72);

  font-size:
    clamp(14px, 1vw, 16px);

  line-height: 1.72;

  text-wrap: balance;
}


/* =========================================================
   ASSURANCE
========================================================= */

.mechanical-hero
  .mechanical-hero-assurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap:
    12px
    28px;

  margin-top: 30px;
}


.mechanical-hero
  .mechanical-hero-assurance span {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.mechanical-hero
  .mechanical-hero-assurance i {
  width: 5px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 10px
    rgba(255, 122, 0, 0.7);
}


/* =========================================================
   PRODUCT SPECTRUM
========================================================= */

.mechanical-hero
  .mechanical-hero-spectrum {
  position: relative;
  z-index: 5;

  flex: 0 0 auto;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);

  background:
    rgba(8, 5, 17, 0.94);

  backdrop-filter:
    blur(18px);
}


.mechanical-hero
  .mechanical-hero-spectrum::before {
  position: absolute;

  top: -1px;
  left: -25%;

  width: 27%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--orange),
      var(--purple),
      transparent
    );

  animation:
    mechanical-spectrum-line
    7s linear infinite;

  content: "";

  pointer-events: none;
}


/* =========================================================
   SPECTRUM GRID
========================================================= */

.mechanical-hero
  .mechanical-hero-spectrum-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width:
    min(100%, 1220px);

  margin-inline: auto;
}


/* =========================================================
   SPECTRUM ITEM
========================================================= */

.mechanical-hero
  .mechanical-hero-spectrum-item {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 0;
  min-height: 82px;

  padding:
    14px
    16px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.08);

  transition:
    background-color 260ms ease;
}


.mechanical-hero
  .mechanical-hero-spectrum-item:last-child {
  border-right: 0;
}


.mechanical-hero
  .mechanical-hero-spectrum-item:hover {
  background:
    rgba(113, 55, 214, 0.08);
}


.mechanical-hero
  .mechanical-hero-spectrum-item span {
  color:
    var(--orange);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.08em;
}


.mechanical-hero
  .mechanical-hero-spectrum-item strong {
  color:
    rgba(255, 255, 255, 0.84);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.35;
}


.mechanical-hero
  .mechanical-hero-spectrum-item::after {
  position: absolute;

  right: 0;
  bottom: 0;

  width: 20px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--purple),
      var(--orange)
    );

  opacity: 0.7;

  content: "";
}


/* =========================================================
   JS REVEAL
========================================================= */

.mechanical-hero.mechanical-hero--js
  [data-mechanical-reveal] {
  opacity: 0;

  transform:
    translateY(24px)
    scale(0.99);

  transition:
    opacity 760ms ease,
    transform 760ms
      cubic-bezier(
        0.2,
        0.7,
        0.2,
        1
      );
}


.mechanical-hero.mechanical-hero--js
  [data-mechanical-reveal].mechanical-hero-is-visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

  .mechanical-hero
    .mechanical-hero-inner {
    padding-inline: 10px;
  }


  .mechanical-hero
    .mechanical-hero-title {
    font-size:
      clamp(34px, 4vw, 38px);
  }


  .mechanical-hero
    .mechanical-hero-description {
    max-width: 720px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .mechanical-hero {
    min-height: auto;
  }


  .mechanical-hero
    .mechanical-hero-pointer,
  .mechanical-hero
    .mechanical-hero-code,
  .mechanical-hero
    .mechanical-hero-gear--small {
    display: none;
  }


  .mechanical-hero
    .mechanical-hero-media img {
    object-position:
      58% center;
  }


  .mechanical-hero
    .mechanical-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(7, 5, 13, 0.86),
        rgba(10, 7, 17, 0.95) 50%,
        rgba(7, 5, 13, 0.99)
      ),
      radial-gradient(
        circle at 50% 30%,
        rgba(155, 77, 255, 0.12),
        transparent 52%
      );
  }


  .mechanical-hero
    .mechanical-hero-gear--large {
    top: 8%;
    right: -75px;

    width: 180px;
  }


  .mechanical-hero
    .mechanical-hero-inner {
    width:
      min(100% - 30px, 620px);

    padding:
      96px
      0
      66px;
  }


  .mechanical-hero
    .mechanical-hero-title {
    margin-top: 20px;

    font-size:
      clamp(34px, 8.5vw, 37px);

    line-height: 1.05;
  }


  .mechanical-hero
    .mechanical-hero-description {
    font-size: 14px;

    line-height: 1.68;
  }


  .mechanical-hero
    .mechanical-hero-assurance {
    gap:
      10px
      18px;

    margin-top: 26px;
  }


  .mechanical-hero
    .mechanical-hero-spectrum-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
  }


  .mechanical-hero
    .mechanical-hero-spectrum-item {
    min-height: 68px;

    justify-content: flex-start;

    padding:
      13px
      18px;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .mechanical-hero
    .mechanical-hero-spectrum-item:nth-child(2n) {
    border-right: 0;
  }


  .mechanical-hero
    .mechanical-hero-spectrum-item:nth-child(n + 3) {
    border-bottom: 0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 440px) {

  .mechanical-hero
    .mechanical-hero-eyebrow {
    font-size: 9px;

    letter-spacing: 0.14em;
  }


  .mechanical-hero
    .mechanical-hero-title {
    font-size: 34px;
  }


  .mechanical-hero
    .mechanical-hero-assurance {
    display: grid;

    justify-content: center;
  }


  .mechanical-hero
    .mechanical-hero-spectrum-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .mechanical-hero
    .mechanical-hero-spectrum-item,
  .mechanical-hero
    .mechanical-hero-spectrum-item:nth-child(2n),
  .mechanical-hero
    .mechanical-hero-spectrum-item:nth-child(n + 3) {
    min-height: 58px;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .mechanical-hero
    .mechanical-hero-spectrum-item:last-child {
    border-bottom: 0;
  }

}


/* =========================================================
   TOUCH
========================================================= */

@media (hover: none), (pointer: coarse) {

  .mechanical-hero
    .mechanical-hero-spectrum-item:hover {
    background: transparent;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mechanical-hero
    .mechanical-hero-media img,
  .mechanical-hero
    .mechanical-hero-metal-light,
  .mechanical-hero
    .mechanical-hero-gear,
  .mechanical-hero
    .mechanical-hero-eyebrow-icon::before,
  .mechanical-hero
    .mechanical-hero-eyebrow-icon::after,
  .mechanical-hero
    .mechanical-hero-spectrum::before {
    animation: none;
  }


  .mechanical-hero.mechanical-hero--js
    [data-mechanical-reveal] {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .mechanical-hero
    .mechanical-hero-media img {
    transition: none;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes mechanical-image-breathe {

  from {
    transform:
      translate3d(
        var(--mechanical-image-x, 0px),
        var(--mechanical-image-y, 0px),
        0
      )
      scale(1.07);
  }

  to {
    transform:
      translate3d(
        var(--mechanical-image-x, 0px),
        var(--mechanical-image-y, 0px),
        0
      )
      scale(1.12);
  }

}


@keyframes mechanical-metal-sweep {

  0%,
  14% {
    opacity: 0;

    transform:
      translateX(-35%)
      skewX(-15deg);
  }

  40%,
  64% {
    opacity: 1;
  }

  88%,
  100% {
    opacity: 0;

    transform:
      translateX(430%)
      skewX(-15deg);
  }

}


@keyframes mechanical-gear-rotate {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes mechanical-signal {

  from {
    opacity: 0.7;

    transform:
      scale(0.55);
  }

  to {
    opacity: 0;

    transform:
      scale(1.45);
  }

}


@keyframes mechanical-spectrum-line {

  from {
    left: -30%;
  }

  to {
    left: 105%;
  }

}


/*section 1 mechanical end here*/