adventskalender/2025/css/main.css aktualisiert

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;
 }