/* ============================================================ Disco-Experience v2 — WebGL auf zwei Ebenen (js/disco-scene.js) ------------------------------------------------------------ Geometrie der O-Aussparungen in logo_text_only.png (1024²): linke O: cx 42.5% | rechte O: 57.7% | Ø ~24.2% Diese Werte sind zentral hier gepflegt; JS liest sie aus. Layering: .disco-canvas--bg (fixed, z0) Atmosphäre, God Rays, kleine Logo-Kugeln, Getränkesäule main/header/footer (z1+) Content .disco-canvas--fg (fixed, z2) RIESIGE Kugeln + Bloom, VOR dem Content (Logo-Overlap) .site-header (z100) immer bedienbar Die O-Aussparungen im Logo-PNG sind transparent — die kleinen WebGL-Kugeln liegen HINTER der Typografie und scheinen durch die Löcher: echte Maskierung, kein aufgelegtes Bild. Default (ohne JS / reduced motion / kein WebGL): statisches Logo mit PNG-Kugeln in den Aussparungen. Erst html.js-disco-on (Inline-Script im ) aktiviert Runway + Choreografie. ============================================================ */ :root { --o-l-x: 42.5%; --o-l-y: 39%; /* linke O (per Flood-Fill vermessen) */ --o-r-x: 57.7%; --o-r-y: 37.3%; /* rechte O */ --o-d: 24.2%; /* Fallback-PNG/Innenschatten: liegen HINTER der Typo, daher bewusst größer als das Loch (füllt es sicher aus) */ --o-d-gl: 21.5%; /* WebGL-Kugeln: liegen VOR der Typo und sind selbst die Os. Lochgröße per Flood-Fill: 16.1/16.5%. Bewusst ~20% größer als früher (17.9% -> 21.5%), damit die Kugeln satt und clean auf dem Logo sitzen statt zu klein im O zu wirken. */ --o-gl-pull: 1.1%; /* Beide GL-Kugeln rücken um diesen Betrag zur Mitte: sie sollen sich ÜBERLAPPEN, nicht nebeneinanderstehen. Der Z-Versatz im JS entscheidet, welche vorne liegt. */ } /* ---------- WebGL-Canvases: fix, hinter bzw. vor dem Content ---------- */ .disco-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; } .disco-canvas--bg { z-index: 0; } .disco-canvas--fg { z-index: 2; } /* Die Canvas ist bis zum ersten gezeichneten Frame leer — erst dann einblenden, sonst überdeckt sie das Ladebild mit einer schwarzen Fläche. */ .disco-canvas { opacity: 0; transition: opacity .45s var(--ease); } .disco-ready .disco-canvas { opacity: 1; } /* ============================================================ LADEZUSTAND ------------------------------------------------------------ Zwischen First Paint und dem ersten WebGL-Frame liegt spürbar Zeit: three.js laden und parsen, Env-Map per PMREM backen, vier Kugeln mit tausenden Kachel-Instanzen bauen, Shader kompilieren. Bis html.disco-ready gesetzt ist, bleibt der Hero bewusst leer (nur Hintergrund) — Logo, Tagline, O-Schatten und die statischen PNG-Kugeln sind ausgeblendet. Kein Platzhalterbild blitzt vor der 3D-Szene auf. Sobald die Szene ihren ersten Frame hat, übernimmt sie per Crossfade und die Choreografie startet. ============================================================ */ .js-disco-on:not(.disco-live) .hero__logo-img, .js-disco-on:not(.disco-live) .hero__tagline { opacity: 0 !important; } .js-disco-on:not(.disco-live) .hero__o-shadow { opacity: 0; } /* Während des WebGL-Ladefensters bleiben die statischen PNG-Kugeln unsichtbar (kein "Aufblitzen" eines anderen Kugel-Bilds vor der 3D-Szene) — der Hero zeigt bis zum ersten Frame nur den Hintergrund. Als echter Fallback ohne JS/WebGL/reduced motion bleiben sie aktiv (Regel weiter unten, greift nur ohne .js-disco-on). */ .js-disco-on:not(.disco-live) .hero__ball-fallback { opacity: 0; } .js-disco-on .hero__ball-fallback, .js-disco-on .hero__o-shadow { transition: opacity .3s var(--ease); } .js-disco-on.disco-live .hero__ball-fallback, .js-disco-on.disco-live .hero__o-shadow { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; } /* GSAP ScrollTrigger misst bei CSS-Smooth-Scrolling falsch (animierte Scroll-Position während refresh) -> im WebGL-Modus übernimmt die Szene selbst das weiche Nachziehen (Damping). */ html.js-disco-on { scroll-behavior: auto; } .js-disco-on .site-header, .js-disco-on main, .js-disco-on .site-footer { position: relative; z-index: 1; } .js-disco-on .site-header { z-index: 100; } /* Sektionen mit Hintergrund werden leicht transluzent, damit die Ambient-Kugeln, God Rays und Lichtpunkte durchscheinen */ .js-disco-on .section--alt { background: rgba(18, 10, 42, .60); } /* Ticket-Banner sitzt direkt unter dem Hero — genau dort, wo die FG-Canvas (z-index 2) ihre Kugeln durchs Bild fliegen lässt. Ohne eigene Ebene verschwindet er dahinter. z-index 3 wie beim Wochen-Highlight: der wichtigste Klick der Seite bleibt immer sichtbar. */ .js-disco-on .ticket-section { z-index: 3; } /* ============================================================ HEADER-AUFTRITT — erst nach der Hero-Animation ------------------------------------------------------------ Beim Seitenaufruf ist der Header komplett unsichtbar (Logo, Navigation, Reservieren). Sichtbar ist nur der BOOGIE!-Button. Erst wenn die Kugeln vollständig im Logo angedockt sind und der Seiteninhalt beginnt, fährt der Header per Fade + Slide ein. Wichtig: der Header bleibt dabei die ganze Zeit im Fluss — nur opacity/transform ändern sich. Dadurch springt beim Einblenden nichts (kein CLS). ============================================================ */ .has-hero-intro .site-header { opacity: 0; visibility: hidden; transform: translateY(-100%); pointer-events: none; } .has-hero-intro.is-hero-done .site-header { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .5s var(--ease), transform .65s var(--ease), background .3s, border-color .3s; } /* Rücksprung an den Seitenanfang: sofort wieder verstecken, ohne dass der Header rückwärts herausanimiert wirkt. */ .has-hero-intro:not(.is-hero-done) .site-header { transition: none; } /* ---------- BOOGIE!-Button (Einstieg) ---------- Ohne Hero-Intro (kein WebGL, reduced motion, Unterseiten) gibt es nichts anzuscrollen -> Button bleibt weg. */ html:not(.has-hero-intro) .boogie-btn { display: none; } .boogie-btn { position: fixed; left: 50%; top: clamp(22px, 5vh, 46px); transform: translate(-50%, 0); z-index: 120; /* über beiden Canvases */ padding: 1.05em 2.6em; border: 0; border-radius: var(--r-btn); background: var(--grad-primary); color: #fff; font-family: var(--font-body); font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 10px 34px -8px rgba(255, 46, 154, .75), 0 0 46px rgba(155, 48, 255, .40); animation: boogiePulse 2.8s var(--ease) infinite; transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .35s var(--ease), letter-spacing .35s var(--ease); } .boogie-btn:hover { transform: translate(-50%, -3px) scale(1.04); letter-spacing: .21em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .30) inset, 0 16px 44px -8px rgba(255, 46, 154, .9), 0 0 70px rgba(155, 48, 255, .6); animation-play-state: paused; } .boogie-btn:active { transform: translate(-50%, 0) scale(.98); } /* Sobald gescrollt wird (oder der Button gedrückt wurde), tritt er ab */ .boogie-btn.is-gone { opacity: 0; transform: translate(-50%, -14px) scale(.94); pointer-events: none; } @keyframes boogiePulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 34px -8px rgba(255,46,154,.75), 0 0 46px rgba(155,48,255,.40); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.26) inset, 0 12px 40px -8px rgba(255,46,154,.9), 0 0 66px rgba(155,48,255,.62); } } @media (prefers-reduced-motion: reduce) { .boogie-btn { animation: none; } } /* ---------- Hero-Bühne ---------- */ .hero { position: relative; } .js-disco-on .hero { height: 260vh; } /* Scroll-Strecke fürs Scrubbing */ .hero__stage { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding-block: var(--sp-10); } .js-disco-on .hero__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; padding-block: 0; overflow: hidden; } .hero__logo { --logo-w: min(820px, 90vw); position: relative; width: var(--logo-w); aspect-ratio: 1 / 1; /* quadratische Logo-Box (1024²) */ } .hero__logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; /* Typo VOR den kleinen Kugeln */ filter: drop-shadow(0 0 22px rgba(155, 48, 255, .30)); will-change: opacity, transform; } .js-disco-on .hero__logo-img { opacity: 0; } /* per JS choreografiert */ /* ---------- Ortszusatz „in Stade" ---------- Sitzt unten rechts an der Wortmarke, leicht schräg auf der Linie, die „Bar" vorgibt. Die Koordinaten sind so gewählt, dass die Schrift nur den schwarzen Spritzer-Rand des Logos streift — „Boogie" und „Bar" bleiben frei. Größe/Position hängen an --logo-w, damit der Zusatz auf jeder Bildschirmbreite exakt gleich am Logo klebt. */ .hero__tagline { position: absolute; left: 80.5%; top: 64.5%; transform: translate(-50%, -50%) rotate(-7deg); transform-origin: 50% 50%; z-index: 3; /* über der Typo-Ebene */ white-space: nowrap; pointer-events: none; font-family: var(--font-display); font-size: calc(var(--logo-w) * .048); line-height: 1; letter-spacing: .04em; color: var(--gold); text-shadow: 0 0 .04em rgba(13, 6, 32, .95), /* trennt sauber vom Spritzer */ 0 .035em .05em rgba(13, 6, 32, .8), 0 0 .55em rgba(255, 194, 75, .45); /* warmes Neon, kein Kreis */ } .js-disco-on .hero__tagline { opacity: 0; } /* per JS mit dem Logo */ /* Innenschatten der O-Aussparungen: setzt die kleinen Kugeln optisch IN die Buchstaben (Kontaktschatten zwischen Typo-Ebene und Kugel). Liegt über der BG-Canvas, unter dem Logo -> nur im Loch sichtbar. */ .hero__o-shadow { position: absolute; width: calc(var(--o-d) * 1.03); aspect-ratio: 1 / 1; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 58%, rgba(6, 3, 14, .38) 82%, rgba(6, 3, 14, .78) 97%); opacity: 0; /* per JS mit dem Logo-Fade */ } .hero__o-shadow--l { left: var(--o-l-x); top: var(--o-l-y); } .hero__o-shadow--r { left: var(--o-r-x); top: var(--o-r-y); } :root:not(.js-disco-on) .hero__o-shadow { opacity: 1; } /* Im WebGL-Modus liegen die Kugeln AUF dem Logo -> kein Schatten nötig. Erst ausblenden, wenn die Szene übernimmt (s. Ladezustand oben). */ .js-disco-on.disco-live .hero__o-shadow { visibility: hidden; } /* Statischer Fallback: PNG-Kugeln in den Aussparungen (kein JS/WebGL) */ .hero__ball-fallback { position: absolute; width: var(--o-d); aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; transform: translate(-50%, -50%); z-index: 1; /* hinter der Typo-Ebene */ box-shadow: 0 0 34px rgba(255, 255, 255, .15), 0 0 60px rgba(155, 48, 255, .22); } .hero__ball-fallback--l { left: var(--o-l-x); top: var(--o-l-y); } .hero__ball-fallback--r { left: var(--o-r-x); top: var(--o-r-y); } /* Nur noch versteckt, sobald die Szene läuft — davor sind sie das Ladebild (s. Ladezustand oben). */ .js-disco-on.disco-live .hero__ball-fallback { visibility: hidden; } /* ---------- Hero-Content ---------- */ .hero__content { position: absolute; left: 50%; bottom: clamp(6vh, 12vh, 16vh); transform: translateX(-50%); width: min(720px, 92vw); text-align: center; z-index: 3; } .js-disco-on .hero__content { opacity: 0; } /* per JS zum Schluss */ :root:not(.js-disco-on) .hero__content { position: relative; left: auto; bottom: auto; transform: none; margin-top: var(--sp-6); } .hero__sub { font-size: clamp(1.05rem, 2.3vw, 1.4rem); color: var(--text); margin-top: var(--sp-2); } .hero__cta { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); } /* Dezenter Scroll-Pfeil statt Buttons: der fertige Logo-Zustand soll ruhig bleiben (läuft auch mal dauerhaft auf einem Bildschirm). Trotzdem ein echtes