* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { margin: 0; padding: 0; background: var(--page-bg); overflow-x: clip; } /* ===== Theme tokens (switched via [data-theme] on ) ===== */ :root, [data-theme="dark"] { --page-bg: #000000; --about-card: #1c1c1c; --card: #2a2a2a; --card-border: transparent; --ink: #e1e0cc; --ink-strong: #dedbc8; --muted: #9ca3af; --faint: #6b7280; --noise-opacity: 0.15; --hair: rgba(255, 255, 255, 0.12); } [data-theme="light"] { --page-bg: #e7e4d3; --about-card: #f5f3e9; --card: #efece0; --card-border: rgba(20, 18, 10, 0.07); --ink: #211f17; --ink-strong: #2b2820; --muted: #6f6d5f; --faint: #9a9786; --noise-opacity: 0.05; --hair: rgba(20, 18, 10, 0.12); } .t-page { background: var(--page-bg); } .t-about-card { background: var(--about-card); } .t-card { background: var(--card); border: 1px solid var(--card-border); } .t-ink { color: var(--ink); } .t-ink-strong { color: var(--ink-strong); } .t-muted { color: var(--muted); } .t-faint { color: var(--faint); } .t-page, .t-about-card, .t-card { transition: background-color 0.45s ease, border-color 0.45s ease; } .t-ink, .t-ink-strong, .t-muted, .t-faint { transition: color 0.45s ease; } /* ===== AI-native emphasis (replaces serif italics for highlighted words) ===== An iridescent gradient that slowly flows through the text — reads as "AI-native" without shouting. Works on both the cream and the black canvas. */ .em { background-image: linear-gradient( 110deg, #9b8cff 0%, #5ea2ff 25%, #46c8c0 50%, #5ea2ff 75%, #9b8cff 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: emFlow 7s linear infinite; /* keep gradient text crisp */ -webkit-font-smoothing: antialiased; } @keyframes emFlow { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .em { animation: none; background-position: 0 0; } } /* Film-grain toggle */ .grain-off .noise-overlay, .grain-off .bg-noise { opacity: 0 !important; } /* Hairline dividers + generic scroll reveal for portfolio sections */ .t-hair { border-color: var(--hair); } /* DY monogram logo hover */ .dy-logo { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .dy-logo:hover { background-color: rgba(222,219,200,0.09); border-color: rgba(222,219,200,0.5); box-shadow: 0 0 0 3px rgba(222,219,200,0.07); } .dy-dot { transition: transform .25s ease, box-shadow .25s ease; } .dy-logo:hover .dy-dot { transform: scale(1.5); box-shadow: 0 0 8px 1px rgba(222,219,200,0.7); } /* Light mode: the cream pill + cream dot disappear on the cream page, so give the nav logo a darker outline, lift, and an ink dot. Scoped to the header so the home-page monogram (over the dark hero, inline-styled) is left alone. */ [data-theme="light"] header .dy-logo { border-color: rgba(20,18,10,0.24); background-color: rgba(20,18,10,0.05); } /* On the cream page a lighter hover just vanishes, so hover should glow/lift: keep the fill dark, sharpen the outline, and add a soft ink halo. */ [data-theme="light"] header .dy-logo:hover { background-color: rgba(20,18,10,0.07); border-color: rgba(20,18,10,0.6); box-shadow: 0 0 0 4px rgba(20,18,10,0.06), 0 6px 20px rgba(20,18,10,0.16); } [data-theme="light"] header .dy-dot { background-color: var(--ink); } [data-theme="light"] header .dy-logo:hover .dy-dot { transform: scale(1.5); background-color: var(--ink); box-shadow: 0 0 10px 2px rgba(20,18,10,0.5); } /* Tech-stack brand logos (monochrome simple-icons) */ .stack-logo { width: 20px; height: 20px; object-fit: contain; flex: none; opacity: 0.85; } [data-theme="dark"] .stack-logo { filter: invert(1); } .reveal-up { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .reveal-up { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-up.in { opacity: 1; transform: none; } } /* Selected-work horizontal reel */ .work-reel { cursor: grab; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .work-reel::-webkit-scrollbar { display: none; } .work-reel.grabbing { cursor: grabbing; } .work-reel.grabbing * { user-select: none; } .work-card { scroll-snap-align: start; } /* Marquee strip */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { animation: marquee 18s linear infinite; } @media (max-width: 640px) { .marquee { animation-duration: 11s; } } @media (prefers-reduced-motion: reduce) { .marquee { animation: none; } } /* Hero intro fade-up — final (visible) state is the resting style */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-fade-up { opacity: 1; animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-fade-up.delay-1 { animation-delay: 0.5s; } .hero-fade-up.delay-2 { animation-delay: 0.7s; } @media (prefers-reduced-motion: reduce) { .hero-fade-up { animation: none; opacity: 1; transform: none; } } /* Word pull-up (WordsPullUp / WordsPullUpMultiStyle) */ .pull-word { display: inline-block; opacity: 1; } @keyframes wordPullUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .pull-word { opacity: 0; } .pull-word.in { animation: wordPullUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } } /* Multi-line wrapping headings: staggered fade only (no vertical slide, so wrapping words never dip into the adjacent line during the reveal) */ .ms-word { display: inline-block; opacity: 1; } @keyframes msFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .ms-word { opacity: 0; } .ms-word.in { animation: msFade 0.55s ease both; } } /* Feature card entrance */ @keyframes cardEnter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .card-enter { opacity: 0; } .card-enter.in { animation: cardEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } } /* Superscript asterisk anchored to the end of the Prisma wordmark */ .asterisk-word { position: relative; } .asterisk-word::after { content: "*"; position: absolute; top: 0.65em; right: -0.3em; font-size: 0.31em; line-height: 1; } /* Fractal noise overlay for the hero video */ .noise-overlay { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 220px 220px; } /* Subtle fractal noise background for the features section */ .bg-noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 260px 260px; }