/* Living layer: Polychromie colours, warm sky, motion. Loaded after style.css. */
:root {
  --c0: #177B39; --c1: #2F7FC4; --c2: #E3A33A; --c3: #D9482B; --c4: #5DBB6A; --c5: #D46A86; --c6: #3B4BB0;
  --poly: linear-gradient(100deg, var(--c0), var(--c4) 18%, var(--c1) 34%, var(--c6) 48%, var(--c5) 62%, var(--c3) 78%, var(--c2) 92%, var(--c0));
  --active: var(--c0);
}
.c0 { --c: var(--c0); } .c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); }
.c4 { --c: var(--c4); } .c5 { --c: var(--c5); } .c6 { --c: var(--c6); }

/* ---- Sky: warm light that slowly drifts behind the drawing ---- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #F4EEE3 0%, #F6E6D2 48%, #F3D9C4 72%, #EFE3D4 100%);
}
.blob { position: absolute; border-radius: 50%; opacity: .55; mix-blend-mode: multiply; will-change: transform; }
.b1 { width: 52vw; height: 52vw; left: 38vw; top: -14vw; background: radial-gradient(circle, #FFD08A 0%, rgba(255,208,138,0) 70%); animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width: 44vw; height: 44vw; left: -10vw; top: 40vh; background: radial-gradient(circle, #9CC8EE 0%, rgba(156,200,238,0) 70%); opacity: .4; animation: drift2 32s ease-in-out infinite alternate; }
.b3 { width: 38vw; height: 38vw; right: -8vw; bottom: -12vw; background: radial-gradient(circle, #F4A9B4 0%, rgba(244,169,180,0) 70%); opacity: .4; animation: drift3 28s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-8vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(12vw, -12vh) scale(1.2); } }
@keyframes drift3 { to { transform: translate(-10vw, -8vh) scale(.9); } }
body { background: transparent; }
html { background: var(--paper); }

/* ---- Polychrome text ---- */
.poly {
  background: var(--poly); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: poly 9s linear infinite; padding-right: .06em;
}
@keyframes poly { to { background-position: -250% 0; } }

/* ---- Brand mark: four-colour window ---- */
.brand-mark { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; }
.brand-mark::after { display: none; }
.brand-mark i:nth-child(1) { background: var(--c0); } .brand-mark i:nth-child(2) { background: var(--c2); }
.brand-mark i:nth-child(3) { background: var(--c1); } .brand-mark i:nth-child(4) { background: var(--c3); }
.brand:hover .brand-mark i { animation: blink .9s var(--ease) both; }
.brand:hover .brand-mark i:nth-child(2) { animation-delay: .08s; } .brand:hover .brand-mark i:nth-child(3) { animation-delay: .16s; }
.brand:hover .brand-mark i:nth-child(4) { animation-delay: .24s; }
@keyframes blink { 50% { transform: scale(.4); border-radius: 50%; } }

/* ---- CTA ---- */
.cta::before { background: var(--poly); background-size: 200% 100%; animation: poly 6s linear infinite; }
.cta:hover { color: #fff; border-color: transparent; }
.cta:hover i { background: var(--ink); }

/* ---- Ticker: each entry wears its process colour ---- */
.ticker { background: rgba(250, 246, 239, .66); box-shadow: 0 20px 60px -30px rgba(120, 70, 30, .35); }
.ticker-list li { grid-template-columns: 62px 10px 1fr 14px; align-items: start; }
.ticker-list li::before { content: ''; grid-column: 2; grid-row: 1; width: 8px; height: 8px; border-radius: 2px; margin-top: 3px; background: var(--c); }
.ticker-list li time { grid-column: 1; grid-row: 1; }
.ticker-list li span { grid-column: 3; }
.ticker-list li b { grid-column: 4; color: var(--c); }
.ticker-list li:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), transparent); }

/* ---- Exploded view ---- */
.legend { display: flex; align-items: center; gap: 5px; margin-top: 22px; color: var(--ink-2); }
.legend i { width: 14px; height: 14px; background: var(--c); display: inline-block; }
.legend i:last-of-type { margin-right: 10px; }
.struktur-panel { border-left-color: var(--c, var(--c0)); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .5s; }
.panel-no { color: var(--c, var(--c0)); }
.panel-title { color: var(--c, var(--ink)); transition: color .5s; }
.panel-bar span { background: var(--poly); background-size: 420px 100%; }
.label { flex-direction: row-reverse; } /* left of the tower, line points at the building */
.label-tag { font-style: normal; }
@media (min-width: 901px) and (max-width: 1600px) {  /* desktop only — must not squeeze the phone panel */
  .label-tag { display: none; }                 /* tag is repeated in the panel */
  .struktur-panel { width: clamp(300px, 26vw, 400px); }
}
.label::before { background: var(--c); opacity: 1; height: 2px; }
.label b { color: var(--c); }
.label.active { color: var(--c); font-weight: 500; }
.label.active::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }

/* ---- Colour band ---- */
.band { position: relative; z-index: 2; background: var(--ink); color: var(--paper); overflow: hidden; padding: 26px 0; transform: rotate(-1.2deg) scale(1.02); margin: -2vh 0 0; }
.band-track { display: flex; gap: 56px; width: max-content; animation: band 48s linear infinite; }
.band span { display: inline-flex; align-items: center; gap: 18px; font-family: var(--serif); font-size: clamp(26px, 3vw, 44px); white-space: nowrap; }
.band i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 18px var(--c); }
.band:hover .band-track { animation-play-state: paused; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---- 24h: colour-coded moments ---- */
.tag, .prinzip, .standorte { background: #F7F2EA; }
.clock-line { background: var(--poly); background-size: 100vw 100%; height: 4px; }
.day li { position: relative; transition: opacity .8s var(--ease), background .4s; }
.day li::before { content: ''; position: absolute; left: 0; right: 22px; top: -1px; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.day li.on::before { transform: scaleX(1); }
.day li.on time { color: var(--c); }
.day-tag { display: inline-block; margin: 12px 0 6px; padding: 3px 7px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 10px; }
.day li:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }

/* ---- Principles ---- */
.p-card { border-top: 4px solid var(--c); padding-left: 0; transition: transform .5s var(--ease); }
.p-card .p-no { color: var(--c); }
.p-card:hover { transform: translateY(-6px); }
.p-card h3 { transition: color .4s; }
.p-card:hover h3 { color: var(--c); }

/* ---- Locations ---- */
.ort-name { transition: color .5s var(--ease); }
.ort:hover .ort-name { color: var(--c); }
.ort-link { color: var(--c); }
.ort-coord { color: var(--c); }

/* ---- Finale ---- */
.finale { background: radial-gradient(120% 90% at 85% 100%, #20352A 0%, var(--ink) 60%); }
.blueprint { color: rgba(239, 235, 227, .35); }
.blueprint .bp:nth-child(3) { stroke: var(--c2); }
.blueprint .bp:nth-child(4) { stroke: var(--c1); }

/* ---- Phones: same look, far less GPU work, no clutter over the drawing ---- */
@media (max-width: 900px), (pointer: coarse) {
  .blob { mix-blend-mode: normal; animation: none; will-change: auto; }
  .grain { animation: none; inset: 0; }
  .ticker, .struktur-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250, 246, 239, .92); }
}
@media (max-width: 900px) {
  .labels { display: none; }            /* the panel names the active floor; numbers only collided with it */
  .legend { font-size: 0; gap: 4px; }   /* keep the colour squares, drop the wrapping caption */
  .legend i { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .poly, .band-track, .cta::before { animation: none !important; }
}