/* Dual Energy field engine (field.js). Everything is scoped under .def- class names. */
.def-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; }
.def-svg * { pointer-events: none; }
.def-svg .def-hs-btn, .def-svg .def-hs-btn * { pointer-events: auto; }

/* type: few sizes, all readable */
.def-t { fill: #ECEBE4; font-size: 13px; font-weight: 700; }
.def-lab { font-size: 14px; font-weight: 700; letter-spacing: .01em; transition: opacity .4s ease; }
.def-t-key { fill: #B4C3BC; font-size: 12px; font-weight: 700; }
.def-t-strong { fill: #ECEBE4; }
.def-t-card { font-size: 14px; font-weight: 800; letter-spacing: .03em; fill: #ECEBE4; }
.def-t-mini { font-size: 12px; font-weight: 700; fill: #B4C3BC; }
.def-badge-a { font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.def-badge-b { font-size: 13px; font-weight: 600; fill: #B4C3BC; }
.def-tag { font-size: 17px; font-weight: 800; fill: #8AE932; letter-spacing: .01em; }
.def-halo { paint-order: stroke; stroke: #062822; stroke-width: 5px; stroke-linejoin: round; }

/* layers: lit, dimmed, hidden */
.def-l, .def-lift { transition: opacity .7s ease, transform 1s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }
.def-l.def-on { opacity: 1; }
.def-l.def-off { opacity: .15; }
.def-l.def-soft { opacity: .55; }
.def-l.def-hide { opacity: 0; }
.def-l.def-glow { filter: drop-shadow(0 0 4px rgba(138, 233, 50, .4)); }
.def-svg.def-exploded .def-lift { transform: translateY(var(--lift, 0px)); }

/* the two product lines */
.def-mode { opacity: 0; transition: opacity .7s ease; }
.def-svg[data-mode="ipp"] .def-mode-ipp, .def-svg[data-mode="consultant"] .def-mode-consultant { opacity: 1; }
.def-panel, .def-pgrid, .def-pstrip, .def-leaf, .def-stem { transition: stroke .7s ease, fill .7s ease; }
/* scenarios (ipp): crops cross-fade, chart highlights the scenario shown */
.def-scrop { opacity: 0; transition: opacity .9s ease; }
.def-scrop.def-scrop-on { opacity: 1; }
.def-ch-head { font-size: 16px; font-weight: 800; fill: #ECEBE4; }
.def-ch-status { font-size: 12.5px; font-weight: 700; fill: #B4C3BC; }
.def-ch-status.def-ch-best { fill: #8AE932; }
.def-ch-status.def-ch-fail, .def-ch-val.def-ch-fail { fill: #E8A33A; }
.def-ch-axis { font-size: 12px; font-weight: 700; fill: #B4C3BC; }
.def-ch-thr { font-size: 11px; font-weight: 800; fill: #E8A33A; }
.def-ch-note { font-size: 10.5px; font-weight: 600; fill: rgba(180, 195, 188, .75); }
.def-ch-val { font-size: 11.5px; font-weight: 800; fill: #8AE932; opacity: 0; transition: opacity .4s ease; }
.def-ch-val.def-ch-show { opacity: 1; }
.def-ch-lab { font-size: 12px; font-weight: 700; fill: #B4C3BC; transition: fill .4s ease; }
.def-ch-lab.def-ch-on { fill: #ECEBE4; font-weight: 800; }
.def-bar { fill: #8AE932; fill-opacity: .18; stroke: rgba(138, 233, 50, .55); stroke-width: 1; transition: fill-opacity .4s ease; }
.def-bar.def-bar-fail { fill: #E8A33A; stroke: rgba(232, 163, 58, .6); }
.def-bar.def-bar-on { fill-opacity: 1; }
/* inspection: cool, monochrome line work */
.def-svg[data-mode="consultant"] .def-panel { stroke: #ECEBE4; fill: #0B3A31; }
.def-svg[data-mode="consultant"] .def-pgrid { stroke: rgba(236, 235, 228, .3); }
.def-svg[data-mode="consultant"] .def-pstrip { stroke: rgba(236, 235, 228, .4); fill: #14443A; }
.def-svg[data-mode="consultant"] .def-leaf { stroke: #B4C3BC; }
.def-svg[data-mode="consultant"] .def-stem { stroke: rgba(180, 195, 188, .55); }
.def-svg[data-mode="consultant"] .def-l.def-glow { filter: drop-shadow(0 0 4px rgba(236, 235, 228, .35)); }

/* "3D render from your file": the panels turn see-through so the 2D file shows underneath */
.def-svg.def-planlit .def-panel { fill-opacity: .25; }
.def-svg.def-planlit .def-pstrip { fill-opacity: .3; }
/* "3D landscape": the site's orthophoto under a solid plant; crops step back so the photo reads */
.def-svg.def-ortholit .def-l.def-on[data-l="crop"] { opacity: .45; }
.def-svg.def-ortholit .def-l[data-l="ground"] { opacity: .35; }

/* exploded view: balloons and small labels step aside, layer tags explain */
.def-tags { opacity: 0; transition: opacity .5s ease; }
.def-svg.def-exploded .def-tags { opacity: 1; transition-delay: .4s; }
.def-svg.def-exploded .def-lab { opacity: 0; }
.def-svg.def-exploded .def-l[data-l="dims"] { opacity: 0; }
.def-hots { transition: opacity .4s ease; }
.def-svg.def-exploded .def-hots { opacity: 0; }
.def-svg.def-exploded .def-hots * { pointer-events: none !important; }

/* motion */
.def-ping { transform-box: fill-box; transform-origin: center; animation: def-ping 2.6s ease-out infinite; }
@keyframes def-ping { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.def-flow { stroke-dasharray: 2 7; animation: def-flow 1.4s linear infinite; }
@keyframes def-flow { to { stroke-dashoffset: -18; } }
.def-blink { animation: def-blink 2.6s ease-in-out infinite; }
@keyframes def-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.def-bob { animation: def-bob 7s ease-in-out infinite; }
@keyframes def-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.def-svg.def-paused * { animation-play-state: paused !important; }

/* hotspots (numbered balloons) */
.def-hs { transition: opacity .35s ease; }
.def-hs-enter, .def-hs-leave { opacity: 0; }
.def-hs-pop { transition: transform .4s cubic-bezier(.2, .8, .2, 1.2); }
.def-hs-enter .def-hs-pop, .def-hs-leave .def-hs-pop { transform: scale(.55); }
.def-hs-lead { stroke: rgba(236, 235, 228, .55); stroke-width: 1; }
.def-hs-dot { fill: #ECEBE4; }
.def-hs-btn { cursor: pointer; outline: none; }
.def-hs-c { fill: #062822; stroke: #ECEBE4; stroke-width: 1.6; transition: fill .25s, stroke .25s, stroke-width .25s; }
.def-hs-n { fill: #ECEBE4; font-size: 16px; font-weight: 800; transition: fill .25s; }
.def-hs-label { fill: #ECEBE4; font-size: 14px; font-weight: 800; transition: fill .25s; }
.def-hs-ring { fill: none; stroke: #8AE932; stroke-width: 2.5; opacity: 0; }
.def-hs-pulse { fill: none; stroke: #8AE932; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.def-hs-btn:hover .def-hs-c { stroke: #8AE932; stroke-width: 2.2; fill: #0B3A31; }
.def-hs-btn:hover .def-hs-label { fill: #D1FBA5; }
.def-hs-btn:focus-visible .def-hs-ring { opacity: 1; }
.def-hs-btn[aria-pressed="true"] .def-hs-c { fill: #8AE932; stroke: #8AE932; }
.def-hs-btn[aria-pressed="true"] .def-hs-n { fill: #062822; }
.def-hs-btn[aria-pressed="true"] .def-hs-label { fill: #8AE932; }
.def-hs-btn[aria-pressed="true"] .def-hs-pulse { animation: def-pulse 2.4s ease-out infinite; }
@keyframes def-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }

/* narrow containers: numbers stay, small labels go, tags and badge grow */
.def-svg.def-narrow .def-hs-label, .def-svg.def-narrow .def-lab, .def-svg.def-narrow .def-key { display: none; }
.def-svg.def-narrow .def-tag { font-size: 30px; }
.def-svg.def-narrow .def-badge-a { font-size: 24px; }
.def-svg.def-narrow .def-badge-b { display: none; }
.def-svg.def-narrow .def-legend text { font-size: 20px; }
.def-svg.def-narrow .def-chart { transform: scale(1.3); }
.def-svg.def-up .def-chart { transform: translateY(-218px) scale(1.3); }
.def-svg.def-small .def-chart { transform: translate(-10px, -12px) scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .def-ping, .def-flow, .def-blink, .def-bob, .def-hs-btn[aria-pressed="true"] .def-hs-pulse { animation: none !important; }
  .def-ping { opacity: .35; }
  .def-l, .def-lift, .def-mode, .def-tags, .def-hs, .def-hs-pop, .def-hots, .def-lab, .def-scrop, .def-bar, .def-ch-val { transition-duration: .01s !important; transition-delay: 0s !important; }
}