/* ================================================================== DUNKELKAMMER-INTRO (Blickfänger beim ersten Seitenaufruf) ------------------------------------------------------------------ Vollflächiges Overlay: Rotlichtlampe, Wäscheleine, ein Fotoabzug der Frauenkirche entwickelt sich, dann geht das Licht an und das Overlay blendet zur Seite über. Gesteuert von /intro.js. Sichtbarkeit: standardmäßig display:none. intro.js setzt VOR dem ersten Paint die Klasse `dk-play` auf , wenn das Intro in dieser Sitzung noch nicht lief (sessionStorage "ed-intro-seen"). Ohne JS bleibt das Overlay damit automatisch unsichtbar. Alle Klassen und Keyframes sind mit dk- geprefixt, um Kollisionen mit dem Rest der Seite auszuschließen. ================================================================== */ .dk-gate { display: none; } html.dk-play .dk-gate { display: block; } .dk-gate { --dk-safelight: #c93a2e; position: fixed; inset: 0; z-index: 12000; background: #0c0908; overflow: hidden; transition: opacity 1.1s ease; } .dk-gate.dk-open { opacity: 0; pointer-events: none; } /* Rotlicht-Atmosphäre, weicht bei "Licht an" (.dk-lit) */ .dk-safelight { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% -8%, rgba(201,58,46,0.34), rgba(201,58,46,0.10) 45%, transparent 70%), radial-gradient(ellipse at 50% 60%, rgba(201,58,46,0.06), transparent 65%); opacity: 0; transition: opacity 1.4s ease; } .dk-gate.dk-on .dk-safelight { opacity: 1; } .dk-gate.dk-lit .dk-safelight { opacity: 0.12; } /* Vignette + Korn */ .dk-gate::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(0,0,0,0.6) 100%); } /* --- Rotlicht-Lampe --- */ .dk-lamp { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; opacity: 0; transition: opacity 0.5s ease; } .dk-gate.dk-on .dk-lamp { opacity: 1; } .dk-lamp-cord { width: 2px; height: 26px; background: #241d19; margin: 0 auto; } .dk-lamp-body { position: relative; } .dk-lamp-img { display: block; width: clamp(96px, 14vw, 225px); height: auto; margin: 0 auto; transition: filter 1s ease; } .dk-gate.dk-on .dk-lamp-img { animation: dk-flicker-img 1.1s steps(1, end) 1; } @keyframes dk-flicker-img { 0%, 8% { filter: brightness(0.5); } 9%, 14% { filter: brightness(1); } 15%, 22% { filter: brightness(0.55); } 23% { filter: brightness(1); } } /* Glow-Punkt sitzt auf der Birne im Bild (x 50 % / y 75 %) */ .dk-lamp-bulb { position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); width: 22px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, rgba(255,240,220,0.9), rgba(201,58,46,0.4) 70%, transparent 100%); box-shadow: 0 0 26px 10px rgba(201,58,46,0.55), 0 0 80px 34px rgba(201,58,46,0.25); } .dk-gate.dk-on .dk-lamp-bulb { animation: dk-flicker-on 1.1s steps(1, end) 1; } @keyframes dk-flicker-on { 0%, 8% { opacity: 0; box-shadow: none; } 9%, 14% { opacity: 1; } 15%, 22% { opacity: 0.15; box-shadow: none; } 23% { opacity: 1; } } .dk-gate.dk-lit .dk-lamp-bulb { background: radial-gradient(ellipse at 50% 30%, #fff2d8, #d8c9a0 60%, #8a7c5a); box-shadow: 0 0 30px 12px rgba(239,231,212,0.35); transition: background 1s ease, box-shadow 1s ease; } .dk-gate.dk-lit .dk-lamp-img { filter: brightness(1.18) saturate(0.8); } /* --- Wäscheleine --- */ .dk-line { position: absolute; left: -4%; right: -4%; top: 17%; height: 44px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s ease 0.3s; } .dk-gate.dk-on .dk-line { opacity: 1; } .dk-line svg { width: 100%; height: 100%; display: block; } .dk-line path { fill: none; stroke: #3c322b; stroke-width: 2; } /* --- Negativstreifen links --- */ .dk-negstrip { position: absolute; top: calc(17% + 18px); left: clamp(4%, 10vw, 16%); width: clamp(52px, 9vw, 78px); z-index: 2; transform: rotate(2.5deg); transform-origin: top center; opacity: 0; transition: opacity 0.6s ease 0.5s; animation: dk-sway 7s ease-in-out infinite; } .dk-gate.dk-on .dk-negstrip { opacity: 0.9; } .dk-gate.dk-lit .dk-negstrip { opacity: 0.25; transition: opacity 1s ease; } .dk-negstrip img { display: block; width: 100%; height: auto; } /* --- Zweiter, leerer Abzug rechts --- */ .dk-print2 { position: absolute; top: calc(17% + 14px); right: clamp(2%, 7vw, 12%); width: clamp(84px, 15vw, 140px); z-index: 2; transform: rotate(-2deg); transform-origin: top center; animation: dk-sway 8s ease-in-out infinite reverse; opacity: 0; transition: opacity 0.6s ease 0.7s; } .dk-gate.dk-on .dk-print2 { opacity: 0.85; } .dk-gate.dk-lit .dk-print2 { opacity: 0.3; transition: opacity 1s ease; } .dk-print2 img { display: block; width: 100%; height: auto; } /* --- Entwicklerschale, unten angeschnitten (an eigener Höhe verankert) --- */ .dk-tray { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 42%); width: clamp(340px, 56vw, 660px); z-index: 2; opacity: 0; transition: opacity 0.8s ease 0.9s; pointer-events: none; } .dk-gate.dk-on .dk-tray { opacity: 0.9; } .dk-gate.dk-lit .dk-tray { opacity: 0.28; transition: opacity 1s ease; } .dk-tray img { display: block; width: 100%; height: auto; } /* --- Hängender Hauptabzug --- */ .dk-print-hang { position: absolute; left: 50%; top: calc(17% + 26px); transform: translateX(-50%); z-index: 3; transform-origin: top center; animation: dk-sway 6s ease-in-out infinite; opacity: 0; transition: opacity 0.5s ease 0.6s; } .dk-gate.dk-on .dk-print-hang { opacity: 1; } @keyframes dk-sway { 0%, 100% { rotate: -1.1deg; } 50% { rotate: 1.3deg; } } /* Holzklammer: 180° gedreht, Greif-Maul aufs Papier, Feder auf Leinenhöhe */ .dk-peg { position: absolute; top: -48px; left: 50%; transform: translateX(-50%) rotate(178deg); width: 24px; z-index: 4; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); } .dk-peg img { display: block; width: 100%; height: auto; } /* Fotopapier mit weißem Rand */ .dk-print { position: relative; width: min(64vw, 300px, 46vh * 0.749); background: #f4ede0; padding: 4.2% 4.2% 13% 4.2%; box-shadow: 0 14px 34px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.5); } .dk-print-photo { position: relative; aspect-ratio: 382 / 510; overflow: hidden; background: #efe9db; } .dk-print-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(12px) contrast(0.25) brightness(2.1) sepia(0.5); } /* Entwicklung: Filter-Verlauf + fleckig wachsende Maske */ .dk-gate.dk-develop .dk-print-photo img { -webkit-mask-image: radial-gradient(circle at 42% 38%, #000 0%, transparent 0%), radial-gradient(circle at 68% 72%, #000 0%, transparent 0%); mask-image: radial-gradient(circle at 42% 38%, #000 0%, transparent 0%), radial-gradient(circle at 68% 72%, #000 0%, transparent 0%); animation: dk-develop 5.2s cubic-bezier(0.4, 0.1, 0.4, 1) forwards, dk-blotch 3.4s ease-out forwards; } @keyframes dk-develop { 0% { opacity: 0; filter: blur(12px) contrast(0.25) brightness(2.1) sepia(0.5); } 22% { opacity: 0.3; filter: blur(9px) contrast(0.4) brightness(1.7) sepia(0.45); } 55% { opacity: 0.72; filter: blur(3.5px) contrast(0.72) brightness(1.25) sepia(0.35); } 82% { opacity: 0.94; filter: blur(0.8px) contrast(0.94) brightness(1.05) sepia(0.28); } 100% { opacity: 1; filter: blur(0) contrast(1.04) brightness(1) sepia(0.22); } } @keyframes dk-blotch { 0% { -webkit-mask-image: radial-gradient(circle at 42% 38%, #000 4%, transparent 16%), radial-gradient(circle at 68% 72%, #000 2%, transparent 12%); mask-image: radial-gradient(circle at 42% 38%, #000 4%, transparent 16%), radial-gradient(circle at 68% 72%, #000 2%, transparent 12%); } 100% { -webkit-mask-image: radial-gradient(circle at 42% 38%, #000 120%, transparent 180%), radial-gradient(circle at 68% 72%, #000 120%, transparent 180%); mask-image: radial-gradient(circle at 42% 38%, #000 120%, transparent 180%), radial-gradient(circle at 68% 72%, #000 120%, transparent 180%); } } /* Rotschleier auf dem Abzug bis "Licht an" */ .dk-print-redwash { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(201, 58, 46, 0.38); mix-blend-mode: multiply; transition: opacity 1.2s ease; } .dk-gate.dk-lit .dk-print-redwash { opacity: 0; } /* Handschriftliche Notiz auf dem unteren Papierrand */ .dk-print-note { position: absolute; left: 0; right: 0; bottom: 1.5%; height: 11%; display: flex; align-items: center; justify-content: center; font-family: 'Caveat', cursive; font-size: clamp(19px, 5.6vw, 27px); color: #2c2620; transform: rotate(-1.6deg); clip-path: inset(0 100% 0 0); } .dk-gate.dk-note .dk-print-note { animation: dk-write 1.3s cubic-bezier(0.3, 0, 0.6, 1) forwards; } @keyframes dk-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } } /* Staubpartikel im Rotlicht */ .dk-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .dk-dust span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 160, 140, 0.5); animation: dk-float 9s linear infinite; opacity: 0; } .dk-gate.dk-on .dk-dust span { opacity: 1; } .dk-dust span:nth-child(1) { left: 30%; top: 24%; animation-duration: 11s; } .dk-dust span:nth-child(2) { left: 62%; top: 18%; animation-duration: 9s; animation-delay: -3s; width: 2px; height: 2px; } .dk-dust span:nth-child(3) { left: 46%; top: 40%; animation-duration: 13s; animation-delay: -6s; width: 2px; height: 2px; } .dk-dust span:nth-child(4) { left: 70%; top: 34%; animation-duration: 10s; animation-delay: -2s; } .dk-dust span:nth-child(5) { left: 38%; top: 12%; animation-duration: 12s; animation-delay: -8s; width: 2px; height: 2px; } @keyframes dk-float { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, 26px); } 100% { transform: translate(-6px, 54px); opacity: 0; } } /* Kopfzeile */ .dk-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 13px clamp(14px, 3vw, 24px) 11px; font-size: 10px; letter-spacing: 0.12em; color: rgba(239, 231, 212, 0.5); } .dk-brand { font-family: var(--font-display, 'Special Elite', monospace); color: rgba(239,231,212,0.75); letter-spacing: 0.1em; } /* "Licht an": Raum hellt zum Papierton auf */ .dk-gate.dk-lit { background: var(--paper-deep); transition: background 1.2s ease, opacity 1.1s ease; } .dk-gate.dk-lit .dk-head { color: var(--ink-faint); transition: color 1s ease; } .dk-gate.dk-lit .dk-brand { color: var(--ink-soft); } @media (max-width: 520px) { .dk-print2 { display: none; } .dk-negstrip { left: -14px; width: 46px; transform: rotate(4deg); } .dk-print { width: min(58vw, 300px, 44vh * 0.749); } } @media (prefers-reduced-motion: reduce) { .dk-print-hang, .dk-negstrip, .dk-print2 { animation: none !important; } .dk-gate.dk-develop .dk-print-photo img { animation-duration: 1.6s, 1.2s; } .dk-gate.dk-note .dk-print-note { animation-duration: 0.4s; } .dk-gate.dk-on .dk-lamp-bulb, .dk-gate.dk-on .dk-lamp-img { animation: none; } .dk-dust { display: none; } }