/* ══════════════════════════════════════════════════════════════════ v16/intro.css — Startscreen nach Ferrari-Vorbild. Gestalt-Prinzip vom Original uebernommen: REINES SCHWARZ, ein KLEINES zentriertes Logo, sonst NICHTS. Keine Gradients, keine Linien, keine Zierelemente. Die Zurueckhaltung IST die Wirkung — ein grosses Logo oder Deko wuerde es sofort billiger machen. BEWUSST KOMPLETT CSS-GETRIEBEN (keyframes, kein GSAP): - laeuft auf dem Compositor, stallt also nicht, wenn three.js beim Laden den Main-Thread blockiert (genau dieser Fehler hat uns beim Hero-Reveal eingeholt) - faellt JS komplett aus, spielt die Animation trotzdem und der Vorhang verschwindet -> die Seite kann nie "zugesperrt" bleiben JS macht nur EINES: die Klasse `intro-skip` setzen, wenn das Intro in dieser Session schon lief (siehe Inline-Script im ). Zeitplan (gesamt ~1,95 s): 0,10 s Logo atmet ein (fade + minimaler scale) 0,55 s Gold-Shine wandert einmal durch die Wortmarke 1,15 s Logo zieht sich zurueck, Schwarz blendet ab -> Seite frei ══════════════════════════════════════════════════════════════════ */ #rigl-intro { position: fixed; inset: 0; z-index: 99999; background: #000; /* rein schwarz, wie beim Vorbild */ display: grid; place-items: center; animation: introOut 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards; } /* Abgang: weiches Abblenden statt Wipe-Effekt. Das Vorbild ist kompromisslos schlicht — ein Wisch waere schon zu viel Geste. visibility + pointer-events am Ende: kein unsichtbarer Klick-Blocker. */ @keyframes introOut { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* ── Wortmarke: KLEIN. Das ist der entscheidende Hebel fuer die Hochwertigkeit — Ferraris Pferd nimmt nur wenige Prozent der Bildbreite ein. ── */ .intro-logo { position: relative; display: block; width: clamp(200px, 26vw, 360px); animation: introLogoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both, introLogoOut 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards; } .intro-logo img { display: block; width: 100%; height: auto; } @keyframes introLogoIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } /* Zieht sich beim Abgang minimal zurueck — wirkt wie eine Uebergabe an die Seite statt wie blosses Ausschalten. */ @keyframes introLogoOut { to { opacity: 0; transform: scale(1.06); } } /* Gold-Shine: EIN Lichtstreifen wandert durch die Wortmarke. Per mask auf die Logo-Silhouette beschnitten, liegt also exakt IM Logo statt als Balken darueber. Das ist der einzige Effekt — mehr wuerde die Strenge kaputtmachen. */ .intro-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: url('../assets/rigl-logo-cropped.png'); mask-image: url('../assets/rigl-logo-cropped.png'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 222, 0.85) 50%, transparent 60%); background-size: 260% 100%; background-position: 160% 0; animation: introShine 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both; } @keyframes introShine { to { background-position: -60% 0; } } /* ── Abschaltungen ── `intro-skip`: in dieser Session schon gesehen (Inline-Script im ). reduced-motion: gar kein Intro. In beiden Faellen display:none — nicht nur ausblenden, sonst bliebe ein unsichtbarer Klick-Blocker. */ html.intro-skip #rigl-intro { display: none; } @media (prefers-reduced-motion: reduce) { #rigl-intro { display: none; } }