/* ========================================================================== SHEboom! — motion.css Der Bewegungs-Layer, zweite Ausbaustufe. Leitidee «boom»: Die Seite hat einen Puls. Seitenwechsel blenden über, Abschnitte treten mit Tiefe und Schärfe auf, Hintergründe leben, nichts steht einfach nur da. Alles greift NUR, wenn die Klasse `mo` trägt (kein Wunsch nach reduzierter Bewegung). Ohne JavaScript ist die Seite sofort und ruhig da. ========================================================================== */ /* ------------------------------------------------------------ Typo-Schliff Gilt immer, ist keine Bewegung. */ h1, h2, h3, .section-title, .hero__title, .home-hero__headline { text-wrap: balance; } .hero__lead, .home-hero__sub, .section-sub, .sd-hero__sub { text-wrap: pretty; } ::selection { background: var(--pink); color: #fff; } .shedance ::selection { background: var(--yellow); color: var(--ink); } /* ===================================================== Seiten-Überblendung Wechsel zwischen den Seiten blendet weich über statt hart zu springen. View-Transition, wo der Browser sie kann — sonst blendet die neue Seite ein. */ @media not (prefers-reduced-motion: reduce) { @view-transition { navigation: auto; } } html.mo::view-transition-old(root) { animation: seite-raus .22s ease both; } html.mo::view-transition-new(root) { animation: seite-rein .34s cubic-bezier(.2, .8, .3, 1) both; } @keyframes seite-raus { to { opacity: 0; transform: translateY(-10px); } } @keyframes seite-rein { from { opacity: 0; transform: translateY(14px); } } /* Fallback ohne View-Transition: Inhalt blendet beim Ankommen ein */ html.mo body { animation: seiten-fade .4s ease both; } @keyframes seiten-fade { from { opacity: 0; } } /* ============================================================ Scroll-Reveal JS vergibt .rv (+ Variante) und zählt --rvd je Gruppe hoch. Grössere Wege, Schärfe zieht nach — das wirkt wie ein Kamerazug, nicht wie ein Einblenden. */ html.mo .rv { opacity: 0; transform: translateY(46px); filter: blur(7px); } html.mo .rv--media { transform: translateY(34px) scale(1.05); } html.mo .rv--panel { transform: translateY(38px) scale(.965); } html.mo .rv.is-in { opacity: 1; transform: none; filter: none; transition: opacity .65s ease calc(var(--rvd, 0) * 85ms), filter .65s ease calc(var(--rvd, 0) * 85ms), transform 1s cubic-bezier(.16, 1.2, .3, 1) calc(var(--rvd, 0) * 85ms); } html.mo .rv:focus-within { opacity: 1; transform: none; filter: none; transition: none; } /* ========================================================== Hero-Auftritt Beim Laden: Titel wird von unten aufgedeckt (Maske), alles andere steigt mit nachziehender Schärfe herauf. */ html.mo .hero-enter { opacity: 0; transform: translateY(30px); filter: blur(6px); animation: hero-in 1s cubic-bezier(.16, 1.15, .3, 1) forwards; animation-delay: calc(var(--he, 0) * 120ms); } @keyframes hero-in { to { opacity: 1; transform: none; filter: none; } } html.mo h1.hero-enter, html.mo .hero-enter.home-hero__headline { filter: none; transform: none; clip-path: inset(0 0 100% 0); animation-name: hero-titel; animation-duration: 1.1s; } @keyframes hero-titel { from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(26px); } /* grosszuegig oeffnen, damit Sticker und Ueberhaenge nicht beschnitten werden */ to { opacity: 1; clip-path: inset(-18% -6% -12% -6%); transform: none; } } /* ===================================================== Lebendige Hintergründe Zwei weiche Farbwolken in Pink und Gelb treiben langsam durch die Hero-Bereiche der hellen Seiten. */ html.mo .home-hero, html.mo .hero { overflow: clip; } html.mo .home-hero::before, html.mo .hero::before { content: ''; position: absolute; inset: -22%; z-index: 0; pointer-events: none; background: radial-gradient(38% 34% at 24% 30%, rgba(196, 72, 90, .12), transparent 70%), radial-gradient(30% 30% at 74% 62%, rgba(255, 222, 89, .22), transparent 70%); filter: blur(46px); animation: wolken 17s ease-in-out infinite alternate; } @keyframes wolken { from { transform: translate3d(-2.5%, -2%, 0) rotate(-1.5deg) scale(1); } to { transform: translate3d(2.5%, 2.5%, 0) rotate(1.5deg) scale(1.07); } } /* Foto-Platzhalter leben: der Farbverlauf wandert langsam */ html.mo .media:not(:has(img)) { background-size: 170% 170%; animation: flaeche-drift 12s ease-in-out infinite alternate; } @keyframes flaeche-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } /* Das grosse «!» wandert im Parallax (JS setzt --par) und pendelt leicht */ html.mo .watermark, html.mo .home-hero__watermark { transform: translateY(var(--par, 0px)) rotate(var(--sway, 0deg)); will-change: transform; animation: sway 14s ease-in-out infinite alternate; } @keyframes sway { from { --sway: -2deg; } to { --sway: 2deg; } } @property --sway { syntax: ''; inherits: false; initial-value: 0deg; } /* ===================================================== Scroll-gekoppelt Wo der Browser scroll-getriebene Animationen kann: Bilder gleiten im Rahmen (Parallax), der Hero zieht sich beim Wegscrollen sanft zurück. */ @supports (animation-timeline: view()) { html.mo .media img { animation: bild-parallax linear both; animation-timeline: view(); scale: 1.14; } @keyframes bild-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } } html.mo .home-hero, html.mo .sd-hero { animation: hero-zieht-sich-zurueck linear both; animation-timeline: view(block 0% 45%); transform-origin: 50% 0; } @keyframes hero-zieht-sich-zurueck { from { transform: scale(1); opacity: 1; } to { transform: scale(.965); opacity: .35; } } } /* ===================================================== Kopfzeile mit Gespür Beim Runterscrollen macht sie Platz, beim ersten Hochscrollen ist sie da. */ html.mo .site-header, html.mo .mini-nav { transition: transform .32s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } html.mo .site-header.is-away, html.mo .mini-nav.is-away { transform: translateY(-140%); } /* Menülinks: Unterstrich wächst von links */ html.mo .nav__menu a:not(.nav__cta) { background-image: linear-gradient(var(--gelb), var(--gelb)); /* Unterstrich auf dem dunklen Balken */ background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: color .18s ease, background-size .28s cubic-bezier(.2, .8, .3, 1); border-bottom-color: transparent; } html.mo .nav__menu a:not(.nav__cta):hover { background-size: 100% 2px; } html.mo .nav__menu a[aria-current='page']:not(.nav__cta) { background-size: 100% 2px; } /* =========================================================== Interaktionen */ .btn span[aria-hidden], .card__link span, .link-arrow span { display: inline-block; transition: transform .25s cubic-bezier(.2, .8, .3, 1); } .btn:hover span[aria-hidden], a.card__link:hover span, a.link-arrow:hover span { transform: translateX(5px); } .btn:active { transform: translateY(0) scale(.96); } /* Lichtstreifen zieht beim Zeigen über die Hauptknöpfe */ html.mo .btn--primary, html.mo .btn--yellow, html.mo .btn--dark, html.mo .btn--light { position: relative; overflow: hidden; } html.mo .btn--primary::after, html.mo .btn--yellow::after, html.mo .btn--dark::after, html.mo .btn--light::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; } html.mo .btn--primary:hover::after, html.mo .btn--yellow:hover::after, html.mo .btn--dark:hover::after, html.mo .btn--light:hover::after { transition: transform .6s ease; transform: translateX(110%); } /* 3D-Karten: JS setzt --tx/--ty, dazu kräftigeres Abheben */ html.mo .tilt { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px)); transition: transform .2s ease-out, box-shadow .3s ease; transform-style: preserve-3d; } html.mo .tilt:hover { --lift: -6px; transition-duration: .06s; box-shadow: 0 22px 44px rgba(26, 26, 26, .16); } /* Programmzeilen rücken beim Zeigen ein Stück ein */ html.mo .program-item { transition: background-color .25s ease, padding-left .3s cubic-bezier(.2, .8, .3, 1); } html.mo .program-item:hover { background-color: rgba(196, 72, 90, .05); padding-left: 10px; } html.mo .status { transition: transform .25s cubic-bezier(.16, 1.15, .3, 1); } html.mo .program-item:hover .status { transform: scale(1.07); } html.mo .pill, html.mo .vibe__tag { transition: transform .25s cubic-bezier(.16, 1.15, .3, 1), border-color .25s ease; } html.mo .pill:hover, html.mo .vibe__tag:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--yellow); } html.mo .media img { transition: scale .8s cubic-bezier(.2, .8, .3, 1); } html.mo .marquee:hover .marquee__track { animation-play-state: paused; } /* Magnetische Knöpfe: JS zieht sie dem Zeiger leicht entgegen (--mx/--my) */ html.mo .magnet { translate: var(--mx, 0px) var(--my, 0px); transition: translate .2s ease-out; } /* ====================================================== SHEdance-Signatur */ html.mo .shedance-teaser__disc { animation: disc-ring 26s linear infinite; } html.mo .shedance-teaser__disc-inner { animation: disc-spin 12s cubic-bezier(.4, 0, .6, 1) infinite; transform-style: preserve-3d; } @keyframes disc-spin { 0% { transform: perspective(700px) rotateY(0deg) rotateX(6deg); } 50% { transform: perspective(700px) rotateY(20deg) rotateX(-7deg); } 100% { transform: perspective(700px) rotateY(0deg) rotateX(6deg); } } @keyframes disc-ring { to { transform: rotate(360deg); } } /* SHEdance-Hero: das Farblicht pulsiert langsam wie im Club */ html.mo .sd-hero { animation: club-licht 11s ease-in-out infinite alternate; } @keyframes club-licht { from { background-position: 0% 0%, 0% 0%; filter: saturate(1); } to { background-position: 6% -4%, -5% 5%; filter: saturate(1.25); } } html.mo .home-hero__scribble, html.mo .sd-hero__scribble { animation: scribble-atmet 9s ease-in-out infinite; transform-origin: center; } @keyframes scribble-atmet { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(4deg); } } /* ======================================================== Marken-Auftritt Die riesige Wortmarke knallt aufs Plakat: kommt gross, setzt mit kurzem Nachfedern auf — der «boom». */ html.mo .home-hero__marke.hero-enter { clip-path: none; filter: none; transform: none; opacity: 0; animation-name: marke-slam; animation-duration: .9s; animation-timing-function: cubic-bezier(.2, 1.4, .3, 1); } @keyframes marke-slam { 0% { opacity: 0; transform: scale(1.35); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 75% { transform: scale(.985); } 100% { opacity: 1; transform: scale(1); filter: none; } } /* Equalizer tanzt */ html.mo .eq i { animation: eq-tanzt .9s ease-in-out infinite alternate; transform-origin: bottom; } html.mo .eq i:nth-child(2) { animation-delay: .18s; } html.mo .eq i:nth-child(3) { animation-delay: .32s; } html.mo .eq i:nth-child(4) { animation-delay: .1s; } @keyframes eq-tanzt { from { transform: scaleY(.45); } to { transform: scaleY(1.05); } } /* Konfetti — der «boom» beim ersten Ankommen (JS streut die Teilchen) */ .confetti { position: fixed; inset: 0; z-index: 1500; pointer-events: none; overflow: hidden; overflow: clip; } .confetti i { position: absolute; top: -5vh; left: var(--x, 50%); width: 9px; height: 15px; border-radius: 2px; background: var(--c, var(--pink)); opacity: 0; animation: konfetti-faellt var(--d, 1.8s) ease-in var(--del, 0s) forwards; } @keyframes konfetti-faellt { 0% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(108vh) rotate(calc(var(--r, 0deg) * 4)); } } /* ============================================================== Kino Die Momente im Hero blenden endlos ineinander und zoomen dabei kaum merklich (Ken Burns) — Bewegung, die nie anhaelt und nie hektisch wird. Der Boom-Blitz beim Ankommen (JS) blitzt die Bilder kurz durch. */ html.mo .kino--laeuft .kino__bild { opacity: 0; animation: kino-blende 25s linear calc(var(--ki, 0) * 5s) infinite, kino-zoom 25s ease-in-out calc(var(--ki, 0) * 5s) infinite; } html.mo .kino--laeuft .kino__bild:nth-child(even) { animation-direction: normal, reverse; } @keyframes kino-blende { 0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 27% { opacity: 0; } 100% { opacity: 0; } } @keyframes kino-zoom { 0% { transform: scale(1.06); } 50% { transform: scale(1.15); } 100% { transform: scale(1.06); } } /* Unterseiten: das eine Kopfbild atmet langsam (Ken Burns) */ html.mo .hero--foto .kino__bild, html.mo .sd-hero .kino__bild, html.mo .kino--seite .kino__bild { opacity: 1; /* die Ueberblend-Regel der Startseite gilt hier nicht */ animation: kino-zoom 30s ease-in-out infinite; } /* Boom-Blitz: JS schaltet die Bilder schnell durch, dann startet das Kino */ html.mo .kino--blitz .kino__bild { opacity: 0; transition: none; } html.mo .kino--blitz .kino__bild.ist-dran { opacity: 1; } /* ====================================================== Foto-Strauss Die Abzuege werden beim Laden nacheinander «hingelegt» und atmen danach kaum merklich — bis der Zeiger sie aufrichtet (site.css). */ html.mo .strauss__bild { opacity: 0; animation: strauss-hinlegen .7s cubic-bezier(.16, 1.2, .3, 1) forwards, strauss-treibt calc(12s + var(--si, 0) * 1.9s) ease-in-out calc(var(--si, 0) * -3.7s) infinite, strauss-dreht calc(15s + var(--si, 0) * 2.3s) ease-in-out calc(var(--si, 0) * -5.1s) infinite; animation-delay: calc(.45s + var(--si, 0) * 110ms), calc(var(--si, 0) * -3.7s), calc(var(--si, 0) * -5.1s); } @keyframes strauss-hinlegen { from { opacity: 0; translate: 0 60px; scale: .75; } to { opacity: 1; translate: 0 0; scale: 1; } } /* Dauerhaftes Treiben: jedes Bild wandert in eigenem Rhythmus auf beiden Achsen und dreht kaum merklich mit — der Strauss steht nie still. */ @keyframes strauss-treibt { 0%, 100% { translate: 0 0; } 30% { translate: 9px -12px; } 60% { translate: -10px -5px; } 80% { translate: 4px 7px; } } @keyframes strauss-dreht { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.8deg; } } html.mo .strauss__bild:hover { animation: none; opacity: 1; } /* ===================================================== Erlebnis-Schicht (erlebnis.js) — Cursor-Punkt und Wort-Masken der grossen Titel. */ /* Cursor-Punkt: Differenz-Modus macht ihn auf jeder Flaeche sichtbar */ .cursor-punkt { position: fixed; top: -7px; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 3000; transition: width .25s ease, height .25s ease, top .25s ease, left .25s ease, opacity .3s ease; } .cursor-punkt.ist-gross { width: 56px; height: 56px; top: -28px; left: -28px; } /* Wort-Masken: jedes Wort steigt aus der eigenen Zeile. Das Fenster ist per Padding groesser als die Zeile und wird per negativem Margin kompensiert — sonst schneiden enge Zeilenhoehen (line-height < 1) die Unterlaengen von g, p, y ab. */ .wmaske { display: inline-block; overflow: hidden; overflow: clip; vertical-align: bottom; padding: .14em .08em .22em .04em; margin: -.14em -.08em -.22em -.04em; } .wmaske__wort { display: inline-block; transform: translateY(0); } html.mo .ist-zerlegt .wmaske__wort { transform: translateY(145%); } html.mo .ist-zerlegt.hero-enter .wmaske__wort, html.mo .rv.is-in .ist-zerlegt .wmaske__wort, html.mo .ist-zerlegt.rv.is-in .wmaske__wort, html.mo .ist-zerlegt.is-in .wmaske__wort { transform: translateY(0); transition: transform .85s cubic-bezier(.16, 1.1, .3, 1) calc(var(--wi, 0) * 45ms); } /* Zerlegte Titel brauchen den Standard-Reveal nicht mehr */ html.mo .hero-enter.ist-zerlegt { opacity: 1; transform: none; filter: none; clip-path: none; animation: none; } html.mo .rv.ist-zerlegt, html.mo .rv .ist-zerlegt { opacity: 1; transform: none; filter: none; } /* Woerter starten verdeckt, bis der Hero-Auftritt sie freigibt */ html.mo .hero-enter.ist-zerlegt .wmaske__wort { transform: translateY(145%); animation: wort-auf .85s cubic-bezier(.16, 1.1, .3, 1) forwards; animation-delay: calc(var(--he, 0) * 120ms + var(--wi, 0) * 45ms + .1s); } @keyframes wort-auf { to { transform: translateY(0); } } /* Akzente sind flache Originalfarben — die Masken-Spans erben sie direkt, Sonderregeln fuer Verlaufstext braucht es nicht mehr. */ /* Bildleiste wird von erlebnis.js transformiert */ html.mo .photo-strip { will-change: transform; } /* FAQ-Antwort gleitet herein */ html.mo .faq__a { animation: faq-in .35s cubic-bezier(.2, .8, .3, 1); } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------ Sicherheitsnetz Falls die Systemeinstellung nach dem Laden umgestellt wird. */ @media (prefers-reduced-motion: reduce) { html.mo .rv, html.mo .hero-enter, html.mo body { opacity: 1; transform: none; filter: none; clip-path: none; animation: none; transition: none; } html.mo .home-hero::before, html.mo .hero::before, html.mo .media:not(:has(img)), html.mo .media img, html.mo .watermark, html.mo .home-hero__watermark, html.mo .shedance-teaser__disc, html.mo .shedance-teaser__disc-inner, html.mo .home-hero__scribble, html.mo .sd-hero__scribble, html.mo .sd-hero, html.mo .home-hero, html.mo .home-hero__marke.hero-enter, html.mo .strauss__bild, html.mo .eq i, .confetti i { animation: none; opacity: 1; } }