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

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) {

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;