/* ─────────────────────────────────────────────────────────
AETHER — design tokens
───────────────────────────────────────────────────────── */
:root{
color-scheme: dark;
/* surfaces */
--bg-0:#050509;
--bg-1:#08080f;
--bg-2:#0d0d18;
--surface:rgba(255,255,255,0.025);
--surface-2:rgba(255,255,255,0.04);
--surface-3:rgba(255,255,255,0.06);
--nav-bg: rgba(10,10,18,.55);
--nav-bg-scrolled: rgba(8,8,14,.75);
--card-bg-1: rgba(255,255,255,.045);
--card-bg-2: rgba(255,255,255,.01);
--photo-bg-1: rgba(8,12,28,.92);
--photo-bg-2: rgba(4,6,18,.95);
--photo-bg-3: rgba(2,3,10,.98);
/* lines */
--line:rgba(255,255,255,0.06);
--line-strong:rgba(255,255,255,0.12);
--line-hot:rgba(20,184,166,0.35);
/* type */
--fg:#f5f5f7;
--fg-2:#c8c8d4;
--fg-3:#8a8a9c;
--fg-4:#5a5a6c;
/* brand */
--violet:#14b8a6;
--violet-2:#0d9488;
--indigo:#0f766e;
--blue:#f97316;
--blue-2:#ea580c;
--cyan:#2dd4bf;
--pink:#fb923c;
--ok:#22c55e;
/* gradients */
--grad-primary: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #f97316 100%);
--grad-primary-soft: linear-gradient(135deg, rgba(20,184,166,.18), rgba(249,115,22,.18));
--grad-text: linear-gradient(120deg, #fff 0%, #99f6e4 35%, #fed7aa 70%, #fff 100%);
--grad-accent: linear-gradient(180deg, rgba(20,184,166,.55), rgba(249,115,22,0));
--grad-border: linear-gradient(135deg, rgba(20,184,166,.55), rgba(249,115,22,.4) 50%, rgba(255,255,255,.06));
/* shadows */
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow-card:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
--shadow-glow:0 0 80px rgba(20,184,166,.35), 0 0 120px rgba(249,115,22,.18);
/* radii */
--r-sm:8px;
--r-md:14px;
--r-lg:20px;
--r-xl:28px;
--r-pill:999px;
/* type scale */
--font-sans:'Inter','Inter Variable',ui-sans-serif,system-ui,-apple-system,sans-serif;
--font-display:'Bebas Neue',Impact,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
/* spacing */
--container: 1280px;
--gutter: clamp(20px, 4vw, 56px);
}
/* ─── LIGHT THEME OVERRIDES ────────────────────────────── */
:root[data-theme="light"]{
color-scheme: light;
--bg-0:#fafafa;
--bg-1:#ffffff;
--bg-2:#f0f0f3;
--surface: rgba(10,10,20,.025);
--surface-2: rgba(10,10,20,.05);
--surface-3: rgba(10,10,20,.08);
--line: rgba(10,10,20,.08);
--line-strong: rgba(10,10,20,.16);
--fg: #0a0a14;
--fg-2: #2a2a35;
--fg-3: #525260;
--fg-4: #8e8e9a;
--nav-bg: rgba(255,255,255,.72);
--nav-bg-scrolled: rgba(255,255,255,.92);
--card-bg-1: rgba(255,255,255,.7);
--card-bg-2: rgba(255,255,255,.35);
--photo-bg-1: rgba(255,255,255,.85);
--photo-bg-2: rgba(248,248,252,.92);
--photo-bg-3: rgba(238,238,244,.95);
}
/* light-theme element overrides for hardcoded dark surfaces */
[data-theme="light"] body{ background: var(--bg-0); }
[data-theme="light"] .bg-stack{
background:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(20,184,166,.04), transparent 60%),
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(249,115,22,.03), transparent 60%),
var(--bg-0);
}
[data-theme="light"] .grid-veil{
background-image:
linear-gradient(to right, rgba(10,10,20,.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10,10,20,.035) 1px, transparent 1px);
}
[data-theme="light"] .noise{ opacity: .12; mix-blend-mode: multiply; }
[data-theme="light"] .scan{ display: none; }
[data-theme="light"] .orb-a,
[data-theme="light"] .orb-b,
[data-theme="light"] .orb-c{ opacity: .10; }
[data-theme="light"] .nebula-a,
[data-theme="light"] .nebula-b{ opacity: .15; }
/* sphere wires darker on light bg */
[data-theme="light"] .wire-sphere .ring{ border-color: rgba(20,184,166,.18); }
[data-theme="light"] .wire-sphere .lat{ border-color: rgba(10,10,20,.08); }
[data-theme="light"] .wire-torus .t-ring{ border-color: rgba(20,184,166,.35); filter: none; }
/* stars: subtle indigo/violet pinpricks instead of dots */
[data-theme="light"] .star{
background: rgba(20,184,166,.5);
box-shadow: 0 0 3px rgba(20,184,166,.4);
opacity: calc(var(--o, .65) * .55) !important;
}
[data-theme="light"] .star.s-violet{ background: rgba(20,184,166,.55); }
[data-theme="light"] .star.s-blue { background: rgba(249,115,22,.55); }
[data-theme="light"] .star.s-cyan { background: rgba(6,182,212,.55); }
/* selection */
[data-theme="light"] ::selection{ background: rgba(20,184,166,.25); color: var(--fg); }
/* nav scrolled border */
[data-theme="light"] .nav.scrolled .nav-inner{
box-shadow: 0 10px 30px -10px rgba(10,10,20,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
/* hero spec card / aside cards — flip the white-tinted glass */
[data-theme="light"] .hero-card,
[data-theme="light"] .aside-card,
[data-theme="light"] .proj,
[data-theme="light"] .tile{
background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
box-shadow: 0 30px 80px -20px rgba(10,10,20,.10), 0 0 0 1px rgba(10,10,20,.04);
}
[data-theme="light"] .hc-cell{ background: rgba(255,255,255,.55); }
[data-theme="light"] .hero-card-glow{
background: linear-gradient(135deg, rgba(20,184,166,.25), transparent 35%, transparent 65%, rgba(249,115,22,.20));
}
/* role-pill text + dot already use brand grad — fine on light. */
/* cursor: on light, mix-blend-mode difference still works (white dot becomes dark visible) */
/* but the spotlight glow is too dim on light — bump it a touch */
[data-theme="light"] .cursor-spot{
background: radial-gradient(circle 480px at var(--mx,50%) var(--my,30%), rgba(20,184,166,.10), transparent 60%);
}
/* slabs and project cards built around dark gradients — keep them dark on both themes so
their typography stays readable; just add a clean border instead of glass effect */
[data-theme="light"] .slab-tilt{
background: #06080f;
box-shadow:
0 60px 120px -40px rgba(10,10,20,.20),
0 0 0 1px rgba(10,10,20,.08) inset;
}
/* featured rotator cards now use light theme */
[data-theme="light"] .ft-slab .ft-card-back {
background: var(--bg-1);
box-shadow: none;
}
[data-theme="light"] .ftc-back-content { color: var(--fg); }
[data-theme="light"] .ftc-back-title,
[data-theme="light"] .ftc-back-desc,
[data-theme="light"] .ftc-back-kicker,
[data-theme="light"] .ftc-back-tag,
[data-theme="light"] .ftc-mark-poster { color: var(--fg); }
[data-theme="light"] .ftc-back-specs span { background: var(--surface); color: var(--fg-2); border-color: var(--line); }
/* footer wordmark: invert the fade direction tones on light theme */
[data-theme="light"] .fw-letter{
background-image: linear-gradient(180deg,
rgba(10,10,20,0.26) 0%,
rgba(10,10,20,0.10) 55%,
rgba(10,10,20,0.03) 88%,
rgba(10,10,20,0) 100%);
}
/* boot veil + page transitions */
[data-theme="light"] .boot-veil{ background: var(--bg-0); }
/* SVG planet body fill in light theme */
[data-theme="light"] .cs-planet ellipse,
[data-theme="light"] .cs-planet circle:not([fill]){ stroke: rgba(10,10,20,.18); }
/* hardcoded #fff text → flip to var(--fg) on light pages */
[data-theme="light"] .brand-word,
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .display,
[data-theme="light"] .hc-value,
[data-theme="light"] .sec-title,
[data-theme="light"] .eco-body h3,
[data-theme="light"] .link-arrow,
[data-theme="light"] .eco-card:hover .link-arrow i,
[data-theme="light"] .tile h3,
[data-theme="light"] .big-stat,
[data-theme="light"] .m-value,
[data-theme="light"] .cs-live,
[data-theme="light"] .cta-title,
[data-theme="light"] .fcol a:hover,
[data-theme="light"] .fb-meta a:hover,
[data-theme="light"] .proj-info h3,
[data-theme="light"] .about-copy .lede-2,
[data-theme="light"] .featured-title,
[data-theme="light"] .ft-cat,
[data-theme="light"] .ft-name{
color: var(--fg);
}
/* hardcoded rgba(255,255,255,...) surfaces → flip dark tint */
[data-theme="light"] .hc-bar,
[data-theme="light"] .meter-track{ background: rgba(10,10,20,.08); }
/* btn-ghost glass — change text color so it reads on light surface */
[data-theme="light"] .btn-ghost{ color: var(--fg); }
/* nav-links default link text on light */
[data-theme="light"] .nav-links a{ color: var(--fg-2); }
/* socials icon buttons */
[data-theme="light"] .socials a{
background: var(--surface-2);
border-color: var(--line-strong);
color: var(--fg);
}
/* role-pill stays white-on-gradient — fine. */
/* hero-card spec card background */
[data-theme="light"] .hero-card{
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
}
[data-theme="light"] .hc-cell{ background: rgba(255,255,255,.65); }
/* aside-card */
[data-theme="light"] .aside-card{
background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
}
/* ft-arrow circular button bg adapt */
[data-theme="light"] .ft-arrow{
background: rgba(255,255,255,.7);
color: var(--fg);
}
[data-theme="light"] .ft-arrow:hover{
background: rgba(255,255,255,.95);
}
/* about-tags */
[data-theme="light"] .about-tags span{
background: rgba(255,255,255,.7);
}
/* eyebrow + kicker contrast */
[data-theme="light"] .eyebrow{ background: rgba(255,255,255,.6); }
[data-theme="light"] .chip{ background: rgba(255,255,255,.6); color: var(--fg-2); }
/* checklist tick rings still readable */
[data-theme="light"] .check-list li{ color: var(--fg-2); }
/* hc-pulse + role-pill dot retain glow — fine. */
/* footer wordmark + smoke canvas */
[data-theme="light"] .footer-smoke{ mix-blend-mode: multiply; }
/* boot bars are gradient — fine */
[data-theme="light"] .boot-text{ color: var(--fg-3); }
/* particles in hero — make their glow softer on light */
[data-theme="light"] .particles i{
background: rgba(20,184,166,.55);
box-shadow: 0 0 6px rgba(20,184,166,.5), 0 0 12px rgba(20,184,166,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg-0);
color:var(--fg);
font-family:var(--font-sans);
font-weight:400;
font-size:15px;
line-height:1.5;
letter-spacing:-0.01em;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(20,184,166,.35);color:#fff}
/* ───────────────── AMBIENT BACKDROP ───────────────── */
.bg-stack{
position:fixed; inset:0; z-index:-1;
pointer-events:none;
overflow:hidden;
background:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(30,58,138,.20), transparent 60%),
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(15,118,110,.10), transparent 60%),
var(--bg-0);
}
.grid-veil{
position:absolute; inset:-2px;
background-image:
linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}
.noise{
position:absolute; inset:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.5;
mix-blend-mode:overlay;
}
.orb{
position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.55;
will-change:transform;
}
.orb-a{ width:560px; height:560px; left:-120px; top:8vh; background:radial-gradient(circle, #1e3a8a, transparent 60%); opacity:.5; animation: float-a 22s ease-in-out infinite; }
.orb-b{ width:680px; height:680px; right:-180px; top:60vh; background:radial-gradient(circle, #1e40af, transparent 60%); opacity:.55; animation: float-b 28s ease-in-out infinite; }
.orb-c{ width:420px; height:420px; left:50%; top:140vh; background:radial-gradient(circle, #312e81, transparent 60%); opacity:.3; animation: float-c 30s ease-in-out infinite; }
@keyframes float-a{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(60px,-40px,0)} }
@keyframes float-b{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-80px,40px,0)} }
@keyframes float-c{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(40px,-60px,0)} }
.scan{
position:absolute; inset:0;
background: linear-gradient(transparent 0, transparent 49.5%, rgba(255,255,255,.02) 50%, transparent 50.5%);
background-size: 100% 4px;
opacity:.6;
pointer-events:none;
}
/* ───────────────── REVEAL ───────────────── */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .9s cubic-bezier(.2,.6,.1,1), transform .9s cubic-bezier(.2,.6,.1,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.05s }
.reveal:nth-child(3){ transition-delay:.12s }
.reveal:nth-child(4){ transition-delay:.2s }
.reveal:nth-child(5){ transition-delay:.28s }
.reveal:nth-child(6){ transition-delay:.36s }
/* ───────────────── NAV ───────────────── */
.nav{
position:fixed; top:0; left:0; right:0;
z-index:50;
padding: 18px var(--gutter) 0;
transition: padding .3s cubic-bezier(.2,.6,.1,1);
}
.nav.scrolled{ padding-top:10px; }
.nav-inner{
max-width: var(--container);
margin: 0 auto;
display:flex; align-items:center; justify-content:space-between;
padding: 10px 14px 10px 18px;
border:1px solid var(--line);
border-radius: var(--r-pill);
background: var(--nav-bg);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
transition: background .3s ease, border-color .3s ease;
}
.nav.scrolled .nav-inner{ background: var(--nav-bg-scrolled); border-color: var(--line-strong); }
.brand{ display:flex; align-items:center; gap:10px; padding: 2px 4px; }
.brand-mark{ width:24px; height:24px; display:grid; place-items:center; filter: drop-shadow(0 0 8px rgba(20,184,166,.55)); }
.brand-mark svg{ width:100%; height:100% }
.brand-word{
font-family: var(--font-display);
font-size: 20px;
letter-spacing: .14em;
color:#fff;
}
.nav-links{ display:flex; gap:6px; }
.nav-links a{
font-size:13px; font-weight:500; color:var(--fg-2);
padding: 8px 14px;
border-radius: var(--r-pill);
letter-spacing:.02em;
transition: color .2s, background .2s;
}
.nav-links a:hover{ color:#fff; background: var(--surface-2); }
.nav-cta{ display:flex; align-items:center; gap:8px; }
.ghost-link{
font-size:13px; font-weight:500; color:var(--fg-2);
padding: 8px 12px;
transition: color .2s;
}
.ghost-link:hover{ color: var(--fg) }
/* ── HAMBURGER + MOBILE DRAWER ─────────────────────────── */
.hamburger{
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px; height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 8px;
transition: background .2s;
}
.hamburger:hover { background: var(--surface-2); }
.hamburger span{
display: block;
height: 2px;
background: var(--fg);
border-radius: 2px;
transition: transform .3s, opacity .3s;
}
/* overlay */
.nav-overlay{
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
z-index: 48;
backdrop-filter: blur(4px);
}
.nav-overlay.open { display: block; }
/* drawer */
.nav-close {
display: none;
align-self: flex-end;
background: none;
border: none;
color: var(--fg);
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background .2s;
}
.nav-close:hover { background: var(--surface-2); }
/* theme toggle button */
.theme-toggle{
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--surface-2);
border: 1px solid var(--line-strong);
border-radius: 50%;
color: var(--fg);
cursor: pointer;
padding: 0;
position: relative;
overflow: hidden;
transition: background .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover{ background: var(--surface-3); border-color: rgba(255,255,255,.22); }
[data-theme="light"] .theme-toggle:hover{ border-color: rgba(10,10,20,.25); }
.theme-toggle:active{ transform: scale(.95); }
.theme-toggle .ti{
position: absolute;
width: 16px; height: 16px;
transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.2,.64,1);
}
/* default (dark): show moon, hide sun */
.theme-toggle .ti-sun { opacity: 0; transform: rotate(45deg) scale(.6); }
.theme-toggle .ti-moon { opacity: 1; transform: rotate(0deg) scale(1); }
/* light: show sun, hide moon */
[data-theme="light"] .theme-toggle .ti-sun { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle .ti-moon { opacity: 0; transform: rotate(-45deg) scale(.6); }
/* ───────────────── BUTTONS ───────────────── */
.btn{
display:inline-flex; align-items:center; gap:8px;
font-weight:600; font-size:13px;
padding: 10px 18px;
border-radius: var(--r-pill);
border:1px solid transparent;
cursor:pointer;
white-space:nowrap;
transition: transform .15s cubic-bezier(.2,.6,.1,1), background .25s, border-color .25s, box-shadow .25s;
position:relative;
}
.btn.lg{ font-size:14px; padding: 14px 22px; }
.btn.xl{ font-size:15px; padding: 18px 28px; gap:10px; }
.btn:active{ transform: translateY(1px) }
.btn-primary{
color:#fff;
background: linear-gradient(135deg, #14b8a6 0%, #0f766e 55%, #f97316 100%);
box-shadow:
0 8px 24px -6px rgba(20,184,166,.55),
0 0 0 1px rgba(255,255,255,.08) inset,
0 -1px 0 rgba(0,0,0,.25) inset;
}
.btn-primary:hover{
background: linear-gradient(135deg, #b766ff 0%, #7681ff 55%, #4d92ff 100%);
box-shadow:
0 10px 30px -6px rgba(20,184,166,.7),
0 0 0 1px rgba(255,255,255,.12) inset,
0 0 40px rgba(20,184,166,.35);
transform: translateY(-1px);
}
.btn-ghost{
color:#fff;
background: var(--surface-2);
border-color: var(--line-strong);
backdrop-filter: blur(8px);
}
.btn-ghost:hover{
background: var(--surface-3);
border-color: rgba(255,255,255,.22);
}
/* ───────────────── HERO ───────────────── */
.hero{
position:relative;
min-height: 100vh;
padding: 160px var(--gutter) 80px;
display:flex; align-items:center; justify-content:center;
}
.hero-inner{
max-width: var(--container);
width:100%;
margin:0 auto;
display:flex; flex-direction:column; align-items:center;
text-align:center;
}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--font-mono);
font-size:11px; font-weight:500;
letter-spacing:.14em;
color:var(--fg-2);
padding: 7px 14px;
border:1px solid var(--line-strong);
border-radius: var(--r-pill);
background: rgba(255,255,255,.025);
backdrop-filter: blur(8px);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.eyebrow .dot{
width:6px; height:6px; border-radius:50%;
background: var(--ok);
box-shadow: 0 0 0 4px rgba(34,197,94,.18), 0 0 12px rgba(34,197,94,.7);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 50%{opacity:.55} }
.display{
margin: 28px 0 0;
font-family: var(--font-sans);
font-weight:900;
font-size: clamp(58px, 11vw, 168px);
line-height: .88;
letter-spacing: -0.045em;
color:#fff;
}
.display .line{ display:block; }
.display em{
font-style:normal;
background: var(--grad-text);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
background-size: 200% 100%;
animation: shine 8s linear infinite;
}
@keyframes shine{
0%{ background-position: 0% 0% }
100%{ background-position: 200% 0% }
}
.lede{
max-width: 620px;
margin: 28px 0 0;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.55;
color: var(--fg-3);
text-wrap: pretty;
}
.hero-actions{
display:flex; gap:12px; flex-wrap:wrap;
margin-top: 36px;
justify-content:center;
}
/* hero spec card */
.hero-card{
position:relative;
margin-top: 64px;
width: min(880px, 100%);
border-radius: var(--r-lg);
background:
linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
border:1px solid var(--line-strong);
backdrop-filter: blur(16px) saturate(160%);
padding: 18px 22px 22px;
box-shadow: var(--shadow-card);
overflow:hidden;
}
.hero-card-glow{
position:absolute; inset:-1px;
border-radius: inherit;
padding:1px;
background: linear-gradient(135deg, rgba(20,184,166,.6), transparent 35%, transparent 65%, rgba(249,115,22,.45));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
}
.hc-row{ display:flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--fg-3); }
.hc-head{ padding-bottom:14px; border-bottom:1px dashed var(--line-strong); }
.hc-pulse{ width:8px; height:8px; border-radius:50%; background: var(--violet); box-shadow:0 0 0 3px rgba(20,184,166,.2), 0 0 12px var(--violet); animation: pulse 1.8s ease-in-out infinite; }
.hc-sep{ opacity:.4 }
.hc-tail{ margin-left:auto; color:var(--ok); }
.hc-grid{
margin-top:16px;
display:grid; grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border-radius: 12px;
overflow:hidden;
}
.hc-cell{
background: rgba(10,10,18,.6);
padding: 16px 14px 18px;
text-align:left;
display:flex; flex-direction:column; gap:8px;
}
.hc-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--fg-4); text-transform:uppercase }
.hc-value{ font-family:var(--font-sans); font-weight:700; font-size:22px; color:#fff; letter-spacing:-0.02em; display:flex; align-items:baseline; gap:4px; }
.hc-value .unit{ font-size:11px; font-weight:500; color:var(--fg-3); letter-spacing:.02em; }
.hc-bar{ height:3px; border-radius:3px; background: rgba(255,255,255,.06); overflow:hidden; }
.hc-bar i{ display:block; height:100%; width: var(--w); background: var(--grad-primary); border-radius:inherit; box-shadow: 0 0 8px rgba(20,184,166,.5); }
/* logo strip */
.logo-strip{
margin-top: 80px;
width: 100%;
display:flex; align-items:center; gap: 32px;
font-family: var(--font-mono);
font-size:11px; letter-spacing:.14em;
color: var(--fg-4);
max-width: 1100px;
}
.ls-label{ flex:none; white-space:nowrap; }
.logo-strip{ overflow:hidden; position: relative; z-index: 1; }
.ls-track{
flex:1;
position: relative;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ls-track .ls-rail{
display: flex; align-items:center; gap: 28px;
color: var(--fg-3);
font-weight:600;
letter-spacing:.16em;
flex-wrap: nowrap;
width: max-content;
animation: marquee 42s linear infinite;
}
.ls-track .ls-rail > span{ white-space:nowrap; opacity:.8; flex: none; }
.ls-track .ls-rail > i{ width:4px; height:4px; border-radius:50%; background: var(--fg-4); display:inline-block; flex:none; }
@keyframes marquee { to { transform: translateX(-50%) } }
.scroll-cue{
position:absolute; left:50%; bottom:24px;
transform: translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:10px;
font-family: var(--font-mono); font-size:10px; letter-spacing:.2em;
color: var(--fg-4);
}
.scroll-cue .cue-line{
width:1px; height:40px;
background: linear-gradient(to bottom, var(--fg-4), transparent);
position:relative; overflow:hidden;
}
.scroll-cue .cue-line::after{
content:""; position:absolute; left:0; right:0; height:14px;
background: linear-gradient(to bottom, #fff, transparent);
animation: cue 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
/* ───────────────── SECTION HEADS ───────────────── */
.sec-head{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
text-align:left;
margin-bottom: 64px;
}
.kicker{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--font-mono);
font-size:11px; letter-spacing:.18em; color: var(--fg-3);
text-transform:uppercase;
white-space: nowrap;
}
.kicker span{
color: var(--violet);
font-weight:600;
}
.kicker.centered{ justify-content:center; display:flex; }
.sec-title{
margin: 18px 0 0;
font-weight:800;
font-size: clamp(36px, 5.5vw, 72px);
line-height: 1.02;
letter-spacing: -0.035em;
color:#fff;
max-width: 18ch;
text-wrap: balance;
}
.sec-title em{
font-style:normal;
background: var(--grad-primary);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.sec-sub{
margin: 20px 0 0;
max-width: 56ch;
font-size: 16px;
color: var(--fg-3);
line-height:1.55;
text-wrap: pretty;
}
/* ───────────────── ECOSYSTEM ───────────────── */
.ecosystem{
padding: 120px 0 80px;
position:relative;
}
.eco-grid{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.eco-card{
position:relative;
border-radius: var(--r-lg);
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
border:1px solid var(--line-strong);
overflow:hidden;
transition: transform .4s cubic-bezier(.2,.6,.1,1), border-color .3s;
display:flex; flex-direction:column;
backdrop-filter: blur(8px);
}
.eco-card:hover{
transform: translateY(-6px);
border-color: rgba(20,184,166,.35);
}
.eco-card:hover .art-glow{ opacity:1 }
.eco-art{
position:relative;
aspect-ratio: 4/3;
overflow:hidden;
background:
radial-gradient(circle at 30% 40%, rgba(20,184,166,.35), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(249,115,22,.4), transparent 60%),
linear-gradient(135deg, #1a0d2e, #0a0f24 60%, #0a0a18);
}
.art-glow{
position:absolute; inset:0;
background: radial-gradient(circle at 50% 50%, rgba(20,184,166,.35), transparent 60%);
opacity:0; transition: opacity .5s;
}
.art-tag{
position:absolute; top:14px; left:14px;
font-family: var(--font-mono); font-size:10px; letter-spacing:.16em;
padding: 5px 10px; border-radius:6px;
background: rgba(0,0,0,.45);
border:1px solid rgba(255,255,255,.14);
backdrop-filter: blur(6px);
color:#fff;
z-index:2;
}
/* ribbons (build art) */
.ribbon{
position:absolute; left:-10%; right:-10%;
height: 60px; border-radius: 60px;
background: linear-gradient(90deg, rgba(20,184,166,.0), rgba(20,184,166,.9), rgba(249,115,22,.9), rgba(249,115,22,0));
filter: blur(0.5px);
transform-origin: 50% 50%;
box-shadow: 0 0 60px rgba(20,184,166,.4);
}
.ribbon.r1{ top: 18%; transform: rotate(-12deg); opacity:.7 }
.ribbon.r2{ top: 44%; transform: rotate(-6deg); opacity:.85; height:48px; }
.ribbon.r3{ top: 70%; transform: rotate(-14deg); opacity:.6; height:38px; }
/* curve (trade art) */
.curve{
position:absolute; inset:0;
background:
radial-gradient(ellipse 100% 60% at 50% 110%, rgba(249,115,22,.6), transparent 60%);
}
.curve::after{
content:""; position:absolute; inset:auto 10% 18% 10%; height:62%;
background: linear-gradient(180deg, transparent, rgba(20,184,166,.0)),
radial-gradient(ellipse 100% 100% at 50% 100%, rgba(255,255,255,.0), transparent),
url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat;
}
.dot-cluster{ position:absolute; inset:0; pointer-events:none; }
.dot-cluster i{
position:absolute; width:5px; height:5px; border-radius:50%;
background:#fff; box-shadow: 0 0 8px #fff, 0 0 16px var(--violet);
}
.dot-cluster i:nth-child(1){ top:24%; left:18% }
.dot-cluster i:nth-child(2){ top:50%; left:34% }
.dot-cluster i:nth-child(3){ top:32%; left:48% }
.dot-cluster i:nth-child(4){ top:60%; left:62% }
.dot-cluster i:nth-child(5){ top:38%; left:74% }
.dot-cluster i:nth-child(6){ top:22%; left:84% }
.dot-cluster i:nth-child(7){ top:70%; left:24% }
.dot-cluster i:nth-child(8){ top:48%; left:90% }
/* hex (govern art) */
.hex{
position:absolute; inset:0;
display:grid; place-items:center;
}
.hex span{
position:absolute;
width: 88px; height: 100px;
clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
background: linear-gradient(135deg, rgba(20,184,166,.4), rgba(249,115,22,.5));
border:1px solid rgba(255,255,255,.18);
}
.hex span:nth-child(1){ transform: translate(-110px, -90px); opacity:.5 }
.hex span:nth-child(2){ transform: translate(0, -110px); opacity:.75 }
.hex span:nth-child(3){ transform: translate(110px, -90px); opacity:.55 }
.hex span:nth-child(4){ transform: translate(-110px, 30px); opacity:.65 }
.hex span:nth-child(5){ transform: translate(0, 10px); opacity:1; background: linear-gradient(135deg, #14b8a6, #f97316); box-shadow:0 0 40px rgba(20,184,166,.6) }
.hex span:nth-child(6){ transform: translate(110px, 30px); opacity:.7 }
.hex span:nth-child(7){ transform: translate(0, 130px); opacity:.4 }
.eco-body{
padding: 28px 28px 30px;
display:flex; flex-direction:column; gap:10px;
}
.eco-num{
font-family: var(--font-mono);
font-size: 11px; letter-spacing:.18em;
color: var(--violet);
}
.eco-body h3{
margin: 4px 0 6px;
font-size: 28px; font-weight:700; letter-spacing:-0.025em;
color:#fff;
}
.eco-body p{
margin:0;
font-size:14px; color:var(--fg-3); line-height:1.55;
}
.link-arrow{
margin-top: 14px;
display:inline-flex; align-items:center; gap:8px;
font-size:13px; font-weight:600; color:#fff;
letter-spacing:.01em;
}
.link-arrow i{
font-style:normal;
transition: transform .25s cubic-bezier(.2,.6,.1,1);
color: var(--violet);
}
.eco-card:hover .link-arrow i{ transform: translateX(4px); color:#fff; }
/* ───────────────── BENTO ───────────────── */
.bento{
padding: 100px 0;
}
.bento-grid{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display:grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 200px;
gap: 16px;
}
.tile{
position:relative;
border-radius: var(--r-lg);
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
border:1px solid var(--line-strong);
overflow:hidden;
backdrop-filter: blur(10px);
transition: transform .35s cubic-bezier(.2,.6,.1,1), border-color .3s, box-shadow .3s;
}
.tile:hover{
transform: translateY(-4px);
border-color: rgba(20,184,166,.4);
box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 60px rgba(20,184,166,.12);
}
.tile-content{
position:relative; z-index:2;
padding: 28px;
display:flex; flex-direction:column; gap:10px;
height:100%;
}
.tile-eyebrow{
font-family: var(--font-mono);
font-size:10px; letter-spacing:.2em;
color: var(--fg-3);
}
.tile h3{
margin:0;
font-size: clamp(22px, 2vw, 30px);
font-weight:700; letter-spacing:-0.025em;
color:#fff;
line-height:1.1;
}
.tile h3 em{
font-style:normal;
background: var(--grad-primary);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.tile p{
margin: 6px 0 0;
font-size:13px; color:var(--fg-3); line-height:1.55; max-width: 44ch;
}
.tile-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.tile-hero{ grid-column: span 4; grid-row: span 2; }
.tile-hero .tile-content h3{ font-size: clamp(30px, 3.4vw, 48px); max-width: 14ch; }
.tile-bg-hero{
background:
radial-gradient(ellipse 80% 60% at 90% 80%, rgba(20,184,166,.45), transparent 60%),
radial-gradient(ellipse 60% 80% at 10% 20%, rgba(249,115,22,.35), transparent 60%);
}
.tile-bg-hero::after{
content:""; position:absolute; inset:0;
background-image:
linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 70% 60% at 60% 50%, #000, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 50%, #000, transparent 80%);
}
.tile-finality{ grid-column: span 2; }
.tile-bg-finality{
background: radial-gradient(ellipse at 80% 20%, rgba(20,184,166,.4), transparent 60%);
}
.tile-cost{ grid-column: span 2; }
.tile-bg-cost{
background: radial-gradient(ellipse at 20% 80%, rgba(249,115,22,.45), transparent 60%);
}
.tile-security{ grid-column: span 2; grid-row: span 2; }
.tile-bg-security{
background:
radial-gradient(ellipse at 90% 10%, rgba(20,184,166,.35), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(6,182,212,.25), transparent 60%);
}
.tile-bridge{ grid-column: span 2; }
.tile-bg-bridge{
background: radial-gradient(ellipse at 50% 100%, rgba(20,184,166,.35), transparent 60%);
}
.tile-agents{ grid-column: span 2; }
.tile-bg-agents{
background: radial-gradient(ellipse at 60% 50%, rgba(236,72,153,.35), transparent 60%),
radial-gradient(ellipse at 10% 0%, rgba(20,184,166,.25), transparent 60%);
}
.big-stat{
font-family: var(--font-sans);
font-weight:800;
font-size: clamp(40px, 4.6vw, 64px);
letter-spacing: -0.04em;
color:#fff;
line-height: 1;
display:flex; align-items:baseline; gap:6px;
margin-top: auto;
}
.big-stat .big-unit{
font-size: 0.36em; font-weight:500; color:var(--fg-3);
letter-spacing:0;
}
.tile-finality .tile-content,
.tile-cost .tile-content{ justify-content:space-between }
.meter{ margin-top:auto; }
.meter-track{ height:6px; border-radius:6px; background: rgba(255,255,255,.06); overflow:hidden; }
.meter-fill{ height:100%; width: var(--w); background: var(--grad-primary); box-shadow: 0 0 16px rgba(20,184,166,.5); border-radius:inherit; }
.meter-meta{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color: var(--fg-4); }
.check-list{ list-style:none; padding:0; margin: 12px 0 0; display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--fg-2); }
.check-list li i{
width:14px; height:14px; flex:none; border-radius:50%;
background: linear-gradient(135deg, #14b8a6, #f97316);
position:relative;
}
.check-list li i::after{
content:""; position:absolute; inset:0;
background: url("data:image/svg+xml;utf8,") center / 70% no-repeat;
}
.chain-row{ margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; }
.chip{
font-family: var(--font-mono); font-size:10px; letter-spacing:.12em;
padding: 6px 10px;
border-radius:6px;
background: rgba(255,255,255,.05);
border: 1px solid var(--line-strong);
color: var(--fg-2);
}
.chip-plus{ background: var(--grad-primary-soft); border-color: rgba(20,184,166,.4); color:#fff; }
.tile-meta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--fg-3); }
.pulse-dot{
width:7px; height:7px; border-radius:50%;
background:#14b8a6;
box-shadow: 0 0 0 3px rgba(20,184,166,.2), 0 0 12px var(--violet);
animation: pulse 1.6s ease-in-out infinite;
}
/* ───────────────── METRICS ───────────────── */
.metrics{ padding: 100px 0; }
.metric-grid{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line-strong);
border-bottom: 1px solid var(--line-strong);
}
.metric{
padding: 36px 28px;
border-right: 1px solid var(--line-strong);
display:flex; flex-direction:column; gap:12px;
position:relative;
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.metric:last-child{ border-right:0; }
.metric::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
background: var(--grad-primary);
opacity:0; transition: opacity .3s;
}
.metric:hover::before{ opacity:1 }
.m-label{
font-family: var(--font-mono); font-size:11px; letter-spacing:.14em;
color: var(--fg-3);
text-transform: uppercase;
}
.m-value{
font-weight:800; font-size: clamp(36px, 4vw, 52px);
letter-spacing:-0.04em;
color:#fff;
line-height:1;
display:flex; align-items:baseline; gap:4px;
}
.m-value .m-suffix{ font-size: .55em; color: var(--fg-2); font-weight:600; }
.m-trend{
font-family: var(--font-mono); font-size:11px; letter-spacing:.06em;
color: var(--ok);
}
.m-trend.up::before{ content:"↗ "; }
.chart-strip{
max-width: var(--container);
margin: 28px auto 0;
padding: 0 var(--gutter);
}
.cs-head{
display:flex; justify-content:space-between; align-items:center;
font-family: var(--font-mono); font-size:11px; letter-spacing:.14em;
color: var(--fg-3); text-transform:uppercase;
margin-bottom: 14px;
}
.cs-live{ display:inline-flex; align-items:center; gap:8px; color:#fff; }
.cs-chart{ width:100%; height:160px; display:block; }
/* ───────────────── CTA ───────────────── */
.cta{
position:relative;
margin: 80px auto 0;
padding: 140px var(--gutter);
overflow:hidden;
}
.cta-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.cta-orb{ position:absolute; border-radius:50%; filter: blur(80px); }
.cta-orb-1{ width:600px; height:600px; left:5%; top:-10%; background: radial-gradient(circle, rgba(15,118,110,.45), transparent 60%); }
.cta-orb-2{ width:700px; height:700px; right:0%; bottom:-30%; background: radial-gradient(circle, rgba(249,115,22,.45), transparent 60%); }
.cta-grid{
position:absolute; inset:0;
background-image:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000, transparent 75%);
}
.cta-inner{
max-width: 1000px; margin: 0 auto;
text-align:center;
display:flex; flex-direction:column; align-items:center;
}
.cta-title{
margin: 24px 0 0;
font-weight:800;
font-size: clamp(48px, 8vw, 120px);
line-height:.95;
letter-spacing:-0.045em;
color:#fff;
text-wrap: balance;
}
.cta-title span{ display:block; }
.cta-gradient{
background: var(--grad-primary);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
font-style:italic;
}
.cta-sub{
max-width: 56ch;
margin: 24px 0 0;
font-size: 17px;
color: var(--fg-2);
line-height:1.55;
}
.cta-actions{
margin-top: 40px;
display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.cta-meta{
margin-top: 32px;
display:flex; align-items:center; gap:10px;
font-family: var(--font-mono); font-size:11px; letter-spacing:.14em;
color: var(--fg-3); text-transform:uppercase;
}
.cta-sep{ opacity:.5 }
.status-ok{
display:inline-block; width:7px; height:7px; border-radius:50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(34,197,94,.15), 0 0 8px var(--ok);
margin-right:6px; vertical-align: middle;
}
/* ───────────────── FOOTER ───────────────── */
.footer{
position:relative;
background: transparent;
overflow:hidden;
}
.footer-inner{
max-width: var(--container);
margin: 0 auto;
padding: 80px var(--gutter) 0;
}
.footer-cols{
display:grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 80px;
border-bottom: 1px solid var(--line);
}
.fcol{ display:flex; flex-direction:column; gap:12px; }
.fcol .brand{ margin-bottom: 14px; }
.fcol-tag{ margin:0; color: var(--fg-3); font-size: 14px; max-width: 36ch; line-height:1.55; }
.fcol-head{ font-family: var(--font-mono); font-size:11px; letter-spacing:.18em; color: var(--fg-4); text-transform:uppercase; margin-bottom:6px; }
.fcol a{ font-size: 14px; color: var(--fg-2); transition: color .2s; }
.fcol a:hover{ color: #fff; }
.socials{ display:flex; gap:8px; margin-top: 4px; }
.socials a{
display:grid; place-items:center;
width: 36px; height:36px; border-radius:50%;
background: var(--surface-2);
border:1px solid var(--line-strong);
font-size:13px; font-weight:600;
transition: background .2s, border-color .2s, transform .2s;
}
.socials a:hover{ background: var(--surface-3); border-color: rgba(20,184,166,.4); transform: translateY(-2px); }
.footer-word{
margin: 60px 0 -10px;
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(96px, 24vw, 360px);
line-height:.85;
letter-spacing:-0.05em;
text-align:center;
white-space: nowrap;
user-select: none;
}
/* Each letter is its own element — minimal, faded, gradient fades top → bottom */
.fw-letter{
display: inline-block;
position: relative;
background-image: linear-gradient(180deg,
rgba(255,255,255,0.22) 0%,
rgba(255,255,255,0.08) 55%,
rgba(255,255,255,0.02) 88%,
rgba(255,255,255,0) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
cursor: pointer;
transform-origin: 50% 100%;
transition: transform .35s cubic-bezier(.34, 1.2, .64, 1), filter .25s ease;
will-change: transform;
}
.fw-space{
display: inline-block;
width: 0.18em;
pointer-events: none;
}
/* MINIMAL distort on hover — small lift + very subtle squish */
.fw-letter:hover{
transform: translateY(-5px) scale(1.025, 0.97);
filter: drop-shadow(0 6px 14px rgba(20,184,166,.18));
z-index: 5;
}
/* "CHARAN" — light-mode only: low-opacity purple, top-to-bottom fade.
Dark mode keeps the default white fade from .fw-letter above. */
[data-theme="light"] .footer-word > .fw-letter:nth-child(-n+6){
background-image: linear-gradient(180deg,
rgba(20,184,166,0.35) 0%,
rgba(249,115,22,0.18) 50%,
rgba(249,115,22,0.06) 85%,
rgba(249,115,22,0) 100%);
animation: none;
filter: none;
opacity: .9;
}
[data-theme="light"] .footer-word > .fw-letter:nth-child(-n+6):hover{
filter: drop-shadow(0 6px 16px rgba(249,115,22,.25));
}
@media (prefers-reduced-motion: reduce){
.fw-letter:hover{ transform: translateY(-3px); filter: none; }
}
.footer-base{
padding: 28px 0 36px;
border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
font-family: var(--font-mono); font-size:11px; letter-spacing:.12em;
color: var(--fg-4); text-transform:uppercase;
}
.fb-meta{ display:inline-flex; align-items:center; gap:10px; }
.fb-meta a{ color: var(--fg-3); transition: color .2s; }
.fb-meta a:hover{ color:#fff }
.fb-sep{ opacity:.4 }
.status{ display:inline-flex; align-items:center; color: var(--fg-2); }
/* ───────────────── RESPONSIVE ───────────────── */
/* ─────────────────────────────────────────────────────────
PORTFOLIO ADDITIONS
───────────────────────────────────────────────────────── */
/* hide native cursor on devices that support fine pointers */
@media (pointer: fine){
html, body, a, button{ cursor:none; }
}
/* ── CUSTOM CURSOR ─────────────────────────────────────── */
.cursor-dot, .cursor-ring{
position: fixed; top:0; left:0;
pointer-events:none;
z-index: 9999;
border-radius:50%;
mix-blend-mode: difference;
will-change: transform;
}
.cursor-dot{
width:8px; height:8px;
background:#fff;
transform: translate(-50%,-50%);
transition: width .2s, height .2s, opacity .2s;
}
.cursor-ring{
width:36px; height:36px;
border:1.5px solid rgba(255,255,255,.7);
transform: translate(-50%,-50%);
transition: width .25s cubic-bezier(.2,.6,.1,1), height .25s cubic-bezier(.2,.6,.1,1), border-color .25s;
}
body.cur-hover .cursor-ring{ width:64px; height:64px; border-color:#fff; }
body.cur-hover .cursor-dot{ width:4px; height:4px; }
body.cur-pressed .cursor-ring{ width:28px; height:28px; }
@media (pointer: coarse){
.cursor-dot, .cursor-ring{ display:none; }
}
/* ── CURSOR SPOTLIGHT ──────────────────────────────────── */
.cursor-spot{
position: fixed; inset:0; pointer-events:none; z-index:0;
background: radial-gradient(circle 480px at var(--mx,50%) var(--my,30%), rgba(249,115,22,.06), transparent 60%);
transition: opacity .4s;
}
/* ── BOOT VEIL ─────────────────────────────────────────── */
.boot-veil{
position: fixed; inset:0; z-index: 200;
background: var(--bg-0);
display:flex; align-items:center; justify-content:center;
flex-direction:column; gap: 28px;
transition: opacity .6s ease .2s, visibility 0s linear .8s;
}
body.booted .boot-veil{ opacity:0; visibility:hidden; }
.boot-bars{ display:flex; gap:6px; }
.boot-bars i{
width: 6px; height: 36px;
background: var(--grad-primary);
border-radius: 3px;
transform-origin: bottom;
animation: bar 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
.boot-bars i:nth-child(2){ animation-delay:.08s }
.boot-bars i:nth-child(3){ animation-delay:.16s }
.boot-bars i:nth-child(4){ animation-delay:.24s }
.boot-bars i:nth-child(5){ animation-delay:.32s }
@keyframes bar{
0%,100%{ transform: scaleY(.35) }
50%{ transform: scaleY(1) }
}
.boot-text{
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .22em;
color: var(--fg-3);
}
/* Hide content until booted to avoid flash */
body.boot .hero-inner-portfolio,
body.boot .wire-stage{ opacity: 0; }
body.booted .hero-inner-portfolio{ opacity:1; transition: opacity .6s ease .15s; }
body.booted .wire-stage{ opacity: .35; transition: opacity 1.4s ease .25s; }
/* ── NAV STATUS ────────────────────────────────────────── */
.nav-status{
display:inline-flex; align-items:center; gap:6px;
font-family: var(--font-mono); font-size:10px; letter-spacing:.14em;
color: var(--fg-3); text-transform: uppercase;
margin-right: 4px;
}
@media (max-width: 760px){
.nav-status{ display:none; }
}
/* ── HERO PORTFOLIO ────────────────────────────────────── */
.hero-portfolio{
min-height: 100vh;
padding-top: 140px;
}
.hero-inner-portfolio{ position: relative; z-index: 2; }
.name-display{
font-size: clamp(36px, 5.5vw, 84px) !important;
line-height: .9 !important;
letter-spacing: -0.04em !important;
}
.name-display .italic-grad em{
font-style: italic;
/* smooth loop palette — both ends are the same purple so the cycle is seamless */
background: linear-gradient(135deg, #14b8a6 0%, #0f766e 18%, #0f766e 36%, #f97316 50%, #0f766e 64%, #0f766e 82%, #14b8a6 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
background-size: 200% 100%;
animation: shine 10s linear infinite;
letter-spacing: -0.05em;
}
.role-row{
margin-top: 28px;
display:inline-flex; align-items:center; gap: 14px;
flex-wrap:wrap; justify-content:center;
}
.role-pill{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--font-mono); font-size:11px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase;
padding: 8px 16px;
border-radius: var(--r-pill);
background: var(--grad-primary);
color:#fff;
white-space: nowrap;
box-shadow: 0 8px 24px -8px rgba(20,184,166,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.rp-dot{
width:6px; height:6px; border-radius:50%;
background:#fff;
box-shadow: 0 0 8px #fff;
}
.role-sep{
width:24px; height:1px; background: var(--line-strong);
}
.role-meta{
font-family: var(--font-mono); font-size:11px; letter-spacing:.16em;
color: var(--fg-3); text-transform:uppercase;
white-space: nowrap;
}
/* ── 3D WIREFRAME STAGE ────────────────────────────────── */
.wire-stage{
position: absolute;
inset: 0;
display:grid; place-items:center;
z-index: 1;
pointer-events: none;
perspective: 1400px;
perspective-origin: 50% 40%;
opacity: 0.35; /* dialed back further */
}
.wire-sphere, .wire-torus{
position: absolute;
transform-style: preserve-3d;
will-change: transform;
}
.wire-sphere{
top: 50%; left: 50%;
width: clamp(520px, 64vmin, 760px);
height: clamp(520px, 64vmin, 760px);
margin: -32vmin 0 0 -32vmin;
animation: spin-y 36s linear infinite;
}
.wire-sphere .ring{
position: absolute; inset: 0;
border: 1px solid rgba(249,115,22,.18);
border-radius: 50%;
transform-style: preserve-3d;
box-shadow:
inset 0 0 60px rgba(249,115,22,.06),
0 0 30px rgba(249,115,22,.04);
}
/* longitudes — vertical great-circles */
.wire-sphere .r1{ transform: rotateY(0deg); }
.wire-sphere .r2{ transform: rotateY(22.5deg); border-color: rgba(249,115,22,.16); }
.wire-sphere .r3{ transform: rotateY(45deg); border-color: rgba(20,184,166,.18); }
.wire-sphere .r4{ transform: rotateY(67.5deg); border-color: rgba(20,184,166,.20); }
.wire-sphere .r5{ transform: rotateY(90deg); border-color: rgba(249,115,22,.22); }
.wire-sphere .r6{ transform: rotateY(112.5deg); border-color: rgba(249,115,22,.20); }
.wire-sphere .r7{ transform: rotateY(135deg); border-color: rgba(249,115,22,.16); }
.wire-sphere .r8{ transform: rotateY(157.5deg); border-color: rgba(249,115,22,.14); }
/* latitudes — horizontal rings at different heights */
.wire-sphere .lat{
border-color: rgba(255,255,255,.12);
}
.wire-sphere .l1{ transform: rotateX(90deg) translateZ( 0%); width:100%; height:100%; }
.wire-sphere .l2{ transform: rotateX(90deg) translateZ( 30%) scale(.954); }
.wire-sphere .l3{ transform: rotateX(90deg) translateZ(-30%) scale(.954); }
.wire-sphere .l4{ transform: rotateX(90deg) translateZ( 55%) scale(.835); }
.wire-sphere .l5{ transform: rotateX(90deg) translateZ(-55%) scale(.835); }
@keyframes spin-y{
from{ transform: rotateX(18deg) rotateY(0deg) }
to { transform: rotateX(18deg) rotateY(360deg) }
}
/* glow halo behind sphere */
.wire-stage::before{
content:"";
position: absolute; left:50%; top:50%;
width: 60vmin; height: 60vmin; transform: translate(-50%,-50%);
background: radial-gradient(circle, rgba(15,118,110,.14), rgba(249,115,22,.06) 40%, transparent 65%);
filter: blur(40px);
z-index:-1;
}
/* torus inside sphere */
.wire-torus{
top: 50%; left: 50%;
width: clamp(360px, 44vmin, 520px);
height: clamp(360px, 44vmin, 520px);
margin: -22vmin 0 0 -22vmin;
animation: spin-y-rev 28s linear infinite;
}
.wire-torus .t-ring{
position: absolute; inset:0;
border: 1.4px solid rgba(249,115,22,.5);
border-radius: 50%;
filter: drop-shadow(0 0 8px rgba(249,115,22,.4));
}
.wire-torus .tr1{ transform: rotateX(72deg) rotateY(0deg) }
.wire-torus .tr2{ transform: rotateX(72deg) rotateY(45deg); border-color: rgba(20,184,166,.45); }
.wire-torus .tr3{ transform: rotateX(72deg) rotateY(90deg); border-color: rgba(249,115,22,.5); }
.wire-torus .tr4{ transform: rotateX(72deg) rotateY(135deg); border-color: rgba(234,88,12,.5); }
@keyframes spin-y-rev{
from{ transform: rotateZ(0deg) }
to { transform: rotateZ(-360deg) }
}
.particles{
position: absolute; inset: 0;
}
.particles i{
position: absolute;
left: var(--x); top: var(--y);
width: 4px; height: 4px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px #fff, 0 0 18px var(--violet);
animation: bob 6s ease-in-out infinite;
animation-delay: var(--d);
opacity: .8;
}
@keyframes bob{
0%,100%{ transform: translate(0,0) }
50%{ transform: translate(0, -18px) }
}
/* ── FEATURED SLAB ─────────────────────────────────────── */
.work{ padding: 120px 0 80px; position: relative; }
.slab{
position: relative;
max-width: var(--container);
margin: 0 auto 120px;
padding: 0 var(--gutter);
}
.slab-tilt{
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
transform: translateY(0);
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.2,.6,.1,1);
box-shadow:
0 80px 120px -40px rgba(0,0,0,.75),
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 60px rgba(249,115,22,.10);
background: #06080f;
animation: slab-float 5.5s ease-in-out infinite;
}
@keyframes slab-float{
0%,100%{ transform: translateY(0) }
50% { transform: translateY(-22px) }
}
.slab:hover .slab-tilt{
animation-play-state: paused;
transform: translateY(-10px);
}
.slab-art{
position: relative;
aspect-ratio: 16/7;
width: 100%;
overflow: hidden;
}
.slab-art-1{
background: url('dist/gravton-ai-night.png') center/cover no-repeat;
}
.slab-grid{
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 80%);
}
.slab-mark{
position: absolute; inset: 0;
display: grid; place-items: center;
}
.sm-stack{
display: flex; flex-direction: column;
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(40px, 8vw, 120px);
line-height: .88;
letter-spacing: -0.04em;
color: #fff;
text-align: center;
transform: translateZ(40px);
}
.sm-stack .sm-gradient{
background: var(--grad-primary);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color: transparent;
font-style: italic;
}
.slab-rim{
position: absolute; inset: 0;
pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 200px rgba(0,0,0,.3);
border-radius: inherit;
}
.slab-meta{
position: absolute;
left: 36px; bottom: 32px;
z-index: 3;
max-width: 460px;
padding: 20px 22px;
background: rgba(8,8,14,.55);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
transform: translateZ(80px);
}
.slab-tag{
font-family: var(--font-mono); font-size:10px; letter-spacing:.18em;
color: var(--violet);
}
.slab-name{
margin: 6px 0 6px;
font-size: 28px; font-weight:800; letter-spacing:-0.025em; color:#fff;
}
.slab-blurb{
margin: 0 0 12px;
font-size: 13px; color: var(--fg-3); line-height:1.55;
}
.slab-shadow{
position: absolute;
left: 10%; right: 10%;
bottom: -40px;
height: 80px;
background: radial-gradient(ellipse, rgba(249,115,22,.28), transparent 70%);
filter: blur(30px);
z-index: -1;
}
/* ── PROJECT GRID ──────────────────────────────────────── */
.work-grid{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.proj{
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border: 1px solid var(--line-strong);
backdrop-filter: blur(10px);
transition: transform .5s cubic-bezier(.2,.6,.1,1), border-color .3s, box-shadow .35s;
transform-style: preserve-3d;
}
.proj::after{
content:""; position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 48%, rgba(20,184,166,.18) 50%, rgba(255,255,255,.10) 52%, transparent 70%);
transform: translateX(-110%);
transition: transform 1s cubic-bezier(.2,.6,.1,1);
pointer-events: none;
z-index: 4;
mix-blend-mode: screen;
}
.proj:hover::after{ transform: translateX(110%); }
.proj:hover{
border-color: rgba(249,115,22,.4);
box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 60px rgba(249,115,22,.16);
}
.proj-art{
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-bottom: 1px solid var(--line);
transform-style: preserve-3d;
}
.pa-bg{ position: absolute; inset: 0; }
.pa-bg-a{ background: url('dist/cocomele-cover.png') center/cover no-repeat; }
.pa-bg-b{ background:
radial-gradient(circle at 70% 30%, rgba(20,184,166,.6), transparent 55%),
radial-gradient(circle at 20% 80%, rgba(249,115,22,.55), transparent 55%),
#0a0a18;
}
.pa-bg-c{ background: radial-gradient(circle at 50% 50%, #2a1444, #120822 70%, #050208); }
.pa-bg-d{ background: linear-gradient(135deg, #f4e4c1, #c7a86a 60%, #6a4e1a); }
.pa-bg-e{ background:
radial-gradient(circle at 30% 30%, #2dd4bf, transparent 50%),
radial-gradient(circle at 80% 70%, #14b8a6, transparent 55%),
#0a0418;
}
.pa-bg-f{ background: linear-gradient(135deg, #0a0a14 0%, #1a1430 100%); }
.pa-type{
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-display);
font-size: clamp(40px, 8vw, 110px);
letter-spacing: .04em;
color: #fff;
mix-blend-mode: difference;
text-shadow: 0 0 30px rgba(0,0,0,.4);
transform: translateZ(20px);
}
.pa-type-sm{ font-size: clamp(28px, 5vw, 64px); letter-spacing:.18em; }
.pa-type-big{ font-size: clamp(80px, 14vw, 200px); font-family: var(--font-sans); font-weight:900; letter-spacing:-0.04em; mix-blend-mode: normal; color:#fff; }
.pa-type-vert{
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(32px, 5vw, 56px);
letter-spacing: -0.02em;
align-self: center; justify-self: end;
margin-right: 20px;
mix-blend-mode: normal;
color: #1a0f04;
}
.pa-type-vert span{ display:inline-block; margin: 6px 0; opacity:.4; }
.pa-poster{
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-sans); font-weight: 900;
letter-spacing: -0.05em; color:#fff;
mix-blend-mode: difference;
}
.pa-poster .pp-1{ position:absolute; top:18%; left:8%; font-size: clamp(32px,5vw,60px); }
.pa-poster .pp-2{ font-size: clamp(70px, 11vw, 150px); }
.pa-poster .pp-3{ position:absolute; bottom:14%; right:10%; font-size: clamp(22px,3.6vw,42px); letter-spacing:.18em; font-family: var(--font-mono); font-weight: 500; }
.pa-disc{
position: absolute; left: 50%; top: 50%;
width: 70%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle, #050208 12%, transparent 12.5%),
repeating-radial-gradient(circle, #1a1428 0 2px, #0a0612 2px 4px);
border: 1px solid rgba(20,184,166,.5);
box-shadow: 0 0 60px rgba(20,184,166,.4);
animation: spin-disc 30s linear infinite;
}
.pa-disc::after{
content:""; position:absolute; left:50%; top:50%;
width: 18%; aspect-ratio:1; transform: translate(-50%,-50%);
border-radius:50%;
background: linear-gradient(135deg, #14b8a6, #f97316);
}
@keyframes spin-disc{ to { transform: translate(-50%,-50%) rotate(360deg) } }
.pa-meta{
position: absolute; right: 16px; bottom: 16px;
display: flex; gap: 6px;
}
.pa-meta i{
width: 18px; height: 18px; border-radius: 4px;
background: rgba(255,255,255,.85);
backdrop-filter: blur(4px);
display:inline-block;
}
.pa-meta i:nth-child(2){ background: rgba(20,184,166,.85); }
.pa-meta i:nth-child(3){ background: rgba(249,115,22,.85); }
.pa-meta-r i:nth-child(1){ background: rgba(6,182,212,.85); }
.pa-meta-r i:nth-child(2){ background: rgba(236,72,153,.85); }
.proj-info{
padding: 24px 24px 26px;
display: flex; flex-direction: column; gap: 8px;
}
.proj-tag{
font-family: var(--font-mono); font-size: 10px; letter-spacing:.18em;
color: var(--violet);
}
.proj-info h3{
margin: 4px 0 4px;
font-size: 22px; font-weight:700; letter-spacing:-0.02em; color:#fff;
}
.proj-info p{
margin: 0; font-size: 13px; color: var(--fg-3); line-height: 1.55;
}
.proj-info .link-arrow{ margin-top: 12px; }
.proj-info .link-arrow::before {
content: "";
position: absolute;
inset: 0;
z-index: 10;
}
/* ── ABOUT ─────────────────────────────────────────────── */
.about{ padding: 100px 0; }
.about-grid{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
}
.about-copy{
font-size: 16px; color: var(--fg-2); line-height: 1.65;
text-wrap: pretty;
}
.about-copy p{ margin: 0 0 18px; }
.about-copy .lede-2{
font-size: 20px; line-height: 1.5; color: #fff;
font-weight: 500; letter-spacing: -0.01em;
}
.about-tags{
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 28px;
}
.about-tags span{
font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em;
padding: 7px 12px;
border-radius: var(--r-pill);
background: var(--surface-2);
border: 1px solid var(--line-strong);
color: var(--fg-2);
}
.about-side{
display: flex; flex-direction: column; gap: 16px;
}
.aside-card{
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
backdrop-filter: blur(10px);
padding: 20px 22px 22px;
}
.ac-head{
display: flex; align-items:center; gap:10px;
font-family: var(--font-mono); font-size:11px; letter-spacing:.16em;
color: var(--fg-3); text-transform: uppercase;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--line-strong);
}
.ac-list{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.ac-list li{
display: grid;
grid-template-columns: 100px 1fr;
gap: 12px;
font-size: 13px; color: var(--fg-2);
align-items: baseline;
}
.ac-list .li-k{
font-family: var(--font-mono); font-size:10px; letter-spacing:.16em;
color: var(--fg-4); text-transform: uppercase;
}
.ac-list .li-v{ color: var(--fg); }
/* ── SCROLL-DRIVEN SECTION FLOW (fade in/out + minimal fisheye lens) ── */
@supports (animation-timeline: view()){
.featured, .work, .about, .cta{
animation: section-flow linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
transform-origin: 50% 50%;
/* preserve-3d so the slight rotateX reads cleanly */
transform-style: preserve-3d;
will-change: opacity, transform, filter;
}
/* very subtle for the immediate-post-hero band so it doesn't feel jarring */
.featured{
animation-range: entry 10% exit 90%;
}
}
@keyframes section-flow{
0%{
opacity: 0;
transform: perspective(1400px) rotateX(4deg) scale(.965);
filter: blur(1.2px);
}
18%, 82%{
opacity: 1;
transform: perspective(1400px) rotateX(0deg) scale(1);
filter: blur(0);
}
100%{
opacity: 0;
transform: perspective(1400px) rotateX(-4deg) scale(.965);
filter: blur(1.2px);
}
}
@media (prefers-reduced-motion: reduce){
.featured, .work, .about, .cta{ animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* ── HERO SPLIT ──────────────────────────────────────── */
.hero-inner-portfolio{
text-align: left;
}
.hero-split{
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
width: 100%;
}
.hero-text{
display: flex; flex-direction: column;
align-items: flex-start;
}
.hero-text .lede{
max-width: 52ch;
text-align: left;
margin-left: 0;
}
.hero-text .display{ text-align: left; }
.hero-text .role-row{ justify-content: flex-start; }
.hero-text .hero-actions{ justify-content: flex-start; }
/* photo placeholder — space station-style frame */
.hero-photo{
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
perspective: 1200px;
}
.hp-frame{
position: relative;
width: 100%; height: 100%;
border-radius: 22px;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(249,115,22,.10), transparent 70%),
radial-gradient(ellipse 40% 30% at 30% 70%, rgba(15,118,110,.16), transparent 70%),
linear-gradient(160deg, var(--photo-bg-1), var(--photo-bg-2) 60%, var(--photo-bg-3) 100%);
border: 1px solid var(--line-strong);
overflow: hidden;
box-shadow:
0 60px 120px -40px rgba(0,0,0,.5),
inset 0 0 0 1px rgba(255,255,255,.04),
inset 0 0 80px rgba(249,115,22,.05);
backdrop-filter: blur(10px);
animation: hp-bob 9s ease-in-out infinite;
}
@keyframes hp-bob{
0%,100%{ transform: translateY(0) }
50%{ transform: translateY(-10px) }
}
.hp-glow{
position: absolute; inset: -20px;
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(249,115,22,.18), transparent 70%);
filter: blur(40px);
z-index: -1;
pointer-events: none;
}
.hp-corner{
position: absolute; width: 18px; height: 18px;
border-color: rgba(249,115,22,.55);
border-style: solid; border-width: 0;
}
.hp-tl{ top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.hp-tr{ top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hp-bl{ bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hp-br{ bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.hp-orbit, .hp-orbit-2{
position: absolute;
left: 50%; top: 50%;
width: 78%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border: 1px dashed rgba(249,115,22,.22);
border-radius: 50%;
animation: hp-spin 60s linear infinite;
}
.hp-orbit-2{
width: 58%;
border-color: rgba(249,115,22,.26);
border-style: solid;
animation: hp-spin 40s linear infinite reverse;
}
@keyframes hp-spin{ to { transform: translate(-50%, -50%) rotate(360deg) } }
.hp-planet{
position: absolute;
left: 12%; top: 18%;
width: 14px; height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, #14b8a6, #0f766e);
box-shadow: 0 0 14px rgba(20,184,166,.7);
}
.hp-portrait{
position: absolute;
left: 50%; top: 50%;
width: 50%; aspect-ratio: 1;
transform: translate(-50%, -54%);
display: grid; place-items: center;
color: rgba(255,255,255,.42);
filter: drop-shadow(0 0 20px rgba(249,115,22,.25));
}
.hp-portrait svg{ width: 100%; height: 100%; }
.hp-tag{
position: absolute;
left: 50%; bottom: 22%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
color: var(--fg-3);
padding: 6px 12px;
border: 1px dashed rgba(255,255,255,.18);
border-radius: 999px;
white-space: nowrap;
background: rgba(0,0,0,.3);
backdrop-filter: blur(4px);
}
.hp-stars{
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(1.5px 1.5px at 24% 84%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,.8), transparent 60%),
radial-gradient(1.2px 1.2px at 72% 64%, rgba(20,184,166,.9), transparent 60%),
radial-gradient(1px 1px at 56% 12%, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 40% 48%, rgba(249,115,22,.8), transparent 60%),
radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.7), transparent 60%);
pointer-events: none;
}
.hp-meta{
position: absolute;
left: 16px; right: 16px; bottom: 32px;
display: flex; justify-content: space-between; gap: 16px;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
color: var(--fg-4);
white-space: nowrap;
}
.hp-meta-coord{ color: var(--violet); }
@media (max-width: 980px){
.hero-split{ grid-template-columns: 1fr; }
.hero-photo{ max-width: 360px; aspect-ratio: 1 / 1; margin: 8px auto 0; }
}
/* ── STARFIELD + NEBULA ─────────────────────────────── */
.starfield{
position: absolute; inset: 0;
pointer-events: none;
}
.star{
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: #fff;
opacity: var(--o, .65);
box-shadow: 0 0 4px rgba(255,255,255,.6);
animation: twinkle var(--d, 4s) ease-in-out infinite;
animation-delay: var(--td, 0s);
}
.star.s-violet{ background: #99f6e4; box-shadow: 0 0 6px rgba(20,184,166,.7); }
.star.s-blue { background: #fed7aa; box-shadow: 0 0 6px rgba(249,115,22,.6); }
.star.s-cyan { background: #5eead4; box-shadow: 0 0 6px rgba(6,182,212,.6); }
@keyframes twinkle{
0%,100%{ opacity: var(--o, .65); transform: scale(1); }
50% { opacity: calc(var(--o, .65) * .35); transform: scale(.55); }
}
.nebula{
position: absolute; pointer-events: none;
filter: blur(120px);
border-radius: 50%;
}
.nebula-a{
top: -10vh; left: -15vw;
width: 70vw; height: 70vh;
background:
radial-gradient(circle at 35% 40%, rgba(15,118,110,.22), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(30,58,138,.16), transparent 60%);
animation: neb-drift 32s ease-in-out infinite;
}
.nebula-b{
bottom: -25vh; right: -10vw;
width: 70vw; height: 70vh;
background:
radial-gradient(circle at 40% 50%, rgba(249,115,22,.18), transparent 60%),
radial-gradient(circle at 70% 30%, rgba(234,88,12,.12), transparent 60%);
animation: neb-drift 38s ease-in-out infinite reverse;
}
@keyframes neb-drift{
0%,100%{ transform: translate(0, 0) scale(1) }
50% { transform: translate(40px, -30px) scale(1.06) }
}
/* ── MAGNETIC BUTTON ───────────────────────────────────── */
.magnetic{
transition: transform .25s cubic-bezier(.2,.6,.1,1), background .25s, border-color .25s, box-shadow .25s;
}
/* ── FEATURED ROTATOR (apechain-style) ─────────────────── */
.featured{
position: relative;
padding: 80px 0 100px;
overflow: hidden;
}
.featured-bg{
position: absolute; inset: 0;
pointer-events:none;
}
.ft-rings{
position: absolute; left:50%; top:50%;
width: 180vmin; height: 180vmin;
margin: -90vmin 0 0 -90vmin;
display:grid; place-items:center;
opacity: .45;
}
.ft-rings span{
position:absolute;
border-radius:50%;
border:1px solid rgba(249,115,22,.12);
box-shadow: inset 0 0 60px rgba(249,115,22,.03);
animation: ring-grow 14s ease-in-out infinite;
}
.ft-rings span:nth-child(1){ width: 30%; height:30%; animation-delay: 0s; }
.ft-rings span:nth-child(2){ width: 45%; height:45%; animation-delay: 1.2s; border-color: rgba(20,184,166,.18); }
.ft-rings span:nth-child(3){ width: 60%; height:60%; animation-delay: 2.4s; border-color: rgba(249,115,22,.18); }
.ft-rings span:nth-child(4){ width: 75%; height:75%; animation-delay: 3.6s; }
.ft-rings span:nth-child(5){ width: 90%; height:90%; animation-delay: 4.8s; }
.ft-rings span:nth-child(6){ width: 105%; height:105%; animation-delay: 6s; }
@keyframes ring-grow{
0%,100%{ transform: scale(.95); opacity:.3 }
50%{ transform: scale(1.02); opacity:.7 }
}
.featured-inner{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
position: relative;
}
.featured-head{ text-align:center; margin-bottom: 48px; }
.featured-head .kicker{ display:inline-flex; }
.featured-head .kicker span{ color: var(--violet); }
.featured-title{
margin: 18px 0 0;
font-weight:800;
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.02;
letter-spacing:-0.035em;
color:#fff;
text-wrap: balance;
}
.featured-title em{
font-style:normal;
background: var(--grad-primary);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color: transparent;
}
.ft-stage{
position: relative;
height: clamp(420px, 56vw, 640px);
perspective: 6500px; /* increased to make the 3D perspective flatter and more subtle */
perspective-origin: 50% 50%;
}
.ft-deck{
position: absolute; inset:0;
display:grid; place-items:center;
transform-style: preserve-3d;
}
.ft-slab{
position: absolute;
width: clamp(320px, 70vw, 1000px);
aspect-ratio: 16/9;
border-radius: var(--r-xl);
overflow: visible; /* changed from hidden to support 3D flip cleanly */
transform-style: preserve-3d;
transform: perspective(6500px) rotateY(-14deg) rotateX(6deg) rotateZ(-2deg) translateZ(-80px) scale(.94);
opacity: 0;
filter: blur(8px);
transition: transform .85s cubic-bezier(.2,.6,.1,1), opacity .55s ease, filter .6s ease;
box-shadow:
0 80px 120px -40px rgba(0,0,0,.85),
0 0 0 1px rgba(255,255,255,.06) inset,
0 0 100px rgba(20,184,166,.18);
pointer-events: none;
}
.ft-slab.is-active{
opacity: 1;
filter: blur(0);
transform: perspective(6500px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0) scale(1);
pointer-events: auto;
z-index: 3;
}
.ft-slab.is-active:hover{
transform: perspective(6500px) rotateY(-14deg) rotateX(6deg) rotateZ(-2deg) translateZ(0) scale(1);
}
.ft-slab.is-active.is-flipped:hover{
/* Keep the card flat and scale it up slightly when flipped, so that the brief text is perfectly readable and free of double-rotation distortion */
transform: perspective(6500px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0) scale(1.02);
}
.ft-slab.is-prev{
opacity: 0; /* hidden to avoid clashing with existing card */
filter: blur(8px);
transform: perspective(6500px) rotateY(-22deg) rotateX(8deg) rotateZ(-3deg) translate3d(-18%, 4%, -200px) scale(.8);
z-index: 2;
pointer-events: none;
}
.ft-slab.is-next{
opacity: 0; /* hidden to avoid clashing with existing card */
filter: blur(8px);
transform: perspective(6500px) rotateY(-6deg) rotateX(8deg) rotateZ(-1deg) translate3d(18%, 4%, -200px) scale(.8);
z-index: 2;
pointer-events: none;
}
/* 3D Flip Card Styles */
.ft-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
border-radius: inherit;
}
/* Toggle flip on is-flipped class */
.ft-slab.is-flipped .ft-card-inner {
transform: rotateY(180deg);
}
.ft-card{
position: absolute; inset: 0;
border-radius: inherit;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.ft-card-front {
z-index: 2;
transform: rotateY(0deg);
}
.ft-card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, rgba(16, 16, 28, 0.96), rgba(8, 8, 16, 0.99));
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85);
}
.ftc-back-content {
max-width: 520px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
transform: translateZ(15px); /* Push elements forward with a subtle, premium, flat 3D depth */
transform-style: preserve-3d;
}
.ftc-back-kicker {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.28em;
color: var(--violet);
text-transform: uppercase;
}
.ftc-back-title {
font-family: var(--font-sans);
font-weight: 800;
font-size: clamp(24px, 4vw, 42px);
color: #fff;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.1;
}
.ftc-back-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--fg-3);
text-transform: uppercase;
}
.ftc-back-desc {
font-size: clamp(13px, 2vw, 15px);
line-height: 1.6;
color: var(--fg-2);
margin: 4px 0 8px;
text-wrap: pretty;
}
.ftc-back-specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 8px;
}
.ftc-back-specs span {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: var(--fg-3);
}
.ftc-back-content .btn {
margin-top: 8px;
padding: 10px 20px;
font-size: 12px;
}
.ftc-rim{
position:absolute; inset:0; pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 200px rgba(0,0,0,.45);
border-radius: inherit;
}
.ftc-grid{
position:absolute; inset:0;
background-image:
linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 80%);
}
.ftc-noise{
position:absolute; inset:0;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity:.6;
}
.ft-card-1{
background:
linear-gradient(160deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.60) 100%),
url('gravton-cover.png') center/cover no-repeat;
}
.ft-card-2{
background:
linear-gradient(160deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.60) 100%),
url('dist/cocomele-cover.png') center/cover no-repeat;
}
.ft-card-3{
background:
radial-gradient(ellipse at 30% 70%, #0ea5e9, transparent 60%),
radial-gradient(ellipse at 80% 30%, #0f766e, transparent 60%),
linear-gradient(135deg, #0a1126, #050818);
}
.ft-card-4{
background:
radial-gradient(circle at 50% 50%, #2a1444, transparent 65%),
radial-gradient(circle at 50% 50%, #6d28d9, transparent 30%),
linear-gradient(135deg, #120822, #050208);
}
.ft-card-5{
background:
radial-gradient(ellipse at 30% 30%, #f4e4c1, transparent 65%),
linear-gradient(135deg, #f4e4c1 0%, #c7a86a 60%, #6a4e1a 100%);
}
.ftc-mark{
position:absolute; inset:0;
display:grid; place-items:center;
padding: 6%;
z-index: 2;
}
.ftc-mark-bl{ display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 5% 7%; }
.ftc-stack{
display:flex; flex-direction:column;
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(40px, 8.5vw, 130px);
}
.ftc-mark-bl .ftc-stack {
font-size: clamp(28px, 4.5vw, 60px);
}
.ftc-stack{
line-height: .86;
letter-spacing: -0.045em;
color: #fff;
text-align: center;
text-wrap: balance;
}
.ftc-stack .grad-em{
background: var(--grad-primary);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color: transparent;
font-style: italic;
}
.ftc-warm{
color: #fce7d4;
}
.ftc-warm .grad-em{
background: linear-gradient(135deg, #fef3c7, #f97316 60%, #b45309);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ftc-mark-cream{
color: #1f1408;
}
.ftc-mark-cream .grad-em{
background: linear-gradient(135deg, #3a2010, #6a4e1a);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Inter';
font-style: italic;
}
.ftc-serif{ font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.ftc-line{
margin-top: 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
color: rgba(255,255,255,.7);
text-align: center;
}
.ftc-warm .ftc-line{ color: rgba(254,243,199,.7) }
.ftc-mark-cream .ftc-line{ color: rgba(58,32,16,.6) }
.ftc-mark-poster{
position: absolute; inset: 0; place-items: stretch;
display: grid;
font-family: var(--font-sans); font-weight: 900;
letter-spacing:-0.04em; color: #fff;
padding: 0;
}
.ftc-mark-poster .poster-1{
position: absolute; top: 10%; left: 6%;
font-size: clamp(36px, 5.5vw, 80px);
mix-blend-mode: difference;
}
.ftc-mark-poster .poster-2{
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-size: clamp(90px, 18vw, 280px);
background: linear-gradient(180deg, #fff, #fed7aa 80%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ftc-mark-poster .poster-3{
position: absolute; bottom: 10%; right: 6%;
font-size: clamp(28px, 4vw, 52px);
letter-spacing: .18em;
font-family: var(--font-mono);
font-weight: 500;
}
.ftc-vinyl{
position: absolute; left: 50%; top: 50%;
width: 78%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle, #050208 13%, transparent 13.5%),
repeating-radial-gradient(circle, #1a1428 0 2px, #0a0612 2px 4px);
border: 1px solid rgba(20,184,166,.4);
box-shadow: 0 0 60px rgba(20,184,166,.4);
animation: spin-disc 30s linear infinite;
}
.ftc-vinyl::after{
content:""; position:absolute; left:50%; top:50%;
width: 16%; aspect-ratio:1; transform: translate(-50%,-50%);
border-radius:50%;
background: linear-gradient(135deg, #14b8a6, #f97316);
}
/* arrows */
.ft-arrow{
position: absolute;
top: 50%;
width: 56px; height: 56px;
display: grid; place-items: center;
background: var(--surface-3);
border: 1px solid var(--line-strong);
border-radius: 50%;
color: #fff;
cursor: pointer;
transform: translateY(-50%);
backdrop-filter: blur(12px);
z-index: 10;
transition: background .2s, border-color .2s, transform .2s;
}
.ft-arrow:hover{
background: rgba(249,115,22,.18);
border-color: rgba(249,115,22,.45);
}
.ft-arrow:active{ transform: translateY(-50%) scale(.95); }
.ft-prev{ left: -8px; }
.ft-next{ right: -8px; }
@media (min-width: 980px){
.ft-prev{ left: -28px; }
.ft-next{ right: -28px; }
}
/* bottom row */
.ft-row{
margin-top: 48px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 36px;
align-items: end;
}
.ft-meta{
display: flex; flex-direction: column; gap: 8px;
max-width: 540px;
}
.ft-meta-head{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 10px; letter-spacing:.2em;
color: var(--fg-2); text-transform: uppercase;
}
.ft-flame{
display: inline-grid; place-items: center;
width: 22px; height: 22px;
background: var(--grad-primary);
border-radius: 50%;
color: #fff;
font-size: 11px;
box-shadow: 0 0 12px rgba(20,184,166,.6);
}
.ft-cat{
padding: 5px 10px;
border-radius: 6px;
background: var(--surface-3);
border: 1px solid var(--line-strong);
color: #fff;
white-space: nowrap;
}
.ft-name{
margin: 6px 0 0;
font-size: clamp(28px, 3.6vw, 44px); font-weight: 800;
letter-spacing: -0.03em; color: #fff;
line-height: 1;
transition: opacity .35s ease;
}
.ft-blurb{
margin: 6px 0 14px;
font-size: 14px; color: var(--fg-3); line-height: 1.55;
max-width: 50ch;
transition: opacity .35s ease;
}
.ft-launch{
align-self: flex-start;
padding: 12px 22px !important;
border-radius: var(--r-pill);
border-color: rgba(255,255,255,.22) !important;
}
.ft-fade{ opacity: 0 !important; }
.ft-thumbs{
display: flex; flex-direction: column; gap: 14px;
align-items: flex-end;
}
.ft-see{
font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
color: var(--fg-2); text-transform: uppercase;
display: inline-flex; align-items: center; gap: 8px;
}
.ft-see span{ color: var(--violet); }
.ft-thumb-row{ display: flex; gap: 10px; }
.ft-thumb{
width: 64px; height: 64px;
padding: 0; background: transparent;
border-radius: 12px;
border: 1px solid var(--line-strong);
cursor: pointer;
overflow: hidden;
position: relative;
transition: transform .25s, border-color .25s, box-shadow .25s;
}
.ft-thumb:hover{ transform: translateY(-3px); border-color: rgba(249,115,22,.45); }
.ft-thumb.is-active{
border-color: rgba(249,115,22,.85);
box-shadow: 0 0 0 2px rgba(249,115,22,.3), 0 8px 24px -8px rgba(249,115,22,.5);
}
.thumb-bg{ position: absolute; inset:0; display:block; }
.ftc-cover-overlay{
position:absolute; inset:0;
background: linear-gradient(160deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.55) 100%);
z-index:0;
}
.ftc-cover-overlay ~ .ftc-mark{ z-index:1; }
.thumb-1{ background:
url('dist/gravton-cover.png') center/cover no-repeat;
}
.thumb-2{ background: url('dist/cocomele-cover.png') center/cover no-repeat; }
.thumb-3{ background:
radial-gradient(ellipse at 30% 70%, #0ea5e9, transparent 60%),
radial-gradient(ellipse at 80% 30%, #0f766e, transparent 60%),
#050818;
}
.thumb-4{ background: radial-gradient(circle, #6d28d9 0%, #2a1444 50%, #050208 90%); }
.thumb-5{ background: linear-gradient(135deg, #f4e4c1, #6a4e1a); }
/* ── FOOTER WORDMARK WRAP ─────────────────────────────────── */
.footer-word-wrap{
position: relative;
margin: 60px calc(50% - 50vw) -10px;
overflow: hidden;
padding-top: 12px;
text-align: center;
pointer-events: auto;
}
.footer-word-wrap .footer-word{
margin: 0;
position: relative;
z-index: 2;
cursor: default;
user-select: none;
}
.footer-smoke{
position: absolute; left: 0; right: 0; top: 0; bottom: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 3;
mix-blend-mode: screen;
}
/* ==========================================================
RESPONSIVE SYSTEM mobile → desktop
========================================================== */
/* ── 1280px ── */
@media (max-width: 1280px) {
:root { --gutter: clamp(20px, 3vw, 48px); }
}
/* ── 1100px: tablet landscape ── */
@media (max-width: 1100px) {
.work-grid { grid-template-columns: repeat(2, 1fr); }
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.metric-grid { grid-template-columns: repeat(2, 1fr); }
.metric:nth-child(2) { border-right: 0; }
.metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--line-strong); }
.hc-grid { grid-template-columns: repeat(2, 1fr); }
.footer-cols { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
}
/* ── 980px ── */
@media (max-width: 980px) {
.eco-grid { grid-template-columns: 1fr; }
}
/* ── 768px: tablet + mobile ──────────────────────────────────── */
@media (max-width: 768px) {
/* ── NAV ── */
.hamburger { display: flex; }
.nav-close { display: flex; }
.nav { padding: 0 16px; height: 60px; }
.brand-word { font-size: 15px; }
.nav-cta .ghost-link { display: none; }
.nav-cta .nav-status { display: none; }
.nav-links {
position: fixed;
top: 0; right: -100%;
width: min(300px, 85vw);
height: 100dvh;
background: var(--bg-1);
border-left: 1px solid var(--line-strong);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 28px 48px;
gap: 4px;
z-index: 49;
transition: right .35s cubic-bezier(.2,.6,.1,1);
box-shadow: -20px 0 60px rgba(0,0,0,.6);
overflow-y: auto;
}
.nav-links.open { right: 0; }
.nav-links a {
font-size: 24px;
font-weight: 600;
color: var(--fg);
padding: 18px 0;
width: 100%;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: none;
letter-spacing: -.01em;
}
.nav-links a:last-child { border-bottom: none; }
.nav-links a:hover { color: var(--violet); background: none; }
/* ── HERO: stack vertically, photo full-width on top ── */
.hero {
padding: 70px 0 52px;
min-height: 100dvh;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start; /* prevent centering overflow on mobile */
}
.hero-inner-portfolio {
flex: 1;
display: flex;
flex-direction: column;
padding: 0;
}
/* Photo FIRST on mobile — full bleed */
.hero-split {
display: flex;
flex-direction: column-reverse; /* photo on top, text below */
gap: 0;
width: 100%;
}
.hero-photo {
width: 100%;
max-width: 100%;
aspect-ratio: 4 / 3;
margin: 0;
border-radius: 0;
}
.hp-frame { border-radius: 0; }
.hero-text {
padding: 28px 20px 0;
width: 100%;
}
/* Big display name */
.name-display { font-size: clamp(44px, 11vw, 76px) !important; line-height: .95 !important; }
.display { font-size: clamp(44px, 11vw, 76px); line-height: .95; }
.lede { font-size: 15px; line-height: 1.65; margin-top: 18px; max-width: 100%; }
.hero-actions { margin-top: 24px; gap: 12px; flex-direction: column; align-items: stretch; }
.hero-actions .btn { font-size: 16px; padding: 15px 24px; justify-content: center; width: 100%; }
/* eyebrow */
.eyebrow { margin-bottom: 10px; }
.role-row { margin-top: 10px; }
/* hero metrics card */
.hero-card { margin: 28px 20px 48px; }
.hc-grid { grid-template-columns: repeat(2, 1fr); }
.hc-value { font-size: 20px; }
.hc-label { font-size: 11px; }
/* hide decorative elements */
.logo-strip { display: none; }
.wire-sphere { opacity: .25; }
.wire-torus { opacity: .35; }
/* ── SECTION HEADS ── */
.sec-head { margin-bottom: 36px; padding: 0 20px; }
.sec-title { font-size: clamp(32px, 8vw, 52px); }
.sec-sub { font-size: 15px; }
/* ── FEATURED SLIDER: full screen width ── */
.featured { padding: 56px 0 72px; overflow: hidden; }
.featured-inner { padding: 0; }
.featured-head { padding: 0 20px; margin-bottom: 36px; }
.featured-title { font-size: clamp(30px, 8vw, 52px); }
.ft-stage { height: clamp(320px, 70vw, 480px); }
/* slider card fills viewport */
.ft-slab { width: 92vw !important; aspect-ratio: auto !important; height: clamp(280px, 55vw, 420px); }
.ft-row { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
.ft-meta { padding: 0 20px; margin-top: 24px; }
.ft-name { font-size: clamp(26px, 7vw, 44px); }
.ft-blurb { font-size: 15px; line-height: 1.55; }
.ft-launch { font-size: 14px; padding: 12px 22px; margin-top: 16px; }
.ft-thumbs { padding: 0 20px; margin-top: 16px; }
.ft-thumb-row { gap: 10px; }
.ft-thumb { width: 52px; height: 36px; }
.ftc-back-content { padding: 24px 20px; }
.ftc-back-title { font-size: 28px; }
.ftc-back-desc { font-size: 14px; line-height: 1.5; }
.ftc-back-specs { display: none; }
.ftc-stack { font-size: 18vw; }
/* ── SELECTED WORK ── */
.work { padding: 64px 20px; }
.work-grid { grid-template-columns: 1fr; gap: 20px; }
.slab-tilt { animation: none; }
/* hide text on mobile to avoid covering thumbnail, keep only the button */
.slab-meta { left: 16px; bottom: 16px; max-width: none; padding: 12px 16px; width: auto; right: auto; }
.slab-tag, .slab-name, .slab-blurb { display: none; }
.proj { border-radius: 16px; }
.proj-art { aspect-ratio: 16 / 9; }
.proj-info { padding: 20px 20px 24px; }
.proj-info h3 { font-size: 20px; }
.proj-info p { font-size: 14px; line-height: 1.55; }
/* ── ABOUT ── */
.about { padding: 64px 20px; }
.about-grid { grid-template-columns: 1fr; gap: 32px; }
.about-copy p { font-size: 15px; line-height: 1.7; }
.lede-2 { font-size: 20px; line-height: 1.5; }
.about-tags { gap: 8px; flex-wrap: wrap; }
.about-tags span { font-size: 13px; padding: 7px 14px; }
.aside-card { padding: 20px; }
.ac-list li { font-size: 13px; }
.li-k { font-size: 10px; }
/* ── CTA ── */
.cta { padding: 80px 20px; }
/* FOOTER */
.footer-inner { padding: 48px 20px 64px; }
.footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
.footer-base { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12px; }
.fcol-tag { font-size: 13px; line-height: 1.6; }
.footer-word { font-size: 15vw; }
.socials { gap: 10px; }
.socials a { width: 36px; height: 36px; font-size: 14px; }
}
/* ── 480px: mobile ──────────────────────────────────────── */
@media (max-width: 480px) {
/* NAV */
.nav { padding: 10px 14px 0; }
.brand-word { font-size: 15px; }
/* HERO — tighter on very small screens */
.hero { padding: 100px 16px 52px; }
.display { font-size: clamp(40px, 13.5vw, 60px); }
.lede { font-size: 14px; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn { width: 100%; justify-content: center; font-size: 14px; padding: 14px; }
.hero-card { padding: 14px 14px 16px; margin-bottom: 40px; }
.hc-value { font-size: 16px; }
.hc-cell { padding: 12px 10px 14px; }
.name-display { font-size: 19vw !important; }
/* SECTION HEADS */
.sec-head { padding: 0 16px; margin-bottom: 32px; }
.sec-title { font-size: clamp(26px, 8vw, 40px); }
.sec-sub { font-size: 14px; }
/* FEATURED SLIDER */
.ft-slab { width: 92vw; height: 300px; }
.ft-name { font-size: clamp(20px, 6.5vw, 32px); }
.ft-blurb { font-size: 13px; }
.ft-row, .ft-meta, .ft-thumbs { padding: 0 16px; }
.ft-thumb { width: 44px; height: 30px; }
.ftc-back-content { padding: 16px 14px; }
.ftc-back-title { font-size: 24px; }
.ftc-stack { font-size: 16vw; }
/* WORK */
.work { padding: 60px 16px; }
.slab-meta { left: 12px; bottom: 12px; padding: 10px 14px; right: auto; }
/* ABOUT */
.about { padding: 60px 16px; }
.about-copy p { font-size: 14px; }
.lede-2 { font-size: 16px; }
.aside-card { padding: 16px; }
.ac-list li { grid-template-columns: 1fr; gap: 4px; }
.li-k { width: auto; }
.li-v { font-size: 14px; }
/* CTA */
.cta { padding: 60px 16px; }
.cta-title { font-size: clamp(32px, 10.5vw, 52px); }
.cta-actions .btn { width: 100%; justify-content: center; }
/* FOOTER */
.footer-inner { padding: 36px 16px 56px; }
.footer-cols { grid-template-columns: 1fr; gap: 32px; }
.fcol a { font-size: 13px; }
.footer-word { font-size: 18vw; }
.footer-word-wrap { margin: 40px calc(50% - 50vw) -8px; }
}
/* =========================================================================
LIGHT THEME CONSISTENCY FIXES
========================================================================= */
/* 1. Vignettes (using teal/orange instead of black) */
[data-theme="light"] .slab-rim { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 0 200px rgba(249,115,22,.15) !important; }
[data-theme="light"] .ftc-rim { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 0 200px rgba(20,184,166,.15) !important; }
[data-theme="light"] .contact-box { box-shadow: inset 0 0 120px rgba(20,184,166,.10) !important; background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] .ft-slab .ft-card-back { box-shadow: inset 0 0 120px rgba(249,115,22,.10) !important; }
[data-theme="light"] .hero-card { box-shadow: inset 0 0 120px rgba(20,184,166,.08) !important; }
[data-theme="light"] .proj-rim { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 0 200px rgba(249,115,22,.15) !important; }
/* 2. Buttons */
[data-theme="light"] .btn-primary {
background: var(--bg-1) !important;
color: var(--fg) !important;
border-color: rgba(0,0,0,.1) !important;
}
[data-theme="light"] .btn-primary:hover {
background: var(--surface) !important;
color: var(--fg) !important;
box-shadow: inset 0 0 0 1px var(--teal), 0 0 20px rgba(20,184,166,.2) !important;
}
[data-theme="light"] .btn-outline {
border-color: var(--line-strong) !important;
color: var(--fg) !important;
}
[data-theme="light"] .btn-outline:hover {
background: rgba(0,0,0,.04) !important;
}
/* 3. About Section Tags */
[data-theme="light"] .about-tags span {
background: rgba(0,0,0,.04) !important;
border-color: rgba(0,0,0,.08) !important;
color: var(--fg-2) !important;
}
/* 4. Typography Fixes */
[data-theme="light"] .nav-cta .nav-status {
color: var(--fg) !important;
}
/* 5. Keep dark theme text on dark backgrounds */
[data-theme="light"] .slab-tilt .slab-blurb { color: #8a8a9c !important; }
[data-theme="light"] .slab-tilt .link-arrow { color: #c8c8d4 !important; }