From acf97ae05d192b4998f5b12851ba6bff8b372da0 Mon Sep 17 00:00:00 2001
From: alwaysmesmerizingyou <alwaysmesmerizingyou@gmail.com>
Date: Fri, 21 Aug 2026 19:28:21 -0700
Subject: [PATCH] revamped

---
 index.html                                 | 72 +++++++++++++++-------
 llms.txt                                   |  6 ++
 src/scripts/animations/fluid-byte-field.js |  6 +-
 src/scripts/animations/marquee-loop.js     |  2 +-
 src/scripts/components/faq-item.js         |  1 +
 src/scripts/components/script-card.js      |  2 +-
 src/scripts/components/showcase-item.js    |  2 +-
 src/scripts/components/testimonial-card.js |  2 +-
 src/scripts/config/faq-data.js             | 28 ++++-----
 src/scripts/sections/executors.js          |  2 +-
 src/scripts/sections/partners.js           |  4 +-
 src/scripts/sections/testimonials.js       |  2 +-
 src/styles/main.css                        | 36 +----------
 src/styles/sections/hero-content.css       |  3 -
 src/styles/utilities/reveal.css            |  6 +-
 15 files changed, 82 insertions(+), 92 deletions(-)
 create mode 100644 llms.txt

diff --git a/index.html b/index.html
index d42223a..335a7bd 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="referrer" content="no-referrer-when-downgrade">
 
-    <!-- Primary SEO Meta Tags -->
     <title>Vyla Home - Self-Hosted Desktop Media Center | Serverless Streaming & Entertainment Platform</title>
     <meta name="description"
         content="Vyla Home is a revolutionary standalone desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience self-hosted streaming, 4K movies, TV shows, and anime with complete privacy and zero server dependencies.">
@@ -26,32 +25,26 @@
     <meta name="revisit-after" content="7 days">
     <link rel="canonical" href="https://vyla.cc/">
 
-    <!-- Additional SEO Meta Tags -->
     <meta name="application-name" content="Vyla Home">
     <meta name="msapplication-tooltip" content="Self-hosted desktop media center for streaming entertainment">
     <meta name="msapplication-starturl" content="/">
     <meta name="msapplication-window" content="width=device-width;height=device-height">
     <meta name="msapplication-navbutton-color" content="#1a1a2e">
 
-    <!-- Favicon and App Icons -->
     <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
     <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
     <link rel="manifest" href="manifest.json">
 
-    <!-- DNS Prefetch for Performance -->
     <link rel="dns-prefetch" href="https://fonts.googleapis.com">
     <link rel="dns-prefetch" href="https://fonts.gstatic.com">
     <link rel="dns-prefetch" href="https://gitlab.com">
     <link rel="dns-prefetch" href="https://discord.com">
     <link rel="dns-prefetch" href="https://videos.pexels.com">
 
-    <!-- Preconnect for Critical Resources -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://gitlab.com" crossorigin>
-    <link rel="preconnect" href="https://discord.com" crossorigin>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: data: 'unsafe-inline' 'unsafe-eval';">
 
     <meta property="og:title" content="Vyla Home - Self-Hosted Desktop Media Center | Serverless Streaming">
     <meta property="og:description"
@@ -90,9 +83,35 @@
 
     <link rel="apple-touch-icon" href="assets/images/icon.png">
 
-
-
-    <link rel="stylesheet" href="src/styles/main.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap">
+    <link rel="stylesheet" href="src/styles/base/tokens.css">
+    <link rel="stylesheet" href="src/styles/base/reset.css">
+    <link rel="stylesheet" href="src/styles/base/typography.css">
+    <link rel="stylesheet" href="src/styles/utilities/layout.css">
+    <link rel="stylesheet" href="src/styles/utilities/reveal.css">
+    <link rel="stylesheet" href="src/styles/layout/nav.css">
+    <link rel="stylesheet" href="src/styles/layout/footer.css">
+    <link rel="stylesheet" href="src/styles/components/buttons.css">
+    <link rel="stylesheet" href="src/styles/components/pills.css">
+    <link rel="stylesheet" href="src/styles/components/stats.css">
+    <link rel="stylesheet" href="src/styles/components/script-card.css">
+    <link rel="stylesheet" href="src/styles/components/marquee.css">
+    <link rel="stylesheet" href="src/styles/components/testimonial-card.css">
+    <link rel="stylesheet" href="src/styles/components/executors.css">
+    <link rel="stylesheet" href="src/styles/components/showcase.css">
+    <link rel="stylesheet" href="src/styles/components/modal.css">
+    <link rel="stylesheet" href="src/styles/components/partners.css">
+    <link rel="stylesheet" href="src/styles/components/faq.css">
+    <link rel="stylesheet" href="src/styles/sections/hero-atmosphere.css">
+    <link rel="stylesheet" href="src/styles/sections/hero-content.css">
+    <link rel="stylesheet" href="src/styles/sections/section-base.css">
+    <link rel="stylesheet" href="src/styles/sections/testimonials.css">
+    <link rel="stylesheet" href="src/styles/sections/executors.css">
+    <link rel="stylesheet" href="src/styles/sections/features.css">
+    <link rel="stylesheet" href="src/styles/sections/showcases.css">
+    <link rel="stylesheet" href="src/styles/sections/faq-section.css">
+    <link rel="stylesheet" href="src/styles/sections/cta-banner.css">
+    <link rel="stylesheet" href="src/styles/utilities/responsive.css">
 
     <script type="application/ld+json">
     {
@@ -258,13 +277,16 @@
             <div class="container hero-container">
 
                 <div class="logo-image">
-                    <img src="assets/images/header_logo.png" alt="Vyla Home Logo">
+                    <img src="assets/images/header_logo.png" alt="Vyla Home Logo" width="100" height="100"
+                        fetchpriority="high">
                 </div>
 
-                <h1 id="hero-title" class="hero-title">Vyla Home</h1>
+                <h1 id="hero-title" class="hero-title">The Local-First Desktop Media Center</h1>
 
-                <p class="hero-description">We've completely stopped hosting Vyla on a public VPS. Vyla Home is now the
-                    primary, self-contained way to experience the platform.
+                <p class="hero-description">
+                    Vyla Home runs directly on your local workstation. By decentralizing stream resolution to your
+                    residential connection, it eliminates centralized cloud failures, datacenter IP blocks, and
+                    third-party tracking.
                 </p>
 
                 <div class="discord-copy-bar reveal" id="copy-discord-btn" role="button" tabindex="0"
@@ -309,7 +331,7 @@
                 </div>
 
                 <div class="partners-inline reveal" id="partners-grid-wrap">
-                    <p class="partners-label">Bypass datacenter blocks, ISP throttling, and cloud downtime.</p>
+                    <p class="partners-label">Recognized and indexed across open media ecosystems</p>
                     <div class="partners-grid" id="partners-grid"></div>
                 </div>
             </div>
@@ -369,7 +391,8 @@
                 <article class="feature-block reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/1.png"
-                            alt="Diagram showing datacenter IP throttling bypass with residential network connection">
+                            alt="Diagram showing datacenter IP throttling bypass with residential network connection"
+                            width="800" height="450" loading="lazy" decoding="async">
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">No Datacenter Throttling</h3>
@@ -383,7 +406,8 @@
                 <article class="feature-block feature-block-reverse reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/2.png"
-                            alt="Diagram showing decentralized architecture eliminating single point of failure">
+                            alt="Diagram showing decentralized architecture eliminating single point of failure"
+                            width="800" height="450" loading="lazy" decoding="async">
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">No Single Point of Failure</h3>
@@ -397,7 +421,8 @@
                 <article class="feature-block reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/3.png"
-                            alt="Illustration of encrypted local vault with hardware profile key">
+                            alt="Illustration of encrypted local vault with hardware profile key" width="800"
+                            height="450" loading="lazy" decoding="async">
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Encrypted Local Vault</h3>
@@ -411,7 +436,8 @@
                 <article class="feature-block feature-block-reverse reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/4.png"
-                            alt="Interface showing automated over-the-air update process">
+                            alt="Interface showing automated over-the-air update process" width="800" height="450"
+                            loading="lazy" decoding="async">
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Automated OTA Updates</h3>
@@ -425,7 +451,8 @@
                 <article class="feature-block reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/5.png"
-                            alt="Interface showing rich media discovery with curated collections and 4K content">
+                            alt="Interface showing rich media discovery with curated collections and 4K content"
+                            width="800" height="450" loading="lazy" decoding="async">
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Rich Discovery & Curated Media</h3>
@@ -439,7 +466,8 @@
                 <article class="feature-block feature-block-reverse reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/6.png"
-                            alt="Interface showing customizable theme and layout options">
+                            alt="Interface showing customizable theme and layout options" width="800" height="450"
+                            loading="lazy" decoding="async">
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Customizable Interface</h3>
diff --git a/llms.txt b/llms.txt
new file mode 100644
index 0000000..1351f5b
--- /dev/null
+++ b/llms.txt
@@ -0,0 +1,6 @@
+Vyla Home is a self-hosted desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience self-hosted streaming, 4K movies, TV shows, and anime with complete privacy and zero server dependencies.
+
+[Home](https://vyla.cc/)
+[GitLab Repository](https://gitlab.com/vyla-entertainment/home)
+[Releases](https://gitlab.com/vyla-entertainment/home/-/releases)
+[Discord](https://discord.gg/5eqRhKeywG)
\ No newline at end of file
diff --git a/src/scripts/animations/fluid-byte-field.js b/src/scripts/animations/fluid-byte-field.js
index 8e9b401..682afd4 100644
--- a/src/scripts/animations/fluid-byte-field.js
+++ b/src/scripts/animations/fluid-byte-field.js
@@ -1,7 +1,7 @@
 import { prefersReducedMotion } from '../utils/dom.js';
 import { smoothstep, diffuse, project, advect } from './fluid-solver.js';
 
-const CELL_SIZE = 24;
+const CELL_SIZE = 28;
 const FONT_SIZE = 11;
 const DT = 1 / 30;
 const FADE_RATE = 0.6;
@@ -9,8 +9,8 @@ const MAX_ALPHA = 0.85;
 const ADVECT_SCALE = 0.5;
 const SPLASH_RADIUS_PX = 28;
 const SPLASH_FORCE = 0.5;
-const DIFFUSION_ITERATIONS = 3;
-const PROJECT_ITERATIONS = 4;
+const DIFFUSION_ITERATIONS = 2;
+const PROJECT_ITERATIONS = 3;
 const VELOCITY_DAMP = 0.1;
 const DYE_DAMP = 0.1;
 const TRAIL_LIFETIME_MS = 184;
diff --git a/src/scripts/animations/marquee-loop.js b/src/scripts/animations/marquee-loop.js
index b32ed61..558d2ee 100644
--- a/src/scripts/animations/marquee-loop.js
+++ b/src/scripts/animations/marquee-loop.js
@@ -34,7 +34,7 @@ export function createMarqueeLoop(track, cssVar, { baseSpeed, boostedSpeed, minS
 
 export function populateLoopedTrack(track, items, buildItem, itemWidthPx) {
     track.innerHTML = '';
-    const minSets = Math.max(2, Math.ceil((window.innerWidth * 2.5) / (items.length * itemWidthPx)));
+    const minSets = Math.max(2, Math.ceil((window.innerWidth * 1.5) / (items.length * itemWidthPx)));
     for (let i = 0; i < minSets; i++) {
         items.forEach((item) => track.appendChild(buildItem(item)));
     }
diff --git a/src/scripts/components/faq-item.js b/src/scripts/components/faq-item.js
index a30ac20..edce252 100644
--- a/src/scripts/components/faq-item.js
+++ b/src/scripts/components/faq-item.js
@@ -10,6 +10,7 @@ function closeAllExcept(list, exceptEl) {
 
 export function createFaqItem(item, list) {
     const el = createElement('div', 'faq-item reveal');
+    el.setAttribute('role', 'listitem');
     el.innerHTML = `
         <button class="faq-question" aria-expanded="false">
             <span>${item.q}</span>
diff --git a/src/scripts/components/script-card.js b/src/scripts/components/script-card.js
index fc361b4..010f4c5 100644
--- a/src/scripts/components/script-card.js
+++ b/src/scripts/components/script-card.js
@@ -31,7 +31,7 @@ export function createScriptCard(script) {
     let html = `
         <div class="script-glow"></div>
         <div class="script-image">
-            <img src="${script.image}" alt="${script.title}" crossorigin="anonymous">
+            <img src="${script.image}" alt="${script.title}" crossorigin="anonymous" width="300" height="168" loading="lazy" decoding="async">
         </div>
         <h3 class="script-title">
             ${script.title}
diff --git a/src/scripts/components/showcase-item.js b/src/scripts/components/showcase-item.js
index 72bd13a..74938ff 100644
--- a/src/scripts/components/showcase-item.js
+++ b/src/scripts/components/showcase-item.js
@@ -5,7 +5,7 @@ export function createShowcaseItem(video) {
     const item = createElement('div', 'showcase-item');
     item.innerHTML = `
         <button class="showcase-card" type="button" aria-label="Play video">
-            <img class="showcase-thumb" src="${youtubeThumbnailUrl(video.id)}" alt="">
+            <img class="showcase-thumb" src="${youtubeThumbnailUrl(video.id)}" alt="" width="280" height="157" loading="lazy" decoding="async">
         </button>
     `;
 
diff --git a/src/scripts/components/testimonial-card.js b/src/scripts/components/testimonial-card.js
index d92f08c..35d4dcf 100644
--- a/src/scripts/components/testimonial-card.js
+++ b/src/scripts/components/testimonial-card.js
@@ -12,7 +12,7 @@ function initials(name) {
 export function createTestimonialCard(testimonial) {
     const card = createElement('div', 'testimonial-card');
     const avatar = testimonial.avatar
-        ? `<img src="${testimonial.avatar}" alt="">`
+        ? `<img src="${testimonial.avatar}" alt="" width="34" height="34" loading="lazy" decoding="async">`
         : initials(testimonial.name || '?');
 
     card.innerHTML = `
diff --git a/src/scripts/config/faq-data.js b/src/scripts/config/faq-data.js
index b4f0c59..7a5271d 100644
--- a/src/scripts/config/faq-data.js
+++ b/src/scripts/config/faq-data.js
@@ -1,30 +1,26 @@
 export const FAQ_ITEMS = [
     {
-        q: 'Why was the website version discontinued?',
-        a: 'Hosting Vyla on a public VPS caused repeated Cloudflare DMCA reports, datacenter IP blocks, and hosting instability. Moving to Vyla Home allows the app to run locally on your own network with zero server dependencies or datacenter blocks.',
+        q: 'Why did Vyla transition from a web app to Vyla Home?',
+        a: 'Centralized public hosting caused cloud provider downtime, datacenter IP rate-limiting, and single-point-of-failure vulnerabilities. Moving execution locally to Vyla Home allows direct residential stream resolution without third-party server mediation.',
     },
     {
-        q: 'How do I install and launch Vyla Home?',
-        a: 'Download the latest setup executable (Vyla.Home.Setup.exe) from our official GitLab releases page. Run the installer, and the app will automatically configure all local microservices, player sandboxes, and runtimes.',
+        q: 'Why does Windows SmartScreen flag the installer?',
+        a: 'Windows SmartScreen displays an unverified publisher prompt on any open-source binary lacking an expensive commercial EV Code Signing Certificate. Vyla Home is 100% open-source on GitLab, allowing you to audit the build scripts or verify the SHA-256 release checksum manually.',
     },
     {
-        q: 'How do updates work?',
-        a: 'Vyla Home checks for updates directly from the official GitLab repository upon startup. When an update is available, it downloads the payload, verifies SHA-256 checksums, and applies patches automatically.',
+        q: 'How are my settings, bookmarks, and watch history protected?',
+        a: 'All user data is stored locally in an AES-256-GCM encrypted database keyed to your device hardware profile. No usage logs, browsing history, or playback metrics are ever transmitted to external servers.',
     },
     {
-        q: 'Where are my watch history, favorites, and settings stored?',
-        a: 'All data is stored locally on your machine in an encrypted vault. Your credentials and settings are secured using AES-256-GCM encryption tied to your unique hardware profile.',
+        q: 'How does the update mechanism ensure binary integrity?',
+        a: 'Vyla Home queries the official tagged GitLab release API over HTTPS. Update payloads are verified against published SHA-256 cryptographic hashes before application to prevent tampering.',
     },
     {
-        q: 'Do I need to install Node.js, Python, or other dependencies?',
-        a: 'No. The desktop setup bundles all required runtimes, backend microservices, and dependencies inside an isolated Electron package.',
+        q: 'Does Vyla Home require external runtime dependencies?',
+        a: 'No. The standalone installer packages the entire runtime environment, internal microservices, and isolated media decoders inside a self-contained desktop container.',
     },
     {
-        q: 'Where can I report bugs or suggest new features?',
-        a: 'Join our official Discord community where you can report issues, get technical support, submit feature suggestions, and receive update announcements.',
-    },
-    {
-        q: 'Is Vyla Home free to use?',
-        a: 'Yes, Vyla Home is completely free for personal use with no keys, subscriptions, or paywalls.',
+        q: 'Is Vyla Home open-source and free?',
+        a: 'Yes. Vyla Home is completely free and open-source under the MIT license with zero paid tiers, keys, or premium locks.',
     },
 ];
\ No newline at end of file
diff --git a/src/scripts/sections/executors.js b/src/scripts/sections/executors.js
index 15de839..d1287cc 100644
--- a/src/scripts/sections/executors.js
+++ b/src/scripts/sections/executors.js
@@ -9,7 +9,7 @@ const BOOSTED_SPEED = 2.2;
 function createExecutorItem(executor) {
     const el = createElement('div', 'executor-item');
     const avatar = executor.image
-        ? `<img src="${executor.image}" alt="" " onerror="this.parentElement.innerHTML=''">`
+        ? `<img src="${executor.image}" alt="" onerror="this.parentElement.innerHTML=''" width="28" height="28" loading="lazy" decoding="async">`
         : '';
     el.innerHTML = `
         <span class="executor-avatar">${avatar}</span>
diff --git a/src/scripts/sections/partners.js b/src/scripts/sections/partners.js
index 62842de..eafad0b 100644
--- a/src/scripts/sections/partners.js
+++ b/src/scripts/sections/partners.js
@@ -5,8 +5,8 @@ import { observeReveals } from '../animations/reveal-observer.js';
 function createPartnerItem(partner) {
     const item = createElement('div', 'partner-item reveal');
     const inner = partner.link
-        ? `<a href="${partner.link}" target="_blank" rel="noopener noreferrer"><img src="${partner.logo}" alt="${partner.name}" "></a>`
-        : `<img src="${partner.logo}" alt="${partner.name}" ">`;
+        ? `<a href="${partner.link}" target="_blank" rel="noopener noreferrer"><img src="${partner.logo}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async"></a>`
+        : `<img src="${partner.logo}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async">`;
     item.innerHTML = inner;
     return item;
 }
diff --git a/src/scripts/sections/testimonials.js b/src/scripts/sections/testimonials.js
index 08ae150..ea09602 100644
--- a/src/scripts/sections/testimonials.js
+++ b/src/scripts/sections/testimonials.js
@@ -7,7 +7,7 @@ function fillMarqueeTrack(trackEl, reviews) {
     trackEl.innerHTML = '';
     if (!reviews.length) return;
 
-    const minSets = Math.max(1, Math.ceil((window.innerWidth * 3) / (reviews.length * AVG_TESTIMONIAL_WIDTH_PX)));
+    const minSets = Math.max(1, Math.ceil((window.innerWidth * 2) / (reviews.length * AVG_TESTIMONIAL_WIDTH_PX)));
     for (let i = 0; i < minSets; i++) {
         reviews.forEach((review) => trackEl.appendChild(createTestimonialCard(review)));
     }
diff --git a/src/styles/main.css b/src/styles/main.css
index 2553f30..91fc79b 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,35 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
-
-@import 'base/tokens.css';
-@import 'base/reset.css';
-@import 'base/typography.css';
-
-@import 'utilities/layout.css';
-@import 'utilities/reveal.css';
-
-@import 'layout/nav.css';
-@import 'layout/footer.css';
-
-@import 'components/buttons.css';
-@import 'components/pills.css';
-@import 'components/stats.css';
-@import 'components/script-card.css';
-@import 'components/marquee.css';
-@import 'components/testimonial-card.css';
-@import 'components/executors.css';
-@import 'components/showcase.css';
-@import 'components/modal.css';
-@import 'components/partners.css';
-@import 'components/faq.css';
-
-@import 'sections/hero-atmosphere.css';
-@import 'sections/hero-content.css';
-@import 'sections/section-base.css';
-@import 'sections/testimonials.css';
-@import 'sections/executors.css';
-@import 'sections/features.css';
-@import 'sections/showcases.css';
-@import 'sections/faq-section.css';
-@import 'sections/cta-banner.css';
-
-@import 'utilities/responsive.css';
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
\ No newline at end of file
diff --git a/src/styles/sections/hero-content.css b/src/styles/sections/hero-content.css
index 62673af..3ca80cf 100644
--- a/src/styles/sections/hero-content.css
+++ b/src/styles/sections/hero-content.css
@@ -33,7 +33,6 @@
 .hero-title .char {
     display: inline-block;
     opacity: 0;
-    filter: blur(10px);
     animation: char-in 0.4s ease forwards;
 }
 
@@ -54,7 +53,6 @@
 @keyframes char-in {
     to {
         opacity: 1;
-        filter: blur(0);
     }
 }
 
@@ -62,7 +60,6 @@
     .hero-title .char {
         animation: none;
         opacity: 1;
-        filter: none;
     }
 }
 
diff --git a/src/styles/utilities/reveal.css b/src/styles/utilities/reveal.css
index c162077..0d0b332 100644
--- a/src/styles/utilities/reveal.css
+++ b/src/styles/utilities/reveal.css
@@ -1,16 +1,13 @@
 .reveal {
     opacity: 0;
-    filter: blur(12px);
     transform: translate3d(0, 24px, 0);
     transition: opacity var(--duration-slow) var(--ease-standard),
-        filter var(--duration-slow) var(--ease-standard),
         transform var(--duration-slow) var(--ease-standard);
-    will-change: opacity, filter, transform;
+    will-change: opacity, transform;
 }
 
 .reveal.in-view {
     opacity: 1;
-    filter: blur(0);
     transform: translate3d(0, 0, 0);
 }
 
@@ -45,7 +42,6 @@
 @media (prefers-reduced-motion: reduce) {
     .reveal {
         opacity: 1;
-        filter: none;
         transform: none;
         transition: none;
     }