/* ========================================================================== Pete Lazzaro — personal brand site assets/css/site.css -------------------------------------------------------------------------- Contents 01 Reset & base 02 Design tokens 03 Ambient background (mesh / grain / grid) 04 Navigation & scroll progress 05 Reveal + motion system 06 Section shell & editorial typography 07 Hero 08 Marquee 09 Now / current role 10 AI lab 11 Work (mosaic + case dialogs) 12 Life (light panel) 13 Contact & footer 14 Media placeholders 15 Reduced motion & print ========================================================================== */ /* 01 — Reset & base ======================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; /* Nav is fixed; keep anchor targets clear of it. */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 1rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--theme); color: #06070a; } :focus-visible { outline: 2px solid var(--theme); outline-offset: 3px; border-radius: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* 02 — Design tokens ====================================================== */ /* Registered so the ambient wash can *transition* between section accents rather than snapping. Browsers without @property still get the colour, just without the cross-fade. */ @property --theme { syntax: ''; inherits: true; initial-value: #00d4aa; } @property --theme-2 { syntax: ''; inherits: true; initial-value: #3b82f6; } :root { /* Surfaces */ --ink: #06070a; --ink-2: #0b0d13; --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); /* Type */ --text: #f3f5f9; --text-2: rgba(243, 245, 249, .64); --text-3: rgba(243, 245, 249, .40); /* Accents — swapped per section by JS, see [data-theme] below */ --theme: #00d4aa; --theme-2: #3b82f6; /* Families */ --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Instrument Serif', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Motion */ --ease: cubic-bezier(.22, 1, .36, 1); /* soft, Apple-ish out-expo */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur: .9s; /* Rhythm */ --gutter: clamp(20px, 5vw, 64px); --maxw: 1240px; --section-y: clamp(96px, 14vh, 190px); --radius: 18px; } /* Per-section accent pairs. JS mirrors the active section's value onto so the fixed ambient wash can cross-fade. */ [data-theme="brand"] { --theme: #00d4aa; --theme-2: #3b82f6; } [data-theme="role"] { --theme: #ff9f45; --theme-2: #ff5d5d; } [data-theme="ai"] { --theme: #8b7cff; --theme-2: #37d9f0; } [data-theme="work"] { --theme: #00d4aa; --theme-2: #06b6d4; } [data-theme="life"] { --theme: #e8794a; --theme-2: #d9a441; } /* 03 — Ambient background ================================================= */ .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; /* Colour transition is what sells the section-to-section shift. */ transition: --theme 1.2s var(--ease), --theme-2 1.2s var(--ease); } /* Two drifting colour fields tinted by the live accent pair. */ .ambient::before, .ambient::after { content: ''; position: absolute; border-radius: 50%; filter: blur(110px); opacity: .38; will-change: transform; } .ambient::before { width: 70vw; height: 70vw; top: -26vw; left: -16vw; background: radial-gradient(circle, var(--theme), transparent 68%); animation: drift-a 26s var(--ease-in-out) infinite alternate; } .ambient::after { width: 60vw; height: 60vw; top: 32vh; right: -20vw; background: radial-gradient(circle, var(--theme-2), transparent 68%); opacity: .28; animation: drift-b 32s var(--ease-in-out) infinite alternate; } @keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 7vh, 0) scale(1.14); } } @keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-7vw, -6vh, 0) scale(1); } } /* Hairline grid — reads as precision engineering, stays nearly invisible. */ .ambient-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 10%, transparent 80%); } /* Film grain keeps the large flat gradients from banding. */ .ambient-grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .038; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Everything readable sits above the ambient layers. */ .page { position: relative; z-index: 2; } /* 04 — Navigation & scroll progress ======================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--gutter); background: rgba(6, 7, 10, .55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transform: translateY(-100%); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), background .5s var(--ease), border-color .5s var(--ease); } .nav.is-visible { transform: none; opacity: 1; border-bottom-color: var(--line); } /* Over the light Life panel the glass inverts. */ .nav.is-light { background: rgba(250, 247, 243, .72); border-bottom-color: rgba(28, 22, 18, .1); color: #1c1612; } .nav-brand { font-weight: 700; font-size: .95rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; } .nav-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 12px var(--theme); flex: none; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 7px 13px; border-radius: 999px; transition: color .3s var(--ease), background .3s var(--ease); } .nav.is-light .nav-links a { color: rgba(28, 22, 18, .6); } .nav-links a:hover { color: var(--text); background: var(--surface-2); } .nav.is-light .nav-links a:hover { color: #1c1612; background: rgba(28, 22, 18, .07); } .nav-links a.is-active { color: var(--theme); background: color-mix(in srgb, var(--theme) 12%, transparent); } .nav-cta { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .nav-cta:hover { background: var(--theme); border-color: var(--theme); color: #06070a; } .nav.is-light .nav-cta { border-color: rgba(28, 22, 18, .22); color: #1c1612; } /* Reading progress hairline. */ .progress { position: fixed; top: 0; left: 0; z-index: 60; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--theme), var(--theme-2)); transition: transform .1s linear; } @media (max-width: 800px) { .nav-links { display: none; } } /* 05 — Reveal + motion system ============================================= */ /* Elements opt in with [data-reveal]; JS flips .is-in when they enter view. --i gives a stagger index inside a group. */ [data-reveal] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } [data-reveal="blur"] { filter: blur(14px); transform: translate3d(0, 20px, 0); } [data-reveal="scale"] { transform: translate3d(0, 34px, 0) scale(.955); } [data-reveal="left"] { transform: translate3d(-34px, 0, 0); } [data-reveal="right"] { transform: translate3d(34px, 0, 0); } [data-reveal="fade"] { transform: none; } [data-reveal].is-in { opacity: 1; transform: none; filter: none; will-change: auto; } /* Per-word headline reveal, built by JS from [data-split]. */ .word { display: inline-block; overflow: hidden; vertical-align: top; } .word > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); } .is-in .word > span, .word.is-in > span { transform: none; } /* Parallax targets — JS writes --py, CSS consumes it so transforms compose. */ [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* 06 — Section shell & editorial typography =============================== */ .section { position: relative; padding: var(--section-y) 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .wrap--narrow { max-width: 900px; } /* Small mono eyebrow above every section title. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--theme); margin-bottom: 26px; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .55; } .section-title { font-weight: 700; font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -.035em; max-width: 17ch; } .section-title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--theme); } .section-lede { font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.68; color: var(--text-2); max-width: 62ch; margin-top: 26px; } .rule { height: 1px; border: 0; background: linear-gradient(90deg, var(--line), transparent); margin: 0; } /* 07 — Hero =============================================================== */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 64px; overflow: hidden; } /* Pointer-tracked spotlight. JS writes --mx / --my. */ .hero-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 460px circle at var(--mx, 50%) var(--my, 40%), color-mix(in srgb, var(--theme) 16%, transparent), transparent 62%); opacity: 0; transition: opacity .8s var(--ease); } .hero:hover .hero-spot { opacity: 1; } .hero-inner { position: relative; z-index: 1; } .hero-status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); backdrop-filter: blur(10px); margin-bottom: 34px; } .hero-status b { color: var(--text); font-weight: 500; } @media (max-width: 480px) { .hero-status { font-size: .62rem; padding: 7px 13px 7px 11px; } } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 10px var(--theme); animation: pulse 2.4s var(--ease-in-out) infinite; flex: none; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } .hero-name { font-weight: 800; font-size: clamp(3rem, 12vw, 9.5rem); line-height: .88; letter-spacing: -.02em; margin-bottom: 8px; } .hero-name .line { display: block; } /* The reveal masks each word (overflow: hidden), which shaved the last letter's overhang. Pad the mask and pull it back so layout is unchanged. */ .hero-name .word { padding: 0 .08em; margin: 0 -.08em; } .hero-name .tint, .hero-name .tint .word > span { background: linear-gradient(120deg, var(--theme), var(--theme-2) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Rotating role line — one slot, words cross-fade through blur. */ .hero-roles { position: relative; height: 1.5em; margin-top: 26px; font-size: clamp(1.1rem, 2.6vw, 1.85rem); font-weight: 500; letter-spacing: -.02em; } .hero-roles .role { position: absolute; inset: 0; /* display:block + matching line-height centres the text without making the text node and its separate flex items (which eats the space). */ display: block; line-height: 1.5; opacity: 0; filter: blur(10px); transform: translate3d(0, 14px, 0); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); } .hero-roles .role.is-on { opacity: 1; filter: none; transform: none; } .hero-roles .role span { color: var(--theme); } .hero-sub { margin-top: 26px; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.7; color: var(--text-2); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .btn { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 500; letter-spacing: -.01em; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--line-2); transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--solid { background: var(--text); color: var(--ink); border-color: var(--text); } .btn--solid:hover { background: var(--theme); border-color: var(--theme); color: #06070a; } .btn--ghost:hover { background: var(--surface-2); border-color: var(--line-2); } .btn .arrow { transition: transform .35s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* Hero layout: copy left, portrait right. */ .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); align-items: center; } /* Photo reel column: as tall as the screen allows (4:5 frame, so width = height x .8), pinned to the right edge. */ .hero-portrait { position: relative; width: min(100%, calc((100svh - 150px) * .8)); justify-self: end; } /* Soft halo behind the portrait, tinted by the live accent. */ .hero-portrait::before { content: ''; position: absolute; inset: -16%; border-radius: 50%; z-index: 0; background: radial-gradient(circle, color-mix(in srgb, var(--theme) 32%, transparent), transparent 66%); filter: blur(48px); } .portrait-frame { position: relative; z-index: 1; aspect-ratio: 1 / 1; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-2); box-shadow: 0 34px 90px rgba(0, 0, 0, .55); animation: float 9s var(--ease-in-out) infinite alternate; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.03) contrast(1.04); } .portrait-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, transparent 48%, color-mix(in srgb, var(--theme) 26%, transparent)); mix-blend-mode: overlay; } @keyframes float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -14px, 0); } } /* Photo reel — replaces the single portrait. Slides stack in the frame; the incoming one is revealed with a clip-path wipe (direction varies per slide), then drifts slowly (Ken Burns) until the next change. The outgoing slide sinks back and dims underneath. The progress bar's own animation is the timer, so pausing the bar pauses the reel. */ .reel { --dwell: 5.2s; --swap: 1.15s; position: relative; z-index: 1; } .reel-frame { aspect-ratio: 4 / 5; isolation: isolate; touch-action: pan-y; } .reel-frame::after { z-index: 4; } /* keep the accent tint on top */ .reel-slide { position: absolute; inset: 0; margin: 0; visibility: hidden; z-index: 0; background: var(--ink-2); } .reel-slide img { display: block; --dx: -2.5%; --dy: -1.5%; } .reel-slide:nth-child(3n+2) img { --dx: 2.5%; --dy: -2%; } .reel-slide:nth-child(3n) img { --dx: 0%; --dy: 2.5%; } .reel-slide.is-active { visibility: visible; z-index: 2; animation: reel-wipe-l var(--swap) var(--ease) both; } .reel-slide.is-leaving { visibility: visible; z-index: 1; animation: reel-sink var(--swap) var(--ease) both; } .reel-slide.is-active[data-fx="r"] { animation-name: reel-wipe-r; } .reel-slide.is-active[data-fx="u"] { animation-name: reel-wipe-u; } .reel-slide.is-active[data-fx="iris"] { animation-name: reel-iris; } .reel-slide.is-active img { animation: reel-drift calc(var(--dwell) + var(--swap)) linear both; } .reel-slide.is-leaving img { animation: none; transform: scale(1.14); } @keyframes reel-wipe-l { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } } @keyframes reel-wipe-r { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } @keyframes reel-wipe-u { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } } @keyframes reel-iris { from { clip-path: circle(0% at 50% 60%); } to { clip-path: circle(75% at 50% 60%); } } @keyframes reel-sink { from { transform: none; filter: brightness(1); } to { transform: scale(.94); filter: brightness(.35) saturate(.6); } } @keyframes reel-drift { 0% { transform: scale(1.28); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 22% { transform: scale(1.08); animation-timing-function: linear; } 100% { transform: scale(1.15) translate3d(var(--dx), var(--dy), 0); } } /* A band of light crosses the frame on every change. */ .reel-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--theme) 30%, rgba(255, 255, 255, .35)) 50%, transparent 62%); mix-blend-mode: soft-light; transform: translateX(-120%); } .reel.is-swapping .reel-sheen { animation: reel-sheen var(--swap) var(--ease) both; } @keyframes reel-sheen { to { transform: translateX(120%); } } /* Caption: category chip + short line, lifted in after the wipe lands. */ .reel-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 64px 20px 18px; background: linear-gradient(to top, rgba(4, 5, 10, .78), transparent); color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: -.015em; } .reel-slide figcaption span { display: table; margin-bottom: 7px; font-family: var(--mono); font-size: .58rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--theme); } .reel-slide figcaption, .reel-slide figcaption span { opacity: 0; } .reel-slide.is-active figcaption { animation: reel-rise .8s var(--ease) calc(var(--swap) * .45) both; } .reel-slide.is-active figcaption span { animation: reel-rise .8s var(--ease) calc(var(--swap) * .6) both; } @keyframes reel-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } /* Controls: counter, progress bar, prev / pause / next. */ .reel-ui { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 0 4px; } .reel-count { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--text-3); display: flex; gap: 6px; overflow: hidden; } .reel-count b { color: var(--text); font-weight: 500; display: inline-block; } .reel-count b.tick { animation: reel-tick .5s var(--ease) both; } @keyframes reel-tick { from { transform: translateY(90%); opacity: 0; } } .reel-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .reel-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--theme), var(--theme-2)); transform-origin: left; transform: scaleX(0); } .reel.is-running .reel-bar i, .reel.is-running .reel-clock { animation: reel-progress var(--dwell) linear both; } .reel-clock { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } @keyframes reel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .reel-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: .85rem; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .reel-btn:hover { background: var(--theme); border-color: var(--theme); color: #06070a; } /* Pause icon (two bars) that turns into a play triangle. */ .reel-btn[data-reel-pause] span { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .reel.is-paused .reel-btn[data-reel-pause] span { width: 0; height: 0; border-right: 0; margin-left: 3px; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; } /* A click on the photo, the pause button, being off screen or a hidden tab all freeze the reel mid-frame. Hovering does not. */ .reel.is-held .reel-bar i, .reel.is-held .reel-clock, .reel.is-held .reel-slide.is-active img { animation-play-state: paused; } .reel-frame[role="button"] { cursor: pointer; } /* No grey flash when a finger lands on the photo (iOS / Android). */ .reel-frame { -webkit-tap-highlight-color: transparent; } .reel-frame:focus-visible { outline: 2px solid var(--theme); outline-offset: 4px; } /* Custom cursor over the photo: a frosted disc carrying a pause or play glyph, ringed by a hairline that fills in step with the countdown. The outer span only follows the mouse; the body does all the animating. */ .reel.has-cursor .reel-frame { cursor: none; } .reel-cursor { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; will-change: transform; } .reel-cursor-body { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 7, 10, .34); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 14px 36px rgba(0, 0, 0, .38), 0 0 26px color-mix(in srgb, var(--theme) 28%, transparent); opacity: 0; transform: scale(.35); transition: opacity .35s var(--ease), transform .45s var(--ease); } .reel.is-cursor .reel-cursor-body { opacity: 1; transform: none; } .reel.is-cursor.is-pressing .reel-cursor-body { transform: scale(.86); transition-duration: .12s; } /* Countdown ring: a conic gradient masked down to a 2px band. */ @property --reel-p { syntax: ''; inherits: false; initial-value: 0%; } .reel-cursor-ring { position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(var(--theme), var(--theme-2) var(--reel-p), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); } .reel.is-running .reel-cursor-ring { animation: reel-ring var(--dwell) linear both; } /* Must come after the rule above: the animation shorthand resets play-state, so an earlier pause rule would lose. */ .reel.is-held .reel-cursor-ring { animation-play-state: paused; } @keyframes reel-ring { from { --reel-p: 0%; } to { --reel-p: 100%; } } /* Glyphs: two rounded bars (pause) and a soft triangle (play) that swap with a quick turn and scale. */ .reel-cursor-pause, .reel-cursor-play { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .45s var(--ease); } .reel-cursor-pause { width: 16px; height: 18px; background: linear-gradient(#fff, #fff) left / 5px 100% no-repeat, linear-gradient(#fff, #fff) right / 5px 100% no-repeat; border-radius: 2px; } .reel-cursor-play { width: 18px; height: 20px; margin-left: 5px; background: #fff; clip-path: polygon(8% 4%, 96% 50%, 8% 96%); border-radius: 3px; opacity: 0; transform: rotate(-90deg) scale(.4); } .reel.is-paused .reel-cursor-pause { opacity: 0; transform: rotate(90deg) scale(.4); } .reel.is-paused .reel-cursor-play { opacity: 1; transform: none; } /* "Paused" tag, so a stopped reel reads as intentional after the mouse leaves (and on touch screens, where there's no cursor). */ .reel-state { position: absolute; top: 16px; left: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(6, 7, 10, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14); opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; } .reel-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 10px var(--theme); } .reel.is-paused .reel-state { opacity: 1; transform: none; } .reel.is-paused.is-cursor .reel-state { opacity: 0; } /* cursor says it already */ @media (max-width: 900px) { .hero-layout { grid-template-columns: 1fr; gap: 44px; } .hero-portrait { width: 100%; max-width: 520px; justify-self: start; } .portrait-frame { animation: none; } /* Stacked: the reel sits below the fold, so no fade-in as you reach it — the photos are simply there, at full brightness. */ .hero-portrait[data-reveal] { opacity: 1; transform: none; transition: none; } } /* Paired documentary shots (field + stage). */ .media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .shot { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--ink-2); margin: 0; } .shot img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.84) contrast(1.06); /* scale() leaves headroom so parallax never exposes an edge */ transform: translate3d(0, var(--py, 0px), 0) scale(1.26); transition: filter .6s var(--ease); } .shot:hover img { filter: brightness(1) contrast(1.06); } .shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 48%, rgba(6, 7, 10, .82)); } .shot-label { position: absolute; left: 14px; bottom: 13px; z-index: 1; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } .scroll-cue { display: flex; align-items: center; gap: 10px; margin-top: 56px; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--theme), transparent); animation: cue 2.2s var(--ease-in-out) infinite; transform-origin: top; } @keyframes cue { 0%, 100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } @media (max-width: 720px) { .media-pair { grid-template-columns: 1fr; } } /* 08 — Marquee ============================================================ */ .marquee { position: relative; padding: 26px 0; border-block: 1px solid var(--line); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: slide 44s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; gap: 44px; padding-right: 44px; flex: none; } .marquee-group span { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .marquee-group i { width: 5px; height: 5px; border-radius: 50%; background: var(--theme); opacity: .55; flex: none; } @keyframes slide { to { transform: translate3d(-50%, 0, 0); } } /* 09 — Now / current role ================================================= */ .now-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .role-card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--surface), transparent 60%); padding: clamp(24px, 3.2vw, 38px); backdrop-filter: blur(10px); } .role-card + .role-card { margin-top: 18px; } .role-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .role-title { font-size: 1.28rem; font-weight: 650; letter-spacing: -.025em; } .role-org { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--theme); margin-top: 8px; } .role-when { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--text-3); white-space: nowrap; } .role-body { margin-top: 18px; color: var(--text-2); line-height: 1.72; } /* Focus-area list. */ .focus-list { margin-top: 26px; display: grid; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; } .focus-item { background: var(--ink-2); padding: 18px 20px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; transition: background .35s var(--ease); } .focus-item:hover { background: var(--surface); } .focus-num { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--theme); padding-top: 3px; } .focus-name { font-weight: 600; letter-spacing: -.015em; } .focus-desc { color: var(--text-2); font-size: .92rem; line-height: 1.62; margin-top: 5px; } @media (max-width: 900px) { .now-grid { grid-template-columns: 1fr; } } /* 10 — AI lab ============================================================= */ .lab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; } .lab-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(165deg, var(--surface), transparent 55%); padding: clamp(26px, 3vw, 40px); transition: border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease); } .lab-card:hover { border-color: color-mix(in srgb, var(--theme) 45%, transparent); transform: translateY(-3px); } .lab-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at 80% 0%, color-mix(in srgb, var(--theme) 12%, transparent), transparent 70%); opacity: 0; transition: opacity .5s var(--ease); } .lab-card:hover::after { opacity: 1; } .lab-card > * { position: relative; z-index: 1; } .lab-card--wide { grid-column: 1 / -1; } .lab-kicker { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .lab-name { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.035em; margin-top: 12px; } .lab-name span { color: var(--theme); } .lab-desc { color: var(--text-2); line-height: 1.7; margin-top: 14px; max-width: 54ch; } .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; } .chip { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .3s var(--ease), color .3s var(--ease); } .lab-card:hover .chip { border-color: var(--line-2); } /* Terminal flourish — the type-out is driven by JS. */ .term { margin-top: 28px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 4, 7, .72); overflow: hidden; font-family: var(--mono); font-size: .8rem; line-height: 1.85; } .term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); } .term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; } .term-bar i:first-child { background: #ff5f57; } .term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; } .term-bar b { margin-left: 8px; font-weight: 400; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .term-body { padding: 18px 16px; min-height: 190px; } .term-line { white-space: pre-wrap; word-break: break-word; } .term-line .p { color: var(--theme); } /* prompt */ .term-line .c { color: var(--text); } /* command */ .term-line .o { color: var(--text-3); } /* output */ .term-line .ok { color: #46d39a; } .term-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--theme); vertical-align: -.18em; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* Fleet roster. */ .fleet { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; margin-top: 26px; } .fleet-unit { background: var(--ink-2); padding: 20px; transition: background .35s var(--ease); } .fleet-unit:hover { background: var(--surface); } .fleet-unit h4 { font-size: .98rem; font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; } .fleet-unit h4::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--theme); flex: none; } .fleet-unit p { font-size: .86rem; color: var(--text-2); line-height: 1.6; margin-top: 8px; } @media (max-width: 860px) { .lab-grid { grid-template-columns: 1fr; } } /* 11 — Work (mosaic + case dialogs) ======================================= */ /* Animated stat strip. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 52px; } .stat { background: var(--ink-2); padding: 30px 24px; } .stat-value { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 750; letter-spacing: -.045em; color: var(--theme); font-variant-numeric: tabular-nums; } .stat-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; } /* Editorial mosaic — 12-col on desktop, stacked on mobile. */ .mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 52px; } .case { grid-column: span 4; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); text-align: left; width: 100%; transition: border-color .45s var(--ease), transform .45s var(--ease); } .case:nth-child(1) { grid-column: span 7; } .case:nth-child(2) { grid-column: span 5; } .case:nth-child(3) { grid-column: span 5; } .case:nth-child(4) { grid-column: span 7; } .case:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--case, var(--theme)) 50%, transparent); } .case-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #04050a; } .case-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) contrast(1.05); transition: transform 1s var(--ease), filter .5s var(--ease); } .case:hover .case-media img { transform: scale(1.06); filter: brightness(.95) contrast(1.05); } .case-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 35%, rgba(4, 5, 10, .92)); } .case-idx { position: absolute; top: 13px; left: 14px; z-index: 2; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; color: var(--case, var(--theme)); background: rgba(4, 5, 10, .66); backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 999px; } .case-status { position: absolute; top: 13px; right: 14px; z-index: 2; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(4, 5, 10, .66); backdrop-filter: blur(6px); color: var(--text-2); } .case-status.is-active { color: #46d39a; } .case-body { padding: 22px 24px 26px; } .case-title { font-size: 1.16rem; font-weight: 650; letter-spacing: -.028em; } .case-meta { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; } .case-line { color: var(--text-2); font-size: .93rem; line-height: 1.62; margin-top: 13px; } .case-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--case, var(--theme)); } .case-more .arrow { transition: transform .35s var(--ease); } .case:hover .case-more .arrow { transform: translateX(4px); } @media (max-width: 1000px) { .mosaic { grid-template-columns: repeat(2, 1fr); } .case, .case:nth-child(1), .case:nth-child(2), .case:nth-child(3), .case:nth-child(4) { grid-column: span 1; } } @media (max-width: 620px) { .mosaic { grid-template-columns: 1fr; } } /* --- Case dialog --------------------------------------------------------- */ .case-dialog { width: min(880px, 92vw); max-height: 88vh; /* The universal `margin:0` reset above wipes out the UA stylesheet's `margin:auto`, which is what centres a modal