<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Opening Reel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Chromatic identifiers */
--primary: #F26B36;
--secondary: #FFB59B;
--tertiary: #7A94D9; /* TEXT-ONLY */
/* Surface semantics — tonal ladder */
--anchor: #131313;
--container: #201F1F;
--container-low: #1C1B1B;
--container-high: #262424;
--container-highest: #2A2828;
--bright: #262424; /* mid-tone warm surface, drawn from container-high position on ladder */
/* Text roles */
--text: #E5E2E1;
--neutral: #DAC1BB;
--outline: #A28C86;
--outline-variant: #54433E;
/* Functional */
--success: #7FC97F;
--error: #BA1A1A;
/* Typography */
--font-head: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 44px;
--fs-h3: 28px;
--fs-lead: 20px;
--fs-body: 16px;
--fs-small: 14px;
--fs-micro: 11px;
--tracking-wider: 0.14em;
--tracking-tight: -0.01em;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 96px;
--container-max: 1280px;
--content-max: 1120px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text);
background: var(--anchor);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: var(--font-head);
font-weight: 700;
letter-spacing: var(--tracking-tight);
color: var(--text);
line-height: 0.95;
margin: 0;
}
/* ============================================================
HUD micro-caption — used sparingly as chapter tag / dossier
============================================================ */
.hud {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.hud--warm {
color: var(--primary);
}
.hud__pip {
display: inline-block;
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
box-shadow: 0 0 8px rgba(242,107,54,0.9);
animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(242,107,54,0.9); }
50% { opacity: 0.35; box-shadow: 0 0 3px rgba(242,107,54,0.4); }
}
/* ============================================================
Base tableau shell
============================================================ */
.tableau {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
background: var(--anchor);
}
.tableau__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.28;
mix-blend-mode: overlay;
z-index: 3;
}
.tableau__content {
position: relative;
z-index: 5;
width: 100%;
display: flex;
flex-direction: column;
}
.tableau__hud-tl {
position: absolute;
top: 32px;
left: 40px;
z-index: 6;
display: flex;
align-items: center;
gap: 0;
}
.tableau__hud-tr {
position: absolute;
top: 32px;
right: 40px;
z-index: 6;
}
.tableau__hud-bl {
position: absolute;
bottom: 32px;
left: 40px;
z-index: 6;
}
.tableau__hud-br {
position: absolute;
bottom: 32px;
right: 40px;
z-index: 6;
}
/* Frame corners — subtle cinema letterbox nod */
.tableau__frame {
position: absolute;
inset: 24px;
pointer-events: none;
z-index: 4;
}
.tableau__frame::before,
.tableau__frame::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-color: var(--outline-variant);
border-style: solid;
}
.tableau__frame::before {
top: 0; left: 0;
border-width: 1px 0 0 1px;
}
.tableau__frame::after {
bottom: 0; right: 0;
border-width: 0 1px 1px 0;
}
/* ============================================================
TABLEAU 1 — OPENING TITLE
Starfield, deep space, oversized wordmark breaking across frame
with a distant ember point deep in the composition.
============================================================ */
.t-opening {
background:
radial-gradient(ellipse 40% 30% at 72% 62%, rgba(242,107,54,0.22), transparent 55%),
radial-gradient(ellipse 80% 55% at 30% 30%, rgba(122,148,217,0.06), transparent 60%),
radial-gradient(ellipse 120% 80% at 50% 50%, var(--anchor), #0A0A0A 90%);
align-items: center;
justify-content: center;
}
.t-opening__starfield {
position: absolute;
inset: 0;
z-index: 1;
}
.t-opening__nebula {
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(circle at 72% 62%, rgba(255,181,155,0.18), transparent 8%),
radial-gradient(circle at 72% 62%, rgba(242,107,54,0.55), transparent 3%);
filter: blur(2px);
}
.t-opening__ember-source {
position: absolute;
top: 62%;
left: 72%;
width: 3px;
height: 3px;
background: var(--secondary);
border-radius: 50%;
z-index: 2;
box-shadow:
0 0 4px 1px var(--primary),
0 0 12px 4px rgba(242,107,54,0.8),
0 0 30px 10px rgba(242,107,54,0.4),
0 0 60px 20px rgba(242,107,54,0.15);
}
.t-opening__title {
position: relative;
z-index: 5;
text-align: center;
padding: 0 40px;
}
.t-opening__phrase {
display: block;
font-family: var(--font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
line-height: 1;
color: var(--text);
}
.t-opening__phrase--one {
font-size: clamp(48px, 9vw, 128px);
color: var(--text);
opacity: 0.92;
}
.t-opening__phrase--two {
font-size: clamp(48px, 9vw, 128px);
color: var(--primary);
margin-top: 12px;
text-shadow: 0 0 40px rgba(242,107,54,0.3);
}
.t-opening__sub {
margin-top: 40px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--outline);
}
/* ============================================================
TABLEAU 2 — WORKSHOP
Wide interior. Ember spilling from the forge floor, rack of hilt
silhouettes, atmospheric haze rising. Title card cuts across.
============================================================ */
.t-workshop {
background: var(--anchor);
flex-direction: column;
justify-content: flex-end;
}
.t-workshop__scene {
position: absolute;
inset: 0;
z-index: 1;
}
.t-workshop__floor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 42%;
background:
linear-gradient(to top, rgba(242,107,54,0.35) 0%, rgba(242,107,54,0.08) 30%, transparent 70%),
linear-gradient(to top, var(--container-low), var(--anchor) 80%);
}
.t-workshop__haze {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
height: 45%;
background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,181,155,0.14), transparent 70%);
filter: blur(8px);
}
.t-workshop__forge {
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
width: 320px;
height: 12px;
background: radial-gradient(ellipse 100% 200% at 50% 50%, var(--secondary), var(--primary) 40%, transparent 75%);
border-radius: 50%;
filter: blur(3px);
box-shadow:
0 -10px 40px 8px rgba(242,107,54,0.35),
0 -30px 100px 20px rgba(242,107,54,0.18);
}
.t-workshop__hilts {
position: absolute;
bottom: 12%;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 34px;
z-index: 2;
}
.t-workshop__hilt {
width: 14px;
background: linear-gradient(to top, #0A0A0A 0%, var(--container-highest) 40%, var(--container-high) 100%);
box-shadow:
-1px 0 0 rgba(242,107,54,0.35),
1px 0 0 rgba(0,0,0,0.5);
position: relative;
}
.t-workshop__hilt::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 4px;
background: var(--primary);
box-shadow: 0 0 12px 3px rgba(242,107,54,0.6);
}
.t-workshop__hilt--1 { height: 180px; }
.t-workshop__hilt--2 { height: 220px; }
.t-workshop__hilt--3 { height: 260px; }
.t-workshop__hilt--4 { height: 210px; }
.t-workshop__hilt--5 { height: 195px; }
.t-workshop__hilt--6 { height: 240px; }
.t-workshop__hilt--7 { height: 175px; }
.t-workshop__hilt--8 { height: 205px; }
.t-workshop__rack {
position: absolute;
bottom: 12%;
left: 8%;
right: 8%;
height: 3px;
background: linear-gradient(to right, transparent, var(--outline-variant) 15%, var(--outline-variant) 85%, transparent);
z-index: 2;
box-shadow: 0 -1px 0 rgba(242,107,54,0.15);
}
.t-workshop__silhouette {
position: absolute;
bottom: 12%;
left: 6%;
width: 90px;
height: 340px;
background: linear-gradient(to top, #0A0A0A, transparent 90%);
clip-path: polygon(38% 0%, 62% 0%, 68% 35%, 74% 42%, 74% 100%, 26% 100%, 26% 42%, 32% 35%);
z-index: 3;
opacity: 0.85;
filter: blur(0.4px);
}
.t-workshop__silhouette::after {
content: "";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 34px;
background: #0A0A0A;
border-radius: 50%;
}
.t-workshop__title-wrap {
position: relative;
z-index: 6;
padding: 0 40px;
margin-top: 12vh;
text-align: center;
}
.t-workshop__title {
display: block;
font-family: var(--font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: clamp(28px, 4.5vw, 64px);
line-height: 1.05;
color: var(--neutral);
}
.t-workshop__title strong {
display: block;
color: var(--text);
font-weight: 700;
margin-top: 6px;
}
/* ============================================================
TABLEAU 3 — ANATOMY CLOSE-UP
Single hilt rendered horizontally in SVG detail, dossier caption.
Warm workshop haze receding behind.
============================================================ */
.t-anatomy {
background:
radial-gradient(ellipse 60% 45% at 50% 55%, rgba(242,107,54,0.12), transparent 70%),
var(--anchor);
align-items: center;
justify-content: center;
flex-direction: column;
}
.t-anatomy__haze {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 100% 50% at 50% 90%, rgba(255,181,155,0.1), transparent 60%),
radial-gradient(ellipse 20% 80% at 12% 50%, rgba(122,148,217,0.05), transparent 60%),
radial-gradient(ellipse 20% 80% at 88% 50%, rgba(122,148,217,0.05), transparent 60%);
z-index: 1;
}
.t-anatomy__hilt {
position: relative;
z-index: 5;
width: min(78vw, 900px);
height: auto;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(242,107,54,0.15));
}
.t-anatomy__dossier {
position: absolute;
left: 40px;
top: 50%;
transform: translateY(-50%);
z-index: 6;
display: flex;
flex-direction: column;
gap: 6px;
}
.t-anatomy__dossier-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.t-anatomy__dossier-name {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
line-height: 1;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.t-anatomy__spec {
position: absolute;
right: 40px;
bottom: 32px;
z-index: 6;
display: flex;
flex-direction: column;
gap: 4px;
text-align: right;
}
.t-anatomy__spec-line {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
/* ============================================================
TABLEAU 4 — BLADE IGNITION
Vertical blade emerging from black. Ember source at emitter.
Warm halation, hot centre.
============================================================ */
.t-ignition {
background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(242,107,54,0.15), transparent 60%), #0A0A0A;
align-items: center;
justify-content: center;
position: relative;
}
.t-ignition__stage {
position: relative;
z-index: 5;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.t-ignition__blade-wrap {
position: relative;
height: 78%;
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.t-ignition__blade {
width: 8px;
height: 82%;
background: linear-gradient(to bottom,
transparent 0%,
rgba(229,226,225,0.05) 8%,
rgba(255,181,155,0.5) 30%,
rgba(255,181,155,0.9) 65%,
#FFFFFF 92%,
#FFFFFF 100%);
border-radius: 4px;
box-shadow:
0 0 12px 2px rgba(255,181,155,0.9),
0 0 40px 8px rgba(242,107,54,0.55),
0 0 100px 24px rgba(242,107,54,0.28),
0 0 200px 60px rgba(242,107,54,0.12);
position: relative;
}
.t-ignition__blade::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(229,226,225,0.6), transparent 60%);
border-radius: 50%;
filter: blur(4px);
}
.t-ignition__blade::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(122,148,217,0.12) 40%, transparent);
filter: blur(1px);
opacity: 0.6;
}
.t-ignition__emitter {
width: 40px;
height: 60px;
background: linear-gradient(to bottom, var(--container-highest), #0A0A0A);
border-radius: 4px 4px 2px 2px;
box-shadow:
inset 0 6px 12px rgba(255,181,155,0.4),
0 -20px 60px 10px rgba(242,107,54,0.5),
0 -4px 20px 4px rgba(255,181,155,0.7);
position: relative;
z-index: 6;
}
.t-ignition__emitter::before {
content: "";
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: var(--secondary);
box-shadow: 0 0 8px 2px rgba(255,181,155,0.9);
border-radius: 2px;
}
.t-ignition__hilt {
width: 32px;
height: 200px;
background: linear-gradient(to bottom,
var(--container-highest) 0%,
var(--container-high) 20%,
var(--container) 40%,
var(--container-low) 60%,
#0A0A0A 100%);
border-radius: 2px;
box-shadow:
-1px 0 0 rgba(242,107,54,0.25),
inset 2px 0 4px rgba(255,181,155,0.06),
0 6px 30px rgba(0,0,0,0.8);
position: relative;
z-index: 6;
}
.t-ignition__hilt::before,
.t-ignition__hilt::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(242,107,54,0.4);
box-shadow: 0 0 3px rgba(242,107,54,0.6);
}
.t-ignition__hilt::before { top: 40px; }
.t-ignition__hilt::after { top: 120px; }
.t-ignition__aberration {
position: absolute;
inset: 0;
z-index: 3;
background:
radial-gradient(ellipse 40% 90% at 50% 50%, rgba(255,181,155,0.08), transparent 60%),
radial-gradient(ellipse 20% 60% at 50% 50%, rgba(122,148,217,0.04), transparent 60%);
pointer-events: none;
}
.t-ignition__caption {
position: absolute;
top: 8vh;
left: 50%;
transform: translateX(-50%);
z-index: 7;
text-align: center;
}
.t-ignition__caption-eyebrow {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--outline);
margin-bottom: 14px;
}
.t-ignition__caption-word {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(36px, 6vw, 84px);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
}
/* ============================================================
TABLEAU 5 — CLOSING TABLEAU
Horizon shot. Distant blade streak across the frame at the
horizon line. Wordmark surfacing large. Tagline surfacing beneath.
============================================================ */
.t-closing {
background:
radial-gradient(ellipse 100% 55% at 50% 62%, rgba(242,107,54,0.18), transparent 65%),
linear-gradient(to bottom, #060606 0%, var(--anchor) 55%, #060606 100%);
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
}
.t-closing__horizon {
position: absolute;
top: 62%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
rgba(242,107,54,0.3) 15%,
var(--primary) 40%,
var(--secondary) 50%,
var(--primary) 60%,
rgba(242,107,54,0.3) 85%,
transparent 100%);
box-shadow:
0 0 8px rgba(242,107,54,0.6),
0 0 30px rgba(242,107,54,0.4),
0 0 80px rgba(242,107,54,0.2);
z-index: 2;
}
.t-closing__horizon-glow {
position: absolute;
top: 62%;
left: 0;
right: 0;
height: 200px;
transform: translateY(-50%);
background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,181,155,0.25), transparent 70%);
filter: blur(20px);
z-index: 1;
}
.t-closing__stars {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.6;
}
.t-closing__wordmark {
position: relative;
z-index: 5;
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(56px, 12vw, 180px);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
text-shadow:
0 0 40px rgba(242,107,54,0.4),
0 0 80px rgba(242,107,54,0.15);
margin-bottom: 32px;
text-align: center;
line-height: 1;
}
.t-closing__tagline {
position: relative;
z-index: 5;
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--neutral);
text-align: center;
max-width: 640px;
line-height: 1.8;
}
.t-closing__tagline strong {
color: var(--primary);
font-weight: 500;
}
.t-closing__coda {
position: absolute;
bottom: 8%;
left: 0;
right: 0;
text-align: center;
z-index: 5;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--outline);
}
/* ============================================================
Responsive — mobile film-strip
============================================================ */
@media (max-width: 780px) {
.tableau__hud-tl,
.tableau__hud-tr,
.tableau__hud-bl,
.tableau__hud-br { top: 20px; bottom: 20px; left: 20px; right: 20px; }
.tableau__hud-tr { left: auto; }
.tableau__hud-br { left: auto; top: auto; }
.tableau__hud-bl { right: auto; top: auto; }
.tableau__frame { inset: 12px; }
.t-anatomy__dossier { left: 20px; }
.t-anatomy__spec { right: 20px; bottom: 20px; }
.t-workshop__hilts { gap: 14px; }
.t-workshop__hilt { width: 8px; }
.t-workshop__hilt--1 { height: 100px; }
.t-workshop__hilt--2 { height: 130px; }
.t-workshop__hilt--3 { height: 150px; }
.t-workshop__hilt--4 { height: 125px; }
.t-workshop__hilt--5 { height: 115px; }
.t-workshop__hilt--6 { height: 140px; }
.t-workshop__hilt--7 { height: 100px; }
.t-workshop__hilt--8 { height: 120px; }
.t-workshop__silhouette { width: 50px; height: 200px; left: 4%; }
.t-ignition__blade-wrap { width: 260px; }
}
</style>
</head>
<body>
<!-- Shared SVG defs — turbulence grain reused across tableaux -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0.6 0"/>
</filter>
<filter id="grain-warm">
<feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="2" seed="13" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.95 0 0 0 0 0.72 0 0 0 0 0.6 0 0 0 0.5 0"/>
</filter>
<filter id="grain-cool">
<feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="2" seed="21" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.7 0 0 0 0 0.75 0 0 0 0 0.85 0 0 0 0.4 0"/>
</filter>
</defs>
</svg>
<!-- ============================================================
TABLEAU 1 — OPENING TITLE
Shot: wide of deep space. A single distant ember point burns.
Oversized wordmark breaks across the frame. First frame of the reel.
============================================================ -->
<section class="tableau t-opening" aria-label="Opening title tableau: distant ember in a starfield, oversized display title">
<!-- Starfield: SVG points scattered across the frame -->
<svg class="t-opening__starfield" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#E5E2E1">
<circle cx="60" cy="120" r="0.8" opacity="0.7"/>
<circle cx="140" cy="220" r="1.1" opacity="0.9"/>
<circle cx="80" cy="380" r="0.6" opacity="0.5"/>
<circle cx="220" cy="80" r="0.9" opacity="0.85"/>
<circle cx="320" cy="180" r="0.5" opacity="0.4"/>
<circle cx="410" cy="60" r="1.3" opacity="0.95"/>
<circle cx="500" cy="220" r="0.7" opacity="0.6"/>
<circle cx="600" cy="120" r="0.8" opacity="0.7"/>
<circle cx="720" cy="90" r="0.5" opacity="0.35"/>
<circle cx="820" cy="240" r="0.9" opacity="0.8"/>
<circle cx="900" cy="150" r="0.6" opacity="0.55"/>
<circle cx="1020" cy="80" r="1" opacity="0.9"/>
<circle cx="1120" cy="200" r="0.7" opacity="0.65"/>
<circle cx="1240" cy="130" r="0.5" opacity="0.4"/>
<circle cx="1360" cy="250" r="0.9" opacity="0.85"/>
<circle cx="1440" cy="70" r="0.8" opacity="0.75"/>
<circle cx="1540" cy="200" r="0.6" opacity="0.5"/>
<circle cx="120" cy="500" r="0.8" opacity="0.7"/>
<circle cx="240" cy="640" r="1" opacity="0.85"/>
<circle cx="360" cy="480" r="0.5" opacity="0.4"/>
<circle cx="440" cy="720" r="0.9" opacity="0.8"/>
<circle cx="540" cy="580" r="0.6" opacity="0.5"/>
<circle cx="620" cy="800" r="1.1" opacity="0.9"/>
<circle cx="760" cy="520" r="0.4" opacity="0.35"/>
<circle cx="880" cy="700" r="0.8" opacity="0.75"/>
<circle cx="960" cy="620" r="0.6" opacity="0.55"/>
<circle cx="1080" cy="780" r="0.9" opacity="0.8"/>
<circle cx="1180" cy="500" r="0.5" opacity="0.4"/>
<circle cx="1300" cy="680" r="0.7" opacity="0.65"/>
<circle cx="1420" cy="540" r="0.6" opacity="0.5"/>
<circle cx="1520" cy="740" r="0.9" opacity="0.85"/>
<circle cx="180" cy="440" r="0.4" opacity="0.3"/>
<circle cx="380" cy="350" r="0.5" opacity="0.4"/>
<circle cx="560" cy="400" r="0.4" opacity="0.35"/>
<circle cx="780" cy="380" r="0.5" opacity="0.4"/>
<circle cx="960" cy="440" r="0.4" opacity="0.3"/>
<circle cx="1140" cy="360" r="0.5" opacity="0.4"/>
<circle cx="1340" cy="410" r="0.4" opacity="0.35"/>
<circle cx="1500" cy="380" r="0.5" opacity="0.4"/>
</g>
<!-- Grain overlay -->
<rect width="1600" height="900" filter="url(#grain-warm)" opacity="0.22"/>
</svg>
<div class="t-opening__nebula"></div>
<div class="t-opening__ember-source"></div>
<div class="tableau__frame"></div>
<div class="tableau__hud-tl">
<span class="hud"><span class="hud__pip"></span>REEL I · Signal locked</span>
</div>
<div class="tableau__hud-tr">
<span class="hud">Transmission / 01</span>
</div>
<div class="t-opening__title">
<span class="t-opening__phrase t-opening__phrase--one">From factory floor</span>
<span class="t-opening__phrase t-opening__phrase--two">to your door</span>
<div class="t-opening__sub">An ARTSABERS reel</div>
</div>
<div class="tableau__hud-bl">
<span class="hud">Latitude − The Galaxy</span>
</div>
<div class="tableau__hud-br">
<span class="hud">Scroll to begin ↓</span>
</div>
</section>
<!-- ============================================================
TABLEAU 2 — WORKSHOP
Shot: interior wide. Rack of hilts standing in silhouette
along a low bench. Ember forge glow spilling up from the floor.
A single craftsman silhouette to one side. Title cuts across the top.
============================================================ -->
<section class="tableau t-workshop" aria-label="Workshop tableau: rack of saber hilts in silhouette, ember forge glow rising from the floor, craftsman silhouette at the edge">
<div class="t-workshop__scene">
<!-- Distant ceiling / far wall darkness -->
<div style="position:absolute; inset:0; background: radial-gradient(ellipse 80% 40% at 50% 15%, rgba(122,148,217,0.03), transparent 60%);"></div>
<div class="t-workshop__haze"></div>
<div class="t-workshop__floor"></div>
<div class="t-workshop__forge"></div>
<!-- Rack line -->
<div class="t-workshop__rack"></div>
<!-- Hilt silhouettes standing on the rack -->
<div class="t-workshop__hilts">
<div class="t-workshop__hilt t-workshop__hilt--1"></div>
<div class="t-workshop__hilt t-workshop__hilt--2"></div>
<div class="t-workshop__hilt t-workshop__hilt--3"></div>
<div class="t-workshop__hilt t-workshop__hilt--4"></div>
<div class="t-workshop__hilt t-workshop__hilt--5"></div>
<div class="t-workshop__hilt t-workshop__hilt--6"></div>
<div class="t-workshop__hilt t-workshop__hilt--7"></div>
<div class="t-workshop__hilt t-workshop__hilt--8"></div>
</div>
<!-- Craftsman silhouette on the left -->
<div class="t-workshop__silhouette"></div>
<!-- Airborne dust -->
<svg style="position:absolute; inset:0; z-index:3; opacity:0.6;" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#FFB59B" opacity="0.5">
<circle cx="220" cy="480" r="0.8"/>
<circle cx="340" cy="360" r="0.6"/>
<circle cx="460" cy="440" r="0.9"/>
<circle cx="580" cy="380" r="0.5"/>
<circle cx="720" cy="420" r="0.7"/>
<circle cx="860" cy="360" r="0.9"/>
<circle cx="980" cy="480" r="0.6"/>
<circle cx="1100" cy="400" r="0.8"/>
<circle cx="1240" cy="440" r="0.5"/>
<circle cx="1360" cy="380" r="0.7"/>
</g>
</svg>
<!-- Grain layer -->
<svg class="tableau__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="400" height="400" filter="url(#grain-warm)"/>
</svg>
</div>
<div class="tableau__frame"></div>
<div class="tableau__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter II · The Forge</span>
</div>
<div class="tableau__hud-tr">
<span class="hud">Ambient 38°C</span>
</div>
<div class="t-workshop__title-wrap">
<span class="t-workshop__title">In a workshop, somewhere —</span>
<span class="t-workshop__title"><strong>a hilt takes shape.</strong></span>
</div>
<div class="tableau__hud-bl">
<span class="hud">Craftsman / on shift</span>
</div>
</section>
<!-- ============================================================
TABLEAU 3 — ANATOMY CLOSE-UP
Shot: macro on a single hilt, laid horizontally in the frame,
rendered in SVG detail. Warm dust receding behind. Dossier
caption to the left, technical readout at the bottom right.
============================================================ -->
<section class="tableau t-anatomy" aria-label="Anatomy close-up tableau: single lightsaber hilt rendered in SVG detail, workshop haze behind, dossier caption labeling the specimen">
<div class="t-anatomy__haze"></div>
<!-- Dust motes -->
<svg style="position:absolute; inset:0; z-index:2; opacity:0.5;" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#DAC1BB" opacity="0.4">
<circle cx="180" cy="200" r="0.9"/>
<circle cx="320" cy="340" r="0.6"/>
<circle cx="460" cy="180" r="0.7"/>
<circle cx="580" cy="640" r="0.8"/>
<circle cx="720" cy="220" r="0.5"/>
<circle cx="860" cy="700" r="0.9"/>
<circle cx="1000" cy="180" r="0.7"/>
<circle cx="1140" cy="640" r="0.6"/>
<circle cx="1280" cy="220" r="0.8"/>
<circle cx="1420" cy="700" r="0.7"/>
<circle cx="240" cy="720" r="0.6"/>
<circle cx="400" cy="140" r="0.5"/>
<circle cx="1500" cy="200" r="0.8"/>
</g>
</svg>
<!-- The hilt itself, drawn in SVG -->
<svg class="t-anatomy__hilt" viewBox="0 0 900 200" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<defs>
<linearGradient id="hilt-body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3A3838"/>
<stop offset="0.2" stop-color="#2A2828"/>
<stop offset="0.5" stop-color="#1C1B1B"/>
<stop offset="0.8" stop-color="#2A2828"/>
<stop offset="1" stop-color="#0A0A0A"/>
</linearGradient>
<linearGradient id="hilt-body-lit" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#4A3830"/>
<stop offset="0.15" stop-color="#3A2A22"/>
<stop offset="0.5" stop-color="#201F1F"/>
<stop offset="0.85" stop-color="#0A0A0A"/>
<stop offset="1" stop-color="#000000"/>
</linearGradient>
<linearGradient id="emitter-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#54433E"/>
<stop offset="0.5" stop-color="#2A2828"/>
<stop offset="1" stop-color="#0A0A0A"/>
</linearGradient>
<radialGradient id="core-glow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#FFB59B" stop-opacity="1"/>
<stop offset="0.3" stop-color="#F26B36" stop-opacity="0.8"/>
<stop offset="1" stop-color="#F26B36" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Ambient warm glow behind the hilt -->
<ellipse cx="450" cy="100" rx="380" ry="70" fill="url(#core-glow)" opacity="0.35"/>
<!-- POMMEL (rightmost) -->
<rect x="820" y="72" width="60" height="56" fill="url(#hilt-body)" rx="2"/>
<rect x="878" y="72" width="4" height="56" fill="#0A0A0A"/>
<rect x="820" y="72" width="60" height="3" fill="#54433E"/>
<rect x="820" y="125" width="60" height="3" fill="#0A0A0A"/>
<!-- Grip segment -->
<rect x="620" y="68" width="200" height="64" fill="url(#hilt-body)" rx="2"/>
<!-- Grip ridges -->
<g fill="#0A0A0A">
<rect x="640" y="68" width="2" height="64"/>
<rect x="660" y="68" width="2" height="64"/>
<rect x="680" y="68" width="2" height="64"/>
<rect x="700" y="68" width="2" height="64"/>
<rect x="720" y="68" width="2" height="64"/>
<rect x="740" y="68" width="2" height="64"/>
<rect x="760" y="68" width="2" height="64"/>
<rect x="780" y="68" width="2" height="64"/>
<rect x="800" y="68" width="2" height="64"/>
</g>
<!-- Grip highlight (warm rim on top edge) -->
<rect x="620" y="68" width="200" height="1.5" fill="#F26B36" opacity="0.6"/>
<!-- Body / control cluster -->
<rect x="440" y="60" width="180" height="80" fill="url(#hilt-body-lit)" rx="2"/>
<!-- Ember activation stud (the hot spot) -->
<circle cx="480" cy="82" r="6" fill="#F26B36"/>
<circle cx="480" cy="82" r="10" fill="none" stroke="#F26B36" stroke-width="0.5" opacity="0.6"/>
<circle cx="480" cy="82" r="14" fill="#F26B36" opacity="0.2"/>
<!-- Steel-blue readout window (data — text-only tertiary use, tolerated in illustration since it reads as HUD screen light) -->
<rect x="510" y="76" width="60" height="12" fill="#0A0A0A" stroke="#54433E" stroke-width="0.5" rx="1"/>
<rect x="514" y="80" width="18" height="1.5" fill="#7A94D9" opacity="0.85"/>
<rect x="514" y="83" width="30" height="1.5" fill="#7A94D9" opacity="0.65"/>
<!-- Vents on the body -->
<g fill="#0A0A0A">
<rect x="450" y="118" width="80" height="1.5"/>
<rect x="450" y="122" width="80" height="1.5"/>
<rect x="450" y="126" width="80" height="1.5"/>
</g>
<!-- Warm rim along the body's upper edge (light spilling from within) -->
<rect x="440" y="60" width="180" height="1.2" fill="#F26B36" opacity="0.55"/>
<!-- Ember seam along the join -->
<line x1="440" y1="100" x2="620" y2="100" stroke="#F26B36" stroke-width="0.6" opacity="0.35"/>
<!-- Neck / choke -->
<rect x="400" y="66" width="42" height="68" fill="url(#hilt-body)" rx="1"/>
<rect x="400" y="66" width="42" height="1.5" fill="#54433E"/>
<!-- Emitter shroud -->
<path d="M 90 60 L 100 55 L 400 60 L 400 140 L 100 145 L 90 140 Z" fill="url(#emitter-grad)"/>
<!-- Emitter details -->
<rect x="130" y="70" width="240" height="4" fill="#0A0A0A"/>
<rect x="130" y="80" width="240" height="1.5" fill="#54433E" opacity="0.6"/>
<rect x="130" y="120" width="240" height="4" fill="#0A0A0A"/>
<rect x="130" y="126" width="240" height="1.5" fill="#54433E" opacity="0.6"/>
<!-- Emitter face (leftmost, where the blade would come out) -->
<rect x="90" y="60" width="8" height="80" fill="#0A0A0A"/>
<ellipse cx="94" cy="100" rx="4" ry="35" fill="#F26B36" opacity="0.7"/>
<ellipse cx="94" cy="100" rx="2" ry="30" fill="#FFB59B" opacity="0.9"/>
<!-- Warm emitter halation -->
<ellipse cx="70" cy="100" rx="80" ry="45" fill="url(#core-glow)" opacity="0.55"/>
<!-- Warm rim on emitter shroud top -->
<path d="M 90 60 L 100 55 L 400 60" fill="none" stroke="#F26B36" stroke-width="0.8" opacity="0.5"/>
<!-- Cool blue text-only annotation marks (HUD-style) -->
<line x1="94" y1="35" x2="94" y2="52" stroke="#7A94D9" stroke-width="0.4" opacity="0.5"/>
<line x1="530" y1="35" x2="530" y2="52" stroke="#7A94D9" stroke-width="0.4" opacity="0.5"/>
<line x1="720" y1="35" x2="720" y2="52" stroke="#7A94D9" stroke-width="0.4" opacity="0.5"/>
<line x1="850" y1="35" x2="850" y2="52" stroke="#7A94D9" stroke-width="0.4" opacity="0.5"/>
</svg>
<div class="tableau__frame"></div>
<div class="tableau__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter III · The Anatomy</span>
</div>
<div class="tableau__hud-tr">
<span class="hud">Dossier / 001</span>
</div>
<div class="t-anatomy__dossier">
<span class="t-anatomy__dossier-label">Specimen</span>
<span class="t-anatomy__dossier-name">Starkiller SE</span>
<span class="t-anatomy__dossier-label" style="margin-top:12px;">Core / Proffie 2.2</span>
<span class="t-anatomy__dossier-label">Grade / Heavy</span>
</div>
<div class="t-anatomy__spec">
<span class="t-anatomy__spec-line">Emitter · Neck · Body</span>
<span class="t-anatomy__spec-line">Grip · Pommel</span>
<span class="t-anatomy__spec-line" style="color: var(--outline); margin-top: 8px;">Laid horizontal for the reel</span>
</div>
</section>
<!-- ============================================================
TABLEAU 4 — BLADE IGNITION
Shot: vertical blade emerging from the emitter, ember source
at the base, hot centre, warm halation blooming into black.
Single word title at the top.
============================================================ -->
<section class="tableau t-ignition" aria-label="Blade ignition tableau: vertical saber blade rising from the emitter of a stationary hilt, ember source at the base, warm halation blooming into the dark">
<div class="t-ignition__aberration"></div>
<div class="t-ignition__caption">
<div class="t-ignition__caption-eyebrow">Chapter IV · Ignition</div>
<div class="t-ignition__caption-word">Ignite</div>
</div>
<div class="t-ignition__stage">
<div class="t-ignition__blade-wrap">
<div class="t-ignition__blade"></div>
<div class="t-ignition__emitter"></div>
<div class="t-ignition__hilt"></div>
</div>
</div>
<!-- Airborne dust catching the light -->
<svg style="position:absolute; inset:0; z-index:4; opacity:0.7; pointer-events:none;" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#FFB59B" opacity="0.5">
<circle cx="620" cy="240" r="0.9"/>
<circle cx="740" cy="180" r="0.6"/>
<circle cx="860" cy="320" r="0.7"/>
<circle cx="920" cy="140" r="0.5"/>
<circle cx="700" cy="400" r="0.8"/>
<circle cx="850" cy="480" r="0.6"/>
<circle cx="770" cy="560" r="0.5"/>
<circle cx="900" cy="640" r="0.7"/>
<circle cx="720" cy="700" r="0.6"/>
<circle cx="880" cy="220" r="0.4"/>
<circle cx="620" cy="620" r="0.7"/>
<circle cx="960" cy="360" r="0.5"/>
</g>
</svg>
<svg class="tableau__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="opacity:0.2;">
<rect width="400" height="400" filter="url(#grain-warm)"/>
</svg>
<div class="tableau__frame"></div>
<div class="tableau__hud-tl">
<span class="hud"><span class="hud__pip"></span>Live · Full bloom</span>
</div>
<div class="tableau__hud-tr">
<span class="hud">T + 00:00:04</span>
</div>
<div class="tableau__hud-bl">
<span class="hud">Emitter engaged</span>
</div>
<div class="tableau__hud-br">
<span class="hud hud--warm">Kyber / Stable</span>
</div>
</section>
<!-- ============================================================
TABLEAU 5 — CLOSING TABLEAU
Shot: distant horizon of ember light cutting across the frame
like a blade seen edge-on from far away. Wordmark surfaces
as the closing beat, tagline beneath.
============================================================ -->
<section class="tableau t-closing" aria-label="Closing tableau: distant horizon of ember light cutting across the frame, the ARTSABERS wordmark surfacing as the closing beat">
<div class="t-closing__horizon-glow"></div>
<div class="t-closing__horizon"></div>
<svg class="t-closing__stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#E5E2E1">
<circle cx="80" cy="100" r="0.6" opacity="0.5"/>
<circle cx="220" cy="80" r="0.8" opacity="0.7"/>
<circle cx="360" cy="140" r="0.5" opacity="0.4"/>
<circle cx="500" cy="60" r="0.9" opacity="0.8"/>
<circle cx="640" cy="120" r="0.6" opacity="0.55"/>
<circle cx="780" cy="80" r="0.7" opacity="0.65"/>
<circle cx="920" cy="160" r="0.5" opacity="0.4"/>
<circle cx="1060" cy="70" r="0.8" opacity="0.75"/>
<circle cx="1200" cy="130" r="0.6" opacity="0.5"/>
<circle cx="1340" cy="90" r="0.5" opacity="0.4"/>
<circle cx="1480" cy="150" r="0.7" opacity="0.6"/>
<circle cx="140" cy="220" r="0.5" opacity="0.4"/>
<circle cx="280" cy="180" r="0.6" opacity="0.5"/>
<circle cx="420" cy="240" r="0.5" opacity="0.4"/>
<circle cx="560" cy="200" r="0.7" opacity="0.6"/>
<circle cx="700" cy="260" r="0.5" opacity="0.4"/>
<circle cx="840" cy="220" r="0.6" opacity="0.5"/>
<circle cx="980" cy="180" r="0.5" opacity="0.4"/>
<circle cx="1120" cy="240" r="0.7" opacity="0.6"/>
<circle cx="1260" cy="200" r="0.5" opacity="0.4"/>
<circle cx="1400" cy="260" r="0.6" opacity="0.5"/>
<circle cx="1540" cy="220" r="0.5" opacity="0.4"/>
<circle cx="200" cy="320" r="0.5" opacity="0.35"/>
<circle cx="480" cy="360" r="0.6" opacity="0.45"/>
<circle cx="760" cy="340" r="0.5" opacity="0.35"/>
<circle cx="1040" cy="380" r="0.6" opacity="0.45"/>
<circle cx="1320" cy="360" r="0.5" opacity="0.35"/>
<!-- Lower half (below horizon) — sparser -->
<circle cx="180" cy="780" r="0.4" opacity="0.3"/>
<circle cx="420" cy="820" r="0.5" opacity="0.35"/>
<circle cx="720" cy="800" r="0.4" opacity="0.3"/>
<circle cx="980" cy="840" r="0.5" opacity="0.35"/>
<circle cx="1260" cy="800" r="0.4" opacity="0.3"/>
<circle cx="1480" cy="820" r="0.5" opacity="0.35"/>
</g>
<rect width="1600" height="900" filter="url(#grain-warm)" opacity="0.15"/>
</svg>
<div class="tableau__frame"></div>
<div class="tableau__hud-tl">
<span class="hud"><span class="hud__pip"></span>End reel · V</span>
</div>
<div class="tableau__hud-tr">
<span class="hud">Wordmark / surfacing</span>
</div>
<div class="t-closing__wordmark">ARTSABERS</div>
<div class="t-closing__tagline">
From factory floor / <strong>to your door</strong>
</div>
<div class="t-closing__coda">
A signal, from the galaxy
</div>
</section>
</body>
</html>