/* PUBLICA4 — Experience Modes (data-motion on ). Every element behaves like a little creature; its character changes per mode. Higher-specificity :root[data-motion="…"] rules override the base reveal/hover styles defined in reveal.js and the pages' inline CSS — no per-page edits needed. */ /* ---------- Scroll-reveal entrance character ---------- */ /* Reduced: no travel, just a quiet fade */ :root[data-motion="reduced"] .p4-anim [data-reveal]{ transition: opacity .4s ease !important; translate: none !important; scale: none !important; rotate: none !important; } /* Normal: the calm baseline (defined in reveal.js) — nothing to override */ /* Playful: gentle overshoot, a touch more travel */ :root[data-motion="playful"] .p4-anim [data-reveal]{ transition-property: opacity, translate, scale, rotate; transition-timing-function: cubic-bezier(.34,1.56,.64,1); transition-duration: .8s; } :root[data-motion="playful"] .p4-anim [data-reveal]:not(.p4-in){ translate: 0 56px; scale: .9; } /* Wild: bold, tilts in from further away then straightens */ :root[data-motion="wild"] .p4-anim [data-reveal]{ transition-property: opacity, translate, scale, rotate; transition-timing-function: cubic-bezier(.5,-0.75,.2,1.85); transition-duration: 1.05s; } :root[data-motion="wild"] .p4-anim [data-reveal]:not(.p4-in){ translate: 0 120px; scale: .68; rotate: -12deg; } /* Shy: keeps things close and quick, doesn't show off */ :root[data-motion="shy"] .p4-anim [data-reveal]{ transition-duration: .7s; } :root[data-motion="shy"] .p4-anim [data-reveal]:not(.p4-in){ translate: 0 34px; scale: .97; } /* ---------- Card hover character ---------- */ :root[data-motion="reduced"] .p4-card:hover{ transform: none !important; } :root[data-motion="playful"] .p4-card:hover{ transform: translateY(-9px) rotate(-1.5deg) !important; } :root[data-motion="wild"] .p4-card:hover{ transform: translateY(-12px) scale(1.045) rotate(-3deg) !important; } /* shy card hover handled by motion.js (it ducks away from the cursor instead) */ /* ---------- Floating badges / bob (hero cards) ---------- */ :root[data-motion="reduced"] .p4-badge, :root[data-motion="reduced"] .p4-eyedot{ animation: none !important; } :root[data-motion="wild"] .p4-badge{ animation-duration: 2.1s !important; } :root[data-motion="playful"] .p4-badge{ animation-duration: 2.8s !important; } /* ---------- Marquee / brand slider speed ---------- */ :root[data-motion="reduced"] .p4-marquee-track{ animation: none !important; } :root[data-motion="wild"] .p4-marquee-track{ animation-duration: 16s !important; } /* ---------- Wild: extra drama on the Team grid ---------- */ /* Cards catapult in from alternating sides with a big tilt, then keep a gentle life of their own (transform-based wobble — separate from the reveal's translate/scale/rotate props, and overridden by the hover transform). */ :root[data-motion="wild"] .p4-anim .p4-teamcard:not(.p4-in){ translate: -90px 120px; rotate: -16deg; scale: .58; } :root[data-motion="wild"] .p4-anim .p4-teamcard:nth-child(2n):not(.p4-in){ translate: 90px 120px; rotate: 16deg; } :root[data-motion="wild"] .p4-anim .p4-teamcard:nth-child(3n):not(.p4-in){ translate: 0 150px; rotate: -8deg; scale: .5; } @keyframes p4-teamwobble{ 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1.4deg); } 100% { transform: translateY(0) rotate(0deg); } } :root[data-motion="wild"] .p4-teamcard.p4-in{ animation: p4-teamwobble 4.6s ease-in-out infinite; } :root[data-motion="wild"] .p4-teamcard:nth-child(2n).p4-in{ animation-duration: 5.4s; animation-delay: .5s; } :root[data-motion="wild"] .p4-teamcard:nth-child(3n).p4-in{ animation-duration: 5.0s; animation-delay: 1s; } /* ---------- Wild: extreme entrance on the shared CTA band ---------- */ /* The three pieces slam in from different sides with heavy tilt; the whole band then keeps a slow tilt-wobble and the button pulses. */ :root[data-motion="wild"] .p4-anim section[data-screen-label="CTA"] h2[data-reveal]:not(.p4-in){ translate: -140px 40px; rotate: -20deg; scale: .55; } :root[data-motion="wild"] .p4-anim section[data-screen-label="CTA"] p[data-reveal]:not(.p4-in){ translate: 140px 30px; rotate: 12deg; scale: .7; } :root[data-motion="wild"] .p4-anim section[data-screen-label="CTA"] a[data-reveal]:not(.p4-in){ translate: 0 90px; rotate: -14deg; scale: .3; } :root[data-motion="wild"] .p4-anim section[data-screen-label="CTA"] [data-reveal]{ transition-timing-function: cubic-bezier(.34,-0.6,.2,1.9) !important; transition-duration: 1.15s !important; } @keyframes p4-ctatilt{ 0%,100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(.5deg) translateY(-4px); } 75% { transform: rotate(-.5deg) translateY(4px); } } :root[data-motion="wild"] section[data-screen-label="CTA"] > div{ animation: p4-ctatilt 6.5s ease-in-out infinite; } @keyframes p4-ctapulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } } :root[data-motion="wild"] section[data-screen-label="CTA"] a[data-reveal].p4-in{ animation: p4-ctapulse 2.4s ease-in-out infinite; } :root[data-motion="wild"] section[data-screen-label="CTA"] a[data-reveal]:hover{ animation-play-state: paused; } /* ---------- Timeline: hover reaction (all modes) ---------- */ /* Hovering a year lifts + tints it and dims the others, so the timeline responds to whichever year the cursor is on. */ .p4-tlitem{ transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease, border-left-width .2s ease, background .3s ease, box-shadow .3s ease; border-radius: 0 8px 8px 0; } .p4-tl:hover .p4-tlitem{ opacity: .38 !important; } .p4-tl .p4-tlitem:hover{ opacity: 1 !important; transform: translateY(-8px) scale(1.04) !important; border-left-width: 7px; background: color-mix(in srgb, var(--tl-accent) 12%, transparent); box-shadow: 0 14px 30px rgba(42,48,80,.13); } /* ---------- Wild: extreme timeline entrance + idle sway ---------- */ :root[data-motion="wild"] .p4-anim .p4-tlitem:not(.p4-in){ translate: 0 130px; rotate: -10deg; scale: .5; } :root[data-motion="wild"] .p4-anim .p4-tlitem:nth-child(2n):not(.p4-in){ translate: -90px 130px; rotate: 13deg; } :root[data-motion="wild"] .p4-anim .p4-tlitem:nth-child(3n):not(.p4-in){ translate: 90px 150px; rotate: -15deg; scale: .42; } @keyframes p4-tlsway{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-7px) rotate(-1.6deg); } } :root[data-motion="wild"] .p4-tlitem.p4-in{ animation: p4-tlsway 4.4s ease-in-out infinite; } :root[data-motion="wild"] .p4-tlitem:nth-child(2n).p4-in{ animation-duration: 5.2s; animation-delay: .4s; } :root[data-motion="wild"] .p4-tlitem:nth-child(3n).p4-in{ animation-duration: 4.8s; animation-delay: .8s; } /* ---------- Values cards: hover reaction (all modes) ---------- */ .p4-valcard{ transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease, border-top-width .2s ease, background .3s ease, box-shadow .3s ease; border-radius: 0 0 8px 8px; } .p4-valgrid:hover .p4-valcard{ opacity: .4 !important; } .p4-valgrid .p4-valcard:hover{ opacity: 1 !important; transform: translateY(-8px) scale(1.04) !important; border-top-width: 7px; background: color-mix(in srgb, var(--tl-accent) 12%, transparent); box-shadow: 0 14px 30px rgba(42,48,80,.13); } /* ---------- Wild: extreme entrance + idle sway on the values cards ---------- */ :root[data-motion="wild"] .p4-anim .p4-valcard:not(.p4-in){ translate: -100px 120px; rotate: -15deg; scale: .55; } :root[data-motion="wild"] .p4-anim .p4-valcard:nth-child(2n):not(.p4-in){ translate: 100px 120px; rotate: 15deg; } :root[data-motion="wild"] .p4-anim .p4-valcard:nth-child(3n):not(.p4-in){ translate: 0 150px; rotate: -9deg; scale: .48; } :root[data-motion="wild"] .p4-valcard.p4-in{ animation: p4-tlsway 4.7s ease-in-out infinite; } :root[data-motion="wild"] .p4-valcard:nth-child(2n).p4-in{ animation-duration: 5.5s; animation-delay: .45s; } :root[data-motion="wild"] .p4-valcard:nth-child(3n).p4-in{ animation-duration: 5.0s; animation-delay: .9s; } /* ---------- Home "Was wir machen" pillars: hover (all modes) + wild ---------- */ .p4-pillar{ transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease !important; } .p4-pillar .p4-badge{ transition: transform .32s cubic-bezier(.34,-0.4,.2,1.7); } .p4-pillar:hover{ transform: translateY(-10px) !important; box-shadow: 0 20px 44px rgba(42,48,80,.15); border-color: var(--p4-teal) !important; } .p4-pillar:hover .p4-badge{ transform: scale(1.15) rotate(-10deg) !important; animation-play-state: paused; } .p4-pillar:hover h3{ color: var(--p4-teal-ink); } .p4-pillar h3{ transition: color .25s ease; } :root[data-motion="wild"] .p4-anim .p4-pillar:not(.p4-in){ translate: -110px 130px; rotate: -16deg; scale: .5; } :root[data-motion="wild"] .p4-anim .p4-pillar:nth-child(2n):not(.p4-in){ translate: 110px 130px; rotate: 16deg; } :root[data-motion="wild"] .p4-anim .p4-pillar:nth-child(3n):not(.p4-in){ translate: 0 165px; rotate: -10deg; scale: .44; } :root[data-motion="wild"] .p4-pillar.p4-in{ animation: p4-tlsway 4.6s ease-in-out infinite; } :root[data-motion="wild"] .p4-pillar:nth-child(2n).p4-in{ animation-duration: 5.4s; animation-delay: .4s; } :root[data-motion="wild"] .p4-pillar:nth-child(3n).p4-in{ animation-duration: 5.0s; animation-delay: .8s; } :root[data-motion="wild"] .p4-pillar:hover{ animation-play-state: paused; } /* ---------- Leistungen bausteine: looping hover life + wild entrance ---------- */ .p4-bimg{ transition: transform .5s cubic-bezier(.2,.7,.2,1); } .p4-bimg > div{ transition: transform .35s cubic-bezier(.34,-0.5,.2,1.7); } .p4-bimg:hover{ transform: scale(1.015); animation: p4-bimgpan 6s ease-in-out infinite; } @keyframes p4-bimgpan{ 0%{ background-position: 50% 44%; } 50%{ background-position: 53% 58%; } 100%{ background-position: 50% 44%; } } @keyframes p4-badgebounce{ 0%,100%{ transform: translateY(0) rotate(0deg); } 30%{ transform: translateY(-9px) rotate(-9deg); } 60%{ transform: translateY(0) rotate(5deg); } } .p4-bimg:hover > div{ animation: p4-badgebounce 1.3s ease-in-out infinite; } .p4-bimg::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%); transform:translateX(-130%); } .p4-bimg:hover::after{ animation: p4-bshine 1.7s ease-in-out infinite; } @keyframes p4-bshine{ 0%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } } :root[data-motion="wild"] .p4-anim .p4-bimg:not(.p4-in){ translate: -150px 60px; rotate: -14deg; scale: .58; } :root[data-motion="wild"] .p4-anim .p4-baustein h2[data-reveal]:not(.p4-in){ translate: 130px 0; rotate: 9deg; scale: .7; } :root[data-motion="wild"] .p4-anim .p4-baustein p[data-reveal]:not(.p4-in){ translate: 100px 40px; rotate: 5deg; } @keyframes p4-bimgfloat{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-9px) rotate(-1.4deg); } } :root[data-motion="wild"] .p4-bimg.p4-in{ animation: p4-bimgfloat 5s ease-in-out infinite; } :root[data-motion="wild"] .p4-bimg.p4-in:hover{ animation: p4-bimgpan 6s ease-in-out infinite; }