/* ======================================== Custom Properties ======================================== */ :root { --vh: 1vh; --color-bg: #000000; --color-text: rgba(255, 255, 255, 0.9); --color-text-dim: rgba(255, 255, 255, 0.8); --color-text-muted: rgba(255, 255, 255, 0.6); --color-accent: #FF4B38; --color-border: rgba(255, 255, 255, 0.08); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 10rem; --max-width: 1400px; --gutter: 3rem; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ======================================== Reset ======================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { font-size: 16px; background: #000; /* fills corners outside the rounded clip */ overflow: hidden; height: 100%; } body { font-family: var(--font); background: var(--color-bg); color: var(--color-text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; height: 100%; cursor: none; clip-path: inset(25px round 32px); } /* ======================================== Site Frame — Solid accent border + inner liquid glass Appended to via JS, sits outside body clip-path. 20px solid border with a glass panel inside. ======================================== */ .site-frame { position: fixed; inset: 0; border: 25px solid #000; border-radius: 57px; pointer-events: none; z-index: 99999; } /* iOS Safari status bar — sample black above frame */ html::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #000; z-index: 100000; pointer-events: none; } a { text-decoration: none; color: inherit; cursor: none; -webkit-tap-highlight-color: transparent; } ul { list-style: none; } img { max-width: 100%; display: block; } ::selection { background: var(--color-accent); color: var(--color-bg); } /* ======================================== Custom Cursor (Cuberto-style) ======================================== */ .cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; will-change: transform; } .cursor__circle { width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(1); transition: transform 0.4s var(--ease), background 0.3s ease, opacity 0.3s ease; } .cursor__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #000; white-space: nowrap; opacity: 0; transition: transform 0.4s var(--ease), opacity 0.3s ease; } /* Pointer state — links, buttons */ .cursor.-pointer .cursor__circle { transform: translate(-50%, -50%) scale(2); } /* View state — project cards */ .cursor.-view { mix-blend-mode: normal; } .cursor.-view .cursor__circle { transform: translate(-50%, -50%) scale(5); background: #FF4B38; } .cursor.-view .cursor__text { transform: translate(-50%, -50%) scale(1); opacity: 1; color: #fff; } /* Hidden on touch devices */ @media (pointer: coarse) { .cursor { display: none; } body, a { cursor: auto; } } /* ======================================== Navigation ======================================== */ .nav { position: fixed; top: 24px; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem var(--gutter); } .nav__logo { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; color: #fff; position: relative; overflow: hidden; display: inline-block; mix-blend-mode: difference; } .nav__logo span { display: block; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .nav__logo::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: #fff; white-space: nowrap; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .nav__logo:hover span { transform: translateY(-100%); } .nav__logo:hover::after { transform: translateY(-100%); } .nav__links { display: flex; gap: 2rem; } .nav__links a { font-size: 0.875rem; font-weight: 400; color: #fff; position: relative; overflow: hidden; display: inline-block; mix-blend-mode: difference; } /* Cuberto-style text slide on hover */ .nav__links a span { display: block; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .nav__links a::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: rgba(255, 255, 255, 0.9); white-space: nowrap; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .nav__links a:hover span { transform: translateY(-100%); } .nav__links a:hover::after { transform: translateY(-100%); } /* ======================================== Labels ======================================== */ .label { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 1.5rem; text-align: left; } /* ======================================== Hero ======================================== */ .hero { min-height: 100vh; min-height: 100dvh; min-height: calc(var(--vh) * 100); display: flex; align-items: flex-end; padding: 0 var(--gutter); padding-top: 8rem; padding-bottom: 20px; } .hero__inner { width: 100%; max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 3fr 1fr; gap: var(--space-md); align-items: end; } .hero__left { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .hero__services-wrap { padding-bottom: 0.5rem; } .hero__headline { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; } /* Cuberto-style word reveal */ .hero__word { display: inline-block; overflow: hidden; vertical-align: top; } .hero__word-inner { display: inline-block; opacity: 0; transform: translateY(100%); animation: wordReveal 0.8s var(--ease) forwards; } /* "with love" orange highlight that fades to white */ .hero__highlight { color: var(--color-accent); transition: color 1.2s ease; } .hero__highlight.is-faded { color: var(--color-text); } .hero__arrow { display: inline-block; margin-left: 0.4rem; vertical-align: middle; opacity: 0.5; } @keyframes wordReveal { to { opacity: 1; transform: translateY(0); } } .hero__right { display: flex; align-items: flex-end; justify-content: flex-start; height: 100%; } .hero__label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 1.25rem; } .hero__services { display: flex; flex-direction: column; gap: 0; } .hero__services li { font-size: 0.9375rem; font-weight: 400; color: var(--color-text); padding: 0.75rem 0; position: relative; opacity: 0; filter: blur(8px); transform: translateY(20px); animation: blurFadeIn 0.6s ease-out forwards; } .hero__services li span { position: relative; z-index: 1; } .hero__services li .service-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; display: block; } .hero__services li:first-child { border-top: none; } .hero__services li:nth-child(1) { animation-delay: 0.5s; } .hero__services li:nth-child(2) { animation-delay: 0.6s; } .hero__services li:nth-child(3) { animation-delay: 0.7s; } .hero__services li:nth-child(4) { animation-delay: 0.8s; } .hero__services li:nth-child(5) { animation-delay: 0.9s; } .hero__services li:nth-child(6) { animation-delay: 1.0s; } .hero__services li:nth-child(7) { animation-delay: 1.1s; } .hero__services li:nth-child(8) { animation-delay: 1.2s; } .hero__services li:nth-child(9) { animation-delay: 1.3s; } @keyframes blurFadeIn { to { opacity: 1; filter: blur(0); transform: translateY(0); } } /* ======================================== Scramble Reveal (Vibe coding) ======================================== */ .scramble-reveal { display: inline; font-family: var(--font); letter-spacing: 0.02em; color: var(--color-text); transition: letter-spacing 0.4s ease; } .scramble-reveal.is-resolved { font-family: inherit; letter-spacing: inherit; } /* ======================================== Projects ======================================== */ .projects { padding: var(--space-2xl) var(--gutter) var(--space-xl); } .projects__header { max-width: var(--max-width); margin: 0 auto var(--space-lg); } .projects__grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* ---- Card — Cuberto-style inverse scale ---- */ .card { display: block; border-radius: 0; overflow: visible; position: relative; transition: transform 0.8s var(--ease); opacity: 1; /* Visible by default */ background: transparent; } .card:hover { transform: scale(0.97); } .card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; will-change: transform, filter, opacity; border-radius: 16px; background: transparent; contain: layout style; } .card__img.webgl-active img { opacity: 0; } .card__placeholder, .card__img img, .card__img video { width: 100%; height: 100%; object-fit: cover; } .card:hover .card__placeholder, .card:hover .card__img img, .card:hover .card__img video { transform: scale(1.08); } .card__meta { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0.25rem; } .card__meta h3 { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; transition: transform 0.6s var(--ease); } .card:hover .card__meta h3 { transform: translateX(4px); } .card__meta span { font-size: 0.8125rem; color: var(--color-text-dim); font-weight: 400; transition: transform 0.6s var(--ease); } .card:hover .card__meta span { transform: translateX(-4px); } .card__cta { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; padding: 0 0.25rem; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s var(--ease); } .card:hover .card__cta { opacity: 1; transform: translateY(0); } /* ======================================== About ======================================== */ .about { padding: var(--space-2xl) var(--gutter); border-top: 1px solid var(--color-border); } .about__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-xl); } .case-text--lead { font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--color-text-dim); } .case-text { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--color-text-dim); } .about__lead { font-size: clamp(1.25rem, 2.5vw, 1.625rem); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; margin-bottom: var(--space-md); color: var(--color-text); } /* Scroll-triggered word reveal for about lead */ .about__lead .word { display: inline-block; overflow: hidden; vertical-align: top; margin-right: 0.3em; } .about__lead .word-inner { display: inline-block; transform: translateY(100%); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.7s ease; } .about__lead.is-visible .word-inner { transform: translateY(0); opacity: 1; } .about__body { font-size: 0.9375rem; font-weight: 400; line-height: 1.7; color: var(--color-text-dim); } .about__list { display: flex; flex-direction: column; } .about__list li { font-size: 0.9375rem; font-weight: 400; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); transition: padding-left 0.3s var(--ease), color 0.3s ease; cursor: none; } .about__list li:first-child { border-top: 1px solid var(--color-border); } .about__list li:hover { padding-left: 0.75rem; color: #fff; } /* ======================================== Contact ======================================== */ .contact { padding: var(--space-xl) var(--gutter) var(--space-2xl); } .contact__inner { max-width: var(--max-width); margin: 0 auto; } .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .contact__primary { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .contact__link { display: inline-block; color: var(--color-text); position: relative; overflow: hidden; } .contact__link span { display: block; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .contact__link::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: #fff; white-space: nowrap; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .contact__link:hover span { transform: translateY(-100%); } .contact__link:hover::after { transform: translateY(-100%); } .contact__link--lg { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.02em; } .contact__socials { display: flex; flex-direction: column; gap: 0; } .contact__social { font-size: 0.9375rem; font-weight: 400; color: var(--color-text-dim); border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; display: block; } .contact__social:first-child { border-top: 1px solid var(--color-border); } .contact__social span { display: block; padding: 0.75rem 0; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .contact__social::after { content: attr(data-text); position: absolute; left: 0; top: 100%; padding: 0.75rem 0; color: #fff; white-space: nowrap; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .contact__social:hover span { transform: translateY(-100%); } .contact__social:hover::after { transform: translateY(-100%); } /* ======================================== Footer ======================================== */ .footer { padding: var(--space-xl) var(--gutter) var(--space-md); } .footer__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); } /* Magnetic button wrapper for email */ .magnetic { display: inline-block; position: relative; } .footer__email { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); display: inline-block; position: relative; overflow: hidden; } .footer__email span { display: block; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .footer__email::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: #fff; white-space: nowrap; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .footer__email:hover span { transform: translateY(-100%); } .footer__email:hover::after { transform: translateY(-100%); } .footer__links { display: flex; flex-direction: column; gap: 0; } .footer__links a { font-size: 0.9375rem; font-weight: 400; color: var(--color-text-dim); border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; display: block; cursor: none; } .footer__links a:first-child { border-top: 1px solid var(--color-border); } .footer__links a span { display: block; padding: 0.5rem 0; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .footer__links a::after { content: attr(data-text); position: absolute; left: 0; top: 100%; padding: 0.5rem 0; color: #fff; white-space: nowrap; transition: transform 0.7s cubic-bezier(.19, 1, .22, 1); } .footer__links a:hover span { transform: translateY(-100%); } .footer__links a:hover::after { transform: translateY(-100%); } .footer__bottom { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--gutter); } .footer__bottom p { font-size: 0.75rem; color: var(--color-text-muted); } .footer__bottom p a { color: var(--color-text-muted); text-decoration: none; transition: color 0.3s ease; cursor: none; } .footer__bottom p a:hover { color: #fff; } .footer__social { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); } .footer__social a { font-size: 0.75rem; color: var(--color-text-muted); text-decoration: none; transition: color 0.3s ease; cursor: none; } .footer__social a:hover { color: #fff; } /* ======================================== Scroll Reveal ======================================== */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s var(--ease); } .reveal--visible { opacity: 1; transform: translateY(0); } /* Stagger cards in grid */ .card.reveal { transition-delay: 0s; } .projects__grid .card:nth-child(2).reveal { transition-delay: 0.1s; } .projects__grid .card:nth-child(3).reveal { transition-delay: 0.05s; } .projects__grid .card:nth-child(4).reveal { transition-delay: 0.15s; } .projects__grid .card:nth-child(5).reveal { transition-delay: 0.05s; } .projects__grid .card:nth-child(6).reveal { transition-delay: 0.15s; } .projects__grid .card:nth-child(7).reveal { transition-delay: 0.05s; } .projects__grid .card:nth-child(8).reveal { transition-delay: 0.15s; } /* ======================================== Smooth scroll overrides ======================================== */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } /* ======================================== Responsive ======================================== */ @media (max-width: 1024px) { :root { --gutter: 2rem; } .hero__inner { gap: var(--space-lg); } } @media (max-width: 768px) { :root { --gutter: 1.5rem; } html, body { background: #000; overflow: visible; height: auto; min-height: 100dvh; clip-path: none; cursor: auto; margin: 0; padding: 0; } html::after, html::before { display: none !important; } a { cursor: auto; } .cursor { display: none; } .site-frame { display: none !important; } .pt { display: none !important; } #liquidGradient { display: none !important; } .hero { padding-top: 8rem; padding-bottom: var(--space-lg); background: transparent; } .hero__inner { grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; } .hero__services li { font-size: 1.0625rem; padding: 0.875rem 0; } .hero__label { font-size: 0.8125rem; } .projects__grid { grid-template-columns: 1fr; gap: 2rem; } .card__meta { padding: 1rem 0.25rem; } .card__meta h3 { font-size: 1.0625rem; } .card__meta span { font-size: 0.9375rem; } .card__cta { font-size: 0.8125rem; } .label { font-size: 0.8125rem; } .nav { top: 20px; align-items: center; } .nav__logo { font-size: 0.8125rem; } .nav__links { gap: 1rem; align-items: center; } .nav__links a { font-size: 0.8125rem; } .about__inner { grid-template-columns: 1fr; gap: var(--space-lg); } .about__body { font-size: 1.0625rem; } .about__list li { font-size: 1.0625rem; } .contact__grid { grid-template-columns: 1fr; gap: var(--space-lg); } .contact__social { font-size: 1.0625rem; } .footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); } .footer__links a { font-size: 1.0625rem; } .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem; } .footer__bottom p { font-size: 0.875rem; } } .work-cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; text-align: left; } .work-card { grid-column: span 4; background: transparent; border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; transition: transform 0.4s var(--ease); text-align: left; display: flex; flex-direction: column; align-items: flex-start; } .work-card--wide { grid-column: span 12; } .work-card--full { grid-column: span 12; } .work-card:hover { transform: translateY(-2px); } .work-card__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; text-align: left; width: 100%; } .work-card__icon { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); flex: 0 0 auto; } .work-card__icon svg { width: 18px; height: 18px; } .work-card__title { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.9); text-align: left; } .work-card__list { display: grid; gap: 0.55rem; text-align: left; width: 100%; align-items: flex-start; } .work-card__item { font-size: 0.875rem; line-height: 1.35; color: var(--color-text-dim); text-align: left; } .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; align-items: stretch; } .analytics-diagram { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; align-items: stretch; } .analytics-diagram__title { grid-column: 1 / -1; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.5rem; text-transform: uppercase; } .bento-card { background: #131313; border-radius: 24.6588px; padding: 1.5rem; border: none; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); min-height: 120px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); width: 100%; opacity: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateY(20px) scale(0.95); animation: bentoCardAppear 0.8s ease forwards; } .bento-card:hover { transform: translateY(-6px) scale(1.02); background: #1a1a1a; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bento-card:nth-child(1) { animation-delay: 0.1s; } .bento-card:nth-child(2) { animation-delay: 0.2s; } .bento-card:nth-child(3) { animation-delay: 0.3s; } .bento-card:nth-child(4) { animation-delay: 0.4s; } .bento-card:nth-child(5) { animation-delay: 0.5s; } .bento-card:nth-child(6) { animation-delay: 0.6s; } .bento-card:nth-child(7) { animation-delay: 0.7s; } .bento-card:nth-child(8) { animation-delay: 0.8s; } .bento-card:nth-child(9) { animation-delay: 0.9s; } .bento-card:nth-child(10) { animation-delay: 1.0s; } @keyframes bentoCardAppear { 0% { opacity: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateY(20px) scale(0.95); } 50% { opacity: 0.5; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(10px) scale(0.98); } 100% { opacity: 1; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transform: translateY(0) scale(1); } } .bento-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); } .bento-card:hover { transform: translateY(-6px) scale(1.02); background: #1a1a1a; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .bento-card--metric2 { grid-area: metric2; } .bento-card--metric3 { grid-area: metric3; } .bento-card--chart1 { grid-area: chart1; } .bento-card--chart2 { grid-area: chart2; } .bento-card--chart3 { grid-area: chart3; } .bento-card--chart4 { grid-area: chart4; } /* Bento card sizes for grid */ .bento-card--main { grid-column: span 2; min-height: 220px; text-align: left; align-items: flex-start; } .bento-card--small { grid-column: span 1; min-height: 180px; } .bento-card--medium { grid-column: span 2; min-height: 180px; text-align: left; align-items: flex-start; } .bento-card--wide { grid-column: span 2; } .bento-card--tall { grid-column: span 1; min-height: 320px; } .bento-card--large { grid-column: span 2; } .top-friction-container { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 484px; margin: 0 auto; } .top-friction-container svg { width: 100%; height: auto; max-width: 484px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); transition: transform 0.3s var(--ease); } .top-friction-container:hover svg { transform: scale(1.02); } .bento-logo { margin-bottom: 1rem; display: flex; justify-content: center; align-items: center; } .bento-logo svg { max-width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); transition: transform 0.3s var(--ease); } .bento-card:hover .bento-logo svg { transform: scale(1.05); } .bento-metric { display: flex; flex-direction: column; gap: 1rem; justify-content: center; height: 100%; width: 100%; position: relative; z-index: 1; } .bento-metric__value { font-size: 2.5rem; font-weight: 700; color: #FF4B38; line-height: 1; margin-bottom: 0.5rem; opacity: 0; filter: blur(10px); animation: counterBlurIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; } /* Counter animation with blur to focus */ @keyframes counterBlurIn { 0% { opacity: 0; filter: blur(20px); transform: scale(0.8); } 50% { opacity: 0.7; filter: blur(8px); } 100% { opacity: 1; filter: blur(0px); transform: scale(1); } } .bento-metric__label { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); line-height: 1.3; font-weight: 500; opacity: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: textAppear 1s ease 0.7s forwards; } .bento-metric__detail { font-size: 0.875rem; color: rgba(255, 255, 255, 0.4); line-height: 1.3; font-weight: 500; margin-top: -0.5rem; } .bento-title { font-size: 1.125rem; font-weight: 600; color: white; line-height: 1.4; color: rgba(255, 255, 255, 0.95); line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 0.75rem; width: 100%; } .bento-title { font-size: 1.125rem; font-weight: 600; color: white; line-height: 1.4; margin-bottom: 0.75rem; opacity: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: textAppear 1s ease 0.6s forwards; } .bento-description { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); line-height: 1.4; font-weight: 400; letter-spacing: 0.01em; opacity: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: textAppear 1s ease 0.8s forwards; } @keyframes textAppear { 0% { opacity: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(10px); } 50% { opacity: 0.7; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transform: translateY(5px); } 100% { opacity: 1; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transform: translateY(0); } } .bento-progress { width: 100%; height: 22px; background: rgba(255, 255, 255, 0.08); border-radius: 11px; overflow: hidden; margin-top: 0.75rem; opacity: 0; animation: progressAppear 1s ease 0.9s forwards; } @keyframes progressAppear { 0% { opacity: 0; } 100% { opacity: 1; } } .bento-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, #FF4B38 0%, #ff6b5a 100%); border-radius: 100px; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 8px rgba(255, 75, 56, 0.4); } .bento-chart { height: 100%; display: flex; flex-direction: column; gap: 2rem; justify-content: center; position: relative; z-index: 1; } .bento-chart__title { font-size: 1.125rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; } .bento-chart__bars { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; justify-content: center; } .bar-chart { display: grid; gap: 0.85rem; } .bar-row { display: grid; grid-template-columns: 170px 1fr 70px; gap: 0.75rem; align-items: center; } .bar-label { font-size: 0.8125rem; color: var(--color-text-dim); } .bar-track { height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); } .bar-fill { height: 100%; border-radius: 100px; background: #FF4B38; display: block; } .bar-value { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.9); text-align: right; } .stats-cards { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .stats-card { background: rgba(255, 255, 255, 0.04); border-radius: 16px; padding: 1.1rem 1.1rem 1rem; } .stats-card__value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.92); margin-bottom: 0.25rem; } .stats-card__label { font-size: 0.8125rem; color: var(--color-text-dim); } @media (max-width: 1024px) { .work-card { grid-column: span 6; } .work-card--wide { grid-column: span 12; } } @media (max-width: 768px) { .work-card { grid-column: span 12; } .bar-row { grid-template-columns: 1fr; gap: 0.4rem; } .bar-value { text-align: left; } .stats-cards { grid-template-columns: 1fr; } /* Responsive bento grid */ .bento-grid { grid-template-columns: 1fr; gap: 0.75rem; } .bento-card--main { grid-column: span 1; } .bento-card--wide { grid-column: span 1; } .bento-card--tall { grid-column: span 1; min-height: 160px; } .bento-card--small { grid-column: span 1; } .bento-card--medium { grid-column: span 1; } .bento-card--large { grid-column: span 1; } } @media (max-width: 480px) { .hero__headline { font-size: 2.25rem; } .nav__links { gap: 1.25rem; } /* Mobile bento grid */ .bento-grid { grid-template-columns: 1fr; gap: 0.75rem; } .bento-card--main, .bento-card--wide, .bento-card--tall, .bento-card--small, .bento-card--medium, .bento-card--large { grid-column: span 1; } .bento-metric__value { font-size: 3rem; } .bento-title { font-size: 1.25rem; } .bento-description { font-size: 0.875rem; } } /* ======================================== Page Transition Overlay — Horizontal oval iris ======================================== */ .pt { position: fixed; inset: 0; z-index: 99999; pointer-events: none; } /* Legacy elements — hidden */ .pt__panel, .pt__left, .pt__right, .pt__top, .pt__bottom { display: none; } .pt__oval { position: absolute; inset: 0; background: #000; will-change: clip-path; transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1); clip-path: ellipse(120% 120% at 50% 50%); }