/* =====================================================================
THE PORK FOUNDATION — devotional shrine
--dread is the master dial (0..1) driven by app.js. Everything
colorimetric, kinetic, or atmospheric is keyed off it.
===================================================================== */
:root {
--dread: 0;
/* Palette (warm devotional) */
--bg: #f1e7d0;
--bg-deep: #e8dcbe;
--ink: #1a1108;
--ink-soft: #3a2810;
--rule: #b89860;
--gold: #a07820;
--gold-bright: #d8a838;
--ruby: #6a1818;
--cream: #f8efd6;
--vellum: #ede0bc;
/* Dread-derived */
--saturation: calc(1 - var(--dread) * 0.55);
--brightness: calc(1 - var(--dread) * 0.18);
--vignette-strength: calc(0.35 + var(--dread) * 0.55);
--shake-amp: calc(var(--dread) * 1.5px);
--rgb-split-amp: calc(var(--dread) * 4px);
--grain-opacity: calc(0.06 + var(--dread) * 0.18);
--maxw: 1180px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Filter applied to (root) so it does NOT establish a containing
block for descendant fixed-position elements — keeps the receipt modal
and overlays anchored to viewport. */
html {
scroll-behavior: smooth;
filter: saturate(var(--saturation)) brightness(var(--brightness));
transition: filter 600ms ease-out;
}
body {
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--ruby); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms; }
a:hover { border-color: var(--ruby); }
/* =====================================================================
GRAIN, VIGNETTE, RGB SPLIT, GLITCH OVERLAYS
===================================================================== */
.grain {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9990;
mix-blend-mode: multiply;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml;utf8,");
}
.vignette {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9991;
background:
radial-gradient(ellipse at center,
transparent 35%,
rgba(20, 8, 4, var(--vignette-strength)) 100%);
transition: background 600ms ease-out;
}
.rgb-split-layer {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9992;
mix-blend-mode: screen;
opacity: calc(var(--dread) * 0.18);
background:
linear-gradient(0deg,
rgba(255, 30, 30, 0.18),
rgba(0, 200, 255, 0.18));
transform: translate(var(--rgb-split-amp), 0);
transition: opacity 400ms;
}
.glitch-frame {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9993;
opacity: 0;
background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.04) 0,
rgba(255,255,255,0.04) 1px,
transparent 1px,
transparent 3px);
mix-blend-mode: screen;
}
.glitch-frame.active {
animation: glitchFlicker 120ms steps(3) 1;
}
@keyframes glitchFlicker {
0% { opacity: 0; transform: translate(0,0); }
20% { opacity: 0.9; transform: translate(-3px,1px); filter: hue-rotate(60deg); }
40% { opacity: 0.6; transform: translate(2px,-2px); }
60% { opacity: 0.85; transform: translate(-1px,2px); filter: hue-rotate(-40deg); }
100% { opacity: 0; transform: translate(0,0); }
}
/* =====================================================================
TYPOGRAPHY
===================================================================== */
h1, h2, h3, h4 {
font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
margin: 0 0 0.4em;
}
h1.display {
font-size: clamp(64px, 11vw, 168px);
letter-spacing: 0.04em;
font-weight: 700;
line-height: 0.95;
margin: 0;
}
h1.display .space { display: inline-block; width: 0.15em; }
h2 {
font-size: clamp(36px, 5vw, 64px);
letter-spacing: 0.02em;
}
h3 {
font-size: 1.4rem;
letter-spacing: 0.005em;
}
h4 {
font-size: 0.85rem;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
}
p { margin: 0 0 1em; }
.kicker {
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.2rem;
}
.section-eyebrow {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
letter-spacing: 0.5em;
color: var(--gold);
margin-bottom: 0.6em;
}
.section-deck {
font-style: italic;
color: var(--ink-soft);
font-size: 1.15rem;
max-width: 56ch;
}
/* =====================================================================
NAV
===================================================================== */
.topnav {
position: fixed;
top: 0; left: 0; right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
z-index: 9000;
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
background: linear-gradient(180deg, rgba(241,231,208,0.95), rgba(241,231,208,0));
backdrop-filter: blur(2px);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--ink);
}
.brand-mark { color: var(--gold); font-size: 1.1rem; }
.brand-name { font-weight: 600; }
.topnav ul {
display: flex;
gap: 28px;
list-style: none;
margin: 0; padding: 0;
}
.topnav a {
color: var(--ink-soft);
border-bottom: none;
transition: color 200ms;
}
.topnav a:hover { color: var(--ruby); }
.topnav a.cta-link {
color: var(--cream);
background: var(--ruby);
padding: 6px 14px;
}
/* =====================================================================
HERO
===================================================================== */
.hero {
position: relative;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 120px 80px 80px;
gap: 64px;
background:
radial-gradient(ellipse at 70% 30%, rgba(248, 215, 130, 0.18), transparent 60%),
linear-gradient(180deg, var(--bg), var(--bg-deep));
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 50%, rgba(160, 120, 32, 0.22), transparent 55%);
pointer-events: none;
}
.hero-portrait {
position: relative;
height: 80vh;
max-height: 900px;
border: 1px solid var(--rule);
box-shadow:
0 30px 80px rgba(20,10,4,0.45),
inset 0 0 0 6px rgba(184,152,96,0.18);
background: #0a0604;
overflow: hidden;
animation: breath 7s ease-in-out infinite;
filter: contrast(calc(1 + var(--dread) * 0.15));
}
.hero-portrait svg {
width: 100%; height: 100%;
display: block;
transform: translateZ(0);
}
@keyframes breath {
0%,100% { transform: scale(1.000); }
50% { transform: scale(1.006); }
}
.hero-text {
position: relative;
}
.hero-sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.5rem;
color: var(--ink-soft);
margin: 1rem 0 2.2rem;
max-width: 32ch;
}
.hero-fineprint {
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink-soft) 60%, transparent);
margin-top: 1.6rem;
}
.hero-trust {
position: absolute;
bottom: 60px;
left: 80px;
right: 80px;
display: flex;
align-items: center;
gap: 28px;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
border-top: 1px solid var(--rule);
padding-top: 18px;
opacity: 0.75;
}
.hero-trust ul {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: 32px;
}
.hero-trust ul li {
font-style: italic;
letter-spacing: 0.06em;
text-transform: none;
font-size: 0.95rem;
font-family: 'Cormorant Garamond', serif;
color: var(--ink-soft);
}
.scroll-cue {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex; align-items: center; gap: 8px;
opacity: 0.6;
animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
0%,100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 6px); }
}
/* ENTER button (devotional, with pulse) */
.enter-btn {
position: relative;
display: inline-block;
padding: 18px 36px;
background: var(--ruby);
color: var(--cream);
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.82rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--ruby));
cursor: pointer;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 22px rgba(106, 24, 24, 0.35);
transition: transform 150ms ease, box-shadow 150ms ease;
}
.enter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(106, 24, 24, 0.45);
}
.enter-btn:active {
transform: translateY(1px);
}
.enter-btn .enter-pulse {
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(248,215,130,0.6), transparent 60%);
opacity: 0;
animation: pulse 2.6s ease-out infinite;
z-index: -1;
}
@keyframes pulse {
0% { opacity: 0; transform: scale(0.8); }
40% { opacity: 0.65; }
100% { opacity: 0; transform: scale(1.6); }
}
.enter-btn.small {
padding: 12px 22px;
font-size: 0.72rem;
}
.enter-btn.submit-btn {
margin-top: 16px;
}
/* =====================================================================
SECTIONS — common
===================================================================== */
.section {
position: relative;
padding: 140px 32px;
max-width: var(--maxw);
margin: 0 auto;
}
.section-head {
margin-bottom: 64px;
text-align: center;
}
.section-head h2 { margin: 0 0 18px; }
.section-head .section-deck { margin: 0 auto; }
/* dread-driven jitter on sections after dread > 0.4 */
.section {
transform: translate(0, 0);
}
@media (prefers-reduced-motion: no-preference) {
body[data-dread-tier="2"] .section,
body[data-dread-tier="3"] .section {
animation: micro-jitter 6s steps(8) infinite;
}
}
@keyframes micro-jitter {
0%,100% { transform: translate(0,0); }
10% { transform: translate(calc(var(--shake-amp) * 0.5), 0); }
20% { transform: translate(calc(var(--shake-amp) * -0.3), calc(var(--shake-amp) * 0.4)); }
30% { transform: translate(0, calc(var(--shake-amp) * -0.3)); }
40% { transform: translate(calc(var(--shake-amp) * 0.7), 0); }
50% { transform: translate(0,0); }
}
/* =====================================================================
ORIGIN
===================================================================== */
.section-origin .origin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 56px;
row-gap: 0;
font-family: 'EB Garamond', serif;
font-size: 1.1rem;
line-height: 1.75;
color: var(--ink);
}
.section-origin .origin-grid p { margin: 0 0 1.2em; }
.dropcap .dc {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 4.2rem;
float: left;
line-height: 0.85;
padding: 6px 12px 0 0;
color: var(--ruby);
}
.origin-aside {
grid-column: 1 / -1;
margin-top: 40px;
padding: 28px 36px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background:
repeating-linear-gradient(180deg, transparent, transparent 28px, rgba(184,152,96,0.05) 28px, rgba(184,152,96,0.05) 29px);
font-style: italic;
color: var(--ink-soft);
}
.origin-aside h3 {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
font-style: normal;
font-weight: 600;
margin-bottom: 10px;
}
.origin-aside p { margin: 0; }
/* mutated tokens get a subtle underline so the user feels something happened */
[data-mutate].mutated {
background: linear-gradient(180deg, transparent 78%, rgba(106, 24, 24, 0.18) 78%);
transition: background 300ms;
}
/* =====================================================================
GALLERY
===================================================================== */
.section-gallery .gallery-grid {
column-count: 3;
column-gap: 18px;
}
@media (max-width: 900px) { .section-gallery .gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .section-gallery .gallery-grid { column-count: 1; } }
.tile {
break-inside: avoid;
margin: 0 0 18px;
background: #1a0a04;
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
cursor: zoom-in;
transition: transform 280ms ease, box-shadow 280ms ease;
}
.tile:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(20,10,4,0.35);
}
.tile-img {
width: 100%;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
background-color: #1a0a04;
}
.tile:nth-child(3n+1) .tile-img { aspect-ratio: 4 / 5; }
.tile:nth-child(3n+2) .tile-img { aspect-ratio: 4 / 6; }
.tile:nth-child(3n) .tile-img { aspect-ratio: 4 / 4.5; }
.tile figcaption {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
background: linear-gradient(180deg, rgba(20,10,4,0.95), rgba(20,10,4,0.55));
padding: 12px 14px;
}
.tile figcaption .plate {
font-family: 'Cormorant Garamond', serif;
color: var(--gold-bright);
letter-spacing: 0.24em;
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
}
.tile figcaption span[data-mutate] {
text-transform: none;
letter-spacing: 0.02em;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--cream);
}
.gallery-note {
text-align: center;
font-style: italic;
color: var(--ink-soft);
margin-top: 40px;
font-size: 0.95rem;
}
/* =====================================================================
HYMN
===================================================================== */
.section-hymn {
text-align: center;
}
.hymn-body {
max-width: 720px;
margin: 0 auto;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.55rem;
line-height: 1.85;
color: var(--ink-soft);
}
.hymn-body p {
margin: 0 0 0.4em;
position: relative;
}
.hymn-body p::before {
content: "·";
display: inline-block;
margin-right: 0.5em;
color: var(--gold);
transform: translateY(-0.2em);
}
.hymn-amen {
font-style: normal !important;
font-weight: 700;
letter-spacing: 0.4em;
text-transform: uppercase;
font-size: 0.95rem;
color: var(--gold);
margin-top: 1.6em !important;
}
.hymn-amen::before { content: "" !important; }
/* =====================================================================
TESTIMONIALS
===================================================================== */
.section-testimonials .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 900px) { .section-testimonials .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .section-testimonials .reviews { grid-template-columns: 1fr; } }
.review {
background: var(--cream);
border: 1px solid var(--rule);
padding: 28px 24px;
font-family: 'EB Garamond', serif;
position: relative;
}
.review .stars {
color: var(--gold-bright);
font-size: 1rem;
letter-spacing: 0.18em;
margin-bottom: 10px;
}
.review h3 {
font-size: 1.2rem;
margin: 0 0 10px;
color: var(--ink);
}
.review p {
font-size: 1rem;
color: var(--ink-soft);
line-height: 1.55;
margin-bottom: 14px;
}
.review footer {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
}
/* =====================================================================
SHRINE
===================================================================== */
.section-shrine {
text-align: center;
}
.shrine-stage {
position: relative;
padding: 70px 24px 40px;
background:
radial-gradient(ellipse 60% 35% at 50% 60%, rgba(255, 168, 70, 0.22), transparent 70%),
radial-gradient(ellipse at 50% 20%, rgba(248, 180, 80, 0.10), transparent 65%),
#1a0a04;
border: 1px solid var(--rule);
color: var(--cream);
margin-top: 24px;
overflow: hidden;
}
.shrine-altar {
position: absolute;
left: 0; right: 0;
bottom: 70px;
height: 38px;
background:
linear-gradient(180deg, rgba(255, 168, 70, 0.18) 0%, rgba(255, 168, 70, 0) 22%),
linear-gradient(180deg, #5a3220 22%, #2a1408 60%, #0a0402);
border-top: 1px solid #7a4628;
border-bottom: 1px solid #050200;
box-shadow: 0 -10px 30px rgba(255, 168, 70, 0.14);
}
/* Faint candle drips on the altar lip */
.shrine-altar::after {
content: "";
position: absolute;
inset: 22px 0 auto 0;
height: 6px;
background:
radial-gradient(circle at 18% 0, rgba(248,220,150,0.45) 0 2px, transparent 3px),
radial-gradient(circle at 32% 0, rgba(248,220,150,0.35) 0 2px, transparent 3px),
radial-gradient(circle at 48% 0, rgba(248,220,150,0.50) 0 2px, transparent 3px),
radial-gradient(circle at 64% 0, rgba(248,220,150,0.30) 0 2px, transparent 3px),
radial-gradient(circle at 82% 0, rgba(248,220,150,0.40) 0 2px, transparent 3px);
background-repeat: no-repeat;
pointer-events: none;
}
.candles {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 14px;
padding-bottom: 50px;
position: relative;
z-index: 1;
}
.candle {
width: 56px;
height: 220px;
cursor: pointer;
position: relative;
transition: transform 200ms;
}
.candle.tall { height: 250px; }
.candle.short { height: 180px; }
.candle:hover { transform: translateY(-2px); }
.candle .candle-svg {
width: 100%;
height: 100%;
overflow: visible; /* allow flame top to escape its viewBox cleanly */
}
/* Flames flicker even when unlit (very faint), so candles never look dead */
.candle .flame {
opacity: 0.18;
transition: opacity 350ms ease-out;
transform-origin: 30px 60px;
}
.candle.lit .flame { opacity: 1; }
.candle:not(.lit) .candle-svg { filter: brightness(0.78) saturate(0.55); }
/* Halo behind a lit candle */
.candle.lit::before {
content: "";
position: absolute;
inset: -10px -8px;
background: radial-gradient(ellipse 60% 40% at 50% 28%, rgba(255, 168, 70, 0.35), transparent 70%);
pointer-events: none;
z-index: 0;
animation: halo-flicker 2.4s ease-in-out infinite;
}
@keyframes halo-flicker {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
.shrine-instruction {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--cream) 60%, transparent);
margin-top: 8px;
}
.shrine-counter {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.shrine-counter > div {
display: flex;
flex-direction: column;
align-items: center;
}
.shrine-counter .big {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--gold-bright);
letter-spacing: 0.04em;
transition: transform 180ms ease, color 180ms ease;
}
.shrine-counter .big.flash {
color: #f8e8a8;
transform: scale(1.18);
}
.shrine-counter .lab {
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in srgb, var(--cream) 60%, transparent);
margin-top: 2px;
}
/* =====================================================================
SIGN-UP
===================================================================== */
.signup {
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
font-family: 'Inter', sans-serif;
}
.signup label {
display: block;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
}
.signup label.check {
display: flex;
align-items: center;
gap: 10px;
text-transform: none;
letter-spacing: 0.04em;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.05rem;
color: var(--ink-soft);
}
.signup label.check input { width: 18px; height: 18px; accent-color: var(--ruby); }
.signup label > span { display: block; margin-bottom: 6px; }
.signup input[type="text"] {
display: block;
width: 100%;
padding: 14px 16px;
background: var(--cream);
border: 1px solid var(--rule);
font-family: 'EB Garamond', serif;
font-size: 1.08rem;
color: var(--ink);
letter-spacing: 0.02em;
}
.signup input[type="text"]:focus {
outline: none;
border-color: var(--ruby);
background: #fff8e4;
}
.signup .submit-btn {
align-self: flex-start;
}
.signup-fineprint {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--ink-soft);
margin-top: 4px;
}
/* receipt modal */
.receipt {
position: fixed; inset: 0;
z-index: 9999;
background: rgba(20,10,4,0.7);
display: flex; align-items: center; justify-content: center;
}
.receipt[hidden] { display: none; }
.receipt-card {
background: var(--cream);
border: 1px solid var(--rule);
padding: 40px 48px;
max-width: 420px;
text-align: center;
font-family: 'EB Garamond', serif;
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.receipt-mark { color: var(--gold); font-size: 1.6rem; margin: 0; }
.receipt-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
margin: 8px 0 12px;
}
.receipt-body { color: var(--ink-soft); margin-bottom: 22px; }
/* =====================================================================
FOOTER
===================================================================== */
.footer {
background: #1a0a04;
color: color-mix(in srgb, var(--cream) 75%, transparent);
padding: 80px 32px 32px;
font-family: 'EB Garamond', serif;
border-top: 1px solid var(--gold);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
max-width: var(--maxw);
margin: 0 auto 40px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.28em;
color: var(--gold-bright);
margin-bottom: 8px;
}
.footer-mark {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
letter-spacing: 0.18em;
color: var(--gold-bright);
margin: 0 0 10px;
}
.footer-bio {
color: color-mix(in srgb, var(--cream) 65%, transparent);
font-size: 0.95rem;
max-width: 38ch;
}
.footer p { margin: 0 0 4px; font-size: 0.95rem; }
.footer-copyright {
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--cream) 45%, transparent);
border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
padding-top: 22px;
}
/* =====================================================================
SUBTLE PHOTO SLOTS — emerge if pork-NN.jpg exists in /photos/
Each slot is invisible until JS confirms the photo loaded; opacity
is dread-gated so they fade up as the visitor stays.
===================================================================== */
/* --- Hero ghosts: faint copies that drift behind the main portrait --- */
.hero-ghost {
position: absolute;
pointer-events: none;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1200ms ease-out;
filter: blur(2px) saturate(0.5);
mix-blend-mode: screen;
z-index: 0;
}
.hero-ghost.live { opacity: calc(var(--dread) * 0.42); }
.hero-ghost-1 {
top: 8%; left: 6%;
width: 22%; aspect-ratio: 4/5;
transform: rotate(-3deg);
animation: ghost-drift-1 22s ease-in-out infinite;
}
.hero-ghost-2 {
bottom: 10%; right: 4%;
width: 26%; aspect-ratio: 4/5;
transform: rotate(2deg);
animation: ghost-drift-2 28s ease-in-out infinite;
}
.hero-ghost-3 {
top: 38%; right: 14%;
width: 18%; aspect-ratio: 4/5;
transform: rotate(-5deg);
animation: ghost-drift-3 18s ease-in-out infinite;
}
@keyframes ghost-drift-1 {
0%,100% { transform: translate(0,0) rotate(-3deg) scale(1); }
50% { transform: translate(8px,-12px) rotate(-2deg) scale(1.02); }
}
@keyframes ghost-drift-2 {
0%,100% { transform: translate(0,0) rotate(2deg) scale(1); }
50% { transform: translate(-10px,8px) rotate(3deg) scale(1.03); }
}
@keyframes ghost-drift-3 {
0%,100% { transform: translate(0,0) rotate(-5deg) scale(1); }
50% { transform: translate(6px,10px) rotate(-4deg) scale(1.04); }
}
/* --- Origin marginalia: small portrait that emerges in the column gutter --- */
.origin-marginalia {
position: absolute;
top: 30%;
right: 0;
width: 92px;
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1200ms ease-out;
filter: sepia(0.45) saturate(0.7) contrast(0.95);
border: 1px solid var(--rule);
box-shadow: 0 8px 22px rgba(20,10,4,0.25);
pointer-events: none;
z-index: 1;
}
.origin-marginalia.live { opacity: calc(0.18 + var(--dread) * 0.6); }
.section-origin { position: relative; }
@media (max-width: 900px) {
.origin-marginalia { width: 64px; top: auto; bottom: 6px; right: 12px; }
}
/* --- Hymn watermark: large faint portrait centred behind the verse --- */
.section-hymn { position: relative; overflow: hidden; }
.hymn-watermark {
position: absolute;
top: 50%;
left: 50%;
width: 480px;
aspect-ratio: 4/5;
transform: translate(-50%, -50%);
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1500ms ease-out;
filter: blur(1.5px) saturate(0.4);
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.hymn-watermark.live { opacity: calc(0.05 + var(--dread) * 0.18); }
.section-hymn .section-head,
.section-hymn .hymn-body { position: relative; z-index: 1; }
@media (max-width: 900px) {
.hymn-watermark { width: 78%; }
}
/* --- Testimonial avatars: small circular thumbs --- */
.review-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.review-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: transparent;
flex-shrink: 0;
border: 1px solid transparent;
filter: grayscale(0.3) sepia(0.18);
opacity: 0;
transition: opacity 600ms ease-out;
}
.review-avatar.live {
opacity: calc(0.55 + var(--dread) * 0.45);
border-color: var(--rule);
}
.review .stars { margin-bottom: 0; }
/* --- Footer seal: small circle next to brand mark --- */
.footer-brand { position: relative; }
.footer-seal {
width: 28px;
height: 28px;
border-radius: 50%;
background-size: cover;
background-position: center;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
filter: grayscale(0.4) brightness(0.95);
opacity: 0;
transition: opacity 800ms ease-out;
border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
}
.footer-seal.live { opacity: calc(0.5 + var(--dread) * 0.5); }
.footer-brand .footer-mark { display: inline-block; vertical-align: middle; margin: 0 0 10px; }
/* =====================================================================
SPOOK LAYERS — added per the design handoff.
- .static-overlay : faint TV static, opacity climbs with --dread
- .dead-pixel : single black pixel that follows the cursor at dread > 0.5
- .rec-dot : top-right "REC" indicator that blinks rarely
- .periph-watcher : apparition that drifts in from the viewport edge
- .full-bleed-apparition : 1-frame full-screen flash on aggressive scroll-up
- .hero-drips : thin dark drip lines descending from the hero portrait
- .cursor-watcher : apparition that lags behind the cursor
All layers are dread-gated and pointer-events:none so they never
intercept clicks. They self-hide if --dread is low.
===================================================================== */
.static-overlay {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9989;
mix-blend-mode: screen;
opacity: calc(var(--dread) * 0.16);
background-image: url("data:image/svg+xml;utf8,");
animation: static-shift 0.18s steps(2) infinite;
}
@keyframes static-shift {
0% { transform: translate(0,0); }
50% { transform: translate(-2px,1px); }
100% { transform: translate(2px,-1px); }
}
.dead-pixel {
position: fixed;
width: 1px; height: 1px;
background: #000;
z-index: 9994;
pointer-events: none;
opacity: 0;
/* JS sets `left` and `top` on mousemove, plus toggles the .live class */
}
.dead-pixel.live { opacity: calc(0.4 + var(--dread) * 0.6); }
.rec-dot {
position: fixed;
top: max(28px, env(safe-area-inset-top));
right: 28px;
z-index: 9995;
display: flex;
align-items: center;
gap: 8px;
font-family: 'Courier New', monospace;
font-size: 0.65rem;
letter-spacing: 0.22em;
color: #d83020;
text-shadow: 0 0 3px rgba(216, 48, 32, 0.6);
pointer-events: none;
opacity: calc(var(--dread) * 1);
}
.rec-dot .rec-bullet {
width: 8px; height: 8px;
border-radius: 50%;
background: #d83020;
box-shadow: 0 0 6px rgba(216, 48, 32, 0.9);
animation: rec-blink 5.4s ease-in-out infinite;
}
@keyframes rec-blink {
0%, 12%, 100% { opacity: 1; }
6% { opacity: 0.2; }
}
.periph-watcher {
position: fixed;
top: 35vh;
left: -130px;
width: 110px;
height: 137px;
z-index: 9988;
pointer-events: none;
mix-blend-mode: screen;
filter: blur(2.5px);
opacity: 0;
transition: opacity 1400ms ease-in-out, left 8s ease-in-out;
}
.periph-watcher.show {
left: 8px;
opacity: calc(0.18 + var(--dread) * 0.4);
}
.periph-watcher.right { left: auto; right: -130px; transition: opacity 1400ms ease-in-out, right 8s ease-in-out; }
.periph-watcher.right.show { right: 8px; }
.periph-watcher svg { width: 100%; height: 100%; }
.full-bleed-apparition {
position: fixed; inset: 0;
z-index: 9996;
pointer-events: none;
background: #000;
opacity: 0;
transition: opacity 60ms ease-out;
display: flex;
align-items: center;
justify-content: center;
}
.full-bleed-apparition svg {
width: min(60vw, 60vh);
height: auto;
filter: blur(0.5px);
}
.full-bleed-apparition.flash { opacity: 0.97; }
.hero-drips {
position: absolute;
top: 0; left: 0; right: 0;
height: 0;
pointer-events: none;
z-index: 5;
overflow: visible;
}
/* Three drip lines descending from the top of the hero portrait,
growing taller as dread climbs. */
.hero-drips::before,
.hero-drips::after,
.hero-drips > .drip-3 { content: ""; }
.hero-drips::before,
.hero-drips::after {
position: absolute;
top: 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(106,24,24,0.85), rgba(58,8,12,0.6) 60%, transparent);
height: calc(var(--dread) * 38vh);
border-radius: 1px;
filter: blur(0.4px);
}
.hero-drips::before { left: 28%; }
.hero-drips::after { left: 64%; height: calc(var(--dread) * 30vh); }
/* A third drip via the box-shadow trick on a 0-size element */
.hero-drips {
--drip3-h: calc(var(--dread) * 22vh);
}
.hero-drips::after {
box-shadow: -36% 0 0 0 transparent;
}
.cursor-watcher {
position: fixed;
top: 0; left: 0;
width: 100px; height: 125px;
pointer-events: none;
z-index: 9988;
mix-blend-mode: screen;
filter: blur(2px);
opacity: 0;
transform: translate(-9999px, -9999px);
transition: opacity 600ms ease-out, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cursor-watcher.live { opacity: calc(0.10 + var(--dread) * 0.35); }
.cursor-watcher svg { width: 100%; height: 100%; }
/* Print-only exorcism document. Hidden on screen, visible on print. */
.exorcism-print {
display: none;
}
@media print {
/* Page becomes the exorcism document only */
body > *:not(.exorcism-print) { display: none !important; }
html { filter: none !important; background: #fff !important; }
body { background: #fff !important; color: #000 !important; }
.exorcism-print {
display: block !important;
max-width: 600px;
margin: 40px auto;
padding: 40px;
background: #fff;
color: #000;
font-family: Georgia, serif;
font-size: 14pt;
line-height: 1.7;
}
}
/* Plate XIII modal — revealed by konami code */
.plate-xiii {
position: fixed; inset: 0;
z-index: 10000;
background: rgba(8, 4, 2, 0.92);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
font-family: 'EB Garamond', serif;
color: var(--cream);
text-align: center;
}
.plate-xiii[hidden] { display: none; }
.plate-xiii .frame {
width: min(400px, 80vw);
aspect-ratio: 4 / 5;
background: #050200;
border: 1px solid var(--gold-bright);
display: flex;
align-items: flex-end;
padding: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 0 0 4px rgba(184,152,96,0.18);
margin-bottom: 28px;
}
.plate-xiii .frame-label {
font-family: 'Cormorant Garamond', serif;
font-size: 0.85rem;
letter-spacing: 0.32em;
color: var(--gold-bright);
}
.plate-xiii h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
margin: 0 0 12px;
color: var(--cream);
}
.plate-xiii p {
font-style: italic;
color: color-mix(in srgb, var(--cream) 75%, transparent);
margin: 0 0 22px;
max-width: 36ch;
}
.plate-xiii button {
background: var(--ruby);
color: var(--cream);
border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--ruby));
padding: 12px 28px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
cursor: pointer;
}
/* Subtle 1-frame motion smear at peak dread */
@media (prefers-reduced-motion: no-preference) {
body[data-dread-tier="3"] { will-change: transform; }
}
/* On mobile, hide the cursor-watcher entirely (no cursor) and the
peripheral watcher. The dead-pixel and full-bleed flash still apply. */
@media (max-width: 900px) {
.cursor-watcher,
.periph-watcher { display: none; }
}
/* =====================================================================
APPARITION — John Pork's face emerges in two places at peak dread.
Both layers stay invisible by default; JS toggles .show / .flicker
at the right moments. The face SVG is built so the silhouette is
black (vanishes on dark) and only the eyes are white (so screen-blend
leaves two faint pupils floating).
===================================================================== */
.apparition {
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
filter: blur(2px);
}
/* Behind the candles. Big, slow crossfade. Fires once per session. */
.apparition-shrine {
position: absolute;
top: 8%;
left: 18%;
right: 18%;
bottom: 22%;
margin: 0;
z-index: 0;
filter: blur(4px) saturate(0.4);
transition: opacity 2400ms ease-in-out;
}
.apparition-shrine.show { opacity: 0.42; }
.apparition-shrine.fade { opacity: 0; transition-duration: 4000ms; }
@media (prefers-reduced-motion: reduce) {
/* Slower fade, lower peak — less abrupt. */
.apparition-shrine { transition-duration: 5000ms; }
.apparition-shrine.show { opacity: 0.32; }
}
/* Over the hero portrait. Tiny flicker — 90ms blink. Only fires when
tier=3 (peak dread) and not while user is mid-scroll. The
transform offsets the apparition's eyes ~6px from the real ones,
creating a brief uncanny doubling. */
.apparition-hero {
position: absolute;
top: 14%;
left: 14%;
width: 72%;
height: 72%;
z-index: 4;
filter: blur(1.5px);
transform: translate(-6px, -3px);
transition: opacity 70ms ease-out;
}
.apparition-hero.flicker { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
/* Disable hero flicker entirely — it's the abruptest of the two effects. */
.apparition-hero { display: none; }
}
/* Visit-10 footer line */
.footer-last-seen {
text-align: center;
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ruby);
margin: 0 0 14px;
opacity: 0.7;
}
/* =====================================================================
STATE CLASSES — escalate body classes via JS as dread climbs
===================================================================== */
body[data-dread-tier="0"] { /* pristine */ }
body[data-dread-tier="1"] {
--bg: #ece2c8;
}
body[data-dread-tier="2"] {
--bg: #d8cba8;
--bg-deep: #c4b890;
}
body[data-dread-tier="3"] {
--bg: #ada080;
--bg-deep: #8c7e60;
--ink: #0a0604;
}
/* eyes intensity (post-enter the eye-tracking JS adds .eyes-active) */
.eye-group .pupil { transition: cx 80ms linear, cy 80ms linear; }
/* =====================================================================
REDUCED MOTION
===================================================================== */
@media (prefers-reduced-motion: reduce) {
.hero-portrait { animation: none; }
.scroll-cue { animation: none; }
.enter-btn .enter-pulse { animation: none; }
.glitch-frame { display: none; }
body { transition: none; }
html { scroll-behavior: auto; }
}
/* =====================================================================
SMALL RESPONSIVE — iPhone 15 (393×852) and similar
===================================================================== */
/* Use small-viewport-height where available (avoids iOS Safari address bar
making 100vh clip). Falls through to 100vh in older browsers. */
@supports (height: 100svh) {
.hero { min-height: 100svh; }
}
/* All buttons + tappables: kill the 300ms iOS click delay + remove the grey tap flash */
.enter-btn,
.tile,
.candle,
.topnav a,
.signup input[type="text"],
.signup .check input,
#receipt-close {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Safe-area awareness — extend behind notch / home bar. */
.topnav {
padding-top: max(18px, env(safe-area-inset-top));
padding-left: max(32px, env(safe-area-inset-left));
padding-right: max(32px, env(safe-area-inset-right));
}
.footer {
padding-bottom: max(32px, env(safe-area-inset-bottom));
padding-left: max(32px, env(safe-area-inset-left));
padding-right: max(32px, env(safe-area-inset-right));
}
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
padding: 100px 24px 60px;
gap: 36px;
}
.hero-portrait { height: 56vh; max-height: 600px; }
.hero-text { text-align: left; }
h1.display { font-size: clamp(56px, 16vw, 92px); }
.hero-sub { font-size: 1.15rem; }
.hero-trust {
position: static;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-top: 32px;
padding-top: 18px;
border-top: 1px solid var(--rule);
}
.hero-trust ul { gap: 18px; flex-wrap: wrap; }
.scroll-cue { display: none; }
.topnav ul { display: none; }
.section { padding: 80px 20px; }
.section-head { margin-bottom: 40px; }
.section-origin .origin-grid { grid-template-columns: 1fr; column-gap: 0; }
/* Hymn: lighter type on small screens */
.hymn-body { font-size: 1.18rem; line-height: 1.7; }
/* Shrine on phone: bigger candles, wrap to 2 rows for breathing room
and proper tap targets. */
.shrine-stage { padding: 48px 16px 32px; }
.candles {
flex-wrap: wrap;
gap: 10px 14px;
padding: 0 0 36px;
max-width: 320px;
margin: 0 auto;
}
.candle { width: 56px; height: 168px; }
.candle.tall { height: 188px; }
.candle.short { height: 144px; }
.shrine-altar { bottom: 80px; height: 32px; }
.shrine-instruction { margin-top: 4px; font-size: 0.7rem; }
.shrine-counter {
gap: 22px;
margin-top: 18px;
padding-top: 18px;
flex-wrap: wrap;
}
.shrine-counter .big { font-size: 1.55rem; }
.shrine-counter .lab { font-size: 0.55rem; letter-spacing: 0.22em; white-space: nowrap; }
/* Testimonials: full-width single column */
.section-testimonials .reviews { grid-template-columns: 1fr; gap: 14px; }
.review { padding: 22px 18px; }
/* Footer: 2 cols becomes single col on phone */
.footer { padding: 60px 20px 20px; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
/* Brand wordmark shrinks on tiny phones */
.brand-name { font-size: 0.7rem; letter-spacing: 0.14em; }
/* Newsletter form */
.signup { gap: 14px; }
.signup input[type="text"] { font-size: 1rem; padding: 12px 14px; }
/* Tile tap state (no hover on touch) */
.tile:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(20,10,4,0.4); }
/* Receipt card edges */
.receipt-card { padding: 28px 24px; max-width: calc(100% - 32px); }
}
/* Even smaller screens: SE, older iPhones */
@media (max-width: 380px) {
.candles { gap: 8px 10px; max-width: 290px; }
.candle { width: 50px; height: 156px; }
.candle.tall { height: 176px; }
.candle.short { height: 132px; }
.shrine-counter { gap: 16px; }
.shrine-counter .big { font-size: 1.4rem; }
h1.display { font-size: 48px; }
}