987 lines
40 KiB
HTML
987 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Last Draw — by Michelle Sam</title>
|
|
<meta name="description" content="What if the fate of humanity rested on a lottery? An Afrofuturistic grounded sci-fi series by Michelle Sam.">
|
|
<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=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--ghana-red: #CE1126;
|
|
--ghana-gold: #FCD116;
|
|
--ghana-green: #006B3F;
|
|
--deep-red: #8B0000;
|
|
--earth-red: #A0522D;
|
|
--midnight: #0a0a0f;
|
|
--dark-bg: #0d0d14;
|
|
--card-bg: rgba(15, 15, 25, 0.9);
|
|
--text-primary: #f0ece4;
|
|
--text-secondary: rgba(240, 236, 228, 0.7);
|
|
--text-muted: rgba(240, 236, 228, 0.5);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--midnight);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ═══════ NAV ═══════ */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 1.2rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: linear-gradient(180deg, rgba(10,10,15,0.95) 0%, transparent 100%);
|
|
transition: background 0.4s;
|
|
}
|
|
|
|
nav.scrolled {
|
|
background: rgba(10, 10, 15, 0.97);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.15em;
|
|
color: var(--ghana-gold);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--ghana-gold);
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--text-primary);
|
|
position: absolute;
|
|
left: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.nav-toggle span:nth-child(1) { top: 0; }
|
|
.nav-toggle span:nth-child(2) { top: 9px; }
|
|
.nav-toggle span:nth-child(3) { top: 18px; }
|
|
|
|
/* ═══════ HERO ═══════ */
|
|
.hero {
|
|
position: relative;
|
|
height: 100vh;
|
|
min-height: 700px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse at 30% 20%, rgba(206, 17, 38, 0.15) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 70% 80%, rgba(0, 107, 63, 0.1) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 50% 50%, rgba(252, 209, 22, 0.05) 0%, transparent 70%),
|
|
var(--midnight);
|
|
}
|
|
|
|
#hero-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--ghana-gold);
|
|
margin-bottom: 2rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s 0.5s forwards;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(4rem, 12vw, 10rem);
|
|
line-height: 0.9;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s 0.8s forwards;
|
|
}
|
|
|
|
.hero-title .draw {
|
|
color: var(--ghana-red);
|
|
display: block;
|
|
}
|
|
|
|
.hero-byline {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.4rem;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.2em;
|
|
margin-bottom: 3rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s 1.1s forwards;
|
|
}
|
|
|
|
.hero-scroll {
|
|
opacity: 0;
|
|
animation: fadeUp 1s 1.5s forwards;
|
|
}
|
|
|
|
.hero-scroll a {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.scroll-line {
|
|
width: 1px;
|
|
height: 40px;
|
|
background: var(--ghana-gold);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.3; transform: scaleY(1); }
|
|
50% { opacity: 1; transform: scaleY(1.3); }
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ═══════ SECTIONS ═══════ */
|
|
section {
|
|
padding: 8rem 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.3em;
|
|
color: var(--ghana-gold);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
letter-spacing: 0.04em;
|
|
line-height: 1;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* ═══════ QUESTION ═══════ */
|
|
.question-section {
|
|
position: relative;
|
|
padding: 10rem 2rem;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
background:
|
|
radial-gradient(ellipse at center, rgba(0, 107, 63, 0.08) 0%, transparent 70%),
|
|
var(--midnight);
|
|
}
|
|
|
|
.question-section .question {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.8rem, 4vw, 3.2rem);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--ghana-gold);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ═══════ LOGLINE ═══════ */
|
|
.logline-section {
|
|
position: relative;
|
|
max-width: 100%;
|
|
padding: 6rem 2rem;
|
|
background: linear-gradient(180deg, var(--deep-red) 0%, var(--midnight) 100%);
|
|
}
|
|
|
|
.logline-inner {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logline-text {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ═══════ SYNOPSIS ═══════ */
|
|
.synopsis-section {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.synopsis-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.synopsis-text strong {
|
|
color: var(--ghana-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════ DIVIDER ═══════ */
|
|
.divider {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(252, 209, 22, 0.3) 50%, transparent 100%);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ═══════ FULL-BLEED SECTIONS ═══════ */
|
|
.full-bleed {
|
|
max-width: 100%;
|
|
padding: 8rem 2rem;
|
|
}
|
|
|
|
.full-bleed .inner {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ═══════ INSPIRATION ═══════ */
|
|
.inspiration-section {
|
|
background:
|
|
linear-gradient(180deg, var(--midnight) 0%, rgba(13, 13, 20, 0.95) 30%, var(--midnight) 100%),
|
|
radial-gradient(ellipse at 50% 0%, rgba(206, 17, 38, 0.06) 0%, transparent 60%);
|
|
}
|
|
|
|
.inspiration-text {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.inspiration-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ═══════ THEMES ═══════ */
|
|
.themes-section {
|
|
background:
|
|
radial-gradient(ellipse at 20% 50%, rgba(252, 209, 22, 0.05) 0%, transparent 50%),
|
|
var(--midnight);
|
|
}
|
|
|
|
.themes-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.theme-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.theme-tag {
|
|
padding: 0.5rem 1.2rem;
|
|
border: 1px solid rgba(252, 209, 22, 0.3);
|
|
color: var(--ghana-gold);
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ═══════ STORY WORLD ═══════ */
|
|
.world-section {
|
|
background:
|
|
radial-gradient(ellipse at 70% 30%, rgba(0, 107, 63, 0.08) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 30% 70%, rgba(160, 82, 45, 0.08) 0%, transparent 50%),
|
|
var(--midnight);
|
|
}
|
|
|
|
.world-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.world-text em {
|
|
color: var(--text-primary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.palette-bar {
|
|
display: flex;
|
|
height: 6px;
|
|
margin-top: 3rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.palette-bar span {
|
|
flex: 1;
|
|
}
|
|
|
|
.palette-bar .p-red { background: var(--ghana-red); }
|
|
.palette-bar .p-green { background: var(--ghana-green); }
|
|
.palette-bar .p-gold { background: var(--ghana-gold); }
|
|
.palette-bar .p-earth { background: var(--earth-red); }
|
|
|
|
/* ═══════ TONE ═══════ */
|
|
.tone-section {
|
|
background: var(--midnight);
|
|
}
|
|
|
|
.tone-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tone-text em {
|
|
color: var(--text-primary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ═══════ COMPS ═══════ */
|
|
.comps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.comp-card {
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
background: var(--card-bg);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.comp-card:hover {
|
|
border-color: rgba(252, 209, 22, 0.2);
|
|
}
|
|
|
|
.comp-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.5rem;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.comp-detail {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ═══════ CHARACTERS ═══════ */
|
|
.characters-section {
|
|
background:
|
|
radial-gradient(ellipse at 50% 0%, rgba(206, 17, 38, 0.06) 0%, transparent 40%),
|
|
var(--midnight);
|
|
}
|
|
|
|
.character-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.character-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
padding: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s, transform 0.3s;
|
|
}
|
|
|
|
.character-card:hover {
|
|
border-color: rgba(252, 209, 22, 0.2);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.character-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
}
|
|
|
|
.character-card.akua::before { background: var(--ghana-red); }
|
|
.character-card.eman::before { background: #4a6fa5; }
|
|
.character-card.sarah::before { background: var(--ghana-gold); }
|
|
.character-card.rebecca::before { background: #9b59b6; }
|
|
.character-card.grandma-bea::before { background: #f5f5dc; }
|
|
.character-card.joanna::before { background: var(--ghana-green); }
|
|
.character-card.missy::before { background: var(--ghana-red); }
|
|
|
|
.character-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.character-age {
|
|
font-size: 0.8rem;
|
|
color: var(--ghana-gold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.character-desc {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ═══════ CLOSING QUESTION ═══════ */
|
|
.closing-section {
|
|
max-width: 100%;
|
|
padding: 10rem 2rem;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(ellipse at 50% 50%, rgba(206, 17, 38, 0.1) 0%, transparent 60%),
|
|
var(--midnight);
|
|
}
|
|
|
|
.closing-question {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--text-primary);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.closing-question strong {
|
|
color: var(--ghana-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════ FOOTER ═══════ */
|
|
footer {
|
|
padding: 4rem 2rem 2rem;
|
|
text-align: center;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.footer-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.footer-author {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-link {
|
|
display: inline-block;
|
|
color: var(--ghana-gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.7rem 2rem;
|
|
border: 1px solid rgba(252, 209, 22, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
background: rgba(252, 209, 22, 0.1);
|
|
border-color: var(--ghana-gold);
|
|
}
|
|
|
|
.footer-copy {
|
|
margin-top: 3rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ═══════ SCROLL REVEAL ═══════ */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ═══════ MOBILE ═══════ */
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 280px;
|
|
height: 100vh;
|
|
background: rgba(10, 10, 15, 0.98);
|
|
flex-direction: column;
|
|
padding: 5rem 2rem;
|
|
transition: right 0.4s;
|
|
}
|
|
|
|
.nav-links.active {
|
|
right: 0;
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: block;
|
|
z-index: 101;
|
|
}
|
|
|
|
section, .full-bleed {
|
|
padding: 5rem 1.5rem;
|
|
}
|
|
|
|
.question-section, .closing-section {
|
|
padding: 6rem 1.5rem;
|
|
}
|
|
|
|
.comps-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.character-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="nav">
|
|
<div class="nav-logo">THE LAST DRAW</div>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#logline">Logline</a></li>
|
|
<li><a href="#synopsis">Synopsis</a></li>
|
|
<li><a href="#inspiration">Inspiration</a></li>
|
|
<li><a href="#world">World</a></li>
|
|
<li><a href="#characters">Characters</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<canvas id="hero-canvas"></canvas>
|
|
<div class="hero-content">
|
|
<p class="hero-tagline">A Cineasthesia Production</p>
|
|
<h1 class="hero-title">THE LAST<span class="draw">DRAW</span></h1>
|
|
<p class="hero-byline">by Michelle Sam</p>
|
|
<div class="hero-scroll">
|
|
<a href="#question">
|
|
<span>Discover</span>
|
|
<span class="scroll-line"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- QUESTION -->
|
|
<div class="question-section" id="question">
|
|
<p class="question reveal">What if the fate of humanity rested on a lottery?</p>
|
|
</div>
|
|
|
|
<!-- LOGLINE -->
|
|
<div class="logline-section" id="logline">
|
|
<div class="logline-inner reveal">
|
|
<p class="section-label">Logline</p>
|
|
<p class="logline-text">With seven days before an unstoppable environmental disaster, world leaders launch a global lottery to decide who escapes to Mars—but when the most unlikely members of society and the black sheep of a multigenerational Ghanaian family are selected, they must navigate family fractures, buried truths, and the deeper forces shaping who lives and who's left behind.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- SYNOPSIS -->
|
|
<section class="synopsis-section" id="synopsis">
|
|
<div class="reveal">
|
|
<p class="section-label">Synopsis</p>
|
|
<h2 class="section-title">The Story</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Earth is dying. Environmental collapse has reached the point of no return. Salvation comes in the form of <strong>The Draw</strong>, a mysterious algorithmic lottery that selects a tiny fraction of the global population to be relocated to rumored sanctuaries on Mars. It's humanity's last hope—or its final betrayal. There are only seven days left before the world as we know it ends. And the whole world knows it.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">As the first round of "winners" are announced, shock and chaos ripple across the globe. Lottery riots erupt in wealthy enclaves. Underground salvation scams boom. Religious factions splinter over whether The Draw is divine, demonic, or rigged. Meanwhile, in Accra, a middle-class Ghanaian family—the <strong>Amahs</strong>—receive no selection at all.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text"><strong>Akua</strong>, the matriarch and a data scientist who once worked on the project that birthed the algorithm, believed she had outsmarted fate. She thought she'd secured a slot for her family. Her husband, <strong>Eman</strong>, a failed revolutionary turned civil servant, tries to make sense of the betrayal. Their eldest daughter, <strong>Sarah</strong>, a rising executive in the global aid industrial complex, starts calling in favors. <strong>Joanna</strong>, their neurodivergent teenage daughter, silently starts working on a pattern, hoping to uncover the true logic behind The Draw. <strong>Grandma Bea</strong> is confident they'll be chosen eventually—her prayers are strong, her faith unshakeable. <strong>Rebecca</strong>, the middle daughter, turns to sage, chants, and spiritual rituals, trying to raise the vibration of the household to "ping" the universe.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">The family compound becomes a pressure cooker of secrets, blame, and fractured hope. A war room. A shrine. A confessional. Then chaos knocks on the door. <strong>Missy</strong>, Akua's estranged sister—a sharp-tongued, unstable artist dismissed as the family's black sheep—crashes at the compound after her artist squat is raided. She brings nothing but sarcasm and an uncomfortable truth: <em>"Maybe you were never meant to be saved."</em></p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">On Day Three, a second round of names drops—and <strong>Missy's is on the list</strong>. The family erupts. Akua demands answers. Sarah accuses Missy of cheating the system. Rebecca begins unraveling. Eman retreats into political rhetoric. Joanna watches—recording, mapping, decoding, feeling the air shift. Missy, meanwhile, doesn't want it.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Joanna quietly hacks into fragments of the algorithm using Akua's old research files. What she uncovers is disturbing: The Draw isn't about merit, power, or perceived morality. It's picking people with certain characteristics, not credentials. The "last draw" is triggered not by class, power, or intellect—but by unseen value, emotional congruence, pattern recognition. It's looking for people who don't replicate the corruption of the old world.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">In a final, emotional confrontation, Joanna, the one no one really listened to, steps forward. She plays back everything—the breakdowns, confessions, betrayals. She offers it all back, not to shame them, but to show the truth of their humanity. Without performance. Without polish. And then... <strong>Joanna's name appears. Joanna and Missy.</strong> The two least expected. The least respected. Not because they clawed for it, but because they held the family's emotional mirror. And tap into a soul "rememberance".</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- INSPIRATION -->
|
|
<div class="full-bleed inspiration-section" id="inspiration">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">From the Creator</p>
|
|
<h2 class="section-title">Inspiration</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">The seeming randomness of life... The Last Draw is deeply rooted in a series of profound personal losses and upheavals that has occurred over a very short amount of time in my life over the past couple of years—the death and grief of my mother, the complexity of healing an overactive nervous system from trauma, the dissolution of unhealthy chosen family bonds, a long term romantic relationship ending, an unstable economy, and the loss of my home and neighborhood to the devastating fires.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">These experiences stripped away my Maslow hierarchy of needs, one layer at a time, back to back, until I was left asking: What shows up when everything familiar is gone? When no one is looking, who are the people that show up... or don't? What is the version of "you" that shows up for yourself or is revealed when everything is seemingly stripped away, and the roles we take on/masking that we sometimes do in life to survive becomes futile?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">In the silence of loss—when the noise of life fades away—I found myself confronting my own vulnerability and resilience. The ache of absence and instability became a mirror reflecting who I am beneath the roles I play, and what remains when the world strips away certainty. This question echoes throughout the story: how do we find grounding and belonging when the foundations beneath us crumble?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">I wanted to tell an Afrofuturistic satirical grounded sci-fi story that isn't set centuries from now, because Afrofuturism is already here. It may not look like Wakanda, but it's happening now through our innovation, resilience, and leadership in technology and culture... and it's time to showcase that vibrancy and complexity. The Last Draw invites us to rethink survival, belonging, and hope—not as distant fantasies, but as urgent realities shaping our present and near future.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- THEMES -->
|
|
<div class="full-bleed themes-section" id="themes">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Exploring</p>
|
|
<h2 class="section-title">Themes</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="themes-text">This question of identity amidst apparent randomness is at the heart of the story. Life often feels like a lottery—arbitrary, unfair, and chaotic. Yet, we hold onto the idea of free will, of agency, even when circumstances seem to suggest otherwise. How do we reconcile that tension? How do we preserve our integrity and humanity in a world that is rapidly shifting toward technocracy and commodification, where conspicuous consumption is worshiped and blatant corruption rewarded?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="themes-text">As we stand at the crossroads of a global shift toward technocratic control and rampant commodification of the human experience, The Last Draw questions what it means to claim agency and authenticity. The global lottery in the film is a reflection of this when it throws everything into chaos when it course corrects itself from being rigged—selecting the most unlikely people at first glance, who in reality possess internal qualities that would benefit a new reimagined society that doesn't rely on external shallow markers of worth.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="themes-text"><em>The Last Draw</em> is a story about the underdog—the people whose true gifts remain unseen, even to themselves, in a society that often values wealth and power over character. It explores the delicate balance between collectivist values and individual survival during times of extreme crisis. Central to this vision is the role of women as cultural bearers and architects of the future.</p>
|
|
</div>
|
|
<div class="theme-tags reveal">
|
|
<span class="theme-tag">Identity</span>
|
|
<span class="theme-tag">Agency</span>
|
|
<span class="theme-tag">Technocracy</span>
|
|
<span class="theme-tag">Commodification</span>
|
|
<span class="theme-tag">Underdogs</span>
|
|
<span class="theme-tag">Women as Cultural Bearers</span>
|
|
<span class="theme-tag">Collectivism vs. Survival</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- STORY WORLD -->
|
|
<div class="full-bleed world-section" id="world">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Setting</p>
|
|
<h2 class="section-title">Story World</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="world-text">In the near future, the world is in chaos, and everyone is living their final days on Earth as best they can. Earth is about to be on the brink of destruction due to a predicted catastrophic environmental disaster. With time running out, the world's governments have pooled their resources to build a massive colony on Mars, capable of accommodating a fraction of Earth's population. The only way to get there is by winning a "randomized" lottery, and the world waits with bated breath to see who will be chosen and survive The Last Draw.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="world-text">The setting in Accra, Ghana, operates as its own character. <em>The Last Draw</em> is a love letter to Ghana in all its complexity. We will emphasize a deep, rich, cinematic, saturated palette. The red of the soil in Ghana, the green of the land and vegetation, the gold of the sun, and the nuance of dark skin will all be a subtle nod to the Ghanaian flag, which stands in contrast to films set in the dystopian world genre.</p>
|
|
</div>
|
|
<div class="palette-bar reveal">
|
|
<span class="p-red"></span>
|
|
<span class="p-earth"></span>
|
|
<span class="p-green"></span>
|
|
<span class="p-gold"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- TONE & COMPS -->
|
|
<div class="full-bleed tone-section" id="tone">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Style</p>
|
|
<h2 class="section-title">Tone & Comparisons</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="tone-text"><em>The Last Draw</em> is a genre-blending grounded sci-fi with the biting social satire and absurdity of <em>Parasite</em> and <em>The Menu</em>, the spiritual unease of <em>The Leftovers</em>, and the gritty immediacy of <em>Children of Men</em>. It moves between grounded family intimacy and expansive global stakes, anchored by dark humor and emotional poignancy.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="tone-text">While the film centers on a speculative event—a mysterious global lottery—it is not driven by spectacle, but by the quiet tensions, betrayals, and reckonings it triggers within a fractured family.</p>
|
|
</div>
|
|
<div class="comps-grid reveal">
|
|
<div class="comp-card">
|
|
<h3 class="comp-title">District 9</h3>
|
|
<p class="comp-detail">Social commentary through sci-fi allegory set in Africa</p>
|
|
</div>
|
|
<div class="comp-card">
|
|
<h3 class="comp-title">Arrival</h3>
|
|
<p class="comp-detail">Cerebral sci-fi driven by emotional truth and communication</p>
|
|
</div>
|
|
<div class="comp-card">
|
|
<h3 class="comp-title">Children of Men</h3>
|
|
<p class="comp-detail">Gritty immediacy in a collapsing world, hope against despair</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- CHARACTERS -->
|
|
<div class="full-bleed characters-section" id="characters">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Meet</p>
|
|
<h2 class="section-title">The Amah Family</h2>
|
|
</div>
|
|
<div class="character-grid">
|
|
<div class="character-card akua reveal">
|
|
<h3 class="character-name">Akua</h3>
|
|
<p class="character-age">50s · The Matriarch</p>
|
|
<p class="character-desc">A scientist, mother, intelligent, obsessive, clings to routines. Denial as a shield. Overburdened optimist. She secretly worked on the algorithm and believed she had secured their family's safety, only to be wrong. Shattered when her belief in reason and meritocracy fails.</p>
|
|
</div>
|
|
<div class="character-card eman reveal">
|
|
<h3 class="character-name">Eman</h3>
|
|
<p class="character-age">Late 50s · The Patriarch</p>
|
|
<p class="character-desc">Former revolutionary or intellectual who sold out for stability. Father, believes in meritocracy... barely. Charismatic and insecure about relevance. Tries to "logic" his way through the crisis. Represents broken systems—education, patriarchy, ideology—all cracking under pressure.</p>
|
|
</div>
|
|
<div class="character-card sarah reveal">
|
|
<h3 class="character-name">Sarah</h3>
|
|
<p class="character-age">Late 30s · The Eldest</p>
|
|
<p class="character-desc">Eldest daughter, golden child, feels entitled to be chosen due to sacrifice and perfectionism, overachiever, emotionally detached, the one who "escaped", but is spiritually lost. Plans to "buy" survival. Represents the myth of success under late capitalism.</p>
|
|
</div>
|
|
<div class="character-card rebecca reveal">
|
|
<h3 class="character-name">Rebecca</h3>
|
|
<p class="character-age">Mid 20s · The Middle Child</p>
|
|
<p class="character-desc">Still believes in love, justice, and signs from the universe. Wears her heart on her sleeve, believes the lottery is a test of the soul. Works in mutual aid, volunteers at anonymous lottery grief circles. Considers herself spiritual—but when she meets a terminally ill "chosen one," she secretly forms plans to convince the stranger to let her assume her identity.</p>
|
|
</div>
|
|
<div class="character-card grandma-bea reveal">
|
|
<h3 class="character-name">Grandma Bea</h3>
|
|
<p class="character-age">70s · The Elder</p>
|
|
<p class="character-desc">Sharp-witted, her body is aging, but her spirit is still fiery. Deeply religious, hilarious without trying, emotionally sharp under her exterior. A self-declared "prayer warrior" who hosts late-night intercessions via WhatsApp. Struggles with the conflict between divine fate and algorithmic control.</p>
|
|
</div>
|
|
<div class="character-card joanna reveal">
|
|
<h3 class="character-name">Joanna</h3>
|
|
<p class="character-age">15–17 · The Youngest</p>
|
|
<p class="character-desc">Youngest daughter, quiet, artistic, tech savvy, neurodivergent, and emotionally attuned. Not taken seriously, but sees everything. Speaks blunt truths that make everyone uncomfortable. She unfolds into quiet leadership. Cracks the "code" of the algorithm and its reasoning.</p>
|
|
</div>
|
|
<div class="character-card missy reveal">
|
|
<h3 class="character-name">Missy</h3>
|
|
<p class="character-age">30s · The Black Sheep</p>
|
|
<p class="character-desc">Younger aunt, slightly unhinged unrecognized artist, bitingly funny, seen as "wasting potential." Deeply intuitive, emotionally messy, but honest. She spits in the face of the lottery. She never asked to be saved. But her unwavering integrity, her refusal to "perform" worthiness—that's exactly what makes her worthy.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CLOSING -->
|
|
<div class="closing-section">
|
|
<p class="closing-question reveal"><strong>Who were we... when it mattered most?</strong><br><br>And if the old world is ending...<br>are we worthy of what comes next?</p>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer id="contact">
|
|
<p class="footer-title">The Last Draw</p>
|
|
<p class="footer-author">Written by Michelle Sam</p>
|
|
<a href="https://elle-o-elle.lol" class="footer-link" target="_blank">elle-o-elle.lol</a>
|
|
<p class="footer-copy">© 2025 Michelle Sam / Cineasthesia. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Nav scroll
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 80);
|
|
});
|
|
|
|
// Mobile nav
|
|
const toggle = document.getElementById('navToggle');
|
|
const links = document.getElementById('navLinks');
|
|
toggle.addEventListener('click', () => {
|
|
links.classList.toggle('active');
|
|
});
|
|
links.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => links.classList.remove('active'));
|
|
});
|
|
|
|
// Scroll reveal
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
// Particle canvas - lottery numbers / falling data
|
|
const canvas = document.getElementById('hero-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = canvas.offsetWidth;
|
|
canvas.height = canvas.offsetHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = -20;
|
|
this.speed = 0.3 + Math.random() * 1.5;
|
|
this.opacity = 0.1 + Math.random() * 0.4;
|
|
this.size = Math.random() < 0.3 ? 10 + Math.random() * 14 : 2 + Math.random() * 3;
|
|
this.isNumber = this.size > 8;
|
|
this.value = this.isNumber ? Math.floor(Math.random() * 10) : null;
|
|
this.drift = (Math.random() - 0.5) * 0.3;
|
|
}
|
|
update() {
|
|
this.y += this.speed;
|
|
this.x += this.drift;
|
|
if (this.y > canvas.height + 20) this.reset();
|
|
}
|
|
draw() {
|
|
ctx.globalAlpha = this.opacity;
|
|
if (this.isNumber) {
|
|
ctx.fillStyle = '#FCD116';
|
|
ctx.font = `${this.size}px 'Bebas Neue', monospace`;
|
|
ctx.fillText(this.value, this.x, this.y);
|
|
} else {
|
|
ctx.fillStyle = '#CE1126';
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
}
|
|
|
|
const particles = Array.from({ length: 60 }, () => {
|
|
const p = new Particle();
|
|
p.y = Math.random() * canvas.height;
|
|
return p;
|
|
});
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => { p.update(); p.draw(); });
|
|
ctx.globalAlpha = 1;
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|