Redesign start screen into full theatrical Maximalist Cinema Poster landing page

[Copilot]

Replaces the minimal single-card start screen with a multi-section, full-scroll landing page styled as a 70s–80s Bollywood film poster.

Layout Sections

• Hero — full-viewport dramatic entrance: animated film-strip marquees (top/bottom) with perforated cinema holes, staggered title reveals (BOLLYWOOD in magenta / BINGO in gold), flickering title effect, floating ornaments, star ratings, glowing CTA
• Features — 3 ornate cards (Cinema Magic, Quick Connections, No Setup) with gradient icon circles, colored dashed borders, hover-lift
• How It Works — 4-step walkthrough with numbered gradient circles (magenta→teal→gold→saffron), staggered fadeInLeft entrances, CSS-only :hover/:focus-within slide via .step-card
• Testimonials — 4 quote cards with gradient border via CSS mask technique, avatar circles, star ratings
• Final CTA — diamond-cornered ornamental frame with second BEGIN THE SHOW button

CSS Additions (app/static/css/app.css)

~250 lines of new keyframes and utilities:

• float, slow-spin, grain-noise, film-scroll, pulse-glow, title-flicker, star-twinkle, border-dance, directional fadeIn variants
• .step-card, .card-lift, .btn-cta-intense (shine-sweep on hover), .film-holes, .grain-overlay, .testimonial-card, .feature-icon, .ornate-divider

Accessibility / Quality

• Inline onmouseover/onmouseout replaced with CSS-only .step-card:hover/:focus-within (keyboard accessible)
• Hindi Devanagari text annotated with lang="hi" and aria-label
• -webkit-mask-composite corrected to exclude (consistent with standard mask-composite)
• Both CTA buttons retain hx-post="/start" HTMX wiring
• Tests updated: "How to Play" → "HOW IT WORKS" to match the new section heading

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• releases.astral.sh
  • Triggering command: /home/REDACTED/.local/bin/uv uv run ruff check . (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Redesign the start_screen.html component into a comprehensive, theatrical Maximalist Cinema Poster style landing page. This variation prioritizes visual impact, drama, and engagement through extensive decorative elements.

Key Characteristics:

• Film Strip Aesthetics: Add animated film reels, perforated borders (cinema strip pattern), grain effects
• Ornate Decorations: Heavy use of decorative symbols (◆ ✦ ◈ 🎬 🎭 🎞️), corner flourishes, ornamental dividers
• Rich Animation Layer: Multiple simultaneous animations - floating elements, rotating decorations, staggered reveals, hover lift effects, parallax-style scrolling
• Theatrical Style: Poster-like design with layers, shadows, inner glows; feels like a 70s-80s Hindi film poster
• Sections: Hero (dramatic entrance) → Features (3 cards with heavy styling) → How It Works (visual steps) → Testimonials (4 cards) → Final CTA
• Hover Micro-interactions: All cards lift on hover, buttons glow intensely, decorative elements pulse

Content Requirements:

• Hero: Large serif title "BOLLYWOOD BINGO" split across lines with magenta/gold colors
• Features: 3 feature cards (Cinema Magic, Quick Connections, No Setup) with emoji icons and ornate dashed borders
• Steps: 4-step walkthrough with numbered circles (gradient backgrounds), staggered animation delays
• Testimonials: 4 playful quotes from users, each with gradient borders and star ratings
• CTAs: Two prominent buttons ("BEGIN THE SHOW") with intense glow and hover effects

Design Constraints:

• Use existing 70s-80s Bollywood color palette (magenta, teal, gold, saffron, etc.)
• Keep HTMX functionality for /start route (hx-post="/start")
• CSS-only animations (no JavaScript beyond existing HTMX)
• Mobile-responsive with full-screen scrollable sections
• All animations should be smooth and performant

Trade-offs for This Variation:

• ✅ HIGH ENGAGEMENT: Visually stunning, memorable, theatrical experience
• ✅ MEMORABLE: Poster-like design stands out from typical SaaS landing pages
• ❌ PERFORMANCE: Larger CSS payload, more animations = potential slower on mobile
• ❌ ACCESSIBILITY: Heavy decorations may distract screen readers
• ❌ LOADING: More visual complexity may feel busy to some users

File to Update:

• app/templates/components/start_screen.html