/* ============================================================
FLYVISION MEDIA — design website
palette: warm cream + amber/orange + deep teal-black (retro gradient)
============================================================ */
/* Fonts now loaded via in HTML for parallel fetch (faster on mobile). */
:root {
--grain: 0.5;
--blur: 28px;
/* unified dark theme */
--bg: #0F1C29;
--bg-2: #0a1520;
--surface: rgba(255,255,255,0.04);
--ink: #e8f2f5;
--ink-2: #c8d4dc;
--ink-soft: #6b8090;
/* accents */
--highlight: #00FFAE;
--corp: #00ADAB;
--grad-1: #C3FF00;
--grad-2: #FF66AA;
--grad-3: #AA44FF;
--grad-4: #00AAFF;
--line-light: rgba(232, 242, 245, 0.10);
--line-dark: rgba(232, 242, 245, 0.10);
--font-sans: 'Open Sans', system-ui, sans-serif;
--font-display: 'Open Sans Condensed', 'Open Sans', system-ui, sans-serif;
--font-mono: 'Open Sans', ui-monospace, 'SF Mono', monospace;
--letter-mono: 0.06em;
--letter-display: 0.01em;
--max: 1480px;
--pad-x: clamp(20px, 4vw, 64px);
/* Award / festival cream-gold — solo accent, used sparingly */
--cream: #E9D7A8;
--cream-rgb: 233, 215, 168;
/* shared page-max for case studies + landing wrappers */
--page-max: 1600px;
}
* { box-sizing: border-box; }
/* smooth scroll for in-page nav (#anchors). Respects reduced-motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
em { font-style: italic; font-weight: 300; }
.dim { opacity: 0.55; }
/* ============================================================
GRAIN OVERLAY (page-wide, fixed, non-interactive)
============================================================ */
.grain-overlay {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9999;
opacity: var(--grain);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
/* Punch a hole over the reel rect when active. The path() includes
arcs for the player's border-radius so the cutout matches the
frame's rounded corners exactly. No transition — must snap to
scroll position frame-perfectly or the mask visibly drags. */
clip-path: var(--grain-clip, none);
}
/* ============================================================
MAGNETIC LINKS
============================================================ */
.magnetic {
display: inline-block;
transition: transform 280ms cubic-bezier(.2, .9, .2, 1);
will-change: transform;
}
/* ============================================================
CINEMATIC FADE-IN (per element, staggered inside each section)
Subtle. Slow. Felt. Never showy.
============================================================ */
[data-cine="in"] {
opacity: 0;
transform: translate3d(0, 14px, 0) scale(1.014);
filter: blur(0.5px);
transition:
opacity 1700ms cubic-bezier(.2,.65,.2,1),
transform 1700ms cubic-bezier(.2,.65,.2,1),
filter 1700ms cubic-bezier(.2,.65,.2,1);
transition-delay: var(--cine-delay, 0ms);
will-change: opacity, transform, filter;
}
.cine-play [data-cine="in"] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0);
}
/* Bilder & Videos: noch einen Tick länger, etwas mehr scale-down → cineastisch */
[data-cine="in"]:where(img, video, figure, .placeholder-image) {
transform: translate3d(0, 20px, 0) scale(1.024);
transition-duration: 2100ms;
}
.cine-play [data-cine="in"]:where(img, video, figure, .placeholder-image) {
transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
[data-cine="in"] {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* ============================================================
REVEAL ON SCROLL
============================================================ */
.reveal-init, .reveal-in { opacity: 1; }
/* subtle reveal-in for non-hero sections — gentle fade.
The cinematic per-element fade-in carries the motion;
the section wrapper just brings opacity in to avoid double-motion. */
.reveal-init:not(.hero) {
opacity: 0;
transition: opacity 700ms cubic-bezier(.2,.7,.2,1);
}
.reveal-in:not(.hero) {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.reveal-init:not(.hero), .reveal-in:not(.hero) {
opacity: 1; transform: none; transition: none;
}
}
/* ============================================================
GLASS
============================================================ */
.glass {
background: rgba(232, 242, 245, 0.05);
backdrop-filter: blur(var(--blur)) saturate(1.2);
-webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
border: 1px solid rgba(232, 242, 245, 0.12);
}
.glass-strong {
background: rgba(232, 242, 245, 0.04);
backdrop-filter: blur(calc(var(--blur) * 1.2)) saturate(1.25);
-webkit-backdrop-filter: blur(calc(var(--blur) * 1.2)) saturate(1.25);
border: 1px solid rgba(232, 242, 245, 0.10);
}
.section-light .glass-strong {
background: rgba(232, 242, 245, 0.04);
border: 1px solid rgba(232, 242, 245, 0.10);
}
/* ============================================================
SECTION THEMING (full dark)
============================================================ */
/* ============================================================
TYPE SCALES
============================================================ */
.display {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(64px, 10.4vw, 176px);
line-height: 0.95;
letter-spacing: var(--letter-display);
margin: 0;
text-wrap: balance;
text-transform: uppercase;
}
.display em {
font-weight: 300;
font-style: italic;
color: var(--highlight);
text-transform: uppercase;
}
.title-xl {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(48px, 6.8vw, 110px);
line-height: 0.98;
letter-spacing: var(--letter-display);
margin: 0 0 80px;
text-wrap: balance;
text-transform: uppercase;
}
.title-l {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(36px, 4vw, 64px);
line-height: 1.02;
letter-spacing: var(--letter-display);
margin: 0 0 32px;
text-wrap: balance;
text-transform: uppercase;
}
.title-l .dim {
font-family: var(--font-sans);
font-weight: 300;
text-transform: none;
letter-spacing: -0.01em;
font-size: 0.65em;
display: inline-block;
margin-top: 12px;
}
.kicker {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
}
.body {
font-size: 17px;
line-height: 1.6;
max-width: 52ch;
font-weight: 400;
}
.lede {
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.45;
max-width: 44ch;
font-weight: 400;
color: var(--ink-2);
margin: 28px 0 40px;
text-transform: none;
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
padding: 24px var(--pad-x) 48px;
overflow: hidden;
background: var(--bg);
isolation: isolate;
display: flex;
flex-direction: column;
}
/* ============================================================
AURORA — soft, blurred, blended color clouds
Each layer is one color and they overlap with screen blend
so colors transition softly with no hard edges.
============================================================ */
.blob-stage {
position: absolute; inset: -20%;
z-index: 0;
overflow: hidden;
}
.aurora {
position: absolute;
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0.55;
transition: transform 1200ms cubic-bezier(.2,.7,.2,1), filter 1200ms cubic-bezier(.2,.7,.2,1);
will-change: transform, filter;
animation: auroraDrift 28s ease-in-out infinite alternate;
}
.a-1 {
width: 70%; height: 70%;
top: -10%; left: -8%;
background: radial-gradient(circle, #00FFD1 0%, transparent 65%);
animation-delay: -2s;
}
.a-2 {
width: 80%; height: 75%;
top: 5%; right: -10%;
background: radial-gradient(circle, #FF66AA 0%, transparent 65%);
animation-delay: -8s;
animation-duration: 32s;
}
.a-3 {
width: 75%; height: 75%;
bottom: -15%; left: 10%;
background: radial-gradient(circle, #00ADAB 0%, transparent 65%);
animation-delay: -14s;
animation-duration: 36s;
}
.a-4 {
width: 85%; height: 80%;
bottom: -10%; right: -5%;
background: radial-gradient(circle, #00AAFF 0%, transparent 65%);
animation-delay: -20s;
animation-duration: 40s;
}
@keyframes auroraDrift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(4%, -3%, 0) scale(1.08); }
100% { transform: translate3d(-3%, 4%, 0) scale(0.96); }
}
.blob-shine {
position: absolute; inset: 0;
background:
radial-gradient(40% 30% at 75% 25%, rgba(255,255,255,0.06), transparent 60%);
mix-blend-mode: screen;
pointer-events: none;
}
/* dim everything slightly so the bg color shows thru */
.hero::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 0%, rgba(15, 28, 41, 0.35) 70%, rgba(15, 28, 41, 0.55) 100%);
pointer-events: none;
z-index: 1;
}
/* topbar */
.topbar {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: flex; align-items: center; gap: 10px;
font-size: 16px; font-weight: 600;
letter-spacing: -0.01em;
}
.brand-mark {
width: 28px; height: 28px;
filter: drop-shadow(0 0 10px rgba(0, 255, 174, 0.55)); /* recolor SVG to highlight green */
/* using filter mask: invert+hue */
filter: brightness(0) saturate(100%) invert(91%) sepia(53%) saturate(2826%) hue-rotate(94deg) brightness(101%) contrast(102%) drop-shadow(0 0 10px rgba(0, 255, 174, 0.55));
}
.brand-name .dim { font-weight: 400; opacity: 0.55; }
.brand-logo {
height: 40px;
width: auto;
display: block;
filter: drop-shadow(0 0 14px rgba(0, 173, 171, 0.35));
}
.nav {
display: flex; gap: 36px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
}
.nav a:hover { color: var(--highlight); }
/* Burger button — hidden on desktop, shown on mobile */
.burger-btn {
display: none;
position: relative;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(232, 242, 245, 0.18);
background: rgba(232, 242, 245, 0.04);
backdrop-filter: blur(12px);
border-radius: 999px;
cursor: pointer;
z-index: 60;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
transition: border-color 240ms, background 240ms;
}
.burger-btn:hover {
border-color: rgba(0, 255, 174, 0.40);
}
.burger-line {
display: block;
width: 18px;
height: 1.5px;
background: var(--ink);
border-radius: 2px;
transform-origin: center;
transition: transform 280ms cubic-bezier(.6,.0,.2,1), opacity 200ms, background 240ms;
}
.burger-btn:hover .burger-line { background: var(--highlight); }
.burger-btn.is-open .burger-line:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
background: var(--highlight);
}
.burger-btn.is-open .burger-line:nth-child(2) { opacity: 0; }
.burger-btn.is-open .burger-line:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
background: var(--highlight);
}
/* Burger overlay — covers viewport, fades in */
.burger-overlay {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(15, 28, 41, 0.82);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
pointer-events: none;
transition: opacity 320ms cubic-bezier(.4,0,.2,1);
display: flex;
align-items: center;
justify-content: center;
}
.burger-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.burger-nav {
display: flex;
flex-direction: column;
gap: 4px;
padding: 32px;
max-width: 480px;
width: 100%;
}
.burger-link {
display: flex;
align-items: baseline;
gap: 18px;
padding: 14px 8px;
border-bottom: 1px solid rgba(232, 242, 245, 0.08);
color: var(--ink);
text-decoration: none;
transform: translateY(12px);
opacity: 0;
transition: transform 480ms cubic-bezier(.2,.7,.2,1), opacity 360ms, color 240ms, border-color 240ms;
}
.burger-overlay.is-open .burger-link {
transform: translateY(0);
opacity: 1;
}
.burger-overlay.is-open .burger-link:nth-child(1) { transition-delay: 60ms; }
.burger-overlay.is-open .burger-link:nth-child(2) { transition-delay: 110ms; }
.burger-overlay.is-open .burger-link:nth-child(3) { transition-delay: 160ms; }
.burger-overlay.is-open .burger-link:nth-child(4) { transition-delay: 210ms; }
.burger-overlay.is-open .burger-link:nth-child(5) { transition-delay: 260ms; }
.burger-overlay.is-open .burger-link:nth-child(6) { transition-delay: 310ms; }
.burger-overlay.is-open .burger-link:nth-child(7) { transition-delay: 360ms; }
.burger-link:hover {
color: var(--highlight);
border-bottom-color: rgba(0, 255, 174, 0.30);
}
.burger-link-n {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--letter-mono);
color: var(--ink-soft);
min-width: 24px;
}
.burger-link:hover .burger-link-n { color: var(--highlight); }
.burger-link-label {
font-family: var(--font-display);
font-size: clamp(28px, 7vw, 44px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.05;
}
/* Mobile: hide desktop nav + meta-pill, show burger */
@media (max-width: 980px) {
.topbar .nav { display: none; }
.topbar .meta-pill { display: none; }
.burger-btn { display: inline-flex; }
}
.meta-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
font-weight: 600;
color: var(--ink);
}
.meta-pill .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--highlight);
box-shadow: 0 0 0 3px rgba(0, 255, 174, 0.18), 0 0 12px rgba(0, 255, 174, 0.6);
}
/* vertical type — legacy, only used inside hero (now empty). Side rails do this globally. */
.vertical-type {
position: absolute;
z-index: 4;
display: none;
}
/* ============================================================
GLOBAL SIDE RAILS — fixed dark stripes left & right
============================================================ */
.side-rail {
position: fixed;
top: 0;
bottom: 0;
width: 36px;
z-index: 50;
pointer-events: none;
/* dark muted purple panel from the reference */
background: linear-gradient(
180deg,
rgba(58, 50, 88, 0.85) 0%,
rgba(46, 40, 72, 0.92) 50%,
rgba(36, 32, 60, 0.95) 100%
);
/* very subtle inner edge for depth */
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.04),
inset -1px 0 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px) saturate(0.9);
-webkit-backdrop-filter: blur(8px) saturate(0.9);
}
.side-rail-left { left: 0; }
.side-rail-right { right: 0; }
/* tiny grain only on the rails — sells the printed-stripe feel */
.side-rail::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
mix-blend-mode: overlay;
opacity: 0.35;
pointer-events: none;
}
/* mono vertical-type slots positioned along each rail */
.side-rail-text {
position: absolute;
left: 50%;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(220, 210, 255, 0.78);
white-space: nowrap;
/* read top→bottom on the right rail */
writing-mode: vertical-rl;
transform: translateX(-50%);
}
/* the LEFT rail reads bottom→top (rotated 180deg around vertical-rl) */
.side-rail-left .side-rail-text {
transform: translateX(-50%) rotate(180deg);
}
.side-rail-text.top { top: 22%; }
.side-rail-text.middle { top: 50%; transform: translate(-50%, -50%); }
.side-rail-text.bottom { bottom: 22%; }
.side-rail-left .side-rail-text.middle {
transform: translate(-50%, -50%) rotate(180deg);
}
/* push page content in so it doesn't slide under the rails */
body { padding-left: 36px; padding-right: 36px; }
.topbar { /* topbar already lives inside hero padding, but make sure it sits above rails */ }
/* full-bleed sections still need to bleed visually — they sit below the rails (z-index) */
.hero, section { position: relative; }
/* hide on small screens */
@media (max-width: 720px) {
.side-rail { display: none; }
body { padding-left: 0; padding-right: 0; }
}
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
display: none;
}
.vertical-type.left,
.vertical-type.right { display: none; }
@media (max-width: 900px) {
.vertical-type { display: none; }
}
/* hero content */
.hero-content {
position: relative;
z-index: 3;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1100px;
padding: 18vh 0 4vh;
}
.hero-content > * { position: relative; z-index: 3; }
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--highlight);
margin-bottom: 32px;
padding: 8px 14px 8px 8px;
border-radius: 999px;
background: rgba(0, 255, 174, 0.06);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 255, 174, 0.20);
box-shadow: 0 0 24px rgba(0, 255, 174, 0.12);
white-space: nowrap;
}
.line-tick {
width: 22px; height: 1px;
background: currentColor;
display: inline-block;
}
.hero-cta {
display: flex; gap: 14px; flex-wrap: wrap;
}
/* hero bottom */
.hero-bottom {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-top: 56px;
}
.symbol {
font-size: clamp(80px, 12vw, 180px);
font-weight: 300;
line-height: 0.8;
color: var(--highlight);
opacity: 0.6;
letter-spacing: -0.05em;
}
.award-pill {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #E9D7A8; /* warm cream-gold */
padding: 10px 22px 10px 10px;
border: 1px solid rgba(233, 215, 168, 0.32);
border-radius: 999px;
background:
linear-gradient(180deg, rgba(233, 215, 168, 0.05), rgba(233, 215, 168, 0.02));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
white-space: nowrap;
}
.award-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(233, 215, 168, 0.45);
color: #E9D7A8;
background: rgba(233, 215, 168, 0.04);
flex: 0 0 auto;
}
.award-pill-text {
display: inline-block;
}
.award-pill-group {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.award-pill--sm {
gap: 10px;
font-size: 10.5px;
letter-spacing: 0.16em;
padding: 7px 16px 7px 7px;
}
.award-pill--sm .award-pill-icon {
width: 22px;
height: 22px;
}
.bottom-meta {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
}
.scroll-tick {
width: 36px; height: 1px;
background: currentColor;
position: relative; overflow: hidden;
}
.scroll-tick::after {
content: '';
position: absolute; left: -36px;
width: 36px; height: 1px;
background: var(--highlight);
box-shadow: 0 0 8px var(--highlight);
animation: scrolltick 2.4s cubic-bezier(.6,.0,.2,1) infinite;
}
@keyframes scrolltick {
0% { left: -36px; }
100% { left: 36px; }
}
/* ============================================================
BUTTONS — subtle scale (~30% of original) + soft glow on hover
============================================================ */
.btn {
display: inline-block;
transform: scale(1);
transition: transform 700ms cubic-bezier(.2,.7,.2,1);
border-radius: 999px;
}
.btn:hover {
transform: scale(1.012);
}
.btn a {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 12px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
white-space: nowrap;
transition: background 700ms cubic-bezier(.2,.7,.2,1),
color 700ms cubic-bezier(.2,.7,.2,1),
border-color 700ms cubic-bezier(.2,.7,.2,1),
box-shadow 700ms cubic-bezier(.2,.7,.2,1);
}
.btn.primary a {
background: var(--highlight);
color: var(--bg);
box-shadow: 0 0 0 0 rgba(0, 255, 174, 0);
}
.btn.primary:hover a {
box-shadow:
0 0 12px rgba(0, 255, 174, 0.30),
0 0 28px rgba(0, 255, 174, 0.15),
inset 0 0 0 1px rgba(255,255,255,0.20);
}
.btn.ghost a {
border: 1px solid rgba(232, 242, 245, 0.18);
color: var(--ink);
background: rgba(232, 242, 245, 0.04);
backdrop-filter: blur(12px);
box-shadow: 0 0 0 0 rgba(0, 255, 174, 0);
}
.btn.ghost:hover a {
border-color: rgba(0, 255, 174, 0.40);
color: var(--highlight);
box-shadow:
0 0 12px rgba(0, 255, 174, 0.18),
inset 0 0 0 1px rgba(0, 255, 174, 0.10);
}
.btn.ghost.light a {
border: 1px solid rgba(232, 242, 245, 0.18);
color: var(--ink);
background: transparent;
}
.btn.ghost.light:hover a {
border-color: rgba(0, 255, 174, 0.40);
color: var(--highlight);
box-shadow: 0 0 12px rgba(0, 255, 174, 0.18);
}
/* ============================================================
SECTION SCAFFOLD
============================================================ */
section {
position: relative;
padding: clamp(80px, 11vw, 160px) var(--pad-x);
overflow: hidden;
}
/* Widescreen container: constrain content of "talking" sections so the
page doesn't sprawl on ultrawide displays. Full-bleed sections (hero,
showcase, reel) opt out by NOT being in this list. Absolute-positioned
children (blobs, bridges) are exempt because they ignore flow. */
:root { --page-max: 1600px; }
.services > *:not(.services-blob),
.process > *:not(.sunset-bridge),
.studio > *,
.recognition > *:not(.recognition-blob),
.clients > *,
.contact > *:not(.contact-blob) {
max-width: var(--page-max);
margin-left: auto;
margin-right: auto;
}
.section-dark,
.section-light {
background: var(--bg);
color: var(--ink);
}
.section-dark::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 80% 0%, rgba(170, 68, 255, 0.18), transparent 60%),
radial-gradient(50% 40% at 0% 100%, rgba(0, 170, 255, 0.16), transparent 60%);
pointer-events: none;
}
.section-light::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 40% at 100% 0%, rgba(0, 173, 171, 0.16), transparent 60%),
radial-gradient(60% 40% at 0% 100%, rgba(255, 102, 170, 0.14), transparent 60%);
pointer-events: none;
}
.section-head {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 56px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line-light);
}
/* ============================================================
SHOWCASE — widescreen rotating film stills
============================================================ */
.showcase-frame {
position: relative;
width: 100%;
border-radius: 14px;
padding: 14px;
overflow: hidden;
/* glass-strong already applied via class */
}
.showcase-inner {
position: relative;
width: 100%;
aspect-ratio: 21 / 9;
border-radius: 6px;
overflow: hidden;
background: #050607;
isolation: isolate;
}
@media (max-width: 720px) {
.showcase-inner { aspect-ratio: 16 / 10; }
}
.showcase-still {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.04);
transition: opacity 1200ms cubic-bezier(.6,.1,.2,1), transform 7000ms linear;
filter: saturate(0.95) contrast(1.04);
}
.showcase-still.is-active {
opacity: 1;
transform: scale(1.10);
}
.showcase-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(1) contrast(1.04);
border: 0;
}
.showcase-cta {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 22px 14px 16px;
background: rgba(8, 12, 16, 0.32);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
color: #fff;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
z-index: 5;
opacity: 0.78;
transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), background 240ms, border-color 240ms;
}
.showcase-cta:hover {
opacity: 1;
background: rgba(8, 12, 16, 0.5);
border-color: rgba(255, 255, 255, 0.32);
transform: translate(-50%, -50%) scale(1.02);
}
.showcase-cta-ring {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
flex: 0 0 auto;
}
.showcase-cta-label {
font-family: var(--font-display, inherit);
font-size: 14px;
letter-spacing: 0.01em;
text-transform: none;
}
.showcase-cta-meta {
opacity: 0.55;
font-size: 11px;
border-left: 1px solid rgba(255, 255, 255, 0.18);
padding-left: 12px;
}
@media (max-width: 720px) {
.showcase-cta { padding: 10px 16px 10px 12px; gap: 10px; }
.showcase-cta-ring { width: 28px; height: 28px; }
.showcase-cta-label { font-size: 13px; }
.showcase-cta-meta { display: none; }
}
.showcase-back {
position: absolute;
left: 22px; top: 18px;
z-index: 5;
background: rgba(8, 12, 16, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
color: #fff;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 14px;
cursor: pointer;
opacity: 0.7;
transition: opacity 200ms, background 200ms;
}
.showcase-back:hover { opacity: 1; background: rgba(8, 12, 16, 0.6); }
.showcase-controls {
position: absolute;
left: 22px; right: 22px;
bottom: 14px;
display: flex;
align-items: center;
gap: 12px;
z-index: 4;
}
.ctrl-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(13,18,26,0.55);
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 240ms, color 240ms, border-color 240ms;
}
.ctrl-btn:hover { color: var(--highlight); border-color: rgba(0,255,209,0.4); }
.ctrl-progress {
position: relative;
flex: 1;
height: 16px;
display: flex; align-items: center;
cursor: pointer;
}
.ctrl-progress-track {
position: absolute; left: 0; right: 0;
height: 2px;
background: rgba(255,255,255,0.18);
border-radius: 999px;
}
.ctrl-progress-fill {
position: absolute; left: 0;
height: 2px;
background: var(--highlight);
border-radius: 999px;
box-shadow: 0 0 12px rgba(0,255,209,0.45);
transition: width 80ms linear;
}
.ctrl-progress-dot {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--highlight);
transform: translate(-50%, 0);
box-shadow: 0 0 14px rgba(0,255,209,0.6);
}
.showcase-vignette {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(5,6,7,0.45) 0%, rgba(5,6,7,0) 22%, rgba(5,6,7,0) 60%, rgba(5,6,7,0.55) 100%),
radial-gradient(80% 80% at 50% 50%, rgba(5,6,7,0) 50%, rgba(5,6,7,0.35) 100%);
pointer-events: none;
}
/* Cold-start buffering indicator for the full Bunny reel */
.showcase-buffering {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background: rgba(5, 6, 7, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
animation: showcaseBufferFadeIn 240ms cubic-bezier(.4,0,.2,1);
}
@keyframes showcaseBufferFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.showcase-buffering-spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(232, 242, 245, 0.18);
border-top-color: var(--highlight);
animation: showcaseBufferSpin 900ms linear infinite;
box-shadow: 0 0 24px rgba(0, 255, 174, 0.18);
}
@keyframes showcaseBufferSpin {
to { transform: rotate(360deg); }
}
.showcase-buffering-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--ink-2);
}
/* Click-to-pause on the full reel video */
.showcase-video.is-clickable { cursor: pointer; }
/* Big center play button shown when full reel is paused */
.showcase-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
animation: showcasePlayIn 240ms cubic-bezier(.2,.7,.2,1);
}
@keyframes showcasePlayIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.showcase-play-overlay-ring {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
border-radius: 50%;
background: rgba(8, 12, 16, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1.5px solid rgba(232, 242, 245, 0.30);
color: var(--ink);
transition: transform 240ms cubic-bezier(.2,.7,.2,1), background 240ms, border-color 240ms, color 240ms, box-shadow 240ms;
/* nudge the play triangle visually centered */
padding-left: 4px;
}
.showcase-play-overlay:hover .showcase-play-overlay-ring {
transform: scale(1.08);
background: rgba(8, 12, 16, 0.75);
border-color: rgba(0, 255, 174, 0.55);
color: var(--highlight);
box-shadow:
0 0 0 8px rgba(0, 255, 174, 0.06),
0 0 32px rgba(0, 255, 174, 0.25);
}
.showcase-corner {
position: absolute;
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 22px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: rgba(255,255,255,0.85);
text-shadow: 0 1px 12px rgba(0,0,0,0.5);
pointer-events: none;
}
.showcase-corner.top-left { top: 0; left: 0; flex-direction: row; align-items: center; gap: 10px; }
.showcase-corner.top-right { top: 0; right: 0; align-items: flex-end; }
.showcase-corner.bottom-left { bottom: 60px; left: 0; gap: 10px; }
.showcase-corner.bottom-right { bottom: 60px; right: 0; align-items: flex-end; gap: 4px; }
.corner-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #ff3b3b;
box-shadow: 0 0 0 3px rgba(255,59,59,0.22), 0 0 14px rgba(255,59,59,0.6);
animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
0%,100% { opacity: 1; }
50% { opacity: 0.4; }
}
.corner-client {
font-family: var(--font-mono);
font-size: 11px;
color: var(--corp);
}
.corner-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20px, 2.4vw, 36px);
letter-spacing: var(--letter-display);
text-transform: uppercase;
color: #fff;
line-height: 1;
text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.showcase-progress {
position: absolute;
bottom: 12px; left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}
.progress-dot {
width: 28px; height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.2);
border: 0;
padding: 0;
cursor: pointer;
transition: background 320ms, width 320ms;
}
.progress-dot.is-active {
background: var(--highlight);
width: 56px;
box-shadow: 0 0 14px rgba(0,255,209,0.5);
}
.showcase-foot {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
@media (max-width: 720px) {
.showcase-corner { padding: 12px 14px; font-size: 10px; }
.showcase-corner.bottom-left,
.showcase-corner.bottom-right { bottom: 54px; }
.corner-title { font-size: 18px; }
}
/* ============================================================
SERVICES (rows w/ hover dim effect)
============================================================ */
.services-list {
border-top: 1px solid var(--line-light);
}
.service-row {
display: grid;
grid-template-columns: 80px minmax(260px, 1.4fr) minmax(0, 2fr) auto;
gap: 32px;
align-items: center;
padding: 36px 0;
border-bottom: 1px solid var(--line-light);
cursor: default;
transition: opacity 280ms, padding-left 280ms, color 280ms;
}
.service-row.is-dim { opacity: 0.32; }
.service-row.is-hover {
padding-left: 12px;
color: var(--highlight);
}
.service-n {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
}
.service-title {
font-family: var(--font-display);
font-size: clamp(28px, 2.8vw, 44px);
font-weight: 700;
letter-spacing: var(--letter-display);
line-height: 1.0;
text-transform: uppercase;
}
.service-body {
font-size: 16px;
line-height: 1.55;
color: var(--ink-2);
max-width: 48ch;
}
.is-hover .service-body { color: var(--ink); }
.service-tags {
display: flex; flex-wrap: nowrap; gap: 6px;
justify-self: start;
align-items: center;
white-space: nowrap;
}
.tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
background: rgba(232, 242, 245, 0.04);
border: 1px solid var(--line-light);
color: var(--ink-2);
}
.service-arrow {
font-size: 22px;
text-align: right;
opacity: 0.4;
transition: transform 280ms, opacity 280ms;
}
.is-hover .service-arrow { opacity: 1; transform: translate(6px, -6px); }
@media (max-width: 980px) {
.service-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
.service-tags { justify-self: start; }
.service-arrow { display: none; }
}
.services-cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 28px;
margin-top: 72px;
padding-top: 48px;
border-top: 1px solid var(--line-light);
}
.services-cta-line {
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 32px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
max-width: 56ch;
margin: 0;
}
/* ============================================================
PROCESS
============================================================ */
.process-layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
@media (max-width: 980px) {
.process-layout { grid-template-columns: 1fr; }
}
.process-orb {
position: relative;
margin-top: 56px;
width: 240px; height: 240px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
isolation: isolate;
}
.orb-glow {
position: absolute;
inset: -20%;
background: conic-gradient(from 0deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4), var(--grad-1));
filter: blur(34px);
z-index: -1;
animation: orbspin 22s linear infinite;
}
@keyframes orbspin {
to { transform: rotate(360deg); }
}
.orb-num {
font-family: var(--font-display);
font-size: 96px;
font-weight: 700;
letter-spacing: var(--letter-display);
line-height: 1;
text-transform: uppercase;
}
.orb-label {
margin-top: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
font-weight: 600;
opacity: 0.85;
}
.process-steps {
list-style: none;
margin: 0; padding: 0;
}
.process-step {
padding: 28px 0;
border-bottom: 1px solid var(--line-light);
}
.process-step:first-child { padding-top: 0; }
.process-step:last-child { border-bottom: 0; }
.step-row {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 20px;
align-items: baseline;
margin-bottom: 8px;
}
.step-n {
font-family: var(--font-mono);
font-size: 12px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
opacity: 0.55;
}
.step-name {
font-family: var(--font-display);
font-size: clamp(32px, 3.4vw, 52px);
font-weight: 700;
letter-spacing: var(--letter-display);
line-height: 1;
text-transform: uppercase;
}
.step-dur {
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
opacity: 0.55;
}
.step-body {
margin: 0 0 0 80px;
font-size: 16px;
line-height: 1.55;
max-width: 56ch;
opacity: 0.78;
}
@media (max-width: 720px) {
.step-row { grid-template-columns: 40px 1fr auto; gap: 12px; }
.step-body { margin-left: 52px; }
}
/* ============================================================
REEL — uniform 16:9 grid (calm, cinematic)
============================================================ */
.reel-headline { margin-bottom: 56px; }
.reel-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
gap: clamp(24px, 2.4vw, 36px) clamp(20px, 1.8vw, 28px);
}
@media (max-width: 980px) {
.reel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.reel-grid { grid-template-columns: 1fr; }
}
/* layout variants — first row uses 4 cols (2+1+1), second row uses 3 cols (each spans 4/3) */
.reel-card.layout-hero { grid-column: span 2; }
.reel-card.layout-tall { grid-column: span 1; }
.reel-card.layout-normal { grid-column: span 4 / auto; }
.reel-grid > .reel-card.layout-normal:nth-of-type(4),
.reel-grid > .reel-card.layout-normal:nth-of-type(5),
.reel-grid > .reel-card.layout-normal:nth-of-type(6) {
/* spread three normals across the 4-col grid via custom span */
}
/* simpler: switch to a 12-col grid so 4+4+4 (row 2) and 6+3+3 (row 1) align */
.reel-grid {
grid-template-columns: repeat(12, 1fr);
}
.reel-card.layout-hero { grid-column: span 6; }
.reel-card.layout-tall { grid-column: span 3; }
.reel-card.layout-normal { grid-column: span 4; }
@media (max-width: 980px) {
.reel-grid { grid-template-columns: repeat(2, 1fr); }
.reel-card.layout-hero,
.reel-card.layout-tall,
.reel-card.layout-normal { grid-column: span 1; }
}
.reel-card.layout-hero { display: flex; flex-direction: column; }
.reel-card.layout-hero .reel-still { aspect-ratio: 16 / 9; flex: 0 0 auto; }
.reel-card.layout-tall { display: flex; flex-direction: column; }
/* Default: explicit aspect-ratio so a tall card on its own row doesn't
collapse (flex:1+min-height:0 only stretches when a sibling sets row height). */
.reel-card.layout-tall .reel-still { aspect-ratio: 4 / 5; flex: 0 0 auto; }
/* When tall card sits IN row 1 next to a hero card, stretch to match. */
.reel-card.layout-hero ~ .reel-card.layout-tall .reel-still,
.reel-card.layout-tall:has(~ .reel-card.layout-hero) .reel-still {
aspect-ratio: auto;
flex: 1 1 auto;
min-height: 0;
}
.reel-card.layout-normal .reel-still { aspect-ratio: 16 / 10; }
/* row 1: stretch all cards so flex:1 stills end at the same baseline */
.reel-grid { align-items: stretch; }
/* Meta blocks flow natively below the still at every size — same rhythm as mobile.
(Previously hero/tall used a fixed 86px to lock the bottom baseline; we drop it
in favor of the cleaner mobile-style auto layout.) */
.reel-card.layout-hero .reel-meta,
.reel-card.layout-tall .reel-meta {
height: auto;
min-height: 0;
flex: 0 0 auto;
}
.reel-card.layout-hero .reel-title,
.reel-card.layout-tall .reel-title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.reel-card.layout-hero .reel-kind,
.reel-card.layout-tall .reel-kind {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 980px) {
.reel-card .reel-still { aspect-ratio: 16 / 10; height: auto; flex: 0 0 auto; }
/* Cancel the row-1 stretch override (which sets flex:1 + min-height:0) —
in the 2-col layout the third tall card lands alone in row 2 with no
sibling to anchor its height, so it collapses to 0 without this reset. */
.reel-card.layout-hero ~ .reel-card.layout-tall .reel-still,
.reel-card.layout-tall:has(~ .reel-card.layout-hero) .reel-still {
aspect-ratio: 16 / 10;
flex: 0 0 auto;
min-height: 0;
}
.reel-card.layout-hero .reel-meta,
.reel-card.layout-tall .reel-meta {
height: auto;
min-height: 0;
flex: 0 0 auto;
}
}
.reel-card {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: opacity 320ms;
align-self: stretch;
}
.reel-card.is-dim { opacity: 0.4; }
.reel-card.is-hover { opacity: 1; }
.reel-still {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 4px;
background: #050607;
isolation: isolate;
}
.reel-still img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
transition: transform 1400ms cubic-bezier(.2,.7,.2,1), filter 600ms, opacity 320ms;
filter: saturate(0.92) contrast(1.02);
}
.reel-card.is-hover .reel-still img {
transform: scale(1.06);
filter: saturate(1.05) contrast(1.05);
opacity: 0;
}
.reel-loop {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 360ms ease;
pointer-events: none;
}
.reel-card.is-hover .reel-loop {
opacity: 1;
}
.reel-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(5,6,7,0) 55%, rgba(5,6,7,0.55) 100%);
pointer-events: none;
opacity: 0.6;
transition: opacity 360ms;
}
.reel-card.is-hover .reel-overlay { opacity: 0.35; }
.reel-index {
position: absolute;
top: 12px; right: 14px;
font-family: var(--font-mono);
font-size: 10px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: rgba(255,255,255,0.65);
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
mix-blend-mode: normal;
}
.reel-tag {
position: absolute;
top: 12px; left: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px 5px 8px;
background: rgba(8, 12, 16, 0.42);
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
z-index: 3;
pointer-events: none;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.reel-tag-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 999px;
background: var(--corp, #00ADAB);
box-shadow: 0 0 10px rgba(0, 173, 171, 0.8);
}
.reel-play {
display: none;
}
.reel-cta {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 22px;
background: rgba(8, 12, 16, 0.32);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
color: #fff;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0;
transition: opacity 320ms ease, transform 360ms cubic-bezier(.2,.8,.2,1);
pointer-events: none;
z-index: 3;
}
.reel-card.is-hover .reel-cta {
opacity: 1;
transform: translate(-50%, -50%) scale(1.0);
}
.reel-cta-line {
display: inline-block;
width: 18px; height: 1px;
background: rgba(255, 255, 255, 0.7);
}
.reel-cta-arrow { font-size: 14px; opacity: 0.85; }
.reel-meta {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.reel-meta-top {
display: flex; justify-content: space-between;
align-items: baseline;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
}
.reel-client { color: var(--corp, #00ADAB); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.reel-year { opacity: 0.55; white-space: nowrap; flex: 0 0 auto; }
.reel-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-display);
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.1;
margin-top: 4px;
}
.reel-kind {
font-family: var(--font-mono);
font-size: 11px; font-weight: 500;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
opacity: 0.55;
}
.reel-foot {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--line-dark);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* ============================================================
HERO PHOTO — atmospheric hummingbird backdrop, right side,
melted into the aurora & page color via masks and tints.
============================================================ */
.hero-photo {
position: absolute;
inset: 0;
z-index: 1; /* above aurora (0), below content (3) */
pointer-events: none;
transition: opacity 600ms cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
.hero-photo-img {
position: absolute;
/* anchor to right edge; left inset shrinks as viewport narrows
so the subject slides left into view instead of getting cropped */
inset: 0 var(--video-right, -2%) 0 var(--video-left-current, 13%);
width: auto;
height: 100%;
object-fit: cover;
object-position: 65% var(--video-y, 50%);
/* tone the video toward our aurora teal/cyan */
filter:
saturate(0.85)
contrast(1.05)
brightness(0.78)
hue-rotate(-6deg);
/* feather the LEFT edge softly so aurora dominates the left half
and the video emerges in the right half */
-webkit-mask-image:
linear-gradient(
90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) var(--video-mask-start, 8%),
rgba(0,0,0,0.65) calc((var(--video-mask-start, 8%) + var(--video-mask-full, 64%)) / 2),
rgba(0,0,0,1) var(--video-mask-full, 64%),
rgba(0,0,0,1) 100%
);
mask-image:
linear-gradient(
90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) var(--video-mask-start, 8%),
rgba(0,0,0,0.65) calc((var(--video-mask-start, 8%) + var(--video-mask-full, 64%)) / 2),
rgba(0,0,0,1) var(--video-mask-full, 64%),
rgba(0,0,0,1) 100%
);
}
@keyframes heroPhotoFloat {
0% { transform: translate3d(0, 0, 0) scale(1.02); }
100% { transform: translate3d(-1.2%, -0.8%, 0) scale(1.05); }
}
/* dark teal tint laid over the photo to lock it into the palette */
.hero-photo-tint {
position: absolute;
inset: 0;
background:
radial-gradient(60% 60% at 80% 50%, rgba(0, 168, 168, 0.18), transparent 70%),
linear-gradient(180deg, rgba(15, 28, 41, 0.35) 0%, rgba(15, 28, 41, 0.0) 40%, rgba(15, 28, 41, 0.55) 100%);
mix-blend-mode: multiply;
}
/* hard fade from left so headline area stays clean & legible.
Keep this transparent on the left so the AURORA shows through full strength,
then ramp into a subtle teal veil on the right photo zone. */
.hero-photo-fade-left {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(15, 28, 41, 0) 0%,
rgba(15, 28, 41, 0) 35%,
rgba(15, 28, 41, 0.10) 55%,
rgba(15, 28, 41, 0.0) 100%
);
}
/* ============================================================
HERO LIGHTRAYS — long-exposure streaks, frozen in time
============================================================ */
.hero-rays {
position: absolute;
inset: 0;
z-index: 2; /* above photo (1), below content (3) */
pointer-events: none;
overflow: hidden;
mix-blend-mode: screen;
}
.hero-rays .ray {
position: absolute;
border-radius: 999px;
/* horizontal long-exposure smear: bright in middle, fades sharply at the ends
and softly along the vertical (band thickness). */
filter: blur(1.5px);
}
/* Primary amber band — sits low like in the reference, dominant warm streak.
Limited to the right portion of the canvas, ends well before the edges. */
.hero-rays .ray-amber {
top: 62%;
left: 30%;
right: 14%;
height: 38px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(255, 168, 60, 0) 8%,
rgba(255, 168, 60, 0.35) 22%,
rgba(var(--cream-rgb), 0.95) 48%,
rgba(255, 168, 60, 0.55) 72%,
rgba(255, 168, 60, 0.0) 92%,
transparent 100%
);
/* soften the band edges vertically so it reads as motion smear, not a hard rule */
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
mask-image:
linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
filter: blur(2.5px) drop-shadow(0 0 24px rgba(255, 168, 60, 0.45));
}
/* Soft amber halo right above the bright amber band — wider, more diffuse */
.hero-rays .ray-amber-soft {
top: 56%;
left: 22%;
right: 8%;
height: 110px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(255, 168, 60, 0) 12%,
rgba(255, 168, 60, 0.18) 35%,
rgba(255, 184, 90, 0.30) 50%,
rgba(255, 168, 60, 0.18) 65%,
transparent 92%
);
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
mask-image:
linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
filter: blur(18px);
opacity: 0.75;
}
/* Cool cyan streak high in the frame — short, off-center left */
.hero-rays .ray-cyan {
top: 18%;
left: 8%;
right: 52%;
height: 16px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(120, 230, 230, 0) 18%,
rgba(120, 230, 230, 0.35) 45%,
rgba(160, 240, 240, 0.55) 60%,
rgba(120, 230, 230, 0.2) 78%,
transparent 95%
);
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
mask-image:
linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
filter: blur(3px);
opacity: 0.55;
}
/* Thin bright white streak — the highlight that sells the motion.
Short, sits in the middle band where photo and aurora meet. */
.hero-rays .ray-white {
top: 36%;
left: 38%;
right: 22%;
height: 5px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.35) 42%,
rgba(255, 255, 255, 0.85) 58%,
rgba(255, 255, 255, 0.15) 78%,
transparent 95%
);
filter: blur(1.5px) drop-shadow(0 0 18px rgba(255, 255, 255, 0.35));
opacity: 0.7;
}
/* Warm fade band low — pulls amber down toward the bottom edge.
Right-anchored, doesn't reach the left half. */
.hero-rays .ray-warm {
top: 80%;
left: 42%;
right: 6%;
height: 90px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(255, 140, 50, 0.0) 25%,
rgba(255, 140, 50, 0.18) 55%,
rgba(255, 120, 40, 0.10) 78%,
transparent 98%
);
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 60%, transparent 100%);
mask-image:
linear-gradient(180deg, transparent 0%, #000 60%, transparent 100%);
filter: blur(22px);
opacity: 0.55;
}
/* keep rays subtle on small screens — fewer, lower opacity */
@media (max-width: 900px) {
.hero-rays { opacity: 0.7; }
.hero-rays .ray-amber-soft,
.hero-rays .ray-warm { opacity: 0.4; }
}
/* bottom blend so the vertical-type strip & symbol stay readable */
.hero-photo-fade-bottom {
position: absolute;
inset: auto 0 0 0;
height: 28%;
background: linear-gradient(180deg, rgba(15, 28, 41, 0) 0%, rgba(15, 28, 41, 0.85) 80%, #0F1C29 100%);
}
/* when the photo is on, keep the aurora at full strength on the LEFT half
(where the headline sits) and let the photo blend in on the right.
No global aurora dimming — the photo's own mask handles the transition. */
.hero-with-photo .blob-stage {
filter: saturate(1.0) brightness(1.0);
opacity: 1;
}
/* keep content plate readable above the photo */
.hero-with-photo .hero-content {
position: relative;
z-index: 3;
}
.hero-with-photo .hero-content .display {
/* shadow removed per request */
}
/* Hero video — fluid left-edge interpolation between breakpoints
Calibrated from real viewport tests:
2515px -> 20%, 1750px -> 7%, 1400px -> -10%
We stitch three linear segments using nested clamp().
--video-left controls the 2515px anchor (default 20%).
The 1750px and 1400px anchors are derived offsets from --video-left
so the slider still gives intuitive "wider-screen" control. */
:root {
--video-left-current:
clamp(
-10%,
calc(7% + (var(--video-left, 32%) - 7%) * (100vw - 1750px) / 765px),
var(--video-left, 32%)
);
}
@media (max-width: 1750px) {
:root {
--video-left-current:
clamp(
-10%,
calc(-10% + (7% - -10%) * (100vw - 1400px) / 350px),
7%
);
}
}
@media (max-width: 1400px) {
:root { --video-left-current: var(--video-left-narrow, -20%); }
}
/* Narrow band: 1300px = videoLeftNarrow (perfekt anchor) → 950px = -50% → 901px = -59%
Two linear segments stitched via clamp(). */
@media (max-width: 1300px) {
:root {
--video-left-current:
clamp(
-50%,
calc(var(--video-left-narrow, -20%) + (-50% - var(--video-left-narrow, -20%)) * (1300px - 100vw) / 350px),
var(--video-left-narrow, -20%)
);
}
}
@media (max-width: 950px) {
:root {
--video-left-current:
clamp(
-59%,
calc(-50% + (-59% - -50%) * (950px - 100vw) / 49px),
-50%
);
}
}
@media (max-width: 900px) {
/* on mobile the video fills nearly the full hero — dim the aurora
so it doesn't wash over the photo. */
.hero-with-photo .blob-stage {
opacity: 0.45;
}
.hero-photo-img {
/* Mobile band: 900px = -63% → 721px = -100%, interpolated.
videoLeftMobile slider re-anchors the 900px endpoint (-63% default). */
inset: 0 -10% 0
clamp(
-100%,
calc(var(--video-left-mobile, -63%) + (-100% - var(--video-left-mobile, -63%)) * (900px - 100vw) / 179px),
var(--video-left-mobile, -63%)
);
object-position: 70% 40%;
-webkit-mask-image:
linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%);
mask-image:
linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%);
}
.hero-photo-fade-left {
background: linear-gradient(180deg, rgba(15, 28, 41, 0.0) 0%, rgba(15, 28, 41, 0.35) 70%, rgba(15, 28, 41, 0.85) 100%);
}
}
.recognition { position: relative; }
.recognition-blob {
position: absolute;
inset: -20% -10% auto -10%;
height: 60%;
background:
radial-gradient(40% 40% at 80% 30%, var(--grad-2) 0%, transparent 60%),
radial-gradient(35% 35% at 20% 70%, var(--grad-1) 0%, transparent 65%);
filter: blur(120px);
opacity: 0.18;
pointer-events: none;
}
.recognition-headline { margin-bottom: 18px; }
.recognition-sub {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--ink);
opacity: 0.55;
margin: 0 0 80px;
}
.recognition-layout {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
gap: clamp(40px, 5vw, 96px);
align-items: start;
position: relative;
z-index: 1;
}
@media (max-width: 980px) {
.recognition-layout { grid-template-columns: 1fr; }
}
.stats {
display: flex;
flex-direction: column;
gap: 40px;
padding-top: 8px;
}
.stat {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line-dark);
}
.stat:last-child { border-bottom: 0; }
.stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(72px, 8vw, 128px);
line-height: 0.9;
letter-spacing: var(--letter-display);
color: var(--ink);
}
.stat-label {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.2;
letter-spacing: var(--letter-display);
text-transform: uppercase;
color: var(--ink);
}
.stat-unit {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
margin-top: 6px;
}
.awards-list {
list-style: none;
margin: 0; padding: 0;
border-top: 1px solid var(--line-dark);
}
.award-row {
display: grid;
grid-template-columns: minmax(140px, 0.9fr) minmax(160px, 1fr) minmax(0, 1.2fr) 80px;
gap: 24px;
padding: 22px 4px;
align-items: baseline;
border-bottom: 1px solid var(--line-dark);
transition: background 280ms, padding-left 280ms;
}
.award-row:hover {
background: rgba(255,255,255,0.025);
padding-left: 14px;
}
.award-row:hover .award-year { color: var(--ink); }
.award-year {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--letter-mono);
color: var(--ink);
text-align: right;
transition: color 280ms;
}
.award-cat {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20px, 1.8vw, 26px);
letter-spacing: var(--letter-display);
text-transform: uppercase;
color: var(--ink);
line-height: 1.1;
}
.award-cat-gold {
color: var(--cream);
}
/* Featured row — White Dolphin / The Blue Way 2020 — gets the full
gold treatment: every cell cream so the row reads as the headline
award; all other rows stay white. */
.award-row.featured {
background:
linear-gradient(90deg, rgba(var(--cream-rgb), 0.10), rgba(var(--cream-rgb), 0.02) 70%, transparent 100%);
padding-top: 28px;
padding-bottom: 28px;
margin-bottom: 12px;
border-top: 1px solid rgba(var(--cream-rgb), 0.18);
border-bottom: 1px solid rgba(var(--cream-rgb), 0.10);
}
.award-row.featured .award-cat,
.award-row.featured .award-fest,
.award-row.featured .award-proj,
.award-row.featured .award-year {
color: var(--cream);
opacity: 1;
}
.award-fest {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
opacity: 0.72;
}
.award-proj {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
opacity: 0.5;
}
@media (max-width: 720px) {
.award-row {
grid-template-columns: 1fr 60px;
grid-template-areas:
"cat year"
"fest year"
"proj proj";
"year cat"
"year fest"
". proj";
gap: 4px 16px;
padding: 18px 4px;
}
.award-year { grid-area: year; text-align: right; }
.award-cat { grid-area: cat; }
.award-fest { grid-area: fest; }
.award-proj { grid-area: proj; text-align: left; opacity: 0.45; }
}
.recognition-foot {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--line-dark);
}
.recognition-quote {
margin: 0;
padding: 0;
max-width: 48ch;
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.4;
letter-spacing: -0.005em;
text-wrap: pretty;
border: 0;
color: var(--ink);
opacity: 0.85;
}
/* ============================================================
CLIENTS
============================================================ */
.clients-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 980px) {
.clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.clients-grid { grid-template-columns: repeat(2, 1fr); }
}
.client-cell {
display: flex; align-items: center; justify-content: center;
height: 140px;
padding: 20px 24px;
cursor: default;
transition: background 280ms;
position: relative;
}
.client-cell:hover { background: rgba(0, 255, 174, 0.04); }
.client-logo {
/* uniform visual size: target a consistent height; cap width so wide wordmarks don't blow up */
height: 56px;
max-width: 180px;
width: auto;
object-fit: contain;
/* off-white ink tone matching contact headline */
filter: brightness(0) invert(1);
opacity: 0.85;
transition: opacity 320ms;
}
.client-cell:hover .client-logo {
opacity: 1;
}
.client-text {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-display);
font-size: 18px;
white-space: pre-line;
line-height: 1.0;
text-align: center;
color: var(--ink);
opacity: 0.55;
transition: opacity 320ms, color 320ms;
}
.client-cell:hover .client-text {
opacity: 1;
color: var(--highlight);
}
/* ============================================================
CONTACT
============================================================ */
.contact { padding-bottom: 64px; }
.contact-blob {
position: absolute;
inset: -10% -10% auto -10%;
height: 70%;
background:
radial-gradient(50% 50% at 25% 35%, var(--grad-2) 0%, var(--grad-3) 30%, transparent 60%),
radial-gradient(40% 40% at 80% 65%, var(--grad-1) 0%, var(--grad-4) 45%, transparent 70%);
filter: blur(90px);
opacity: 0.45;
pointer-events: none;
}
.contact-inner { position: relative; z-index: 2; }
.contact-headline { margin: 32px 0 80px; }
.contact-headline em { color: var(--highlight); }
.contact-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(48px, 7vw, 120px);
align-items: stretch;
margin-bottom: 80px;
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
.contact-bird {
display: flex;
align-items: center;
justify-content: center;
width: clamp(56px, 6vw, 88px);
opacity: 0.75;
pointer-events: none;
}
.contact-bird img {
width: 100%;
height: auto;
filter: drop-shadow(0 0 18px rgba(0, 255, 174, 0.22));
}
@media (max-width: 900px) {
.contact-bird {
width: 48px;
margin: 0 auto;
}
}
.contact-card {
padding: 28px;
border-radius: 18px;
display: flex; flex-direction: column; gap: 12px;
min-height: 200px;
}
.card-label {
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
opacity: 0.55;
}
.card-link {
font-family: var(--font-display);
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 700;
letter-spacing: var(--letter-display);
text-transform: uppercase;
display: block;
}
.card-link.card-mail {
text-transform: none;
letter-spacing: -0.01em;
}
a.card-link:hover { color: var(--highlight); }
.card-body {
font-size: 14px; line-height: 1.5; margin: 0;
text-transform: none;
}
.card-stack {
display: flex; flex-direction: column; gap: 6px;
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-display);
}
.card-stack a { display: inline-block; }
.card-stack a:hover { color: var(--highlight); }
.footer {
display: flex;
flex-direction: column;
gap: 56px;
padding-top: 56px;
border-top: 1px solid var(--line-light);
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
}
.footer-grid {
display: grid;
grid-template-columns: 1.1fr 1.4fr 1fr auto;
gap: 48px 56px;
align-items: start;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.footer-col-label {
color: var(--corp);
opacity: 0.55;
letter-spacing: var(--letter-mono);
}
.footer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-list li { margin: 0; }
.footer-list .n {
display: inline-block;
width: 28px;
opacity: 0.5;
}
.footer-meta-line {
color: var(--corp);
opacity: 0.7;
text-transform: none;
font-weight: 500;
letter-spacing: 0.04em;
}
.footer-col-ves {
align-items: flex-end;
text-align: right;
}
.footer-ves {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
text-decoration: none;
color: var(--corp);
padding: 14px 16px;
border: 1px solid var(--line-light);
border-radius: 4px;
transition: border-color 280ms, color 280ms;
}
.footer-ves img {
height: 32px;
width: auto;
display: block;
opacity: 0.85;
transition: opacity 280ms;
}
.footer-ves-label {
font-size: 10px;
letter-spacing: var(--letter-mono);
}
.footer-ves:hover {
border-color: var(--highlight);
color: var(--highlight);
}
.footer-ves:hover img { opacity: 1; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px 24px;
padding: 24px 0 8px;
border-top: 1px solid var(--line-light);
}
.footer-bottom .dim-sep {
opacity: 0.4;
display: none;
}
@media (max-width: 920px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.footer-col-ves {
grid-column: 1 / -1;
align-items: flex-start;
text-align: left;
}
.footer-ves { align-items: flex-start; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.footer-link {
color: var(--corp);
text-decoration: none;
transition: color 280ms;
}
.footer-link:hover { color: var(--highlight); }
/* ============================================================
SUNSET BRIDGE — fades Mindset into Studio with a gradient
that feels like a sunset: deep purple → magenta/pink → teal,
melting back into the page bg on both ends.
============================================================ */
.process {
position: relative;
/* let the sunset bridge bleed out the bottom into Studio without being clipped */
overflow: visible;
padding-bottom: 0;
}
.sunset-bridge {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 96px;
margin-bottom: -180px; /* pull Studio up so the bridge bleeds into it */
height: 480px;
pointer-events: none;
isolation: isolate;
overflow: hidden;
/* feather both ends so hard edges disappear — falloff > core */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 18%, #000 45%, #000 60%, rgba(0,0,0,0.4) 82%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 18%, #000 45%, #000 60%, rgba(0,0,0,0.4) 82%, transparent 100%);
}
.sunset-glow {
position: absolute;
inset: 0;
background:
/* primary cone: warm-purple light from upper right — pushed further right & tighter */
/* primary cone: warm-purple light from upper right */
radial-gradient(58% 90% at 88% 18%, rgba(150, 110, 170, 0.30) 0%, rgba(120, 90, 150, 0.18) 30%, transparent 65%),
/* secondary muted magenta wash, slightly lower */
radial-gradient(72% 110% at 75% 45%, rgba(140, 100, 145, 0.18) 0%, rgba(110, 85, 130, 0.10) 35%, transparent 70%),
/* whisper of cool teal pulling down-left */
radial-gradient(60% 100% at 20% 80%, rgba(70, 110, 120, 0.14) 0%, rgba(60, 90, 110, 0.06) 45%, transparent 80%);
filter: blur(70px) saturate(0.70);
}
@media (max-width: 900px) {
.sunset-bridge {
height: 260px;
margin-top: 64px;
margin-bottom: -110px;
}
.sunset-glow { filter: blur(50px) saturate(0.70); }
}
/* ============================================================
STUDIO
============================================================ */
.studio {
padding-top: 120px;
padding-bottom: 120px;
position: relative;
z-index: 0;
/* let the sunset bridge bleed in by softening Studio's own top edge.
The studio bg + section-dark::before tint both fade in over the first
200px so there's no hard color step where Studio begins. */
background: linear-gradient(180deg, transparent 0%, var(--bg) 200px);
}
.studio.section-dark::before {
/* match the same top-fade so the section-dark accent gradient doesn't
pop in at the top of Studio. Also override the shared .section-dark
blob so the upper-right purple is much more diffuse and bleeds further
into the section. */
background:
radial-gradient(95% 95% at 88% -10%, rgba(170, 68, 255, 0.22) 0%, rgba(170, 68, 255, 0.12) 30%, transparent 75%),
radial-gradient(50% 40% at 0% 100%, rgba(0, 170, 255, 0.16), transparent 60%);
filter: blur(60px);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 220px);
mask-image: linear-gradient(180deg, transparent 0%, #000 220px);
}
@media (max-width: 900px) {
.studio { background: linear-gradient(180deg, transparent 0%, var(--bg) 130px); }
.studio.section-dark::before {
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 150px);
mask-image: linear-gradient(180deg, transparent 0%, #000 150px);
}
}
.studio-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
gap: 96px;
align-items: start;
margin-top: 40px;
}
@media (max-width: 980px) {
.studio-layout { grid-template-columns: 1fr; gap: 56px; }
}
.studio-intro .title-l { margin-bottom: 32px; }
.studio-lede {
max-width: 46ch;
font-size: 17px;
line-height: 1.6;
}
/* Three pillars — mirror of process-steps but with a tag column */
.studio-pillars {
list-style: none;
margin: 0; padding: 0;
}
.studio-pillar {
padding: 28px 0;
border-bottom: 1px solid var(--line-light);
}
.studio-pillar:first-child { padding-top: 0; }
.studio-pillar:last-child { border-bottom: 0; }
.pillar-row {
display: grid;
grid-template-columns: 60px 1fr auto;
align-items: baseline;
gap: 18px;
margin-bottom: 8px;
}
.pillar-n {
font-family: var(--font-mono);
font-size: 12px; font-weight: 600;
letter-spacing: var(--letter-mono);
color: var(--corp);
opacity: 0.55;
}
.pillar-name {
font-family: var(--font-display);
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 700;
line-height: 1.05;
letter-spacing: var(--letter-display);
text-transform: uppercase;
}
.pillar-tag {
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
opacity: 0.55;
}
.pillar-body {
margin: 0 0 0 78px;
font-size: 16px;
line-height: 1.6;
max-width: 52ch;
color: var(--ink);
opacity: 0.78;
}
@media (max-width: 720px) {
.pillar-row { grid-template-columns: 40px 1fr auto; gap: 12px; }
.pillar-body { margin-left: 52px; }
}
/* Portrait strip */
.studio-portrait {
margin-top: 96px;
padding-top: 64px;
border-top: 1px solid var(--line-light);
display: grid;
grid-template-columns: 625px minmax(0, 1fr);
gap: clamp(80px, 8vw, 120px);
align-items: center;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1180px) {
.studio-portrait {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 64px;
}
}
@media (max-width: 980px) {
.studio-portrait {
grid-template-columns: 1fr;
gap: 40px;
}
}
.portrait-placeholder {
position: absolute; inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--letter-mono);
color: var(--corp);
opacity: 0.55;
}
.portrait-mono {
font-size: 14px;
font-weight: 700;
}
.portrait-meta {
font-size: 10px;
font-weight: 500;
opacity: 0.7;
}
.portrait-text {
display: flex;
flex-direction: column;
gap: 18px;
}
.portrait-name {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3vw, 44px);
line-height: 1.05;
letter-spacing: var(--letter-display);
text-transform: uppercase;
}
.portrait-role {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
}
.portrait-quote {
margin: 16px 0 0;
padding: 0;
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(16px, 1.45vw, 21px);
line-height: 1.4;
letter-spacing: -0.005em;
text-wrap: pretty;
border: 0;
max-width: 36ch;
color: var(--ink);
opacity: 0.92;
}
.portrait-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 22px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--letter-mono);
text-transform: uppercase;
color: var(--corp);
opacity: 0.7;
}
.portrait-tags .dot {
opacity: 0.4;
}
.studio-footnote {
margin: 96px auto 0;
padding-top: 56px;
border-top: 1px solid var(--line-light);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.2vw, 32px);
line-height: 1.35;
letter-spacing: -0.005em;
text-transform: none;
text-wrap: balance;
color: #ffffff;
opacity: 1;
max-width: 50ch;
text-align: left;
}
@media (max-width: 720px) {
.studio-footnote { font-size: 22px; padding-top: 40px; margin-top: 64px; }
}
/* ============================================================
SIDE RAIL — sticky section menu (right rail)
============================================================ */
.side-rail-right {
pointer-events: auto;
}
.side-rail-menu {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 0;
pointer-events: auto;
max-height: 60vh;
}
.side-rail-link {
display: flex;
align-items: center;
gap: 8px;
/* read top→bottom along the rail */
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(220, 210, 255, 0.55);
text-decoration: none;
padding: 6px 0;
transition: color 0.25s ease, opacity 0.25s ease;
position: relative;
}
.side-rail-link:hover {
color: rgba(255, 255, 255, 0.95);
}
.side-rail-link.active {
color: var(--highlight, #00ffae);
}
.side-rail-link.active::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--highlight, #00ffae);
transform: translateY(-50%);
box-shadow: 0 0 10px var(--highlight, #00ffae);
}
.side-rail-link-n {
opacity: 0.65;
font-weight: 500;
}
.side-rail-link.active .side-rail-link-n {
opacity: 1;
}
.side-rail-link-label {
font-weight: 600;
}
/* lift the SCROLL counter higher up the rail; menu sits below it */
.side-rail-right .side-rail-text.top { top: 4%; }
.side-rail-right .side-rail-text.bottom { bottom: 4%; }
/* hide rail menu on small screens */
@media (max-width: 720px) {
.side-rail-menu { display: none; }
}
/* Portrait — clean, frameless 4:5 */
.portrait-frame {
position: relative;
aspect-ratio: 4 / 5;
width: 100%;
max-width: 625px;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
overflow: hidden;
}
.portrait-frame::after { content: none; }
.portrait-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
border: 0;
}
.portrait-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
display: block;
}
/* ──────────────────────────────────────────────────────────────────
* Showcase — three premiere works (separated from case studies)
* ────────────────────────────────────────────────────────────────── */
.showcase-grid { position: relative; }
/* When attached to the section above (Selected Work) — collapse the gap so
it reads as one unit: kill top padding, hide the section-dark accent blob,
and keep an inner divider via the headline's natural breathing room. */
.showcase-grid.sc-attached { padding-top: 0; }
.showcase-grid.sc-attached::before {
/* Replace the inherited section-dark blob with one purpose-built for the
join: a soft purple wash anchored to the bottom-left corner that bleeds
up into the showcase area. Marks the section end and previews the
warm-purple light of the Studio/Process palette below. */
content: '';
position: absolute; inset: 0;
background:
radial-gradient(70% 55% at 0% 100%, rgba(150, 95, 200, 0.30) 0%, rgba(120, 80, 175, 0.16) 35%, transparent 70%),
radial-gradient(40% 35% at 12% 92%, rgba(180, 120, 220, 0.20) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.showcase-grid.sc-attached > *:not(.sc-overlay) { position: relative; z-index: 1; }
.showcase-grid.sc-attached .sc-headline { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); }
/* And tighten the bottom of the preceding REEL section so the visual
trennung is just the divider line, not a chasm of empty space. */
.reel.section-dark:has(+ .showcase-grid.sc-attached) { padding-bottom: 32px; }
.sc-headline { margin-top: 12px; margin-bottom: 18px; }
.sc-sub {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.62);
max-width: 640px;
margin-bottom: 56px;
line-height: 1.55;
}
.sc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 56px;
}
@media (max-width: 980px) {
.sc-grid { grid-template-columns: 1fr; gap: 18px; }
}
.sc-card {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: opacity 320ms ease;
outline: none;
}
.sc-card.is-dim { opacity: 0.45; }
.sc-card.is-hover { opacity: 1; }
.sc-card:focus-visible .sc-still {
box-shadow: 0 0 0 2px rgba(180, 240, 220, 0.55);
}
.sc-still {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0a0e12;
border-radius: 4px;
isolation: isolate;
}
.sc-still img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.8,.2,1), filter 600ms ease, opacity 360ms ease;
filter: saturate(0.9) contrast(1.02);
z-index: 1;
}
.sc-card.is-hover .sc-still img {
transform: scale(1.05);
filter: saturate(1.04) contrast(1.05);
}
.sc-loop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 360ms ease;
z-index: 2;
pointer-events: none;
}
.sc-card.is-hover .sc-loop { opacity: 1; }
.sc-overlay-grad {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.78) 100%),
linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 28%);
z-index: 3;
pointer-events: none;
transition: opacity 320ms ease;
}
.sc-card.is-hover .sc-overlay-grad { opacity: 0.78; }
/* Award lozenges — top-left vertical stack */
.sc-lozenges {
position: absolute;
top: 14px;
left: 14px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 4;
pointer-events: none;
}
.sc-lozenge {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 5px 10px 5px 10px;
background: rgba(8, 12, 16, 0.55);
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
max-width: max-content;
}
.sc-lozenge-name {
color: var(--mint, #b4f0dc);
font-weight: 600;
}
.sc-lozenge-year {
color: rgba(255,255,255,0.85);
font-weight: 500;
letter-spacing: 0.08em;
}
/* Title block bottom-left */
.sc-title-block {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 4;
pointer-events: none;
color: #fff;
}
.sc-tag-row {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
margin-bottom: 8px;
}
.sc-tag-dot { opacity: 0.55; }
.sc-title {
font-family: var(--font-display);
font-size: clamp(22px, 2.2vw, 32px);
line-height: 1.1;
font-weight: 600;
letter-spacing: -0.01em;
text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
/* Hover Ansehen pill — center */
.sc-cta {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.96);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 20px 12px 14px;
background: rgba(8, 12, 16, 0.4);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 999px;
color: #fff;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0;
transition: opacity 320ms ease, transform 360ms cubic-bezier(.2,.8,.2,1);
pointer-events: none;
z-index: 5;
}
.sc-card.is-hover .sc-cta {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.sc-cta-ring {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 999px;
padding-left: 2px;
}
/* Reichweiten-Schiene */
.sc-reach {
position: relative;
margin-top: 18px;
padding: 22px 24px;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, rgba(255,255,255,0.0) 100%);
}
.sc-reach-line {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.sc-reach-text {
flex: 1 1 420px;
font-family: var(--font-body, inherit);
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.62);
max-width: 720px;
}
/* ──────────────────────────────────────────────────────────────────
* Overlay — film viewer
* ────────────────────────────────────────────────────────────────── */
.sc-overlay {
position: fixed;
inset: 0;
background: rgba(4, 6, 8, 0.86);
backdrop-filter: blur(18px) saturate(1.1);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 72px 56px 48px;
animation: sc-overlay-in 280ms ease both;
}
@keyframes sc-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
.sc-overlay-inner {
position: relative;
width: 100%;
max-width: 1480px;
height: 100%;
display: flex;
flex-direction: column;
}
.sc-overlay-close {
position: fixed;
top: 22px;
right: 26px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
color: rgba(255,255,255,0.85);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
z-index: 1010;
}
.sc-overlay-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sc-overlay-stage {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 28px;
width: 100%;
height: 100%;
align-items: stretch;
}
@media (max-width: 1100px) {
.sc-overlay-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.sc-overlay { padding: 40px 24px; }
.sc-player-frame {
height: auto;
aspect-ratio: 16 / 9;
}
}
/* Player frame — matches Featured/case-blueway cinematic style */
.sc-player-frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 4px;
background: #000;
}
.sc-player-inner {
position: absolute;
inset: 0;
}
.sc-player-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
display: block;
cursor: pointer;
}
.sc-player-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at center, transparent 50%, rgba(5,7,10,0.40) 100%);
}
.sc-player-corner {
position: absolute;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
pointer-events: none;
display: flex;
gap: 8px;
z-index: 2;
}
.sc-player-corner.top-left { top: 18px; left: 22px; align-items: center; }
.sc-player-corner.top-right { top: 18px; right: 22px; align-items: flex-end; }
.sc-player-corner.bottom-left { bottom: 64px; left: 22px; flex-direction: column; align-items: flex-start; gap: 4px; }
.sc-player-corner.bottom-right{ bottom: 64px; right: 22px; max-width: 50%; text-align: right; }
.sc-player-corner .corner-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--mint, #b4f0dc);
box-shadow: 0 0 0 3px rgba(180,240,220,0.18), 0 0 12px rgba(180,240,220,0.55);
}
.sc-player-corner .corner-client {
font-family: var(--font-display);
font-size: clamp(16px, 1.5vw, 22px);
letter-spacing: -0.005em;
text-transform: none;
font-weight: 600;
color: #fff;
}
.sc-player-corner .corner-title { color: rgba(255,255,255,0.65); }
/* Sound CTA — large central tap target */
.sc-sound-cta {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 22px 28px 20px;
background: transparent;
border: 0;
cursor: pointer;
z-index: 3;
}
.sc-sound-ring {
width: 88px; height: 88px;
border-radius: 50%;
background: rgba(8,12,16,0.45);
border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 240ms ease, border-color 240ms ease, transform 280ms cubic-bezier(.2,.8,.2,1);
box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.sc-sound-cta:hover .sc-sound-ring {
background: rgba(180,240,220,0.18);
border-color: var(--mint, #b4f0dc);
transform: scale(1.06);
}
.sc-sound-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
font-weight: 600;
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.sc-sound-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.sc-player-controls {
position: absolute;
left: 22px;
right: 22px;
bottom: 18px;
display: flex;
align-items: center;
gap: 14px;
z-index: 4;
}
.sc-player-controls .ctrl-btn {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(8,12,16,0.4);
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.85);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 200ms, border-color 200ms, color 200ms;
flex: 0 0 auto;
}
.sc-player-controls .ctrl-btn:hover {
background: rgba(180,240,220,0.18);
border-color: var(--mint, #b4f0dc);
color: #fff;
}
.sc-player-time {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.7);
flex: 0 0 auto;
white-space: nowrap;
}
/* Hide overlays + reveal controls when sound is on */
.sc-player-frame .sc-player-corner,
.sc-player-frame .sc-player-vignette {
transition: opacity 360ms ease;
}
.sc-player-frame.with-sound .sc-player-corner,
.sc-player-frame.with-sound .sc-player-vignette {
opacity: 0;
pointer-events: none;
}
.sc-player-frame .sc-player-controls {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 360ms ease;
pointer-events: none;
}
.sc-player-frame.with-sound .sc-player-controls {
opacity: 1;
transform: none;
pointer-events: auto;
}
.sc-overlay-info {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px 22px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px;
overflow-y: auto;
color: rgba(255,255,255,0.86);
}
.sc-overlay-title {
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 36px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0;
color: #fff;
}
.sc-overlay-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.sc-overlay-meta-dot { opacity: 0.5; }
.sc-overlay-blurb {
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.78);
margin: 4px 0 4px;
text-wrap: pretty;
}
.sc-overlay-awards {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.sc-overlay-awards-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.sc-overlay-awards ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-overlay-awards li {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
background: rgba(255,255,255,0.025);
border-radius: 3px;
}
.sc-overlay-award-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--mint, #b4f0dc);
letter-spacing: -0.005em;
}
.sc-overlay-award-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.sc-overlay-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* Team block — separated from awards by its own border-top */
.sc-overlay-team {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.sc-overlay-team ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-overlay-team li {
display: grid;
grid-template-columns: 130px 1fr;
gap: 12px;
align-items: baseline;
}
.sc-overlay-team-role {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.sc-overlay-team-name {
font-family: var(--font-body, inherit);
font-size: 13.5px;
line-height: 1.4;
color: rgba(255,255,255,0.92);
}
/* ============================================================
MOBILE OPTIMIZATIONS — narrow viewport fixes
- Headlines must not overflow viewport (smaller min on clamp)
- Award pills must wrap their text instead of running off-edge
- Selected Work / reel cards: one per row, image always visible
============================================================ */
@media (max-width: 720px) {
/* Headlines — shrink min sizes so long words like "Verwandeln" fit */
.display {
font-size: clamp(40px, 11vw, 72px);
line-height: 1.0;
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.title-xl {
font-size: clamp(36px, 9.5vw, 64px);
line-height: 1.02;
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
margin-bottom: 48px;
}
.title-l {
font-size: clamp(28px, 7.5vw, 44px);
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.contact-headline { margin: 24px 0 56px; }
/* Eyebrow pill — allow it to wrap so it doesn't push viewport wide */
.eyebrow {
white-space: normal;
line-height: 1.35;
text-align: left;
}
/* Hero CTAs — stretch to full width; stack neatly */
.hero-cta { gap: 10px; }
.hero-cta .btn { width: 100%; }
.hero-cta .btn a { width: 100%; justify-content: center; }
/* Hero bottom — let award pills wrap onto multiple lines */
.hero-bottom {
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding-top: 36px;
}
.award-pill-group {
width: 100%;
flex-wrap: wrap;
gap: 8px;
}
.award-pill {
white-space: normal; /* allow line breaks inside pill text */
align-items: center;
line-height: 1.35;
max-width: 100%;
border-radius: 22px; /* slightly less round so multi-line looks intentional */
padding: 8px 16px 8px 8px;
}
.award-pill-text {
white-space: normal;
word-break: break-word;
}
/* Selected Work — one case study per row, image always visible */
.reel-grid {
grid-template-columns: 1fr !important;
gap: clamp(28px, 6vw, 40px);
}
.reel-card.layout-hero,
.reel-card.layout-tall,
.reel-card.layout-normal {
grid-column: span 1 !important;
}
/* Reset all card stills to a consistent aspect ratio so the third card's
image (which uses flex:1 / min-height:0 in row-1) always renders. */
.reel-card .reel-still,
.reel-card.layout-hero .reel-still,
.reel-card.layout-tall .reel-still,
.reel-card.layout-normal .reel-still {
aspect-ratio: 16 / 9;
height: auto;
flex: 0 0 auto;
min-height: 0;
}
.reel-card.layout-hero .reel-meta,
.reel-card.layout-tall .reel-meta {
height: auto;
min-height: 0;
flex: 0 0 auto;
}
/* Section heads — let label + meta stack instead of squeezing */
.section-head {
flex-wrap: wrap;
gap: 8px;
margin-bottom: 36px;
}
}
@media (max-width: 480px) {
.display { font-size: clamp(36px, 11.5vw, 56px); }
.title-xl { font-size: clamp(32px, 10vw, 48px); }
.award-pill {
font-size: 10px;
letter-spacing: 0.12em;
}
.award-pill--sm {
font-size: 9.5px;
letter-spacing: 0.10em;
}
}
/* ============================================================
MOBILE PERFORMANCE OVERRIDES
Touch-Geräte (iPhone, iPad, Android) haben deutlich schwächere GPUs
und kein aktives Cooling. Die folgenden Regeln deaktivieren oder
reduzieren GPU-intensive Effekte, die auf Desktop OK sind aber das
Telefon zum Throttlen / Erhitzen bringen.
Targeted via (hover: none) and (pointer: coarse) — trifft alle
Touch-Geräte unabhängig von Bildschirmbreite (auch iPad Pro).
============================================================ */
@media (hover: none) and (pointer: coarse) {
/* AURORA-BLOBS — die 4 großen mix-blend-mode Compositing-Layer.
Animation aus → Layer wird ein einziges Mal gerastert und gecached,
statt 60× pro Sekunde neu komponiert. Visuell minimal anders, da
die Drift sehr langsam war (28-40s). */
.aurora {
animation: none !important;
will-change: auto;
mix-blend-mode: normal; /* mix-blend-mode ist auf iOS sehr teuer */
opacity: 0.45; /* leicht runter weil ohne blend-mode heller */
}
/* ORB-GLOW — der riesige conic-gradient mit 34px blur, ständig rotierend.
Animation aus + blur deutlich runter. Bleibt visuell ein Glow, aber
ohne dauerhafte GPU-Last. */
.orb-glow {
animation: none !important;
filter: blur(18px);
opacity: 0.7;
}
/* BACKDROP-FILTER reduzieren — jeder Pixel hinter einer geblurrten
Surface muss neu komponiert werden, sobald sich darunter etwas
bewegt (Scroll, Aurora, Video). Halbieren spart massiv. */
.glass,
.glass-strong,
.glass-light,
.meta-pill,
.nav-glass,
.footer-glass {
backdrop-filter: blur(6px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
}
/* will-change überall raus wo es nicht wirklich animiert wird —
spart GPU-Memory auf Mobile. Aktive Scroll-Animationen behalten es. */
.aurora,
.blob-shine,
.hero-photo-img {
will-change: auto;
}
/* HERO-RAYS — fünf streaks die per JS-Scroll geparallaxed werden.
Auf Mobile reicht 1-2 reduziert + ohne filter. */
.hero-rays .ray-amber-soft,
.hero-rays .ray-warm {
display: none;
}
.hero-rays .ray {
filter: none !important;
}
/* Reduce blur in hero-photo filter chain — saturate/contrast reichen */
.hero-photo-img {
filter: saturate(0.85) brightness(0.85) !important;
}
/* GRAIN-OVERLAY — der größte Killer auf iOS Safari.
SVG feTurbulence wird prozedural GPU-gerendert + mix-blend-mode
zwingt jeden Frame darunter durch ein zusätzliches Compositing.
Auf Mobile komplett aus — visuell kaum vermisst, riesiger Perf-Win. */
.grain-overlay {
display: none !important;
}
/* CINEMATIC FADE-IN — will-change auf JEDEM h1/p/img/video reserviert
GPU-Memory permanent. Auf Mobile raus. Filter blur in Initial-State
auch raus (multipliziert sich über dutzende Elemente). */
[data-cine="in"] {
will-change: auto !important;
filter: none !important;
}
.cine-play [data-cine="in"] {
filter: none !important;
}
/* HERO-PHOTO VIDEO auf schmalen Screens komplett aus.
Auf Mobile ist es eh durch mask-image stark gefadet, kaum sichtbar.
Das spart Decoder-Slot, Bandbreite und Compositing. */
@media (max-width: 720px) {
.hero-photo {
display: none !important;
}
}
}
/* ============================================================
PERF-FALLBACK FÜR SCHWACHE GPUs (Software-Rendering, low-end Hardware)
data-perf="weak" wird per Inline-Script im gesetzt:
- WebGL-Renderer enthält SwiftShader/llvmpipe/Software/Microsoft Basic
- Kein WebGL verfügbar
- deviceMemory <= 2 GB oder hardwareConcurrency <= 2
Selber Hebel wie auf Mobile (Grain aus) — visuell kaum vermisst,
großer Perf-Win auf Software-Rendering.
============================================================ */
:root[data-perf="weak"] .grain-overlay {
display: none !important;
}
:root[data-perf="weak"] .aurora {
animation: none !important;
}
/* Hero-Sektion offscreen — Aurora-Drift-Animation pausieren.
cinematic.js setzt data-aurora="paused" am , sobald
die Hero-Sektion komplett aus dem Viewport rutscht. Wenn die
Hero wieder im Viewport ist, wird das Attribut entfernt. */
:root[data-aurora="paused"] .aurora {
animation-play-state: paused !important;
}
/* prefers-reduced-motion — Aurora-Drift und Ray-Animationen pausieren.
Statische Aurora bleibt sichtbar (Blur + Farbe identisch), nur die
28-Sekunden-Drift-Schleife wird gestoppt. */
@media (prefers-reduced-motion: reduce) {
.aurora {
animation: none !important;
}
}
/* content-visibility: auto auf den Sektionen unterhalb des Folds.
Browser überspringt Layout/Paint für offscreen-Sektionen — visuell
identisch, nur Erstrender + Scroll werden billiger.
Wir targetieren nur Sektionen die NICHT die Hero sind. */
/* Legal-Pages (.legal-page) bewusst ausschließen — sonst zwingt
contain-intrinsic-size jeden kurzen Absatz auf 1200 px Platzhalter
und reißt riesige Lücken zwischen den Abschnitten. */
main:not(.legal-page) section:not(.hero):not(.case-hero):not(.bw-hero):not(.legal-block),
body > section:not(.hero):not(.case-hero):not(.bw-hero) {
content-visibility: auto;
contain-intrinsic-size: 1px 1200px;
}
/* ============================================================
INTERMEDIATE PLAYER FIXES (≤ 900px)
The home-showcase chrome (bottom-right meta, top-left REC, top-right
FLYVISION/SHOWREEL) collides with the centered "Vollständiges Showreel"
CTA when the frame gets narrow but is not yet at the mobile breakpoint.
These rules de-clutter starting at 900px so 721–900px is also clean.
============================================================ */
@media (max-width: 900px) {
.home-showcase .showcase-corner.top-left,
.home-showcase .showcase-corner.top-right,
.home-showcase .showcase-corner.bottom-right {
display: none !important;
}
.home-showcase .showcase-corner.bottom-left {
bottom: 0;
padding: 14px 16px;
max-width: calc(100% - 24px);
}
.home-showcase .showcase-cta {
top: 40%;
max-width: calc(100% - 32px);
text-align: center;
}
}
/* ============================================================
MOBILE PLAYER FIXES
- Showcase frame: hide secondary corner overlays so the central
"Vollständiges Showreel" CTA isn't covered by metadata text
- Reel cards: trigger always-on look (loop visible) on touch devices
- Lightbox (.sc-overlay): allow vertical scroll; player is no
longer 100% viewport-height so it can never sit above the fold
============================================================ */
@media (max-width: 720px) {
/* ── 1) Showcase / hero player frame: declutter ── */
/* Hide non-essential corners on mobile (HOME hero only — case-study
pages like .cf-film-showcase reuse these classes and must keep theirs);
keep only bottom-left (Selected Work · Showreel) so the centered CTA
has room to breathe. */
.home-showcase .showcase-corner.top-left,
.home-showcase .showcase-corner.top-right,
.home-showcase .showcase-corner.bottom-right {
display: none !important;
}
.home-showcase .showcase-corner.bottom-left {
bottom: 0;
padding: 14px 16px;
font-size: 10px;
max-width: calc(100% - 24px);
}
.showcase-corner.bottom-left .corner-client { font-size: 10px; }
.showcase-corner.bottom-left .corner-title { font-size: 16px; }
/* Center CTA: smaller footprint, lifted above the bottom-left line */
.home-showcase .showcase-cta {
top: 40%;
padding: 10px 14px 10px 12px;
gap: 10px;
max-width: calc(100% - 32px);
text-align: center;
}
.showcase-cta-label {
font-size: 12px;
line-height: 1.25;
}
.showcase-cta-meta { display: none; }
/* Controls bar: tighter padding so the time label fits */
.showcase-controls {
left: 12px;
right: 12px;
bottom: 10px;
gap: 8px;
}
/* ── 2) Lightbox (.sc-overlay) — scrollable, no off-screen video ── */
.sc-overlay {
/* allow body to scroll inside the modal on mobile */
align-items: flex-start;
justify-content: flex-start;
padding: 16px 12px 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sc-overlay-inner {
height: auto;
min-height: 100%;
gap: 16px;
}
.sc-overlay-stage {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 16px;
}
/* Player frame: fixed aspect ratio instead of 100% height
→ no more video sliding above the visible viewport. */
.sc-player-frame {
height: auto;
aspect-ratio: 16 / 9;
/* leave room for the close button stuck to top-right */
margin-top: 44px;
}
.sc-overlay-close {
top: 12px;
right: 12px;
}
/* Player corners: collapse on mobile so they don't fight the
centered "Klick für Sound" CTA. Keep bottom-left only. */
.sc-player-corner.top-left,
.sc-player-corner.top-right,
.sc-player-corner.bottom-right {
display: none;
}
.sc-player-corner.bottom-left {
bottom: 56px;
left: 14px;
max-width: calc(100% - 28px);
}
.sc-player-corner.bottom-left .corner-client { font-size: 14px; }
.sc-player-controls {
left: 12px;
right: 12px;
bottom: 10px;
gap: 8px;
}
.sc-player-time { font-size: 10px; }
/* Sound CTA — sized to fit small frames cleanly */
.sc-sound-ring { width: 64px; height: 64px; }
.sc-sound-label { font-size: 11px; letter-spacing: 0.14em; }
.sc-sound-meta { font-size: 9px; }
/* Info column gets full width below the player, scrolls with page */
.sc-overlay-info {
overflow-y: visible;
padding: 18px;
}
}
/* Touch devices: show reel/showcase loop videos by default
(no hover state available, so the cards should look "alive"). */
@media (hover: none), (pointer: coarse) {
.reel-card .reel-loop,
.sc-card .sc-loop {
opacity: 1 !important;
}
.reel-card .reel-still img,
.sc-card .sc-still img {
/* keep poster underneath; loop sits on top with opacity 1 */
opacity: 1;
}
}
/* ============================================================
WEAK-GPU FALLBACK — stark reduzierte Variante (Phase 2)
Greift wenn `data-perf="weak"` am gesetzt ist
(Software-Renderer / sehr schwache Hardware / SwiftShader / llvmpipe).
Wir akzeptieren hier sichtbar reduzierten Look — Ziel ist Lauffähigkeit
statt Pixel-Identität. Übrige < 1 % Traffic.
============================================================ */
/* 7d. Hero-Rays komplett aus — auf schwacher GPU sowieso visuell tot. */
:root[data-perf="weak"] .hero-rays,
:root[data-perf="weak"] .ray,
:root[data-perf="weak"] .ray-amber,
:root[data-perf="weak"] .ray-amber-soft,
:root[data-perf="weak"] .ray-cyan,
:root[data-perf="weak"] .ray-warm,
:root[data-perf="weak"] .ray-white {
display: none !important;
}
/* 7c. Hero-Video durch Standbild ersetzen.
.hero-photo bleibt sichtbar (mit allen bestehenden Tints/Fades und Mask),
nur das