/* A self-contained, transparent right-column scene. The SVG draws the printer;
   this layer keeps the editable FMRC mark, accent and motion in sync in the
   customer hero and the Admin/Staff Home preview.
   Enhanced: product build animations, pop-out effects, completion states. */
.fmrc-hero-scene {
  --hero-scene-accent: #e6c46c;
  --hero-scene-scale: 1;
  position: relative;
  display: block;
  isolation: isolate;
  contain: layout style paint;
  width: min(100%, 660px);
  aspect-ratio: 960 / 760;
  flex: 0 0 auto;
  transform: scale(var(--hero-scene-scale));
  transform-origin: center;
}

.fmrc-hero-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 15% 10% 8%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--hero-scene-accent) 36%, transparent) 0%,
    rgba(255, 255, 255, 0.07) 35%,
    transparent 70%
  );
  filter: blur(28px);
  pointer-events: none;
}

.hero-printer-art,
.hero-printer-mechanism {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hero-printer-badge {
  position: absolute;
  z-index: 2;
  /* Static fallback matches the generated print face. The live SVG supplies
     these values from the very same projection used by the machine. */
  left: var(--hero-logo-x, 46.558333%);
  top: var(--hero-logo-y, 56.373684%);
  width: var(--hero-logo-width, 3.020833%);
  height: var(--hero-logo-height, 3.815789%);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) var(--hero-logo-perspective, matrix(.86, .4, 0, 1, 0, 0));
  pointer-events: none;
  will-change: transform;
}

.hero-printer-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  animation: none;
}

.fmrc-hero-scene[data-mechanism="ready"] .hero-printer-art {
  visibility: hidden;
}

/* The frame stays grounded. The shared controller moves the carriage and
   flexes its feed tube together in the same isometric coordinate system. */
.hero-printer-mechanism .hp-deposition-path {
  stroke-linecap: round;
}

@keyframes fmrcPrinterFan {
  to { transform: rotate(360deg); }
}

.fmrc-hero-scene[data-motion="on"] .hp-fan {
  transform-box: fill-box;
  transform-origin: center;
  animation: fmrcPrinterFan 1.8s linear infinite;
}

.fmrc-hero-scene[data-motion="on"][data-print-state="complete"] .hp-fan,
.fmrc-hero-scene[data-motion="on"][data-print-state="resetting"] .hp-fan,
.fmrc-hero-scene[data-motion="on"][data-print-state="popout"] .hp-fan {
  animation-play-state: paused;
}

.fmrc-hero-scene[data-running="false"] .hp-fan {
  animation-play-state: paused;
}

/* ── Monitor screen color transitions ──────────────────────────────── */
.hp-screen-background, .hp-screen-header, .hp-screen-fill, .hp-screen-progress {
  transition: fill 240ms ease;
}

/* Printing state — warm amber progress */
.fmrc-hero-scene[data-print-state="printing"] .hp-screen-fill {
  fill: #e1be7d;
}

/* Complete state — turn green */
.fmrc-hero-scene[data-print-state="complete"] .hp-monitor-progress .hp-screen-background {
  fill: #164b39;
}
.fmrc-hero-scene[data-print-state="complete"] .hp-monitor-progress .hp-screen-header {
  fill: #24684c;
}
.fmrc-hero-scene[data-print-state="complete"] .hp-screen-fill {
  fill: #80e3a5;
}
.fmrc-hero-scene[data-print-state="complete"] .hp-screen-progress {
  fill: #e4ffec;
}

/* Pop-out state — flash white-green */
.fmrc-hero-scene[data-print-state="popout"] .hp-monitor-progress .hp-screen-background {
  fill: #1a5a42;
}
.fmrc-hero-scene[data-print-state="popout"] .hp-monitor-progress .hp-screen-header {
  fill: #2a7858;
}
.fmrc-hero-scene[data-print-state="popout"] .hp-screen-fill {
  fill: #a0f0c0;
}
.fmrc-hero-scene[data-print-state="popout"] .hp-screen-progress {
  fill: #d0ffe0;
}

/* Resetting state — dim */
.fmrc-hero-scene[data-print-state="resetting"] .hp-monitor-progress .hp-screen-background {
  fill: #1e1828;
}
.fmrc-hero-scene[data-print-state="resetting"] .hp-monitor-progress .hp-screen-header {
  fill: #352030;
}

/* ── Product build animation group styling ─────────────────────────── */
.hp-product-build {
  pointer-events: none;
}

/* Only the visual column changes on desktop. The title, actions, SDGs and
   configurable hero background keep their existing implementation. */
.hero-section .hero-content-right {
  min-width: 0;
  justify-content: flex-end;
}

.hero-section .hero-content-right .fmrc-hero-scene {
  /* Flex alignment keeps the printer level with the headline block. */
  width: clamp(310px, 34vw, 500px);
}

/* When a short heading has no editor-defined line breaks, it can project
   across the artwork column. Lower only the artwork at compact desktop widths;
   the heading keeps its original typography and line-break behavior. */
@media (min-width: 901px) and (max-width: 1100px) and (min-height: 521px),
       (min-width: 1101px) and (max-width: 1900px) {
  .hero-section .hero-container:has(.hero-title:not(:empty)):not(:has(.hero-title br))
    .hero-content-right .fmrc-hero-scene {
    top: clamp(78px, 9vw, 135px);
  }
}

#heroScenePreview {
  width: min(100%, 420px);
  margin-inline: auto;
}

/* Phones, including wide landscape iPhones, place the full 3D scene above the
   headline. This supersedes older short-height rules that reverse their order. */
@media (max-width: 900px), (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .hero-section .hero-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-section .hero-content-right {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    margin: 0 auto clamp(8px, 2vw, 16px);
  }

  .hero-section .hero-content-left {
    order: 2;
    width: 100%;
    align-items: center;
  }

  .hero-section .hero-content-right .fmrc-hero-scene {
    width: min(78vw, 390px);
  }

  .hero-section .hero-sdg-strip {
    position: static;
  }
}

@media (max-width: 480px) {
  .hero-section .hero-content-right .fmrc-hero-scene {
    width: min(78vw, 315px);
  }
}

@media (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .hero-section .hero-content-right .fmrc-hero-scene {
    width: min(37vw, 205px);
  }
  .hero-section .hero-content-right { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fmrc-hero-scene[data-motion="on"] .hp-fan { animation: none; }
  .hp-screen-background, .hp-screen-header, .hp-screen-fill, .hp-screen-progress { transition: none; }
}

/* Chamber task lights follow the same print lifecycle as the monitor. */
.hp-worklight-beams, .hp-worklight-lens { color: #80d8f4; }
.hp-worklight-beams { pointer-events: none; }
.fmrc-hero-scene[data-print-state="printing"][data-running="true"] .hp-worklight-beams {
  animation: hp-task-light 3.2s ease-in-out infinite;
}
.fmrc-hero-scene:is([data-print-state="complete"], [data-print-state="popout"]) :is(.hp-worklight-beams,.hp-worklight-lens) { color: #88e5ac; }
.fmrc-hero-scene[data-print-state="resetting"] .hp-worklight-beams { opacity: 0; }
.fmrc-hero-scene[data-print-state="resetting"] .hp-worklight-lens { color: #56616b; }
@keyframes hp-task-light { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 .fmrc-hero-scene .hp-worklight-beams { animation: none !important; }
}

/* Home phone headline: generous type, centered alignment and natural
   wrapping for both short copy and the administrator's custom line breaks. */
@media (max-width: 900px), (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .hero-section .hero-content-left {
    align-items: center;
    text-align: center;
  }
  .hero-section .hero-title {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-bottom: 24px;
    font-size: clamp(25px, 8vw, 36px) !important;
    line-height: 1.1;
    letter-spacing: -.025em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .hero-section .hero-title .hero-research-line {
    display: inline;
    white-space: normal;
  }
  .hero-section .hero-buttons {
    align-self: center;
    margin-inline: 0;
  }
}

@media (max-width: 900px), (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .hero-section .hero-title .hero-service-line { white-space: nowrap; }
}
/* A centered closing band connects the supported goals to the next section. */
.hero-section:has(.hero-community) {
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 48px);
  min-height: calc(100svh - var(--ux-header-h, 76px));
  padding-bottom: clamp(24px, 4vw, 44px);
}
.hero-section:has(.hero-community) .hero-container { margin-bottom: 0; }
.hero-section .hero-community {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.hero-section .hero-community .hero-sdg-strip {
  position: static;
  width: 100%;
  margin: 0;
  --sdg-gap: clamp(8px, 1.6vw, 14px);
}
.hero-community .hero-sdg-rows { display: flex; flex-flow: row wrap; justify-content: center; gap: var(--sdg-gap); }
.hero-community .hero-sdg-row { display: contents; }
.hero-community .hero-sdg-item { flex: 0 0 clamp(44px, 7vw, 64px); width: auto; max-width: none; }
.hero-community .hero-sdg-caption { text-align: center; margin-top: 12px; text-wrap: balance; }
.hero-section .hero-community .scroll-indicator {
  position: static;
  transform: none;
  animation: none;
  flex-direction: column;
  margin: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 24%);
}
.hero-community .scroll-icon { margin: 0; }
.hero-community .scroll-chevron {
  color: #bfc1c5;
  animation: heroChevronFlow 1.8s ease-in-out infinite;
}
.hero-community .scroll-chevron--second { animation-delay: 180ms; }
@keyframes heroChevronFlow {
  0%, 100% { color: #bfc1c5; transform: translateY(-1px); }
  50% { color: #fff; transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-community .scroll-chevron { animation: none; color: #fff; }
}
@media (max-width: 480px) {
  .hero-section .hero-buttons :is(.btn-browse, .btn-appointment) {
    font-size: clamp(12px, calc(3.7vw - 1px), 14px);
    line-height: 1.35;
    min-height: 44px;
  }
}
@media (max-width: 480px) {
  .hero-section .hero-community { max-width: 320px; gap: 14px; }
  .hero-community .hero-sdg-item { flex-basis: 48px; }
  .hero-community .hero-sdg-rows { max-width: 256px; margin-inline: auto; }
}
/* The artwork no longer needs a downward nudge into the old SDG tail. */
.hero-section:has(.hero-community) .hero-content-right .fmrc-hero-scene { top: 0; }
/* Laser and router use the printer's existing frame, aspect ratio and scale. */
.hero-machine-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fmrc-hero-scene[data-machine-ready="true"] > :is(.hero-printer-art, .hero-printer-mechanism, .hero-printer-badge) { visibility: hidden; }
.hero-machine-art :is(.hm-screen-background,.hm-screen-header,.hm-progress,.hm-progress-fill,.hm-phase) { transition: fill 240ms ease; }
.hero-machine-art[data-phase="complete"] .hm-screen-background { fill: #164b39; }
.hero-machine-art[data-phase="complete"] .hm-screen-header { fill: #24684c; }
.hero-machine-art[data-phase="complete"] .hm-progress-fill { fill: #80e3a5; }
.hero-machine-art[data-phase="complete"] :is(.hm-progress,.hm-phase) { fill: #e4ffec; }
.hero-machine-art[data-phase="resetting"] .hm-screen-background { fill: #1e1828; }
.hero-machine-art .hm-worklight-lens { stroke: #80d8f4; transition: stroke 240ms ease; }
.hero-machine-art .hm-worklight-stop { stop-color: #80d8f4; transition: stop-color 240ms ease; }
.hero-machine-art .hm-worklight-beams { pointer-events: none; transition: opacity 240ms ease; }
.hero-machine-art[data-phase="working"][data-running="true"] .hm-worklight-beams { animation: hp-task-light 3.2s ease-in-out infinite; }
.hero-machine-art[data-phase="complete"] .hm-worklight-lens { stroke: #88e5ac; }
.hero-machine-art[data-phase="complete"] .hm-worklight-stop { stop-color: #88e5ac; }
.hero-machine-art[data-phase="resetting"] .hm-worklight-beams { opacity: 0; }
.hero-machine-art[data-phase="resetting"] .hm-worklight-lens { stroke: #56616b; }
@media (prefers-reduced-motion: reduce) { .hero-machine-art .hm-worklight-beams { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .hero-machine-art * { transition: none !important; } }