*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #141414;
--bg-2: #1a1a1a;
--bg-3: #1f1f1f;
--white: #ffffff;
--off-white: #c8c8c8;
--muted: #666666;
--line: rgba(255,255,255,0.08);
--gold: #d4af37;
--font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* scrollbar-gutter keeps the scrollbar's space reserved even while the intro
locks scrolling (overflow:hidden), so the centered hero text doesn't jump
left when the scrollbar reappears on unlock. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Scroll anchoring is evaluated per potential-anchor element, not just on
the scroller — disabling it only on html/body still leaves it free to
anchor to a descendant. It needs to be off everywhere to stop the
browser nudging scrollY on its own to compensate for the descent
pin-spacer's height changing as the pin releases, which otherwise
silently absorbs/delays our own gap-snap scrollTo writes there. */
* { overflow-anchor: none; }
body {
background: var(--bg);
color: var(--white);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── ACCESSIBILITY TOGGLE STATES (global) ──
Driven by the nav accessibility panel; persisted in localStorage and
re-applied on every page by script.js. */
/* 1. High contrast — redefine the palette tokens on so the whole
token-based UI flips to pure black/white with much stronger hairlines
(every border/divider that uses --line strengthens automatically).
Decorative gradients (hero-bg, descent frames, .c1–.c9) stay as-is. */
body.a11y-contrast {
--bg: #000000; --bg-2: #000000; --bg-3: #0a0a0a;
--white: #ffffff; --off-white: #ffffff; --muted: #cfcfcf;
--line: rgba(255,255,255,0.55);
}
body.a11y-contrast :is(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Thicken the very thin display type in high-contrast with a hairline stroke
instead of font-weight — text-stroke paints over the glyph and does NOT
change its advance width, so nothing reflows. Scoped to the light-weight
hero/closing headlines and their tracked eyebrow marks, not body copy. */
body.a11y-contrast .hero-statement-mark,
body.a11y-contrast .hero-statement-line,
body.a11y-contrast .descent-outro-mark,
body.a11y-contrast .descent-outro-line {
-webkit-text-stroke: 0.4px currentColor;
}
/* 2. Font size — zoom scales the whole (px-based) layout uniformly. */
body.a11y-fs-1 { zoom: 1.12; }
body.a11y-fs-2 { zoom: 1.25; }
/* 3. Reduce motion (manual, beyond the OS media query) — near-instant durations
kill CSS animations/transitions (grid, particles, fadeUp, all transitions).
Canvas/WebGL rAF loops keep running (chosen scope A3). */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* ── NAV ── */
nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 28px 60px;
transition: background 0.4s, padding 0.4s, transform 0.7s cubic-bezier(.16,1,.3,1) 0.7s;
}
nav.scrolled {
background: rgba(20,20,20,0.95);
backdrop-filter: blur(12px);
padding: 18px 60px;
border-bottom: 1px solid var(--line);
}
.nav-logo {
font-size: 22px; font-weight: 700;
letter-spacing: 0.18em; color: var(--white);
text-decoration: none; text-transform: uppercase;
display: flex; align-items: center; flex-shrink: 0;
}
.nav-logo-img { height: 24px; width: auto; flex-shrink: 0; position: relative; left: 30px; }
.nav-links {
display: flex; gap: 48px; list-style: none;
}
.nav-links a {
color: var(--off-white); text-decoration: none;
font-size: 12px; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 500;
position: relative; transition: color 0.2s;
}
.nav-links a::after {
content: ''; position: absolute; bottom: -4px; left: 0;
width: 0; height: 1px; background: var(--white);
transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-links.open {
display: flex; flex-direction: column;
position: absolute; top: 100%; left: 0; right: 0;
background: rgba(20,20,20,0.98);
padding: 24px 32px; gap: 20px;
border-bottom: 1px solid var(--line);
}
.nav-cta {
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 500; color: var(--bg); background: var(--white);
padding: 10px 24px; text-decoration: none;
transition: background 0.2s;
}
.nav-cta:hover { background: var(--off-white); }
.nav-burger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span {
display: block; width: 24px; height: 1px;
background: var(--white);
}
/* ── NAV ACCESSIBILITY BUTTON + PANEL ── */
.nav-a11y {
position: absolute; right: 210px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; flex-shrink: 0;
}
/* Option A: taken OUT of the nav flex flow so the logo, links and Kontakt keep
their original space-between positions — the button only sits in the
Blog↔Kontakt gap. The right offset is viewport-tuned (CSS-only), so it can
drift slightly at extreme widths; adjust these three values to taste. */
@media (max-width: 1100px) { .nav-a11y { right: 130px; } }
@media (max-width: 1024px) { .nav-a11y { right: 64px; } } /* beside the burger */
/* Tablet/iPad: use the mobile burger nav already below 1024px — the full
desktop nav overcrowds here (links/Kontakt overlap) and the opaque Kontakt
button hides the absolutely-positioned a11y button. Only the nav switches at
this breakpoint; the rest of the tablet/mobile layout keeps its own
breakpoints (1100px grids, 768px single-column) unchanged. */
@media (max-width: 1024px) {
.nav-links { display: none; }
.nav-links.open { display: flex; }
.nav-cta { display: none; }
.nav-burger { display: flex; }
}
.nav-a11y-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0;
background: none; border: 1px solid var(--line); border-radius: 50%;
color: var(--off-white); cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-a11y-btn:hover,
.nav-a11y-btn[aria-expanded="true"] { color: var(--white); border-color: rgba(255,255,255,0.4); }
.nav-a11y-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.nav-a11y-panel {
position: absolute; top: calc(100% + 14px); right: 0; z-index: 20;
width: 260px; padding: 18px;
background: rgba(20,20,20,0.98); border: 1px solid var(--line);
backdrop-filter: blur(16px);
display: flex; flex-direction: column; gap: 18px;
opacity: 0; visibility: hidden; transform: translateY(-10px);
transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
}
.nav-a11y-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.a11y-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.a11y-group--col { flex-direction: column; align-items: stretch; gap: 10px; }
.a11y-label {
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--off-white); font-weight: 500;
}
/* Switch toggle (Kontrast / Animationen) */
.a11y-toggle {
flex-shrink: 0; width: 42px; height: 22px; padding: 0;
background: none; border: none; cursor: pointer;
}
.a11y-toggle-track {
display: block; width: 42px; height: 22px; border-radius: 22px;
background: var(--bg-3); border: 1px solid var(--line);
position: relative; transition: background 0.2s, border-color 0.2s;
}
.a11y-toggle-thumb {
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
border-radius: 50%; background: var(--off-white);
transition: transform 0.2s, background 0.2s;
}
.a11y-toggle[aria-checked="true"] .a11y-toggle-track { background: var(--white); border-color: var(--white); }
.a11y-toggle[aria-checked="true"] .a11y-toggle-thumb { transform: translateX(20px); background: var(--bg); }
.a11y-toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 22px; }
/* Segmented font-size control */
.a11y-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.a11y-seg-btn {
padding: 8px 6px; background: var(--bg-3); border: 1px solid var(--line);
color: var(--off-white); font-family: var(--font);
font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.a11y-seg-btn:hover { color: var(--white); }
.a11y-seg-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); border-color: var(--white); }
.a11y-seg-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* ── NAV DROPDOWN (Leistungen) ──
Desktop/hover only — see the 1100px query below. The outer .nav-dropdown
has no gap below the trigger (padding-top carries the visual gap
instead), so the mouse never crosses dead space and drops the :hover. */
.nav-has-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { opacity: 0.55; transition: transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.2s; }
.nav-has-dropdown:hover .nav-caret,
.nav-has-dropdown:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-dropdown {
position: absolute; top: 100%; left: 0; z-index: 10;
padding-top: 18px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown-panel {
width: 252px; background: rgba(20,20,20,0.98);
border: 1px solid var(--line); padding: 8px;
backdrop-filter: blur(16px);
transform: translateY(-10px) scale(0.96); transform-origin: top left;
transition: transform 0.35s cubic-bezier(.16,1,.3,1);
}
.nav-has-dropdown:hover .nav-dropdown-panel,
.nav-has-dropdown:focus-within .nav-dropdown-panel {
transform: translateY(0) scale(1);
}
.nav-dropdown-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; color: var(--off-white);
opacity: 0; transform: translateY(6px);
transition: background 0.2s, color 0.2s, opacity 0.3s ease, transform 0.3s ease;
}
.nav-dropdown-item::after { display: none; }
.nav-dropdown-item svg { opacity: 0.55; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; }
.nav-dropdown-item:hover { background: var(--bg-3); color: var(--white); }
.nav-dropdown-item:hover svg { opacity: 1; transform: translateX(2px); }
.nav-has-dropdown:hover .nav-dropdown-item,
.nav-has-dropdown:focus-within .nav-dropdown-item { opacity: 1; transform: translateY(0); }
.nav-dropdown-item:nth-child(1) { transition-delay: 0.03s; }
.nav-dropdown-item:nth-child(2) { transition-delay: 0.07s; }
.nav-dropdown-item:nth-child(3) { transition-delay: 0.11s; }
.nav-dropdown-item:nth-child(4) { transition-delay: 0.15s; }
/* ── BUTTONS ── */
.btn-primary {
display: inline-block; padding: 14px 36px;
background: var(--white); color: var(--bg);
text-decoration: none; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 600; transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--off-white); transform: translateY(-1px); }
.btn-ghost {
display: inline-flex; align-items: center; gap: 10px;
color: var(--off-white); text-decoration: none; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 500; transition: color 0.2s;
}
.btn-ghost:hover { color: var(--white); }
.btn-ghost svg { transition: transform 0.2s; }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-outline {
display: inline-block; text-align: center; padding: 13px 28px;
border: 1px solid var(--line); color: var(--white);
text-decoration: none; font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
transition: background 0.2s, border-color 0.2s;
}
.btn-outline:hover { background: var(--white); color: var(--bg); border-color: var(--white); }
/* ── SECTION DEFAULTS ── */
section { padding: 120px 60px; }
.section-label {
font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--muted); margin-bottom: 24px;
display: flex; align-items: center; gap: 16px;
}
.section-label::before {
content: ''; width: 32px; height: 1px; background: var(--muted);
}
.section-title {
font-size: clamp(32px, 4vw, 54px); font-weight: 700;
line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 20px;
}
.section-desc {
font-size: 15px; color: var(--off-white); max-width: 520px;
line-height: 1.75; font-weight: 300; margin-bottom: 60px;
}
/* ── PAGE HERO (subpages) ── */
/* ── Portfolio intro: immersive 3D photo gallery (portfolio-gallery.js) ──
Full-viewport WebGL canvas (mounted as an absolute child by the script) with
a centered title overlay and a scroll hint. Scroll passes straight through it
into the page-hero and the existing portfolio grid below. */
/* Tall scroll track: the visual itself stays pinned (the sticky stage below)
while the user scrolls through this extra height, so they linger in the
gallery longer before the page-hero and grid arrive. Tune the dwell time by
changing this height (300vh ≈ two extra screens of pinned scrolling). */
.portfolio-gallery {
position: relative; height: 300vh;
width: 100%; background: var(--bg);
}
/* Pinned stage that actually holds the WebGL canvas + overlay at viewport size. */
.portfolio-gallery-stage {
position: sticky; top: 0; height: 100vh; min-height: 600px;
width: 100%; overflow: hidden;
}
/* Bottom fade so the gallery dissolves into the page background rather than
ending on a hard edge above the page-hero. */
.portfolio-gallery-stage::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
z-index: 2; pointer-events: none;
background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
}
.portfolio-gallery-overlay {
position: absolute; inset: 0; z-index: 3; pointer-events: none;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 18px;
/* Reads cleanly over whatever photo drifts behind it. */
mix-blend-mode: exclusion; color: var(--white);
}
.portfolio-gallery-eyebrow {
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 500; padding-left: 0.22em;
}
.portfolio-gallery-title {
font-size: clamp(56px, 12vw, 160px); font-weight: 700;
letter-spacing: -0.04em; line-height: 0.95; margin: 0;
}
.portfolio-gallery-hint {
position: absolute; left: 0; right: 0; bottom: 38px; z-index: 3;
pointer-events: none; text-align: center;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
font-weight: 500; color: var(--off-white);
display: flex; flex-direction: column; gap: 6px;
}
.portfolio-gallery-hint-sub { color: var(--muted); }
.page-hero {
padding: 180px 60px 100px;
border-bottom: 1px solid var(--line);
position: relative; overflow: hidden;
}
.page-hero::before {
content: attr(data-title);
position: absolute; right: 60px; bottom: -20px;
font-size: clamp(80px, 14vw, 200px);
font-weight: 700; letter-spacing: -0.05em;
color: rgba(255,255,255,0.03);
line-height: 1; white-space: nowrap; pointer-events: none;
}
.page-hero-eyebrow {
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--muted); margin-bottom: 20px;
}
.page-hero h1 {
font-size: clamp(42px, 6vw, 88px); font-weight: 700;
line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 28px;
}
.page-hero p {
font-size: 16px; color: var(--off-white); max-width: 500px;
line-height: 1.75; font-weight: 300;
}
/* ── Liquid-metal hero variant ──
A WebGL chrome backdrop (liquid-metal.js) renders into .page-hero-canvas,
a left-to-right scrim keeps the headline readable, and a decorative frosted
glass panel sits upper-right and lets the metal shimmer through it. */
.page-hero--shader {
background: var(--bg);
min-height: 100vh;
min-height: 100dvh; /* fills the viewport on mobile despite browser chrome */
display: flex; flex-direction: column; justify-content: center;
}
/* Kill the giant data-title watermark for this variant (the "TECHNIK" word). */
.page-hero--shader::before { content: none; }
.page-hero-canvas {
position: absolute; inset: 0; z-index: 0;
pointer-events: none;
}
.page-hero-canvas canvas { display: block; width: 100%; height: 100%; }
/* Readability scrim: solid background on the left where the text lives, fading
to fully transparent on the right so the metal and glass stay visible. */
.page-hero--shader::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg,
var(--bg) 0%,
rgba(20,20,20,0.88) 28%,
rgba(20,20,20,0.35) 58%,
rgba(20,20,20,0) 82%);
}
/* The lens refraction (the "glass") is drawn inside the WebGL shader
(liquid-metal.js) so it can truly refract the metal, not just blur it. */
.page-hero--shader .page-hero-content { position: relative; z-index: 3; }
/* Small camera artwork floating over the animation. Its PNG background is
transparent, so it hovers on the metal; a slow bob makes it "schweben". */
.page-hero-camera {
position: absolute; z-index: 2; pointer-events: none;
right: calc(clamp(16px, 6vw, 96px) - 2vw); top: 48%;
/* Sized so the camera's transparent lens hole (≈0.240·artwork width) equals
the shader glass circle (diameter 2·0.145 = 0.29·hero height):
width = 0.29 / 0.240 ≈ 1.209 → 120.9vh. */
width: 120.9vh;
aspect-ratio: 1376 / 768; height: auto;
transform: translateY(-50%);
filter: drop-shadow(0 26px 52px rgba(0,0,0,0.6));
animation: heroCameraFloat 6s ease-in-out infinite;
}
@keyframes heroCameraFloat {
0%, 100% { transform: translateY(calc(-50% + 9px)); }
50% { transform: translateY(calc(-50% - 9px)); }
}
@keyframes heroCameraFloatMobile {
0%, 100% { transform: translateX(50%) translateY(7px); }
50% { transform: translateX(50%) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
.page-hero-camera { animation: none; }
}
/* On narrow viewports the text column gets wide, so retire the glass panel and
darken the scrim across the full width to keep the headline crisp. */
@media (max-width: 900px) {
.page-hero--shader { min-height: 88vh; min-height: 88dvh; }
/* Centre the floating camera near the bottom so it clears the full-width text. */
.page-hero-camera {
right: 50%; top: auto; bottom: 7%;
width: clamp(200px, 56vw, 320px);
transform: translateX(50%);
animation-name: heroCameraFloatMobile;
}
.page-hero--shader::after {
background: linear-gradient(90deg,
var(--bg) 0%,
rgba(20,20,20,0.92) 45%,
rgba(20,20,20,0.6) 100%);
}
}
/* ── HERO (homepage) ── */
.hero {
position: relative; height: 100vh; min-height: 700px;
display: flex; align-items: center; justify-content: center;
text-align: center; overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background:
linear-gradient(to bottom, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.7) 60%, rgba(20,20,20,1) 100%),
linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}
.hero-grid { position: absolute; inset: 0; overflow: hidden; }
.hero-grid::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 80px 80px;
transform: perspective(600px) rotateX(30deg) scale(2);
transform-origin: bottom center;
animation: gridMove 8s linear infinite;
}
@keyframes gridMove {
from { background-position: 0 0; }
to { background-position: 0 80px; }
}
.particle {
position: absolute; width: 2px; height: 2px;
background: rgba(255,255,255,0.5); border-radius: 50%;
animation: floatUp linear infinite;
}
@keyframes floatUp {
from { transform: translateY(100vh); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
to { transform: translateY(-10vh); opacity: 0; }
}
.hero-content {
position: relative; z-index: 2;
padding: 0 60px; max-width: 1000px;
}
/* Centered hero statement — mirrors the closing grid statement styling
(.descent-outro-mark / .descent-outro-line) so hero and grid read as a pair.
Fades in on load (during the intro) BEFORE nav and buttons appear. */
.hero-statement-mark {
display: block;
font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
color: var(--muted); font-weight: 500; padding-left: 0.42em;
margin-bottom: 18px;
animation: fadeUp 1s ease 0.3s both;
}
.hero-statement-line {
font-size: clamp(30px, 4.5vw, 60px); font-weight: 300; letter-spacing: -0.02em;
line-height: 1.1; color: var(--white); max-width: 18ch;
margin: 0 auto 44px;
animation: fadeUp 1s ease 0.5s both;
}
.hero-eyebrow {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--muted); margin-bottom: 7px;
transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero-title {
font-size: clamp(47px, 7.2vw, 99px); font-weight: 700;
line-height: 0.92; letter-spacing: -0.03em; margin-bottom: 32px;
transition: opacity 0.8s ease 0.12s, transform 0.8s ease 0.12s;
}
.hero-title em { font-style: normal; color: var(--muted); }
.hero-sub {
font-size: 13.5px; color: var(--off-white); max-width: 414px;
line-height: 1.7; margin-bottom: 47px;
transition: opacity 0.8s ease 0.24s, transform 0.8s ease 0.24s; font-weight: 300;
}
.hero-actions {
display: flex; gap: 20px; align-items: center; justify-content: center;
margin-top: 14px;
transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}
/* Hero buttons a touch smaller than the site-wide CTA size (scoped to the hero
so other CTAs are unaffected). */
.hero-actions .btn-primary { padding: 12px 30px; font-size: 11px; }
/* Counterweight the arrow (gap 10 + icon 16 = 26px) on the left so the label
"Projekt starten" sits centered in the button box, mirroring the filled
button whose symmetric padding already centers its text. */
.hero-actions .btn-ghost { font-size: 11px; padding-left: 26px; }
.hero-scroll {
position: absolute; bottom: 40px; right: 60px;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.8s ease 0.35s, transform 0.8s ease 0.35s;
}
/* Rotating "scroll to explore" cue — pure CSS/SVG, no JS */
.scroll-cue {
--size: 84px; /* Durchmesser des Buttons */
--speed: 16s; /* Dauer einer Umdrehung */
--color: var(--muted); /* Text- und Punktfarbe */
--track-size: 9px; /* Schriftgröße des Rings */
--track-spacing: 0.18em;/* Laufweite (Buchstabenabstand) */
--dot-size: 5px; /* Größe des Mittelpunkts */
display: inline-grid;
place-items: center;
width: var(--size);
height: var(--size);
color: var(--color);
cursor: pointer;
transition: color 0.3s ease;
}
.scroll-cue:hover { --color: #fff; }
.scroll-cue__ring {
grid-area: 1 / 1;
width: 100%;
height: 100%;
animation: scroll-cue-spin var(--speed) linear infinite;
}
.scroll-cue text {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: var(--track-size);
letter-spacing: var(--track-spacing);
text-transform: uppercase;
fill: var(--color);
}
.scroll-cue__dot {
grid-area: 1 / 1;
align-self: center;
justify-self: center;
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
background: var(--color);
}
@keyframes scroll-cue-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.scroll-cue__ring { animation: none; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── HERO CANVAS (hills backdrop) + INTRO ──
The GLSL hills (descent-hills.js) mount into .hero-canvas and run
immediately as the hero background. On first load the chrome (nav + hero
text) is hidden and the page is scroll-locked via .intro on ;
script.js removes .intro after the intro dwell, and the staggered
transitions on nav / hero text (above) then reveal them. */
.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-canvas canvas { display: block; width: 100%; height: 100%; }
/* Absolute in both of its homes (originally the hero, now the descent-outro
slot) so the floating particles fill the container and stay out of the
slot's flex layout. */
#particles { position: absolute; inset: 0; pointer-events: none; }
html.intro, html.intro body { overflow: hidden; height: 100%; }
/* The centered hero statement stays visible during the intro; only the nav,
buttons and scroll-cue are held back and revealed after it.
NOTE: the nav is hidden via transform (slide up), NOT opacity — descent.js
owns the nav's opacity via GSAP (autoAlpha), and hiding it here with opacity
would collide with that and leave the nav stamped invisible after the intro. */
html.intro #nav { transform: translateY(-120%); }
html.intro .hero-actions,
html.intro .hero-scroll { opacity: 0; transform: translateY(24px); }
/* ── DESCENT (Immersive Scroll Sequence) ──
Placeholder frames until real footage lands. To swap in real material,
add an ![]()
or