homepage, new newsletter section, multilang support

resources/css/app.css

@@ -47,6 +47,15 @@ @keyframes back-to-top-spin {
     }
 }
 
+@keyframes text-flicker-in {
+    0%, 60% {
+        opacity: 0;
+    }
+    70%, 100% {
+        opacity: 1;
+    }
+}
+
 /* ═══════════════════════════════════════════════════════════════════
    COMPONENTS
    ═══════════════════════════════════════════════════════════════════ */
@@ -107,6 +116,12 @@ @layer components {
         color: theme(colors.neutral.200);
     }
 
+    /* ── Hero star — same burst shape/spin as back-to-top, always on ─ */
+    .hero-star {
+        transform-origin: center;
+        animation: back-to-top-spin 7s infinite linear;
+    }
+
     /* ── Back to top ──────────────────────────────────────────────── */
     .back-to-top {
         opacity: 0;
@@ -286,4 +301,26 @@ @layer components {
     .btn-primary:hover::after {
         transform: translate(0, 0);
     }
+
+    /* ── Text flicker — word switches from regular to italic/bold once
+       its .is-visible ancestor appears; add data-text="<same word>" ── */
+    .text-flicker {
+        position: relative;
+        display: inline-block;
+    }
+
+    .text-flicker::after {
+        content: attr(data-text);
+        position: absolute;
+        inset: 0;
+        font-weight: 700;
+        font-style: italic;
+        font-weight: extra-bold;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .is-visible .text-flicker::after {
+        animation: text-flicker-in 0.7s ease 3 forwards;
+    }
 }