[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-121-Estilo-de-Entretenimento-Imersivo":3},"# BUILD PROMPT — Cinematic \"Immersive Entertainment\" Landing Page (Dark Tech & Cyber)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below **in a single pass, on the first attempt**. Every architectural and design decision has already been made — do not ask clarifying questions. Where user-facing copy is required, write realistic, on-theme **English** copy (no lorem ipsum).\n\n**Product Concept:** A next-generation streaming platform launching a fictional **AI-powered interactive series** — viewers shape the story through choices, and the platform delivers personalized recommendations. Invent a short brand name (e.g., \"Plotline,\" \"Chronica\") and a series title (e.g., \"Signal Lost\"), and use them consistently.\n\n---\n\n## 0. PROJECT BRIEF & CREATIVE DIRECTION\n\n**0.1 Theme:** \"Immersive Entertainment Style\" — cinematic, engaging, personalized; era: 2026+ interactive storytelling. Output category: **Dark Tech & Cyber** — blend the streaming-cinematic look (black surfaces, streaming-red glow, bold condensed type) with subtle cyber undertones (neon red\u002Fpurple glows, faint grid or scanline textures, monospaced tech labels).\n\n**0.2 Copy Language:** All user-facing copy, labels, alt text, and ARIA labels must be written in **English**.\n\n**0.3 Color Roles:**\n- **Streaming Red `#E50914`** → primary: CTAs, glows, highlights, focus accents.\n- **Black `#000000`** → page background; **Dark Gray `#222222`** → cards, surfaces, modal.\n- **White `#FFFFFF`** → primary text (text only — never a background); **Light Gray `#CCCCCC`** → secondary text.\n- **Gold `#FFD700`** → ratings, premium accents, \"AI Recommends\" chips.\n- **Purple `#800080`** → AI\u002Fstorytelling decorative accent; **Blue `#0000FF`** → cyber decorative accent. **Both fail contrast on black — decorative use only** (gradient stops, borders, glows, large graphics); never text or meaning-bearing icons.\n\n**0.4 Mandatory Visual Effects:** looping video background; dynamic movie covers; content-selection micro-interactions; bold sans-serif typography; personalized recommendation elements; cinematic transitions (scroll reveals, modal); blur-and-focus effects (glass panels via backdrop-filter, sibling blur on cover hover).\n\n**0.5 Signature CSS Techniques:** `text-shadow: 0 0 10px rgba(229,9,20,0.5)` on display type; `box-shadow: inset 0 0 20px rgba(0,0,0,0.7)` for depth; `backdrop-filter: blur(10px) saturate(1.5)` on glass panels; `0.4s ease-in-out` motion timing (as `--transition-normal`).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- All design properties, layout rules, and states are targeted via class\u002FID selectors only.\n- HTML stays clean, semantic, and style-agnostic — re-theming must require editing `style.css` only, never the markup.\n- No inline event handlers (`onclick`, etc.); bind all behavior in `script.js` via `addEventListener`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine exactly this token sheet in `:root` (you may add tokens; never remove or rename these):\n\n```css\n:root {\n  color-scheme: dark;\n\n  \u002F* Colors *\u002F\n  --primary: #E50914;\n  --primary-hover: #F40612;\n  --secondary: #FFD700;\n  --accent-purple: #800080;\n  --accent-blue: #0000FF;\n  --bg-primary: #000000;\n  --bg-secondary: #222222;\n  --text-primary: #FFFFFF;\n  --text-secondary: #CCCCCC;\n  --text-success: #2ECC71;\n  --text-error: #FF5252;\n  --border-default: #333333;\n  --border-error: #FF5252;\n  --border-success: #2ECC71;\n\n  \u002F* Effects *\u002F\n  --glow-red: 0 0 10px rgba(229, 9, 20, 0.5);\n  --shadow-inset: inset 0 0 20px rgba(0, 0, 0, 0.7);\n  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);\n  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);\n  --blur-panel: blur(10px) saturate(1.5);\n\n  \u002F* Radius, spacing, motion *\u002F\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 16px;\n  --spacing-gap: 1.5rem;\n  --transition-fast: 0.2s ease-in-out;\n  --transition-normal: 0.4s ease-in-out;\n  --ease-standard: ease-in-out;\n\n  \u002F* Elevation *\u002F\n  --z-dropdown: 1000;\n  --z-modal: 2000;\n  --z-toast: 3000;\n\n  \u002F* Type *\u002F\n  --font-display: \"Bebas Neue\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-base: \"Inter\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: \"JetBrains Mono\", monospace;\n}\n```\n\n- **Contrast Pairing:** every background token here is dark and must pair with light text tokens. `#FFFFFF` is reserved for text on dark surfaces; if any light surface is ever introduced, it must be `#FEFEFE` (never `#FFFFFF`) paired with dark text.\n- **Contrast Requirements:** white on `--primary` passes AA — keep button labels bold. Red `#E50914` as text on black is permitted only at large sizes (≥24px, or ≥18.66px bold). All text must meet WCAG AA (4.5:1 normal, 3:1 large).\n\n**1.3 Mandatory Dark Mode (Dark-Only Theme)**\n- Dark mode is the permanent, single theme: the full dark token set lives in `:root`, and `color-scheme: dark` is set so native controls, scrollbars, and form UI render dark.\n- **Exception (user-specified):** the source specification explicitly excludes a light mode (\"✗ No light \u002F ✓ Full dark\"). Do **not** build a light palette, a theme toggle, or localStorage theme persistence — the dark palette is the only theme, and no media query or class may produce a light result.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox.\n- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is declared (as a CSS comment). The only declared exceptions on this page: `.input-group` (stretch, so inputs fill their container), feature\u002Fprice lists inside cards (`flex-start` for readable left-aligned text), and footer link columns (`flex-start`).\n- Mobile-first: single-column by default; promote to rows at `≥768px` (and `≥1024px` where useful). No horizontal scrolling at any viewport from 320px up. Use fluid type via `clamp()`.\n\n**1.5 Framework & Naming Convention**\n- **No CSS framework.** The source specification defines a custom-CSS architecture (raw CSS properties and custom classes such as `.video-background` and `.dynamic-cover-hover`), so hand-write all CSS in `style.css`. Do not load Tailwind or any other framework.\n- Use **BEM** exclusively and consistently: `.hero__title`, `.card--featured`, `.btn--primary`, `.faq__question`, `.pricing__tier--popular`. Never mix conventions.\n- Maintain generic reusable classes — `.btn`, `.card`, `.input-group`, `.section`, `.container` — mapped to the tokens above.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via `\u003Clink>` in `\u003Chead>`: **Bebas Neue** (display: hero, section titles, cover titles), **Inter** (body\u002FUI), **JetBrains Mono** (eyebrow labels, step numbers, badges). Bind them to `--font-display`, `--font-base`, `--font-mono`.\n- **Exception (spec fallback stack):** the source spec's `font-family: \"Helvetica, Arial, sans-serif\"` is implemented only as the fallback stack behind the Google Font primary — never as the primary font.\n- Icons: **Google Material Symbols (Rounded)** via its stylesheet, e.g. `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">play_arrow\u003C\u002Fspan>`. **Forbidden:** inline SVGs, local icon files, emoji used as icons.\n- Useful icons for this page: `play_arrow`, `auto_awesome`, `smart_toy`, `movie`, `tune`, `star`, `check`, `close`, `add`, `arrow_forward`, `mail`, `expand_more`, `menu`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn` + variants `.btn--primary`, `.btn--ghost`, `.btn--gold`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, bold label, transitions on explicit properties (`background-color`, `box-shadow`, `transform`) using the motion tokens.\n- **Primary:** `background: var(--primary); color: var(--text-primary)`. Ghost: transparent with `1px solid var(--text-secondary)` border and glass blur. Gold: `var(--secondary)` background with black text.\n- **Hover:** brightness lift + `box-shadow: var(--glow-red)` (primary), `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--secondary); outline-offset: 2px` — for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading` + `aria-busy=\"true\"`):** disables pointer events to prevent double-clicks and renders a pure-CSS spinner (border-ring animation) or spinning Material icon **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success` \u002F `--text-error`, always paired with an icon or text change — never color alone.\n- **Danger:** `.btn--danger` must be visually distinct on black (error-red border\u002Ffill + icon).\n\n**2.2 Card (`.card` + modifiers)**\n- **Default:** flex column, `background: var(--bg-secondary)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`, generous padding, `--spacing-gap` internal gaps.\n- **Hover:** `transform: translateY(-2px)` + `box-shadow: var(--shadow-md)` + subtle border glow.\n- **Focus-within:** border shifts to `var(--primary)` when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** shimmer keyframe animation over gray blocks with fixed `min-height`s to prevent layout jumps; region marked `aria-busy=\"true\"`, skeleton `aria-hidden=\"true\"`.\n- **Empty State (`.card--empty`):** centered Material icon + clear guidance text.\n- Applies to: feature cards, testimonial cards, pricing tiers, and movie covers (`.cover`).\n\n**2.3 Form & Input (`.input-group`)**\n- **Structure:** flex column (declared stretch exception) wrapping a `\u003Clabel>`, the input, and a dedicated error container `.input-group__error` with `aria-live=\"polite\"`.\n- **States — all styled via classes\u002Fpseudo-classes:** empty (`:placeholder-shown`), focused (`:focus` ring: `border-color: var(--primary)` + `box-shadow: 0 0 0 3px rgba(229,9,20,0.35)`), filled, valid (`.is-valid`: success border + check icon), invalid (`.is-invalid`: error border, error icon, red message text — icon + text, never color alone), disabled, read-only.\n- Wire `aria-invalid` and `aria-describedby` to the error container; validate the email with a regex in `script.js` on submit and on blur.\n\n**2.4 Modal (`.modal` — trailer modal)**\n- **States:** opening (fade + scale from 0.95), open, loading (CSS spinner while the video buffers), closing (reverse animation) — all via CSS transitions.\n- **Structure:** fixed overlay flex container (`align-items: center; justify-content: center`), backdrop with `rgba(0,0,0,0.8)` + `backdrop-filter: var(--blur-panel)` (with a solid-color `@supports` fallback), dialog on `var(--bg-secondary)` with `--radius-lg`, `--shadow-md`, `z-index: var(--z-modal)`, `width: min(90vw, 800px)`.\n- **UX:** `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; close button with Material `close` icon, `aria-label=\"Close trailer\"`, 44×44px; keyboard focus trapping (Tab\u002FShift+Tab cycle inside); closes via `Esc` and backdrop click; body scroll locked while open; focus returns to the trigger on close; video pauses on close.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid sizing, breakpoints at 480\u002F768\u002F1024px, zero horizontal overflow from 320px up.\n- **Smooth Animations:** every state change transitions via the motion tokens. Transition **specific properties**, not `all` — the spec's `transition: all 0.4s ease-in-out` is captured as `--transition-normal` and applied to explicit properties.\n- **Reduced Motion:** under `@media (prefers-reduced-motion: reduce)` disable transforms, scroll reveals, and shimmer; pause and fade out video backgrounds (poster\u002Fgradient remains); make modal transitions instant; disable smooth scrolling.\n- **Accessibility:** WCAG AA contrast throughout; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) and a strict `h1 → h2 → h3` hierarchy; correct ARIA roles\u002Flabels on the accordion, modal, and mobile menu; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading states, and any toast; a visible \"Skip to content\" link; global `:focus-visible` styling.\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` remains visually distinct against the black theme.\n- **Navigation:** anchor links scroll smoothly (`scroll-behavior: smooth`) with `scroll-margin-top` compensating for the fixed header.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no inline script blocks. Google Fonts and Material Symbols links live in `\u003Chead>`.\n- **Naming:** BEM only, everywhere (see 1.5).\n- **Copy:** realistic English product copy throughout — lorem ipsum is prohibited. Invent specific, on-theme copy (episode names, testimonial names\u002Froles, FAQ answers, pricing features).\n- **Assets:** movie covers are built from layered CSS gradients + Bebas Neue titles (no external images). The hero video is the one genuinely unspecified asset: reference `assets\u002Fseries-background.mp4` on a `\u003Cvideo>` element with a `poster` attribute and an always-rendered cinematic gradient fallback, so the page is fully complete even if the file is missing. Note: CSS `background-image` cannot load video — implement the spec's video background as a `.video-background` wrapper containing the `\u003Cvideo>` tag plus a legibility gradient overlay.\n- **Completeness:** deliver the full page, all sections, all component states, and all interactions working on the first attempt.\n\n---\n\n## 5. PAGE SECTION SPECIFICATIONS\n\n**5.1 Header (site chrome):** fixed; transparent over the hero, then `.header--scrolled` adds `backdrop-filter: var(--blur-panel)`, a dark fill, and a bottom border. Typographic logo with red accent; anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with hover underline + focus ring; compact `.btn--primary` CTA. On mobile the nav collapses behind a hamburger (Material `menu` icon, `aria-expanded`, `aria-controls`, animated panel, `z-index: var(--z-dropdown)`).\n\n**5.2 Hero:** full viewport (`min-height: 100svh`). `.video-background` (absolute, `\u003Cvideo autoplay muted loop playsinline>` + gradient overlay for text legibility). `h1` in `--font-display` with `text-shadow: var(--glow-red)`; mono eyebrow label; tagline referencing personalization (\"An interactive series that adapts to you\"). CTAs: `.btn--primary` \"Start Watching\" (`play_arrow`) and `.btn--ghost` \"Watch Trailer\" (opens the modal). A personalized **\"AI Pick for You\"** glass chip (`auto_awesome` icon, backdrop blur). A row of 4–5 **dynamic movie covers** (\"Selected for You\"): gradient poster cards with `.dynamic-cover-hover` micro-interactions — the hovered cover scales (`scale(1.05)`), gains a red glow and a `play_arrow` overlay, while siblings blur and dim (`.covers-list:hover .cover:not(:hover) { filter: blur(2px); opacity: 0.6; }`). Show a brief skeleton shimmer on load (JS-driven; covers remain visible by default if JS is unavailable). Animated scroll cue at the bottom. Staggered cinematic entrance animations (reduced-motion aware).\n\n**5.3 Features — 3 cards:** section heading + three `.card`s, each with a Material icon, `h3`, and copy: (1) AI-Driven Storytelling (`auto_awesome`, purple glow accent), (2) Interactive Choices (`tune`, red accent), (3) Cinematic 4K Streaming (`movie`, gold accent). Full card hover\u002Ffocus-within states.\n\n**5.4 How It Works — 3 steps:** semantic `\u003Col>` with three steps (01 Create your profile → 02 The AI learns your taste → 03 Choose your path), mono step numbers, icons, and a connector line (pseudo-element) on desktop; stacked column on mobile.\n\n**5.5 Testimonials:** three `.card--testimonial`s — quote, gold star row (Material `star` icons with `aria-label=\"Rated 5 out of 5 stars\"`), initials avatar circle, name + role.\n\n**5.6 Pricing — 3 tiers:** Viewer \u002F Director \u002F Studio. Middle tier `.pricing__tier--popular`: \"Most Popular\" badge, red border + glow, slight scale-up, plus a gold **\"AI Recommends\"** chip (personalization element). Each tier: price, left-aligned feature list with `check` icons (declared flex-start exception), and a CTA that demonstrates the loading → success button states on click.\n\n**5.7 FAQ:** 5–6 items. Each: `\u003Cbutton class=\"faq__question\" aria-expanded=\"false\" aria-controls=\"...\">` + rotating `expand_more` chevron + `\u003Cdiv class=\"faq__answer\" role=\"region\">` with a smooth height animation. One panel open at a time; fully keyboard operable; state conveyed by icon rotation + `aria-expanded`, never color alone.\n\n**5.8 Final CTA:** cinematic full-width band — red radial glow, blurred glass panel, bold `--font-display` headline. Email capture: `.input-group` + `.btn--primary` \"Get Early Access\". Full validation states with the `aria-live` error container; on valid submit the button shows loading then success, with an inline confirmation message. Optional toast confirmation using `z-index: var(--z-toast)`.\n\n**5.9 Footer:** `var(--bg-secondary)` surface with top border. Brand mark, four columns of secondary links (Product, Company, Support, Legal) with hover\u002Ffocus styles, Material social icons, and a copyright line with dynamic year.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST\n\n- Zero `style=\"...\"` attributes; all styling in `style.css` via class\u002FID selectors.\n- Complete token sheet from 1.2 in `:root`; `color-scheme: dark`; dark-only (no light palette, no toggle).\n- BEM naming only; three separate files; single deferred `script.js`.\n- Google Fonts (Bebas Neue, Inter, JetBrains Mono) + Material Symbols; no inline SVGs.\n- All button, card, input, and modal states implemented — including loading, disabled, success\u002Ferror, skeleton, and empty patterns.\n- Flexbox everywhere with `align-items: center` default (declared exceptions only); mobile-first; no horizontal scroll at 320px+.\n- Keyboard operability, focus trapping, `aria-live` feedback, AA contrast, reduced-motion support.\n- Every interaction produces visible feedback; all copy in realistic English.\n",1791954981746]