diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index fbf5211..f8f2692 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -6,7 +6,8 @@ font-display: swap; } -/* === Adventskalender Türchen (finale Version mit Glitzern) === */ +/* === ADVENTSKALENDER TÜRCHEN – FINALE VERSION MIT GLITTERSTAUB === */ + .door { position: absolute; display: flex; @@ -14,11 +15,11 @@ justify-content: center; aspect-ratio: 1 / 1; - /* Basis-Verlauf – CI-Farben mit Transparenz */ + /* Verlauf nach Bratonien-CI */ background: linear-gradient( 180deg, - color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), - color-mix(in srgb, var(--ci-blue) 35%, transparent) + color-mix(in srgb, var(--ci-darkgreen) 60%, transparent), + color-mix(in srgb, var(--ci-blue) 60%, transparent) ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); @@ -39,60 +40,64 @@ cursor: pointer; transition: - transform 0.2s ease, - box-shadow 0.2s ease, - background 0.2s ease; + transform 0.25s ease, + box-shadow 0.25s ease; } -/* === Keyframes === */ -@keyframes glitter-sheen { - 0% { background-position: -200% 0; opacity: 0.0; } - 30% { opacity: 1; } - 70% { opacity: 1; } - 100% { background-position: 200% 0; opacity: 0.0; } -} - -@keyframes sparkle { - 0%,100% { opacity: 0; } - 40%,60% { opacity: 1; } -} - -/* === Hover Effekte === */ +/* === Hover-Grundreaktion === */ .door:hover { transform: scale(1.05); box-shadow: - 0 0 16px color-mix(in srgb, var(--ci-gold) 60%, transparent), + 0 0 18px color-mix(in srgb, var(--ci-gold) 60%, transparent), inset 0 0 10px rgba(255,255,255,0.35); } -/* Goldener Schimmer über dem Türchen */ +/* === Goldener Schimmer (Lichtschein) === */ +@keyframes glitter-sheen { + 0% { background-position: -150% 0; opacity: 0.0; } + 25% { opacity: 1; } + 75% { opacity: 1; } + 100% { background-position: 150% 0; opacity: 0.0; } +} + .door:hover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; - background: linear-gradient( - 120deg, - transparent 0%, - color-mix(in srgb, var(--ci-gold) 60%, transparent) 45%, - transparent 90% - ); + background-image: + repeating-linear-gradient( + 115deg, + transparent 0%, + color-mix(in srgb, var(--ci-gold) 30%, transparent) 2%, + transparent 4%, + color-mix(in srgb, var(--ci-creamwhite) 25%, transparent) 5%, + transparent 7% + ); background-size: 200% 100%; - animation: glitter-sheen 1.8s ease-in-out 1; + mix-blend-mode: screen; + animation: glitter-sheen 1.6s linear 1; + z-index: 1; /* unter dem Staub */ +} + +/* === Feenstaub-Glitter === */ +@keyframes fairy-glitter { + 0% { opacity: 0; transform: scale(0.6) translateY(0); } + 10% { opacity: 1; } + 40% { opacity: 0.9; transform: scale(1.1) translateY(-5%); } + 100% { opacity: 0; transform: scale(1.6) translateY(-20%); } } -/* Kleine Glitzerpunkte */ .door:hover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; - background-image: - radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%), - radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%); - background-size: 10% 10%, 8% 8%; - background-position: 40% 30%, 70% 65%; - animation: sparkle 1.8s ease-in-out 1; + z-index: 2; /* über dem Schimmer, unter dem Text */ + opacity: 0; + background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%); + filter: url(#sparkle-filter); + animation: fairy-glitter 1.6s ease-out; } \ No newline at end of file