/* ========================================================================== atmosphere.css Notturno di Modena Atmosphaeren-Schicht: Film-Korn, Licht-Blooms, Rand-Vignette, Dreizack-Aura, Hero-Licht-Sweep, Karbon-Gewebe und Chrom-Hairline. Nur kompositorfreundliche Eigenschaften (transform, opacity). Jede Bewegung respektiert prefers-reduced-motion. Setzt die Farb-Tokens der Basis voraus. Laedt nach den Komponenten, vor den Seiten-Styles. ========================================================================== */ /* --- Film-Korn ----------------------------------------------------------- Fixierter Overlay in . Feines fraktales Rauschen (feTurbulence), rund 5 Prozent ueber soft-light. Der Overlay ist ueberdimensioniert, damit die Bewegung keine Kanten zeigt. */ .grain{ position:fixed; inset:-120px; z-index:200; pointer-events:none; opacity:.05; mix-blend-mode:soft-light; background:url(/assets/img/grain.svg) repeat; background-size:160px 160px; will-change:transform; } @media (prefers-reduced-motion:no-preference){ .grain{ animation:dmc-grain 5s steps(5) infinite; } } @keyframes dmc-grain{ 0%{ transform:translate3d(0,0,0) } 20%{ transform:translate3d(-14px,8px,0) } 40%{ transform:translate3d(10px,-12px,0) } 60%{ transform:translate3d(-8px,10px,0) } 80%{ transform:translate3d(12px,6px,0) } 100%{ transform:translate3d(0,0,0) } } /* --- Rand-Vignette ------------------------------------------------------- Fixierter, nicht klickbarer Rahmen, der nur die aeussersten Ecken sanft abdunkelt. Die Mitte bleibt frei, damit Text nicht an Kontrast verliert. */ .vignette{ position:fixed; inset:0; z-index:150; pointer-events:none; background:radial-gradient(135% 108% at 50% 40%, transparent 60%, color-mix(in oklab, var(--bg) 76%, #000) 100%); } /* --- Licht-Blooms -------------------------------------------------------- Weiche Lichtpfuetzen als Backdrop in positionierten Sektionen. Azur (Nacht) oben, Kupfer (Ankunft) unten. Deckung 8 bis 12 Prozent. Elternelement braucht position:relative; Inhalt darueber mit z-index:1. */ .bloom{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background: radial-gradient(42% 40% at 16% 8%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%), radial-gradient(46% 42% at 88% 96%, color-mix(in oklab, var(--rame) 10%, transparent), transparent 74%); } .bloom--accent{ background:radial-gradient(52% 48% at 50% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 72%); } .bloom--rame{ background:radial-gradient(54% 50% at 50% 100%, color-mix(in oklab, var(--rame) 12%, transparent), transparent 74%); } .bloom--soft{ opacity:.6; } /* --- Hero-Licht-Sweep ---------------------------------------------------- Ein Scheinwerferstreif zieht beim Laden einmal von links nach rechts. Traeger .light-sweep in eine positionierte Sektion legen. */ .light-sweep{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .light-sweep::before{ content:""; position:absolute; top:-25%; bottom:-25%; left:0; width:36%; background:linear-gradient(100deg, transparent, color-mix(in oklab, var(--accent-glow) 26%, transparent) 46%, color-mix(in oklab, var(--rame-luce) 16%, transparent) 56%, transparent); filter:blur(26px); transform:translate3d(-160%,0,0) skewX(-8deg); opacity:0; } @media (prefers-reduced-motion:no-preference){ .light-sweep::before{ animation:dmc-sweep 2.6s cubic-bezier(.16,1,.3,1) .25s both; } } @keyframes dmc-sweep{ 0%{ transform:translate3d(-160%,0,0) skewX(-8deg); opacity:0 } 28%{ opacity:1 } 100%{ transform:translate3d(360%,0,0) skewX(-8deg); opacity:0 } } /* --- Dreizack-Aura ------------------------------------------------------- .trident traegt die Marke ueber currentColor. Klein (Nav) schlicht, gross (Hero) mit Aura, feiner Chrom-Hairline und ruhigem Atmen. */ .trident{ display:inline-block; color:var(--accent); vertical-align:middle; } .trident--nav{ width:1.75rem; height:auto; color:var(--text); transition:color .3s ease; } .trident--nav:hover{ color:var(--accent); } .trident--hero{ width:clamp(9rem, 18vw, 15rem); height:auto; color:var(--accent-glow); filter: drop-shadow(0 0 26px color-mix(in oklab, var(--accent) 55%, transparent)) drop-shadow(0 0 64px color-mix(in oklab, var(--accent) 20%, transparent)); will-change:transform, opacity; } .trident--hero path, .trident--hero circle{ stroke-width:1.3; } @media (prefers-reduced-motion:no-preference){ .trident--hero{ animation:dmc-breathe 7s ease-in-out infinite; } } @keyframes dmc-breathe{ 0%,100%{ transform:scale(1); opacity:.92 } 50% { transform:scale(1.025); opacity:1 } } /* --- Karbon-Gewebe ------------------------------------------------------- Ultrafeines Gewebe fuer ausgewaehlte Flaechen. Sehr zurueckhaltend. */ .carbon{ background-color:var(--surface); background-image: repeating-linear-gradient( 45deg, color-mix(in oklab, #000 55%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, color-mix(in oklab, #000 55%, transparent) 0 1px, transparent 1px 4px); background-size:9px 9px; } /* --- Chrom-Hairline ------------------------------------------------------ Duenne Verlaufslinien und Rahmen mit Chrom bzw. Messing-Anmutung. */ .chrome-line{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--rame), var(--rame-luce), color-mix(in oklab, var(--rame-luce) 80%, #fff), var(--rame), transparent); opacity:.55; } .chrome-frame{ border:1px solid transparent; border-image:linear-gradient(135deg, var(--rame-luce), color-mix(in oklab, var(--text) 60%, transparent), var(--rame)) 1; } /* --- Signatur-Grafiken (optionale Deko-Helfer) --------------------------- Verdrahten die abstrakten Grafiken als dezente Deko. pointer-events:none, in eine positionierte Sektion legen, Inhalt darueber mit z-index:1. */ .atmos-streaks, .atmos-arc, .atmos-watermark{ position:absolute; pointer-events:none; z-index:0; } .atmos-streaks{ inset:0; background:center / cover no-repeat url(/assets/img/speed-streak.svg); } .atmos-arc{ inset:0; background:center / cover no-repeat url(/assets/img/speed-arc.svg); } .atmos-watermark{ width:min(48vw, 32rem); aspect-ratio:2 / 3; opacity:.5; background:center / contain no-repeat url(/assets/img/ghost-trident.svg); } /* --- Bewegungsschutz ------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .grain{ animation:none; } .trident--hero{ animation:none; } .light-sweep::before{ animation:none; opacity:0; } }