/* ==========================================================================
editing.halovisionai.cloud — Jayden Mikus, short-form editor
Visual system taken from studio.halovisionai.cloud (the Studio site):
the night-sky entrance hall, the Fraunces display word, and the
papier/rot/tinte palette. Values below are lifted from that codebase
rather than re-guessed, including its measured contrast decisions.
========================================================================== */
@font-face{
font-family:'Fraunces';
src:url('assets/fonts/fraunces-latin.woff2') format('woff2-variations');
font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Bricolage Grotesque';
src:url('assets/fonts/bricolage-latin.woff2') format('woff2-variations');
font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Instrument Serif';
src:url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
:root{
/* Papier — the night grounds */
--papier: #0C0820;
--papier-tief: #130D2A;
--sand: #1A1236;
--nacht: #120C22;
--nacht-2: #1E1436;
/* Tinte — warm off-white, never pure #fff */
--tinte: #F6EFE6;
--tinte-matt: rgba(246,239,230,.76);
--tinte-leise: rgba(246,239,230,.60);
/* Rot. Two of them on purpose: --rot carries display sizes and fills,
--rot-schrift carries small type. --rot on --papier measures 4.27:1,
which is under the 4.5 small text needs; --rot-schrift measures 7.8. */
--rot: #D93A1E;
--rot-schrift: #F5836A;
--rot-tief: #A32410;
--sonne: #F2A93B;
--koralle: #F1745C;
--strich: rgba(246,239,230,.16);
--strich-hell: rgba(246,239,230,.26);
--display: 'Fraunces', 'Instrument Serif', ui-serif, Georgia, serif;
--sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--serif: 'Instrument Serif', ui-serif, Georgia, serif;
--schwung: cubic-bezier(.16,1,.3,1);
--maxw: 1180px;
--gutter: clamp(20px, 5vw, 64px);
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
margin:0;
background:var(--papier);
color:var(--tinte);
font-family:var(--sans);
font-size:17px;
font-weight:300;
line-height:1.62;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
scrollbar-width:thin;
scrollbar-color:rgba(246,239,230,.18) transparent;
}
body::-webkit-scrollbar{ width:8px }
body::-webkit-scrollbar-track{ background:transparent }
body::-webkit-scrollbar-thumb{ background:rgba(246,239,230,.18); border-radius:99px }
img,video,canvas{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
/* ══════════════════════════════════════════════════════════════════════════
VORHALLE — the entrance hall.
A 300vh track over a fixed scene. Everything sinks as you scroll, because
the camera rises. Three stages cross-fade in the same grid cell.
══════════════════════════════════════════════════════════════════════════ */
.vorhalle{ position:relative; z-index:2; height:300vh; pointer-events:none }
.vorhalle__szene{ position:fixed; inset:0; overflow:hidden; background:#07061A }
.vorhalle[data-fertig] .vorhalle__szene,
.vorhalle[data-fertig] .vorhalle__fuss{ visibility:hidden }
/* Blue night at the top, black at the bottom. Never a grey ramp, that reads
as fog instead of night. The extra light sits at the top and on the
horizon, deliberately not in the middle where the display word stands. */
.vorhalle__himmel{
position:absolute; inset:0;
background:
radial-gradient(92% 48% at 42% 78%, rgba(255,168,112,.34) 0%, rgba(196,86,118,.20) 42%, transparent 76%),
radial-gradient(98% 60% at 24% 0%, rgba(84,130,232,.72) 0%, transparent 64%),
linear-gradient(180deg, #33499E 0%, #202A63 20%, #1A1B45 42%, #120E2C 66%, #07061A 100%);
}
/* The haze along the ridge. Without it the range looks cut out and pasted on. */
.vorhalle__dunst{
position:absolute; left:-10%; right:-10%; bottom:16%; height:34vh; pointer-events:none;
background:radial-gradient(52% 100% at 42% 100%, rgba(255,146,102,.30), transparent 74%);
filter:blur(18px);
}
/* The low sun. It sits at 42%, not centre: a light core directly behind the
word costs exactly the contrast large type needs. Centred with `translate`,
never `transform` — the driver writes `transform` on every parallax layer
each frame and would overwrite a centring placed in the same field. */
.vorhalle__gestirn{
position:absolute; left:42%; bottom:22vh; width:min(34vh,44vw); aspect-ratio:1;
translate:-50% 50%; will-change:transform; pointer-events:none;
border-radius:50%;
background:radial-gradient(circle at 50% 50%,
rgba(255,240,222,.95) 0%, rgba(255,206,150,.74) 24%,
rgba(255,150,102,.36) 43%, rgba(226,98,92,.15) 64%, transparent 78%);
}
.vorhalle__sterne{ position:absolute; inset:0; display:block }
/* Three ridges, three depths. They hang far below the frame because they SINK
while scrolling; under a ridge there must always be fill, or the sky comes
back through as a glowing strip where rock should be.
`max-width:none` is required: the base rule caps media at 100%, which would
silently trim the 108% width while `left` still shifts. */
.vorhalle__berg{
position:absolute; left:-4%; width:108%; display:block;
bottom:-12vh; height:82vh;
will-change:transform; pointer-events:none;
max-width:none;
}
/* The three fills live on the paths themselves (#241541 / #160C28 / #07040E),
measured together with the ridge geometry. Do not override them here. */
.vorhalle__berg--fern { opacity:.50 }
.vorhalle__berg--mitte{ opacity:.80 }
/* The veil behind the word. A sibling of the stage, never its ::before: as a
pseudo-element it disappears together with the stage whenever a contrast
check hides the text, so the measurement never sees it and reports numbers
that did not change. Over a star field it reads as depth, not as a box. */
.vorhalle__schleier{
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(58% 42% at 50% 48%,
rgba(7,6,26,.62) 0%, rgba(7,6,26,.42) 46%, rgba(7,6,26,.16) 72%, transparent 88%);
}
.vorhalle__buehne{
position:absolute; inset:0; display:grid; place-items:center;
padding:0 5vw; text-align:center;
}
/* All stages share one grid cell so they can cross-fade. Side by side and
toggled with display:none they could not blend, and a hard swap mid-scroll
is the one edge this page has nowhere. */
.vorhalle__etappe{ grid-area:1/1; width:100%; will-change:transform, opacity }
.vorhalle__kicker{
margin:0 0 clamp(1rem,2.4vh,1.8rem);
font-size:.72rem; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; color:var(--rot-schrift);
}
/* The word is a