/* The demo PCB and dashboard sit in the sculpted light of the opening scene.
   The gradient ground is what remains when WebGL is unavailable. */
.landing-hero {
  --lp-hero-nav-offset: var(--lp-nav-height);
  --lp-hero-ground: var(--business-footer-dark);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: calc(-1 * var(--lp-hero-nav-offset));
  background:
    radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--lp-current) 24%, transparent), transparent 55%),
    var(--lp-hero-ground);
}

.landing-hero__field {
  /* The shader opens on the hero's own deep ground, not the page-wide abyss. */
  --lp-field-ground: var(--lp-hero-ground);

  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.landing-hero__field.is-live {
  opacity: 1;
}

/* Resolve the studio field onto the continuous page ground. The opening of the
   page gradient stays on this same colour from the hero into the workspace chapter. */
.landing-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: -1;
  height: 16rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--lp-ground) 0%, transparent),
    var(--lp-ground)
  );
}

.landing-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 52rem;
  padding-top: calc(var(--lp-hero-nav-offset) + 3rem);
  padding-bottom: 1.75rem;
}

.landing-hero__copy {
  text-align: center;
}

.landing-hero .landing__headline {
  font-size: clamp(2.7rem, 6.8vw, 6rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.055em;
}

.landing-hero__headline-line {
  display: block;
}

.landing-hero__headline-soft {
  color: color-mix(in srgb, var(--lp-shoal) 24%, white);
}

.landing-hero__intro {
  max-width: 36rem;
  margin: 1.75rem auto 0;
  color: var(--lp-mute);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 2rem;
}

.landing-hero .landing-btn--light {
  min-height: 3.25rem;
  padding-inline: 1.35rem;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 1px 0 rgb(255 255 255 / 40%), 0 8px 32px rgb(0 0 0 / 16%);
}

.landing-hero__contact {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  font-size: .875rem;
}

.landing-hero__contact i {
  font-size: .7rem;
  transition: transform 200ms ease;
}

/* The HTML devices are visible until WebGL has drawn all textures. Keeping
   the stage sized independently makes loading, context loss and resizing stable. */
.landing .landing-hero__devices {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 72rem;
  aspect-ratio: 1.8;
  margin: 2.5rem auto 0;
  container-type: inline-size;
}

.landing-hero__devices-canvas,
.landing-hero__devices-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.landing-hero__devices-canvas {
  display: block;
  opacity: 0;
  transition: opacity var(--lp-dur-base) var(--lp-ease-enter);
}

/* The preview returns at once when the canvas loses its context; the delay
   that hides it after its fade belongs to the live state below.

   It is also held back for the first moment: the scripts run after parsing,
   and on a slow machine that is after first paint, so a browser about to
   render the scene could paint the flat preview first. hero-devices.js hides
   the preview for good before the hold ends; without scripting or WebGL it
   simply arrives as the intro settles. */
.landing-hero__devices-fallback {
  perspective: 120cqw;
  transition: opacity var(--lp-dur-base) var(--lp-ease-enter), visibility 0s;
  animation: landing-preview-hold 0s linear var(--lp-dur-slow) backwards;
}

@keyframes landing-preview-hold {
  from {
    visibility: hidden;
    opacity: 0;
  }
}

.landing-hero__devices.is-live .landing-hero__devices-canvas {
  opacity: 1;
}

/* With WebGL and a Worker available the devices are 3D from their first frame:
   hero-devices.js hides the preview while it prepares the scene, and the canvas
   fades in over the empty stage. The preview only returns if that fails or runs
   long — as a fade, never a cut, and it leaves the render tree once transparent. */
.landing-hero__devices.is-preparing .landing-hero__devices-fallback,
.landing-hero__devices.is-live .landing-hero__devices-fallback {
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s, var(--lp-dur-base);
}

.landing-hero__devices-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.landing-hero__monitor {
  --lp-monitor-metal: #8593a6;
  --lp-monitor-edge: #c0cad9;
  --lp-monitor-shell: #151d2b;

  position: absolute;
  top: 8%;
  right: 3%;
  width: 64%;
  transform: rotateX(2deg) rotateY(9deg) rotateZ(-2deg);
  transform-style: preserve-3d;
}

.landing-hero__monitor-frame {
  position: relative;
  z-index: 1;
  padding: 1.05cqw .9cqw 1.7cqw;
  border: 1px solid var(--lp-monitor-edge);
  border-radius: 1.1cqw;
  background: var(--lp-panel-sunken);
  box-shadow:
    inset 0 0 0 .12cqw var(--lp-monitor-shell),
    .35cqw .2cqw 0 var(--lp-monitor-metal),
    .65cqw .3cqw 0 var(--lp-monitor-shell),
    0 2cqw 5cqw color-mix(in srgb, var(--lp-panel-sunken) 35%, transparent);
}

.landing-hero__monitor-screen {
  overflow: hidden;
  border: 1px solid #050914;
  border-radius: .25cqw;
  background: #050914;
}

.landing-hero__monitor-camera {
  position: absolute;
  top: .35cqw;
  left: calc(50% - .2cqw);
  width: .4cqw;
  height: .4cqw;
  border: .1cqw solid var(--lp-monitor-shell);
  border-radius: 50%;
  background: color-mix(in srgb, var(--lp-cyan) 25%, var(--lp-panel-sunken));
}

.landing-hero__monitor-chin {
  position: absolute;
  inset: auto .45cqw .3cqw;
  height: 1cqw;
  border-radius: 0 0 .5cqw .5cqw;
  background: linear-gradient(100deg, var(--lp-monitor-shell), var(--lp-panel-sunken));
}

.landing-hero__monitor-chin::after {
  content: "";
  position: absolute;
  top: .45cqw;
  right: 1.8cqw;
  width: .22cqw;
  height: .12cqw;
  border-radius: 50%;
  background: var(--lp-cyan);
}

.landing-hero__monitor-stand {
  width: 5.2cqw;
  height: 8cqw;
  margin: -.2cqw auto 0;
  border-inline: 1px solid var(--lp-monitor-edge);
  border-radius: 0 0 .4cqw .4cqw;
  background: linear-gradient(100deg, var(--lp-monitor-metal), var(--lp-monitor-edge) 42%, var(--lp-monitor-metal));
  box-shadow: .4cqw 0 0 var(--lp-monitor-shell);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 100% 100%, 1.3cqw 2.4cqw;
  mask-position: center, center 65%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

.landing-hero__monitor-foot {
  width: 21cqw;
  height: 3.8cqw;
  margin: -1.1cqw auto 0;
  border: 1px solid var(--lp-monitor-edge);
  border-radius: 50% 50% 12% 12% / 24% 24% 18% 18%;
  background: linear-gradient(165deg, var(--lp-monitor-metal), var(--lp-monitor-edge));
  box-shadow: 0 .35cqw 0 var(--lp-monitor-metal), 0 .55cqw 0 var(--lp-monitor-shell);
}

.landing-hero__monitor-screen img,
.landing-hero__pcb img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-hero__pcb {
  position: absolute;
  bottom: 11%;
  left: 3%;
  width: 44%;
  transform: rotateX(22deg) rotateY(-16deg) rotateZ(-9deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 2cqw 2cqw color-mix(in srgb, var(--lp-panel-sunken) 70%, transparent));
}

.landing-hero__pcb img {
  border-radius: 1.5cqw;
  box-shadow: .1cqw .3cqw 0 color-mix(in srgb, var(--lp-green) 22%, var(--lp-panel-sunken));
}

.landing-hero__phone {
  position: absolute;
  right: 6.5%;
  bottom: 7%;
  width: 17%;
  transform: rotateX(3deg) rotateY(-13deg) rotateZ(-7deg);
  transform-style: preserve-3d;
}

.landing-hero__connection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.landing-hero__connection-line {
  stroke: var(--lp-cyan);
  stroke-width: 1.25;
  opacity: .65;
}

.landing-hero__connection-glow {
  stroke: var(--lp-harbour);
  stroke-width: 12;
  opacity: .12;
}

.landing-hero__connection circle {
  fill: var(--lp-cyan);
  transition: opacity var(--lp-dur-accent) var(--lp-ease-enter) calc(var(--lp-dur-base) + var(--lp-dur-arrival));
}

/* The connection strokes itself in once the devices stand. The paths carry
   pathLength="1", so a dash of 1 is the whole line; while the scene is prepared
   it is kept undrawn, and when the devices have settled it draws in from the
   board to the screens, the node last. */
.landing-hero__connection path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--lp-dur-arrival) var(--lp-ease-emphasis) var(--lp-dur-base);
}

.landing-hero__devices.is-preparing .landing-hero__connection path {
  stroke-dashoffset: 1;
  transition: none;
}

.landing-hero__devices.is-preparing .landing-hero__connection circle {
  opacity: 0;
  transition: none;
}

/* A single quiet bridge from the hardware scene to the product chapters. */
.landing-hero__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: .75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--lp-line);
}

.landing-hero__signature {
  margin: 0;
  color: var(--lp-ink);
  font-size: .8125rem;
  line-height: 1.65;
}

.landing-hero__signature span {
  display: block;
  color: var(--lp-mute);
}

.landing-hero__explore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 2.25rem;
}

.landing-hero__explore a {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  color: var(--lp-mute);
  font-size: .8125rem;
  transition: color 180ms ease;
}

.landing-hero__explore i {
  font-size: .75rem;
}

.landing-hero__explore i:last-child {
  margin-left: .375rem;
  font-size: .625rem;
  transition: transform 180ms ease;
}

.landing-hero__contact:hover i {
  transform: translateX(4px);
}

.landing-hero__explore a:hover {
  color: var(--lp-ink-strong);
}

.landing-hero__explore a:hover i:last-child {
  transform: translateY(3px);
}

.landing-hero__explore a:focus-visible {
  outline: 2px solid var(--lp-cyan);
  outline-offset: 5px;
  border-radius: .25rem;
}

@media (width >= 56rem) {
  .landing-hero {
    background:
      radial-gradient(ellipse at 72% 48%, color-mix(in srgb, var(--lp-current) 42%, transparent), transparent 58%),
      var(--lp-hero-ground);
  }

  .landing-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
    min-height: 100svh;
    max-width: 108rem;
    padding-top: calc(var(--lp-hero-nav-offset) + clamp(2rem, 4vh, 3.5rem));
    padding-bottom: 2rem;
  }

  .landing-hero__copy {
    min-width: 0;
    text-align: left;
  }

  .landing-hero .landing__headline {
    font-size: clamp(2.5rem, 4.3vw, 5rem);
  }

  .landing-hero__intro {
    max-width: 34rem;
    margin-inline: 0;
    font-size: clamp(1.0625rem, 1.1vw, 1.1875rem);
  }

  .landing-hero .landing__desktop-break {
    display: none;
  }

  .landing-hero__actions {
    justify-content: flex-start;
    gap: 1rem 1.5rem;
  }

  .landing .landing-hero__devices {
    min-width: 0;
    margin: 0;
  }

  .landing-hero__caption {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

@media (width < 36rem) {
  .landing-hero__inner {
    min-height: auto;
    padding-top: calc(var(--lp-hero-nav-offset) + 3.5rem);
  }

  .landing .landing-hero__devices {
    width: calc(100% + 2 * var(--lp-gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--lp-gutter));
    margin-top: 2rem;
  }

  .landing-hero__actions {
    gap: 1rem;
  }

  .landing-hero__caption {
    gap: 1rem;
    padding-block: 1.25rem 0;
  }

  .landing-hero__signature {
    font-size: .75rem;
  }

  .landing-hero__signature span {
    display: inline;
    margin-left: .3rem;
  }

  .landing-hero__explore {
    width: 100%;
    justify-content: space-between;
    gap: .25rem .5rem;
  }

  .landing-hero__explore a {
    gap: .4rem;
    font-size: .6875rem;
  }

  .landing-hero__explore i:first-child {
    display: none;
  }

  .landing-hero__explore i:last-child {
    margin-left: 0;
    font-size: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__field,
  .landing-hero__contact i,
  .landing-hero__explore a,
  .landing-hero__explore i {
    transition: none;
  }
}