/* HomeZero isometric scene styles. Scoped to .hzi. Uses tokens from style.css with fallbacks.
   Dark is default, light follows prefers-color-scheme. Animations: transform/opacity (plus offset-distance on small dots). */
.hzi {
  --hzi-ok: var(--ok, #6ee7b7); --hzi-on-ok: #052e22;
  --hzi-acc: var(--accent, #22d3ee); --hzi-dim: var(--text-dim, #a5b2c6);
  --hzi-surf: var(--surface-solid, #0f172a); --hzi-text: var(--text, #f8fafc);
  --hzi-halo: var(--accent, #22d3ee);
  --hzi-sky-a: #0a1030; --hzi-sky-b: #1d2358;
  --hzi-sun: #f3f0ff; --hzi-sunglow: rgba(199, 210, 254, .35); --hzi-stars: 1;
  --hzi-grass-a: #2c8a63; --hzi-grass-b: #1f6a52; --hzi-soil: #4a3866; --hzi-road: #3a4468; --hzi-mark: rgba(255, 255, 255, .35);
  --hzi-house: #e6d8f7; --hzi-annex: #f0b34a; --hzi-car: #f2637d; --hzi-off: #4fb0d4;
  --hzi-sk0: #6366f1; --hzi-sk1: #8b5cf6; --hzi-glass: #5a78b8; --hzi-lit: #fcd679; --hzi-cloud: rgba(199, 210, 254, .16);
  --hzi-tm: 14%; --hzi-rm: 40%; --hzi-wh: #8c97c4; --hzi-crate: #c58b4e;
  position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--r-lg, 24px); border: 1px solid var(--border, rgba(255, 255, 255, .09));
  background: linear-gradient(180deg, var(--hzi-sky-a), var(--hzi-sky-b));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hzi { --hzi-on-ok: #fff; --hzi-sky-a: #bfe0ff; --hzi-sky-b: #f1f7ff; --hzi-sun: #ffd34d; --hzi-sunglow: rgba(255, 211, 77, .4); --hzi-stars: 0; --hzi-grass-a: #9be0a8; --hzi-grass-b: #6fc58a; --hzi-soil: #b98e6a; --hzi-road: #c3c9d8; --hzi-mark: rgba(255, 255, 255, .8); --hzi-house: #fff4e2; --hzi-annex: #ffd166; --hzi-car: #ff6b81; --hzi-off: #7cc8ee; --hzi-sk0: #a5b4fc; --hzi-sk1: #c4b5fd; --hzi-glass: #a8d4f5; --hzi-lit: #fff3b0; --hzi-cloud: rgba(255, 255, 255, .9); --hzi-tm: 30%; --hzi-rm: 22%; --hzi-wh: #b9c3e6; --hzi-crate: #d9a066; }
}
:root[data-theme="light"] .hzi { --hzi-on-ok: #fff; --hzi-sky-a: #bfe0ff; --hzi-sky-b: #f1f7ff; --hzi-sun: #ffd34d; --hzi-sunglow: rgba(255, 211, 77, .4); --hzi-stars: 0; --hzi-grass-a: #9be0a8; --hzi-grass-b: #6fc58a; --hzi-soil: #b98e6a; --hzi-road: #c3c9d8; --hzi-mark: rgba(255, 255, 255, .8); --hzi-house: #fff4e2; --hzi-annex: #ffd166; --hzi-car: #ff6b81; --hzi-off: #7cc8ee; --hzi-sk0: #a5b4fc; --hzi-sk1: #c4b5fd; --hzi-glass: #a8d4f5; --hzi-lit: #fff3b0; --hzi-cloud: rgba(255, 255, 255, .9); --hzi-tm: 30%; --hzi-rm: 22%; --hzi-wh: #b9c3e6; --hzi-crate: #d9a066; }
/* Consumer (teal): sky, soil, house and sky-blocks in teal tints; business keeps the indigo scene */
.theme-consumer .hzi { --hzi-sky-a: #03181c; --hzi-sky-b: #0b3b3a; --hzi-sun: #f0fdfa; --hzi-sunglow: rgba(153, 246, 228, .35);
  --hzi-soil: #2d4a46; --hzi-road: #35504f; --hzi-house: #d5f5ef; --hzi-sk0: #14b8a6; --hzi-sk1: #2dd4bf;
  --hzi-cloud: rgba(153, 246, 228, .16); --hzi-wh: #8fb5b0; }
.theme-consumer .hzi .ph { fill: #042f2e; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-consumer .hzi { --hzi-sk0: #5eead4; --hzi-sk1: #99f6e4; --hzi-wh: #a9cfc9; }
}
:root[data-theme="light"] .theme-consumer .hzi { --hzi-sk0: #5eead4; --hzi-sk1: #99f6e4; --hzi-wh: #a9cfc9; }
.hzi-stage { position: relative; flex: none; }
.hzi-tilt { position: absolute; inset: 0; transform-origin: 50% 60%; transition: transform .3s ease-out; will-change: transform; }
.hzi-art, .hzi-art svg { display: block; width: 100%; height: 100%; max-width: none; }
.hzi-hs { position: absolute; inset: 0; pointer-events: none; }

/* materials: --b is the face base, top/right derived */
.hzi .t { fill: color-mix(in srgb, var(--b), #fff var(--hzi-tm)); }
.hzi .l { fill: var(--b); }
.hzi .r { fill: color-mix(in srgb, var(--b), #000 var(--hzi-rm)); }
.hzi .m-house { --b: var(--hzi-house); } .hzi .m-annex { --b: var(--hzi-annex); }
.hzi .m-chim { --b: color-mix(in srgb, var(--brand, #4f46e5) 45%, #b45309); }
.hzi .m-vent { --b: #94a3b8; }
.hzi .m-car { --b: var(--hzi-car); } .hzi .m-car2 { --b: color-mix(in srgb, var(--hzi-car), #fff 25%); }
.hzi .m-off { --b: var(--hzi-off); } .hzi .m-off2 { --b: color-mix(in srgb, var(--hzi-off), #fff 35%); }
.hzi .m-wh { --b: var(--hzi-wh); } .hzi .m-crate { --b: var(--hzi-crate); }
.hzi .m-van { --b: #eef2fb; } .hzi .m-van2 { --b: #7c8fd0; }
.hzi .m-sky0 { --b: var(--hzi-sk0); } .hzi .m-sky1 { --b: var(--hzi-sk1); }
.hzi .soil .l { fill: var(--hzi-soil); }
.hzi .soil .r { fill: color-mix(in srgb, var(--hzi-soil), #000 30%); }
.hzi .gs1 { stop-color: var(--hzi-grass-a); } .hzi .gs2 { stop-color: var(--hzi-grass-b); }
.hzi .road { fill: var(--hzi-road); } .hzi .mark { fill: var(--hzi-mark); }
.hzi .roof { fill: var(--brand-2, #7c3aed); }
.hzi .roofedge { fill: color-mix(in srgb, var(--brand-2, #7c3aed), #000 35%); }
.hzi .gable { fill: color-mix(in srgb, var(--hzi-house), #000 var(--hzi-rm)); }
.hzi .glass { fill: var(--hzi-glass); }
.hzi .lit1, .hzi .lit2, .hzi .lit3 { fill: var(--hzi-lit); animation: hzi-twinkle 6s ease-in-out infinite; }
.hzi .lit2 { animation-delay: -2s; } .hzi .lit3 { animation-delay: -4s; }
.hzi .door { fill: color-mix(in srgb, var(--brand, #4f46e5), #000 20%); } .hzi .knob { fill: var(--hzi-lit); }
.hzi .boiler { fill: #cbd5e1; } .hzi .det { fill: #f8fafc; } .hzi .led { fill: #f43f5e; animation: hzi-blink 2.4s ease-in-out infinite; }
.hzi .jar0 { fill: #ef4444; } .hzi .jar1 { fill: #22c55e; } .hzi .jar2 { fill: #f59e0b; }
.hzi .light { fill: #fff7c2; } .hzi .beam { fill: #fff7c2; opacity: .35; animation: hzi-beam 3.2s ease-in-out infinite; }
.hzi .tyre { fill: #1e293b; } .hzi .rim { fill: #cbd5e1; }
.hzi .shadow { fill: #000; opacity: .2; }
.hzi .trunk { fill: #7c4a2d; } .hzi .leaf1 { fill: color-mix(in srgb, var(--hzi-grass-b), #000 12%); } .hzi .leaf2 { fill: var(--hzi-grass-a); }
.hzi .ph { fill: #1e1b4b; stroke: var(--hzi-acc); stroke-width: 1.5; } .hzi .ph-s { fill: color-mix(in srgb, var(--brand-2, #7c3aed), #fff 15%); }
.hzi .ph-b { fill: rgba(255, 255, 255, .85); } .hzi .ph-n { fill: #f43f5e; }

/* sky */
.hzi .sun { fill: var(--hzi-sun); } .hzi .glow { fill: var(--hzi-sunglow); }
.hzi .stars { opacity: var(--hzi-stars); } .hzi .star { fill: #fff; animation: hzi-twinkle 4s ease-in-out infinite; }
.hzi .cloud { animation: hzi-drift 40s ease-in-out infinite alternate; } .hzi .cloud ellipse { fill: var(--hzi-cloud); }

/* links and traveling dots */
.hzi .link { fill: none; stroke: var(--hzi-acc); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .6; }
.hzi .dot { fill: var(--hzi-acc); animation: hzi-run 6s linear infinite; }
@supports not (offset-path: path("M0 0")) { .hzi .dot { display: none; } }

/* zones: halo, dim, hover. Dimming is a soft desaturate, never transparency. */
.hzi .zone { transition: filter .35s ease; }
.hzi .zone.is-link { cursor: pointer; }
.hzi .halo { fill: var(--hzi-halo); opacity: 0; transition: opacity .35s ease; }
.hzi .zone.is-sel .halo { opacity: .28; } .hzi .zone.is-hover .halo { opacity: .2; }
.hzi.has-sel .zone:not(.is-sel):not(.is-hover) { filter: saturate(.55) brightness(.9); }
.hzi .zone.is-sel { filter: saturate(1.05) brightness(1.04); }
.hzi .zone.is-sel .halo { opacity: .34; }
.hzi .car { animation: hzi-bob 3.4s ease-in-out infinite; }
.hzi .float { animation: hzi-float 4.2s ease-in-out infinite; }

/* hotspots (real buttons over the art) */
.hzi-b { position: absolute; transform: translate(-50%, -22px); pointer-events: auto; display: flex; flex-direction: column; align-items: center;
  width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font: 700 .75rem/1.1 var(--font, system-ui, sans-serif); color: var(--hzi-text);
  -webkit-tap-highlight-color: transparent; transition: opacity .3s ease; }
.hzi-b__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ring);
  background: var(--hzi-surf); color: var(--ring); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); transition: transform .25s ease, box-shadow .25s ease; }
.hzi-b__dot svg { width: 22px; height: 22px; }
.hzi-b__dot::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ring); opacity: 0; animation: hzi-pulse 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
.hzi-b--live { --ring: var(--hzi-ok); } .hzi-b--live .hzi-b__dot { background: var(--hzi-ok); color: var(--hzi-on-ok); border-color: color-mix(in srgb, var(--hzi-ok), #fff 45%); }
.hzi-b--next { --ring: var(--hzi-acc); }
.hzi-b--planned { --ring: var(--hzi-dim); } .hzi-b--planned .hzi-b__dot { border-style: dashed; }
.hzi-b--planned .hzi-b__dot::before { animation: none; }
.hzi-b__label { position: absolute; top: 100%; left: 50%; margin-top: 4px; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--hzi-surf); border: 1px solid var(--border-strong, rgba(255, 255, 255, .18)); }
.hzi:not(.is-compact) .hzi-b[data-side=r] .hzi-b__label { top: 50%; left: 100%; margin: 0 0 0 6px; transform: translateY(-50%); }
.hzi:not(.is-compact) .hzi-b[data-side=l] .hzi-b__label { top: 50%; left: auto; right: 100%; margin: 0 6px 0 0; transform: translateY(-50%); }
.hzi:not(.is-compact) .hzi-b[data-side=t] .hzi-b__label { top: auto; bottom: 100%; margin: 0 0 4px; }
.hzi-b:hover .hzi-b__dot, .hzi-b.is-sel .hzi-b__dot { transform: scale(1.14); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ring) 30%, transparent), 0 8px 20px -6px rgba(0, 0, 0, .55); }
.hzi-b.is-sel .hzi-b__label { background: linear-gradient(100deg, var(--brand, #4f46e5), var(--brand-2, #7c3aed)); border-color: transparent; color: #fff; }
.hzi-b:focus-visible { outline: none; }
.hzi-b:focus-visible .hzi-b__dot { outline: 3px solid var(--focus, #67e8f9); outline-offset: 3px; }
.hzi.has-sel .hzi-b:not(.is-sel):not(:hover):not(:focus-visible) { opacity: .65; }
.hzi.is-compact .hzi-b__dot { width: 36px; height: 36px; } .hzi.is-compact .hzi-b__dot svg { width: 18px; height: 18px; }
.hzi.is-compact .hzi-b { transform: translate(-50%, -18px); width: 36px; height: 36px; }
.hzi.is-compact .hzi-b__label { display: none; }
.hzi.is-compact .hzi-b.is-sel .hzi-b__label, .hzi.is-compact .hzi-b:hover .hzi-b__label, .hzi.is-compact .hzi-b:focus-visible .hzi-b__label { display: block; z-index: 2; }

/* stories: short loops that play only on the selected zone. Transform and opacity only. */
.hzi .st { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.hzi .env { fill: #fff; stroke: var(--hzi-acc); stroke-width: 1.4; } .hzi .env-f { fill: none; stroke: var(--hzi-acc); stroke-width: 1.4; stroke-linejoin: round; }
.hzi .st-ping { fill: none; stroke: var(--hzi-acc); stroke-width: 2; }
.hzi .st-glint { fill: var(--hzi-lit); }
.hzi .sheet { fill: #fff; } .hzi .st-pulse { fill: #fff; stroke: var(--hzi-acc); stroke-width: 2; }
.hzi .st-flame { fill: #fb923c; } .hzi .st-ring { fill: none; stroke: #f43f5e; stroke-width: 1.6; }
.hzi .note { fill: #fff; } .hzi .note-d { fill: var(--hzi-acc); } .hzi .note-l { fill: #94a3b8; }
.hzi .zone.is-sel .st-mail { animation: hzi-mail 4.2s ease-in-out infinite; }
.hzi .zone.is-sel .st-ping { animation: hzi-ping 4.2s ease-out infinite; }
.hzi .zone.is-sel .st-van { animation: hzi-van 5.4s ease-in-out infinite; }
.hzi .zone.is-sel .st-crate { animation: hzi-crate 5.4s ease-in-out infinite; }
.hzi .zone.is-sel .st-glint { animation: hzi-glint 5.4s ease-out infinite; }
.hzi .zone.is-sel .st-box { animation: hzi-box 4.6s ease-in-out infinite; }
.hzi .zone.is-sel .st-paper { animation: hzi-paper 4.6s ease-out infinite; }
.hzi .zone.is-sel .st-flame { animation: hzi-flame 1.6s ease-in-out infinite; }
.hzi .zone.is-sel .st-ring { animation: hzi-ring 1.6s ease-out infinite; }
.hzi .zone.is-sel .st-ring2 { animation-delay: .8s; }
.hzi .zone.is-sel .led { animation-duration: .7s; }
.hzi .zone.is-sel .st-pulse { animation: hzi-pulse-run 2.6s linear infinite; }
.hzi .zone.is-sel .st-note { animation: hzi-note 4s ease-in-out infinite; }
@supports not (offset-path: path("M0 0")) { .hzi .st-pulse { display: none; } }

/* off screen or hidden tab: freeze every loop */
.hzi.is-paused *, .hzi.is-paused *::before { animation-play-state: paused !important; }

@keyframes hzi-mail { 0% { opacity: 0; transform: translate(-24px, -44px) scale(.7); } 12% { opacity: 1; transform: translate(-22px, -52px) scale(1); }
  50% { transform: translate(-10px, -62px); } 78% { opacity: 1; transform: translate(0, 0) scale(1); } 88% { opacity: 0; transform: translate(0, -4px) scale(.4); } 100% { opacity: 0; } }
@keyframes hzi-ping { 0%, 76% { opacity: 0; transform: scale(.4); } 78% { opacity: .8; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hzi-van { 0% { opacity: 0; transform: translate(-44px, 26px); } 12% { opacity: 1; } 30%, 78% { opacity: 1; transform: translate(0, 0); } 92%, 100% { opacity: 0; transform: translate(-44px, 26px); } }
@keyframes hzi-crate { 0% { opacity: 0; transform: translate(-44px, 26px); } 12% { opacity: 1; } 30%, 38% { opacity: 1; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(-2px, -34px); } 62%, 74% { opacity: 1; transform: translate(0, -10px); } 82%, 100% { opacity: 0; transform: translate(0, -8px) scale(.5); } }
@keyframes hzi-glint { 0%, 62% { opacity: 0; transform: scale(.5); } 68% { opacity: .75; } 90%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes hzi-box { 0% { opacity: 0; transform: translate(-76px, -26px); } 10% { opacity: 1; } 55%, 76% { opacity: 1; transform: translate(0, 0); } 90%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes hzi-paper { 0%, 55% { opacity: 0; transform: translateY(0); } 62% { opacity: 1; } 80% { opacity: 1; transform: translateY(-20px); } 92%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes hzi-flame { 0%, 100% { opacity: .1; transform: scale(.7); } 50% { opacity: .6; transform: scale(1.1); } }
@keyframes hzi-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }
@keyframes hzi-pulse-run { 0% { offset-distance: 0%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hzi-note { 0%, 15% { opacity: 0; transform: translateY(-14px); } 28%, 72% { opacity: 1; transform: translateY(0); } 88%, 100% { opacity: 0; transform: translateY(-14px); } }

@keyframes hzi-pulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes hzi-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes hzi-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes hzi-beam { 0%, 100% { opacity: .15; } 50% { opacity: .45; } }
@keyframes hzi-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }
@keyframes hzi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hzi-drift { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
@keyframes hzi-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hzi *, .hzi *::before { animation: none !important; transition: none !important; }
  .hzi .dot, .hzi .st { display: none; }
  .hzi-tilt { transform: none !important; }
}

/* phones and narrow columns: the stage follows the scene's own shape instead of leaving empty space below it */
@media (max-width: 959px) {
  .scene__stage:has(.hzi) { height: auto; aspect-ratio: var(--hzi-ar, 650 / 490); }
}