/* ============================================
YAN COHN — Portfolio v6
Kinetic Editorial — Brandin-level scroll animations
============================================ */
@font-face {
font-family: 'Overglow';
src: url('../fonts/Overglow-Demo.otf') format('opentype'),
url('../fonts/Overglow-Demo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Phaser Bank';
src: url('../fonts/PhaserBank-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
background: #000;
color: #e2e2e2;
font-family: 'General Sans', sans-serif;
overflow-x: hidden;
cursor: none;
}
::selection { background: #FF3401; color: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* --- Custom Cursor (mix-blend-difference soft-follow + slower halo trail) --- */
#cursor {
width: 10px; height: 10px;
border-radius: 50%;
position: fixed;
left: 0; top: 0;
z-index: 999999;
mix-blend-mode: difference;
pointer-events: none;
background-color: #fff;
margin-left: -5px; margin-top: -5px;
will-change: transform;
}
#cursor::after {
content: '';
position: absolute;
inset: 0;
background-color: inherit;
border-radius: inherit;
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
#cursor.hover::after { transform: scale(3.4); }
#cursor.hover-row::after { transform: scale(6.5); }
#cursor-halo {
position: fixed;
left: 0; top: 0;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.35);
mix-blend-mode: difference;
pointer-events: none;
z-index: 999998;
margin-left: -19px; margin-top: -19px;
will-change: transform;
transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s cubic-bezier(0.25, 1, 0.5, 1), margin 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s;
opacity: 0.55;
}
#cursor-halo.hover {
width: 64px; height: 64px;
margin-left: -32px; margin-top: -32px;
opacity: 0.9;
}
@media (hover: none) and (pointer: coarse) {
#cursor, #cursor-halo { display: none; }
body { cursor: auto; }
}
/* --- Grain Overlay --- */
.grain-overlay {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 9999;
opacity: 0.04;
background-image: url('data:image/svg+xml,');
background-repeat: repeat;
background-size: 256px;
}
/* --- Preloader --- */
.preloader {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
overflow: hidden;
}
.preloader__bg {
position: absolute;
inset: 0;
background: #000;
z-index: 0;
}
.preloader__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.preloader__medal {
width: clamp(260px, 34vmax, 720px);
aspect-ratio: 1 / 1;
object-fit: cover;
opacity: 0;
transform: translateY(30px) scale(0.94);
will-change: transform, opacity;
pointer-events: none;
}
.preloader__counter {
position: absolute;
top: 3rem;
right: 4rem;
font-family: 'General Sans', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.3em;
color: rgba(245, 245, 245, 0.75);
font-variant-numeric: tabular-nums;
z-index: 2;
}
.preloader__counter::after {
content: '%';
margin-left: 0.25em;
color: rgba(245, 245, 245, 0.45);
}
.preloader__label {
position: absolute;
bottom: 3rem;
left: 4rem;
font-family: 'General Sans', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245, 245, 245, 0.45);
z-index: 2;
}
@media (max-width: 640px) {
.preloader__counter { top: 1.5rem; right: 1.5rem; }
.preloader__label { bottom: 1.5rem; left: 1.5rem; }
}
/* --- Page Transition --- */
.page-transition {
position: fixed; inset: 0;
background: #000;
z-index: 10000;
pointer-events: none;
animation: wipeOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}
.page-transition.done {
animation: wipeOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes wipeOut {
0% { clip-path: inset(0); }
100% { clip-path: inset(0 0 100% 0); }
}
/* ============================================
NAVIGATION
============================================ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
/* z-index 200 keeps the hamburger / Close button clickable above the menu overlay (z-index 150) */
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.5rem 4rem;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
background 0.4s ease,
padding 0.4s ease;
}
.nav.scrolled {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
padding: 1.5rem 4rem;
}
.nav.hidden { transform: translateY(-100%); }
.nav.scrolled .nav__logo { color: #fff; }
/* Nav CTA — "Connect" button on case studies. Simple pill: dark gray bg,
white border + text, inverts to white-on-dark on hover. Same font as the
rest of the homepage. */
.nav__cta {
display: inline-flex;
align-items: center;
font-family: 'General Sans', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0;
color: #fff;
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 0.55rem 1.15rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav__cta:hover {
background: #fff;
color: #1a1a1a;
border-color: #fff;
}
.nav__cta:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* Scrolled state — same look (no change) */
.nav.scrolled .nav__cta {
background: #1a1a1a;
color: #fff;
border-color: rgba(255, 255, 255, 0.25);
}
.nav.scrolled .nav__cta:hover {
background: #fff;
color: #1a1a1a;
border-color: #fff;
}
.nav.scrolled .nav__hamburger-label { color: #fff; }
.nav.scrolled .nav__hamburger-bars span { background: #fff; }
.nav__logo {
font-family: 'General Sans', sans-serif;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.05em;
text-transform: uppercase;
color: #fff;
}
.nav__inline {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 1.6rem;
pointer-events: auto;
}
.nav__inline-link {
font-family: 'General Sans', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
text-transform: lowercase;
font-variant-numeric: tabular-nums;
transition: color 0.35s cubic-bezier(0.25, 1, 0.5, 1), letter-spacing 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav__inline-link:hover {
color: #fff;
letter-spacing: 0.08em;
}
.nav__right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav__time {
font-family: 'General Sans', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
font-variant-numeric: tabular-nums;
padding: 0.45rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
white-space: nowrap;
}
.nav.scrolled .nav__inline-link { color: rgba(255, 255, 255, 0.82); }
.nav.scrolled .nav__inline-link:hover { color: #fff; }
.nav.scrolled .nav__time { border-color: rgba(255, 255, 255, 0.28); }
@media (max-width: 900px) {
.nav__inline { display: none; }
.nav__time { display: none; }
}
/* Hamburger — always visible (Brandin-style) */
.nav__hamburger {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
z-index: 200;
}
.nav__hamburger-label {
font-family: 'General Sans', sans-serif;
font-size: 1rem;
font-weight: 500;
color: #fff;
letter-spacing: -0.01em;
}
.nav__hamburger-bars {
display: flex;
flex-direction: column;
gap: 5px;
}
.nav__hamburger-bars span {
display: block;
width: 26px; height: 1.5px;
background: #fff;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav__hamburger.active .nav__hamburger-bars span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.nav__hamburger.active .nav__hamburger-bars span:nth-child(2) { opacity: 0; }
.nav__hamburger.active .nav__hamburger-bars span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }
/* Mobile menu */
/* --- Full-screen menu overlay --- */
.menu-overlay {
position: fixed; inset: 0;
z-index: 150;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.menu-overlay__bg {
position: absolute; inset: 0;
background: #0a0a0a;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1);
}
.menu-overlay.active .menu-overlay__bg { clip-path: inset(0 0 0% 0); }
.menu-overlay__noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.08;
pointer-events: none;
mix-blend-mode: overlay;
}
/* Top bar */
.menu-overlay__top {
position: absolute;
top: 2.5rem; left: 4rem; right: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
opacity: 0;
transform: translateY(-1rem);
transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
}
.menu-overlay.active .menu-overlay__top { opacity: 1; transform: none; }
.menu-overlay__label,
.menu-overlay__count {
font-family: 'General Sans', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
/* Center grid: nav list + preview */
.menu-overlay__grid {
position: relative;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 5rem;
align-items: center;
height: 100%;
padding: 8rem 4rem 8rem;
max-width: 1700px;
margin: 0 auto;
}
.menu-overlay__list {
list-style: none;
margin: 0;
padding: 0;
}
.menu-overlay__item {
border-top: 1px solid rgba(255,255,255,0.08);
opacity: 0;
transform: translateY(2rem);
transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.menu-overlay__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.menu-overlay.active .menu-overlay__item { opacity: 1; transform: none; }
.menu-overlay.active .menu-overlay__item[data-menu-item="0"] { transition-delay: 0.55s; }
.menu-overlay.active .menu-overlay__item[data-menu-item="1"] { transition-delay: 0.65s; }
.menu-overlay.active .menu-overlay__item[data-menu-item="2"] { transition-delay: 0.75s; }
.menu-overlay.active .menu-overlay__item[data-menu-item="3"] { transition-delay: 0.85s; }
.menu-overlay__link {
display: grid;
grid-template-columns: 4rem 1fr auto;
align-items: center;
gap: 1.5rem;
padding: 1.75rem 0.5rem;
text-decoration: none;
position: relative;
}
.menu-overlay__num {
font-family: 'General Sans', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
color: rgba(255,255,255,0.4);
transition: color 0.4s ease;
}
.menu-overlay__name {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.75rem, 6.5vw, 6.5rem);
font-weight: 700;
letter-spacing: -0.04em;
text-transform: uppercase;
line-height: 0.95;
color: rgba(255,255,255,0.65);
transition: color 0.5s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
white-space: nowrap;
}
.menu-overlay__arrow {
color: rgba(255,255,255,0.2);
transform: rotate(-20deg) scale(0.85);
transition: color 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.menu-overlay__link:hover .menu-overlay__num { color: #FF3401; }
.menu-overlay__link:hover .menu-overlay__name { color: #fff; transform: translateX(1rem); }
.menu-overlay__link:hover .menu-overlay__arrow { color: #FF3401; transform: rotate(0deg) scale(1); }
/* Right-side preview pane */
.menu-overlay__previews {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
max-height: 65vh;
overflow: hidden;
border-radius: 0.4rem;
background: #111;
opacity: 0;
transform: scale(0.96);
transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}
.menu-overlay.active .menu-overlay__previews { opacity: 1; transform: none; }
.menu-overlay__preview {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
transform: scale(1.06);
}
.menu-overlay__preview.is-active {
opacity: 1;
transform: scale(1);
}
.menu-overlay__preview img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.4) contrast(1.05) saturate(1.1);
}
/* Bottom bar */
.menu-overlay__bottom {
position: absolute;
bottom: 2.5rem; left: 4rem; right: 4rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
flex-wrap: wrap;
opacity: 0;
transform: translateY(1rem);
transition: opacity 0.5s ease 1.0s, transform 0.5s ease 1.0s;
}
.menu-overlay.active .menu-overlay__bottom { opacity: 1; transform: none; }
.menu-overlay__contact { display: flex; flex-direction: column; gap: 0.4rem; }
.menu-overlay__contact-label {
font-family: 'General Sans', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.menu-overlay__email {
font-family: 'General Sans', sans-serif;
font-size: 1.1rem;
font-weight: 500;
color: #fff;
text-decoration: none;
position: relative;
}
.menu-overlay__email::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.menu-overlay__email:hover { color: #FF3401; }
.menu-overlay__email:hover::after { transform: scaleX(1); transform-origin: left center; }
.menu-overlay__social {
display: flex;
gap: 2rem;
}
.menu-overlay__social a {
font-family: 'General Sans', sans-serif;
font-size: 0.95rem;
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: color 0.3s;
}
.menu-overlay__social a sup {
font-size: 0.7em;
margin-left: 0.15em;
vertical-align: super;
color: rgba(255,255,255,0.3);
}
.menu-overlay__social a:hover { color: #FF3401; }
.menu-overlay__copy {
font-family: 'General Sans', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
/* ============================================
CONTACT MODAL
============================================ */
.contact-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
}
.contact-modal.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.contact-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.contact-modal__panel {
position: relative;
width: min(640px, 100%);
max-height: 90vh;
overflow-y: auto;
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.6rem;
padding: 3rem 3rem 2.25rem;
color: #fff;
transform: translateY(20px) scale(0.97);
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.contact-modal.active .contact-modal__panel { transform: none; }
.contact-modal__close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'General Sans', sans-serif;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 0.5rem;
transition: color 0.2s;
z-index: 5;
}
.contact-modal__close:hover { color: #fff; }
.contact-modal__header { margin-bottom: 2rem; }
.contact-modal__eyebrow {
display: inline-block;
font-family: 'General Sans', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 1rem;
}
.contact-modal__title {
font-family: 'General Sans', sans-serif;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.95;
margin: 0 0 1rem;
color: #fff;
}
.contact-modal__title em {
font-family: 'General Sans', sans-serif;
font-style: normal;
font-weight: 700;
color: #fff;
letter-spacing: -0.04em;
}
.contact-modal__lead {
font-family: 'General Sans', sans-serif;
font-size: 0.95rem;
color: rgba(255,255,255,0.55);
line-height: 1.5;
margin: 0;
max-width: 36ch;
}
.contact-modal__form { position: relative; z-index: 1; }
.contact-modal__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.contact-modal__field {
display: block;
margin-bottom: 1rem;
}
.contact-modal__row .contact-modal__field { margin-bottom: 0; }
.contact-modal__field-label {
display: block;
font-family: 'General Sans', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.5rem;
}
.contact-modal__field input,
.contact-modal__field select,
.contact-modal__field textarea {
display: block;
width: 100%;
font-family: 'General Sans', sans-serif;
font-size: 0.98rem;
font-weight: 400;
color: #fff;
background: #0f0f0f;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 0.35rem;
padding: 0.85rem 1rem;
outline: none;
transition: border-color 0.2s, background 0.2s;
resize: vertical;
}
.contact-modal__field textarea {
min-height: 110px;
line-height: 1.5;
}
.contact-modal__field select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.contact-modal__field input::placeholder,
.contact-modal__field textarea::placeholder { color: rgba(255,255,255,0.3); }
.contact-modal__field input:focus,
.contact-modal__field select:focus,
.contact-modal__field textarea:focus {
border-color: rgba(255, 255, 255, 0.55);
background: #141414;
}
/* Honeypot — visually hidden, off-screen */
.contact-modal__hp {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.contact-modal__footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.contact-modal__status {
font-family: 'General Sans', sans-serif;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.55);
flex: 1;
min-width: 0;
}
.contact-modal__status.is-error { color: #f87171; }
/* Submit — simple white pill, inverts on hover. Same vocabulary as the
nav__cta on the homepage. */
.contact-modal__submit {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: 'General Sans', sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #1a1a1a;
background: #fff;
padding: 0.85rem 1.5rem;
border: 1px solid #fff;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
flex-shrink: 0;
}
.contact-modal__submit:hover {
background: transparent;
color: #fff;
border-color: #fff;
}
.contact-modal__submit svg {
transition: transform 0.2s;
}
.contact-modal__submit:hover svg { transform: translate(2px, -2px); }
.contact-modal__submit[disabled] { opacity: 0.6; cursor: wait; }
.contact-modal__success {
display: none;
position: relative;
z-index: 1;
text-align: left;
padding: 1rem 0;
}
.contact-modal.is-success .contact-modal__form { display: none; }
.contact-modal.is-success .contact-modal__header { display: none; }
.contact-modal.is-success .contact-modal__success { display: block; }
.contact-modal__success-title {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.95;
color: #fff;
margin: 0.5rem 0 1rem;
}
.contact-modal__reset {
margin-top: 1.5rem;
font-family: 'General Sans', sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #fff;
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
padding: 0.7rem 1.6rem;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
}
.contact-modal__reset:hover {
background: #fff;
color: #000;
}
@media (max-width: 640px) {
.contact-modal__panel { padding: 2.5rem 1.5rem 1.75rem; }
.contact-modal__row { grid-template-columns: 1fr; }
}
/* --- Section Label --- */
.section-label {
font-family: 'General Sans', sans-serif;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #FF3401;
display: inline-block;
}
/* --- Japanese decorative labels --- */
.portfolio__jp-char,
.expertise-header__jp-char,
.expertise-divider__jp,
.about__jp {
font-size: clamp(1rem, 2vw, 1.4rem);
color: #FF3401;
cursor: pointer;
transition: opacity 0.3s;
font-weight: 400;
}
.portfolio__jp-char:hover,
.expertise-header__jp-char:hover,
.expertise-divider__jp:hover,
.about__jp:hover { opacity: 0.6; }
/* ============================================
HERO — Full viewport, massive type
============================================ */
.hero {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 4rem;
position: relative;
overflow: hidden;
z-index: 1;
background: #FF3401;
}
.hero__topo-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
will-change: transform;
}
.hero__subject-wrap {
position: absolute;
top: -10%; left: 0;
width: 100%; height: 120%;
z-index: 1;
will-change: transform;
pointer-events: none;
}
.hero__subject {
width: 100%; height: 100%;
object-fit: cover;
will-change: transform;
}
.hero__video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
will-change: transform;
transition: opacity 0.6s ease;
}
/* --- Hero shader canvas (video texture → chromatic aberration + cursor lens) --- */
.hero__shader-canvas {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 2;
display: block;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease;
}
.hero.shader-ready .hero__shader-canvas { opacity: 1; }
.hero.shader-ready .hero__subject-wrap { opacity: 0; }
/* Bottom-right corner mask — covers the Veo watermark across all viewport sizes */
.hero__corner-mask {
position: absolute;
bottom: 0;
right: 0;
width: clamp(180px, 18vw, 340px);
height: clamp(80px, 9vw, 180px);
background: radial-gradient(ellipse at bottom right,
#000 0%,
rgba(0,0,0,0.95) 25%,
rgba(0,0,0,0.6) 55%,
transparent 85%);
z-index: 2;
pointer-events: none;
}
.hero__name-split {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4rem;
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 3;
max-width: 100%;
}
.hero__thesis {
font-family: 'General Sans', sans-serif;
/* Smaller so it reads as a tagline next to the character portrait,
not as a competing headline overlapping the face. */
font-size: clamp(1.5rem, 2.6vw, 3.2rem);
font-weight: 500;
font-style: normal;
text-transform: none;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.96);
line-height: 1.1;
margin: 0 0 0.9rem;
max-width: 28ch;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero__role {
font-family: 'General Sans', sans-serif;
font-size: clamp(0.8rem, 1.1vw, 1rem);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: lowercase;
color: rgba(255, 255, 255, 0.62);
line-height: 1;
margin-bottom: 1.5rem;
}
.hero__title {
font-family: 'Phaser Bank', 'Overglow', sans-serif;
font-weight: normal;
/* Smaller so YAN / COHN stay in the side margins without crossing the
character's face. Was clamp(7rem, 18vw, 22rem). */
font-size: clamp(3.5rem, 9vw, 11rem);
line-height: 0.92;
letter-spacing: 0.01em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
text-stroke: 2px rgba(255, 255, 255, 0.9);
margin: 0;
}
.hero__title--left {
text-align: left;
transform: none;
transform-origin: left center;
}
.hero__title--right {
text-align: right;
transform: none;
transform-origin: right center;
}
.hero__meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 1rem;
}
.hero__meta-item {
font-family: 'General Sans', sans-serif;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.hero__meta-item--center { text-align: center; }
.hero__meta-item--right { text-align: right; }
.hero__scroll {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.hero__scroll-icon {
width: 3rem; height: 3rem;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: bounce-down 2.5s ease-in-out infinite;
color: #fff;
}
.hero__scroll-text {
font-family: 'General Sans', sans-serif;
font-size: 0.5rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
@keyframes bounce-down {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
/* ============================================
WORKS — Pinned preview + scrolling titles (Sirnik-style)
============================================ */
.works {
background: #000;
color: #fff;
position: relative;
z-index: 2;
padding: 0;
}
.works__intro {
/* Match .works__container max-width + padding so the heading aligns with
the image grid below */
padding: 6rem 4rem 2rem;
max-width: 1700px;
margin: 0 auto;
width: 100%;
}
.works__label {
display: block;
font-family: 'General Sans', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 1.25rem;
}
.works__title {
font-family: 'General Sans', sans-serif;
/* Min lowered + nowrap so it stays on a single line down to ~360px viewport */
font-size: clamp(1.6rem, 7vw, 5.5rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
color: #fff;
line-height: 1;
white-space: nowrap;
}
.works__container {
display: grid;
grid-template-columns: 1.8fr 1fr;
gap: 4rem;
max-width: 1700px;
margin: 0 auto;
padding: 2rem 4rem 6rem;
align-items: start;
}
.works__sticky {
position: sticky;
top: 7rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.works__previews {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 0.4rem;
overflow: hidden;
background: #0a0a0a;
}
.works__preview {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.works__preview.is-active { opacity: 1; }
.works__preview img,
.works__preview video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.works__meta {
position: relative;
min-height: 200px;
}
.works__meta-panel {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.works__meta-panel.is-active {
opacity: 1;
pointer-events: auto;
}
.works__meta-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 2rem;
padding: 1.4rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
align-items: baseline;
}
.works__meta-row:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
.works__meta-label {
font-family: 'General Sans', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.works__meta-value {
font-family: 'General Sans', sans-serif;
font-size: clamp(1.05rem, 1.15vw, 1.25rem);
font-weight: 400;
color: #fff;
line-height: 1.55;
}
/* Center year column */
.works__year-col {
display: none;
}
.works__year {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
color: rgba(255,255,255,0.35);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.4s ease;
}
.works__year.is-active {
opacity: 1;
color: #fff;
}
/* Right-side scrolling titles */
.works__list {
display: flex;
flex-direction: column;
}
.works__item {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 1.25rem 0;
text-decoration: none;
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
min-height: clamp(120px, 14vh, 180px);
}
.works__item:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
.works__item-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(1.1rem, 1.6vw, 1.6rem);
font-weight: 300;
letter-spacing: 0;
color: rgba(255,255,255,0.3);
flex-shrink: 0;
transition: color 0.4s ease;
align-self: center;
font-variant-numeric: tabular-nums;
min-width: 2.4em;
}
.works__item-name {
flex: 1;
font-family: 'General Sans', sans-serif;
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1;
color: rgba(255,255,255,0.35);
text-transform: lowercase;
transition: color 0.4s ease, transform 0.5s cubic-bezier(0.1, 0.75, 0.5, 1);
margin: 0;
}
.works__item-disc {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.95rem, 1.25vw, 1.25rem);
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.01em;
white-space: nowrap;
flex-shrink: 0;
padding-right: 1.5rem;
align-self: center;
transition: color 0.4s ease;
}
.works__item.is-active .works__item-disc { color: rgba(255, 255, 255, 0.7); }
.works__item:hover .works__item-disc { color: #fff; }
.works__item-arrow {
color: rgba(255,255,255,0.2);
flex-shrink: 0;
transition: color 0.4s ease, transform 0.5s cubic-bezier(0.1, 0.75, 0.5, 1);
align-self: center;
}
.works__item.is-active .works__item-num { color: #FF3401; }
.works__item.is-active .works__item-name { color: #fff; }
.works__item.is-active .works__item-arrow { color: #fff; }
.works__item:hover .works__item-name { transform: translateX(0.75rem); color: #fff; }
.works__item:hover .works__item-arrow { transform: translate(0.5rem, -0.5rem); color: #fff; }
/* ============================================
EXPERTISE — Magazine-style sections
============================================ */
/* ============================================
EXPERTISE — Two-column with accordion
============================================ */
.expertise {
padding: 8% 4rem;
background: #000;
position: relative;
overflow: hidden;
z-index: 2;
}
.expertise__grid-canvas {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.expertise__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
max-width: 1400px;
margin: 0 auto;
align-items: start;
}
.expertise__left {
position: sticky;
top: 6rem;
}
.expertise__label {
font-family: 'General Sans', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 2rem;
display: block;
}
.expertise__title {
font-family: 'General Sans', sans-serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
color: #fff;
line-height: 0.95;
margin-bottom: 3rem;
}
.expertise__cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: 'General Sans', sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: #000;
background: #fff;
padding: 0.85rem 1.5rem 0.85rem 2rem;
border-radius: 3rem;
transition: all 0.3s ease;
}
.expertise__cta svg {
width: 1.8rem;
height: 1.8rem;
background: #000;
color: #fff;
border-radius: 50%;
padding: 0.35rem;
transition: transform 0.3s ease;
}
.expertise__cta:hover { background: #FF3401; color: #fff; }
.expertise__cta:hover svg { background: #fff; color: #FF3401; transform: rotate(45deg); }
/* Accordion items */
.expertise__accordion {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.expertise__accordion:first-child {
border-top: 1px solid rgba(255,255,255,0.08);
}
.expertise__accordion-header {
display: flex;
align-items: center;
gap: 1.5rem;
width: 100%;
padding: 1.8rem 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.expertise__accordion-icon {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.2);
position: relative;
flex-shrink: 0;
transition: border-color 0.3s;
}
.expertise__accordion-icon span {
position: absolute;
background: #fff;
border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.expertise__accordion-icon span:first-child {
width: 12px; height: 1.5px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.expertise__accordion-icon span:last-child {
width: 1.5px; height: 12px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.expertise__accordion.open .expertise__accordion-icon span:last-child {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.expertise__accordion.open .expertise__accordion-icon {
border-color: rgba(255,255,255,0.4);
}
.expertise__accordion-title {
font-family: 'General Sans', sans-serif;
font-size: clamp(1.3rem, 2.2vw, 1.8rem);
font-weight: 600;
color: #fff;
letter-spacing: -0.02em;
}
.expertise__accordion-header:hover .expertise__accordion-title {
color: #FF3401;
}
.expertise__accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), padding 0.5s cubic-bezier(0.25, 1, 0.5, 1);
padding: 0 0 0 3.7rem;
}
.expertise__accordion.open .expertise__accordion-body {
max-height: 500px;
padding: 0 0 2rem 3.7rem;
}
.expertise__accordion-desc {
font-family: 'General Sans', sans-serif;
font-size: 0.9rem;
color: rgba(255,255,255,0.5);
line-height: 1.7;
margin-bottom: 1.5rem;
max-width: 32rem;
}
.expertise__accordion-skills {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.expertise__accordion-skills li {
font-family: 'General Sans', sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
color: rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 2rem;
padding: 0.4rem 1rem;
}
/* ============================================
QUOTE SECTION — Scroll-driven mask reveal (Brandin-style)
============================================ */
.quote-section {
padding: 12% 3rem;
background: #000;
overflow: hidden;
position: relative;
z-index: 2;
}
.quote-section__topo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 1;
}
.quote-section__inner {
position: relative;
z-index: 1;
max-width: 2200px;
margin: 0 auto;
}
.quote-line {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 2vw, 2rem);
flex-wrap: wrap;
line-height: 1;
margin-bottom: clamp(0.5rem, 1vw, 1rem);
text-align: center;
}
/* --- Quote words: CSS mask gradient reveal (GSAP-scrubbed) --- */
.quote-word {
--mask-pos: 100;
font-family: 'General Sans', sans-serif;
font-size: clamp(2.5rem, 7.5vw, 9rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 1;
white-space: nowrap;
mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255,255,255,0.08) 66.6%);
-webkit-mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255,255,255,0.08) 66.6%);
mask-size: 300% 100%;
-webkit-mask-size: 300% 100%;
mask-position: calc(var(--mask-pos) * 1%) 100%;
-webkit-mask-position: calc(var(--mask-pos) * 1%) 100%;
}
.quote-word--bright { color: #fff; }
.quote-word--dim { color: rgba(255,255,255,0.25); }
.quote-word--accent {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
text-transform: none;
letter-spacing: -0.02em;
color: #FF3401;
}
/* --- Quote inline images: width expansion on scroll --- */
.quote-img {
--quote-img-width: clamp(4rem, 9vw, 10rem);
display: inline-flex;
width: 0;
height: clamp(2.5rem, 6vw, 6.5rem);
border-radius: 0.5rem;
overflow: hidden;
flex-shrink: 0;
position: relative;
top: 0.1em;
clip-path: inset(6%);
transition: width 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}
.quote-img img {
width: var(--quote-img-width);
min-width: var(--quote-img-width);
height: 100%;
object-fit: cover;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.quote-img:hover img { transform: translateX(-50%) scale(1.15); }
/* ============================================
STATS BAR — Full-width accent band
============================================ */
.stats-bar {
background: #FF3401;
padding: 5rem 4rem;
display: flex;
justify-content: center;
gap: 6rem;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.stats-bar__item { text-align: center; }
.stats-bar__number {
font-family: 'General Sans', sans-serif;
font-size: clamp(5rem, 12vw, 14rem);
font-weight: 400;
color: #000;
letter-spacing: -0.05em;
line-height: 0.9;
}
.stats-bar__label {
font-family: 'General Sans', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(0,0,0,0.55);
margin-top: 1rem;
}
/* ============================================
ABOUT — Full-bleed photo + bio overlay (Brandin style)
============================================ */
/* ============================================
ABOUT v3 — Editorial manifesto (Artiom Yakushev pattern)
============================================ */
.about--v3 {
position: relative;
background: #0a0a0a;
z-index: 2;
overflow: hidden;
}
/* ---- MANIFESTO (full section, 50/50 split) ---- */
.manifesto {
position: relative;
height: 130vh;
min-height: 980px;
padding: 0;
overflow: hidden;
isolation: isolate;
}
/* Tiny letter marks (Artiom's corner framing) */
.manifesto__mark {
position: absolute;
font-family: 'Fraunces', 'Times New Roman', serif;
font-weight: 300;
font-style: italic;
color: rgba(255,255,255,0.5);
z-index: 10;
pointer-events: none;
user-select: none;
}
.manifesto__mark--tl {
top: 3rem; left: 3rem;
font-size: 2.4rem;
color: rgba(255, 52, 1, 0.85);
font-style: normal;
font-weight: 400;
letter-spacing: -0.05em;
}
.manifesto__mark--tr {
top: 3rem; right: 3rem;
display: flex;
gap: 2rem;
font-family: 'General Sans', sans-serif;
font-weight: 600;
font-style: normal;
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.manifesto__mark--bl {
bottom: 3rem; left: 3rem;
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
}
.manifesto__mark--bl sup {
font-size: 0.55em;
vertical-align: super;
margin-left: 1px;
}
.manifesto__mark--br {
bottom: 3rem; right: 3rem;
font-family: 'General Sans', sans-serif;
font-weight: 600;
font-style: normal;
font-size: 0.55rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
/* Portrait — left 50%, anchored to bottom so face sits in lower half (text clears it above) */
.manifesto__photo-wrap {
position: absolute;
top: 38vh;
left: 0;
bottom: 0;
width: 50%;
z-index: 1;
overflow: hidden;
will-change: transform;
}
.manifesto__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
filter: grayscale(100%) contrast(1.05) brightness(0.92);
}
.manifesto__photo-grain {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02) 0%, transparent 40%);
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.manifesto__photo-fade {
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
transparent 70%,
rgba(10,10,10,0.4) 90%,
#0a0a0a 100%);
pointer-events: none;
}
/* Statement — large editorial, top of section, clears the face */
.manifesto__statement {
position: absolute;
z-index: 5;
top: 6rem;
left: 4rem;
margin: 0;
width: calc(100% - 8rem);
max-width: 1700px;
font-family: 'General Sans', sans-serif;
font-size: clamp(1.8rem, 5vw, 6rem);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.03em;
color: #fff;
text-wrap: balance;
text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.manifesto__statement em {
font-size: 1.05em;
letter-spacing: -0.02em;
}
/* Bio block — bottom-right quadrant */
.manifesto__info {
position: absolute;
z-index: 5;
bottom: 5rem;
left: 55%;
right: auto;
width: auto;
max-width: 720px;
display: flex;
flex-direction: column;
gap: 1.6rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 1s, transform 1s;
}
.manifesto__info.is-visible {
opacity: 1;
transform: none;
}
.manifesto__info-label {
font-family: 'General Sans', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
.manifesto__info-text {
font-family: 'General Sans', sans-serif;
font-size: clamp(1.35rem, 1.7vw, 1.8rem);
font-weight: 400;
line-height: 1.5;
color: rgba(255,255,255,0.9);
letter-spacing: -0.005em;
margin: 0;
}
.manifesto__info-text em {
font-style: italic;
color: #fff;
font-weight: 500;
}
.manifesto__info-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
align-self: flex-start;
padding-bottom: 0.3rem;
font-family: 'General Sans', sans-serif;
font-size: 1.05rem;
font-weight: 500;
color: #fff;
letter-spacing: -0.01em;
border-bottom: 1px solid rgba(255,255,255,0.4);
transition: color 0.3s, border-color 0.3s, transform 0.3s;
cursor: pointer;
}
.manifesto__info-link:hover {
color: #FF3401;
border-color: #FF3401;
}
.manifesto__info-link svg {
transition: transform 0.3s;
}
.manifesto__info-link:hover svg {
transform: translate(2px, -2px);
}
.manifesto__statement em {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
letter-spacing: -0.015em;
color: #fff;
}
.manifesto__statement .word {
display: inline-block;
opacity: 0;
transform: translateY(0.4em);
filter: blur(8px);
will-change: opacity, transform, filter;
}
.manifesto__statement .word.is-visible {
opacity: 1;
transform: none;
filter: blur(0);
transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
transform 0.9s cubic-bezier(0.22,1,0.36,1),
filter 0.9s cubic-bezier(0.22,1,0.36,1);
}
/* ---- MOBILE ---- */
@media (max-width: 1024px) {
.manifesto {
height: auto;
min-height: 100vh;
padding: 5rem 2rem;
}
.manifesto__photo-wrap {
width: 100%;
opacity: 0.35;
}
.manifesto__statement {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
margin-bottom: 3rem;
font-size: clamp(1.6rem, 6vw, 3rem);
}
.manifesto__info {
position: relative;
bottom: auto;
left: 0;
right: auto;
width: 100%;
max-width: none;
}
}
@media (max-width: 640px) {
.manifesto__mark--bl, .manifesto__mark--br {
bottom: 1.5rem;
font-size: 0.5rem;
}
.manifesto__mark--bl { left: 1.5rem; }
.manifesto__mark--br { right: 1.5rem; }
}
/* DEPRECATED v2 styles kept below for reference but not loaded */
.about--v2-deprecated {
position: relative;
background: #0d0d0d;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
overflow: visible;
}
.about--v2::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
pointer-events: none;
z-index: 3;
}
/* ---- PHOTO COLUMN (sticky) ---- */
.about__photo-col {
position: relative;
}
.about__photo-wrap {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
background: #050505;
}
.about__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
filter: grayscale(100%) contrast(1.05);
transform: scale(1.05);
transform-origin: center 35%;
will-change: transform, filter;
}
/* Vignette — keeps focus on the face */
.about__photo-vignette {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 75% 65% at 55% 40%, transparent 0%, transparent 35%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.85) 100%),
linear-gradient(to right, transparent 60%, rgba(13,13,13,0.6) 92%, #0d0d0d 100%);
pointer-events: none;
}
/* Purple tint that scroll fades in then back out */
.about__photo-tint {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 60% at 55% 40%,
rgba(255, 52, 1, 0.45) 0%,
rgba(255, 52, 1, 0.18) 40%,
transparent 75%);
mix-blend-mode: screen;
opacity: 0;
will-change: opacity;
pointer-events: none;
}
.about__photo-caption {
position: absolute;
bottom: 2.5rem;
left: 2.5rem;
display: flex;
align-items: center;
gap: 1rem;
z-index: 2;
}
.about__photo-caption-bar {
display: block;
width: 36px;
height: 1px;
background: rgba(255,255,255,0.6);
}
.about__photo-caption-text {
font-family: 'General Sans', sans-serif;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
/* ---- CONTENT COLUMN (scrolls) ---- */
.about__content-col {
padding: 12rem 6rem 12rem 5rem;
max-width: 780px;
position: relative;
}
.about__eyebrow {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 3.5rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s, transform 0.8s;
}
.about__eyebrow.is-visible {
opacity: 1;
transform: none;
}
.about__eyebrow-num {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.7rem;
letter-spacing: 0.15em;
color: rgba(255, 52, 1, 0.9);
font-weight: 500;
}
.about__eyebrow-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(255, 52, 1, 0.6) 0%, rgba(255,255,255,0.08) 100%);
max-width: 120px;
}
.about__eyebrow-label {
font-family: 'General Sans', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.about__headline {
font-family: 'General Sans', sans-serif;
font-size: clamp(2rem, 3.2vw, 3.4rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 3.5rem;
max-width: 18ch;
}
.about__headline .word {
display: inline-block;
opacity: 0;
transform: translateY(0.6em);
will-change: opacity, transform;
}
.about__headline .word.is-visible {
opacity: 1;
transform: none;
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.about__body {
margin-bottom: 4rem;
}
.about__paragraph {
font-family: 'General Sans', sans-serif;
font-size: clamp(1rem, 1.15vw, 1.15rem);
font-weight: 400;
color: rgba(255,255,255,0.75);
line-height: 1.7;
margin-bottom: 1.6rem;
letter-spacing: -0.005em;
opacity: 0;
transform: translateY(24px);
transition: opacity 1s, transform 1s;
}
.about__paragraph.is-visible {
opacity: 1;
transform: none;
}
.about__paragraph em {
font-style: italic;
color: #fff;
font-weight: 500;
}
.about__pullquote {
position: relative;
margin: 0 0 5rem;
padding: 2.5rem 0 2.5rem 3rem;
border-left: 2px solid #FF3401;
font-family: 'General Sans', sans-serif;
font-size: clamp(1.5rem, 2.4vw, 2.4rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
opacity: 0;
transform: translateX(-24px);
transition: opacity 1s, transform 1s;
}
.about__pullquote.is-visible {
opacity: 1;
transform: none;
}
.about__pullquote-mark {
font-family: 'Fraunces', 'Times New Roman', serif;
font-size: 6rem;
line-height: 0.1;
color: rgba(255, 52, 1, 0.9);
position: absolute;
top: 2.2rem;
left: -0.4rem;
font-style: italic;
}
.about__pullquote em {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
color: rgba(255, 52, 1, 1);
}
/* ---- STATS ROW ---- */
.about__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding-top: 3rem;
border-top: 1px solid rgba(255,255,255,0.08);
opacity: 0;
transform: translateY(28px);
transition: opacity 1s, transform 1s;
}
.about__stats.is-visible {
opacity: 1;
transform: none;
}
.about__stat {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.about__stat-num {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.2rem, 3vw, 3rem);
font-weight: 700;
letter-spacing: -0.04em;
color: #fff;
line-height: 1;
}
.about__stat-label {
font-family: 'General Sans', sans-serif;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
/* ---- MOBILE ---- */
@media (max-width: 1024px) {
.about--v2 {
grid-template-columns: 1fr;
}
.about__photo-wrap {
position: relative;
height: 70vh;
}
.about__photo-vignette {
background:
radial-gradient(ellipse 80% 70% at 55% 40%, transparent 0%, transparent 30%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.8) 100%),
linear-gradient(to bottom, transparent 70%, rgba(13,13,13,0.7) 92%, #0d0d0d 100%);
}
.about__content-col {
padding: 5rem 2rem 6rem;
}
.about__pullquote {
padding-left: 2rem;
margin-bottom: 3.5rem;
}
.about__pullquote-mark {
font-size: 4rem;
top: 1.6rem;
}
.about__stats {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 640px) {
.about__stats {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ============================================
MARQUEE TICKER BAND
============================================ */
.marquee-band {
background: #0a0a0a;
padding: 6rem 0;
margin: 5rem 0;
overflow: hidden;
position: relative;
z-index: 3;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.marquee-band__row {
overflow: hidden;
white-space: nowrap;
}
.marquee-band__track {
display: inline-flex;
animation: marqueeLeft 45s linear infinite;
}
.marquee-band__row--right .marquee-band__track {
animation-name: marqueeRight;
}
.marquee-band__track span {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.4rem, 5vw, 4.6rem);
font-weight: 500;
letter-spacing: -0.02em;
text-transform: lowercase;
color: rgba(245, 245, 245, 0.92);
flex-shrink: 0;
padding: 0 2.5rem;
line-height: 1;
}
.marquee-band--editorial .marquee-band__track span:nth-child(6n+1) {
font-style: italic;
font-family: 'Fraunces', 'General Sans', serif;
font-weight: 400;
color: #FF3401;
}
.marquee-band__dot {
width: 10px !important;
height: 10px;
min-width: 10px;
background: rgba(245, 245, 245, 0.35);
border-radius: 50%;
align-self: center;
padding: 0 !important;
margin: 0 1.5rem;
}
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marqueeRight {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
/* ============================================
PRACTICE — Word manifesto carousel with rotating 3D diamond
============================================ */
.exp-words {
position: relative;
height: 280vh;
background: #0a0a0a;
z-index: 3;
}
.exp-words__pin {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
z-index: 2;
}
/* Retro newspaper + vinyl background image — backmost, low opacity so foreground reads. */
.exp-words__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
background-image: url('../img/practice/retro-bg.jpg?v=2');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.45;
filter: contrast(1.05) saturate(0.85);
animation: practiceBgDrift 28s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes practiceBgDrift {
0% { transform: scale(1.04) translate(-0.5%, -0.5%); }
100% { transform: scale(1.08) translate(0.5%, 0.5%); }
}
/* Soft vignette + edge fade so center stays clean for text/TV */
.exp-words__bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 55% at 50% 50%, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.15) 55%, rgba(13,13,13,0) 100%),
linear-gradient(180deg, rgba(13,13,13,0.25) 0%, rgba(13,13,13,0) 25%, rgba(13,13,13,0) 75%, rgba(13,13,13,0.35) 100%);
pointer-events: none;
}
/* 3D model canvas — above the bg flow-field, below text.
Bloom is disabled so the canvas alpha is preserved naturally; no blend-mode workaround needed. */
.exp-words__diamond {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
/* Shine particles — additive sparkle dots flying through the section */
.exp-words__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
mix-blend-mode: screen;
}
.exp-words__header {
position: absolute;
top: 6rem;
left: 6rem;
right: 6rem;
display: flex;
align-items: center;
gap: 1rem;
z-index: 5;
}
.exp-words__eyebrow-num {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
color: rgba(255, 52, 1, 0.9);
font-weight: 500;
}
.exp-words__eyebrow-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(255, 52, 1, 0.6) 0%, rgba(255,255,255,0.06) 60%, transparent 100%);
max-width: 240px;
}
.exp-words__eyebrow-label {
font-family: 'General Sans', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.exp-words__stage {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.exp-words__beat {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8rem;
opacity: 0;
will-change: transform, opacity;
pointer-events: none;
z-index: 3;
}
.exp-words__beat[data-beat="0"],
.exp-words__beat[data-beat="2"] {
align-items: flex-start;
text-align: left;
}
.exp-words__beat[data-beat="1"] {
align-items: flex-end;
text-align: right;
}
/* (per-beat abstract image styles removed — replaced by rotating 3D diamond) */
.exp-words__num {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.75rem;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 3rem;
font-weight: 500;
}
.exp-words__word {
font-family: 'General Sans', sans-serif;
font-size: clamp(4rem, 14vw, 16rem);
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.045em;
color: #fff;
margin: 0 0 3.5rem;
text-transform: lowercase;
}
.exp-words__word em {
display: block;
margin-top: -0.1em;
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
letter-spacing: -0.03em;
color: #fff;
}
.exp-words__meta {
font-family: 'General Sans', sans-serif;
font-size: clamp(0.95rem, 1.15vw, 1.2rem);
font-weight: 500;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.7);
margin: 1rem 0 0;
}
/* Entrance animation classes for word/num/meta — added by JS on first reveal */
.exp-words__num,
.exp-words__word .word,
.exp-words__meta {
display: inline-block;
}
.exp-words__num.is-entering,
.exp-words__meta.is-entering {
animation: expReveal 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.exp-words__word .word.is-entering {
display: inline-block;
animation: expRevealWord 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes expReveal {
0% { opacity: 0; transform: translateY(40px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes expRevealWord {
0% { opacity: 0; transform: translateY(60px) scale(0.92); filter: blur(12px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.exp-words__progress {
position: absolute;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
font-size: 1.6rem;
color: rgba(255,255,255,0.55);
font-variant-numeric: tabular-nums;
z-index: 5;
}
@media (max-width: 900px) {
.exp-words__header { left: 2rem; right: 2rem; top: 5rem; }
.exp-words__word { font-size: clamp(3rem, 14vw, 6rem); }
}
/* ============================================
EXPERIENCE — Sticky title + stacking cards + fan-out
============================================ */
.experience {
background: #fff;
color: #000;
position: relative;
z-index: 3;
}
.experience__container {
position: relative;
}
.experience__title-wrap {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 4rem;
z-index: 0;
}
.experience__bigtitle {
font-family: 'General Sans', sans-serif;
font-size: clamp(3rem, 11vw, 12rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.92;
color: #000;
text-align: center;
}
.experience__cards-stack {
position: relative;
z-index: 1;
}
.experience__card {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.experience__card-inner {
position: relative;
width: min(500px, 40vw);
height: 75vh;
background: #fff;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 0.4rem;
padding: 2.5rem;
overflow: hidden;
will-change: transform;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: auto;
transform-origin: 0 0;
}
.experience__card-num {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
color: #000;
}
.experience__card-geo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
width: clamp(180px, 22vw, 280px);
aspect-ratio: 1 / 1;
pointer-events: none;
}
.experience__card-geo svg {
width: 100%;
height: 100%;
overflow: visible;
}
.experience__card-bottom {
margin-top: auto;
}
.experience__card-title {
font-family: 'General Sans', sans-serif;
font-size: clamp(1.4rem, 2.5vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.03em;
color: #000;
line-height: 1.05;
margin: 0 0 0.8rem;
text-transform: uppercase;
}
.experience__card-desc {
font-family: 'General Sans', sans-serif;
font-size: 0.9rem;
color: rgba(0,0,0,0.45);
line-height: 1.6;
}
.experience__runway {
height: 120vh;
pointer-events: none;
}
/* ============================================
CONTACT — Brandin-style footer section
============================================ */
.contact {
background: #0d0d0d;
padding: 8rem 5rem 0;
position: relative;
overflow: hidden;
z-index: 4;
}
.contact__inner {
max-width: none;
margin: 0;
width: 100%;
}
.contact__row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 6rem;
padding: 3.5rem 0;
}
.contact__row--links {
display: flex;
gap: 6rem;
justify-content: flex-start;
}
.contact__row-left {
flex-shrink: 0;
min-width: 280px;
}
.contact__row-right {
flex: 1;
max-width: 920px;
}
.contact__heading-label {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.4rem, 1.8vw, 1.9rem);
letter-spacing: -0.01em;
color: #fff;
}
.contact__field-label {
display: block;
font-family: 'General Sans', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 0.65rem;
}
.contact__field-value {
font-family: 'General Sans', sans-serif;
font-size: clamp(1.05rem, 1.25vw, 1.35rem);
font-weight: 500;
color: #fff;
transition: opacity 0.3s;
display: block;
letter-spacing: -0.005em;
}
a.contact__field-value:hover { opacity: 0.6; }
.contact__bio {
font-family: 'General Sans', sans-serif;
font-size: clamp(1.1rem, 1.3vw, 1.4rem);
color: rgba(255,255,255,0.75);
line-height: 1.6;
letter-spacing: -0.005em;
}
.contact__bio em {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
color: #fff;
}
.contact__divider {
height: 1px;
background: rgba(255,255,255,0.1);
}
.contact__cta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
padding: 4rem 0;
}
.contact__cta-hook {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.6rem, 2.6vw, 2.8rem);
letter-spacing: -0.015em;
line-height: 1.15;
color: #fff;
max-width: 28ch;
margin: 0;
}
.contact__cta-link {
display: inline-flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
padding: 1.1rem 1.8rem 1.1rem 2rem;
font-family: 'General Sans', sans-serif;
font-size: clamp(0.95rem, 1.1vw, 1.15rem);
font-weight: 600;
letter-spacing: 0.02em;
color: #0d0d0d;
background: #fff;
border-radius: 999px;
text-decoration: none;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.contact__cta-link:hover {
background: #FF3401;
color: #fff;
transform: translate(2px, -2px);
}
.contact__cta-link svg {
transition: transform 0.3s ease;
}
.contact__cta-link:hover svg {
transform: translate(2px, -2px);
}
@media (max-width: 768px) {
.contact__cta {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
padding: 3rem 0;
}
.contact__cta-link { padding: 0.9rem 1.4rem 0.9rem 1.6rem; }
}
.contact__bigname {
padding: 3rem 0 0;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
position: relative;
text-align: center;
line-height: 0;
}
.contact__bigname-medal {
display: inline-block;
width: 11vw;
aspect-ratio: 1 / 1;
object-fit: cover;
vertical-align: middle;
margin-right: 1.5vw;
pointer-events: none;
opacity: 0;
transform: translateY(220px) scale(0.35) rotate(-540deg);
filter: blur(24px) brightness(0.4);
will-change: transform, opacity, filter;
}
.contact__bigname-medal.is-floating {
animation:
medalDramaticEntry 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
medalFloat 5s ease-in-out 2.4s infinite alternate;
}
@keyframes medalDramaticEntry {
0% {
opacity: 0;
transform: translateY(220px) scale(0.35) rotate(-540deg);
filter: blur(24px) brightness(0.4);
}
20% {
opacity: 0.5;
filter: blur(12px) brightness(0.8);
}
45% {
opacity: 1;
transform: translateY(-22px) scale(1.18) rotate(-30deg);
filter: blur(0) brightness(1.55) drop-shadow(0 0 28px rgba(255, 52, 1, 0.55));
}
62% {
transform: translateY(10px) scale(0.94) rotate(8deg);
filter: blur(0) brightness(1.05) drop-shadow(0 0 8px rgba(255, 52, 1, 0.15));
}
78% {
transform: translateY(-4px) scale(1.03) rotate(-2deg);
filter: blur(0) brightness(1) drop-shadow(0 0 0 transparent);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotate(0deg);
filter: blur(0) brightness(1);
}
}
@keyframes medalFloat {
0% { transform: translateY(0) scale(1) rotate(0deg); }
100% { transform: translateY(-12px) scale(1.02) rotate(1.5deg); }
}
.contact__bigname-text {
font-family: 'Phaser Bank', 'General Sans', sans-serif;
font-size: 12vw;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
text-stroke: 2px rgba(255, 255, 255, 0.9);
opacity: 1;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: left;
position: relative;
}
.contact__bigname-text .letter {
display: inline-block;
will-change: transform, opacity, filter;
}
.contact__bigname-text.is-revealing .letter {
animation: bignameLetterIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bignameLetterIn {
0% { opacity: 0; transform: translateY(0.9em); filter: blur(10px); }
60% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.contact__bottom {
margin-top: 3rem;
padding: 1.75rem 0;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.contact__copy {
font-family: 'General Sans', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
.contact__links { display: flex; gap: 2.5rem; }
.contact__link {
font-family: 'General Sans', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
transition: color 0.3s;
}
.contact__link:hover { color: #fff; }
/* ============================================
SECTION OVERLAP TRANSITIONS
============================================ */
/* Sections that overlap the previous section on scroll */
.section--overlap {
will-change: transform;
border-radius: 2rem 2rem 0 0;
box-shadow: 0 -40px 80px rgba(0,0,0,0.4);
}
.section--overlap-white {
box-shadow: 0 -40px 80px rgba(0,0,0,0.15);
}
/* ============================================
ANIMATIONS — Scroll Triggered
============================================ */
/* --- GSAP-driven animations (no CSS transitions needed) --- */
/* Word Reveal structure */
.word-reveal .word-reveal__word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: 1.1;
}
.word-reveal .word-reveal__inner {
display: inline-block;
/* GSAP handles transform/opacity/filter */
}
/* --- Split text (character-level) --- */
.split-text .word { display: inline-block; overflow: hidden; }
.split-text .word .char {
display: inline-block;
/* GSAP handles opacity, filter, transform */
}
/* Scramble */
.scramble-text { display: inline-block; }
/* Stagger */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 0.1s); }
/* Scale and mask-up are now GSAP-driven */
/* Line draw */
.line-draw {
height: 1px;
background: rgba(255,255,255,0.06);
/* GSAP handles width animation from 0 → 100% */
}
/* Counter */
.counter { font-variant-numeric: tabular-nums; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.nav { padding: 1.5rem 2rem; }
.nav__hamburger-label { display: none; }
.menu-overlay__top,
.menu-overlay__bottom { left: 2rem; right: 2rem; }
.menu-overlay__grid { grid-template-columns: 1fr; gap: 2rem; padding: 6rem 2rem; }
.menu-overlay__previews { display: none; }
.menu-overlay__name { font-size: clamp(2.5rem, 11vw, 5rem); }
.menu-overlay__link { grid-template-columns: 3rem 1fr auto; padding: 1.25rem 0; }
.menu-overlay__arrow svg { width: 28px; height: 28px; }
.menu-overlay__bottom { gap: 1rem; flex-direction: column; align-items: flex-start; }
.hero { padding: 3rem 2rem; }
.hero__name-split { padding: 0 2rem; }
.hero__meta { flex-direction: column; gap: 0.5rem; }
.hero__meta-item--center,
.hero__meta-item--right { text-align: left; }
.works__intro { padding: 4rem 1.5rem 1rem; }
.works__container { grid-template-columns: 1fr; gap: 3rem; padding: 1rem 1.5rem 4rem; }
.works__sticky { position: relative; top: auto; margin-bottom: 1.5rem; }
.works__meta { min-height: 0; }
.works__meta-panel { position: relative; }
.works__meta-panel:not(.is-active) { display: none; }
.works__year-col { display: none; }
.works__item-name { font-size: 2rem; }
.expertise { padding: 6% 2rem; }
.expertise__inner { grid-template-columns: 1fr; gap: 3rem; }
.expertise__left { position: static; }
.quote-section { padding: 6% 2rem; }
.quote-img {
--quote-img-width: 5rem;
height: 3rem;
}
.about__bio-overlay { padding: 0 2rem 4rem; margin-right: 0; max-width: 100%; }
.experience__title-wrap { padding: 2rem; }
.experience__card-inner { width: 85vw; height: 60vh; }
.stats-bar { padding: 4rem 2rem; gap: 3rem; }
.contact { padding: 3rem 2rem 0; }
.contact__row { flex-direction: column; gap: 1.5rem; }
.contact__row--links { flex-direction: column; gap: 2rem; }
.footer__bottom { padding: 2rem; flex-direction: column; gap: 1.5rem; text-align: center; }
}
@media (max-width: 640px) {
.works__item { padding: 1rem 0; min-height: 80px; }
.works__item-name { font-size: 1.6rem; }
.stats-bar { flex-direction: column; gap: 2rem; }
.quote-word { font-size: 2.2rem; }
.quote-img {
--quote-img-width: 3.5rem;
height: 2rem;
}
/* Disable mask animation on mobile — just show text */
.quote-word {
mask-image: none !important;
-webkit-mask-image: none !important;
}
.quote-img {
width: var(--quote-img-width) !important;
}
}
/* ============================================
PLAYGROUND — Matter.js letter physics
============================================ */
.playground {
position: relative;
background: #050505;
padding: 8rem 4rem 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
z-index: 4;
}
.playground__intro {
max-width: 1700px;
margin: 0 auto 3rem;
display: flex;
align-items: baseline;
gap: 2rem;
flex-wrap: wrap;
}
.playground__eyebrow {
font-family: 'General Sans', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: lowercase;
color: rgba(245, 245, 245, 0.4);
}
.playground__title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(2.4rem, 5.4vw, 4.8rem);
letter-spacing: -0.02em;
color: #fff;
margin: 0;
line-height: 1;
}
.playground__sub {
font-family: 'General Sans', sans-serif;
font-size: 0.95rem;
font-weight: 400;
color: rgba(245, 245, 245, 0.55);
margin: 0;
letter-spacing: 0.01em;
}
.playground__stage {
position: relative;
width: 100%;
height: 60vh;
min-height: 460px;
max-width: 1700px;
margin: 0 auto;
background:
radial-gradient(circle at 20% 30%, rgba(255, 52, 1, 0.08), transparent 50%),
#0a0a0a;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 0.4rem;
overflow: hidden;
cursor: grab;
touch-action: none;
}
.playground__stage:active { cursor: grabbing; }
.playground__letter {
position: absolute;
top: 0;
left: 0;
font-family: 'General Sans', sans-serif;
font-weight: 700;
font-size: clamp(3.5rem, 7vw, 6.5rem);
line-height: 1;
color: #fff;
user-select: none;
pointer-events: none;
will-change: transform;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.playground__letter--accent {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
color: #FF3401;
}
@media (max-width: 768px) {
.playground { padding: 4rem 1.5rem 2rem; }
.playground__stage { height: 50vh; min-height: 360px; }
}
/* ============================================
ROUTE OVERLAY — page transition wipe
============================================ */
.route-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: #050505;
transform: translateY(100%);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
will-change: transform;
}
.route-overlay.is-active {
pointer-events: auto;
}
.route-overlay__label {
font-family: 'General Sans', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: lowercase;
color: rgba(245, 245, 245, 0.55);
opacity: 0;
}
.route-overlay.is-active .route-overlay__label {
opacity: 1;
transition: opacity 0.3s ease 0.25s;
}
/* ============================================
THE HOBBY — Teaser row that warps into /hobby/ page
============================================ */
.hobby-teaser {
display: block;
position: relative;
background: #050505;
color: #f5f5f5;
padding: 8rem 4rem;
text-decoration: none;
overflow: hidden;
z-index: 2;
cursor: pointer;
isolation: isolate;
}
.hobby-teaser__num {
position: absolute;
top: 3rem;
left: 4rem;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.7rem;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
}
.hobby-teaser__row {
display: grid;
grid-template-columns: 1fr 1fr auto 1fr 1fr;
align-items: center;
gap: 1.6rem;
max-width: 1700px;
margin: 0 auto;
}
.hobby-teaser__photo {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 4px;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, filter;
}
.hobby-teaser__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.08) brightness(0.92);
transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
will-change: filter, transform;
}
/* Film grain noise overlay — procedural SVG via data URI */
.hobby-teaser__photo-grain {
position: absolute;
inset: -10%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
mix-blend-mode: overlay;
opacity: 0.55;
animation: hobbyGrain 0.35s steps(4) infinite;
}
@keyframes hobbyGrain {
0% { transform: translate(0, 0); }
25% { transform: translate(-4%, 3%); }
50% { transform: translate(3%, -2%); }
75% { transform: translate(-2%, -3%); }
100% { transform: translate(2%, 2%); }
}
.hobby-teaser:hover .hobby-teaser__photo {
transform: translateY(-6px) scale(1.02);
}
.hobby-teaser:hover .hobby-teaser__photo img {
filter: grayscale(15%) contrast(1.15) brightness(1.02);
transform: scale(1.08);
}
.hobby-teaser:hover .hobby-teaser__photo:nth-child(1) { transition-delay: 0ms; }
.hobby-teaser:hover .hobby-teaser__photo:nth-child(2) { transition-delay: 60ms; }
.hobby-teaser:hover .hobby-teaser__photo:nth-child(4) { transition-delay: 120ms; }
.hobby-teaser:hover .hobby-teaser__photo:nth-child(5) { transition-delay: 180ms; }
.hobby-teaser__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 2vw;
white-space: nowrap;
}
.hobby-teaser__title {
font-family: 'Phaser Bank', 'General Sans', sans-serif;
font-size: clamp(2rem, 4.6vw, 4.8rem);
font-weight: normal;
letter-spacing: 0.06em;
line-height: 0.9;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
text-stroke: 1.5px rgba(255, 255, 255, 0.9);
margin: 0 0 1.1rem;
text-transform: uppercase;
transition: -webkit-text-stroke-color 0.5s ease;
}
.hobby-teaser:hover .hobby-teaser__title {
-webkit-text-stroke-color: #FF3401;
}
.hobby-teaser__sub {
display: block;
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.95rem, 1.15vw, 1.25rem);
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 1.5rem;
white-space: nowrap;
}
.hobby-teaser__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'General Sans', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.hobby-teaser:hover .hobby-teaser__cta {
color: #FF3401;
border-color: #FF3401;
}
.hobby-teaser:hover .hobby-teaser__cta svg {
transform: translate(2px, -2px);
}
.hobby-teaser__cta svg {
transition: transform 0.3s;
}
@media (max-width: 980px) {
.hobby-teaser { padding: 5rem 1.5rem; }
.hobby-teaser__row {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"center center"
"p1 p2"
"p3 p4";
gap: 1rem;
}
.hobby-teaser__center { grid-area: center; padding: 0 0 2rem; }
.hobby-teaser__photo:nth-child(1) { grid-area: p1; }
.hobby-teaser__photo:nth-child(2) { grid-area: p2; }
.hobby-teaser__photo:nth-child(4) { grid-area: p3; }
.hobby-teaser__photo:nth-child(5) { grid-area: p4; }
.hobby-teaser__title { font-size: clamp(1.8rem, 9vw, 3.4rem); }
.hobby-teaser__num { top: 1.5rem; left: 1.5rem; }
}
/* ============================================
/hobby/ subpage — full 3D gallery
============================================ */
/* ============================================
/hobby/ — Cylindrical helix gallery (fullscreen fixed viewport)
The body has no scroll; virtual-scroll drives the WebGL gallery.
Hero, filters, hint and footer sit as fixed overlays.
============================================ */
html.hobby-page-html, body.hobby-page-body {
overflow: hidden;
height: 100%;
overscroll-behavior: none;
}
.hobby-page-body {
background: #050505;
color: #f5f5f5;
}
.hobby-page {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* Gallery stage = fullscreen canvas behind every overlay */
.hobby {
position: absolute;
inset: 0;
background: #050505;
z-index: 1;
}
.hobby__stage {
position: absolute;
inset: 0;
}
.hobby__canvas {
position: absolute;
inset: 0;
display: block;
width: 100vw;
height: 100vh;
pointer-events: auto;
touch-action: none;
}
/* Hero — top-left overlay */
.hobby-page__hero {
position: absolute;
top: 8.5rem;
left: 4rem;
max-width: 38rem;
z-index: 10;
pointer-events: none;
}
.hobby-page__num {
display: inline-block;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.68rem;
letter-spacing: 0.32em;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
margin-bottom: 1.2rem;
text-transform: uppercase;
}
.hobby-page__title {
font-family: 'General Sans', sans-serif;
font-size: clamp(2.6rem, 5.4vw, 5.4rem);
font-weight: 400;
line-height: 0.96;
letter-spacing: -0.04em;
color: #fff;
margin: 0 0 1.1rem;
text-transform: lowercase;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
}
.hobby-page__title em {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
letter-spacing: -0.02em;
color: #FF3401;
}
.hobby-page__sub {
font-family: 'General Sans', sans-serif;
font-size: clamp(0.92rem, 1.05vw, 1.05rem);
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.7);
max-width: 38ch;
margin: 0;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}
/* Filter chips — top-right overlay */
.hobby__filters {
position: absolute;
top: 9rem;
right: 4rem;
z-index: 10;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.45rem;
pointer-events: auto;
}
.hobby__filter {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.10);
padding: 0.5rem 1rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hobby__filter:hover {
background: rgba(255, 52, 1, 0.18);
border-color: rgba(255, 52, 1, 0.55);
color: #fff;
transform: translateX(-2px);
}
.hobby__filter.is-active {
background: #FF3401;
border-color: #FF3401;
color: #fff;
}
/* Scroll hint — bottom center */
.hobby__hint {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245, 245, 245, 0.45);
transition: opacity 0.6s ease;
}
.hobby__hint.is-faded { opacity: 0; }
.hobby__hint-line {
display: block;
width: 1px;
height: 2rem;
background: linear-gradient(to bottom, rgba(255, 52, 1, 0.6), rgba(255, 255, 255, 0));
animation: hobbyHintLine 2.2s ease-in-out infinite;
}
@keyframes hobbyHintLine {
0%, 100% { opacity: 0.25; transform: scaleY(0.85); }
50% { opacity: 0.8; transform: scaleY(1); }
}
/* Footer — bottom corners */
.hobby-page__foot {
position: absolute;
bottom: 1.5rem;
left: 4rem;
right: 4rem;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 10;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
pointer-events: auto;
}
.hobby-page__back {
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
transition: color 0.25s;
}
.hobby-page__back:hover { color: #FF3401; }
/* Prominent back-to-portfolio pill (top-left of the hobby overlay).
Replaces the old understated footer link. */
.hobby__back-btn {
position: absolute;
top: 1.75rem;
left: 4rem;
z-index: 20;
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
background: rgba(10, 10, 10, 0.62);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 0.8rem 1.25rem;
border-radius: 999px;
cursor: pointer;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.hobby__back-btn svg {
flex-shrink: 0;
transition: transform 0.25s ease;
color: #FF3401;
}
.hobby__back-btn:hover {
background: #FF3401;
border-color: #FF3401;
color: #fff;
transform: translateX(-3px);
box-shadow:
0 12px 32px rgba(255, 52, 1, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hobby__back-btn:hover svg {
color: #fff;
transform: translateX(-2px);
}
.hobby__back-btn:active {
transform: translateX(-2px) scale(0.98);
}
.hobby__back-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 52, 1, 0.35),
0 12px 32px rgba(255, 52, 1, 0.35);
}
/* Lightbox */
.hobby__lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(5, 5, 5, 0.94);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
display: none;
align-items: center;
justify-content: center;
padding: 4vmin;
cursor: zoom-out;
opacity: 0;
transition: opacity 0.3s ease;
}
.hobby__lightbox.is-open { display: flex; opacity: 1; }
/* Open transition — the photo "lifts" from where you clicked in the gallery
out to centered + fullscreen. The IIFE sets CSS vars --lb-from-x / -y to
the click delta from viewport center. */
.hobby__lightbox.is-anim-in .hobby__lightbox-img {
animation: lb-lift-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1.0) both;
}
.hobby__lightbox.is-anim-in {
animation: lb-bg-in 0.45s ease both;
}
@keyframes lb-lift-in {
0% {
transform: translate(var(--lb-from-x, 0), var(--lb-from-y, 0)) scale(0.08);
opacity: 0;
filter: blur(12px) brightness(1.4);
}
60% {
opacity: 1;
filter: blur(2px) brightness(1.1);
}
100% {
transform: translate(0, 0) scale(1);
opacity: 1;
filter: blur(0) brightness(1);
}
}
@keyframes lb-bg-in {
0% { background: rgba(5, 5, 5, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
100% { background: rgba(5, 5, 5, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
}
/* Close transition — reverse of lift-in. Photo shrinks back to the click
point (or the original from-point if closed via Esc/close button).
The JS updates --lb-from-x/-y when closure comes from a click. */
.hobby__lightbox.is-anim-out .hobby__lightbox-img {
animation: lb-lift-out 0.5s cubic-bezier(0.6, 0.0, 0.8, 0.4) both;
}
.hobby__lightbox.is-anim-out {
animation: lb-bg-out 0.45s ease both;
}
@keyframes lb-lift-out {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
filter: blur(0) brightness(1);
}
40% {
opacity: 1;
filter: blur(2px) brightness(1.1);
}
100% {
transform: translate(var(--lb-from-x, 0), var(--lb-from-y, 0)) scale(0.08);
opacity: 0;
filter: blur(12px) brightness(1.4);
}
}
@keyframes lb-bg-out {
0% { background: rgba(5, 5, 5, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
100% { background: rgba(5, 5, 5, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}
.hobby__lightbox-img {
max-width: 92vw;
max-height: 88vh;
object-fit: contain;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
border-radius: 4px;
transform-origin: center center;
will-change: transform, filter, opacity;
}
.hobby__lightbox-close {
position: absolute;
top: 2rem;
right: 2rem;
width: 3rem;
height: 3rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #fff;
font-size: 1.8rem;
font-weight: 300;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.hobby__lightbox-close:hover {
background: #FF3401;
border-color: #FF3401;
transform: rotate(90deg);
}
.hobby__lightbox-meta {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.68rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
/* Tablet */
@media (max-width: 1024px) {
.hobby-page__hero { top: 8.5rem; left: 2rem; max-width: 28rem; } /* down a bit to clear back button */
.hobby__filters { top: 8rem; right: 2rem; }
.hobby-page__foot { left: 2rem; right: 2rem; }
.hobby__back-btn { top: 1.5rem; left: 2rem; }
}
/* Mobile */
@media (max-width: 768px) {
.hobby-page__hero {
top: 6rem;
left: 1.25rem;
right: 1.25rem;
max-width: 100%;
}
.hobby-page__title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
.hobby-page__sub { font-size: 0.88rem; max-width: 28ch; }
.hobby__filters {
top: auto;
bottom: 5.5rem;
left: 1.25rem;
right: 1.25rem;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
}
.hobby__filter { font-size: 0.62rem; padding: 0.4rem 0.8rem; letter-spacing: 0.18em; }
.hobby__hint { display: none; }
.hobby-page__foot {
bottom: 1rem;
left: 1.25rem;
right: 1.25rem;
font-size: 0.55rem;
letter-spacing: 0.18em;
}
.hobby__lightbox-close { top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
/* Compact icon-only back button on mobile */
.hobby__back-btn {
top: 1rem;
left: 1rem;
padding: 0.7rem 0.9rem;
font-size: 0.66rem;
}
.hobby__back-btn-label { display: none; }
}
/* ============================================
HOBBY OVERLAY — homepage in-page gallery modal.
The hobby gallery is embedded into the homepage as a fullscreen overlay
so the wormhole transition can hand off to it without a page reload.
Hidden via [hidden] attribute by default; the wormhole click handler
removes [hidden], adds .is-open, and the gallery emerges into view.
============================================ */
.hobby-overlay {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 90000;
background: #050505;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.hobby-overlay[hidden] {
display: none;
}
.hobby-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.hobby-overlay.is-closing {
opacity: 0;
}
/* When the overlay is open we lock the homepage body scroll */
body.is-hobby-open {
overflow: hidden;
}
/* Inside the overlay, the .hobby-page styles still apply (position:fixed
inset:0), but the parent overlay is the actual visibility gate. */
.hobby-overlay .hobby-page {
position: absolute; /* inside the fixed overlay */
}
/* The hobby__filters etc are already absolute-positioned relative to the
viewport in their existing CSS — that works fine inside this overlay. */
/* ============================================
HOBBY WORMHOLE TRANSITION (homepage → /hobby/)
WebGL fragment shader runs a tunnel-flythrough with chromatic aberration
at the walls and a bloom growing at the center. On landing the
destination photo is held fullscreen briefly while the gallery emerges
from inside the cylinder, then the photo fades to reveal the gallery.
See /transitions-demo/lab.js → txWormhole for the spec.
============================================ */
.hobby-wormhole {
position: fixed;
inset: 0;
z-index: 100000;
pointer-events: none;
background: #050505;
will-change: opacity;
}
.hobby-wormhole__canvas {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
display: block;
}
/* Landing variant — radial overlay that visually matches the wormhole
shader's end frame: warm bright bloom at center, darkening toward the
edges (where the tunnel walls were black). Fades out over ~1.2s in
sync with the gallery's emerge distortion decay, so the cross-fade
from "in the tunnel" to "in the gallery" feels seamless. */
.hobby-wormhole--landing {
background:
radial-gradient(circle at 50% 50%,
rgba(255, 244, 220, 1.00) 0%,
rgba(255, 235, 200, 0.92) 10%,
rgba(180, 140, 100, 0.70) 26%,
rgba(60, 35, 20, 0.90) 50%,
rgba(8, 5, 3, 0.98) 75%,
rgba(5, 5, 5, 1.00) 100%);
}
/* ============================================
RESPONSIVE AUDIT FIXES (2026-05-20)
Tablet + mobile overrides for hero/footer/about overlap issues.
============================================ */
/* Tablet landscape (1024) and below — about section bio overflow */
@media (max-width: 1024px) {
.manifesto__info {
left: 0 !important;
right: 0 !important;
max-width: 56ch;
}
.manifesto__info-text {
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}
}
/* Tablet portrait (768) — tighten hero typography + about */
@media (max-width: 820px) {
.hero__name-split {
padding: 0 2rem;
}
.hero__title {
font-size: clamp(4.5rem, 16vw, 12rem);
}
.hero__thesis {
font-size: clamp(2rem, 5.4vw, 3.6rem);
}
}
/* Mobile (640 and below) — major hero rework to prevent title/thesis overlap.
- Push the giant YAN/COHN title to upper third so it doesn't sit on top of the thesis.
- Smaller thesis + role + meta; tighter padding.
- Bigger footer bigname + medal for impact at mobile. */
@media (max-width: 640px) {
/* Hero — title at top, thesis at bottom, no overlap */
.hero__name-split {
inset: 0;
align-items: flex-start;
padding: 4.5rem 1.25rem 0;
}
.hero__title {
font-size: clamp(3.8rem, 19vw, 7.5rem);
line-height: 0.9;
}
.hero__content {
padding: 0 1.25rem 6rem;
align-self: flex-end;
}
.hero__thesis {
font-size: clamp(1.7rem, 7.2vw, 2.6rem);
max-width: 100%;
line-height: 1;
}
.hero__role {
font-size: 0.7rem;
letter-spacing: 0.16em;
}
.hero__meta {
padding-bottom: 1.25rem;
font-size: 0.7rem;
}
.hero__meta-item {
font-size: 0.65rem;
}
/* Footer bigname — stack medal above text at mobile so both can be impactful */
.contact__bigname {
text-align: center;
}
.contact__bigname-medal {
display: block;
width: 26vw;
margin: 0 auto 1.5rem;
}
.contact__bigname-text {
display: block;
font-size: 13.5vw;
letter-spacing: 0;
text-align: center;
}
/* Footer rows already stack via existing flex-direction rules; tighten padding */
.contact {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
/* Quote section — guarantee no edge clipping */
.quote-section { padding-left: 1.25rem; padding-right: 1.25rem; }
/* Practice section — tighter side padding so beat text isn't squeezed */
.exp-words__beat {
padding: 0 1.25rem !important;
}
.exp-words__word {
font-size: clamp(3rem, 14vw, 5.5rem) !important;
}
.exp-words__meta {
font-size: 0.8rem !important;
}
}
/* Very small phones (360 and below) — extra-tight fallbacks */
@media (max-width: 380px) {
.hero__title {
font-size: clamp(3.2rem, 17vw, 6.5rem);
}
.hero__thesis {
font-size: clamp(1.5rem, 6.8vw, 2.4rem);
}
}
/* ============================================
ULTRA-WIDE — 1900px+ (typical 2560/3440/5120 monitors)
Most content containers cap at 1700px which leaves huge empty
margins on ultra-wide. Bump caps + scale display type up so
content uses the available real estate.
============================================ */
@media (min-width: 1900px) {
/* Container max-width bumps — was 1700 across the site */
.menu-overlay__grid,
.works__container,
.works__intro,
.hobby-teaser,
.hobby-teaser__row,
.playground__intro,
.playground__stage {
max-width: 2200px;
}
.hero__title { max-width: 2200px; }
/* Edge padding scales with viewport so content has breathing room */
.works__container,
.works__intro { padding-left: 6rem; padding-right: 6rem; }
/* Hero thesis stays a tagline at all sizes — small relative to the
portrait so it doesn't compete with the character. */
.hero__thesis {
font-size: clamp(1.5rem, 2.6vw, 4rem);
max-width: 32ch;
}
/* YAN / COHN split stays in the margins on either side of the portrait */
.hero__title {
font-size: clamp(3.5rem, 9vw, 14rem);
}
.hero__role {
font-size: clamp(0.9rem, 0.95vw, 1.4rem);
letter-spacing: 0.2em;
}
/* "Recent Works" headline scales up */
.works__title {
font-size: clamp(3rem, 8vw, 14rem);
}
/* About / manifesto statement scales up */
.manifesto__statement {
font-size: clamp(3rem, 5.4vw, 10rem);
}
/* Contact section's big "Have a brand..." headline */
.contact__inner {
max-width: 2400px;
padding-left: 6rem;
padding-right: 6rem;
}
}
@media (min-width: 2400px) {
/* True ultrawides (3440+) — bump further */
.menu-overlay__grid,
.works__container,
.works__intro,
.hobby-teaser,
.hobby-teaser__row,
.playground__intro,
.playground__stage {
max-width: 2600px;
}
.hero__title { max-width: 2600px; }
.hero__thesis {
font-size: clamp(1.5rem, 2.6vw, 5rem);
}
.hero__title {
font-size: clamp(3.5rem, 9vw, 18rem);
}
.works__title {
font-size: clamp(3rem, 8vw, 18rem);
}
.manifesto__statement {
font-size: clamp(3rem, 5.4vw, 12.5rem);
}
.contact__inner {
max-width: 2800px;
padding-left: 8rem;
padding-right: 8rem;
}
}