/* Home: "Your whole floor, live". A real CSS 3D plant: every machine is a set of extruded boxes you can turn by dragging.
   Status lights, an incident every few seconds, and a detail card. Sample plant, illustrative numbers. */
.plt { position: relative; background: linear-gradient(180deg, #fff 0%, #fdf8f1 100%); overflow: clip; }
.plt-in { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.plt-copy h2 { margin-top: 10px; }
.plt-copy > p { margin: 16px 0 0; max-width: 46ch; }
.plt-kpis { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 26px 0 0; padding: 0; }
.plt-kpis li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #eadfcf, 0 16px 26px -22px rgba(16,33,47,.4); }
.plt-kpis small { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7b8896; }
.plt-kpis small i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.plt-kpis b { font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: #0b2036; font-variant-numeric: tabular-nums; }
.plt-note { margin: 14px 0 0; font-size: 12px; color: #9aa6b4; }

.plt-stage { position: relative; min-width: 0; }
.plt-view { position: relative; width: 100%; height: calc(var(--s, 1) * 470px); overflow: visible; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.plt-view.drag { cursor: grabbing; }
.plt-scene { position: absolute; left: 0; top: 0; width: 760px; height: 470px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.plt-plane { position: absolute; left: 50%; top: 52%; width: 600px; height: 440px; margin: -220px 0 0 -300px; transform-style: preserve-3d; transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, 38deg)); }
.plt-slab { position: absolute; inset: 0; border-radius: 16px; background: #e8cfae; transform: translateZ(-16px); box-shadow: 40px 50px 70px -10px rgba(16,33,47,.28); }
.plt-floor { position: absolute; inset: 0; border-radius: 16px; background-color: #fff8ef; background-image: linear-gradient(rgba(16,33,47,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,33,47,.06) 1px, transparent 1px); background-size: 40px 40px; box-shadow: inset 0 0 0 2px #f0dcc0; }
.plt-aisle { position: absolute; left: 14px; right: 14px; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(247,134,30,.42) 0 12px, rgba(247,134,30,.1) 12px 24px); opacity: .8; }
.plt-in-view .plt-aisle { animation: plt-flow 1.6s linear infinite; }
@keyframes plt-flow { to { background-position: 24px 0; } }

.mx { position: absolute; transform-style: preserve-3d; cursor: pointer; --st: #16a34a; outline: none; }
.mx[data-s="idle"] { --st: #f59e0b; } .mx[data-s="stop"] { --st: #e5484d; }
.mx-sh { position: absolute; left: 6px; top: 8px; right: -10px; bottom: -12px; border-radius: 8px; background: rgba(16,33,47,.16); filter: blur(6px); transform: translateZ(.5px); }
.bx { position: absolute; transform-style: preserve-3d; transform: translateZ(var(--z, 0px)); }
.bx .f { position: absolute; box-shadow: inset 0 0 0 1px rgba(16,33,47,.1); }
.bx .t { inset: 0; background: var(--ct); transform: translateZ(var(--h)); }
.bx .fr { left: 0; top: 100%; width: 100%; height: var(--h); background: var(--cf); transform-origin: 0 0; transform: rotateX(90deg); }
.bx .rt { left: 100%; top: 0; width: var(--h); height: 100%; background: var(--cr); transform-origin: 0 0; transform: rotateY(-90deg); }
.bx.a { --ct: #f7f9fc; --cf: #e2e9f1; --cr: #c9d5e2; }
.bx.a2 { --ct: #eef2f7; --cf: #d9e2ec; --cr: #bfccdb; }
.bx.b { --ct: #44566f; --cf: #34445b; --cr: #26334a; }
.bx.c { --ct: #ffb35c; --cf: #f7861e; --cr: #d9720f; }
.bx.led { --ct: var(--st); --cf: var(--st); --cr: var(--st); }
.bx.led .f { box-shadow: 0 0 10px 2px var(--st); }
.bx.base .fr { box-shadow: inset 0 -5px 0 var(--st), inset 0 0 0 1px rgba(16,33,47,.1); }
.mx:hover .bx.a .t, .mx.on .bx.a .t { --ct: #fff3e2; }
.mx.on .bx.base .t { background: #ffe6c4; }
.mx-ring { position: absolute; left: -14px; top: -14px; right: -14px; bottom: -14px; border-radius: 12px; border: 2px solid transparent; transform: translateZ(1px); pointer-events: none; }
.mx.on .mx-ring { border-color: #f7861e; box-shadow: 0 0 0 4px rgba(247,134,30,.18); }
.mx[data-s="stop"] .mx-ring { border-color: #e5484d; box-shadow: 0 0 0 5px rgba(229,72,77,.2); }
.plt-in-view .mx[data-s="stop"] .mx-ring { animation: plt-pulse 1.1s ease-in-out infinite; }
@keyframes plt-pulse { 50% { box-shadow: 0 0 0 14px rgba(229,72,77,0); } }
.mx[data-s="stop"] .bx.base .t { background: #ffe1e1; }

.mx-tag { position: absolute; left: 50%; top: 50%; transform-origin: 50% 100%; transform: translateZ(calc(var(--top, 40px) + 8px)) rotateZ(calc(var(--rz, 38deg) * -1)) rotateX(calc(var(--rx, 58deg) * -1)) translate(-50%, -100%); padding: calc(4px / var(--s, 1)) calc(9px / var(--s, 1)); border-radius: calc(9px / var(--s, 1)); background: #0b2036; color: #fff; font: 700 calc(12px / var(--s, 1)) Inter, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; box-shadow: 0 calc(10px / var(--s, 1)) calc(18px / var(--s, 1)) calc(-8px / var(--s, 1)) rgba(11,32,54,.6); }
.mx-tag::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: calc(-5px / var(--s, 1)); border: calc(5px / var(--s, 1)) solid transparent; border-top-color: #0b2036; }
.mx-tag i { display: inline-block; width: calc(8px / var(--s, 1)); height: calc(8px / var(--s, 1)); margin-right: calc(6px / var(--s, 1)); border-radius: 50%; background: var(--st); }
.mx.on .mx-tag, .mx.tg .mx-tag, .mx:hover .mx-tag { opacity: 1; }

.plt-card { position: relative; margin-top: 14px; width: min(380px, 100%); padding: 14px 16px 14px; border-radius: 18px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px #eadfcf, 0 26px 44px -26px rgba(16,33,47,.5); }
.plt-card-h { display: flex; align-items: center; gap: 10px; }
.plt-card-h b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #0b2036; }
.plt-chip { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #dcfce7; color: #15803d; }
.plt-chip.idle { background: #fef3c7; color: #b45309; } .plt-chip.stop { background: #fee2e2; color: #b91c1c; }
.plt-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.plt-card dl div { display: grid; gap: 1px; } .plt-card dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97a6; } .plt-card dd { margin: 0; font-size: 16px; font-weight: 800; color: #0b2036; font-variant-numeric: tabular-nums; }
.plt-evt { margin: 11px 0 0; padding: 8px 10px; border-radius: 10px; background: #f3f5f8; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: #3a4a5a; }
.plt-evt.bad { background: #fee2e2; color: #b91c1c; } .plt-evt.ok { background: #dcfce7; color: #15803d; }
.plt-hint { position: absolute; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9aa6b4; pointer-events: none; }
.plt-hint svg { animation: plt-nudge 2.4s ease-in-out infinite; } @keyframes plt-nudge { 50% { transform: translateX(5px); } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

@media (max-width: 900px) {
  .plt-in { grid-template-columns: 1fr; gap: 20px; }
  .plt-kpis { grid-template-columns: repeat(4, 1fr); gap: 8px; } .plt-kpis li { padding: 10px 10px; } .plt-kpis b { font-size: 20px; } .plt-kpis small { font-size: 10px; letter-spacing: .04em; gap: 5px; }
  .plt-card { width: 100%; max-width: none; }
}
@media (max-width: 460px) { .plt-kpis { grid-template-columns: repeat(2, 1fr); } .plt-kpis b { font-size: 22px; } .plt-kpis small { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .plt-aisle, .mx-ring, .plt-hint svg { animation: none !important; } }

/* ---------- realism: materials, windows, tower lights, floor pads, AGVs, alert beam ---------- */
.bx .t { background-image: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); }
.bx .fr { background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 45%, rgba(16,33,47,.08)); }
.bx .rt { background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(16,33,47,.1)); }
.bx.a .rt, .bx.a2 .rt { background-image: repeating-linear-gradient(90deg, rgba(16,33,47,.09) 0 2px, transparent 2px 10px), linear-gradient(180deg, rgba(255,255,255,.18), rgba(16,33,47,.1)); }
.bx.b .t, .bx.b .fr, .bx.b .rt { background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.12)); }
.mx .bx { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.mx:hover .bx:not(.beam):not(.sl), .mx.on .bx:not(.beam):not(.sl) { transform: translateZ(calc(var(--z, 0px) + 5px)); }
.win { position: absolute; left: 14%; right: 14%; top: 20%; bottom: 24%; border-radius: 3px; background: linear-gradient(135deg, #bcd9f2 0%, #6b9bd0 48%, #43709f 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 1px rgba(16,33,47,.3); }
.win::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(115deg, rgba(255,255,255,.55) 0 22%, transparent 22% 34%, rgba(255,255,255,.25) 34% 40%, transparent 40%); }
.plt-in-view .mx[data-s="run"] .win { animation: plt-win 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes plt-win { 50% { filter: brightness(1.25) saturate(1.2); } }
.mx[data-s="idle"] .win { filter: grayscale(.6) brightness(.95); }
.mx[data-s="stop"] .win { background: linear-gradient(135deg, #ffd0d0, #e5484d 55%, #b72a2f); }
.bx.sl.r { --ct: #5a2327; --cf: #4a1d20; --cr: #3a1618; } .bx.sl.a { --ct: #5c4720; --cf: #4a3a1a; --cr: #3a2e14; } .bx.sl.g { --ct: #1e4a2e; --cf: #193d26; --cr: #133019; }
.mx[data-s="stop"] .bx.sl.r { --ct: #ff5a60; --cf: #ff4047; --cr: #e5353c; } .mx[data-s="idle"] .bx.sl.a { --ct: #ffc247; --cf: #ffb11f; --cr: #e69d10; } .mx[data-s="run"] .bx.sl.g { --ct: #4ade80; --cf: #22c55e; --cr: #16a34a; }
.mx[data-s="stop"] .bx.sl.r .f { box-shadow: 0 0 12px 3px rgba(255,90,96,.7); } .mx[data-s="idle"] .bx.sl.a .f { box-shadow: 0 0 12px 3px rgba(255,178,31,.7); } .mx[data-s="run"] .bx.sl.g .f { box-shadow: 0 0 12px 3px rgba(74,222,128,.55); }
.bx.beam .f { box-shadow: none; opacity: 0; transition: opacity .3s; background: linear-gradient(0deg, rgba(229,72,77,.65), rgba(229,72,77,0)); }
.bx.beam .t { background: none; }
.mx[data-s="stop"] .bx.beam .f { opacity: 1; }
.plt-in-view .mx[data-s="stop"] .bx.beam .f { animation: plt-beam 1.1s ease-in-out infinite; }
@keyframes plt-beam { 50% { opacity: .45; } }
.mx-pad { position: absolute; left: -12px; top: -12px; right: -12px; bottom: -22px; border-radius: 10px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1.5px rgba(247,134,30,.22); transform: translateZ(.3px); }
.mx-lbl { position: absolute; left: 0; right: 0; top: 88px; text-align: center; font: 700 10px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9aa6b4; transform: translateZ(.6px); pointer-events: none; }
.mx.on .mx-lbl, .mx:hover .mx-lbl { color: #c25e00; }
.agv { position: absolute; left: 14px; width: 26px; height: 14px; transform-style: preserve-3d; animation: plt-agv 15s linear infinite alternate; animation-play-state: paused; }
.plt-in-view .agv { animation-play-state: running; }
@keyframes plt-agv { from { translate: 0 0; } to { translate: 530px 0; } }
.agv .bx { transition: none; }
@media (max-width: 900px) { .mx-lbl { display: none; } }
@media (prefers-reduced-motion: reduce) { .agv, .win, .bx.beam .f { animation: none !important; } }