/* ========================================================================
DittoMud — Modern Tech Reskin
Three theme directions toggled via [data-theme] on :
- whisper (极简呼吸 / 米白底)
- twin (主线交织 / 暖白底 + 渐变细线)
- cyber (暗黑赛博 / 深底 + 紫粉青)
======================================================================== */
:root {
--c-indigo: #6C5CE7;
--c-magenta: #A855F7;
--c-cyan: #06B6D4;
--font-display: 'Sora', 'PingFang SC', 'Hiragino Sans GB', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-serif: 'Instrument Serif', 'Times New Roman', serif;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
--motion: 1; /* 0..1 motion intensity multiplier */
}
/* ---------------- Whisper (default) ---------------- */
:root,
[data-theme="whisper"] {
--bg: #f6f4ef; /* warm paper */
--bg-soft: #efece5;
--ink: #14130f;
--ink-soft: #5b5953;
--ink-faint: #a09c93;
--line: rgba(20, 19, 15, 0.10);
--line-strong: rgba(20, 19, 15, 0.22);
--accent: #14130f;
--accent-2: #14130f;
--hero-tint-a: rgba(108, 92, 231, 0.0);
--hero-tint-b: rgba(6, 182, 212, 0.0);
--grid: rgba(20, 19, 15, 0.045);
--logo-invert: 0;
--noise-opacity: 0.04;
}
/* legacy theme blocks kept inert */
[data-theme="twin-disabled"] {
--bg: #fafaf7;
--bg-soft: #f0eee8;
--ink: #15141d;
--ink-soft: #5e5d6c;
--ink-faint: #b3b1bf;
--line: rgba(21, 20, 29, 0.10);
--line-strong: rgba(21, 20, 29, 0.22);
--accent: var(--c-indigo);
--accent-2: var(--c-cyan);
--hero-tint-a: rgba(168, 85, 247, 0.10);
--hero-tint-b: rgba(6, 182, 212, 0.12);
--grid: rgba(21, 20, 29, 0.05);
--logo-invert: 0;
--noise-opacity: 0.05;
}
/* ---------------- Cyber (暗黑赛博) ---------------- */
[data-theme="cyber"] {
--bg: #0a0a0f;
--bg-soft: #12121a;
--ink: #f0eef7;
--ink-soft: #9a98a7;
--ink-faint: #4f4d5a;
--line: rgba(240, 238, 247, 0.08);
--line-strong: rgba(240, 238, 247, 0.18);
--accent: var(--c-magenta);
--accent-2: var(--c-cyan);
--hero-tint-a: rgba(108, 92, 231, 0.20);
--hero-tint-b: rgba(6, 182, 212, 0.18);
--grid: rgba(168, 85, 247, 0.06);
--logo-invert: 1;
--noise-opacity: 0.07;
}
/* ============================================================
Reset & base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
background: var(--bg);
color: var(--ink);
font-family: var(--font-display);
-webkit-font-smoothing: antialiased;
font-feature-settings: "ss01", "cv11";
scroll-behavior: smooth;
transition: background 0.6s var(--ease-out), color 0.6s var(--ease-out);
}
body {
min-height: 100vh;
overflow-x: hidden;
font-size: 16px;
line-height: 1.55;
position: relative;
}
/* Subtle noise overlay (gives "breathing" texture) */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: var(--noise-opacity);
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg); }
/* ============================================================
Layout primitives
============================================================ */
.wrap {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 56px;
}
@media (max-width: 900px) { .wrap { padding: 0 24px; } }
.mono {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.mono-num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Section eyebrow with horizontal rule (matches existing "—— 01 服务" pattern) */
.eyebrow {
display: flex;
align-items: center;
gap: 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
}
.eyebrow .rule {
width: 56px;
height: 1px;
background: currentColor;
opacity: 0.35;
}
.eyebrow .num {
font-weight: 600;
color: var(--ink);
}
/* ============================================================
Top nav
============================================================ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 22px 56px;
display: flex;
align-items: center;
justify-content: space-between;
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
background: color-mix(in oklab, var(--bg) 78%, transparent);
border-bottom: 1px solid transparent;
transition: border-color 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}
.nav.scrolled {
padding: 14px 56px;
border-bottom-color: var(--line);
}
@media (max-width: 900px) {
.nav, .nav.scrolled { padding: 14px 24px; }
}
.brand {
display: flex;
align-items: center;
gap: 10px;
filter: invert(var(--logo-invert));
transition: filter 0.4s var(--ease-out);
}
.brand img { height: 28px; width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: 28px;
position: relative;
}
.nav-indicator {
position: absolute;
left: 0; top: 50%;
transform: translate(0, -50%);
height: 30px;
width: 0;
border-radius: 999px;
background: color-mix(in oklab, var(--ink) 8%, transparent);
border: 1px solid var(--line-strong);
pointer-events: none;
opacity: 0;
transition: transform 0.45s var(--ease-soft), width 0.45s var(--ease-soft), opacity 0.3s var(--ease-out);
z-index: -1;
}
.nav-links:hover .nav-indicator { opacity: 1; }
.nav-link {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-soft);
position: relative;
transition: color 0.3s var(--ease-out);
}
.nav-link::before {
content: "//";
margin-right: 6px;
color: var(--ink-faint);
transition: color 0.3s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::before { color: var(--accent); }
@media (max-width: 1100px) { .nav-links { display: none; } }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch {
display: inline-flex;
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: 3px;
font-family: var(--font-mono);
font-size: 11px;
background: transparent;
}
.lang-switch button {
padding: 5px 12px;
border-radius: 999px;
color: var(--ink-soft);
letter-spacing: 0.06em;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.lang-switch button.active { background: var(--ink); color: var(--bg); }
.theme-pill {
width: 34px; height: 34px;
border-radius: 999px;
border: 1px solid var(--line-strong);
display: grid; place-items: center;
color: var(--ink-soft);
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.theme-pill:hover { color: var(--ink); border-color: var(--line-strong); transform: rotate(20deg); }
.cta-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 18px 9px 20px;
border-radius: 999px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.01em;
position: relative;
overflow: hidden;
transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.cta-pill .arrow { transition: transform 0.4s var(--ease-out); }
.cta-pill::before {
content: "";
position: absolute;
inset: 0;
background: var(--ink);
transform: translateX(-101%);
transition: transform 0.5s var(--ease-soft);
z-index: -1;
}
.cta-pill:hover { color: var(--bg); }
.cta-pill:hover::before { transform: translateX(0); }
.cta-pill:hover .arrow { transform: translate(3px, -3px); }
[data-theme="cyber"] .cta-pill {
border-color: var(--accent);
}
[data-theme="cyber"] .cta-pill::before { background: var(--accent); }
/* ============================================================
Hero
============================================================ */
.hero {
position: relative;
min-height: 100vh;
padding: 140px 0 80px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
/* ============================================================
Hero variants (toggled via [data-hero] on .hero)
default | mega | marquee | split | kinetic
============================================================ */
.hero-mega, .hero-marquee, .hero-split, .hero-kinetic, .hero-editorial, .hero-tech, .hero-monolith, .hero-glass, .hero-neon, .hero-bento, .hero-split-noir, .hero-split-warm, .hero-split-prism, .hero-split-arch, .hero-3d-card, .hero-3d-iso, .hero-3d-tilt, .hero-impact-explode, .hero-impact-portal, .hero-impact-shatter, .hero-quiet-rise, .hero-stroke-reveal, .hero-ghost { display: none; }
.hero[data-hero="mega"] .hero-title,
.hero[data-hero="mega"] .hero-manifesto,
.hero[data-hero="mega"] .hero-meta,
.hero[data-hero="marquee"] .hero-title,
.hero[data-hero="marquee"] .hero-manifesto,
.hero[data-hero="marquee"] .hero-meta,
.hero[data-hero="split"] .hero-title,
.hero[data-hero="split"] .hero-manifesto,
.hero[data-hero="split"] .hero-meta,
.hero[data-hero="kinetic"] .hero-title,
.hero[data-hero="editorial"] .hero-title,
.hero[data-hero="editorial"] .hero-manifesto,
.hero[data-hero="editorial"] .hero-meta,
.hero[data-hero="tech"] .hero-title,
.hero[data-hero="tech"] .hero-manifesto,
.hero[data-hero="tech"] .hero-meta,
.hero[data-hero="monolith"] .hero-title,
.hero[data-hero="monolith"] .hero-manifesto,
.hero[data-hero="monolith"] .hero-meta,
.hero[data-hero="glass"] .hero-title,
.hero[data-hero="glass"] .hero-manifesto,
.hero[data-hero="glass"] .hero-meta,
.hero[data-hero="glass"] .hero-eyebrow,
.hero[data-hero="neon"] .hero-title,
.hero[data-hero="neon"] .hero-manifesto,
.hero[data-hero="neon"] .hero-meta,
.hero[data-hero="neon"] .hero-eyebrow,
.hero[data-hero="bento"] .hero-title,
.hero[data-hero="bento"] .hero-manifesto,
.hero[data-hero="bento"] .hero-meta,
.hero[data-hero="bento"] .hero-eyebrow,
.hero[data-hero="split-noir"] .hero-title,
.hero[data-hero="split-noir"] .hero-manifesto,
.hero[data-hero="split-noir"] .hero-meta,
.hero[data-hero="split-warm"] .hero-title,
.hero[data-hero="split-warm"] .hero-manifesto,
.hero[data-hero="split-warm"] .hero-meta,
.hero[data-hero="split-prism"] .hero-title,
.hero[data-hero="split-prism"] .hero-manifesto,
.hero[data-hero="split-prism"] .hero-meta,
.hero[data-hero="split-arch"] .hero-title,
.hero[data-hero="split-arch"] .hero-manifesto,
.hero[data-hero="split-arch"] .hero-meta,
.hero[data-hero="split-3d-card"] .hero-title,
.hero[data-hero="split-3d-card"] .hero-manifesto,
.hero[data-hero="split-3d-card"] .hero-meta,
.hero[data-hero="split-3d-iso"] .hero-title,
.hero[data-hero="split-3d-iso"] .hero-manifesto,
.hero[data-hero="split-3d-iso"] .hero-meta,
.hero[data-hero="split-3d-tilt"] .hero-title,
.hero[data-hero="split-3d-tilt"] .hero-manifesto,
.hero[data-hero="split-3d-tilt"] .hero-meta,
.hero[data-hero="impact-explode"] .hero-title,
.hero[data-hero="impact-explode"] .hero-manifesto,
.hero[data-hero="impact-explode"] .hero-meta,
.hero[data-hero="impact-explode"] .hero-eyebrow,
.hero[data-hero="impact-portal"] .hero-title,
.hero[data-hero="impact-portal"] .hero-manifesto,
.hero[data-hero="impact-portal"] .hero-meta,
.hero[data-hero="impact-portal"] .hero-eyebrow,
.hero[data-hero="impact-shatter"] .hero-title,
.hero[data-hero="impact-shatter"] .hero-manifesto,
.hero[data-hero="impact-shatter"] .hero-meta,
.hero[data-hero="impact-shatter"] .hero-eyebrow,
.hero[data-hero="split-quiet-rise"] .hero-title,
.hero[data-hero="split-quiet-rise"] .hero-manifesto,
.hero[data-hero="split-quiet-rise"] .hero-meta,
.hero[data-hero="split-quiet-rise"] .hero-eyebrow,
.hero[data-hero="split-stroke"] .hero-title,
.hero[data-hero="split-stroke"] .hero-manifesto,
.hero[data-hero="split-stroke"] .hero-meta,
.hero[data-hero="split-stroke"] .hero-eyebrow,
.hero[data-hero="split-ghost"] .hero-title,
.hero[data-hero="split-ghost"] .hero-manifesto,
.hero[data-hero="split-ghost"] .hero-meta,
.hero[data-hero="split-ghost"] .hero-eyebrow { display: none; }
/* ============================================================
U · QUIET RISE — minimal char-rise, on-brand
============================================================ */
.hero[data-hero="split-quiet-rise"] { padding: 100px 0 60px; }
.hero[data-hero="split-quiet-rise"] .hero-quiet-rise { display: flex; flex-direction: column; gap: 60px; }
.hero-quiet-rise .hqr-top {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: center;
font-size: 11px; letter-spacing: 0.32em;
color: var(--ink-soft);
}
.hero-quiet-rise .hqr-meta { display: inline-flex; align-items: center; gap: 10px; }
.hero-quiet-rise .hqr-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: blink calc(2s / var(--motion, 1)) ease-in-out infinite;
}
.hero-quiet-rise .hqr-rule { height: 1px; background: var(--line); }
.hero-quiet-rise .hqr-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 50px 0;
}
.hero-quiet-rise .hqr-col {
display: flex; flex-direction: column; gap: 16px;
padding: 0 50px;
}
.hero-quiet-rise .hqr-right { text-align: right; align-items: flex-end; }
.hero-quiet-rise .hqr-num {
font-family: var(--font-display); font-weight: 600;
font-size: 14px; color: var(--ink-soft); letter-spacing: 0.06em;
}
.hero-quiet-rise .hqr-label {
font-size: 11px; letter-spacing: 0.32em; color: var(--ink-soft);
}
.hero-quiet-rise .hqr-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(120px, 16vw, 220px);
line-height: 0.9; letter-spacing: -0.05em;
color: var(--ink);
display: flex; gap: 0;
margin: 12px 0;
}
.hero-quiet-rise .hqr-right .hqr-big { justify-content: flex-end; }
.hero-quiet-rise .hqr-mask { display: inline-block; overflow: hidden; }
.hero-quiet-rise .hqr-char {
display: inline-block;
animation: hqr-rise calc(1.2s / var(--motion, 1)) cubic-bezier(0.22, 1, 0.36, 1) backwards;
animation-delay: calc((var(--d) * 0.1s + 0.2s) / var(--motion, 1));
}
@keyframes hqr-rise {
from { transform: translateY(110%); }
to { transform: translateY(0); }
}
.hero-quiet-rise .hqr-en {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(15px, 1.2vw, 19px);
color: var(--ink-soft);
}
.hero-quiet-rise .hqr-mid {
display: flex; flex-direction: column; align-items: center;
padding: 0 24px; gap: 12px;
}
.hero-quiet-rise .hqr-axis { flex: 1; width: 1px; background: var(--line); }
.hero-quiet-rise .hqr-x {
font-family: var(--font-serif); font-style: italic;
font-size: 28px; color: var(--accent);
animation: hqr-rise calc(1.2s / var(--motion, 1)) cubic-bezier(0.22, 1, 0.36, 1) calc(0.5s / var(--motion, 1)) backwards;
}
/* ============================================================
V · STROKE — outline → fill reveal, on-brand
============================================================ */
.hero[data-hero="split-stroke"] { padding: 100px 0 60px; }
.hero[data-hero="split-stroke"] .hero-stroke-reveal { display: flex; flex-direction: column; gap: 60px; }
.hero-stroke-reveal .hsr-top {
display: flex; justify-content: space-between;
font-size: 11px; letter-spacing: 0.32em; color: var(--ink-soft);
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.hero-stroke-reveal .hsr-meta { display: inline-flex; align-items: center; gap: 10px; }
.hero-stroke-reveal .hsr-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: blink calc(2s / var(--motion, 1)) ease-in-out infinite;
}
.hero-stroke-reveal .hsr-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
padding: 30px 0;
}
.hero-stroke-reveal .hsr-col {
display: flex; flex-direction: column; gap: 16px;
padding: 0 50px;
}
.hero-stroke-reveal .hsr-right { text-align: right; align-items: flex-end; }
.hero-stroke-reveal .hsr-num {
font-family: var(--font-display); font-weight: 600;
font-size: 14px; color: var(--ink-soft);
}
.hero-stroke-reveal .hsr-label {
font-size: 11px; letter-spacing: 0.32em; color: var(--ink-soft);
}
.hero-stroke-reveal .hsr-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(140px, 18vw, 240px);
line-height: 0.9; letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1.5px var(--ink);
background-image: linear-gradient(180deg, var(--ink), var(--ink));
background-size: 100% 0%;
background-position: 0 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
animation: hsr-fill calc(2s / var(--motion, 1)) cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s / var(--motion, 1)) forwards;
}
.hero-stroke-reveal .hsr-right .hsr-big {
animation-delay: calc(0.7s / var(--motion, 1));
}
@keyframes hsr-fill {
to { background-size: 100% 100%; -webkit-text-stroke-width: 0; }
}
.hero-stroke-reveal .hsr-en {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(15px, 1.2vw, 19px); color: var(--ink-soft);
}
.hero-stroke-reveal .hsr-mid {
display: flex; flex-direction: column; align-items: center;
padding: 0 24px; gap: 12px;
}
.hero-stroke-reveal .hsr-rule { flex: 1; width: 1px; background: var(--line); min-height: 100px; }
.hero-stroke-reveal .hsr-x {
font-family: var(--font-serif); font-style: italic;
font-size: 32px; color: var(--accent);
}
/* ============================================================
W · GHOST — gigantic outlined english backdrop
============================================================ */
.hero[data-hero="split-ghost"] { padding: 100px 0 60px; position: relative; overflow: hidden; }
.hero[data-hero="split-ghost"] .hero-ghost { display: block; position: relative; }
.hero-ghost .hgh-ghost {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 200%;
pointer-events: none;
z-index: 0;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(180px, 26vw, 380px);
line-height: 0.85;
letter-spacing: -0.04em;
text-align: center;
white-space: nowrap;
}
.hero-ghost .hgh-ghost-line {
color: var(--ink);
opacity: 0.04;
animation: hgh-drift-l calc(40s / var(--motion, 1)) linear infinite;
}
.hero-ghost .hgh-ghost-line.outline {
color: transparent;
-webkit-text-stroke: 1px var(--ink);
opacity: 0.08;
animation: hgh-drift-r calc(50s / var(--motion, 1)) linear infinite;
}
@keyframes hgh-drift-l {
from { transform: translateX(0); }
to { transform: translateX(-25%); }
}
@keyframes hgh-drift-r {
from { transform: translateX(0); }
to { transform: translateX(25%); }
}
.hero-ghost .hgh-top {
position: relative;
z-index: 2;
display: flex; justify-content: space-between;
font-size: 11px; letter-spacing: 0.32em; color: var(--ink-soft);
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
margin-bottom: 60px;
}
.hero-ghost .hgh-meta { display: inline-flex; align-items: center; gap: 10px; }
.hero-ghost .hgh-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: blink calc(2s / var(--motion, 1)) ease-in-out infinite;
}
.hero-ghost .hgh-stage {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
padding: 60px 0;
}
.hero-ghost .hgh-col {
display: flex; flex-direction: column; gap: 14px;
padding: 0 50px;
}
.hero-ghost .hgh-right { text-align: right; align-items: flex-end; }
.hero-ghost .hgh-num {
font-family: var(--font-display); font-weight: 600;
font-size: 14px; color: var(--ink-soft);
}
.hero-ghost .hgh-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(120px, 16vw, 220px);
line-height: 0.9; letter-spacing: -0.05em;
color: var(--ink);
background: var(--bg);
padding: 0 12px;
display: inline-block;
margin: 8px 0;
}
.hero-ghost .hgh-en {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(15px, 1.2vw, 19px); color: var(--ink-soft);
}
.hero-ghost .hgh-mid {
display: grid; place-items: center;
padding: 0 24px;
}
.hero-ghost .hgh-x {
font-family: var(--font-serif); font-style: italic;
font-size: 60px; color: var(--accent);
background: var(--bg);
padding: 8px 16px;
}
@media (max-width: 880px) {
.hero-quiet-rise .hqr-stage,
.hero-stroke-reveal .hsr-stage,
.hero-ghost .hgh-stage { grid-template-columns: 1fr; gap: 32px; }
.hero-quiet-rise .hqr-mid,
.hero-stroke-reveal .hsr-mid { flex-direction: row; padding: 16px 0; }
.hero-quiet-rise .hqr-axis,
.hero-stroke-reveal .hsr-rule { width: auto; height: 1px; min-height: 0; }
.hero-quiet-rise .hqr-right,
.hero-stroke-reveal .hsr-right,
.hero-ghost .hgh-right { text-align: left; align-items: flex-start; }
}
/* ============================================================
R · IMPACT EXPLODE — character explosion + shockwaves
============================================================ */
.hero[data-hero="impact-explode"] { padding: 0; min-height: 100vh; background: #08070d; color: #fff; overflow: hidden; }
.hero[data-hero="impact-explode"] .hero-bg,
.hero[data-hero="impact-explode"] .hero-canvas { display: none; }
.hero[data-hero="impact-explode"] .hero-impact-explode { display: block; position: relative; min-height: 100vh; }
.hero-impact-explode .hie-bg {
position: absolute; inset: 0;
display: grid; place-items: center;
pointer-events: none;
overflow: hidden;
}
.hero-impact-explode .hie-shockwave {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
border: 2px solid rgba(255,77,109,0.8);
animation: hie-wave calc(2.5s / var(--motion, 1)) ease-out infinite;
}
.hero-impact-explode .hie-shockwave.d2 { animation-delay: calc(0.8s / var(--motion, 1)); border-color: rgba(255,213,77,0.7); }
.hero-impact-explode .hie-shockwave.d3 { animation-delay: calc(1.6s / var(--motion, 1)); border-color: rgba(77,213,255,0.6); }
@keyframes hie-wave {
0% { transform: scale(0.1); opacity: 0; border-width: 6px; }
20% { opacity: 1; }
100% { transform: scale(8); opacity: 0; border-width: 1px; }
}
.hero-impact-explode .hie-stage {
position: relative;
display: flex; flex-direction: column; justify-content: center; align-items: center;
min-height: 100vh;
text-align: center;
gap: 28px;
}
.hero-impact-explode .hie-meta {
font-size: 12px; letter-spacing: 0.4em; color: #ff4d6d;
display: inline-flex; align-items: center; gap: 12px;
text-shadow: 0 0 20px rgba(255,77,109,0.6);
animation: hie-meta-in calc(0.8s / var(--motion, 1)) ease-out backwards;
}
@keyframes hie-meta-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-impact-explode .hie-dot {
width: 10px; height: 10px; border-radius: 50%; background: #ff4d6d;
box-shadow: 0 0 16px #ff4d6d;
animation: blink calc(1s / var(--motion, 1)) ease-in-out infinite;
}
.hero-impact-explode .hie-word {
display: flex; gap: 0.05em;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(160px, 24vw, 380px);
line-height: 0.85; letter-spacing: -0.06em;
color: #fff;
filter: drop-shadow(0 0 60px rgba(255,77,109,0.4));
}
.hero-impact-explode .hie-char {
display: inline-block;
animation: hie-char-impact calc(1.4s / var(--motion, 1)) cubic-bezier(0.16, 1, 0.3, 1) backwards;
animation-delay: calc((var(--i) * 0.12s + 0.3s) / var(--motion, 1));
background: linear-gradient(180deg, #fff 0%, #ff4d6d 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-impact-explode .hie-char:nth-child(2) {
background: linear-gradient(180deg, #fff 0%, #ffd54d 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes hie-char-impact {
0% { transform: scale(8) rotate(-15deg); opacity: 0; filter: blur(20px); }
60% { opacity: 1; filter: blur(0); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.hero-impact-explode .hie-en {
font-size: 14px; letter-spacing: 0.5em; color: rgba(255,255,255,0.7);
animation: hie-meta-in calc(0.8s / var(--motion, 1)) ease-out calc(0.8s / var(--motion, 1)) backwards;
}
.hero-impact-explode .hie-particles {
position: absolute; inset: 0;
display: grid; place-items: center;
pointer-events: none;
}
.hero-impact-explode .hie-particles span {
position: absolute;
width: 6px; height: 6px;
background: #ff4d6d;
border-radius: 50%;
box-shadow: 0 0 12px currentColor;
color: #ff4d6d;
animation: hie-particle calc(2s / var(--motion, 1)) cubic-bezier(0.16, 1, 0.3, 1) infinite;
animation-delay: var(--d);
}
.hero-impact-explode .hie-particles span:nth-child(3n) { color: #ffd54d; background: #ffd54d; }
.hero-impact-explode .hie-particles span:nth-child(3n+1) { color: #4dd5ff; background: #4dd5ff; }
@keyframes hie-particle {
0% { transform: translate(0,0) scale(0); opacity: 0; }
20% { transform: translate(calc(var(--x) * 0.2), calc(var(--y) * 0.2)) scale(1.5); opacity: 1; }
100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
}
/* ============================================================
S · IMPACT PORTAL — tunnel of rings
============================================================ */
.hero[data-hero="impact-portal"] { padding: 0; min-height: 100vh; background: radial-gradient(ellipse at center, #1a0033 0%, #050008 70%); color: #fff; overflow: hidden; perspective: 1200px; }
.hero[data-hero="impact-portal"] .hero-bg,
.hero[data-hero="impact-portal"] .hero-canvas { display: none; }
.hero[data-hero="impact-portal"] .hero-impact-portal { display: block; position: relative; min-height: 100vh; }
.hero-impact-portal .hip-tunnel {
position: absolute; inset: 0;
display: grid; place-items: center;
transform-style: preserve-3d;
pointer-events: none;
}
.hero-impact-portal .hip-ring {
position: absolute;
width: 80vmin; height: 80vmin;
border-radius: 50%;
border: 2px solid;
animation: hip-ring-fly calc(4s / var(--motion, 1)) linear infinite;
animation-delay: calc(var(--i) * -0.4s / var(--motion, 1));
border-color: hsl(calc(var(--i) * 36deg + 280deg), 90%, 65%);
box-shadow: 0 0 40px currentColor;
color: hsl(calc(var(--i) * 36deg + 280deg), 90%, 65%);
opacity: 0;
}
@keyframes hip-ring-fly {
0% { transform: translateZ(-2000px) scale(0.2); opacity: 0; }
20% { opacity: 0.9; }
100% { transform: translateZ(800px) scale(2); opacity: 0; }
}
.hero-impact-portal .hip-stage {
position: relative;
display: flex; flex-direction: column; justify-content: center; align-items: center;
min-height: 100vh;
text-align: center;
gap: 30px;
z-index: 2;
}
.hero-impact-portal .hip-meta {
font-size: 12px; letter-spacing: 0.4em; color: #ff77e9;
display: inline-flex; align-items: center; gap: 12px;
text-shadow: 0 0 20px rgba(255,119,233,0.6);
}
.hero-impact-portal .hip-dot {
width: 10px; height: 10px; border-radius: 50%; background: #ff77e9;
box-shadow: 0 0 16px #ff77e9;
animation: blink calc(1s / var(--motion, 1)) ease-in-out infinite;
}
.hero-impact-portal .hip-title {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(80px, 14vw, 220px);
line-height: 0.9; letter-spacing: -0.05em;
margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.hero-impact-portal .hip-line {
display: block;
background: linear-gradient(180deg, #fff, #b8a8ff);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: hip-pulse calc(3s / var(--motion, 1)) ease-in-out infinite alternate;
}
.hero-impact-portal .hip-glow {
background: linear-gradient(180deg, #ff77e9, #77c8ff);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 30px rgba(255,119,233,0.7));
animation-delay: calc(0.5s / var(--motion, 1));
}
@keyframes hip-pulse {
from { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255,119,233,0.4)); }
to { transform: scale(1.04); filter: drop-shadow(0 0 50px rgba(255,119,233,0.9)); }
}
.hero-impact-portal .hip-en {
font-size: 14px; letter-spacing: 0.5em; color: rgba(255,255,255,0.6);
}
/* ============================================================
T · IMPACT SHATTER — shattered, jagged glitch
============================================================ */
.hero[data-hero="impact-shatter"] { padding: 0; min-height: 100vh; background: #f6f4ef; color: #14130f; overflow: hidden; }
.hero[data-hero="impact-shatter"] .hero-bg,
.hero[data-hero="impact-shatter"] .hero-canvas { display: none; }
.hero[data-hero="impact-shatter"] .hero-impact-shatter { display: block; position: relative; min-height: 100vh; }
.hero-impact-shatter .hsh-bg {
position: absolute; inset: 0;
color: #14130f;
pointer-events: none;
}
.hero-impact-shatter .hsh-bolts {
width: 100%; height: 100%;
animation: hsh-flicker calc(0.15s / var(--motion, 1)) steps(2) infinite;
}
@keyframes hsh-flicker {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.hero-impact-shatter .hsh-stage {
position: relative;
display: flex; flex-direction: column; justify-content: center; align-items: center;
min-height: 100vh;
text-align: center;
gap: 36px;
z-index: 2;
}
.hero-impact-shatter .hsh-meta {
font-size: 12px; letter-spacing: 0.4em; color: #14130f;
display: inline-flex; align-items: center; gap: 12px;
background: #ffea00;
padding: 8px 18px;
border: 2px solid #14130f;
box-shadow: 4px 4px 0 #14130f;
font-weight: 600;
}
.hero-impact-shatter .hsh-dot {
width: 10px; height: 10px; background: #14130f;
animation: blink calc(0.8s / var(--motion, 1)) ease-in-out infinite;
}
.hero-impact-shatter .hsh-title { margin: 0; }
.hero-impact-shatter .hsh-word {
display: inline-flex; gap: 0.04em;
font-family: var(--font-display); font-weight: 900;
font-size: clamp(180px, 28vw, 440px);
line-height: 0.82; letter-spacing: -0.06em;
}
.hero-impact-shatter .hsh-shard {
display: inline-block;
position: relative;
animation: hsh-shard-impact calc(0.6s / var(--motion, 1)) cubic-bezier(0.5, -0.6, 0.5, 1.5) backwards, hsh-shard-jitter calc(2.4s / var(--motion, 1)) steps(8) infinite calc(0.6s / var(--motion, 1));
animation-delay: calc((var(--n) * 0.1s) / var(--motion, 1)), calc((var(--n) * 0.1s + 0.6s) / var(--motion, 1));
text-shadow: -3px 0 #ff0040, 3px 0 #00d4ff;
}
@keyframes hsh-shard-impact {
0% { transform: translate(0, -100vh) rotate(-30deg) scale(0.3); opacity: 0; }
60% { transform: translate(0, 20px) rotate(8deg) scale(1.1); opacity: 1; }
100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
@keyframes hsh-shard-jitter {
0%, 88%, 100% { transform: translate(0,0); text-shadow: -3px 0 #ff0040, 3px 0 #00d4ff; }
90% { transform: translate(-3px, 1px); text-shadow: -6px 0 #ff0040, 4px 0 #00d4ff; }
92% { transform: translate(2px, -1px); text-shadow: -2px 0 #ff0040, 5px 0 #00d4ff; }
94% { transform: translate(-1px, 2px); }
}
.hero-impact-shatter .hsh-sub {
font-size: 14px; letter-spacing: 0.4em;
color: #14130f;
background: #14130f;
color: #ffea00;
padding: 10px 20px;
}
.hero-impact-shatter .hsh-cracks {
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
pointer-events: none;
}
.hero-impact-shatter .hsh-crack {
position: absolute;
top: -1px; left: 0;
width: 50vw; height: 2px;
background: linear-gradient(90deg, #14130f 0%, #14130f 30%, transparent 100%);
transform-origin: left center;
transform: rotate(var(--r)) scaleX(0);
animation: hsh-crack-grow calc(0.6s / var(--motion, 1)) ease-out forwards;
animation-delay: calc(0.3s / var(--motion, 1));
}
@keyframes hsh-crack-grow {
to { transform: rotate(var(--r)) scaleX(1); }
}
@media (max-width: 880px) {
.hero-impact-explode .hie-word { font-size: clamp(110px, 32vw, 200px); }
.hero-impact-portal .hip-title { font-size: clamp(60px, 18vw, 140px); }
.hero-impact-shatter .hsh-word { font-size: clamp(120px, 32vw, 260px); }
}
/* ============================================================
O · 3D CARDS — floating layered cards
============================================================ */
.hero[data-hero="split-3d-card"] { padding: 100px 0 80px; perspective: 1800px; }
.hero[data-hero="split-3d-card"] .hero-3d-card { display: block; }
.hero-3d-card .h3c-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: center;
transform-style: preserve-3d;
min-height: 60vh;
}
.hero-3d-card .h3c-col {
position: relative;
height: 460px;
transform-style: preserve-3d;
padding: 0 30px;
}
.hero-3d-card .h3c-left { perspective-origin: 75% 50%; }
.hero-3d-card .h3c-right { perspective-origin: 25% 50%; }
.hero-3d-card .h3c-card {
position: absolute;
inset: 0;
border-radius: 18px;
padding: 32px;
background: var(--bg-soft, #f6f4ef);
border: 1px solid var(--line-strong, rgba(0,0,0,0.12));
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18), 0 8px 24px -8px rgba(0,0,0,0.1);
transition: transform 0.6s var(--ease-soft);
}
.hero-3d-card .h3c-card-back {
transform: translate3d(40px, 30px, -120px) rotateY(-12deg);
opacity: 0.55;
background: transparent;
border-style: dashed;
}
.hero-3d-card .h3c-card-mid {
transform: translate3d(20px, 14px, -60px) rotateY(-7deg);
opacity: 0.85;
background: var(--bg, #fff);
}
.hero-3d-card .h3c-card-front {
transform: rotateY(-3deg);
display: flex; flex-direction: column; justify-content: center; gap: 14px;
background: var(--bg, #fff);
}
.hero-3d-card .h3c-right .h3c-card-back { transform: translate3d(-40px, 30px, -120px) rotateY(12deg); }
.hero-3d-card .h3c-right .h3c-card-mid { transform: translate3d(-20px, 14px, -60px) rotateY(7deg); }
.hero-3d-card .h3c-right .h3c-card-front { transform: rotateY(3deg); align-items: flex-end; text-align: right; }
.hero-3d-card .h3c-col:hover .h3c-card-front { transform: rotateY(-7deg) translateZ(20px); }
.hero-3d-card .h3c-right:hover .h3c-card-front { transform: rotateY(7deg) translateZ(20px); }
.hero-3d-card .h3c-card-tag {
font-size: 11px; letter-spacing: 0.32em; color: var(--ink-soft, rgba(0,0,0,0.5));
}
.hero-3d-card .h3c-card-num {
font-family: var(--font-display); font-weight: 700;
font-size: 64px; letter-spacing: -0.04em; color: var(--ink, #14130f);
line-height: 1;
}
.hero-3d-card .h3c-card-label {
font-size: 11px; letter-spacing: 0.32em; color: var(--ink-soft, rgba(0,0,0,0.5));
margin-top: 8px;
}
.hero-3d-card .h3c-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(80px, 11vw, 160px); line-height: 0.9; letter-spacing: -0.04em;
color: var(--ink, #14130f);
}
.hero-3d-card .h3c-en {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(16px, 1.4vw, 22px); color: var(--ink-soft, rgba(0,0,0,0.6));
}
.hero-3d-card .h3c-mid {
display: grid; place-items: center;
transform: translateZ(60px);
}
.hero-3d-card .h3c-x {
font-family: var(--font-serif); font-style: italic;
font-size: 100px; color: var(--accent, #b8472b);
text-shadow: 0 20px 40px rgba(0,0,0,0.15);
animation: h3c-float calc(4s / var(--motion, 1)) ease-in-out infinite alternate;
}
@keyframes h3c-float {
from { transform: translateY(-8px) rotate(-3deg); }
to { transform: translateY(8px) rotate(3deg); }
}
/* ============================================================
P · 3D ISO — isometric cubes
============================================================ */
.hero[data-hero="split-3d-iso"] { padding: 100px 0 80px; background: #f0ede5; color: #1a1814; }
.hero[data-hero="split-3d-iso"] .hero-bg,
.hero[data-hero="split-3d-iso"] .hero-canvas { display: none; }
.hero[data-hero="split-3d-iso"] .hero-3d-iso { display: block; }
.hero-3d-iso .h3i-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: center;
padding: 60px 30px;
}
.hero-3d-iso .h3i-col {
display: flex; flex-direction: column; gap: 20px;
padding: 0 40px;
}
.hero-3d-iso .h3i-right { text-align: right; align-items: flex-end; }
.hero-3d-iso .h3i-cube {
width: 140px; height: 140px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-45deg);
animation: h3i-spin calc(20s / var(--motion, 1)) linear infinite;
}
.hero-3d-iso .h3i-cube-b {
animation-direction: reverse;
}
@keyframes h3i-spin {
from { transform: rotateX(-30deg) rotateY(-45deg); }
to { transform: rotateX(-30deg) rotateY(315deg); }
}
.hero-3d-iso .h3i-face {
position: absolute;
width: 140px; height: 140px;
border: 1px solid rgba(26,24,20,0.85);
}
.hero-3d-iso .h3i-face.top {
background: #e63946;
transform: rotateX(90deg) translateZ(70px);
}
.hero-3d-iso .h3i-face.left {
background: #c9272f;
transform: rotateY(-90deg) translateZ(70px);
}
.hero-3d-iso .h3i-face.right {
background: #f5b8bc;
transform: translateZ(70px);
}
.hero-3d-iso .h3i-cube-b .h3i-face.top { background: #1a1814; }
.hero-3d-iso .h3i-cube-b .h3i-face.left { background: #3a3530; }
.hero-3d-iso .h3i-cube-b .h3i-face.right { background: #6a625a; }
.hero-3d-iso .h3i-meta {
font-size: 11px; letter-spacing: 0.32em; color: rgba(26,24,20,0.6);
margin-top: 24px;
}
.hero-3d-iso .h3i-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(110px, 16vw, 220px); line-height: 0.88;
letter-spacing: -0.05em; color: #1a1814;
}
.hero-3d-iso .h3i-en {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(16px, 1.4vw, 22px); color: rgba(26,24,20,0.6);
}
.hero-3d-iso .h3i-axis {
display: flex; flex-direction: column; align-items: center;
padding: 0 30px; gap: 16px;
height: 100%;
}
.hero-3d-iso .h3i-axis-line { flex: 1; width: 1px; background: rgba(26,24,20,0.2); }
.hero-3d-iso .h3i-axis-x {
font-family: var(--font-display); font-weight: 300;
font-size: 60px; color: #e63946; line-height: 1;
}
/* ============================================================
Q · 3D TILT — tilted depth space
============================================================ */
.hero[data-hero="split-3d-tilt"] { padding: 120px 0 100px; background: #08070a; color: #fafafa; perspective: 1400px; overflow: hidden; }
.hero[data-hero="split-3d-tilt"] .hero-bg,
.hero[data-hero="split-3d-tilt"] .hero-canvas { display: none; }
.hero[data-hero="split-3d-tilt"] .hero-3d-tilt { display: block; position: relative; }
.hero-3d-tilt .h3t-floor {
position: absolute;
bottom: -200px; left: -10%; right: -10%;
height: 600px;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 60px 60px;
transform: perspective(800px) rotateX(70deg);
transform-origin: top center;
pointer-events: none;
mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}
.hero-3d-tilt .h3t-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
transform-style: preserve-3d;
padding: 40px 0;
}
.hero-3d-tilt .h3t-col {
position: relative;
padding: 0 40px;
transform-style: preserve-3d;
}
.hero-3d-tilt .h3t-left { transform: rotateY(18deg) translateZ(-20px); }
.hero-3d-tilt .h3t-right { transform: rotateY(-18deg) translateZ(-20px); }
.hero-3d-tilt .h3t-shadow {
position: absolute;
inset: 20px 30px -20px 30px;
background: radial-gradient(ellipse at center bottom, rgba(255,61,119,0.4), transparent 70%);
filter: blur(40px);
z-index: 0;
}
.hero-3d-tilt .h3t-right .h3t-shadow {
background: radial-gradient(ellipse at center bottom, rgba(61,208,255,0.4), transparent 70%);
}
.hero-3d-tilt .h3t-plate {
position: relative;
z-index: 1;
padding: 40px 36px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex; flex-direction: column; gap: 14px;
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
}
.hero-3d-tilt .h3t-num {
font-family: var(--font-display); font-weight: 700;
font-size: 48px; line-height: 1;
background: linear-gradient(135deg, #ff3d77, #ffd03d);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-3d-tilt .h3t-right .h3t-num {
background: linear-gradient(135deg, #3dd0ff, #b73dff);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-3d-tilt .h3t-label {
font-size: 11px; letter-spacing: 0.32em; color: rgba(255,255,255,0.6);
}
.hero-3d-tilt .h3t-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(96px, 13vw, 180px); line-height: 0.9;
letter-spacing: -0.04em; color: #fff;
text-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.hero-3d-tilt .h3t-en {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(16px, 1.4vw, 22px); color: rgba(255,255,255,0.65);
}
.hero-3d-tilt .h3t-mid {
position: relative;
display: grid; place-items: center;
padding: 0 30px;
transform: translateZ(80px);
}
.hero-3d-tilt .h3t-x {
position: relative;
font-family: var(--font-serif); font-style: italic;
font-size: 120px; line-height: 1;
background: linear-gradient(135deg, #ff3d77, #3dd0ff);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 2;
animation: h3t-float calc(4s / var(--motion, 1)) ease-in-out infinite alternate;
}
.hero-3d-tilt .h3t-x-shadow {
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(255,61,119,0.6), transparent 60%);
filter: blur(40px);
z-index: 1;
animation: h3t-pulse calc(3s / var(--motion, 1)) ease-in-out infinite alternate;
}
@keyframes h3t-float {
from { transform: translateY(-10px) rotate(-4deg); }
to { transform: translateY(10px) rotate(4deg); }
}
@keyframes h3t-pulse {
from { opacity: 0.4; transform: scale(0.9); }
to { opacity: 0.8; transform: scale(1.2); }
}
@media (max-width: 880px) {
.hero-3d-card .h3c-stage,
.hero-3d-iso .h3i-stage,
.hero-3d-tilt .h3t-stage { grid-template-columns: 1fr; gap: 32px; }
.hero-3d-card .h3c-col { height: 360px; }
.hero-3d-iso .h3i-axis { flex-direction: row; padding: 16px 0; }
.hero-3d-iso .h3i-axis-line { width: auto; height: 1px; }
.hero-3d-iso .h3i-right,
.hero-3d-tilt .h3t-right { text-align: left; align-items: flex-start; transform: none; }
.hero-3d-tilt .h3t-left { transform: none; }
.hero-3d-card .h3c-right .h3c-card-front { align-items: flex-start; text-align: left; }
}
/* ============================================================
K · SPLIT NOIR — black & white cinema
============================================================ */
.hero[data-hero="split-noir"] { padding: 80px 0 60px; background: #0a0a0a; color: #f0ede5; }
.hero[data-hero="split-noir"] .hero-bg,
.hero[data-hero="split-noir"] .hero-canvas { display: none; }
.hero[data-hero="split-noir"] .hero-split-noir { display: flex; flex-direction: column; gap: 40px; position: relative; }
.hero-split-noir .hsn-grain {
position: absolute; inset: -20px;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.08; pointer-events: none; mix-blend-mode: overlay;
}
.hero-split-noir .hsn-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: stretch;
border-top: 1px solid rgba(240,237,229,0.2);
border-bottom: 1px solid rgba(240,237,229,0.2);
padding: 60px 0;
}
.hero-split-noir .hsn-col { padding: 0 56px; display: flex; flex-direction: column; gap: 20px; }
.hero-split-noir .hsn-right { text-align: right; align-items: flex-end; }
.hero-split-noir .hsn-meta {
font-size: 11px; letter-spacing: 0.32em; color: rgba(240,237,229,0.6);
display: inline-flex; align-items: center; gap: 10px;
}
.hero-split-noir .hsn-dot {
width: 8px; height: 8px; border-radius: 50%; background: #e63946;
box-shadow: 0 0 10px #e63946;
animation: blink calc(1.6s / var(--motion, 1)) ease-in-out infinite;
}
.hero-split-noir .hsn-big {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(120px, 18vw, 260px);
line-height: 0.85;
letter-spacing: -0.05em;
color: #f0ede5;
}
.hero-split-noir .hsn-italic {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(20px, 2vw, 32px);
color: rgba(240,237,229,0.8);
font-weight: 400;
}
.hero-split-noir .hsn-foot {
font-size: 11px; letter-spacing: 0.4em; color: rgba(240,237,229,0.4);
}
.hero-split-noir .hsn-divider {
display: flex; flex-direction: column; align-items: center; gap: 20px;
padding: 0 24px;
}
.hero-split-noir .hsn-line { flex: 1; width: 1px; background: rgba(240,237,229,0.2); }
.hero-split-noir .hsn-x {
font-family: var(--font-serif); font-style: italic;
font-size: 80px; line-height: 1;
color: #e63946;
text-shadow: 0 0 30px rgba(230,57,70,0.6);
}
.hero-split-noir .hsn-tape {
display: flex; gap: 24px; justify-content: center;
font-size: 11px; letter-spacing: 0.3em; color: rgba(240,237,229,0.5);
}
/* ============================================================
L · SPLIT WARM — beige stationery
============================================================ */
.hero[data-hero="split-warm"] { padding: 80px 0 60px; background: #f3ede0; color: #2b2620; }
.hero[data-hero="split-warm"] .hero-bg,
.hero[data-hero="split-warm"] .hero-canvas { display: none; }
.hero[data-hero="split-warm"] .hero-split-warm { display: block; }
.hero-split-warm .hsw-stage {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
border: 1px solid rgba(43,38,32,0.18);
border-radius: 4px;
padding: 80px 60px;
position: relative;
background:
repeating-linear-gradient(0deg, transparent 0, transparent 40px, rgba(43,38,32,0.04) 40px, rgba(43,38,32,0.04) 41px),
#f3ede0;
}
.hero-split-warm .hsw-col { display: flex; flex-direction: column; gap: 16px; padding: 0 30px; }
.hero-split-warm .hsw-right { text-align: right; align-items: flex-end; }
.hero-split-warm .hsw-stamp {
display: inline-flex; align-items: baseline; gap: 12px;
border: 1px solid rgba(43,38,32,0.4);
padding: 8px 14px; border-radius: 2px;
width: max-content;
}
.hero-split-warm .hsw-stamp-num {
font-family: var(--font-serif); font-weight: 700;
font-size: 22px; color: #b8472b;
}
.hero-split-warm .hsw-stamp-tag {
font-size: 10px; letter-spacing: 0.3em; color: rgba(43,38,32,0.7);
}
.hero-split-warm .hsw-big {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(100px, 14vw, 200px);
line-height: 0.9;
letter-spacing: -0.02em;
color: #2b2620;
margin-top: 8px;
}
.hero-split-warm .hsw-period { color: #b8472b; }
.hero-split-warm .hsw-italic {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(18px, 1.6vw, 26px);
color: rgba(43,38,32,0.65);
font-weight: 400;
}
.hero-split-warm .hsw-rule {
width: 60px; height: 1px; background: rgba(43,38,32,0.3); margin: 4px 0;
}
.hero-split-warm .hsw-right .hsw-rule,
.hero-split-warm .hsw-right .hsw-stamp { margin-left: auto; }
.hero-split-warm .hsw-note {
font-size: 11px; letter-spacing: 0.2em; color: rgba(43,38,32,0.55);
}
.hero-split-warm .hsw-seal {
position: relative;
width: 140px; height: 140px;
display: grid; place-items: center;
color: #b8472b;
}
.hero-split-warm .hsw-seal-svg {
position: absolute; inset: 0; margin: auto;
animation: hsw-spin calc(40s / var(--motion, 1)) linear infinite;
}
@keyframes hsw-spin { to { transform: rotate(360deg); } }
.hero-split-warm .hsw-seal-x {
font-family: var(--font-serif); font-style: italic;
font-size: 40px; color: #b8472b;
}
/* ============================================================
M · SPLIT PRISM — light spectrum
============================================================ */
.hero[data-hero="split-prism"] { padding: 80px 0 60px; background: #08080c; color: #fff; overflow: hidden; }
.hero[data-hero="split-prism"] .hero-bg,
.hero[data-hero="split-prism"] .hero-canvas { display: none; }
.hero[data-hero="split-prism"] .hero-split-prism { display: block; position: relative; }
.hero-split-prism .hsp-bg {
position: absolute; inset: -100px; pointer-events: none;
overflow: hidden;
}
.hero-split-prism .hsp-beam {
position: absolute;
width: 30vw; height: 80vh;
top: 50%; left: 50%;
transform-origin: top center;
filter: blur(60px);
opacity: 0.5;
animation: hsp-sway calc(14s / var(--motion, 1)) ease-in-out infinite alternate;
}
.hero-split-prism .hsp-beam.a {
background: linear-gradient(180deg, #ff3d77, transparent);
transform: translate(-50%, -10%) rotate(-25deg);
}
.hero-split-prism .hsp-beam.b {
background: linear-gradient(180deg, #ffd03d, transparent);
transform: translate(-50%, -10%) rotate(0deg);
animation-delay: -5s;
}
.hero-split-prism .hsp-beam.c {
background: linear-gradient(180deg, #3dd0ff, transparent);
transform: translate(-50%, -10%) rotate(25deg);
animation-delay: -10s;
}
@keyframes hsp-sway {
from { opacity: 0.35; }
to { opacity: 0.7; }
}
.hero-split-prism .hsp-stage {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
padding: 60px 30px;
}
.hero-split-prism .hsp-col { display: flex; flex-direction: column; gap: 14px; padding: 0 40px; }
.hero-split-prism .hsp-right { text-align: right; align-items: flex-end; }
.hero-split-prism .hsp-num {
font-family: var(--font-display); font-weight: 700;
font-size: 14px; color: rgba(255,255,255,0.5);
letter-spacing: 0.1em;
}
.hero-split-prism .hsp-tag {
font-size: 11px; letter-spacing: 0.32em; color: rgba(255,255,255,0.7);
}
.hero-split-prism .hsp-big {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(110px, 16vw, 240px);
line-height: 0.9;
letter-spacing: -0.05em;
}
.hero-split-prism .hsp-grad-a {
background: linear-gradient(135deg, #ff3d77, #ffd03d);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-split-prism .hsp-grad-b {
background: linear-gradient(135deg, #3dd0ff, #b73dff);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-split-prism .hsp-en {
font-size: 12px; letter-spacing: 0.36em; color: rgba(255,255,255,0.5);
}
.hero-split-prism .hsp-mid { display: grid; place-items: center; padding: 0 20px; }
.hero-split-prism .hsp-prism {
width: 100px; height: 100px;
display: grid; place-items: center;
position: relative;
}
.hero-split-prism .hsp-prism-tri {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid;
border-bottom-color: rgba(255,255,255,0.95);
filter: drop-shadow(0 0 30px rgba(255,255,255,0.4));
animation: hsp-spin calc(20s / var(--motion, 1)) linear infinite;
transform-origin: center 60%;
}
@keyframes hsp-spin { to { transform: rotate(360deg); } }
.hero-split-prism .hsp-foot {
position: relative;
display: flex; justify-content: space-between;
font-size: 11px; letter-spacing: 0.24em; color: rgba(255,255,255,0.5);
padding: 24px 40px 0;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 20px;
}
.hero-split-prism .hsp-foot-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #3dffa6; margin-right: 8px;
box-shadow: 0 0 10px #3dffa6;
animation: blink calc(1.8s / var(--motion, 1)) ease-in-out infinite;
}
/* ============================================================
N · SPLIT ARCH — architectural blueprint
============================================================ */
.hero[data-hero="split-arch"] { padding: 80px 0 60px; background: #0d2438; color: #b8d4e8; }
.hero[data-hero="split-arch"] .hero-bg,
.hero[data-hero="split-arch"] .hero-canvas { display: none; }
.hero[data-hero="split-arch"] .hero-split-arch { display: block; position: relative; min-height: 70vh; }
.hero-split-arch .hsa-blueprint {
position: absolute; inset: 0; width: 100%; height: 100%;
color: #b8d4e8;
pointer-events: none;
}
.hero-split-arch .hsa-corner {
position: absolute;
font-size: 11px; letter-spacing: 0.3em;
color: rgba(184,212,232,0.7);
z-index: 2;
}
.hero-split-arch .hsa-corner.tl { top: 24px; left: 32px; }
.hero-split-arch .hsa-corner.tr { top: 24px; right: 32px; }
.hero-split-arch .hsa-corner.bl { bottom: 24px; left: 32px; }
.hero-split-arch .hsa-corner.br { bottom: 24px; right: 32px; }
.hero-split-arch .hsa-stage {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
padding: 80px 60px;
z-index: 2;
}
.hero-split-arch .hsa-col { display: flex; flex-direction: column; gap: 16px; padding: 0 40px; }
.hero-split-arch .hsa-right { text-align: right; align-items: flex-end; }
.hero-split-arch .hsa-spec {
display: inline-flex; gap: 16px;
font-size: 11px; letter-spacing: 0.24em;
align-items: baseline;
}
.hero-split-arch .hsa-k { color: rgba(184,212,232,0.5); min-width: 80px; }
.hero-split-arch .hsa-right .hsa-spec { flex-direction: row-reverse; }
.hero-split-arch .hsa-v { color: #fff; }
.hero-split-arch .hsa-big {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(120px, 18vw, 260px);
line-height: 0.85;
letter-spacing: -0.04em;
color: #fff;
margin-top: 12px;
position: relative;
}
.hero-split-arch .hsa-big::after {
content: ''; position: absolute;
left: 0; right: 100%; bottom: -10px;
height: 1px; background: #4ec9b0;
animation: hsa-rule calc(3s / var(--motion, 1)) ease-out forwards;
}
.hero-split-arch .hsa-right .hsa-big::after { left: auto; right: 0; }
@keyframes hsa-rule { to { right: 0; } }
.hero-split-arch .hsa-en {
font-size: 11px; letter-spacing: 0.3em; color: rgba(184,212,232,0.6);
font-family: var(--font-mono);
}
.hero-split-arch .hsa-axis {
display: flex; flex-direction: column; align-items: center;
padding: 0 30px;
}
.hero-split-arch .hsa-axis-cap {
font-family: var(--font-display); font-weight: 300;
font-size: 60px; color: #4ec9b0;
line-height: 1;
text-shadow: 0 0 20px rgba(78,201,176,0.5);
}
@media (max-width: 880px) {
.hero-split-noir .hsn-stage,
.hero-split-warm .hsw-stage,
.hero-split-prism .hsp-stage,
.hero-split-arch .hsa-stage { grid-template-columns: 1fr; gap: 24px; }
.hero-split-noir .hsn-divider,
.hero-split-arch .hsa-axis { flex-direction: row; padding: 16px 0; }
.hero-split-noir .hsn-line { width: auto; height: 1px; }
.hero-split-warm .hsw-seal { margin: 16px auto; }
.hero-split-noir .hsn-right,
.hero-split-warm .hsw-right,
.hero-split-prism .hsp-right,
.hero-split-arch .hsa-right { text-align: left; align-items: flex-start; }
.hero-split-arch .hsa-big::after { left: 0 !important; }
}
/* ---- MEGA: stacked oversized lockup ---- */
.hero[data-hero="mega"] { padding: 110px 0 60px; }
.hero[data-hero="mega"] .hero-mega { display: block; }
.hero-mega { margin-top: 14px; }
.hero-mega .mega-line {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(76px, 18vw, 280px);
line-height: 0.86;
letter-spacing: -0.05em;
color: var(--ink);
text-transform: uppercase;
opacity: 0;
transform: translateY(24px);
animation: mega-in 1s var(--ease-out) forwards;
}
.hero-mega .mega-line:nth-child(1) { animation-delay: .15s; }
.hero-mega .mega-line:nth-child(2) { animation-delay: .28s; }
.hero-mega .mega-line:nth-child(3) { animation-delay: .42s; }
.hero-mega .mega-line:nth-child(4) { animation-delay: .55s; }
.hero-mega .mega-line.outline {
-webkit-text-stroke: 2px var(--ink);
color: transparent;
}
.hero-mega .mega-cn {
margin-top: 28px;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(20px, 2.4vw, 32px);
letter-spacing: 0.18em;
color: var(--ink-soft);
opacity: 0;
animation: mega-in 1s var(--ease-out) .7s forwards;
}
@keyframes mega-in {
to { opacity: 1; transform: translateY(0); }
}
/* ---- MARQUEE: kinetic scrolling rows ---- */
.hero[data-hero="marquee"] { padding: 110px 0 60px; min-height: 90vh; }
.hero[data-hero="marquee"] .hero-marquee { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.hero-marquee .hm-track {
display: flex;
gap: 48px;
align-items: center;
white-space: nowrap;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(70px, 14vw, 200px);
line-height: 1;
letter-spacing: -0.04em;
color: var(--ink);
animation: hm-scroll calc(40s / var(--motion, 1)) linear infinite;
will-change: transform;
}
.hero-marquee .hm-track.reverse {
font-size: clamp(20px, 2.6vw, 36px);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink-soft);
animation: hm-scroll-rev calc(28s / var(--motion, 1)) linear infinite;
border-top: 1px solid var(--ink-line);
border-bottom: 1px solid var(--ink-line);
padding: 14px 0;
gap: 28px;
}
.hero-marquee .hm-track.reverse .serif { font-family: var(--font-serif); }
.hero-marquee .hm-track.reverse .italic { font-style: italic; }
.hero-marquee .hm-track.reverse .mono { font-family: var(--font-mono); font-size: 0.6em; letter-spacing: 0.18em; }
.hero-marquee .hm-track .outline {
-webkit-text-stroke: 2px var(--ink);
color: transparent;
}
.hero-marquee .hm-track .dot { color: var(--accent); }
@keyframes hm-scroll { to { transform: translateX(-50%); } }
@keyframes hm-scroll-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* ---- SPLIT: editorial dual-column ---- */
.hero[data-hero="split"] { padding: 100px 0 50px; }
.hero[data-hero="split"] .hero-glow,
.hero[data-hero="split"] .hero-canvas { display: none; }
.hero[data-hero="split"] .hero-split {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
margin-top: 30px;
gap: 0;
border-top: 1px solid var(--ink-line);
border-bottom: 1px solid var(--ink-line);
}
.hero-split .hs-col {
padding: 50px 30px 40px;
position: relative;
opacity: 0;
animation: split-in 1s var(--ease-out) forwards;
}
.hero-split .hs-left { animation-delay: .15s; }
.hero-split .hs-right { animation-delay: .35s; text-align: right; }
.hero-split .hs-num {
font-size: 11px;
letter-spacing: 0.4em;
color: var(--ink-faint);
}
.hero-split .hs-label {
margin-top: 8px;
font-size: 12px;
letter-spacing: 0.32em;
color: var(--ink-soft);
}
.hero-split .hs-big {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(96px, 14vw, 220px);
line-height: 0.92;
letter-spacing: -0.04em;
color: var(--ink);
margin-top: 10px;
}
.hero-split .hs-right .hs-big {
-webkit-text-stroke: 2px var(--ink);
color: transparent;
}
.hero-split .hs-en {
margin-top: 14px;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(18px, 1.8vw, 26px);
color: var(--ink-soft);
}
.hero-split .hs-mid {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border-left: 1px solid var(--ink-line);
border-right: 1px solid var(--ink-line);
opacity: 0;
animation: split-in 1s var(--ease-out) .55s forwards;
}
.hero-split .hs-x {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(60px, 8vw, 130px);
color: var(--accent);
line-height: 1;
animation: spin-slow calc(20s / var(--motion, 1)) linear infinite;
display: inline-block;
}
@keyframes split-in { to { opacity: 1; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
/* ---- KINETIC: rotating verb + big noun ---- */
.hero[data-hero="kinetic"] { padding: 130px 0 60px; }
.hero[data-hero="kinetic"] .hero-kinetic { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.hero-kinetic .hk-row {
display: flex;
align-items: baseline;
gap: 24px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(48px, 8vw, 120px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--ink);
}
.hero-kinetic .hk-prefix { color: var(--ink-soft); font-weight: 500; }
.hero-kinetic .hk-rotor {
display: inline-block;
height: 1em;
overflow: hidden;
vertical-align: bottom;
position: relative;
}
.hero-kinetic .hk-rotor::after {
content: "";
position: absolute;
left: -8px; right: -8px;
bottom: -6px;
height: 6px;
background: var(--accent);
opacity: 0.18;
}
.hero-kinetic .hk-word {
display: block;
height: 1em;
line-height: 1;
color: var(--accent);
animation: hk-rotate calc(8s / var(--motion, 1)) cubic-bezier(.7,0,.3,1) infinite;
}
.hero-kinetic .hk-word:nth-child(1) { animation-delay: 0s; }
@keyframes hk-rotate {
0%, 16% { transform: translateY(0); }
20%, 36% { transform: translateY(-100%); }
40%, 56% { transform: translateY(-200%); }
60%, 76% { transform: translateY(-300%); }
80%, 96% { transform: translateY(-400%); }
100% { transform: translateY(-500%); }
}
.hero-kinetic .hk-big {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(120px, 22vw, 360px);
line-height: 0.86;
letter-spacing: -0.06em;
color: var(--ink);
margin-top: 6px;
}
.hero-kinetic .hk-stroke {
-webkit-text-stroke: 3px var(--ink);
color: transparent;
}
.hero-kinetic .hk-tape {
display: flex;
gap: 18px;
align-items: center;
margin-top: 28px;
padding: 12px 0;
border-top: 1px solid var(--ink-line);
border-bottom: 1px solid var(--ink-line);
font-size: 11px;
letter-spacing: 0.28em;
color: var(--ink-soft);
text-transform: uppercase;
}
.hero-kinetic .hk-tape span:first-child { color: var(--accent); }
@media (max-width: 880px) {
.hero-split .hero-split { grid-template-columns: 1fr; }
.hero-split .hs-mid { border: 0; padding: 16px 0; }
.hero-split .hs-right { text-align: left; }
.hero-marquee .hm-track { gap: 28px; }
.hero-mega .mega-line { font-size: clamp(60px, 22vw, 140px); }
.hero-kinetic .hk-row { font-size: clamp(40px, 11vw, 80px); }
.hero-kinetic .hk-big { font-size: clamp(100px, 30vw, 200px); }
}
/* ---- E · EDITORIAL — magazine cover ---- */
.hero[data-hero="editorial"] { padding: 90px 0 50px; min-height: 92vh; }
.hero[data-hero="editorial"] .hero-editorial { display: flex; flex-direction: column; gap: 40px; margin-top: 16px; }
.hero-editorial .he-top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--ink-soft);
text-transform: uppercase;
}
.hero-editorial .he-rule { height: 1px; background: var(--ink); opacity: 0.3; }
.hero-editorial .he-stage {
display: grid;
grid-template-columns: 36px 1fr 36px;
gap: 28px;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 60px 0;
position: relative;
}
.hero-editorial .he-side {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 10px;
letter-spacing: 0.5em;
color: var(--ink-soft);
writing-mode: vertical-rl;
text-orientation: upright;
align-items: center;
}
.hero-editorial .he-side span { display: block; line-height: 1; }
.hero-editorial .he-center { padding: 0 20px; }
.hero-editorial .he-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--ink-soft);
margin-bottom: 28px;
}
.hero-editorial .he-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: blink calc(2.4s / var(--motion, 1)) ease-in-out infinite;
}
.hero-editorial .he-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(64px, 11vw, 180px);
line-height: 0.92;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0;
}
.hero-editorial .he-italic {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
}
.hero-editorial .he-stroke {
-webkit-text-stroke: 2px var(--ink);
color: transparent;
}
.hero-editorial .he-period { color: var(--accent); }
.hero-editorial .he-foot {
margin-top: 36px;
display: flex;
justify-content: space-between;
font-size: 10px;
letter-spacing: 0.32em;
color: var(--ink-faint);
text-transform: uppercase;
padding-top: 18px;
border-top: 1px solid var(--line);
}
/* ---- F · TECH GRID — coordinate / readout ---- */
.hero[data-hero="tech"] { padding: 100px 0 60px; min-height: 96vh; }
.hero[data-hero="tech"] .hero-tech { display: block; position: relative; padding: 60px 30px; min-height: 70vh; }
.hero-tech .ht-grid {
position: absolute; inset: 0;
width: 100%; height: 100%;
color: var(--ink);
pointer-events: none;
}
.hero-tech .ht-coords {
position: absolute; inset: 0;
font-size: 10px;
letter-spacing: 0.24em;
color: var(--ink-faint);
pointer-events: none;
}
.hero-tech .ht-c { position: absolute; }
.hero-tech .ht-c.tl { top: 14px; left: 14px; }
.hero-tech .ht-c.tr { top: 14px; right: 14px; }
.hero-tech .ht-c.bl { bottom: 14px; left: 14px; }
.hero-tech .ht-c.br { bottom: 14px; right: 14px; }
.hero-tech .ht-corner { position: absolute; color: var(--ink); }
.hero-tech .ht-corner.tl { top: 0; left: 0; }
.hero-tech .ht-corner.tr { top: 0; right: 0; }
.hero-tech .ht-corner.bl { bottom: 0; left: 0; }
.hero-tech .ht-corner.br { bottom: 0; right: 0; }
.hero-tech .ht-center { position: relative; max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
.hero-tech .ht-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-soft);
margin-bottom: 36px;
background: color-mix(in oklab, var(--bg) 70%, transparent);
backdrop-filter: blur(6px);
}
.hero-tech .ht-pulse {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 var(--accent);
animation: ht-pulse calc(2s / var(--motion, 1)) ease-in-out infinite;
}
@keyframes ht-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent); }
}
.hero-tech .ht-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(60px, 11vw, 180px);
line-height: 0.96;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0;
}
.hero-tech .ht-line { display: block; }
.hero-tech .ht-em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
}
.hero-tech .ht-slash {
color: var(--accent);
font-family: var(--font-mono);
font-weight: 400;
margin-left: 0.1em;
font-size: 0.6em;
vertical-align: 0.15em;
}
.hero-tech .ht-readout {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 460px;
font-size: 12px;
letter-spacing: 0.16em;
color: var(--ink-soft);
}
.hero-tech .ht-readout > div {
display: grid;
grid-template-columns: 80px 1fr 50px;
gap: 16px;
align-items: center;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 4px;
background: color-mix(in oklab, var(--bg) 70%, transparent);
}
.hero-tech .ht-k { color: var(--ink); font-weight: 600; }
.hero-tech .ht-v { color: var(--accent); letter-spacing: 0.3em; }
.hero-tech .ht-n { text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* ---- G · MONOLITH — single huge word, brutalist ---- */
.hero[data-hero="monolith"] { padding: 80px 0 40px; min-height: 96vh; }
.hero[data-hero="monolith"] .hero-monolith { display: flex; flex-direction: column; gap: 30px; min-height: 80vh; }
.hero-monolith .hmo-top {
display: flex;
justify-content: space-between;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--ink-soft);
text-transform: uppercase;
}
.hero-monolith .hmo-meta {
display: inline-flex;
align-items: center;
gap: 10px;
}
.hero-monolith .hmo-dot {
width: 8px; height: 8px;
background: var(--accent);
border-radius: 50%;
animation: blink calc(2.4s / var(--motion, 1)) ease-in-out infinite;
}
.hero-monolith .hmo-stage {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.hero-monolith .hmo-rule {
height: 1px;
background: var(--ink);
opacity: 0.4;
}
.hero-monolith .hmo-word {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(180px, 36vw, 560px);
line-height: 0.86;
letter-spacing: -0.06em;
color: var(--ink);
text-align: center;
padding: 24px 0;
display: flex;
justify-content: center;
gap: 0.04em;
}
.hero-monolith .hmo-char {
display: inline-block;
opacity: 0;
transform: translateY(40px) scale(0.9);
animation: hmo-in 1.2s var(--ease-out) forwards;
animation-delay: calc(var(--d) * 0.2s + 0.3s);
}
.hero-monolith .hmo-char:nth-child(1) {
-webkit-text-stroke: 3px var(--ink);
color: transparent;
}
@keyframes hmo-in {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-monolith .hmo-bottom {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: clamp(14px, 1.4vw, 18px);
color: var(--ink-soft);
}
.hero-monolith .hmo-italic {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink);
}
.hero-monolith .hmo-num {
font-size: 11px;
letter-spacing: 0.32em;
color: var(--ink-faint);
}
@media (max-width: 880px) {
.hero-editorial .he-stage { grid-template-columns: 1fr; }
.hero-editorial .he-side { display: none; }
.hero-tech .ht-readout > div { grid-template-columns: 64px 1fr 40px; }
.hero-monolith .hmo-word { font-size: clamp(120px, 50vw, 280px); }
.hero-monolith .hmo-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}
/* ---- H · GLASS — Apple Vision style ---- */
.hero[data-hero="glass"] { padding: 60px 0 40px; min-height: 100vh; background: #f6f4ef; }
.hero[data-hero="glass"] .hero-glass { display: block; position: relative; min-height: 86vh; border-radius: 28px; overflow: hidden; background: #0d1220; padding: 80px 40px; }
.hero-glass .hg-aurora {
position: absolute;
width: 80vw; height: 80vw;
border-radius: 50%;
filter: blur(100px);
opacity: 0.85;
pointer-events: none;
background: radial-gradient(circle, #ff6b9d 0%, #c44569 40%, transparent 70%);
top: -30%; left: -20%;
animation: hg-float calc(20s / var(--motion, 1)) ease-in-out infinite alternate;
}
.hero-glass .hg-aurora.b {
background: radial-gradient(circle, #4facfe 0%, #00f2fe 40%, transparent 70%);
top: 20%; right: -25%; left: auto;
animation-delay: -7s;
}
.hero-glass .hg-aurora.c {
background: radial-gradient(circle, #fbc531 0%, #e1b12c 40%, transparent 70%);
bottom: -30%; left: 30%; top: auto;
animation-delay: -14s;
opacity: 0.6;
}
@keyframes hg-float {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(60px, -40px) scale(1.15); }
}
.hero-glass .hg-stack {
position: relative;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
align-items: flex-start;
}
.hero-glass .hg-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.18);
font-size: 12px;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.92);
}
.hero-glass .hg-pill-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 12px #4ade80;
animation: blink calc(2s / var(--motion, 1)) ease-in-out infinite;
}
.hero-glass .hg-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 10vw, 160px);
line-height: 0.95;
letter-spacing: -0.04em;
color: #fff;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.06em;
text-shadow: 0 4px 60px rgba(0,0,0,0.3);
}
.hero-glass .hg-italic {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
background: linear-gradient(135deg, #ff6b9d, #fbc531);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-glass .hg-grad {
background: linear-gradient(135deg, #4facfe, #00f2fe);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-glass .hg-sub {
font-size: clamp(16px, 1.5vw, 22px);
line-height: 1.6;
color: rgba(255,255,255,0.7);
max-width: 620px;
margin: 0;
}
.hero-glass .hg-cards {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hero-glass .hg-card {
padding: 24px 32px;
border-radius: 20px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.14);
min-width: 140px;
}
.hero-glass .hg-card-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 42px;
letter-spacing: -0.02em;
color: #fff;
line-height: 1;
}
.hero-glass .hg-card-lab {
margin-top: 8px;
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
}
/* ---- I · NEON — cyberpunk wireframe ---- */
.hero[data-hero="neon"] { padding: 0; min-height: 100vh; background: #050510; }
.hero[data-hero="neon"] .hero-bg { display: none; }
.hero[data-hero="neon"] .hero-canvas { display: none; }
.hero[data-hero="neon"] .hero-inner { padding: 0; }
.hero[data-hero="neon"] .hero-glass,
.hero[data-hero="neon"] { color: #d8feff; }
.hero[data-hero="neon"] .hero-neon { display: block; position: relative; min-height: 100vh; padding: 100px 60px; overflow: hidden; }
.hero-neon .hn-bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 100%, #1a0033 0%, #050510 70%);
pointer-events: none;
}
.hero-neon .hn-sun {
position: absolute;
bottom: -15%; left: 50%;
transform: translateX(-50%);
width: 60vw; height: 60vw;
border-radius: 50%;
background: radial-gradient(circle, #ff006e 0%, #8338ec 30%, transparent 60%);
filter: blur(20px);
opacity: 0.6;
animation: hn-sun calc(8s / var(--motion, 1)) ease-in-out infinite alternate;
}
@keyframes hn-sun {
0% { opacity: 0.4; transform: translateX(-50%) scale(1); }
100% { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
}
.hero-neon .hn-grid {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 50%;
background-image:
linear-gradient(#00ffea22 1px, transparent 1px),
linear-gradient(90deg, #00ffea22 1px, transparent 1px);
background-size: 60px 60px;
transform: perspective(400px) rotateX(60deg);
transform-origin: bottom;
animation: hn-grid calc(20s / var(--motion, 1)) linear infinite;
}
@keyframes hn-grid {
0% { background-position-y: 0; }
100% { background-position-y: 60px; }
}
.hero-neon .hn-corner {
position: absolute;
width: 30px; height: 30px;
border: 1px solid #00ffea;
box-shadow: 0 0 8px #00ffea, inset 0 0 8px #00ffea;
}
.hero-neon .hn-corner.tl { top: 30px; left: 30px; border-right: 0; border-bottom: 0; }
.hero-neon .hn-corner.tr { top: 30px; right: 30px; border-left: 0; border-bottom: 0; }
.hero-neon .hn-corner.bl { bottom: 30px; left: 30px; border-right: 0; border-top: 0; }
.hero-neon .hn-corner.br { bottom: 30px; right: 30px; border-left: 0; border-top: 0; }
.hero-neon .hn-stack {
position: relative;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 36px;
align-items: center;
text-align: center;
padding-top: 80px;
}
.hero-neon .hn-meta {
display: flex;
gap: 40px;
font-size: 11px;
letter-spacing: 0.32em;
color: #00ffea;
}
.hero-neon .hn-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-neon .hn-dot {
width: 8px; height: 8px;
background: #00ffea;
border-radius: 50%;
box-shadow: 0 0 12px #00ffea;
animation: blink calc(1.6s / var(--motion, 1)) ease-in-out infinite;
}
.hero-neon .hn-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(80px, 14vw, 220px);
line-height: 0.92;
letter-spacing: -0.04em;
color: #fff;
margin: 0;
text-shadow:
0 0 20px #ff006e,
0 0 40px #ff006e88,
0 0 80px #ff006e44;
}
.hero-neon .hn-line { display: block; }
.hero-neon .hn-stroke {
-webkit-text-stroke: 2px #00ffea;
color: transparent;
text-shadow:
0 0 20px #00ffea,
0 0 40px #00ffea88;
}
.hero-neon .hn-en {
font-size: clamp(14px, 1.4vw, 20px);
letter-spacing: 0.5em;
color: #ff006e;
text-shadow: 0 0 12px #ff006e;
}
.hero-neon .hn-tape {
width: 100%;
border-top: 1px solid #00ffea44;
border-bottom: 1px solid #00ffea44;
padding: 14px 0;
overflow: hidden;
margin-top: 20px;
}
.hero-neon .hn-tape-track {
display: flex;
gap: 36px;
white-space: nowrap;
font-size: 12px;
letter-spacing: 0.24em;
color: #00ffea;
font-family: var(--font-mono);
animation: hm-scroll calc(30s / var(--motion, 1)) linear infinite;
}
/* ---- J · BENTO — Apple bento grid ---- */
.hero[data-hero="bento"] { padding: 100px 0 60px; min-height: 100vh; background: #f0eee8; }
.hero[data-hero="bento"] .hero-bento { display: block; }
.hero-bento .hb-grid {
display: grid;
grid-template-columns: 1.7fr 0.8fr 0.8fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 14px;
height: 78vh;
min-height: 640px;
max-width: 1300px;
margin: 0 auto;
}
.hero-bento .hb-cell {
border-radius: 24px;
padding: 28px;
position: relative;
overflow: hidden;
}
.hero-bento .hb-title {
grid-column: 1; grid-row: 1 / span 2;
background: linear-gradient(135deg, #ff8c42 0%, #ff5e7e 100%);
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 36px;
}
.hero-bento .hb-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.2em;
opacity: 0.85;
text-transform: uppercase;
}
.hero-bento .hb-dot {
width: 8px; height: 8px;
background: #fff;
border-radius: 50%;
animation: blink calc(2s / var(--motion, 1)) ease-in-out infinite;
}
.hero-bento .hb-title h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 7vw, 120px);
line-height: 0.92;
letter-spacing: -0.04em;
margin: 30px 0;
}
.hero-bento .hb-title h1 em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
}
.hero-bento .hb-foot {
font-size: 12px;
letter-spacing: 0.16em;
opacity: 0.85;
}
.hero-bento .hb-stat {
grid-column: 2; grid-row: 1;
background: #14130f;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-bento .hb-stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 7vw, 100px);
line-height: 1;
letter-spacing: -0.04em;
}
.hero-bento .hb-stat-lab {
font-size: 12px;
letter-spacing: 0.2em;
color: #888;
text-transform: uppercase;
}
.hero-bento .hb-orb {
grid-column: 3; grid-row: 1;
background: radial-gradient(circle at 50% 50%, #6c8eff 0%, #2952f5 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hero-bento .hb-orb-ring,
.hero-bento .hb-orb-core {
position: absolute;
border-radius: 50%;
}
.hero-bento .hb-orb-ring {
width: 60%; height: 60%;
border: 1px solid rgba(255,255,255,0.4);
animation: hb-orb-spin calc(20s / var(--motion, 1)) linear infinite;
}
.hero-bento .hb-orb-ring.r2 {
width: 80%; height: 80%;
border-color: rgba(255,255,255,0.25);
animation-duration: calc(30s / var(--motion, 1));
animation-direction: reverse;
}
.hero-bento .hb-orb-ring.r3 {
width: 100%; height: 100%;
border-color: rgba(255,255,255,0.15);
animation-duration: calc(40s / var(--motion, 1));
}
.hero-bento .hb-orb-core {
width: 40%; height: 40%;
background: #fff;
filter: blur(20px);
opacity: 0.6;
animation: hb-pulse calc(3s / var(--motion, 1)) ease-in-out infinite alternate;
}
@keyframes hb-orb-spin {
to { transform: rotate(360deg); }
}
@keyframes hb-pulse {
from { transform: scale(0.9); opacity: 0.4; }
to { transform: scale(1.15); opacity: 0.7; }
}
.hero-bento .hb-stack {
grid-column: 2 / span 2; grid-row: 2;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.hero-bento .hb-stack-row {
display: grid;
grid-template-columns: 70px 1fr;
gap: 16px;
align-items: baseline;
font-family: var(--font-mono);
font-size: 13px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hero-bento .hb-stack-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-bento .hb-stack-k {
color: #999;
font-size: 10px;
letter-spacing: 0.2em;
}
.hero-bento .hb-stack-v {
color: #14130f;
font-weight: 500;
}
.hero-bento .hb-quote {
grid-column: 1; grid-row: 3;
background: #14130f;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-bento .hb-quote-mark {
font-family: var(--font-serif);
font-style: italic;
font-size: 80px;
line-height: 0.6;
color: #ff8c42;
}
.hero-bento .hb-quote p {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.5;
margin: 12px 0 0;
}
.hero-bento .hb-status {
grid-column: 2 / span 2; grid-row: 3;
background: #d8e4ff;
display: flex;
align-items: center;
gap: 24px;
padding: 36px;
}
.hero-bento .hb-status-dot {
width: 60px; height: 60px;
border-radius: 50%;
background: #2952f5;
flex-shrink: 0;
box-shadow: 0 0 0 0 #2952f5aa;
animation: hb-dot-pulse calc(2s / var(--motion, 1)) ease-in-out infinite;
}
@keyframes hb-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 #2952f5aa; }
50% { box-shadow: 0 0 0 18px #2952f500; }
}
.hero-bento .hb-status-l1 {
font-size: 11px;
letter-spacing: 0.2em;
color: #4f6db8;
}
.hero-bento .hb-status-l2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3vw, 44px);
letter-spacing: -0.02em;
color: #14130f;
margin-top: 4px;
}
@media (max-width: 980px) {
.hero-bento .hb-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto auto;
height: auto;
}
.hero-bento .hb-title { grid-column: 1 / span 2; grid-row: 1; min-height: 360px; }
.hero-bento .hb-stat { grid-column: 1; grid-row: 2; min-height: 200px; }
.hero-bento .hb-orb { grid-column: 2; grid-row: 2; min-height: 200px; }
.hero-bento .hb-stack { grid-column: 1 / span 2; grid-row: 3; }
.hero-bento .hb-quote { grid-column: 1 / span 2; grid-row: 4; }
.hero-bento .hb-status { grid-column: 1 / span 2; grid-row: 5; }
.hero-neon .hn-stack { padding-top: 40px; }
.hero-glass .hg-cards { gap: 8px; }
.hero-glass .hg-card { padding: 16px 20px; min-width: 100px; }
}
/* Background canvas / SVG sits absolute behind content */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* WebGL canvas */
.hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.85;
mix-blend-mode: multiply;
}
[data-theme="cyber"] .hero-canvas { mix-blend-mode: screen; opacity: 1; }
[data-theme="whisper"] .hero-canvas { opacity: 0.55; }
/* Magnetic CTA */
.magnetic { display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
/* Flip-counter digit */
.flip {
display: inline-flex;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.flip-digit {
position: relative;
display: inline-block;
height: 1em;
width: 0.62em;
overflow: hidden;
vertical-align: top;
}
.flip-digit .flip-col {
position: absolute;
top: 0; left: 0;
display: flex;
flex-direction: column;
transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.flip-digit .flip-col span { display: block; height: 1em; }
/* Horizontal cases scroller */
.cases-h-wrap { overflow: hidden; position: relative; }
.cases-h-track {
display: flex;
gap: 24px;
padding: 0 56px 24px;
will-change: transform;
}
.cases-h-track .case {
flex: 0 0 auto;
width: 460px;
aspect-ratio: 4 / 5;
}
.cases-h-track .case.wide { width: 720px; aspect-ratio: 16 / 10; }
.cases-h-progress {
margin: 0 56px;
height: 2px;
background: var(--line);
position: relative;
border-radius: 2px;
}
.cases-h-progress::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--p, 0%);
background: var(--ink);
border-radius: 2px;
transition: width 0.2s linear;
}
/* Pin-scroll process */
.pin-stage {
position: relative;
height: 400vh; /* 4 steps × 1 viewport */
}
.pin-stage .pin-sticky {
position: sticky;
top: 0;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}
.pin-stage .pin-frame {
width: 100%;
max-width: 1480px;
padding: 0 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.pin-stage .pin-left {
position: relative;
height: 60vh;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
background: var(--bg-soft);
}
.pin-step-card {
position: absolute;
inset: 0;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
opacity: 0;
transform: translateY(40px) scale(0.98);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
pointer-events: none;
}
.pin-step-card.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.pin-step-icon {
width: 80px; height: 80px;
border: 1px solid var(--line-strong);
border-radius: 16px;
display: grid; place-items: center;
color: var(--accent);
}
.pin-step-big {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(48px, 8vw, 120px);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--ink);
}
.pin-step-tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink-faint);
text-transform: uppercase;
}
.pin-right {
display: flex;
flex-direction: column;
gap: 20px;
}
.pin-right-step {
padding: 24px 28px;
border-left: 2px solid var(--line);
opacity: 0.35;
transition: opacity 0.5s var(--ease-out), border-color 0.5s var(--ease-out), padding 0.5s var(--ease-out);
}
.pin-right-step.active {
opacity: 1;
border-left-color: var(--accent);
padding-left: 36px;
}
.pin-right-step .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-faint);
margin-bottom: 8px;
}
.pin-right-step .title {
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 8px;
}
.pin-right-step .desc {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.7;
}
@media (max-width: 1000px) {
.pin-stage { height: auto; }
.pin-stage .pin-sticky { position: relative; height: auto; padding: 60px 0; }
.pin-stage .pin-frame { grid-template-columns: 1fr; gap: 32px; }
.pin-stage .pin-left { height: 40vh; }
}
/* Theme-specific hero backgrounds */
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.hero-glow {
position: absolute;
width: 60vw;
height: 60vw;
border-radius: 50%;
filter: blur(120px);
opacity: 0.6;
animation: drift calc(28s / var(--motion, 1)) ease-in-out infinite alternate;
}
.hero-glow.a { top: -10%; left: -10%; background: var(--hero-tint-a); }
.hero-glow.b { bottom: -10%; right: -10%; background: var(--hero-tint-b); animation-delay: -8s; }
@keyframes drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(8vw, 4vw) scale(1.08); }
100% { transform: translate(-4vw, 6vw) scale(0.96); }
}
/* Twin-thread SVG container */
.twin-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.twin-canvas path {
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
filter: drop-shadow(0 0 12px currentColor);
}
.twin-canvas .thread-a { color: var(--c-magenta); animation: dash calc(20s / var(--motion, 1)) linear infinite; }
.twin-canvas .thread-b { color: var(--c-cyan); animation: dash calc(24s / var(--motion, 1)) linear infinite reverse; }
@keyframes dash {
to { stroke-dashoffset: -1000; }
}
/* Cyber scan line */
.cyber-scan {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(168,85,247,0.06) 50%, transparent 100%);
height: 30vh;
animation: scan calc(8s / var(--motion, 1)) linear infinite;
}
@keyframes scan {
0% { transform: translateY(-30vh); }
100% { transform: translateY(100vh); }
}
/* Hero content */
.hero-inner {
position: relative;
z-index: 2;
display: grid;
gap: 48px;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 18px;
}
.hero-eyebrow .blink {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: blink calc(2.4s / var(--motion, 1)) ease-in-out infinite;
box-shadow: 0 0 0 0 var(--accent);
}
@keyframes blink {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
50% { opacity: 0.4; box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 0%, transparent); }
}
.hero-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 9vw, 148px);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--ink);
display: flex;
flex-wrap: wrap;
gap: 0.18em 0.32em;
align-items: baseline;
}
.hero-title .word {
display: inline-block;
position: relative;
opacity: 0;
transform: translateY(0.6em);
filter: blur(8px);
animation: word-in 1.1s var(--ease-out) forwards;
animation-delay: calc(var(--i, 0) * 90ms + 200ms);
}
.hero-title.stroke-fill .word:not(.dot):not(.accent-word) {
-webkit-text-stroke: 1.5px var(--ink);
color: transparent;
animation: word-in 1.1s var(--ease-out) forwards, stroke-to-fill 1s var(--ease-out) forwards;
animation-delay: calc(var(--i, 0) * 90ms + 200ms), calc(var(--i, 0) * 90ms + 1400ms);
}
@keyframes stroke-to-fill {
to { color: var(--ink); -webkit-text-stroke: 0 transparent; }
}
@keyframes word-in {
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-title .accent-word {
background: linear-gradient(120deg, var(--c-indigo), var(--c-magenta), var(--c-cyan));
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: word-in 1.1s var(--ease-out) forwards, gradient-flow calc(8s / var(--motion, 1)) ease-in-out infinite;
}
[data-theme="whisper"] .hero-title .accent-word {
background: var(--ink);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
/* In whisper mode, "accent" is just emphasised via underline shimmer */
position: relative;
}
[data-theme="whisper"] .hero-title .accent-word::after {
content: "";
position: absolute;
left: 4%; right: 4%; bottom: 0.08em;
height: 0.10em;
background: var(--ink);
transform-origin: left;
animation: underline-grow 1.4s var(--ease-out) 1.2s forwards;
transform: scaleX(0);
}
@keyframes underline-grow {
to { transform: scaleX(1); }
}
@keyframes gradient-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-title .dot {
display: inline-block;
width: 0.18em;
height: 0.18em;
border-radius: 50%;
background: var(--accent);
margin: 0 0.05em 0.18em;
vertical-align: middle;
animation: pop 0.8s var(--ease-out) 1.4s both;
}
@keyframes pop {
from { transform: scale(0); }
to { transform: scale(1); }
}
.hero-manifesto {
max-width: 720px;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.6;
color: var(--ink-soft);
letter-spacing: -0.005em;
opacity: 0;
animation: fade-up 1s var(--ease-out) 1.2s forwards;
}
.hero-manifesto span { color: var(--ink); }
.hero-meta {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 32px;
align-items: end;
padding-top: 48px;
border-top: 1px solid var(--line);
opacity: 0;
animation: fade-up 1s var(--ease-out) 1.4s forwards;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-desc {
max-width: 460px;
font-size: 15px;
line-height: 1.7;
color: var(--ink-soft);
}
.hero-stats {
display: flex;
gap: 36px;
}
.hero-stat .num {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
}
.hero-stat .label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 6px;
}
/* ============================================================
Logo wall (infinite marquee)
============================================================ */
.logos {
padding: 80px 0 40px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg);
position: relative;
}
.logos-eyebrow {
text-align: center;
margin-bottom: 40px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.24em;
color: var(--ink-faint);
text-transform: uppercase;
}
.marquee {
position: relative;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.marquee-track {
display: flex;
gap: 80px;
width: max-content;
animation: marquee calc(40s / var(--motion, 1)) linear infinite;
align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
to { transform: translateX(-50%); }
}
.marquee-item {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 32px;
color: var(--ink-soft);
white-space: nowrap;
letter-spacing: -0.01em;
opacity: 0.55;
transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out);
flex-shrink: 0;
}
.marquee-item.mono { font-family: var(--font-mono); font-style: normal; letter-spacing: 0.08em; font-size: 22px; }
.marquee-item:hover { opacity: 1; color: var(--ink); }
/* ============================================================
Big section heading (matches "两条主线·完整交付" pattern)
============================================================ */
.section {
padding: 140px 0;
position: relative;
}
.section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
margin-bottom: 120px;
max-width: 1100px;
position: relative;
padding-top: 32px;
}
.section-head::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 1px;
background: var(--ink);
opacity: 0.5;
}
.section-head .left {
padding-top: 0;
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.section-head .eyebrow {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
}
.section-head .eyebrow .rule { display: none; }
.section-head .eyebrow .num {
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink);
opacity: 0.85;
margin-right: 0;
}
.section-head .eyebrow .num::after {
content: "—";
display: inline-block;
margin: 0 4px 0 12px;
opacity: 0.4;
letter-spacing: 0;
}
.section-head .eyebrow .en-serif {
font-family: var(--font-mono);
font-style: normal;
font-weight: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 0.55;
}
.section-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -0.028em;
color: var(--ink);
margin: 0;
max-width: 20ch;
}
.section-title .punct {
display: inline-block;
width: 0.1em;
height: 0.1em;
border-radius: 50%;
background: currentColor;
margin-left: 0.18em;
vertical-align: 0.2em;
opacity: 0.4;
}
/* ZH mode: accent phrases get a soft serif italic + muted ink — meant to add
typographic rhythm, NOT shout. Same weight as surrounding bold so it doesn't
feel pasted in.
EN mode: the whole sentence is English — keep the accent in display sans so it
doesn't read as a stranded foreign word. */
.en-serif {
font-family: var(--font-serif);
font-style: italic;
font-weight: inherit;
letter-spacing: -0.005em;
color: color-mix(in oklab, currentColor 78%, transparent);
}
body[data-lang="en"] .en-serif {
font-family: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
color: inherit;
}
/* Section-title accent: in EN keep it as a subtle accent color, in ZH keep
serif italic but at the same ink as the rest of the title (no color shift) */
body[data-lang="en"] .section-title .en-serif {
color: var(--accent);
}
.section-title .en-serif {
color: inherit;
font-weight: inherit;
}
body[data-lang="en"] .eyebrow .en-serif {
/* eyebrow is already mono — let it stay mono */
font-family: inherit;
}
.section-title .punct {
display: inline-block;
width: 0.14em; height: 0.14em;
border-radius: 50%;
background: var(--accent);
margin: 0 0.06em 0.16em;
vertical-align: middle;
}
/* ============================================================
Services list (capability rows)
============================================================ */
.cap-list { display: flex; flex-direction: column; }
.cap-row {
display: grid;
grid-template-columns: 80px 1fr auto auto;
gap: 40px;
align-items: center;
padding: 32px 0;
border-top: 1px solid var(--line);
position: relative;
cursor: default;
transition: padding 0.5s var(--ease-soft);
}
.cap-row:last-child { border-bottom: 1px solid var(--line); }
.cap-row::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-soft);
}
.cap-row:hover::before { transform: scaleX(1); }
.cap-row:hover { padding-left: 16px; }
.cap-num {
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink-faint);
letter-spacing: 0.1em;
}
.cap-name {
font-family: var(--font-display);
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
}
.cap-tags {
display: flex;
gap: 8px;
}
.cap-tag {
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 11px;
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--ink-soft);
letter-spacing: 0.04em;
white-space: nowrap;
}
.cap-arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: grid; place-items: center;
color: var(--ink-soft);
transition: transform 0.5s var(--ease-soft), background 0.5s var(--ease-soft), color 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft);
}
.cap-row:hover .cap-arrow {
transform: rotate(-45deg) scale(1.1);
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
@media (max-width: 900px) {
.cap-row { grid-template-columns: auto 1fr auto; gap: 16px; }
.cap-tags { display: none; }
}
/* ============================================================
Process / steps
============================================================ */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
}
.step {
padding: 36px 28px 36px 0;
border-right: 1px solid var(--line);
position: relative;
}
.step:last-child { border-right: none; }
.step:nth-child(n+2) { padding-left: 28px; }
.step-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-faint);
margin-bottom: 50px;
display: flex;
align-items: center;
gap: 10px;
}
.step-num .bar {
width: 28px; height: 1px;
background: currentColor;
}
.step-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 16px;
}
.step-desc {
font-size: 14px;
line-height: 1.7;
color: var(--ink-soft);
}
.step-pulse {
width: 10px; height: 10px;
border-radius: 50%;
border: 1.5px solid var(--accent);
margin-bottom: 24px;
position: relative;
}
.step-pulse::after {
content: "";
position: absolute; inset: -2px;
border-radius: 50%;
border: 1.5px solid var(--accent);
animation: pulse-ring calc(2.4s / var(--motion, 1)) ease-out infinite;
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2.6); opacity: 0; }
}
@media (max-width: 900px) {
.process-grid { grid-template-columns: 1fr 1fr; }
.step { border-right: none; border-bottom: 1px solid var(--line); padding: 28px 20px; }
}
/* ============================================================
Cases (showcase grid)
============================================================ */
.cases-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.case {
position: relative;
border-radius: 18px;
overflow: hidden;
background: var(--bg-soft);
border: 1px solid var(--line);
aspect-ratio: 4 / 5;
cursor: pointer;
transition: transform 0.6s var(--ease-soft), border-color 0.6s var(--ease-soft);
}
.case.wide { grid-column: span 4; aspect-ratio: 16 / 9; }
.case.tall { grid-column: span 2; aspect-ratio: 4 / 5; }
.case.med { grid-column: span 3; aspect-ratio: 3 / 2; }
.case:hover { border-color: var(--ink); transform: translateY(-4px); }
.case.tilt { transform-style: preserve-3d; transition: transform 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft); will-change: transform; }
.case .case-art,
.case .case-meta { transition: transform 0.4s var(--ease-soft); }
.case.tilt .case-art { transform: translateZ(20px) scale(1.02); }
.case.tilt .case-meta { transform: translateZ(40px); }
.case .gloss {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18), transparent 60%);
opacity: 0;
transition: opacity 0.3s var(--ease-out);
z-index: 3;
mix-blend-mode: overlay;
}
.case.tilt .gloss { opacity: 1; }
.case-art {
position: absolute;
inset: 0;
background: var(--bg-soft);
display: grid; place-items: center;
overflow: hidden;
}
.case-art::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 70% 30%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%);
opacity: 0;
transition: opacity 0.5s var(--ease-out);
}
.case:hover .case-art::after { opacity: 1; }
.case-top {
position: absolute;
top: 16px; left: 16px; right: 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
z-index: 4;
pointer-events: none;
}
.case-chip {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
}
.case-year {
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.78);
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.case-line {
font-size: 13px;
color: var(--ink-soft);
margin-top: 2px;
margin-bottom: 14px;
line-height: 1.4;
}
.case-kpis {
display: flex;
gap: 28px;
border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
padding-top: 12px;
margin-top: auto;
}
.kpi {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
min-width: 0;
}
.kpi-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.kpi-suf {
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--ink-soft);
margin-right: 2px;
}
.kpi-cap {
display: block;
flex-basis: 100%;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--ink-mute);
margin-top: 2px;
text-transform: uppercase;
}
.case-meta {
position: absolute;
inset: auto 0 0 0;
padding: 22px 24px 22px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
z-index: 2;
background: linear-gradient(to top, color-mix(in oklab, var(--bg) 96%, transparent) 55%, color-mix(in oklab, var(--bg) 70%, transparent) 80%, transparent);
}
.case-num {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-mute);
letter-spacing: 0.16em;
margin-bottom: 6px;
}
.case-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.15;
}
@media (max-width: 1100px) {
.cases-grid { grid-template-columns: repeat(2, 1fr); }
.case, .case.wide, .case.tall, .case.med { grid-column: span 1; aspect-ratio: 4 / 5; }
}
@media (max-width: 1100px) {
.cases-grid { grid-template-columns: repeat(2, 1fr); }
.case, .case.wide, .case.tall, .case.med { grid-column: span 1; aspect-ratio: 4 / 5; }
}
/* ============================================================
Pricing strip
============================================================ */
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
background: var(--bg-soft);
}
.tier {
padding: 44px 36px;
border-right: 1px solid var(--line);
position: relative;
transition: background 0.5s var(--ease-out);
}
.tier:last-child { border-right: none; }
.tier:hover { background: var(--bg); }
.tier-name {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink-soft);
text-transform: uppercase;
margin-bottom: 28px;
}
.tier-price {
font-family: var(--font-display);
font-size: 56px;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1;
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 12px;
}
.tier-price .unit {
font-size: 14px;
font-weight: 500;
color: var(--ink-soft);
letter-spacing: 0;
}
.tier-blurb {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
margin-bottom: 32px;
min-height: 60px;
}
.tier-features {
list-style: none;
padding: 0; margin: 0 0 36px 0;
font-size: 13px;
line-height: 1.9;
color: var(--ink-soft);
}
.tier-features li {
display: flex;
align-items: baseline;
gap: 12px;
}
.tier-features li::before {
content: "→";
color: var(--accent);
font-family: var(--font-mono);
font-size: 12px;
}
.tier .cta-pill { width: 100%; justify-content: center; }
.tier.featured {
background: var(--ink);
color: var(--bg);
}
.tier.featured .tier-name,
.tier.featured .tier-blurb,
.tier.featured .tier-features { color: color-mix(in oklab, var(--bg) 80%, var(--ink)); }
.tier.featured .tier-price { color: var(--bg); }
.tier.featured .tier-price .unit { color: color-mix(in oklab, var(--bg) 70%, var(--ink)); }
.tier.featured .tier-features li::before { color: var(--bg); }
.tier.featured .cta-pill { color: var(--ink); border-color: var(--bg); background: var(--bg); }
.tier.featured .cta-pill::before { background: color-mix(in oklab, var(--bg) 80%, var(--ink) 20%); }
.tier.featured .cta-pill:hover { color: var(--ink); }
@media (max-width: 1000px) {
.pricing { grid-template-columns: 1fr; }
.tier { border-right: none; border-bottom: 1px solid var(--line); }
}
/* ============================================================
Big CTA
============================================================ */
.big-cta {
padding: 200px 0 160px;
position: relative;
}
.cta-grid {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
column-gap: 64px;
row-gap: 56px;
align-items: end;
border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
padding-top: 56px;
max-width: 1100px;
margin: 0 auto;
}
.cta-marker {
grid-column: 1 / -1;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
}
.cta-statement {
grid-column: 1 / 2;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(48px, 7vw, 120px);
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--ink);
margin: 0;
}
.cta-actions {
grid-column: 2 / 3;
display: flex;
align-items: center;
gap: 28px;
}
.cta-mail {
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
color: var(--ink);
position: relative;
}
.cta-mail-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
}
.cta-mail-value {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(18px, 1.3vw, 22px);
letter-spacing: -0.01em;
color: var(--ink);
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
transition: color 0.3s ease;
}
.cta-mail:hover .cta-mail-value {
color: var(--accent, #6c5ce7);
}
.cta-arrow {
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
text-decoration: none;
transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
flex-shrink: 0;
}
.cta-arrow:hover {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
.cta-arrow svg { display: block; }
.cta-meta {
grid-column: 1 / -1;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
padding-top: 8px;
border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
@media (max-width: 760px) {
.big-cta { padding: 120px 0 100px; }
.cta-grid {
grid-template-columns: 1fr;
row-gap: 40px;
}
.cta-statement { grid-column: 1 / -1; font-size: clamp(40px, 11vw, 64px); }
.cta-actions { grid-column: 1 / -1; }
}
/* (legacy big-cta-button kept only for cyber theme below — no other usage) */
[data-theme="cyber"] .big-cta-button {
background: linear-gradient(120deg, var(--c-indigo), var(--c-magenta), var(--c-cyan));
background-size: 200% 100%;
animation: gradient-flow 6s ease-in-out infinite;
}
/* ============================================================
Footer
============================================================ */
.footer {
border-top: 1px solid var(--line);
padding: 80px 0 50px;
background: linear-gradient(180deg, var(--bg) 0%, #1a1a22 60%, #0a0a0f 100%);
color: #e8e6f0;
margin-top: 60px;
position: relative;
}
.footer::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(168,85,247,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(168,85,247,0.06) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 30%, transparent 80%);
pointer-events: none;
}
.footer > * { position: relative; }
.footer a { color: #e8e6f0; }
.footer .footer-mono { color: #7a7888; }
.footer .footer-sign { border-top-color: rgba(232,230,240,0.12); }
.footer .footer-sign .sign-script {
color: rgba(232,230,240,0.55);
background: none;
-webkit-text-fill-color: currentColor;
font-size: clamp(18px, 1.6vw, 22px);
}
-webkit-text-fill-color: transparent;
}
.footer-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.footer-mono {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.16em;
}
/* ============================================================
Interludes (full-bleed manifesto + numbers)
============================================================ */
.interlude {
min-height: 80vh;
display: flex;
align-items: center;
padding: 120px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-soft);
position: relative;
overflow: hidden;
}
.interlude::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
pointer-events: none;
}
.interlude-inner { position: relative; }
.interlude-eyebrow {
margin-bottom: 32px;
letter-spacing: 0.24em;
color: var(--ink-faint);
}
.interlude-line {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(48px, 7.5vw, 128px);
line-height: 1.05;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0;
}
.serif-i {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
}
.interlude-foot {
margin-top: 48px;
letter-spacing: 0.24em;
color: var(--ink-faint);
}
.interlude-num { min-height: 60vh; padding: 100px 0; }
.num-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.num-cell {
padding: 56px 32px;
border-right: 1px solid var(--line);
position: relative;
}
.num-cell:last-child { border-right: none; }
.num-big {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 7vw, 120px);
line-height: 1;
letter-spacing: -0.04em;
color: var(--ink);
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
}
.num-unit {
font-size: 0.4em;
color: var(--ink-soft);
margin-left: 4px;
font-weight: 500;
}
.num-cap {
margin-top: 18px;
letter-spacing: 0.18em;
font-size: 10px;
color: var(--ink-faint);
}
@media (max-width: 900px) {
.num-row { grid-template-columns: 1fr 1fr; }
.num-cell { border-bottom: 1px solid var(--line); }
.num-cell:nth-child(2) { border-right: none; }
}
/* ============================================================
Footer signature
============================================================ */
.footer-sign {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--line);
text-align: center;
}
.sign-script {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 2vw, 28px);
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink-soft);
display: inline-block;
}
/* ============================================================
Curtain (intro reveal)
============================================================ */
.curtain {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--bg);
display: grid;
place-items: center;
transition: transform 1.0s var(--ease-soft) 0.2s, opacity 0.6s var(--ease-out) 0.6s;
}
.curtain.lifted {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.curtain-inner {
text-align: center;
color: var(--ink);
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.curtain-logo { color: var(--ink); }
.cl-frame { animation: stroke 0.6s var(--ease-out) 0.1s forwards; }
.cl-bar { animation: stroke 0.4s var(--ease-out) 0.5s forwards; }
.cl-arrow { animation: stroke 0.4s var(--ease-out) 0.7s forwards; }
.cl-d { animation: fade-in 0.4s var(--ease-out) 0.9s forwards; }
.cl-cur { animation: fade-in 0.3s var(--ease-out) 1.1s forwards, blink 1.1s ease-in-out 1.4s infinite; }
@keyframes stroke { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
.curtain-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
letter-spacing: -0.03em;
color: var(--ink);
opacity: 0;
filter: blur(10px);
animation: name-focus 0.7s var(--ease-out) 0.9s forwards;
}
@keyframes name-focus {
to { opacity: 1; filter: blur(0); }
}
.curtain-prog {
font-size: 11px;
letter-spacing: 0.3em;
color: var(--ink-faint);
opacity: 0;
animation: fade-in 0.4s var(--ease-out) 1.2s forwards;
font-variant-numeric: tabular-nums;
}
/* ============================================================
Reveal-on-scroll
============================================================ */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > * {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-stagger.in > * {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; }
/* Cursor follower */
.cursor-glow {
position: fixed;
pointer-events: none;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%);
transform: translate(-50%, -50%);
z-index: 1;
mix-blend-mode: multiply;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
[data-theme="cyber"] .cursor-glow { mix-blend-mode: screen; }
body.cursor-active .cursor-glow { opacity: 1; }
/* Custom cursor (ring + dot) */
.cur-ring, .cur-dot {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
opacity: 0;
transition: opacity 0.4s var(--ease-out), width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.cur-ring {
width: 28px; height: 28px;
border: 1px solid var(--ink);
border-radius: 50%;
mix-blend-mode: difference;
filter: invert(1);
}
.cur-dot {
width: 5px; height: 5px;
background: var(--ink);
border-radius: 50%;
mix-blend-mode: difference;
filter: invert(1);
}
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .case,
body.has-custom-cursor summary,
body.has-custom-cursor input,
body.has-custom-cursor textarea { cursor: none; }
body.has-custom-cursor .cur-ring,
body.has-custom-cursor .cur-dot { opacity: 1; }
body.cur-hover .cur-ring {
width: 56px; height: 56px;
background: color-mix(in oklab, var(--accent) 25%, transparent);
border-color: var(--accent);
}
body.cur-hover .cur-dot { opacity: 0; }
/* ============================================================
Roman chapter numeral (oversized section watermark)
============================================================ */
.chapter {
position: absolute;
top: 60px;
right: 56px;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(140px, 22vw, 360px);
line-height: 0.85;
color: var(--ink);
opacity: 0.045;
pointer-events: none;
z-index: 0;
letter-spacing: -0.04em;
user-select: none;
}
[data-theme="cyber"] .chapter { opacity: 0.08; }
.section { position: relative; }
.section .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .chapter { right: 24px; top: 80px; font-size: 30vw; } }
/* ============================================================
Typographic section dividers (印刷分隔符)
============================================================ */
.section-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 36px 24px;
margin: 0 auto;
max-width: 1280px;
color: var(--ink-faint, #5b5953);
font-family: 'Instrument Serif', serif;
font-size: 22px;
letter-spacing: 0.4em;
opacity: 0.55;
user-select: none;
}
.section-divider::before,
.section-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,19,15,0.18), transparent);
}
.section-divider .glyph {
display: inline-block;
font-style: italic;
transform: translateY(-1px);
}
.section-divider.tight { padding: 18px 24px; }
@media (max-width: 700px) {
.section-divider { font-size: 16px; gap: 12px; padding: 24px 16px; }
}
/* ============================================================
Edge print marks (corner mono labels)
============================================================ */
.print-marks {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 30;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.32em;
color: var(--ink-faint);
text-transform: uppercase;
}
.print-marks > * { position: absolute; }
.pm-tl { top: 14px; left: 14px; }
.pm-tr { top: 14px; right: 14px; }
.pm-bl { bottom: 14px; left: 14px; }
.pm-br { bottom: 14px; right: 14px; }
.pm-left {
top: 50%; left: 14px;
transform: translateY(-50%) rotate(-90deg);
transform-origin: left center;
white-space: nowrap;
}
.pm-right {
top: 50%; right: 14px;
transform: translateY(-50%) rotate(90deg);
transform-origin: right center;
white-space: nowrap;
}
@media (max-width: 1100px) { .pm-left, .pm-right { display: none; } }
/* corner crop marks */
.crop {
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--line-strong);
opacity: 0.55;
}
.crop.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.crop.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.crop.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.crop.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* ============================================================
Signature mark — a cut-circle that recurs as visual signature
============================================================ */
.sig-mark {
display: inline-block;
width: 1em; height: 1em;
border-radius: 50%;
border: 1.5px solid currentColor;
position: relative;
vertical-align: middle;
flex-shrink: 0;
}
.sig-mark::after {
content: "";
position: absolute;
left: -10%; right: -10%;
top: 50%;
height: 1.5px;
background: currentColor;
transform: rotate(-22deg);
transform-origin: center;
}
.sig-mark.spin::after { animation: sig-spin calc(14s / var(--motion, 1)) linear infinite; }
@keyframes sig-spin {
to { transform: rotate(338deg); }
}
/* English serif italic mixed into headings */
.en-serif {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
/* ============================================================
Testimonials
============================================================ */
.quotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.quote {
margin: 0;
padding: 36px 32px 32px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--bg-soft);
display: flex;
flex-direction: column;
gap: 28px;
transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-soft);
position: relative;
}
.quote::before {
content: """;
position: absolute;
top: -32px; left: 22px;
font-family: var(--font-serif);
font-style: italic;
font-size: 120px;
color: var(--accent);
opacity: 0.4;
line-height: 1;
}
.quote:hover { border-color: var(--ink); transform: translateY(-4px); }
.quote blockquote {
margin: 0;
font-family: var(--font-display);
font-size: 18px;
line-height: 1.55;
color: var(--ink);
letter-spacing: -0.01em;
}
.quote figcaption {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.q-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.q-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-faint); text-transform: uppercase; }
@media (max-width: 1000px) { .quotes { grid-template-columns: 1fr; } }
/* ============================================================
FAQ accordion
============================================================ */
.faq-list {
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 28px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: padding 0.4s var(--ease-soft);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(20px, 2.4vw, 28px);
letter-spacing: -0.02em;
color: var(--ink);
}
.faq-icon {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: grid; place-items: center;
font-family: var(--font-mono);
font-weight: 400;
font-size: 20px;
color: var(--ink-soft);
transition: transform 0.5s var(--ease-soft), background 0.4s var(--ease-out), color 0.4s var(--ease-out);
flex-shrink: 0;
}
.faq-item[open] .faq-icon {
transform: rotate(45deg);
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
.faq-item:hover summary { padding-left: 12px; }
.faq-a {
padding: 0 0 32px 0;
max-width: 720px;
font-size: 15px;
line-height: 1.7;
color: var(--ink-soft);
animation: faq-open 0.5s var(--ease-out);
}
@keyframes faq-open {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
Custom cursor (overrides system on pointer:fine)
============================================================ */
@media (pointer: fine) {
body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }
.cur-ring, .cur-dot {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}
.cur-ring {
width: 32px; height: 32px;
border: 1.5px solid #fff;
transition: width 0.3s var(--ease-soft), height 0.3s var(--ease-soft), opacity 0.3s var(--ease-out);
}
.cur-dot {
width: 5px; height: 5px;
background: #fff;
transition: width 0.2s var(--ease-soft), height 0.2s var(--ease-soft);
}
body.has-custom-cursor.cur-hover .cur-ring { width: 56px; height: 56px; }
body.has-custom-cursor.cur-hover .cur-dot { width: 0; height: 0; }
}
.statusbar {
position: fixed;
right: 24px; bottom: 24px;
z-index: 40;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-faint);
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: color-mix(in oklab, var(--bg) 85%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.sb-row { display: flex; align-items: center; gap: 8px; }
.sb-k { color: var(--ink-soft); }
.sb-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
animation: blink calc(2.4s / var(--motion, 1)) ease-in-out infinite;
}
@media (max-width: 700px) { .statusbar { display: none; } }
/* ============================================================
Process connector line (drawn on scroll)
============================================================ */
.process-connector {
position: absolute;
left: 0; right: 0; top: 80px;
height: 60px;
pointer-events: none;
z-index: 1;
}
.process-connector path {
fill: none;
stroke: var(--accent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
transition: stroke-dashoffset 1.6s var(--ease-out);
opacity: 0.6;
}
.process-connector.in path { stroke-dashoffset: 0; }
#process { position: relative; }
/* ============================================================
Studio / Team
============================================================ */
.studio-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start;
padding-top: 20px;
}
.studio-manifesto {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.5;
letter-spacing: -0.015em;
color: var(--ink);
font-weight: 400;
}
.studio-manifesto em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.studio-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.ss {
padding: 28px 24px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.ss-num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 4.5vw, 64px);
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
}
.ss-unit {
font-size: 0.4em;
color: var(--ink-soft);
font-weight: 500;
}
.ss-lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 12px;
}
@media (max-width: 900px) {
.studio-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Section ornament */
.ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 24px 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.32em;
color: var(--ink-faint);
text-transform: uppercase;
}
.ornament .line {
width: 80px; height: 1px;
background: var(--line-strong);
}
/* ============================================================
Status bar (corner clock)
============================================================ */
.statusbar {
position: fixed;
right: 24px; bottom: 24px;
z-index: 40;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-faint);
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: color-mix(in oklab, var(--bg) 85%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.sb-row { display: flex; align-items: center; gap: 8px; }
.sb-k { color: var(--ink-soft); }
.sb-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
animation: blink calc(2.4s / var(--motion, 1)) ease-in-out infinite;
}
@media (max-width: 700px) { .statusbar { display: none; } }
/* ============================================================
Process connector
============================================================ */
.process-connector {
position: absolute;
left: 0; right: 0; top: 80px;
height: 60px;
pointer-events: none;
z-index: 1;
}
.process-connector path {
fill: none;
stroke: var(--accent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
transition: stroke-dashoffset 1.6s var(--ease-out);
opacity: 0.6;
}
.process-connector.in path { stroke-dashoffset: 0; }
#process { position: relative; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ============================================================
Curtain — refined intro reveal
============================================================ */
.curtain-inner { gap: 32px; position: relative; padding: 0 24px; }
/* Hairline rules above + below the lockup */
.curtain-rule {
width: clamp(120px, 30vw, 220px);
height: 1px;
background: var(--ink);
opacity: 0;
transform: scaleX(0.2);
transform-origin: center;
animation: curtain-rule-in 0.9s var(--ease-out) 0.2s forwards;
}
@keyframes curtain-rule-in {
to { opacity: 0.18; transform: scaleX(1); }
}
/* Issue / dateline above the wordmark — magazine-style */
.curtain-issue {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.4em;
color: var(--ink-faint);
text-transform: uppercase;
opacity: 0;
animation: fade-in 0.6s var(--ease-out) 0.4s forwards;
display: flex;
gap: 14px;
align-items: center;
}
.curtain-issue .dot {
display: inline-block; width: 5px; height: 5px; border-radius: 50%;
background: var(--accent);
animation: blink 1.6s ease-in-out infinite;
}
/* Tagline below the wordmark */
.curtain-tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(13px, 1.4vw, 16px);
color: var(--ink-soft);
opacity: 0;
animation: fade-up 0.7s var(--ease-out) 1.1s forwards;
letter-spacing: 0.01em;
}
/* Progress bar (replaces lone counter) */
.curtain-progress {
display: flex; align-items: center; gap: 14px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.3em;
color: var(--ink-faint);
opacity: 0;
animation: fade-in 0.4s var(--ease-out) 1.2s forwards;
}
.curtain-progress .bar {
width: clamp(140px, 22vw, 220px);
height: 1px;
background: var(--line);
position: relative;
overflow: hidden;
}
.curtain-progress .bar::after {
content: '';
position: absolute; inset: 0;
background: var(--ink);
transform-origin: left center;
transform: scaleX(var(--p, 0));
transition: transform 0.2s linear;
}
/* Smoother lift — wipe up with subtle scale */
.curtain {
transition: transform 1.1s cubic-bezier(0.83, 0, 0.17, 1) 0.15s,
opacity 0.5s var(--ease-out) 0.7s,
clip-path 1.1s cubic-bezier(0.83, 0, 0.17, 1) 0.15s;
}
.curtain.lifted {
clip-path: inset(0 0 100% 0);
transform: translateY(-6%);
opacity: 0;
pointer-events: none;
}
/* ============================================================
Mobile polish — phones (<= 700px)
============================================================ */
@media (max-width: 700px) {
/* Generous-but-tight outer padding */
.wrap { padding: 0 20px; }
.nav, .nav.scrolled { padding: 14px 20px; }
/* Hero — let it breathe, not collapse */
.hero { padding-top: 100px; padding-bottom: 80px; min-height: auto; }
.hero-eyebrow { gap: 10px; font-size: 9px; }
.hero-eyebrow .rule { width: 24px; }
/* Universal hero meta block */
.hero-meta {
grid-template-columns: 1fr;
gap: 28px;
padding-top: 32px;
}
.hero-stats { gap: 24px; flex-wrap: wrap; }
.hero-stat .num { font-size: 26px; }
.hero-manifesto { font-size: 17px !important; }
/* SPLIT hero variants — stack columns */
.hero-split .hs-stage,
.hero-split-noir .hsn-stage,
.hero-split-warm .hsw-stage,
.hero-split-prism .hsp-stage,
.hero-split-arch .hsa-stage,
.hero-3d-card .h3c-stage,
.hero-3d-iso .h3i-stage,
.hero-3d-tilt .h3t-stage,
.hero-quiet-rise .hqr-stage,
.hero-stroke-reveal .hsr-stage,
.hero-ghost .hgh-stage {
grid-template-columns: 1fr !important;
gap: 28px;
}
.hero-split .hs-mid,
.hero-split-noir .hsn-axis,
.hero-split-warm .hsw-axis,
.hero-split-prism .hsp-axis,
.hero-split-arch .hsa-axis,
.hero-3d-card .h3c-mid,
.hero-3d-iso .h3i-axis,
.hero-3d-tilt .h3t-mid,
.hero-quiet-rise .hqr-mid,
.hero-stroke-reveal .hsr-mid,
.hero-ghost .hgh-mid {
border: 0 !important;
border-bottom: 1px solid var(--line) !important;
padding: 8px 0 16px !important;
width: 60% !important;
margin: 0 auto !important;
}
/* Big serif/display sizing */
.hero-split .hs-big,
.hero-split-warm .hsw-big,
.hero-split-prism .hsp-big,
.hero-split-arch .hsa-big,
.hero-3d-card .h3c-big,
.hero-3d-iso .h3i-big,
.hero-3d-tilt .h3t-big,
.hero-quiet-rise .hqr-big,
.hero-stroke-reveal .hsr-big,
.hero-ghost .hgh-big,
.hero-split-noir .hsn-big {
font-size: clamp(72px, 22vw, 140px) !important;
}
/* Section heads */
.section { padding: 80px 0; }
.section-title { font-size: clamp(28px, 7vw, 44px) !important; line-height: 1.1; }
.chapter { font-size: 36vw !important; opacity: 0.04; right: 20px !important; }
.section-head { gap: 24px; }
/* Cap rows — tighter */
.cap-row {
grid-template-columns: 64px 1fr auto;
padding: 22px 0;
gap: 12px;
}
.cap-num { font-size: 11px; }
.cap-name { font-size: 18px; line-height: 1.3; }
.cap-arrow { width: 32px; height: 32px; font-size: 14px; }
/* Pricing — single column with breathing room */
.pricing { gap: 0; }
.tier { padding: 32px 24px; }
.tier-price { font-size: 56px; }
/* Cases horizontal scroll — tighter cards */
.cases-h-track .case { width: 78vw !important; min-width: 78vw !important; }
.cases-h-track .case.wide { width: 88vw !important; min-width: 88vw !important; }
/* Big CTA */
.cta-statement { line-height: 1.05; }
/* Footer — stack */
.footer-row { flex-direction: column; gap: 18px; align-items: flex-start; text-align: left; }
/* Interludes */
.interlude-line { font-size: clamp(36px, 11vw, 64px) !important; line-height: 1.15 !important; }
.num-row { grid-template-columns: 1fr 1fr; }
.num-big { font-size: clamp(44px, 14vw, 72px) !important; }
/* Hide busy chrome on tiny screens */
.statusbar { display: none; }
/* FAQ — comfortable tap targets */
.faq-item summary { padding: 22px 0; }
.faq-q { font-size: 16px; }
/* Quotes */
.quote { padding: 28px 24px; }
.quote blockquote { font-size: 18px; }
/* Testimonials, studio */
.studio-stats { grid-template-columns: 1fr 1fr; gap: 20px; }
.ss-num { font-size: 36px; }
/* Curtain mobile sizing */
.curtain-name { font-size: 24px; }
.curtain-issue { font-size: 9px; letter-spacing: 0.3em; }
.curtain-rule { width: 60vw; }
}
/* Tablet polish */
@media (max-width: 1000px) and (min-width: 701px) {
.section-title { font-size: clamp(36px, 5vw, 52px); }
}