From 16cb138eebcbe9cce35342234e45ca68bd1d8a31 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Sun, 12 Jul 2026 03:57:18 +0200
Subject: [PATCH] Remove film birds; fix language pill highlight

Strip every bird from the demo mockups: both hero video tabs and both
step-3 player scenes lose the background flock (.film-birds) and the
foreground flapping bird (.film-hero-bird), plus all related CSS in
styles/demo.css and the dead style.legacy.css.

Language selector: the <select> was 30px narrower than its pill, so in
appearance:base-select the click/focus highlight covered only the inner
~110px ("half the box"). Move the padding from the container onto the
control so it fills the pill edge-to-edge; mirror the fix in the mobile
legal.css override.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 website/style.legacy.css            | 41 +--------------
 website/styles/demo.css             | 78 +----------------------------
 website/styles/landing-controls.css | 10 +++-
 website/styles/legal.css            |  6 ++-
 website/template.html               | 42 ----------------
 5 files changed, 14 insertions(+), 163 deletions(-)

diff --git a/website/style.legacy.css b/website/style.legacy.css
index ad55856..0e8633d 100644
--- a/website/style.legacy.css
+++ b/website/style.legacy.css
@@ -5623,10 +5623,6 @@ html.theme-light .hero-demo-scene .demo-video::after {
 .hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
 .hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
 
-/* By day the birds read as silhouettes, not chalk marks */
-html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
-html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); }
-
 /* Stars: staggered twinkle so the sky feels alive */
 .film-star {
     transform-box: fill-box;
@@ -5690,24 +5686,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
 .film-fore-scroll {
     transform: translateX(var(--scroll-fore, 0px));
 }
-/* A single gliding bird carries the scene: the outer group rides the
-   JS-driven drift vars, the inner group flaps its wings via scaleY. */
-.film-hero-bird-drift {
-    transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
-}
-
-.film-hero-bird {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: filmWingFlap 0.85s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-@keyframes filmWingFlap {
-    from { transform: scaleY(1); }
-    to { transform: scaleY(0.5); }
-}
-
 /* Twinkle & Glow play state bindings */
 .film-star {
     transform-box: fill-box;
@@ -5715,7 +5693,7 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
     animation: filmTwinkle 2.8s ease-in-out infinite;
     animation-play-state: paused;
 }
-.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) {
+.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star) {
     animation-play-state: running;
 }
 
@@ -5749,19 +5727,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
     95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
 }
 
-/* A distant flock crosses the valley, fading out mid-flight */
-.film-birds {
-    animation: filmBirds 16s linear infinite;
-    animation-play-state: paused;
-}
-
-@keyframes filmBirds {
-    0% { transform: translate(0, 0); opacity: 0; }
-    4% { opacity: 0.75; }
-    42% { opacity: 0.75; }
-    48%, 100% { transform: translate(185px, -12px); opacity: 0; }
-}
-
 /* Valley mist rides the slow background parallax between tree layers */
 .film-mist-scroll {
     transform: translateX(var(--scroll-back, 0px));
@@ -6119,10 +6084,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
 .step-illustration-3 .film-fore-scroll {
     animation: scrollFore 3s linear infinite !important;
 }
-.step-illustration-3 .film-hero-bird {
-    animation: filmWingFlap 0.85s ease-in-out infinite !important;
-    animation-direction: alternate !important;
-}
 
 @keyframes scrollBack {
     0% { transform: translateX(0); }
diff --git a/website/styles/demo.css b/website/styles/demo.css
index 8081c5c..2b652ef 100644
--- a/website/styles/demo.css
+++ b/website/styles/demo.css
@@ -699,10 +699,6 @@ html.theme-light .hero-demo-scene .demo-video::after {
 .hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
 .hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
 
-/* By day the birds read as silhouettes, not chalk marks */
-html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
-html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { color: oklch(0.32 0.06 145 / 0.86); }
-
 /* Stars: staggered twinkle so the sky feels alive */
 .film-star {
     transform-box: fill-box;
@@ -766,54 +762,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c
 .film-fore-scroll {
     transform: translateX(var(--scroll-fore, 0px));
 }
-/* The foreground bird stays alive even while the fake video is paused. */
-.film-hero-bird-drift {
-    animation: filmBirdGlide 6.5s ease-in-out infinite alternate;
-}
-
-.film-hero-bird {
-    color: #dbd7cd;
-    filter: drop-shadow(0 1px 1px oklch(0.08 0.02 145 / 0.55));
-}
-
-.film-bird-wing {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.15;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    transform-box: fill-box;
-    animation: filmWingFlap 0.72s ease-in-out infinite alternate;
-}
-
-.film-bird-wing-left {
-    transform-origin: right bottom;
-}
-
-.film-bird-wing-right {
-    transform-origin: left bottom;
-    animation-direction: alternate-reverse;
-}
-
-.film-bird-body,
-.film-bird-beak {
-    fill: currentColor;
-}
-
-.film-bird-eye {
-    fill: oklch(0.12 0.025 145);
-}
-
-@keyframes filmBirdGlide {
-    from { transform: translate(calc(var(--lantern-x, 0px) - 3px), calc(var(--bounce-y, 0px) + 1px)) rotate(-1.5deg); }
-    to { transform: translate(calc(var(--lantern-x, 0px) + 4px), calc(var(--bounce-y, 0px) - 2px)) rotate(1.5deg); }
-}
-
-@keyframes filmWingFlap {
-    from { transform: rotate(8deg) translateY(0); }
-    to { transform: rotate(-13deg) translateY(1.2px); }
-}
-
 /* Twinkle & Glow play state bindings */
 .film-star {
     transform-box: fill-box;
@@ -821,17 +769,10 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c
     animation: filmTwinkle 2.8s ease-in-out infinite;
     animation-play-state: paused;
 }
-.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds) {
+.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star) {
     animation-play-state: running;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    .film-hero-bird-drift,
-    .film-bird-wing {
-        animation: none !important;
-    }
-}
-
 /* Drifting clouds: gentle back-and-forth so there is no wrap pop */
 .film-cloud {
     transform-box: fill-box;
@@ -862,19 +803,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c
     95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
 }
 
-/* A distant flock crosses the valley, fading out mid-flight */
-.film-birds {
-    animation: filmBirds 16s linear infinite;
-    animation-play-state: paused;
-}
-
-@keyframes filmBirds {
-    0% { transform: translate(0, 0); opacity: 0; }
-    4% { opacity: 0.75; }
-    42% { opacity: 0.75; }
-    48%, 100% { transform: translate(185px, -12px); opacity: 0; }
-}
-
 /* Valley mist rides the slow background parallax between tree layers */
 .film-mist-scroll {
     transform: translateX(var(--scroll-back, 0px));
@@ -1232,10 +1160,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c
 .step-illustration-3 .film-fore-scroll {
     animation: scrollFore 3s linear infinite !important;
 }
-.step-illustration-3 .film-hero-bird {
-    animation: filmWingFlap 0.85s ease-in-out infinite !important;
-    animation-direction: alternate !important;
-}
 
 @keyframes scrollBack {
     0% { transform: translateX(0); }
diff --git a/website/styles/landing-controls.css b/website/styles/landing-controls.css
index 253104f..13f5ef7 100644
--- a/website/styles/landing-controls.css
+++ b/website/styles/landing-controls.css
@@ -17,7 +17,11 @@ html:not(.lang-de) [lang="de"] {
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 9999px;
-    padding: 6px 14px;
+    /* No own padding: the <select> carries it, so the button (and its
+       focus/hover highlight in appearance:base-select) fills the whole pill
+       instead of only the inner ~110px. */
+    padding: 0;
+    overflow: hidden;
     transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     color: var(--text-muted);
 }
@@ -69,11 +73,13 @@ html:not(.lang-de) [lang="de"] {
     font-weight: 600;
     color: currentColor;
     cursor: pointer;
-    padding: 0 28px 0 0;
+    /* Padding moved here from the container so the control fills the pill. */
+    padding: 6px 32px 6px 14px;
     margin: 0;
     width: auto;
     min-width: 110px;
     overflow: hidden;
+    border-radius: inherit;
 }
 
 @supports (appearance: base-select) {
diff --git a/website/styles/legal.css b/website/styles/legal.css
index 9e36e8d..26a78ce 100644
--- a/website/styles/legal.css
+++ b/website/styles/legal.css
@@ -120,7 +120,7 @@
         margin: 0;
     }
     .lang-select-container {
-        padding: 4px 10px;
+        padding: 0;
         gap: 4px;
     }
     .lang-select-container .globe-icon {
@@ -129,7 +129,9 @@
     }
     .lang-dropdown {
         font-size: 0.7rem;
-        padding: 0 6px 0 0;
+        /* Padding on the control (not the container) so the highlight fills
+           the whole pill — matches the desktop rule in landing-controls.css. */
+        padding: 4px 24px 4px 10px;
     }
     .lang-select-container .chevron-icon {
         width: 10px;
diff --git a/website/template.html b/website/template.html
index f218f37..d39448d 100644
--- a/website/template.html
+++ b/website/template.html
@@ -451,11 +451,6 @@
                                         <circle cx="123" cy="22.4" r="0.8"/>
                                     </g>
                                 </g>
-                                <g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
-                                    <path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
-                                    <path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
-                                    <path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
-                                </g>
                                 <path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
                                 <g class="film-mist-scroll" fill="#dbd7cd">
                                     <ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
@@ -481,15 +476,6 @@
                                     <polygon points="275,84 288,42 301,84" fill="#040903"/>
                                     <path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
                                 </g>
-                                <g class="film-hero-bird-drift">
-                                    <g class="film-hero-bird" aria-hidden="true">
-                                        <path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
-                                        <path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
-                                        <path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
-                                        <circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
-                                        <path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
-                                    </g>
-                                </g>
                             </svg>
                             <div class="demo-play-overlay" aria-hidden="true">
                                 <span class="demo-icon-wrap">
@@ -553,11 +539,6 @@
                                         <circle cx="123" cy="22.4" r="0.8"/>
                                     </g>
                                 </g>
-                                <g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
-                                    <path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
-                                    <path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
-                                    <path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
-                                </g>
                                 <path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
                                 <g class="film-mist-scroll" fill="#dbd7cd">
                                     <ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
@@ -583,15 +564,6 @@
                                     <polygon points="275,84 288,42 301,84" fill="#040903"/>
                                     <path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
                                 </g>
-                                <g class="film-hero-bird-drift">
-                                    <g class="film-hero-bird" aria-hidden="true">
-                                        <path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
-                                        <path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
-                                        <path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
-                                        <circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
-                                        <path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
-                                    </g>
-                                </g>
                             </svg>
                             <div class="demo-play-overlay" aria-hidden="true">
                                 <span class="demo-icon-wrap">
@@ -1286,13 +1258,6 @@
                                             <polygon points="115,84 128,42 141,84" fill="#040903"/>
                                             <path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
                                         </g>
-                                        <g class="film-hero-bird" aria-hidden="true">
-                                            <path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
-                                            <path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
-                                            <path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
-                                            <circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
-                                            <path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
-                                        </g>
                                     </svg>
                                 </div>
                                 <div class="player-controls">
@@ -1345,13 +1310,6 @@
                                             <polygon points="115,84 128,42 141,84" fill="#040903"/>
                                             <path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
                                         </g>
-                                        <g class="film-hero-bird" aria-hidden="true">
-                                            <path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
-                                            <path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
-                                            <path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
-                                            <circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
-                                            <path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
-                                        </g>
                                     </svg>
                                 </div>
                                 <div class="player-controls">