/* ============================================================================ styles.css — Suminagashi Editorial portfolio ========================================================================= */ /* ---- fonts ---- */ @import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap'); :root { /* color scale */ --paper: #f2ebdd; --paper-2: #e9e0cd; --ink: #16130d; --ink-soft: #3a352b; /* emerald green system — vivid, confident, engineering-forward */ --forest: #14532d; --vermillion: #16a34a; /* primary accent — emerald green-600 */ --vermillion-soft: #22c55e; --green-glow: rgba(22,163,74,0.22); --green-spot: rgba(22,163,74,0.18); --dark: #100e0a; --dark-2: #181510; --cream: #ece3d2; --cream-dim: #b8ad97; --cream-faint:#8c8270; --hairline-d: rgba(236,227,210,0.12); --hairline-l: rgba(22,19,13,0.14); /* dynamic theme tokens (default = light hero) */ --fg: var(--ink); --fg-dim: var(--ink-soft); --fg-faint: rgba(22,19,13,0.5); --hairline: var(--hairline-l); --panel: rgba(242,235,221,0.42); --panel-brd: rgba(22,19,13,0.10); /* type */ --display: 'Outfit', system-ui, sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --heroname: 'Montserrat', system-ui, sans-serif; --rail-w: 76px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* theme handoff: applied to once we pass the hero, stays on */ body.is-dark { --fg: var(--cream); --fg-dim: var(--cream-dim); --fg-faint: var(--cream-faint); --hairline: var(--hairline-d); --panel: rgba(24,21,16,0.46); --panel-brd:rgba(236,227,210,0.10); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: clip; } body { font-family: var(--sans); font-weight: 400; color: var(--fg); background: var(--paper); /* fallback before canvas paints */ overflow-x: clip; line-height: 1.5; transition: color 0.05s var(--ease); cursor: none; } body.is-dark { background: var(--dark); } @media (pointer: coarse), (hover: none) { body { cursor: auto; } } /* ---- fixed layers ---- */ #ink-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; } .noise-overlay { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: var(--washi-noise); background-size: 240px 240px; transition: opacity 0.8s var(--ease), mix-blend-mode 0.8s; } body.is-dark .noise-overlay { mix-blend-mode: overlay; opacity: 0.6; } /* vignette for legibility on dark */ .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); background: radial-gradient(120% 100% at 50% 40%, transparent 40%, rgba(8,7,5,0.55) 100%); } body.is-dark .vignette { opacity: 1; } /* ---- content shell ---- */ .shell { position: relative; z-index: 3; } /* ---- side rails ---- */ .rail { position: fixed; top: 0; bottom: 0; width: var(--rail-w); z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.216em; color: var(--fg-faint); mix-blend-mode: normal; } .rail.left { left: 0; } .rail.right { right: 0; } .rail .rail-top, .rail .rail-bot { display: flex; flex-direction: column; align-items: center; gap: 18px; } .rail .vline { width: 1px; flex: 1; background: linear-gradient(var(--hairline), transparent 18%, transparent 82%, var(--hairline)); margin: 16px 0; } .kanji-vert { writing-mode: vertical-rl; font-family: var(--display); font-size: 18.1px; letter-spacing: 0.432em; color: var(--fg-dim); font-weight: 700; } .rail-label { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.384em; text-transform: uppercase; font-size: 9.5px; } .rail .seal-mini { pointer-events: auto; } /* section index in right rail */ .idx-nav { display: flex; flex-direction: column; gap: 14px; pointer-events: auto; writing-mode: horizontal-tb; } .idx-nav a { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--fg-faint); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color 0.3s; position: relative; } .idx-nav a .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.4; transition: all 0.3s; } .idx-nav a.active { color: var(--vermillion); } .idx-nav a.active .dot { opacity: 1; transform: scale(1.6); background: var(--vermillion); } .idx-nav a .idx-name { opacity: 0; transform: translateX(-4px); transition: all 0.3s; font-size: 8.6px; } .idx-nav a:hover .idx-name { opacity: 0.7; transform: translateX(0); } .clock { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.144em; color: var(--fg-dim); white-space: nowrap; display: flex; align-items: center; gap: 7px; } .clock .blink { width: 5px; height: 5px; border-radius: 50%; background: var(--vermillion); animation: blink 1.6s steps(1) infinite; } @keyframes blink { 50% { opacity: 0.2; } } /* ---- layout container ---- */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22.8px, 5.7vw, 91.2px); } section { position: relative; padding: clamp(96px, 14vh, 180px) 0; } .sec-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 56px; flex-wrap: wrap; } .sec-num { font-family: var(--mono); font-size: 12.4px; color: var(--vermillion); letter-spacing: 0.12em; } .sec-title { font-family: var(--display); font-weight: 700; font-size: clamp(26.6px, 3.8vw, 43.7px); letter-spacing: 0.04em; line-height: 1; } .sec-kicker { font-family: var(--mono); font-size: 11.4px; letter-spacing: 0.264em; text-transform: uppercase; color: var(--fg-faint); } .eyebrow { font-family: var(--mono); font-size: 11.4px; letter-spacing: 0.312em; text-transform: uppercase; color: var(--vermillion); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--vermillion); display: inline-block; } /* dry-brush divider */ .brush-rule { height: 16px; width: 100%; background: var(--brush-svg) center/100% 100% no-repeat; opacity: 0.5; } body.is-dark .brush-rule { filter: invert(1) sepia(0.3); opacity: 0.32; } /* ============================ HERO ====================================== */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 180px; } .hero-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(26.6px, 5.7vw, 91.2px); pointer-events: none; } .hero-topbar > * { pointer-events: auto; } .brand { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; text-decoration: none; color: var(--fg); } .brand .plogo { width: 56px; height: 56px; display: block; overflow: visible; transition: transform .45s var(--ease); } .brand:hover .plogo { transform: scale(1.08) rotate(8deg); } /* dp logo — stroked paths */ .plogo-glyph, .plogo-ghost, .plogo-fill { transition: opacity 0.8s var(--ease); } /* ---- preloader dp-logo reveal animation ---- */ /* stems: slide in from opposite ends */ .dp-stem { stroke-dasharray: 45; stroke-dashoffset: 45; } .dp-stem-d { animation: stemReveal 0.4s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; } .dp-stem-p { animation: stemReveal 0.4s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; } @keyframes stemReveal { to { stroke-dashoffset: 0; } } /* bowls: draw in clockwise, starting after stems */ .dp-bowl { stroke-dasharray: 100; stroke-dashoffset: 100; } .dp-bowl-d { animation: bowlReveal 0.6s cubic-bezier(0.16,1,0.3,1) 0.5s forwards; } .dp-bowl-p { animation: bowlReveal 0.6s cubic-bezier(0.16,1,0.3,1) 0.5s forwards; } @keyframes bowlReveal { to { stroke-dashoffset: 0; } } .footer-brand .plogo { width: 40px; height: 40px; } .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--fg); } .brand .brand-txt { font-family: var(--display); font-weight: 800; font-size: 15.2px; letter-spacing: 0.024em; text-transform: none; margin-left: 0; line-height: 1.2; } .brand .brand-txt small { display: block; font-family: var(--mono); font-size: 8.6px; letter-spacing: 0.24em; color: var(--fg-faint); font-weight: 600; margin-top: 1px; text-transform: none; } .topnav { display: flex; gap: 28px; align-items: center; } .topnav a { font-family: var(--mono); font-size: 11.4px; letter-spacing: 0.096em; color: var(--fg-dim); text-decoration: none; transition: color 0.3s; } .topnav a:hover { color: var(--vermillion); } .status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-dim); padding: 8px 15px; border: 1px solid var(--hairline); border-radius: 0; white-space: nowrap; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); background: var(--panel); backdrop-filter: blur(6px); } .status-pill .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--vermillion); box-shadow: 0 0 0 0 rgba(22,163,74,0.55); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); } 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } .hero-inner { position: relative; z-index: 2; will-change: transform, opacity; } .hero-eyebrow { margin-bottom: 28px; } .hero h1 { font-family: var(--heroname); font-weight: 900; /* Name Darsh Patel */ font-size: clamp(60px, 11vw, 180px); line-height: 0.86; letter-spacing: 0.0em; position: relative; z-index: 2; margin-left: -0.02em; } .hero h1 .ln { display: block; overflow: hidden; } .hero h1 .ln span { display: inline-block; } .hero .seal-wrap { position: absolute; right: 2%; top: -6%; } .hero-hook { font-family: var(--display); font-weight: 600; font-size: clamp(20.9px, 3.23vw, 41.8px); line-height: 1.12; letter-spacing: 0.04em; max-width: 16ch; margin: 30px 0 14px; color: var(--fg); } .hero-hook .accent { color: var(--vermillion); font-style: italic; } .hero-sub { font-family: var(--mono); font-size: clamp(11.4px, 1.24vw, 13.3px); letter-spacing: 0.048em; color: var(--fg-dim); max-width: 52ch; line-height: 1.7; } .hero-sub b { color: var(--fg); font-weight: 700; } .hero-actions { display: flex; gap: 16px; align-items: center; margin-top: 44px; flex-wrap: wrap; } .hero-meta { display: flex; gap: 28px; align-items: center; margin-top: 48px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.096em; color: var(--fg-faint); } .hero-meta .socials { display: flex; gap: 18px; } .hero-meta a { color: var(--fg-dim); text-decoration: none; transition: color 0.3s; position: relative; } .hero-meta a:hover { color: var(--vermillion); } .hero-meta .ph { color: var(--fg-faint); } .hero-meta .ph sup { color: var(--vermillion); font-size: 7.6px; } /* buttons */ /* buttons — chopped, katana-cut blocks (no ovals) */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.4px; letter-spacing: 0.072em; padding: 16px 28px; border-radius: 0; text-decoration: none; border: 1px solid var(--fg); color: var(--fg); background: transparent; cursor: none; position: relative; overflow: hidden; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); transition: color 0.4s var(--ease), border-color 0.4s, transform 0.4s var(--ease); } .btn:hover { transform: translateY(-3px) scale(1.03); } .btn .lbl { position: relative; z-index: 2; } .btn::after { content: ''; position: absolute; inset: 0; background: var(--fg); border-radius: 0; transform: scale(0,1); transform-origin: left; transition: transform 0.5s var(--ease); z-index: 1; } .btn:hover { color: var(--paper); } body.is-dark .btn:hover { color: var(--dark); } .btn:hover::after { transform: scale(1,1); } .btn.primary { background: var(--vermillion); border-color: var(--vermillion); color: #fff; } .btn.primary::after { background: var(--ink); } body.is-dark .btn.primary::after { background: var(--cream); } .btn.primary:hover { color: #fff; } body.is-dark .btn.primary:hover { color: var(--dark); } .btn .arrow { transition: transform 0.4s var(--ease); position: relative; z-index: 2; } .btn:hover .arrow { transform: translateX(4px); } .btn .ph-tag { font-size: 7.6px; opacity: 0.6; position: relative; z-index: 2; } .scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.288em; color: var(--fg-faint); text-transform: uppercase; } .scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(var(--fg-faint), transparent); animation: scrolldown 2s var(--ease) infinite; } @keyframes scrolldown { 0% { transform: scaleY(0); transform-origin: top; } 40% { transform: scaleY(1); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ============================ ABOUT ===================================== */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; } .about-headline { font-family: var(--display); font-weight: 700; font-size: clamp(32.3px, 4.94vw, 72.2px); line-height: 1.0; letter-spacing: 0.04em; } .about-headline .em { color: var(--vermillion); } .about-body { font-size: clamp(14.2px, 1.33vw, 17.1px); line-height: 1.75; color: var(--fg-dim); max-width: 44ch; } .about-body p + p { margin-top: 20px; } .about-body b { color: var(--fg); font-weight: 800; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 64px; margin-bottom: 80px; background: var(--hairline); border: 1px solid var(--hairline); } .stat { background: var(--panel); backdrop-filter: blur(4px); padding: 30px 26px; transition: background 0.4s var(--ease), transform 0.4s var(--ease); } .stat:hover { background: var(--hairline); } .stat .num { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.7vw, 68.4px); line-height: 0.9; letter-spacing: -0.024em; display: flex; align-items: baseline; gap: 4px; } .stat .num .suf { font-size: 0.4em; color: var(--vermillion); } .stat .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.144em; text-transform: uppercase; color: var(--fg-faint); margin-top: 12px; } .current-interests-card { margin-top: 64px; border-top: 1px solid var(--hairline); padding-top: 40px; } .interests-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.192em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 24px; } .interests-tags { display: flex; flex-wrap: wrap; gap: 12px; } .chip-anim { font-family: var(--mono); font-size: 10.9px; letter-spacing: 0.048em; padding: 8px 16px; border: 1px solid var(--hairline); border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); color: var(--fg-dim); background: var(--panel); backdrop-filter: blur(4px); transition: color 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s; cursor: none; user-select: none; } .chip-anim:hover { transform: translateY(-3px); border-color: var(--vermillion); color: var(--fg); background: var(--background); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1); } /* ============================ EXPERIENCE ================================ */ .timeline { display: flex; flex-direction: column; } .tl-item { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--hairline); position: relative; transition: padding-left 0.5s var(--ease); } .tl-item:last-child { border-bottom: 1px solid var(--hairline); } .tl-item:hover { padding-left: 8px; } .tl-when { font-family: var(--mono); font-size: 11.4px; letter-spacing: 0.072em; color: var(--fg-faint); text-align: left; padding: 4px 0 4px 36px; background: var(--background); position: relative; z-index: 2; margin-top: -4px; } .tl-when .now { color: var(--vermillion); } .tl-main { display: flex; flex-direction: column; gap: 10px; } .tl-role { font-family: var(--display); font-weight: 700; font-size: clamp(20.9px, 2.47vw, 30.4px); letter-spacing: -0.016em; line-height: 1.05; } .tl-role .at { color: var(--fg-faint); font-weight: 600; } .tl-org { font-family: var(--mono); font-size: 11.4px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vermillion); } .tl-desc { color: var(--fg-dim); font-size: 14.7px; line-height: 1.7; max-width: 60ch; } .tl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.048em; padding: 5px 11px; border: 1px solid var(--hairline); border-radius: 0; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); color: var(--fg-faint); } /* ============================ RESEARCH ================================== */ .research { } .research-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28.5px, 4.75vw, 76px); align-items: center; border: 1px solid var(--hairline); background: var(--panel); backdrop-filter: blur(6px); padding: clamp(30.4px, 4.75vw, 60.8px); position: relative; overflow: hidden; } .research-card .glyph-rail { position: absolute; right: -40px; top: -40px; width: 320px; height: 320px; opacity: 0.5; pointer-events: none; } .research-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--vermillion); margin-bottom: 18px; display: inline-block; } .research-title { font-family: var(--display); font-weight: 700; font-size: clamp(24.7px, 3.23vw, 39.9px); line-height: 1.08; letter-spacing: 0.04em; margin-bottom: 20px; } .research-body { color: var(--fg-dim); font-size: 15.2px; line-height: 1.75; max-width: 46ch; } .research-body b { color: var(--fg); font-weight: 800; } .research-metrics { display: flex; gap: 36px; margin-top: 30px; flex-wrap: wrap; } .research-metrics .m .v { font-family: var(--display); font-weight: 800; font-size: 32.3px; letter-spacing: -0.016em; } .research-metrics .m .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.144em; text-transform: uppercase; color: var(--fg-faint); margin-top: 6px; } /* ============================ WORK ====================================== */ .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; } .card { grid-column: span 6; position: relative; border: 1px solid var(--hairline); background: var(--panel); backdrop-filter: blur(8px); padding: 30px; min-height: 420px; display: flex; flex-direction: column; text-decoration: none; color: var(--fg); overflow: hidden; isolation: isolate; transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s; transform-style: preserve-3d; will-change: transform; } .card.w7 { grid-column: span 7; } .card.w5 { grid-column: span 5; } .card.w8 { grid-column: span 8; } .card.w4 { grid-column: span 4; } .card .card-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--green-glow), transparent 65%); filter: blur(20px); opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: -1; transform: translate(-50%,-50%); } /* cursor-tracking green spotlight */ .card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease); background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--green-spot), transparent 62%); } .card:hover::before { opacity: 1; } /* green edge that draws along the top on hover */ .card::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--vermillion), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); z-index: 1; } .card:hover::after { transform: scaleX(1); } .card > * { position: relative; z-index: 1; } .card:hover { border-color: rgba(22,163,74,0.5); box-shadow: 0 40px 80px -36px rgba(0,0,0,0.55), 0 0 0 1px rgba(22,163,74,0.08); } .card:hover .card-glow { opacity: 1; } /* soft lift on hover — composed with JS tilt when present */ .card[data-tilt]:hover { /* tilt JS owns transform */ } .card:not([data-tilt]):hover { transform: translateY(-6px) scale(1.012); } .card-title { transition: transform 0.45s var(--ease), color 0.4s; } .card:hover .card-title { transform: translateX(6px); color: var(--vermillion); } .card:hover .card-num { color: var(--vermillion); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; } .card-num { font-family: var(--mono); font-size: 11.4px; color: var(--vermillion); letter-spacing: 0.12em; } .card-kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.192em; text-transform: uppercase; color: var(--fg-faint); } .card-badge { font-family: var(--mono); font-size: 8.6px; letter-spacing: 0.168em; color: var(--vermillion); border: 1px solid var(--vermillion); border-radius: 0; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); padding: 4px 9px; } .card-title { font-family: var(--display); font-weight: 700; font-size: clamp(20.9px, 2.18vw, 28.5px); letter-spacing: 0.02em; line-height: 1.05; margin-top: auto; will-change: transform; } .card-desc { color: var(--fg-dim); font-size: 13.8px; line-height: 1.6; margin-top: 14px; max-width: 40ch; } .card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; } .card-foot { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.072em; color: var(--fg-dim); } .card-foot a { color: var(--fg-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.3s; } .card-foot a:hover { color: var(--vermillion); } .card-foot .ph { color: var(--fg-faint); } .card .ink-blot { position: absolute; right: -30px; bottom: -30px; width: 160px; height: 160px; opacity: 0; transition: opacity 0.6s; pointer-events: none; } .card:hover .ink-blot { opacity: 0.4; } /* card style variants (driven by data-cardstyle on .work-grid) */ .work-grid[data-cardstyle="outline"] .card { background: transparent; backdrop-filter: none; } .work-grid[data-cardstyle="solid"] .card { background: var(--dark-2); backdrop-filter: none; } body:not(.is-dark) .work-grid[data-cardstyle="solid"] .card { background: var(--paper-2); } .work-grid[data-cardstyle="index"] .card { padding-top: 64px; } .work-grid[data-cardstyle="index"] .card .card-num { position: absolute; top: 24px; left: 30px; font-family: var(--display); font-size: 43.7px; opacity: 0.18; } /* grid layout variants (driven by data-grid on .work-grid) */ .work-grid[data-grid="uniform"] .card.feat { grid-column: span 4; min-height: 320px; } .work-grid[data-grid="uniform"] .card .card-badge { display: none; } .work-grid[data-grid="list"] .card, .work-grid[data-grid="list"] .card.feat { grid-column: span 12; min-height: 0; } .work-grid[data-grid="list"] .card { display: grid; grid-template-columns: 64px 1.1fr 1fr auto; align-items: center; gap: 28px; padding: 26px 30px; } .work-grid[data-grid="list"] .card .card-top { flex-direction: column; align-items: flex-start; gap: 8px; } .work-grid[data-grid="list"] .card .card-title { margin-top: 0; } .work-grid[data-grid="list"] .card .card-desc { margin-top: 0; } .work-grid[data-grid="list"] .card .card-tags { margin-top: 0; } .work-grid[data-grid="list"] .card .card-foot { margin-top: 0; } @media (max-width: 820px) { .work-grid[data-grid="list"] .card, .work-grid[data-grid="list"] .card.feat { grid-template-columns: 1fr; gap: 14px; } } /* ============================ TOOLKIT =================================== */ .toolkit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } .tk-group { background: var(--panel); backdrop-filter: blur(4px); padding: 34px 30px; } .tk-group h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.192em; text-transform: uppercase; color: var(--vermillion); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; } .tk-group h4 .n { color: var(--fg-faint); } .tk-items { display: flex; flex-wrap: wrap; gap: 10px; } .tk-items span { font-family: var(--sans); font-size: 15.2px; color: var(--fg-dim); padding: 8px 0; } .tk-items span:not(:last-child)::after { content: '·'; margin-left: 10px; color: var(--vermillion); opacity: 0.5; } .tk-big span { font-family: var(--display); font-size: clamp(17.1px, 1.9vw, 24.7px); font-weight: 700; color: var(--fg); } /* ============================ INTERLUDE ================================= */ .interlude { padding-block: clamp(120px, 16vw, 240px); display: flex; justify-content: center; text-align: center; position: relative; z-index: 2; pointer-events: none; } .interlude q { font-family: var(--display); font-weight: 700; font-size: clamp(28.5px, 5.7vw, 83.6px); line-height: 1.02; letter-spacing: 0.04em; max-width: 18ch; quotes: none; } .interlude q u { color: var(--vermillion); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } .interlude .il-mark { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 32px; display: block; } /* ============================ CONTACT =================================== */ .contact { text-align: center; } .contact .big { font-family: var(--display); font-weight: 700; font-size: clamp(34.2px, 6.65vw, 104.5px); line-height: 0.95; letter-spacing: -0.028em; } .contact .big .em { color: var(--vermillion); } .mail-row { display: inline-flex; align-items: center; gap: 14px; margin: 44px 0 10px; flex-wrap: wrap; justify-content: center; } .mail-btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: clamp(14.2px, 2.09vw, 22.8px); letter-spacing: 0.024em; padding: 20px 32px; border: 1px solid var(--hairline); border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); background: var(--panel); backdrop-filter: blur(6px); color: var(--fg); cursor: none; transition: border-color 0.4s, transform 0.4s var(--ease); } .mail-btn:hover { border-color: var(--vermillion); transform: translateY(-3px); } .mail-btn .copy-ico { width: 18px; height: 18px; opacity: 0.6; } .mail-btn.copied { border-color: #22c55e; color: #22c55e; } .contact-socials { display: flex; gap: 26px; justify-content: center; margin-top: 38px; font-family: var(--mono); font-size: 12.4px; letter-spacing: 0.072em; } .contact-socials a { color: var(--fg-dim); text-decoration: none; transition: color 0.3s; } .contact-socials a:hover { color: var(--vermillion); } .contact-socials .ph { color: var(--fg-faint); } /* ============================ FOOTER ==================================== */ .footer { padding: 60px 0 48px; border-top: 1px solid var(--hairline); } .footer-inner { display: flex; align-items: center; justify-content: center; position: relative; } .footer .footer-brand { position: absolute; left: 0; } .footer .plogo { width: 40px; height: 40px; } .footer .center { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-faint); text-align: center; line-height: 1.6; } /* ---- reveal animations: gentle ink-bleed rise (opacity + rise + soft blur) ---- */ /* ---- reveal animations: focus-pull (arrives blurred + enlarged, snaps sharp) ---- */ [data-reveal] { opacity: 0; transform: translateY(38px) scale(1.04); filter: blur(14px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); } [data-reveal].in { opacity: 1; transform: none; filter: none; } [data-reveal-stagger] > * { opacity: 0; transform: translateY(30px) scale(1.035); filter: blur(11px); transition: opacity 0.9s var(--ease), transform 0.95s var(--ease), filter 0.95s var(--ease); } [data-reveal-stagger].in > * { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; clip-path: none !important; } .scroll-cue .line, .clock .blink, .status-pill .pulse { animation: none !important; } } /* ============================ CURSOR ==================================== */ #cursor { position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none; mix-blend-mode: normal; will-change: transform; transition: opacity 0.3s; } #cursor .drop { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 60% 40% 55% 45%; background: var(--vermillion); transform: translate(-50%,-50%) rotate(0deg); transition: width 0.3s var(--ease), height 0.3s var(--ease), border-radius 0.4s, background 0.3s; } #cursor .ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border: 1px solid var(--vermillion); border-radius: 50%; transform: translate(-50%,-50%) scale(0.6); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.4s, width 0.3s, height 0.3s; } #cursor .clabel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 26px); white-space: nowrap; font-family: var(--mono); font-size: 8.6px; letter-spacing: 0.192em; text-transform: uppercase; color: var(--vermillion); opacity: 0; transition: opacity 0.3s; } #cursor.hover .drop { width: 56px; height: 56px; opacity: 0.14; border-radius: 50%; background: var(--vermillion); } #cursor.hover .ring { opacity: 1; transform: translate(-50%,-50%) scale(1.55); border-width: 1px; border-color: var(--vermillion); } #cursor.label .clabel { opacity: 1; background: var(--vermillion); color: #fff; } #cursor.label .drop { width: 6px; height: 6px; } #cursor.brush .drop { width: 5px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } #cursor.down .drop { width: 22px; height: 22px; } #cursor.zoom .drop { width: 72px; height: 72px; opacity: 0.18; background: var(--vermillion); } #cursor.zoom .ring { transform: translate(-50%,-50%) scale(1.7); border-color: var(--vermillion); } /* ---- tweaks-driven body tints (optional accent override) ---- */ body[data-accent="indigo"] { --vermillion: #5b6cf0; --vermillion-soft: #8a96f5; } body[data-accent="sumi"] { --vermillion: #2f6d63; --vermillion-soft: #4f8f84; } body[data-accent="gold"] { --vermillion: #b8862b; --vermillion-soft: #d0a44f; } /* ============================ RESPONSIVE ================================ */ @media (max-width: 1100px) { :root { --rail-w: 48px; } .rail .rail-label, .idx-nav a .idx-name { display: none; } .card { grid-column: span 6; } .card.feat { grid-column: span 12; } } @media (max-width: 820px) { .rail { display: none; } .wrap { padding: 0 24px; } .about-grid, .research-card { grid-template-columns: 1fr; } .toolkit { grid-template-columns: 1fr; } .tl-item { grid-template-columns: 1fr; gap: 12px; } .hero h1 { font-size: clamp(53.2px, 18.05vw, 114px); } .hero .seal-wrap { right: 0; top: -10%; transform: scale(0.7); } .topnav { display: none; } .stats { grid-template-columns: 1fr 1fr; } body { cursor: auto; } #cursor, #cursor-trail { display: none; } .work-grid { gap: 14px; } .card { grid-column: span 12 !important; min-height: 240px; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .hero-meta { gap: 16px; } } /* ============================================================================ ADDED — nav ink-underline hover · progress timeline · hero glyph · parallax orbs · ink-tear letters ========================================================================= */ /* ---- ink-brush underline on hover (replaces magnetic) ---- */ .topnav a, .hero-meta .socials a, .contact-socials a { position: relative; } .topnav a::after, .hero-meta .socials a::after, .contact-socials a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: var(--vermillion); clip-path: polygon(0 40%, 8% 0, 30% 60%, 55% 10%, 78% 70%, 100% 20%, 100% 100%, 0 100%); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 0.4s var(--ease), opacity 0.3s; } .topnav a:hover::after, .hero-meta .socials a:hover::after, .contact-socials a:hover::after { transform: scaleX(1); opacity: 1; } .brand { transition: transform 0.4s var(--ease); } .brand:hover { transform: translateY(-1px); } /* ---- right rail: growing scroll-progress timeline ---- */ .rail.right { justify-content: center; padding: 0; } .progress-rail { position: relative; height: 62vh; width: 100%; display: flex; align-items: stretch; justify-content: center; pointer-events: auto; } .pr-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: var(--hairline); } .pr-fill { position: absolute; left: 50%; top: 0; width: 2px; transform: translateX(-50%); height: 0; background: linear-gradient(var(--vermillion), var(--vermillion-soft)); box-shadow: 0 0 10px -1px var(--vermillion); transition: height 0.15s linear; } .pr-node { position: absolute; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: none; } .pr-node .pr-dot { width: 8px; height: 8px; flex: none; background: var(--paper); border: 1px solid var(--fg-faint); transform: rotate(45deg); transition: all 0.4s var(--ease); position: relative; z-index: 2; } body.is-dark .pr-node .pr-dot { background: var(--dark); } .pr-node .pr-label { writing-mode: vertical-rl; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; transition: color 0.4s, transform 0.4s var(--ease); } .pr-node .pr-num { font-family: var(--mono); font-size: 8.6px; color: var(--fg-faint); writing-mode: vertical-rl; opacity: 0.7; } /* left-rail nodes: labels sit to the right of the spine */ .pr-node.side-l, .pr-node.side-r { left: 50%; flex-direction: row; transform: translate(10px, -50%); } .pr-node:hover .pr-label { color: var(--fg); } .pr-node:hover .pr-dot { transform: rotate(45deg) scale(1.35); border-color: var(--vermillion); } .pr-node.passed .pr-dot { border-color: var(--vermillion); background: var(--vermillion); } .pr-node.active .pr-dot { border-color: var(--vermillion); background: var(--vermillion); transform: rotate(45deg) scale(1.6); box-shadow: 0 0 12px -1px var(--vermillion); } .pr-node.active .pr-label { color: var(--vermillion); } /* ---- left rail hosts the progress timeline ---- */ .rail.left { left: 0; right: auto; justify-content: center; align-items: center; padding: 100px 0 40px; pointer-events: none; } .rail.left .progress-rail { pointer-events: auto; height: min(62vh, 520px); } .rail.right { display: none; } /* ---- big background hero ASCII donut — right-center, not flush right ---- */ .donut-canvas { position: absolute; will-change: transform, opacity; right: -25vw; top: 50%; transform: translateY(-50%); width: clamp(522.5px, 68.4vw, 959.5px); height: clamp(522.5px, 68.4vw, 959.5px); z-index: 0; pointer-events: none; opacity: 1.0; transition: opacity 0.8s var(--ease); } body.is-dark .donut-canvas { opacity: 0.22; mix-blend-mode: screen; } @media (max-width: 900px) { .donut-canvas { right: 50%; transform: translate(50%, -42%); width: min(92vw, 420px); height: min(92vw, 420px); opacity: 0.16; } } /* ---- living ink atmosphere canvas (dark sections) ---- */ .flow-canvas { position: fixed; inset: 0; z-index: 2; pointer-events: none; width: 100vw; height: 100vh; opacity: 0; transition: opacity 1.1s var(--ease); } body.is-dark .flow-canvas { opacity: 1; } /* ---- ink-tear letters (name) — will-change scoped to active tear only ---- */ .hero h1 .ch { display: inline-block; transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.9s ease; } .hero h1.tear-active .ch { will-change: transform, filter, opacity; } @media (prefers-reduced-motion: reduce) { .hero canvas { transform: none !important; filter: none !important; } .bg-orb { transition: none; } } @media (max-width: 820px) { .rail.left { display: none; } .brand .brand-txt { display: none; } } /* ============================================================================ v4 — neural network bg · 3D diorama cards · fixed clock · research strip · stronger scroll reveal · flip counter · enso ========================================================================= */ /* ---- neural ink constellation canvas removed — ink engine + flow clouds carry the atmosphere now; the full-bleed dots/lines read as noise ---- */ /* ---- fixed horizontal clock, bottom-right ---- */ .clock-fixed { position: fixed; right: 22px; bottom: 18px; z-index: 8; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.168em; color: var(--fg-dim); padding: 8px 13px; border: 1px solid var(--hairline); background: var(--panel); backdrop-filter: blur(6px); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); pointer-events: none; transition: color 0.6s, border-color 0.6s; white-space: nowrap; } .clock-fixed .t { white-space: nowrap; } .clock-fixed .blink { width: 5px; height: 5px; border-radius: 50%; background: var(--vermillion); animation: blink 1.6s steps(1) infinite; } @media (max-width: 820px) { .clock-fixed { right: 12px; bottom: 12px; font-size: 9.5px; padding: 6px 10px; } } /* ---- ongoing-research strip (inside Experience, not a full section) ---- */ .research-strip { margin-top: 30px; display: grid; grid-template-columns: 200px 1fr auto; gap: 32px; align-items: center; padding: 26px 30px; position: relative; border: 1px solid var(--hairline); background: var(--panel); backdrop-filter: blur(6px); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); border-left: 2px solid var(--vermillion); } .rs-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.192em; text-transform: uppercase; color: var(--vermillion); display: flex; align-items: center; gap: 9px; } .rs-live { width: 8px; height: 8px; border-radius: 50%; background: var(--vermillion); box-shadow: 0 0 0 0 rgba(22,163,74,0.55); animation: pulse 2.2s infinite; flex: none; } .rs-title { font-family: var(--display); font-weight: 700; font-size: clamp(16.2px, 1.8vw, 20.9px); line-height: 1.15; letter-spacing: -0.012em; margin-bottom: 8px; } .rs-desc { color: var(--fg-dim); font-size: 13.3px; line-height: 1.6; max-width: 64ch; } .rs-desc b { color: var(--fg); } .rs-meta { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; } @media (max-width: 900px) { .research-strip { grid-template-columns: 1fr; gap: 14px; } .rs-meta { flex-direction: row; flex-wrap: wrap; } } /* ---- work cards: 3D diorama (children float at different depths) ---- */ .work-grid { perspective: 1100px; } .card { transform-style: preserve-3d; transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s; } .card .card-top { transform: translateZ(26px); transition: transform 0.5s var(--ease); } .card .card-title { transform: translateZ(46px); } .card .card-desc { transform: translateZ(30px); transition: transform 0.5s var(--ease), color 0.4s; } .card .card-tags { transform: translateZ(38px); transition: transform 0.5s var(--ease); } .card .card-foot { transform: translateZ(22px); transition: transform 0.5s var(--ease); } .card .card-glow { transform: translateZ(60px) translate(-50%,-50%); } .card:hover .card-title { transform: translateZ(60px) translateX(6px); color: var(--vermillion); } .card:hover .card-tags { transform: translateZ(50px); } /* a floating ghost number deep in the card for parallax depth cueing */ .card .depth-num { position: absolute; right: 18px; bottom: 6px; z-index: 0; font-family: var(--display); font-weight: 800; font-size: 114px; line-height: 1; color: var(--fg); opacity: 0.05; transform: translateZ(6px); pointer-events: none; transition: opacity 0.5s; } .card:hover .depth-num { opacity: 0.1; } /* progress logo ring — scroll-driven via motion.js */ /* ---- flip-counter on the active rail number ---- */ .pr-num.flip { animation: numflip 0.5s var(--ease); } @keyframes numflip { 0% { transform: rotateX(0deg); opacity: 1; } 45% { transform: rotateX(90deg); opacity: 0.2; } 55% { transform: rotateX(-90deg); opacity: 0.2; } 100% { transform: rotateX(0deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .enso-orbit { animation: none !important; } .rs-live, .clock-fixed .blink { animation: none !important; } } /* ---- hanko "Copied" stamp ---- */ .hanko-stamp { position: fixed; z-index: 96; pointer-events: none; width: 64px; height: 64px; transform: translate(-50%,-50%) scale(0.2) rotate(-12deg); opacity: 0; } .hanko-stamp.go { animation: stamp 1.5s var(--ease) forwards; } @keyframes stamp { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(-20deg); } 16% { opacity: 1; transform: translate(-50%,-50%) scale(1.05) rotate(-8deg); } 26% { transform: translate(-50%,-50%) scale(0.96) rotate(-8deg); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(-8deg); } } /* ---- scramble glitch flourish (kept) ---- */ .glitching { position: relative; text-shadow: 2px 0 var(--vermillion), -2px 0 rgba(120,180,255,0.5); animation: glitchskew 0.18s steps(2) infinite; } @keyframes glitchskew { 0%,100% { transform: translateY(0); } 50% { transform: translate(1px,-1px); } } /* ---- work cards: staggered 3D diorama rise-in ---- */ .work-grid[data-reveal-stagger] > * { opacity: 0; transform: rotateX(14deg) translateY(52px) scale(0.97); filter: blur(7px); transition: opacity 0.9s var(--ease), transform 1s var(--ease), filter 0.9s var(--ease); } .work-grid[data-reveal-stagger].in > * { opacity: 1; transform: none; filter: none; } /* ---- experience rows: slide-in motion ---- */ .tl-item[data-reveal] { transform: translateX(-34px); } .tl-item[data-reveal].in { transform: none; } @media (prefers-reduced-motion: reduce) { .glitching { animation: none; text-shadow: none; } .work-grid[data-reveal-stagger] > *, .tl-item[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } } /* ============================================================================ v5 — curated scroll choreography: per-section entrance personalities, top progress hairline, section-number ink stamp. All composite transform / opacity / clip-path, one-shot via .in, reduced-motion safe. ========================================================================= */ /* ---- top scroll-progress hairline — hidden, progress now drives logo rotation ---- */ .scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9; pointer-events: none; background: transparent; display: none; } .scroll-prog i { display: block; height: 100%; width: 100%; background: var(--vermillion); transform: scaleX(0); transform-origin: left; } /* ---- viewport edge blur masks (top + bottom) ---- */ .edge-blur { position: fixed; left: 0; right: 0; height: 80px; z-index: 5; pointer-events: none; } .edge-blur.top { top: 0; mask-image: linear-gradient(to bottom, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .edge-blur.bottom { bottom: 0; mask-image: linear-gradient(to top, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ---- section-number ink stamp (one-shot, triggered by scrollLoop) ---- */ .sec-num { display: inline-block; transform-origin: left center; will-change: transform; } .sec-num.stamped { animation: secstamp .7s var(--ease); } @keyframes secstamp { 0% { transform: scale(1); } 30% { transform: scale(1.45); color: var(--vermillion-soft); } 100% { transform: scale(1); } } /* ---- hero eyebrow rule draw-in (kept subtle; name reveal untouched) ---- */ .hero-eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .25s; } .hero-eyebrow.in::before { transform: scaleX(1); } /* ---- brush-rule: paint across left→right ---- */ .brush-rule[data-reveal] { opacity: 1; transform: scaleX(0); transform-origin: left center; filter: none; transition: transform 1.2s var(--ease); } .brush-rule[data-reveal].in { transform: scaleX(1); } /* ---- about headline: keep scramble, add vermillion brush underline on .em ---- */ .about-headline .em { position: relative; } .about-headline .em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.1em; background: var(--vermillion); opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .3s, opacity .6s var(--ease) .3s; } .about-headline.in .em::after { transform: scaleX(1); opacity: 0.3; } /* ---- about paragraphs: ink-rise + stagger (container stays put) ---- */ .about-body[data-reveal] { transform: none; filter: none; } .about-body p { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .about-body.in p { opacity: 1; transform: none; } .about-body p:nth-child(1) { transition-delay: .05s; } .about-body p:nth-child(2) { transition-delay: .16s; } .about-body p:nth-child(3) { transition-delay: .27s; } /* ---- stats: diorama land (rotateX settle) + count-up land pulse ---- */ .stats[data-reveal-stagger] > .stat { opacity: 0; transform: translateY(30px) rotateX(8deg); filter: blur(8px); transform-origin: center bottom; transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); } .stats[data-reveal-stagger].in > .stat { opacity: 1; transform: none; filter: none; } .stat .num { transform-origin: left bottom; } .stat.landed .num { animation: statland .6s var(--ease); } @keyframes statland { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } .stat.landed .suf { animation: sufpulse .6s var(--ease); } @keyframes sufpulse { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } /* ---- experience: ink-stream spine draws down each row + chip pop ---- */ .tl-item { position: relative; } .tl-item::before { content: ''; position: absolute; left: 0px; top: 0; width: 2px; height: 100%; background: var(--vermillion); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease); z-index: 1; } .tl-item.in::before { transform: scaleY(1); } .tl-tags .chip { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .tl-item.in .tl-tags .chip { opacity: 1; transform: none; } .tl-item.in .tl-tags .chip:nth-child(1) { transition-delay: .2s; } .tl-item.in .tl-tags .chip:nth-child(2) { transition-delay: .28s; } .tl-item.in .tl-tags .chip:nth-child(3) { transition-delay: .36s; } /* ---- research strip: seal-press (scale settle) + left border draws ---- */ .research-strip[data-reveal] { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(8px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); } .research-strip[data-reveal].in { opacity: 1; transform: none; filter: none; } .research-strip { border-left-color: transparent; } .research-strip::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--vermillion); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .1s; } .research-strip.in::before { transform: scaleY(1); } /* ---- interlude: mark fade-up + quote bloom + .em brush underline ---- */ .interlude [data-reveal] { transform: none; filter: none; } .interlude .il-mark { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .interlude [data-reveal].in .il-mark { opacity: 1; transform: none; } .interlude q { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease) .05s; } .interlude [data-reveal].in q { opacity: 1; transform: none; } .interlude q .em { position: relative; } .interlude q .em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.12em; background: var(--vermillion); opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .35s, opacity .6s var(--ease) .35s; } .interlude [data-reveal].in q .em::after { transform: scaleX(1); opacity: 0.25; } /* ---- work cards: diorama cascade (kept) + card-num flip-in ---- */ .work-grid.in .card .card-num { animation: numflip .6s var(--ease) both; } .work-grid.in > .card:nth-child(1) .card-num { animation-delay: .15s; } .work-grid.in > .card:nth-child(2) .card-num { animation-delay: .27s; } .work-grid.in > .card:nth-child(3) .card-num { animation-delay: .39s; } .work-grid.in > .card:nth-child(4) .card-num { animation-delay: .51s; } .work-grid.in > .card:nth-child(5) .card-num { animation-delay: .63s; } .work-grid.in > .card:nth-child(6) .card-num { animation-delay: .75s; } /* ---- toolkit: chip flutter + under-dot bloom on hover ---- */ .tk-items span { position: relative; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s; } .toolkit.in .tk-items span { opacity: 1; transform: none; } .toolkit.in .tk-items span:nth-child(1) { transition-delay: .08s; } .toolkit.in .tk-items span:nth-child(2) { transition-delay: .14s; } .toolkit.in .tk-items span:nth-child(3) { transition-delay: .20s; } .toolkit.in .tk-items span:nth-child(4) { transition-delay: .26s; } .toolkit.in .tk-items span:nth-child(5) { transition-delay: .32s; } .toolkit.in .tk-items span:nth-child(6) { transition-delay: .38s; } .tk-items span::before { content: ''; position: absolute; left: 0; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--vermillion); opacity: 0; transform: translateY(4px) scale(0.5); transition: opacity .3s var(--ease), transform .3s var(--ease); } .tk-items span:hover { color: var(--fg); } .tk-items span:hover::before { opacity: 1; transform: translateY(0) scale(1); } /* ---- contact headline: line-mask reveal + .em ink wash bleed ---- */ .big[data-reveal] { opacity: 1; transform: none; filter: none; } .big .ln-mask { display: block; overflow: hidden; } .big .ln-mask > span { display: inline-block; transform: translateY(115%); transition: transform 1s var(--ease); } .big.in .ln-mask > span { transform: translateY(0); } .big .ln-mask:nth-child(2) > span { transition-delay: .12s; } .big .em { position: relative; } .big .em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.1em; background: var(--vermillion); opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .5s, opacity .6s var(--ease) .5s; } .big.in .em::after { transform: scaleX(1); opacity: 0.28; } /* ---- reduced motion: neutralize all v5 choreography ---- */ @media (prefers-reduced-motion: reduce) { .scroll-prog i { transform: none !important; } .sec-num.stamped { animation: none !important; } .hero-eyebrow::before, .brush-rule[data-reveal], .about-headline .em::after, .about-body p, .stats[data-reveal-stagger] > .stat, .tl-item::before, .tl-tags .chip, .research-strip[data-reveal], .research-strip::before, .interlude .il-mark, .interlude q, .interlude q .em::after, .tk-items span, .tk-items span::before, .big .ln-mask > span, .big .em::after { transform: none !important; opacity: 1 !important; filter: none !important; } .about-headline .em::after, .interlude q .em::after, .big .em::after { opacity: 0.28 !important; } .work-grid.in .card .card-num { animation: none !important; } .stat.landed .num, .stat.landed .suf { animation: none !important; } /* restore the static left border the ::before replaced in motion mode */ .research-strip { border-left-color: var(--vermillion) !important; } .research-strip::before { display: none !important; } } /* ============================ EASTER EGGS =============================== */ body.overdrive-mode { --vermillion: #ff0055; --green-glow: #ff0055; --green-spot: rgba(255, 0, 85, 0.12); } body.overdrive-mode .donut-canvas { animation: overdrive-spin 2s linear infinite !important; opacity: 0.8 !important; filter: hue-rotate(90deg) brightness(1.5); } /* ---- Easter Egg 2: Geometric Click Ripples ---- */ .click-ripple { position: fixed; pointer-events: none; z-index: 100; width: 40px; height: 40px; border: 1px solid var(--vermillion); transform: translate(-50%, -50%) scale(0.2) rotate(45deg); opacity: 1; animation: clickRipple 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes clickRipple { 100% { transform: translate(-50%, -50%) scale(1.5) rotate(90deg); opacity: 0; } } /* ---- Easter Egg 4: Terminal Mode (Konami Code) ---- */ body.terminal-mode { --paper: #000; --dark: #000; --fg: #0f0; --fg-dim: #0c0; --fg-faint: #060; --vermillion: #0f0; --hairline: rgba(0, 255, 0, 0.3); --panel: rgba(0, 0, 0, 0.8); } body.terminal-mode .noise-overlay, body.terminal-mode .vignette { display: none; } body.overdrive-mode .bg-orb { animation: overdrive-pulse 0.5s ease-in-out infinite alternate !important; mix-blend-mode: color-dodge !important; opacity: 0.8 !important; } @keyframes overdrive-spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } @keyframes overdrive-pulse { 0% { transform: scale(1); filter: blur(40px); } 100% { transform: scale(1.4); filter: blur(80px); background: #ff0055; } } /* ===================== CLICK RIPPLE =========================== */ .ripple-burst { position: fixed; pointer-events: none; z-index: 9999; } .r-ring, .r-dot, .r-particle { position: absolute; left: 0; top: 0; transform-origin: center; } .r-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--vermillion); animation: burstRing 0.6s cubic-bezier(0.16,1,0.3,1) forwards; } .r-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--vermillion); animation: burstDot 0.5s cubic-bezier(0.16,1,0.3,1) forwards; } .r-particle { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--vermillion); animation: burstPart 0.6s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes burstRing { 0% { transform: scale(0.2); opacity: 1; border-width: 2px; } 100% { transform: scale(1.5); opacity: 0; border-width: 0; } } @keyframes burstDot { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes burstPart { 0% { transform: rotate(var(--angle)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--angle)) translateY(-35px) scale(0); opacity: 0; } } /* ===================== HOVER MICRO-INTERACTIONS ======================= */ @keyframes wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(15deg) scale(1.1); } 50% { transform: rotate(0deg) scale(1.1); } 75% { transform: rotate(-15deg) scale(1.1); } 100% { transform: rotate(0deg) scale(1); } } .mail-btn:hover .copy-ico { animation: wiggle 0.5s ease-in-out; color: var(--vermillion); } .chip { transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important; } .card:hover .chip { border-color: rgba(22, 163, 74, 0.4); } .chip:hover { color: var(--vermillion) !important; border-color: var(--vermillion) !important; transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15); z-index: 2; position: relative; } .toolkit-sec { margin-top: clamp(100px, 15vh, 250px); }