.scene-image {
  filter: saturate(.84) brightness(.7) contrast(1.08);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(20 33 30 / 8%) 0 32%, rgb(16 28 25 / 20%) 58%, rgb(9 17 15 / 70%) 100%),
    linear-gradient(90deg, rgb(10 22 19 / 18%), transparent 32% 68%, rgb(10 22 19 / 16%));
}

.scene::after { z-index: 4; }

.hero-copy,
.masthead { z-index: 7; }

.system-stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 6;
  width: min(100%, 1200px);
  height: 640px;
  color: #fff1ca;
  pointer-events: none;
  transform: translateX(-50%);
}

.system-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.system-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  transition: opacity 220ms ease, stroke 220ms ease, stroke-width 220ms ease;
}

.system-line--base {
  opacity: 0;
  stroke: rgb(255 242 207 / 39%);
  stroke-width: 1.05;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: line-build 950ms cubic-bezier(.2,.8,.2,1) both;
}

.system-line--context {
  stroke: rgb(255 242 207 / 25%);
  stroke-dasharray: 2 8;
}

.system-line--assets { animation-delay: .78s; }
.system-line--requests { animation-delay: 1.32s; }
.system-line--people { animation-delay: 1.86s; }
.system-line--outcome { animation-delay: 2.32s; }

.system-line--flow {
  opacity: 0;
  stroke: #ffe49a;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 100;
  animation: story-flow 14s linear infinite both;
}

.flow--assets { animation-delay: 1.55s; }
.flow--services { animation-delay: 2.35s; }
.flow--communication { animation-delay: 3.95s; }
.flow--quality { animation-delay: 4.75s; }

.system-line.is-active {
  opacity: 1;
  stroke: #ffe39c;
  stroke-width: 2.5;
  stroke-dashoffset: 0;
}

.feature {
  position: absolute;
  display: flex;
  width: clamp(116px, 13vw, 154px);
  min-height: 76px;
  margin: 0;
  padding: 0;
  border: 0;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  background: transparent;
  color: #fff1ca;
  font: inherit;
  text-align: center;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) translateY(10px);
  animation: feature-arrive 720ms cubic-bezier(.2,.8,.2,1) both;
  -webkit-tap-highlight-color: transparent;
}

.feature--communication { left: 18%; top: 15%; animation-delay: 2.05s; }
.feature--community-assets { left: 18%; top: 50%; animation-delay: .72s; }
.feature--unit-assets { left: 18%; top: 85%; animation-delay: 1.02s; }
.feature--quality-life { left: 82%; top: 15%; animation-delay: 3.42s; }
.feature--services { left: 82%; top: 50%; animation-delay: 1.82s; }
.feature--follow-up { left: 82%; top: 85%; animation-delay: 2.52s; }

.feature:disabled { cursor: default; }

.feature-icon {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  color: currentColor;
  transform-origin: center;
  transition: color 220ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}

.feature-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid rgb(255 239 200 / 40%);
  background: rgb(16 29 25 / 68%);
  box-shadow: 0 8px 30px rgb(4 12 9 / 28%);
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
  transition: background-color 220ms ease, border-color 220ms ease, transform 240ms ease;
}

.feature-icon svg {
  width: 48px;
  height: 48px;
  overflow: visible;
}

.feature-frame,
.symbol-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.feature-frame { opacity: .78; stroke-width: 1.1; }
.symbol-fill { fill: currentColor; }
.symbol-soft { fill: rgb(255 241 202 / 13%); stroke: currentColor; stroke-width: 1.2; }

.symbol-core,
.symbol-fold,
.symbol-tray,
.symbol-spark,
.quality-rays,
.message-dot,
.progress-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}

.symbol-core { animation: register-mark 780ms cubic-bezier(.2,.8,.2,1) 1.12s both; }
.symbol-fold { animation: file-fold 640ms cubic-bezier(.2,.8,.2,1) 1.38s both; }
.symbol-tray { animation: service-lift 760ms cubic-bezier(.2,.8,.2,1) 2.18s both; }
.symbol-spark { animation: spark-on 14s ease-in-out 2.78s infinite both; }
.progress-dot--one { animation: status-on 14s ease-in-out 3.26s infinite both; }
.progress-dot--two { animation: status-on 14s ease-in-out 3.5s infinite both; }
.progress-dot--three { animation: status-on 14s ease-in-out 3.74s infinite both; }
.message-dot--one { animation: message-pass-one 14s ease-in-out 4.1s infinite both; }
.message-dot--two { animation: message-pass-two 14s ease-in-out 4.1s infinite both; }
.quality-rays { animation: quality-bloom 14s ease-in-out 4.92s infinite both; }

.feature-label {
  display: block;
  color: currentColor;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgb(4 11 9 / 96%);
}

.feature:hover,
.feature:focus-visible,
.feature.is-active,
.feature.is-neighbor {
  color: #ffe39c;
}

.feature:hover .feature-icon,
.feature:focus-visible .feature-icon,
.feature.is-active .feature-icon {
  transform: translateY(-3px) scale(1.05);
}

.feature:hover .feature-icon::before,
.feature:focus-visible .feature-icon::before,
.feature.is-active .feature-icon::before {
  border-color: rgb(255 238 190 / 90%);
  background: rgb(255 227 156 / 88%);
  transform: rotate(2deg);
}

.feature:hover .feature-icon svg,
.feature:focus-visible .feature-icon svg,
.feature.is-active .feature-icon svg {
  color: #18231f;
}

.feature--community-assets.is-active .symbol-core { transform: scale(1.42); }
.feature--unit-assets.is-active .symbol-fold { transform: translate(-2px, 2px) rotate(-4deg); }
.feature--services.is-active .symbol-tray { transform: translateY(-3px); }
.feature--services.is-active .symbol-spark { transform: rotate(24deg) scale(1.35); }
.feature--follow-up.is-active .progress-dot { transform: scale(1.42); }
.feature--communication.is-active .message-dot--one { transform: translateX(3px); }
.feature--communication.is-active .message-dot--two { transform: translateX(-3px); }
.feature--quality-life.is-active .quality-rays { transform: scale(1.22); }

.system-hub {
  position: absolute;
  top: 52.5%;
  left: 50%;
  width: 82px;
  height: 82px;
  color: #ffe7aa;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: hub-arrive-v2 760ms cubic-bezier(.2,.8,.2,1) 1.48s both;
}

.system-hub svg { width: 100%; height: 100%; overflow: visible; }
.hub-ring,
.hub-people {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hub-ring--outer { opacity: .46; stroke-width: 1; stroke-dasharray: 2 7; }
.hub-ring--inner { fill: rgb(18 31 28 / 82%); stroke-width: 1.4; }
.hub-people { stroke-width: 1.55; }
.hub-person { fill: currentColor; }
.hub-aura {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .28;
  transform-box: fill-box;
  transform-origin: center;
  animation: hub-breathe 14s ease-in-out 5.22s infinite both;
}

@keyframes line-build {
  from { opacity: 0; stroke-dashoffset: 100; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes story-flow {
  0%, 3% { opacity: 0; stroke-dashoffset: 100; }
  4% { opacity: .95; }
  10% { opacity: .95; stroke-dashoffset: 0; }
  12%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes feature-arrive {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}

@keyframes hub-arrive-v2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes register-mark {
  from { opacity: 0; transform: scale(.35); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes file-fold {
  from { opacity: 0; transform: translate(-4px, 4px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes service-lift {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spark-on {
  0%, 8%, 15%, 100% { opacity: .62; transform: scale(1) rotate(0); }
  10.5% { opacity: 1; transform: scale(1.35) rotate(20deg); }
}

@keyframes status-on {
  0%, 10%, 18%, 100% { opacity: .44; transform: scale(1); }
  12%, 15% { opacity: 1; transform: scale(1.38); }
}

@keyframes message-pass-one {
  0%, 13%, 21%, 100% { transform: translateX(0); }
  16% { transform: translateX(3px); }
}

@keyframes message-pass-two {
  0%, 13%, 21%, 100% { transform: translateX(0); }
  16% { transform: translateX(-3px); }
}

@keyframes quality-bloom {
  0%, 16%, 26%, 100% { opacity: .58; transform: scale(.92); }
  20% { opacity: 1; transform: scale(1.18); }
}

@keyframes hub-breathe {
  0%, 17%, 27%, 100% { opacity: .18; transform: scale(.9); }
  21% { opacity: .52; transform: scale(1.08); }
}

@media (max-width: 700px) {
  .system-stage {
    top: 44%;
    right: 0;
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px));
    left: 0;
    width: 100%;
    height: auto;
    transform: none;
  }

  .feature {
    width: clamp(98px, 31vw, 122px);
    min-height: 62px;
    gap: 4px;
  }

  .feature-icon { width: 46px; height: 46px; }
  .feature-icon::before { inset: 4px; }
  .feature-icon svg { width: 39px; height: 39px; }
  .feature-label { font-size: clamp(10px, 3vw, 12px); line-height: 1.35; }
  .system-hub { width: 58px; height: 58px; }
  .system-line--base { stroke-width: 1.2; }
  .system-line--flow { stroke-width: 2.25; }
}

@media (max-width: 700px) and (max-height: 730px) {
  .system-stage {
    top: 47%;
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 44px));
  }
  .feature { width: clamp(92px, 30vw, 108px); min-height: 54px; }
  .feature-icon { width: 40px; height: 40px; }
  .feature-icon svg { width: 34px; height: 34px; }
  .feature-label { font-size: clamp(9px, 2.85vw, 10.5px); }
  .system-hub { width: 50px; height: 50px; }
  html[lang="en"] .system-stage { top: 49%; }
}

@media (prefers-reduced-motion: reduce) {
  .system-line--base,
  .feature,
  .system-hub {
    opacity: 1 !important;
  }

  .system-line--base { stroke-dashoffset: 0 !important; }
  .system-line--flow { opacity: 0 !important; }
  .feature { transform: translate(-50%, -50%) !important; }
  .symbol-core,
  .symbol-fold,
  .symbol-tray,
  .symbol-spark,
  .quality-rays,
  .message-dot,
  .progress-dot,
  .hub-aura {
    opacity: 1 !important;
    transform: none !important;
  }
}