.knx-journey {
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-car: cubic-bezier(.16, 1, .3, 1);
--scene: 1.7s var(--ease-out);
--scene-slow: 2s var(--ease-out);
--auto-ms: 6500ms;
}
.journey-playback { display: block !important; }
.home-toolbar,
.home-hotspots,
.home-feature,
.home-energy-story,
.journey-panels,
.home-scene-progress,
.home-scene-caption,
.home-scene-toggle,
.home-modes,
.home-example { display: none !important; }
.knx-journey .journey-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
overflow: visible;
padding: 0;
margin-bottom: 22px;
}
.knx-journey .journey-nav::before { display: none !important; content: none !important; }
.knx-journey .journey-tab,
.knx-journey .time-pill {
appearance: none;
flex: 0 0 auto;
flex-direction: row;
align-items: baseline;
gap: 8px;
min-height: 44px;
min-width: 0;
padding: 8px 14px;
border: 1px solid #ffffff1f;
border-radius: 999px;
background: transparent;
color: #a8b4c7;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
position: relative;
transition:
border-color .35s var(--ease-out),
color .35s var(--ease-out),
background .35s var(--ease-out),
box-shadow .4s var(--ease-out);
}
.knx-journey .journey-tab::before,
.knx-journey .journey-tab::after,
.knx-journey .time-pill::before,
.knx-journey .time-pill::after {
content: none !important;
display: none !important;
}
.knx-journey .journey-tab svg { display: none !important; }
.knx-journey .journey-tab span,
.knx-journey .time-pill span {
font-weight: 500;
opacity: .75;
color: inherit;
}
.knx-journey .journey-tab:hover,
.knx-journey .time-pill:hover {
border-color: #ffffff40;
color: #e8eef7;
background: transparent;
}
.knx-journey .journey-tab[aria-selected="true"],
.knx-journey .journey-tab.is-active,
.knx-journey .time-pill.is-active {
background: #ffffff12;
border-color: var(--brand-yellow);
color: #e8eef7;
box-shadow: 0 0 0 1px #E9DF3C22;
}
.knx-journey .journey-tab[aria-selected="true"] span,
.knx-journey .time-pill.is-active span {
color: var(--brand-yellow);
opacity: 1;
}
.knx-journey .tour-progress {
height: 2px;
width: 100%;
max-width: 520px;
margin: -8px auto 28px;
background: #ffffff12;
border-radius: 2px;
overflow: hidden;
}
.knx-journey .tour-progress-bar,
.knx-journey .house-tour-rail > span {
display: block;
height: 100%;
width: 100%;
transform-origin: left center;
transform: scaleX(0);
background: linear-gradient(90deg, #E9DF3Caa, #E9DF3C);
border-radius: 2px;
opacity: .85;
}
.knx-journey .tour-progress-bar.is-running,
.knx-journey .house-tour-rail > span.is-running {
animation: tour-fill var(--auto-ms) linear forwards;
}
.knx-journey .tour-progress-bar.is-paused,
.knx-journey .house-tour-rail > span.is-paused {
animation-play-state: paused;
}
@keyframes tour-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.knx-journey .journey-story-layout {
display: grid;
grid-template-columns: 1.15fr .95fr;
gap: 36px;
align-items: start;
border: none;
background: transparent;
box-shadow: none;
overflow: visible;
}
.knx-journey .house-card {
background: #142033;
border: 1px solid #ffffff1f;
border-radius: 20px;
padding: 12px;
box-shadow: 0 20px 60px #050c1840;
}
.knx-journey .house-wrap { position: relative; }
.knx-journey .home-drawing {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
background: #0a1528;
transition: filter var(--scene-slow);
filter: brightness(1) saturate(1) contrast(1);
}
.knx-journey .house-tour-rail {
height: 2px;
margin: 8px 4px 0;
border-radius: 2px;
background: #ffffff10;
overflow: hidden;
pointer-events: none;
}
.knx-journey .house-tour-rail > span {
background: var(--brand-yellow);
opacity: .55;
}
.knx-journey .house-caption {
margin: 12px 4px 0;
min-height: 1.4em;
font-size: 13px;
color: #a8b4c7;
letter-spacing: .01em;
transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.knx-journey .house-caption.is-swap {
opacity: 0;
transform: translateY(5px);
}
.knx-journey .journey-story h3 {
font-size: clamp(22px, 2.4vw, 28px);
margin: 0 0 12px;
line-height: 1.25;
font-weight: 700;
color: #e8eef7;
}
.knx-journey .journey-story > p {
color: #a8b4c7;
margin: 0 0 18px;
font-size: 16px;
line-height: 1.55;
}
.knx-journey .journey-story .bullets {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.knx-journey .journey-story .bullets li {
position: relative;
padding-left: 18px;
color: #e8eef7;
font-size: 15px;
}
.knx-journey .journey-story .bullets li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand-yellow);
}
.knx-journey .journey-story #story-title,
.knx-journey .journey-story #story-copy,
.knx-journey .journey-story #story-bullets {
transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.knx-journey .journey-story:not(.is-swap) #story-title { transition-delay: 0s; }
.knx-journey .journey-story:not(.is-swap) #story-copy { transition-delay: .09s; }
.knx-journey .journey-story:not(.is-swap) #story-bullets { transition-delay: .18s; }
.knx-journey .journey-story.is-swap #story-title,
.knx-journey .journey-story.is-swap #story-copy,
.knx-journey .journey-story.is-swap #story-bullets {
opacity: 0;
transform: translateY(8px);
transition-duration: .18s;
transition-delay: 0s;
}
.knx-journey .home-disclaimer {
margin: 22px 4px 0;
font-size: 12px;
color: #64748b;
text-align: center;
}
.home-sky-day,
.home-sky-evening,
.home-sky-dawn,
.home-sky-night,
.home-stars,
.home-sun,
.home-sun-glow,
.home-moon,
.home-moon-glow,
.home-clouds,
.home-room-glow,
.home-lamps,
.home-heat,
.home-window-halos,
.home-window-glass,
.home-blinds,
.home-car,
.home-charge,
.home-battery-fill,
.home-routes,
.route-pv,
.route-home,
.route-battery,
.route-car,
.home-hub-ring,
.home-pv {
transition:
opacity var(--scene),
transform var(--scene-slow),
stroke-opacity var(--scene),
fill-opacity var(--scene),
stroke-width var(--scene),
filter var(--scene);
}
.home-sky-day { opacity: .55; }
.home-sky-evening { opacity: .5; }
.home-sky-dawn { opacity: 0; }
.home-sky-night { opacity: 0; }
.home-stars { opacity: 0; }
.home-moon { opacity: 0; transform: translate(8px, 28px); }
.home-moon-glow { opacity: 0; transform: translate(8px, 28px); }
.home-clouds { opacity: .55; }
.home-sun { opacity: .85; transform: translate(0, 0); transform-origin: 122px 128px; }
.home-sun-glow { opacity: .55; transform: translate(0, 0); transform-origin: 122px 128px; }
.home-room-glow { opacity: .42; }
.home-lamps { opacity: .7; }
.home-heat { opacity: .55; }
.home-window-halos { opacity: .45; }
.home-window-glass { opacity: 0; }
.home-blinds { opacity: .7; transform: scaleY(.18); transform-origin: 557px 263px; }
.home-car {
opacity: 1;
transform: translateX(0);
transition:
opacity 1.25s var(--ease-out),
transform 2s var(--ease-car);
}
.home-charge { opacity: .2; }
.home-battery-fill {
opacity: .4;
transform: scaleY(.38);
transform-origin: 160px 470px;
}
.home-routes { opacity: .5; }
.route-pv, .route-home, .route-battery, .route-car { opacity: 1; }
.home-hub-ring { opacity: .7; }
.home-pv { opacity: 1; }
[data-time="0"] .home-drawing { filter: brightness(.98) saturate(1.12) hue-rotate(-8deg) contrast(1.03); }
[data-time="0"] .home-sky-day { opacity: .48; }
[data-time="0"] .home-sky-evening { opacity: .18; }
[data-time="0"] .home-sky-dawn { opacity: .92; }
[data-time="0"] .home-sky-night { opacity: 0; }
[data-time="0"] .home-stars { opacity: .08; }
[data-time="0"] .home-moon { opacity: 0; transform: translate(8px, 28px); }
[data-time="0"] .home-moon-glow { opacity: 0; transform: translate(8px, 28px); }
[data-time="0"] .home-clouds { opacity: .42; }
[data-time="0"] .home-sun { opacity: .95; transform: translate(-36px, 96px); }
[data-time="0"] .home-sun-glow { opacity: .85; transform: translate(-36px, 96px); }
[data-time="0"] .home-room-glow { opacity: .95; }
[data-time="0"] .home-lamps { opacity: 1; }
[data-time="0"] .home-heat { opacity: 1; }
[data-time="0"] .home-window-halos { opacity: .95; }
[data-time="0"] .home-window-glass { opacity: 0; }
[data-time="0"] .home-blinds { transform: scaleY(.05); opacity: .5; }
[data-time="0"] .home-car { opacity: 1; transform: translateX(0); }
[data-time="0"] .home-charge { opacity: .12; }
[data-time="0"] .home-battery-fill { opacity: .45; transform: scaleY(.4); }
[data-time="0"] .home-routes { opacity: .38; }
[data-time="0"] .route-pv { opacity: .45; }
[data-time="0"] .route-car { opacity: .25; }
[data-time="0"] .route-home { opacity: .75; }
[data-time="0"] .route-battery { opacity: .35; }
[data-time="0"] .home-hub-ring { opacity: .85; }
[data-time="0"] .home-pv { opacity: .88; filter: brightness(1.05); }
[data-time="1"] .home-drawing { filter: brightness(1.08) saturate(1.12) contrast(1.05); }
[data-time="1"] .home-sky-day { opacity: 1; }
[data-time="1"] .home-sky-evening { opacity: 0; }
[data-time="1"] .home-sky-dawn { opacity: .12; }
[data-time="1"] .home-sky-night { opacity: 0; }
[data-time="1"] .home-stars { opacity: 0; }
[data-time="1"] .home-moon { opacity: 0; transform: translate(8px, 28px); }
[data-time="1"] .home-moon-glow { opacity: 0; transform: translate(8px, 28px); }
[data-time="1"] .home-clouds { opacity: .58; }
[data-time="1"] .home-sun { opacity: 1; transform: translate(18px, 4px); }
[data-time="1"] .home-sun-glow { opacity: .7; transform: translate(18px, 4px); }

[data-time="1"] .home-room-glow { opacity: .02; }
[data-time="1"] .home-lamps { opacity: .05; }
[data-time="1"] .home-heat { opacity: .06; }
[data-time="1"] .home-window-halos { opacity: .01; }
[data-time="1"] .home-window-glass { opacity: .72; }
[data-time="1"] .home-blinds { transform: scaleY(.08); opacity: .55; }
[data-time="1"] .home-car { opacity: 0; transform: translateX(168px); }
[data-time="1"] .home-charge { opacity: .04; }
[data-time="1"] .home-battery-fill { opacity: .55; transform: scaleY(.55); }
[data-time="1"] .home-routes { opacity: .48; }
[data-time="1"] .route-pv { opacity: .82; }
[data-time="1"] .route-car { opacity: .05; }
[data-time="1"] .route-home { opacity: .38; }
[data-time="1"] .route-battery { opacity: .58; }
[data-time="1"] .home-hub-ring { opacity: .38; }
[data-time="1"] .home-pv { opacity: 1; filter: brightness(1.18); }
[data-time="2"] .home-drawing { filter: brightness(1.16) saturate(1.2) contrast(1.07); }
[data-time="2"] .home-sky-day { opacity: 1; }
[data-time="2"] .home-sky-evening { opacity: 0; }
[data-time="2"] .home-sky-dawn { opacity: 0; }
[data-time="2"] .home-sky-night { opacity: 0; }
[data-time="2"] .home-stars { opacity: 0; }
[data-time="2"] .home-moon { opacity: 0; transform: translate(8px, 28px); }
[data-time="2"] .home-moon-glow { opacity: 0; transform: translate(8px, 28px); }
[data-time="2"] .home-clouds { opacity: .28; }
[data-time="2"] .home-sun { opacity: 1; transform: translate(112px, -56px); }
[data-time="2"] .home-sun-glow { opacity: .95; transform: translate(112px, -56px); }
[data-time="2"] .home-room-glow { opacity: 0; }
[data-time="2"] .home-lamps { opacity: .02; }
[data-time="2"] .home-heat { opacity: .05; }
[data-time="2"] .home-window-halos { opacity: 0; }
[data-time="2"] .home-window-glass { opacity: .88; }
[data-time="2"] .home-blinds { transform: scaleY(.62); opacity: .92; }
[data-time="2"] .home-car { opacity: 0; transform: translateX(168px); }
[data-time="2"] .home-charge { opacity: .08; }
[data-time="2"] .home-battery-fill { opacity: 1; transform: scaleY(1); }
[data-time="2"] .home-routes { opacity: 1; }
[data-time="2"] .route-pv { opacity: 1; }
[data-time="2"] .route-battery { opacity: 1; }
[data-time="2"] .route-home { opacity: .82; }
[data-time="2"] .route-car { opacity: .08; }
[data-time="2"] .home-hub-ring { opacity: 1; }
[data-time="2"] .home-pv { opacity: 1; filter: brightness(1.42); }
[data-time="3"] .home-drawing { filter: brightness(.96) saturate(1.28) sepia(.18) contrast(1.04); }
[data-time="3"] .home-sky-day { opacity: 0; }
[data-time="3"] .home-sky-evening { opacity: 1; }
[data-time="3"] .home-sky-dawn { opacity: 0; }
[data-time="3"] .home-sky-night { opacity: .22; }
[data-time="3"] .home-stars { opacity: .35; }
[data-time="3"] .home-moon { opacity: .42; transform: translate(4px, 10px); }
[data-time="3"] .home-moon-glow { opacity: .4; transform: translate(4px, 10px); }
[data-time="3"] .home-clouds { opacity: .22; }
[data-time="3"] .home-sun { opacity: .28; transform: translate(-52px, 118px); }
[data-time="3"] .home-sun-glow { opacity: .45; transform: translate(-52px, 118px); }
[data-time="3"] .home-room-glow { opacity: 1; }
[data-time="3"] .home-lamps { opacity: 1; }
[data-time="3"] .home-heat { opacity: 1; }
[data-time="3"] .home-window-halos { opacity: 1; }
[data-time="3"] .home-window-glass { opacity: 0; }
[data-time="3"] .home-blinds { transform: scaleY(.12); opacity: .6; }
[data-time="3"] .home-car { opacity: 1; transform: translateX(0); }
[data-time="3"] .home-charge { opacity: 1; }
[data-time="3"] .home-battery-fill { opacity: .88; transform: scaleY(.84); }
[data-time="3"] .home-routes { opacity: .82; }
[data-time="3"] .route-pv { opacity: .22; }
[data-time="3"] .route-car { opacity: 1; }
[data-time="3"] .route-home { opacity: 1; }
[data-time="3"] .route-battery { opacity: .62; }
[data-time="3"] .home-hub-ring { opacity: 1; }
[data-time="3"] .home-pv { opacity: .7; filter: brightness(.85); }
[data-time="4"] .home-drawing { filter: brightness(.62) saturate(.72) contrast(1.1); }
[data-time="4"] .home-sky-day { opacity: 0; }
[data-time="4"] .home-sky-evening { opacity: .04; }
[data-time="4"] .home-sky-dawn { opacity: 0; }
[data-time="4"] .home-sky-night { opacity: .95; }
[data-time="4"] .home-stars { opacity: 1; }
[data-time="4"] .home-moon { opacity: 1; transform: translate(0, 0); }
[data-time="4"] .home-moon-glow { opacity: .9; transform: translate(0, 0); }
[data-time="4"] .home-clouds { opacity: .06; }
[data-time="4"] .home-sun { opacity: 0; transform: translate(-58px, 150px); }
[data-time="4"] .home-sun-glow { opacity: 0; transform: translate(-58px, 150px); }
[data-time="4"] .home-room-glow { opacity: .42; }
[data-time="4"] .home-lamps { opacity: .62; }
[data-time="4"] .home-heat { opacity: .14; }
[data-time="4"] .home-window-halos { opacity: .38; }
[data-time="4"] .home-window-glass { opacity: .15; }
[data-time="4"] .home-blinds { transform: scaleY(1); opacity: 1; }
[data-time="4"] .home-car { opacity: 1; transform: translateX(0); }
[data-time="4"] .home-charge { opacity: .05; }
[data-time="4"] .home-battery-fill { opacity: .48; transform: scaleY(.48); }
[data-time="4"] .home-routes { opacity: .14; }
[data-time="4"] .route-pv { opacity: 0; }
[data-time="4"] .route-home { opacity: .3; }
[data-time="4"] .route-battery { opacity: .22; }
[data-time="4"] .route-car { opacity: .08; }
[data-time="4"] .home-hub-ring { opacity: .45; }
[data-time="4"] .home-pv { opacity: .38; filter: brightness(.48); }
@keyframes hub-pulse {
0%, 100% { opacity: .5; stroke-opacity: .35; }
50% { opacity: 1; stroke-opacity: .85; }
}
@keyframes hub-eco {
0%, 100% { opacity: .28; stroke-opacity: .2; }
50% { opacity: .48; stroke-opacity: .4; }
}
@keyframes lamp-breathe {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(.7); }
}
@keyframes route-drift {
to { stroke-dashoffset: -80; }
}
@keyframes cloud-drift {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(16px); }
}
@keyframes charge-blink {
0%, 100% { opacity: 1; filter: brightness(1.2); }
50% { opacity: .4; filter: brightness(.8); }
}
@keyframes star-twinkle {
0%, 100% { opacity: 1; }
35% { opacity: .55; }
65% { opacity: .9; }
}
@keyframes heat-shimmer {
0%, 100% { stroke-opacity: .9; }
50% { stroke-opacity: .4; }
}
@keyframes glow-pulse {
0%, 100% { opacity: .88; }
50% { opacity: 1; }
}
@keyframes tour-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.home-hub-ring {
animation: hub-pulse 3.4s ease-in-out infinite;
}
[data-time="1"] .home-hub-ring {
animation: hub-eco 4.8s ease-in-out infinite;
}
.home-clouds {
animation: cloud-drift 26s ease-in-out infinite;
}
.home-routes path {
stroke-dasharray: 16 11;
animation: route-drift 3.2s linear infinite;
}
[data-time="2"] .home-routes path {
stroke-dasharray: 20 6;
stroke-width: 4;
animation-duration: 1.7s;
}
[data-time="0"] .home-routes path,
[data-time="3"] .home-routes path {
animation-duration: 3.6s;
}
[data-time="0"] .home-lamps,
[data-time="3"] .home-lamps {
animation: lamp-breathe 3s ease-in-out infinite;
}
[data-time="4"] .home-lamps {
animation: lamp-breathe 4.4s ease-in-out infinite;
}
[data-time="3"] .home-charge {
animation: charge-blink 2s ease-in-out infinite;
}
[data-time="4"] .home-stars {
animation: star-twinkle 4.6s ease-in-out infinite;
}
[data-time="0"] .home-heat,
[data-time="3"] .home-heat {
animation: heat-shimmer 3.6s ease-in-out infinite;
}
[data-time="0"] .home-window-halos,
[data-time="3"] .home-window-halos {
animation: glow-pulse 3.2s ease-in-out infinite;
}
[data-time="4"] .home-routes path,
[data-time="1"] .route-car,
[data-time="2"] .route-car {
animation: none;
}
[data-time="4"] .home-routes path {
stroke-dasharray: none;
}
@media (prefers-reduced-motion: reduce) {
.home-drawing {
transition: none !important;
filter: none !important;
}
.home-sky-day, .home-sky-evening, .home-sky-dawn, .home-sky-night,
.home-stars, .home-sun, .home-sun-glow, .home-moon, .home-moon-glow,
.home-clouds, .home-room-glow, .home-lamps, .home-heat, .home-blinds,
.home-window-halos, .home-window-glass, .home-car, .home-charge, .home-battery-fill,
.home-routes, .route-pv, .route-home, .route-battery, .route-car,
.home-hub-ring, .home-pv {
transition: opacity .05s linear, transform .05s linear !important;
animation: none !important;
}
.home-routes path { animation: none !important; stroke-dasharray: none; }
.home-hub-ring, .home-clouds, .home-lamps, .home-charge,
.home-stars, .home-heat, .home-window-halos { animation: none !important; }
.knx-journey .journey-story #story-title, .knx-journey .journey-story #story-copy, .knx-journey .journey-story #story-bullets,
.knx-journey .house-caption {
transition: opacity .05s linear !important;
transition-delay: 0s !important;
}
.knx-journey .journey-story.is-swap #story-title,
.knx-journey .journey-story.is-swap #story-copy,
.knx-journey .journey-story.is-swap #story-bullets,
.knx-journey .house-caption.is-swap {
transform: none;
}
.knx-journey .time-pill { transition: none; }
.knx-journey .time-pill.is-active { transform: none; }
.tour-progress, .house-tour-rail { display: none; }
}
@media (max-width: 900px) {
.knx-journey .journey-story-layout {
grid-template-columns: 1fr;
gap: 24px;
}
}