System Requirements Document for fiery-3

1. Introduction

fiery-3 is a multi-part creative drop: a three-minute fight film with its own original song, a coffee shop website, a photo session website, and a custom operating system. The product intent, taken directly from the authoritative requirement thread, is to deliver all four of these outputs as one coherent, high-voltage release rather than as unrelated pieces.

The audience is genre-literate, spectacle-seeking, night-mode-native: people who want the fight to feel like a AAA trailer, the coffee shop to feel like a neon-lit late-night ritual, and the photo session to feel like a cinematic shoot. The film is the centrepiece — a duel between Vi (Cyberpunk) and Geralt of Rivia, scored by an accompanying song, running exactly three minutes — and the surrounding sites and OS shell carry the same visual system.

This document specifies the current, in-scope behaviour of the four delivered surfaces, the personas who use them, the flows they follow, and the visual and technical system that binds them.

2. System Overview

fiery-3 currently delivers four first-party surfaces, all reachable without any account:

• Landing — the anonymous public entry that introduces the film, the coffee shop, the photo sessions, and the OS work, and routes visitors onward.
• Coffee Shop — the coffee shop website: its information and offerings, browsable without friction.
• Photo Sessions — the photo session website: the offering, browsable, with a next step toward a session.
• Video Player — the focused destination that plays the three-minute film with its accompanying song.

The film itself is a hard-constrained deliverable: exactly three minutes long, featuring a fight between a Cyberpunk character (Vi) and Geralt of Rivia, with a song written to accompany it. The custom operating system is a current commitment of the project; its user-facing surface is represented in the navigation rail as the OS destination alongside FILM / COFFEE / PHOTO, and its shell is built on the same visual system as the rest of the product.

Actors. Three accepted human personas use the product: the Coffee Shop Site Visitor, the Photo Session Site Visitor, and the Video Viewer. All three may enter through the Landing surface. There are no system, provider, or external personas in the accepted catalog.

Ownership. All four surfaces are application-owned custom pages. The film and song are first-party creative outputs delivered through the Video Player surface. No third-party provider owns any accepted human-facing capability.

Narrow exclusions. This document does not add adjacent capabilities that the source did not accept: no ordering, payment, cart, or delivery system for the coffee shop; no booking engine, calendar, or payment flow for photo sessions; no account creation, login, or profile management anywhere; no admin or moderation surface; no social feed, comments, or sharing features. The coffee shop and photo session sites present information and offerings and let the visitor take the next step the source describes — they do not become commerce platforms.

2a. Product Interpretation and Delivery Boundary

fiery-3 is delivered as a first-party web product with a custom UI. Every accepted destination is publicly reachable — the source establishes no account requirement, no private state, and no identity continuity need for any accepted journey. A visitor can land, browse the coffee shop, browse the photo sessions, and watch the film without ever identifying themselves. Because no accepted capability requires a human to privately own or resume durable actor-specific state, and no commitment, decision, entitlement, or value transfer must remain bound to a specific participant, no application-owned identity is introduced. There is no sign-up, no login, and no session continuity requirement in the current scope.

The current delivery horizon covers the four surfaces above and the film/song deliverable. The custom operating system is a current commitment; its shell is presented through the OS destination in the navigation rail and shares the product's visual system. Anything beyond the accepted surfaces — commerce, booking engines, accounts, social features — is out of current scope and is not implied by this document.

2b. Source Content Inventory

Not applicable. No reference directive in the supplied material declares content_source authority, so no source content inventory is produced.

2c. Page Content and Component Coverage

Landing

• Information and state. Anonymous public entry. Presents the project wordmark FIERY-3, a monospace HUD strip reading 03:00 / DUEL / ORIGINAL SCORE, and the four destinations: FILM, COFFEE, PHOTO, OS. No user state is held; the page is identical for every visitor.
• Primary actions. Navigate to Video Player (FILM), Coffee Shop (COFFEE), Photo Sessions (PHOTO), or the OS destination (OS). The primary CTA is the magenta capsule WATCH THE FILM, pinned bottom-left, routing to Video Player.
• Supporting actions. Scroll through the full-bleed bands below the hero; the fixed top rail's cyan underline slides between items as the visitor moves.
• Domain entities. Project (fiery-3), Film (3:00, duel, original score), Destination (FILM / COFFEE / PHOTO / OS).
• Component responsibilities.
  • Hero scene — full-bleed #05060B viewport containing the crafted 3D duel form (two silhouetted figures, cyan and magenta rim-light, particle debris), centred-right at ~60% viewport width.
  • Wordmark — FIERY-3 in Space Grotesk 700, clamp(56px, 12vw, 160px), left-aligned, overlapping the scene's left edge.
  • HUD strip — monospace readout locked beneath the wordmark: 03:00 / DUEL / ORIGINAL SCORE.
  • Primary CTA — magenta capsule WATCH THE FILM, sharp-cornered with a 1px glow, pinned bottom-left.
  • Top navigation rail — fixed rail of uppercase monospace micro-labels (FILM / COFFEE / PHOTO / OS) with a cyan underline that slides between items; collapses to a four-tab bottom dock at 375px.
  • Content bands — vertical stack of full-bleed bands, each anchored by a left-aligned 9-column headline over a solid #0D1020 block, with HUD readouts pinned to the right edge.
• States.
  • Loading — hero scene initialises; HUD strip and wordmark render immediately so no readable text is blocked by scene load.
  • Empty — not applicable; the page has no user-generated or fetched collection.
  • Success — hero scene orbits, navigation rail is interactive, CTA routes to Video Player.
  • Error — if the WebGL scene cannot initialise, the hero falls back to a static composed frame of the same duel form; wordmark, HUD strip, CTA, and navigation remain fully readable and functional.
  • Recovery — the visitor can still reach every destination through the navigation rail regardless of hero state.

Coffee Shop

• Information and state. The coffee shop website's information and offerings, presented as glass panels on the dark void. No user state; no cart, order, or account state exists.
• Primary actions. Browse the coffee shop's presented information and offerings; take the next step toward visiting or engaging as the site presents it.
• Supporting actions. Navigate back to Landing or across to FILM / PHOTO / OS via the fixed top rail.
• Domain entities. Coffee Shop (the venue), Offering (the items and information the site presents).
• Component responsibilities.
  • Section headline — left-aligned 9-column headline over a solid #0D1020 block.
  • Offering panels — glass panels (#0D1020 at 80%, 1px #00E5FF/25% border, 16px radius), each with a chamfered 45° corner data chip showing a live monospace readout. Never hover-lift cards.
  • HUD readouts — pinned to the right edge of each band.
  • Navigation rail — shared fixed top rail with COFFEE underlined.
• States.
  • Loading — panels render with their chamfered data chips; text is never covered by imagery or motion.
  • Empty — if no offering content is available, the section shows its headline and a monospace placeholder readout rather than a blank band.
  • Success — the visitor can read the coffee shop's information and offerings in full.
  • Error — if a panel's content fails to load, the remaining panels stay readable and the navigation rail stays functional.
  • Recovery — the visitor can return to Landing or move to another destination at any time.

Photo Sessions

• Information and state. The photo session website's offering, presented as glass panels on the dark void. No user state; no booking, calendar, or payment state exists.
• Primary actions. Review the photo session offering; take the next step toward a session as the site presents it.
• Supporting actions. Navigate back to Landing or across to FILM / COFFEE / OS via the fixed top rail.
• Domain entities. Photo Session (the service), Offering (the session information the site presents).
• Component responsibilities.
  • Section headline — left-aligned 9-column headline over a solid #0D1020 block.
  • Session panels — glass panels with chamfered corner data chips; photo-session frames are rendered as glowing macro subjects on the void, never stock photography on white.
  • HUD readouts — pinned to the right edge of each band.
  • Navigation rail — shared fixed top rail with PHOTO underlined.
• States.
  • Loading — panels render with their data chips; readable text stays whole at 375px, 768px, and 1280px.
  • Empty — if no session content is available, the section shows its headline and a monospace placeholder readout.
  • Success — the visitor understands the photo session service and can initiate the next step the site presents.
  • Error — if a panel's content fails to load, the remaining panels stay readable and the navigation rail stays functional.
  • Recovery — the visitor can return to Landing or move to another destination at any time.

Video Player

• Information and state. The focused destination for the three-minute film. Holds playback state (position, playing/paused) for the current visit only; no persistent state, no account, no watch history.
• Primary actions. Play the film; pause it; scrub through it; watch the full three minutes with the accompanying song.
• Supporting actions. Navigate back to Landing or across to COFFEE / PHOTO / OS via the fixed top rail.
• Domain entities. Film (exactly 3:00, Vi vs Geralt of Rivia duel), Song (the accompanying original score), Playback position.
• Component responsibilities.
  • Holographic frame — the film plays inside a holographic frame, treated as a holographic playback object rather than a flat thumbnail.
  • Scrubbing waveform — a waveform of the song sits underneath the frame, so video and score are one component; scrubbing the waveform scrubs the film.
  • Transport controls — sharp-cornered capsules with a 1px glow; play/pause and scrub.
  • Monospace timecode — timestamps always monospace, showing position against the fixed 03:00 duration.
  • Navigation rail — shared fixed top rail with FILM underlined.
• States.
  • Loading — the holographic frame and waveform render; the timecode reads 00:00 / 03:00.
  • Empty — not applicable; the film is a fixed first-party asset.
  • Success — the film plays to its full three-minute duration with the song audible and the waveform tracking position.
  • Error — if the film or song fails to load, the frame shows a monospace error readout and the transport controls remain visible; the visitor can retry or navigate away.
  • Recovery — the visitor can restart playback from the beginning or leave for another destination at any time.

3. Functional Requirements

FR-1 — Three-minute film. As a Video Viewer, I should be able to watch a film that runs exactly three minutes, so that I receive the deliverable the project promises. (provenance: explicit; constraint: the video must be 3 minutes long)

• Trigger: the viewer opens Video Player and starts playback.
• Observable result: the film plays to a total duration of 03:00, shown as a monospace timecode against a fixed 03:00 duration.
• Access state: public, no account.
• Failure/recovery: if the film fails to load, a monospace error readout appears in the holographic frame and the viewer can retry or navigate away.
• Continuation: on completion the viewer can replay from the start or move to another destination.

FR-2 — Accompanying song. As a Video Viewer, I should hear an original song accompanying the film, so that the film and its score are experienced as one piece. (provenance: explicit; constraint: the song must accompany the video)

• Trigger: playback of the film begins.
• Observable result: the song plays in sync with the film, and the scrubbing waveform underneath the frame tracks the song's position.
• Access state: public, no account.
• Failure/recovery: if the song fails to load, the frame reports it in monospace and the viewer can retry.
• Continuation: the waveform remains available for scrubbing after playback ends.

FR-3 — Specified duel content. As a Video Viewer, I should see a Cyberpunk character and Geralt of Rivia fighting in the film, so that the film matches the promised subject. (provenance: explicit; constraint: the video must feature a Cyberpunk character and Geralt of Rivia fighting)

• Trigger: the viewer plays the film.
• Observable result: the film depicts the fight between the Cyberpunk character (Vi) and Geralt of Rivia.
• Access state: public, no account.
• Failure/recovery: not applicable to content; playback failure is handled by FR-1.
• Continuation: the duel is the film's subject throughout its three-minute run.

FR-4 — Coffee shop website. As a Coffee Shop Site Visitor, I should browse the coffee shop's information and offerings, so that I can decide whether to visit or engage. (provenance: explicit)

• Trigger: the visitor opens Coffee Shop from the Landing page or the navigation rail.
• Observable result: the coffee shop's information and offerings are presented in glass panels with chamfered monospace data chips.
• Access state: public, no account.
• Failure/recovery: if a panel's content fails to load, the remaining panels stay readable and the rail stays functional.
• Continuation: the visitor can return to Landing or move to FILM / PHOTO / OS.

FR-5 — Photo session website. As a Photo Session Site Visitor, I should review the photo session offering and take the next step toward a session, so that I can understand the service and initiate contact or booking as the site presents it. (provenance: explicit)

• Trigger: the visitor opens Photo Sessions from the Landing page or the navigation rail.
• Observable result: the photo session offering is presented in glass panels with glowing macro imagery on the void.
• Access state: public, no account.
• Failure/recovery: if a panel's content fails to load, the remaining panels stay readable and the rail stays functional.
• Continuation: the visitor can return to Landing or move to FILM / COFFEE / OS.

FR-6 — Custom operating system. As a visitor, I should be able to reach the project's custom operating system work from the product's navigation, so that the OS is part of the delivered drop. (provenance: explicit)

• Trigger: the visitor selects OS in the navigation rail.
• Observable result: the OS destination is reachable from the fixed top rail (and the four-tab bottom dock at 375px) on every surface.
• Access state: public, no account.
• Failure/recovery: if the OS destination is unavailable, the rail keeps the other three destinations functional.
• Continuation: the visitor can return to Landing or move to FILM / COFFEE / PHOTO.

FR-7 — Anonymous public entry. As any visitor, I should reach the product without creating an account, so that I can browse and watch immediately. (provenance: required_inference; rationale: no accepted journey requires identity continuity, private state, or a bound commitment)

• Trigger: the visitor opens the product.
• Observable result: Landing renders with the wordmark, HUD strip, CTA, and navigation rail; no sign-up or login is requested.
• Access state: public, no account.
• Failure/recovery: if the hero scene cannot initialise, a static composed frame of the same duel form is shown and all navigation remains functional.
• Continuation: the visitor proceeds to any destination.

FR-8 — Navigation across destinations. As any visitor, I should move between FILM, COFFEE, PHOTO, and OS from any surface, so that I can reach the part of the drop I want. (provenance: required_inference; rationale: the four destinations are separately navigable and must be reachable from each other)

• Trigger: the visitor selects an item in the fixed top rail or the bottom dock.
• Observable result: the cyan underline slides to the selected item and the corresponding destination renders.
• Access state: public, no account.
• Failure/recovery: if a destination fails to render, the rail remains interactive and the visitor can select another.
• Continuation: the visitor continues browsing from the newly opened destination.

4. User Personas

Coffee Shop Site Visitor

• Product context. This person arrives at fiery-3 curious about the coffee shop — likely drawn in by the same neon-lit, late-night register the rest of the drop carries. They are not shopping in a transactional sense; they are finding out what the coffee shop is and what it offers.
• Primary goal. Learn about the coffee shop and its offerings, and decide whether to visit or engage.
• Distinct accepted responsibilities. Browsing the coffee shop's presented information and offerings (FR-4). This is their recurring responsibility and it is different from the other personas' work: they are reading a venue's information, not watching a film or evaluating a photo service.
• Relevant inputs or decisions. Which offering panels to read; whether the presented information is enough to decide to visit or engage.
• Interactions with other accepted participants. None required. They may share the Landing entry with the other two personas, but their work is independent of them.
• Observable success. They find the coffee shop's details and offerings without friction, and can act on what they read.

Photo Session Site Visitor

• Product context. This person is interested in photo sessions — either booking one or learning what a session involves. They arrive through the same dark, cinematic system and expect the photo session offering to be presented with the same craft as the film.
• Primary goal. Understand the photo session service and initiate the next step toward a session.
• Distinct accepted responsibilities. Reviewing the photo session offering and taking the next step the site presents (FR-5). This differs from the coffee shop visitor's work: the photo session visitor is evaluating a service and moving toward a session, not reading a venue's information.
• Relevant inputs or decisions. Which session information matters to them; whether to initiate contact or booking as the site presents it.
• Interactions with other accepted participants. None required. Their work is independent of the other personas.
• Observable success. They understand the photo session service and can initiate the next step.

Video Viewer

• Product context. This person came for the film — the three-minute duel between Vi and Geralt of Rivia with its original song. They are genre-literate and spectacle-seeking, and they expect the playback to feel like a holographic object rather than a flat embedded video.
• Primary goal. Watch the full three-minute video with the song.
• Distinct accepted responsibilities. Playing and viewing the film with its accompanying song (FR-1, FR-2, FR-3). This is the only persona whose work is the film itself; the other two browse informational sites.
• Relevant inputs or decisions. When to play, pause, or scrub; whether to watch to the end or replay.
• Interactions with other accepted participants. None required. Their work is independent of the other personas.
• Observable success. They watch the full three minutes with the song audible and the waveform tracking position.

5. Core User Flows

Flow A — Coffee Shop Site Visitor browses the coffee shop

1. The visitor opens fiery-3 and lands on Landing. The hero scene orbits, the wordmark FIERY-3 and the HUD strip 03:00 / DUEL / ORIGINAL SCORE are readable, and the navigation rail shows FILM / COFFEE / PHOTO / OS.
2. The visitor selects COFFEE in the fixed top rail (or the bottom dock at 375px). The cyan underline slides to COFFEE and the Coffee Shop page renders.
3. On Coffee Shop, the visitor reads the section headline and the offering panels — glass panels with chamfered 45° corner data chips showing live monospace readouts. No hover-lift, no white ground.
4. The visitor continues through the full-bleed bands, reading the coffee shop's information and offerings in full.
5. Observable result: the visitor has the coffee shop's details and offerings and can decide whether to visit or engage.
6. Failure/recovery: if a panel's content fails to load, the remaining panels stay readable and the rail stays functional; the visitor can retry or move on.
7. Continuation: the visitor returns to Landing or moves to FILM / PHOTO / OS via the rail.

Flow B — Photo Session Site Visitor reviews the photo session offering

1. The visitor opens fiery-3 and lands on Landing.
2. The visitor selects PHOTO in the fixed top rail. The cyan underline slides to PHOTO and the Photo Sessions page renders.
3. On Photo Sessions, the visitor reads the section headline and the session panels, with photo-session frames rendered as glowing macro subjects on the void.
4. The visitor reviews the offering and takes the next step the site presents toward a session.
5. Observable result: the visitor understands the photo session service and has initiated the next step.
6. Failure/recovery: if a panel's content fails to load, the remaining panels stay readable and the rail stays functional.
7. Continuation: the visitor returns to Landing or moves to FILM / COFFEE / OS via the rail.

Flow C — Video Viewer watches the three-minute film with its song

1. The viewer opens fiery-3 and lands on Landing. The hero presents the duel form and the HUD strip 03:00 / DUEL / ORIGINAL SCORE.
2. The viewer selects the magenta capsule WATCH THE FILM (or FILM in the rail). The Video Player page renders.
3. On Video Player, the holographic frame shows the film at 00:00 / 03:00, with the song's scrubbing waveform underneath.
4. The viewer presses play. The film begins: the Cyberpunk character (Vi) and Geralt of Rivia fight, and the song plays in sync.
5. The viewer may pause, or scrub the waveform to move through the film; the monospace timecode tracks position against the fixed 03:00 duration.
6. Observable result: the viewer watches the full three minutes with the song audible and the waveform tracking position.
7. Failure/recovery: if the film or song fails to load, the frame shows a monospace error readout and the transport controls remain visible; the viewer can retry or navigate away.
8. Continuation: the viewer replays from the start or moves to COFFEE / PHOTO / OS via the rail.

Flow D — Any visitor reaches the OS work

1. The visitor is on any surface — Landing, Coffee Shop, Photo Sessions, or Video Player.
2. The visitor selects OS in the fixed top rail (or the bottom dock at 375px). The cyan underline slides to OS.
3. Observable result: the OS destination renders, presented in the same dark-void visual system as the rest of the product.
4. Failure/recovery: if the OS destination is unavailable, the rail keeps FILM / COFFEE / PHOTO functional and the visitor can select another.
5. Continuation: the visitor returns to Landing or moves to another destination.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Gleb Kuznetsov. Headline: Cinematic future-tech collision — a neon duel rendered in a dark void.

Colour tokens (dark mode).

No white or near-white grounds anywhere. No blue–indigo SaaS primaries (#2563EB, #4F46E5, #6366F1).

Typography.

• Headings: Space Grotesk, 500–700 weight. Uppercase for HUD micro-labels at 11–12px with 0.18em tracking; sentence case for display at 64–128px with -0.02em tracking and tight 0.92 leading.
• Body: IBM Plex Mono. Numbers and timestamps always monospace.
• Scale: 1.333 modular. Mobile 40/28/20/16/13 → desktop 128/64/32/18/13, with clamp() on every display size.

Shape language. Full-bleed dark scenes; floating glass panels with 1px #00E5FF/25% borders and 16px radii; thin luminous strokes; radial HUD rings; chamfered 45° corners on data chips. No soft blobs, no rounded-pill buttons — controls are sharp-cornered capsules with a 1px glow.

Layout. The hero is a full-viewport 3D/parallax scene; content below is a vertical stack of full-bleed bands, each anchored by a left-aligned 9-column headline over a solid #0D1020 block, with HUD readouts pinned to the right edge. Navigation is a fixed top rail of uppercase micro-labels (FILM / COFFEE / PHOTO / OS) with a cyan underline that slides between items; on mobile it collapses to a bottom dock of four monospace tabs.

Imagery. Abstract 3D forms, particle fields, volumetric light, glass product holograms. The fight film is treated as a holographic playback object, not a flat thumbnail. Coffee beans and photo-session frames are rendered as glowing macro subjects on the void — never stock photography on white.

7. Signature Design Concept

The public entry is a full-bleed #05060B viewport built around one crafted 3D scene: a slowly orbiting volumetric duel form — two silhouetted figures, cyan and magenta rim-light, particle debris — centred-right at roughly 60% viewport width. The project wordmark FIERY-3 is set in Space Grotesk 700 at clamp(56px, 12vw, 160px), left-aligned, overlapping the scene's left edge. Locked beneath it is a monospace HUD strip reading 03:00 / DUEL / ORIGINAL SCORE. A magenta capsule CTA, WATCH THE FILM, sits pinned bottom-left. There is no centred headline, no subtext stack, and no gradient blob.

The signature moves that carry through the whole product:

• The oversized left-aligned wordmark overlapping the full-bleed 3D duel scene, with the monospace HUD strip locked beneath it.
• A fixed top navigation rail of uppercase monospace micro-labels with a cyan underline that slides between FILM / COFFEE / PHOTO / OS, collapsing to a four-tab bottom dock at 375px.
• Every card is a glass panel (#0D1020 at 80%, 1px #00E5FF/25% border, 16px radius) with a chamfered corner data chip showing a live monospace readout — never a hover-lift card.
• Section transitions use a cyan scanline wipe and staggered word-by-word headline reveals rather than fades.
• The three-minute fight film plays inside a holographic frame with a scrubbing waveform of the song underneath, so video and score are one component.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief.

• Focal subject. The volumetric duel form: two silhouetted figures in cyan and magenta rim-light, with particle debris, orbiting slowly in the #05060B void.
• Input → transformation → outcome thesis. As the visitor scrolls, the camera dollies between sections; the duel form continues its slow orbit and light sweep, and the HUD strip's numerals count. The outcome is that the film, the coffee shop, the photo sessions, and the OS read as one continuous cinematic drop rather than four separate pages.
• Motion vocabulary. Continuous slow orbit and light sweep in the hero; scroll-scrubbed camera dolly between sections; staggered word-by-word headline reveals; cyan scanline wipe on section transitions; counting numerals in HUD readouts.
• Composed first frame. Full-bleed #05060B. The duel form sits centred-right at ~60% viewport width, mid-orbit. FIERY-3 in Space Grotesk 700 overlaps the scene's left edge. The monospace HUD strip 03:00 / DUEL / ORIGINAL SCORE sits locked beneath the wordmark. The magenta WATCH THE FILM capsule is pinned bottom-left. The fixed top rail shows FILM / COFFEE / PHOTO / OS with the cyan underline on FILM.
• Reduced-motion state. Every loop pauses under prefers-reduced-motion and reveals static whole states: the duel form holds a single composed frame, the scanline wipe and staggered reveals resolve immediately to their final state, and the HUD numerals show their final values. No decorative motion continues.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED.

• Object. One crafted real-time scene: two silhouetted duel figures (cyan rim-light on one, magenta on the other) with a particle-debris field, rendered in a dark void.
• Defining state shown. The duel in progress — the product's defining state — with the HUD strip 03:00 / DUEL / ORIGINAL SCORE reading against it.
• Behaviour. Slow continuous orbit with a light sweep; scroll-scrubbed camera dolly between sections; pauses to a static composed frame under prefers-reduced-motion.
• Constraint. The scene never covers the wordmark, the HUD strip, the CTA, or the navigation rail. Readable text and controls stay whole at 375px, 768px, and 1280px.

9. Non-Functional Requirements

• NFR-1 — Film duration. The film must run exactly three minutes. (provenance: explicit; rationale: hard constraint in the authoritative source)
• NFR-2 — Film subject. The film must feature a Cyberpunk character and Geralt of Rivia fighting. (provenance: explicit; rationale: hard constraint in the authoritative source)
• NFR-3 — Song accompaniment. The song must accompany the video. (provenance: explicit; rationale: hard constraint in the authoritative source)
• NFR-4 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. (provenance: explicit; rationale: creative direction constraint)
• NFR-5 — Moving content under reduced motion. Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design; every item must become fully readable as it passes. With prefers-reduced-motion, it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. (provenance: explicit; rationale: creative direction constraint)
• NFR-6 — Contrast. Text #EAF2FF on #05060B is ~17:1 contrast. Muted #6B7A99 is used only for micro-labels at 12px+, never body copy. (provenance: explicit; rationale: creative direction palette)
• NFR-7 — No white grounds. No white or near-white grounds anywhere in the system. (provenance: explicit; rationale: creative direction)
• NFR-8 — No forbidden primaries or fonts. No blue–indigo SaaS primaries (#2563EB, #4F46E5, #6366F1) and no Inter/Roboto/Poppins headings. (provenance: explicit; rationale: creative direction)
• NFR-9 — No hover-lift grids. Cards are glass panels with chamfered data chips; never hover-lift grids of identical cards. (provenance: explicit; rationale: creative direction)
• NFR-10 — No soft pills or pastel gradients. Controls are sharp-cornered capsules with a 1px glow; no rounded-pill buttons, no pastel gradients, no playful bouncy easing. (provenance: explicit; rationale: creative direction)
• NFR-11 — Reduced-motion compliance. Every loop pauses under prefers-reduced-motion and reveals static whole states; no decorative motion continues. (provenance: explicit; rationale: creative direction)
• NFR-12 — Public access. All four destinations are reachable without an account. (provenance: required_inference; rationale: no accepted journey requires identity continuity, private state, or a bound commitment)

10. Tech Stack

• Frontend: React with a custom UI, built as a single-page application with client-side routing across Landing, Coffee Shop, Photo Sessions, Video Player, and the OS destination.
• 3D/WebGL hero: React Three Fiber (R3F) with Drei for the Landing hero's volumetric duel scene, with a static composed-frame fallback when WebGL is unavailable.
• Styling: CSS with custom properties for the token set in Section 6; clamp() on every display size; prefers-reduced-motion media queries for every loop.
• Media: first-party film asset (exactly 3:00) and first-party song asset, delivered through the Video Player's holographic frame with a scrubbing waveform.
• Backend: Python / FastAPI serving the static surfaces and media assets.
• Storage: static asset storage for the film, song, and site content; no user data is persisted, since no accepted journey requires durable actor-specific state.
• Deployment: Docker / docker-compose for local and single-host deployment. Kubernetes is not required by the current scope.

11. Assumptions and Constraints

• A-1. The film is a first-party creative asset produced for this project, exactly three minutes long, depicting a fight between a Cyberpunk character (Vi) and Geralt of Rivia. (provenance: explicit)
• A-2. The song is a first-party original score written to accompany the film. (provenance: explicit)
• A-3. The coffee shop and photo session sites present information and offerings and let the visitor take the next step the site presents; they do not include ordering, payment, cart, delivery, booking engines, calendars, or payment flows, because the source did not accept those capabilities. (provenance: required_inference; rationale: narrow exclusion consistent with the accepted scope)
• A-4. No account creation, login, or profile management exists anywhere in the product, because no accepted journey requires identity continuity, private state, or a bound commitment. (provenance: required_inference)
• A-5. The custom operating system is a current commitment; its user-facing surface is represented by the OS destination in the navigation rail and shares the product's visual system. (provenance: explicit)
• A-6. The four destinations are the complete current information architecture; no additional pages are introduced. (provenance: required_inference; rationale: the page contract is closed)
• A-7. The film and song are delivered as first-party assets; no third-party streaming provider owns the playback capability. (provenance: required_inference)
• A-8. [Default — not specified by user] The product is delivered as a web application; no native mobile or desktop client is specified.
• A-9. [Default — not specified by user] The film and song are served from the same origin as the sites.

12. Glossary

• fiery-3 — The project name; the multi-part creative drop comprising the film, song, coffee shop site, photo session site, and custom OS.
• The film — The three-minute video featuring a fight between a Cyberpunk character (Vi) and Geralt of Rivia.
• The song — The original score written to accompany the film.
• Vi — The Cyberpunk character who fights Geralt of Rivia in the film.
• Geralt of Rivia — The Witcher character who fights Vi in the film.
• Landing — The anonymous public entry surface introducing the film, coffee shop, photo sessions, and OS.
• Coffee Shop — The coffee shop website surface.
• Photo Sessions — The photo session website surface.
• Video Player — The focused surface that plays the three-minute film with its accompanying song.
• OS — The custom operating system work, reachable from the navigation rail.
• HUD strip — The monospace readout locked beneath the wordmark, reading 03:00 / DUEL / ORIGINAL SCORE.
• Holographic frame — The playback container in which the film plays, with the song's scrubbing waveform underneath.
• Glass panel — A #0D1020 surface at 80% opacity with a 1px #00E5FF/25% border and 16px radius, carrying a chamfered corner data chip.
• Chamfered data chip — A 45°-cornered chip showing a live monospace readout on a glass panel.
• Scanline wipe — The cyan section-transition effect used instead of a fade.