/* ══════════════════════════════════════════════════════════════════ innobu · Homepage Flow Layer — "Continuous Current" Loaded LAST on de/ + en/ homepages, after homepage-cohesion. Goal: turn the stacked, centered glass-box sections into ONE flowing surface — a living, drifting background, sections that emerge from that surface, an eyebrow flourish that links one section to the next, calmer vertical rhythm, and a smoother, well-orchestrated scroll-reveal cascade. Pure CSS; honours prefers-reduced-motion. Echoes the established Editorial-Dark DNA (navy / cyan→teal / Fraunces). ══════════════════════════════════════════════════════════════════ */ :root{ --flow-ease:cubic-bezier(.16,1,.3,1); /* expo-out — soft, long settle */ --flow-ease-soft:cubic-bezier(.22,.61,.36,1); /* a slightly more generous, musical rhythm than the cohesion default */ --co-rhythm:clamp(76px,10vw,138px); } /* ────────────────────────────────────────────────────────────────── 1 · Living surface — the static body field gains slow, GPU-cheap drift Two soft blobs counter-drift behind everything (z-index:-1), so the page reads as one breathing field instead of flat navy under boxes. ────────────────────────────────────────────────────────────────── */ body::before, body::after{ content:""; position:fixed; pointer-events:none; z-index:-1; /* behind all content, above body bg */ will-change:transform; } /* cyan aurora, upper field */ body::before{ inset:-25% -20% auto -20%; height:95vh; background:radial-gradient(48% 60% at 30% 30%,rgba(64,192,240,.14),transparent 70%), radial-gradient(40% 50% at 72% 18%,rgba(64,192,240,.09),transparent 72%); filter:blur(8px); animation:flow-drift-a 30s ease-in-out infinite alternate; } /* teal aurora, lower field — counter motion for depth/parallax */ body::after{ inset:auto -20% -25% -20%; height:100vh; background:radial-gradient(46% 58% at 70% 72%,rgba(0,178,169,.11),transparent 72%), radial-gradient(40% 52% at 18% 82%,rgba(56,110,190,.08),transparent 74%); filter:blur(10px); animation:flow-drift-b 38s ease-in-out infinite alternate; } @keyframes flow-drift-a{ from{transform:translate3d(-3%,-2%,0) scale(1.02)} to{transform:translate3d(4%,3%,0) scale(1.12)} } @keyframes flow-drift-b{ from{transform:translate3d(3%,2%,0) scale(1.06)} to{transform:translate3d(-4%,-3%,0) scale(1)} } /* ────────────────────────────────────────────────────────────────── 2 · Section eyebrow — an editorial "node" that ties each section to the next. The cohesion layer draws two flanking hairlines around the eyebrow text; here they DRAW IN on reveal (width 0 → full) with a soft glow, so every section announces itself with a small flowing flourish. Centred, horizontal — never crosses the headline text. ────────────────────────────────────────────────────────────────── */ main{position:relative} .section-eyebrow{position:relative} /* default (no-JS, reduced-motion): the cohesion layer's 32px lines stay put. We only add a transition + glow so the draw-in is smooth when JS drives it. */ .section-eyebrow::before, .section-eyebrow::after{ transition:width .8s var(--flow-ease) .12s, box-shadow .8s ease .12s; } /* JS marks the eyebrow .ino-reveal (pending) → collapse the lines… */ .section-eyebrow.ino-reveal:not(.is-in)::before, .section-eyebrow.ino-reveal:not(.is-in)::after{width:0;box-shadow:none} /* …then on reveal they draw back out with a soft glow */ .section-eyebrow.is-in::before, .section-eyebrow.is-in::after{box-shadow:0 0 10px rgba(64,192,240,.35)} /* ────────────────────────────────────────────────────────────────── 3 · Section blending — let panels emerge from the surface instead of sitting as hard cards. Softer shadow, top inner highlight, lighter fill so the living field reads through. ────────────────────────────────────────────────────────────────── */ .transformation-projects-section, .resources-section, .ki-adoption-stats, .pillar-cluster-section{ box-shadow:0 40px 110px -56px rgba(0,0,0,.85); background:linear-gradient(155deg,rgba(18,30,54,.34),rgba(9,17,32,.4)); -webkit-backdrop-filter:blur(9px) saturate(115%); backdrop-filter:blur(9px) saturate(115%); position:relative; } /* a hairline of light along the top edge — catches the "surface" */ .transformation-projects-section::after, .resources-section::after, .ki-adoption-stats::after, .pillar-cluster-section::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(64,192,240,.06),transparent 26%); } /* keep any existing decorative content above this sheen */ .transformation-projects-section > *, .resources-section > *, .ki-adoption-stats > *, .pillar-cluster-section > *{position:relative;z-index:1} /* ────────────────────────────────────────────────────────────────── 4 · Vertical rhythm — calmer, more even cadence; tighten the heading→intro→content gaps so each section reads as one breath. ────────────────────────────────────────────────────────────────── */ .hero, .articles-section, .transformation-projects-section, .resources-section, .pillar-cluster-section, .cta-section{margin-top:var(--co-rhythm);margin-bottom:var(--co-rhythm)} .section-eyebrow{margin-bottom:18px} .section-heading{margin-bottom:18px} .insights-intro-text, .projects-subtitle{margin-top:0} .articles-section .insights-intro-text{margin-bottom:22px} /* ────────────────────────────────────────────────────────────────── 5 · Reveal engine — richer, softer, well-orchestrated. homepage-reveal.js adds .ino-reveal (hidden) then .is-in (in view) and sets --r-delay per element for the cascade. Children of a revealed section flow in with a staggered, expo-eased rise + faint scale. ────────────────────────────────────────────────────────────────── */ .ino-reveal{ opacity:0; transform:translateY(34px) scale(.985); transition:opacity .9s var(--flow-ease),transform 1.05s var(--flow-ease); transition-delay:var(--r-delay,0ms); will-change:opacity,transform; } .ino-reveal.is-in{opacity:1;transform:none} /* a gentle, slower variant for large heading blocks */ .ino-reveal--head{transition-duration:1s,1.15s} /* the legacy reveal-pending system (resources + hc-strip) — match easing */ .reveal-pending{ transform:translateY(30px) scale(.99); transition:opacity .9s var(--flow-ease),transform 1.05s var(--flow-ease); } .reveal-pending.revealed{transform:none} /* ────────────────────────────────────────────────────────────────── 6 · Micro-polish — smoother card hovers in the system's grammar ────────────────────────────────────────────────────────────────── */ .hb-card{transition:transform .4s var(--flow-ease),border-color .4s ease,box-shadow .4s ease} .value-prop-box{transition:transform .45s var(--flow-ease),border-color .4s ease,box-shadow .4s ease} html{scroll-behavior:smooth} /* ────────────────────────────────────────────────────────────────── 6b · Schwerpunkte / Focus-areas pillar cards — these were added later with flat, off-system styling (plain outlined boxes). Pull them into the Editorial-Dark language, mirroring the Energie-Referenz pillars: glass tile, hairline, faint serif index numeral, cinematic hover. ID-scoped so it overrides the page's inline