/* Homepage redesign: focused introduction, work preview, and current direction. */ #home{max-width:1650px;padding-bottom:96px;overflow:hidden} #home .hero-stage{min-height:100svh} #home .home-topbar{border-bottom:1px solid var(--line);padding-bottom:20px} .home-location{margin:0;font-family:'Pixelify Sans','Courier New',monospace;font-size:.72rem;letter-spacing:.075em;color:var(--muted);line-height:1.55} .home-location span{color:var(--sage);margin:0 8px} #home .home-hero-composition{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(36px,5vw,80px);align-items:center;min-height:calc(100svh - 220px);padding:52px 0 44px} #home .home-hero-copy{width:auto;max-width:680px} #home .home-role{max-width:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:28px} #home .home-role>span:first-child{margin:0;color:var(--role)} #home .home-description{max-width:480px;font-size:1rem;margin-top:18px;margin-bottom:26px} .hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .hero-socials{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--line);max-width:620px;width:100%} .hero-socials-label{flex:none;font-family:'Courier New',monospace;font-size:.56rem;letter-spacing:.14em;color:var(--faint)} .hero-socials-list{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;min-width:0;width:100%} .hero-socials-list a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;color:var(--muted);font-family:'Pixelify Sans','Courier New',monospace;font-size:.72rem;letter-spacing:.025em;white-space:nowrap;transition:color 150ms var(--ease-out),transform 150ms var(--ease-out)} .hero-socials-list a+a:before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:1px;background:var(--line)} .hero-social-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none} .hero-socials-list a:first-child .hero-social-icon,.hero-socials-list a:nth-child(3) .hero-social-icon{fill:currentColor;stroke:none} .hero-socials-list a:focus-visible{outline:1px solid var(--sage);outline-offset:2px;color:var(--sage)} @media(hover:hover) and (pointer:fine){.hero-socials-list a:hover{color:var(--sage);transform:translateY(-1px)}} .secondary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-height:48px;padding:10px 18px;border:1px solid var(--pix-border);background:var(--bg);font-family:'Pixelify Sans','Courier New',monospace;font-size:1.05rem;box-shadow:4px 4px 0 var(--pix-shadow);clip-path:polygon(0 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));transition:transform 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out)} .secondary-link .icon{width:19px;height:19px;color:var(--sage)} .hero-visual{position:relative;min-height:0;height:100%;border:1px solid var(--pix-border);background:linear-gradient(180deg,var(--pix-panel),transparent 72%);box-shadow:8px 8px 0 var(--pix-shadow);clip-path:polygon(0 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px));overflow:visible} .hero-visual:before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--pix-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pix-grid) 1px,transparent 1px);background-size:24px 24px;opacity:.65;pointer-events:none} #home .hero-visual .sculpture{right:4%;top:15%;width:88%;height:79%;min-height:0} #home .hero-visual .sculpture-shadow{left:20%;width:62%;bottom:6%} .hero-visual-stack{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:12px;align-self:stretch}.system-panel{position:relative;z-index:3;width:100%;border:1px solid var(--pix-border2);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(7px);box-shadow:4px 4px 0 var(--pix-shadow);font-family:'Pixelify Sans','Courier New',monospace} .system-panel dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0}.system-panel dl>div{padding:10px 11px;border-right:1px solid var(--pix-border)}.system-panel dl>div:last-child{border-right:0}.system-panel dt{font-size:.58rem;color:var(--faint);letter-spacing:.08em}.system-panel dd{margin:2px 0 0;font-size:.86rem;color:var(--ink)} #home .hero-visual .hoodie-picker{right:12px;top:auto;bottom:18px;transform:none} #home .hero-visual .hoodie-picker.is-minimized{transform:scale(.5)} #home .hero-visual .hoodie-toggle{right:60px;top:auto;bottom:23px;transform:none} #home .hero-visual .hoodie-toggle:hover{transform:translate(-1px,-1px)} .visual-corner{position:absolute;z-index:2;width:14px;height:14px;border-color:var(--sage);pointer-events:none}.visual-corner-a{left:-1px;bottom:-1px;border-left:3px solid var(--sage);border-bottom:3px solid var(--sage)}.visual-corner-b{right:-1px;top:-1px;border-right:3px solid var(--sage);border-top:3px solid var(--sage)} .home-capabilities{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:auto} .capability{min-width:0;padding:21px 20px 23px;border-right:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:3px;align-items:baseline}.capability:last-child{border-right:0}.capability strong{font-family:'Pixelify Sans','Courier New',monospace;font-weight:400;font-size:.98rem;letter-spacing:.035em}.capability>span:last-child{font-size:.75rem;color:var(--muted);line-height:1.45} .home-showcase,.home-current,.home-github,.home-resources{padding-top:96px} .home-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:38px}.home-section-head .eyebrow{margin-bottom:15px}.home-section-head h2{font-size:clamp(2.3rem,4.2vw,4rem)} .text-arrow-link{display:inline-flex;align-items:center;gap:14px;padding-bottom:5px;border-bottom:1px solid var(--link-line);font-family:'Pixelify Sans','Courier New',monospace;font-size:.94rem;white-space:nowrap;transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out)}.text-arrow-link .icon{width:17px;height:17px;color:var(--sage)} .featured-work{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--pix-border);background:var(--pix-panel);box-shadow:7px 7px 0 var(--pix-shadow);clip-path:polygon(0 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,100% 100%,10px 100%,10px calc(100% - 10px),0 calc(100% - 10px));transition:transform 200ms var(--ease-out),border-color 200ms var(--ease-out)} .featured-work-copy{padding:clamp(28px,4vw,54px);display:flex;flex-direction:column;min-width:0}.featured-work-meta{display:flex;justify-content:space-between;gap:16px;font-size:.63rem;letter-spacing:.1em;color:var(--faint);padding-bottom:18px;border-bottom:1px solid var(--pix-border)}.featured-work h3{font-family:'Pixelify Sans','Courier New',monospace;font-size:clamp(2rem,3.3vw,3.3rem);font-weight:400;margin-top:30px}.featured-work-copy>p{color:var(--muted);font-size:.9rem;line-height:1.75;margin:14px 0 21px;max-width:430px}.featured-work-copy ul{display:flex;gap:8px;flex-wrap:wrap}.featured-work-copy li{font-size:.66rem;letter-spacing:.08em;border:1px solid var(--pix-border);padding:5px 8px;color:var(--soft)}.featured-work-open{margin-top:auto;padding-top:36px;display:inline-flex;align-items:center;gap:12px;font-family:'Pixelify Sans','Courier New',monospace;font-size:.85rem;color:var(--sage)}.featured-work-open .icon{width:17px;height:17px;transition:transform 180ms var(--ease-out)} .featured-work-preview{margin:0;min-width:0;padding:22px 22px 16px;border-left:1px solid var(--pix-border);background:var(--panel-deep);display:flex;flex-direction:column}.featured-work-preview img{display:block;width:100%;height:100%;min-height:330px;object-fit:cover;object-position:top;border:1px solid var(--img-line);image-rendering:auto;transition:transform 350ms var(--ease-out)}.featured-work-preview figcaption{padding-top:12px;font-size:.62rem;letter-spacing:.08em;color:var(--fig)} .home-current{padding-bottom:4px}.home-current-head{margin-bottom:28px}.current-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.current-grid>div{padding:26px 22px 30px;border-right:1px solid var(--line);min-height:130px}.current-grid>div:last-child{border-right:0}.current-grid span{display:block;font-size:.61rem;letter-spacing:.1em;color:var(--faint);margin-bottom:18px}.current-grid strong{display:block;font-family:'Pixelify Sans','Courier New',monospace;font-size:1.12rem;font-weight:400;line-height:1.35;color:var(--soft3)} .home-github .dash-github{margin-top:0} .home-github-head{margin-bottom:28px} .home-resources{padding-bottom:0} @media (hover:hover) and (pointer:fine){.secondary-link:hover{transform:translate(-2px,-2px);border-color:var(--sage);color:var(--sage)}.text-arrow-link:hover{color:var(--sage);border-color:var(--sage)}.featured-work:hover{transform:translate(-3px,-3px);border-color:var(--sage)}.featured-work:hover .featured-work-preview img{transform:scale(1.015)}.featured-work:hover .featured-work-open .icon{transform:translate(3px,-3px)}} @media(max-width:1100px){#home .home-hero-composition{grid-template-columns:minmax(0,1fr) minmax(310px,.78fr);gap:32px}.hero-visual{min-height:470px}.home-capabilities{grid-template-columns:repeat(2,1fr)}.capability:nth-child(2){border-right:0}.capability:nth-child(-n+2){border-bottom:1px solid var(--line)}.featured-work{grid-template-columns:.9fr 1.1fr}.current-grid{grid-template-columns:repeat(2,1fr)}.current-grid>div:nth-child(2){border-right:0}.current-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media(max-width:760px){#home{padding-bottom:64px}#home .hero-stage{min-height:auto}.home-topbar{align-items:flex-start}.home-location{font-size:.6rem;max-width:230px}.home-location span{margin:0 4px}#home .home-hero-composition{display:flex;flex-direction:column;align-items:stretch;gap:26px;min-height:0;padding:30px 0 32px}#home .home-hero-copy{order:0;max-width:none}#home .home-role{display:block;line-height:1.7}#home .home-role>span:first-child{display:inline-block;margin:0 5px}.hero-actions{align-items:stretch}.hero-actions>a{flex:1 1 180px}.secondary-link{font-size:1rem}.hero-socials{align-items:center;justify-content:center;gap:10px;margin:18px auto 0;padding-top:14px}.hero-socials-list{justify-content:center;row-gap:5px}.hero-socials-list a{font-size:.68rem;padding:4px 8px}.hero-visual-stack{order:1;width:100%;gap:10px}.hero-visual{min-height:410px;width:100%;margin-top:0}#home .hero-visual .sculpture{position:absolute;order:initial;right:8%;top:18%;width:84%;height:78%;aspect-ratio:auto;margin:0}#home .hero-visual .hoodie-picker{left:auto;right:12px;top:auto;bottom:16px;transform:none;flex-direction:column}#home .hero-visual .hoodie-picker.is-minimized{transform:scale(.5)}#home .hero-visual .hoodie-toggle{left:auto;right:58px;top:auto;bottom:20px;transform:none}.system-panel{width:100%}.system-panel dl>div{padding:9px 10px}.system-panel dd{font-size:.74rem}.home-capabilities{grid-template-columns:1fr 1fr}.capability{padding:17px 13px 19px;grid-template-columns:1fr;gap:2px}.capability strong{font-size:.86rem}.capability>span:last-child{font-size:.68rem}.home-showcase,.home-current,.home-github,.home-resources{padding-top:70px}.home-section-head{align-items:flex-start;margin-bottom:26px}.home-section-head h2{font-size:2.5rem}.home-section-head .text-arrow-link{display:none}.featured-work{grid-template-columns:1fr}.featured-work-copy{padding:26px 22px}.featured-work-open{padding-top:24px}.featured-work-preview{border-left:0;border-top:1px solid var(--pix-border);padding:14px}.featured-work-preview img{min-height:220px;aspect-ratio:3/2}.current-grid{grid-template-columns:1fr 1fr}.current-grid>div{padding:21px 15px 24px;min-height:120px}.current-grid strong{font-size:.95rem}} @media(max-width:430px){#home h1{font-size:clamp(4.2rem,20vw,5.7rem)}.home-location{max-width:190px}.hero-socials{display:flex;justify-content:center}.hero-socials-label{display:block;margin-bottom:8px}.hero-socials-list a{padding-left:0;padding-right:12px}.hero-socials-list a+a:before{display:none}.home-capabilities{grid-template-columns:1fr}.capability{border-right:0!important;border-bottom:1px solid var(--line)!important}.capability:last-child{border-bottom:0!important}.current-grid{grid-template-columns:1fr}.current-grid>div{border-right:0!important;border-bottom:1px solid var(--line)!important;min-height:auto}.current-grid>div:last-child{border-bottom:0!important}.hero-actions>a{flex-basis:100%}.hero-visual{min-height:370px}.system-panel dl{grid-template-columns:1fr 1fr 1fr}.system-panel dt{font-size:.5rem}.system-panel dd{font-size:.65rem}} @media(prefers-reduced-motion:reduce){.featured-work,.featured-work-preview img,.featured-work-open .icon,.secondary-link{transition:none!important}} /* -------------------------------------------------------------------------- Landing motion system Each hero group has its own entrance/exit language. Lower homepage sections use distinct scroll motions and replay when they leave/re-enter the viewport. -------------------------------------------------------------------------- */ #home .hero-top, #home .hero-copy, #home .sculpture{animation:none} #home .name-line{display:inline-block;will-change:transform,opacity,filter,clip-path} #home .name-line-b .name-period{display:inline-block} #home .home-location, #home .quiet-link, #home .intro, #home .home-role, #home .home-description, #home .hero-actions .primary-link, #home .hero-actions .secondary-link, #home .hero-socials, #home .system-panel, #home .hero-visual .sculpture, #home .hero-visual .hoodie-toggle, #home .hero-visual .hoodie-picker, #home .capability{will-change:transform,opacity,filter,clip-path} /* IN: deliberately different motion for each piece. */ #home.home-motion-in .home-location{animation:homeMetaIn 520ms var(--ease-out) 40ms both} #home.home-motion-in .quiet-link{animation:homeTalkIn 520ms var(--ease-out) 120ms both} #home.home-motion-in .intro{animation:homeIntroIn 460ms steps(5,end) 150ms both} #home.home-motion-in .name-line-a{animation:homeNameLeftIn 720ms var(--ease-out) 190ms both} #home.home-motion-in .name-line-b{animation:homeNameRightIn 760ms var(--ease-out) 270ms both} #home.home-motion-in .name-period{animation:homePeriodIn 420ms steps(4,end) 760ms both} #home.home-motion-in .home-role{animation:homeRoleIn 560ms var(--ease-out) 420ms both} #home.home-motion-in .home-description{animation:homeDescriptionIn 600ms var(--ease-out) 500ms both} #home.home-motion-in .hero-actions .primary-link{animation:homePrimaryIn 500ms steps(6,end) 590ms both} #home.home-motion-in .hero-actions .secondary-link{animation:homeSecondaryIn 520ms var(--ease-out) 660ms both} #home.home-motion-in .hero-socials{animation:homeSocialIn 460ms var(--ease-out) 720ms both} #home.home-motion-in .system-panel{animation:homePanelIn 620ms var(--ease-out) 260ms both;transform-origin:top center} #home.home-motion-in .hero-visual .sculpture{animation:homeCharacterIn 780ms cubic-bezier(.16,1,.3,1) 330ms both} #home.home-motion-in .hero-visual .hoodie-toggle{animation:homeControlIn 380ms steps(4,end) 780ms both} #home.home-motion-in .hero-visual .hoodie-picker{animation:homeControlIn 380ms steps(4,end) 840ms both} #home.home-motion-in .capability:nth-child(1){animation:homeCapabilityIn 440ms var(--ease-out) 760ms both} #home.home-motion-in .capability:nth-child(2){animation:homeCapabilityIn 440ms var(--ease-out) 830ms both} #home.home-motion-in .capability:nth-child(3){animation:homeCapabilityIn 440ms var(--ease-out) 900ms both} #home.home-motion-in .capability:nth-child(4){animation:homeCapabilityIn 440ms var(--ease-out) 970ms both} /* OUT: not simply reversed; the name splits apart while supporting copy drops away. */ #home.home-motion-out .home-location{animation:homeMetaOut 260ms var(--ease-in-out) both} #home.home-motion-out .quiet-link{animation:homeTalkOut 240ms var(--ease-in-out) 20ms both} #home.home-motion-out .intro{animation:homeIntroOut 220ms steps(4,end) 15ms both} #home.home-motion-out .name-line-a{animation:homeNameLeftOut 330ms var(--ease-in-out) 20ms both} #home.home-motion-out .name-line-b{animation:homeNameRightOut 330ms var(--ease-in-out) 35ms both} #home.home-motion-out .home-role{animation:homeRoleOut 260ms var(--ease-in-out) 35ms both} #home.home-motion-out .home-description{animation:homeDescriptionOut 250ms var(--ease-in-out) 45ms both} #home.home-motion-out .hero-actions .primary-link{animation:homePrimaryOut 230ms steps(5,end) 60ms both} #home.home-motion-out .hero-actions .secondary-link{animation:homeSecondaryOut 240ms var(--ease-in-out) 70ms both} #home.home-motion-out .hero-socials{animation:homeSocialOut 220ms var(--ease-in-out) 75ms both} #home.home-motion-out .system-panel{animation:homePanelOut 280ms var(--ease-in-out) both;transform-origin:top center} #home.home-motion-out .hero-visual .sculpture{animation:homeCharacterOut 340ms var(--ease-in-out) 20ms both} #home.home-motion-out .hero-visual .hoodie-toggle, #home.home-motion-out .hero-visual .hoodie-picker{animation:homeControlOut 180ms steps(3,end) both} #home.home-motion-out .capability:nth-child(1){animation:homeCapabilityOut 220ms var(--ease-in-out) 90ms both} #home.home-motion-out .capability:nth-child(2){animation:homeCapabilityOut 220ms var(--ease-in-out) 65ms both} #home.home-motion-out .capability:nth-child(3){animation:homeCapabilityOut 220ms var(--ease-in-out) 40ms both} #home.home-motion-out .capability:nth-child(4){animation:homeCapabilityOut 220ms var(--ease-in-out) 15ms both} @keyframes homeMetaIn{from{opacity:0;transform:translateY(-14px);letter-spacing:.13em}to{opacity:1;transform:none;letter-spacing:.075em}} @keyframes homeSocialIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} @keyframes homeSocialOut{to{opacity:0;transform:translate3d(0,8px,0)}} @keyframes homeTalkIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}} @keyframes homeIntroIn{0%{opacity:0;transform:translateY(12px) scale(.96);filter:blur(5px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}} @keyframes homeNameLeftIn{from{opacity:0;transform:translate3d(-42px,18px,0);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes homeNameRightIn{from{opacity:0;transform:translate3d(54px,16px,0);clip-path:inset(0 0 0 100%)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes homePeriodIn{0%{opacity:0;transform:scale(.2) rotate(-25deg)}70%{opacity:1;transform:scale(1.35) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes homeRoleIn{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes homeDescriptionIn{from{opacity:0;transform:translateX(-26px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes homePrimaryIn{0%{opacity:0;transform:scale(.72) translateY(14px)}70%{opacity:1;transform:scale(1.04) translateY(-2px)}100%{opacity:1;transform:none}} @keyframes homeSecondaryIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes homePanelIn{from{opacity:0;transform:translateY(-18px) scaleY(.72);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes homeCharacterIn{0%{opacity:0;transform:translateY(36px) scale(.88);filter:blur(8px)}72%{opacity:1;transform:translateY(-4px) scale(1.015);filter:blur(0)}100%{opacity:1;transform:none;filter:none}} @keyframes homeControlIn{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}} @keyframes homeCapabilityIn{from{opacity:0;transform:translateY(24px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes homeMetaOut{to{opacity:0;transform:translateY(-12px);filter:blur(3px)}} @keyframes homeTalkOut{to{opacity:0;transform:translateX(24px)}} @keyframes homeIntroOut{to{opacity:0;transform:translateX(-18px);filter:blur(4px)}} @keyframes homeNameLeftOut{to{opacity:0;transform:translate3d(-55px,-4px,0);clip-path:inset(0 100% 0 0)}} @keyframes homeNameRightOut{to{opacity:0;transform:translate3d(60px,6px,0);clip-path:inset(0 0 0 100%)}} @keyframes homeRoleOut{to{opacity:0;transform:translateY(16px);filter:blur(6px)}} @keyframes homeDescriptionOut{to{opacity:0;transform:translateX(-20px);filter:blur(6px)}} @keyframes homePrimaryOut{to{opacity:0;transform:scale(.8) translateY(12px)}} @keyframes homeSecondaryOut{to{opacity:0;transform:translateX(24px)}} @keyframes homePanelOut{to{opacity:0;transform:translateY(-12px) scaleY(.8);clip-path:inset(0 0 80% 0)}} @keyframes homeCharacterOut{to{opacity:0;transform:translateY(28px) scale(.92);filter:blur(7px)}} @keyframes homeControlOut{to{opacity:0;filter:blur(3px)}} @keyframes homeCapabilityOut{to{opacity:0;transform:translateY(18px);filter:blur(3px)}} /* Different scroll reveal language for each lower homepage block. */ .motion-ready #home .home-scroll-motion{opacity:0;transition:opacity 620ms var(--ease-out),transform 720ms var(--ease-out),filter 620ms var(--ease-out),clip-path 720ms var(--ease-out)} .motion-ready #home .home-motion-work{transform:translateX(-34px);filter:blur(6px);clip-path:inset(0 8% 0 0)} .motion-ready #home .home-motion-current{transform:translateY(38px) scale(.985);filter:blur(5px)} .motion-ready #home .home-motion-github{transform:translateX(34px);filter:blur(6px);clip-path:inset(0 0 0 8%)} .motion-ready #home .home-motion-resources{transform:translateY(26px) scale(.965);filter:blur(8px)} .motion-ready #home .home-scroll-motion.visible{opacity:1;transform:none;filter:blur(0);clip-path:inset(0)} @media(max-width:760px){ #home.home-motion-in .name-line-a{animation-name:homeNameMobileIn} #home.home-motion-in .name-line-b{animation-name:homeNameMobileIn} #home.home-motion-out .name-line-a,#home.home-motion-out .name-line-b{animation-name:homeNameMobileOut} @keyframes homeNameMobileIn{from{opacity:0;transform:translateY(24px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes homeNameMobileOut{to{opacity:0;transform:translateY(-18px);clip-path:inset(0 0 100% 0)}} } @media(prefers-reduced-motion:reduce){ #home.home-motion-in .home-location,#home.home-motion-in .quiet-link,#home.home-motion-in .intro, #home.home-motion-in .name-line,#home.home-motion-in .name-period,#home.home-motion-in .home-role, #home.home-motion-in .home-description,#home.home-motion-in .hero-actions .primary-link, #home.home-motion-in .hero-actions .secondary-link,#home.home-motion-in .hero-socials,#home.home-motion-in .system-panel, #home.home-motion-in .hero-visual .sculpture,#home.home-motion-in .hero-visual .hoodie-toggle, #home.home-motion-in .hero-visual .hoodie-picker,#home.home-motion-in .capability, #home.home-motion-out .home-location,#home.home-motion-out .quiet-link,#home.home-motion-out .intro, #home.home-motion-out .name-line,#home.home-motion-out .home-role,#home.home-motion-out .home-description, #home.home-motion-out .hero-actions a,#home.home-motion-out .hero-socials,#home.home-motion-out .system-panel, #home.home-motion-out .hero-visual .sculpture,#home.home-motion-out .hero-visual .hoodie-toggle, #home.home-motion-out .hero-visual .hoodie-picker,#home.home-motion-out .capability{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important} .motion-ready #home .home-scroll-motion,.motion-ready #home .home-scroll-motion.visible{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important} } /* Homepage attestation — a live human-proof preview, not a generic testimonial carousel. */ .home-attestation{padding-top:96px} .home-attestation-head{margin-bottom:28px} .attestation-signal{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(220px,280px);min-height:270px;border:1px solid var(--pix-border);background:var(--pix-panel);box-shadow:7px 7px 0 var(--pix-shadow);overflow:hidden} .attestation-signal:before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--pix-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pix-grid) 1px,transparent 1px);background-size:24px 24px;opacity:.35;pointer-events:none} .attestation-signal-rail{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:22px 0;border-right:1px solid var(--pix-border);font-family:'Pixelify Sans','Courier New',monospace;font-size:.58rem;letter-spacing:.12em;color:var(--faint);writing-mode:vertical-rl;transform:rotate(180deg)} .attestation-signal-dot{width:8px;height:8px;background:var(--sage);box-shadow:2px 2px 0 var(--pix-hard);animation:attestationSignalBlink 1.8s steps(2,end) infinite} .attestation-signal-main{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:30px clamp(24px,3vw,42px)} .attestation-signal-meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px;font-family:'Courier New',monospace;font-size:.6rem;letter-spacing:.11em;color:var(--faint)} .attestation-signal-meta span:first-child{color:var(--sage)} .attestation-signal blockquote{max-width:680px;margin:0;font-family:'Pixelify Sans','Courier New',monospace;font-size:clamp(1.55rem,2.25vw,2.7rem);line-height:1.12;letter-spacing:-.018em;color:var(--ink)} .attestation-signal-note{max-width:620px;margin:20px 0 0;font-size:.84rem;line-height:1.7;color:var(--muted)} .attestation-signal-person{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)} .attestation-signal-name{font-family:'Pixelify Sans','Courier New',monospace;font-size:1rem;letter-spacing:.04em;color:var(--ink)} .attestation-signal-role{font-family:'Courier New',monospace;font-size:.66rem;letter-spacing:.08em;color:var(--faint)} .attestation-signal-side{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;padding:26px 22px;border-left:1px solid var(--pix-border);background:color-mix(in srgb,var(--bg) 62%,transparent)} .attestation-signal-side>div:not(.attestation-signal-controls){display:flex;flex-direction:column;gap:8px} .attestation-side-label{font-family:'Courier New',monospace;font-size:.58rem;letter-spacing:.11em;color:var(--faint)} .attestation-signal-side strong{font-family:'Pixelify Sans','Courier New',monospace;font-size:.92rem;font-weight:400;line-height:1.35;color:var(--soft3)} .attestation-signal-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px} .attestation-signal-controls button,.attestation-open{min-height:40px;border:1px solid var(--pix-border);background:var(--bg);font-family:'Pixelify Sans','Courier New',monospace;font-size:.76rem;letter-spacing:.04em;color:var(--ink);box-shadow:3px 3px 0 var(--pix-shadow);transition:transform 140ms var(--ease-out),border-color 140ms var(--ease-out)} .attestation-signal-controls button{cursor:pointer} .attestation-open{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:9px 11px} .attestation-open .icon{width:17px;height:17px;color:var(--sage)} .attestation-signal-controls button:hover,.attestation-open:hover{transform:translate(-1px,-1px);border-color:var(--sage)} .attestation-signal.is-live blockquote{animation:attestationQuoteSwap 260ms var(--ease-out) both} @keyframes attestationSignalBlink{50%{opacity:.28}} @keyframes attestationQuoteSwap{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}} @media(max-width:900px){ .attestation-signal{grid-template-columns:56px minmax(0,1fr)} .attestation-signal-side{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;border-left:0;border-top:1px solid var(--pix-border)} .attestation-open{margin-top:0;min-width:170px} } @media(max-width:760px){ .home-attestation{padding-top:70px} .attestation-signal{grid-template-columns:42px minmax(0,1fr);min-height:0} .attestation-signal-rail{padding:16px 0;font-size:.52rem} .attestation-signal-main{padding:30px 20px 34px} .attestation-signal-meta{margin-bottom:22px;font-size:.55rem} .attestation-signal blockquote{font-size:clamp(1.5rem,7vw,2.35rem);line-height:1.12} .attestation-signal-note{font-size:.8rem} .attestation-signal-side{grid-template-columns:1fr;gap:20px;padding:22px 18px} .attestation-open{min-width:0} } @media(prefers-reduced-motion:reduce){.attestation-signal-dot,.attestation-signal.is-live blockquote{animation:none!important}} /* Geminile featured project */ .live-project-status{display:inline-flex;align-items:center;gap:7px;color:var(--sage);font-weight:700}.live-project-status i{width:6px;height:6px;background:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 18%,transparent);animation:liveProjectPulse 1.8s steps(2,end) infinite}.featured-work-actions{margin-top:auto;padding-top:36px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.featured-work-actions .featured-work-open{margin-top:0;padding-top:0}.featured-work-live{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--pix-border);padding:9px 11px;font-family:'Pixelify Sans','Courier New',monospace;font-size:.78rem;letter-spacing:.04em;color:var(--ink);transition:transform 180ms var(--ease-out),border-color 180ms var(--ease-out),color 180ms var(--ease-out)}.featured-work-live .icon{width:15px;height:15px}.featured-work-preview figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px}.featured-work-preview figcaption a{display:inline-flex;color:var(--sage)}.featured-work-preview figcaption .icon{width:16px;height:16px}.featured-work--live .featured-work-preview img{object-fit:cover;background:#151a17}.featured-work--live{position:relative}.featured-work--live:before{content:'LIVE';position:absolute;z-index:2;right:14px;top:14px;background:var(--sage);color:var(--on-sage);font-family:'Pixelify Sans','Courier New',monospace;font-size:.6rem;letter-spacing:.12em;padding:5px 7px;border:1px solid var(--sage)} @keyframes liveProjectPulse{50%{opacity:.35}} @media (hover:hover) and (pointer:fine){.featured-work-live:hover{transform:translate(-2px,-2px);border-color:var(--sage);color:var(--sage)}} @media(max-width:760px){.featured-work-actions{padding-top:25px;gap:14px}.featured-work-live{font-size:.72rem}.featured-work--live:before{right:9px;top:9px}} @media(prefers-reduced-motion:reduce){.live-project-status i{animation:none}.featured-work-live{transition:none}} /* Secondary live build: Rose Ann Camposo portfolio */ .home-showcase .featured-work + .featured-work{margin-top:28px} .featured-work--rose{grid-template-columns:1.08fr .92fr} .featured-work--rose .featured-work-preview{order:-1;border-left:0;border-right:1px solid var(--pix-border);background:var(--pix-panel)} .featured-work--rose .featured-work-preview img{background:var(--pix-panel)} .featured-work--rose:before{content:'LIVE';} .project-preview--rose{background:var(--pix-panel)} .project-preview--rose img{object-fit:cover;object-position:top} @media (max-width:760px){ .home-showcase .featured-work + .featured-work{margin-top:20px} .featured-work--rose{grid-template-columns:1fr} .featured-work--rose .featured-work-preview{order:1;border-right:0;border-left:0;border-top:1px solid var(--pix-border)} .featured-work--rose .featured-work-copy{order:0} } /* Professional project presentation — no technology tag chips */ .featured-work-subtitle{font-family:'Pixelify Sans','Courier New',monospace!important;font-size:.78rem!important;letter-spacing:.045em;color:var(--soft)!important;margin:9px 0 0!important;max-width:520px!important} .featured-work-context{font-size:.76rem!important;line-height:1.65!important;color:var(--faint)!important;margin:0!important;padding-top:18px;border-top:1px solid var(--pix-border);max-width:520px!important} .featured-work--wannabees{grid-template-columns:.78fr 1.22fr} .featured-work--wannabees .featured-work-preview{background:var(--pix-panel)} .featured-work--wannabees .featured-work-preview img{object-fit:cover;object-position:top;background:var(--pix-panel)} .featured-work--wannabees .featured-work-meta span:last-child{color:var(--sage)} @media(max-width:760px){.featured-work--wannabees{grid-template-columns:1fr}.featured-work--wannabees .featured-work-preview{border-left:0;border-top:1px solid var(--pix-border)}} /* -------------------------------------------------------------------------- Compact selected-work rail Keeps the homepage concise while the full project stories live in #work. The duplicated group creates a seamless left-to-right loop. -------------------------------------------------------------------------- */ .project-marquee-shell{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0 16px;overflow:hidden} .project-marquee-note{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 2px 12px;font-size:.56rem;letter-spacing:.11em;color:var(--faint)} .project-marquee{position:relative;overflow:hidden;padding:3px 0 8px;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)} .project-marquee-track{display:flex;width:max-content;will-change:transform;animation:projectRailLTR 34s linear infinite} .project-marquee-group{display:flex;gap:14px;padding-right:14px;flex:none} .project-mini{width:clamp(310px,29vw,390px);height:156px;display:grid;grid-template-columns:42% 58%;flex:none;border:1px solid var(--pix-border);background:var(--pix-panel);box-shadow:4px 4px 0 var(--pix-shadow);overflow:hidden;transition:transform 170ms var(--ease-out),border-color 170ms var(--ease-out),box-shadow 170ms var(--ease-out)} .project-mini-media{display:block;min-width:0;border-right:1px solid var(--pix-border);background:var(--panel-deep);overflow:hidden} .project-mini-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 260ms var(--ease-out);image-rendering:auto} .project-mini--geminile .project-mini-media img,.project-mini--rose .project-mini-media img,.project-mini--jazdy .project-mini-media img{object-fit:cover} .project-mini-copy{min-width:0;padding:15px 15px 13px;display:flex;flex-direction:column;align-items:flex-start} .project-mini-kicker{font-size:.5rem;line-height:1.25;letter-spacing:.09em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%} .project-mini strong{font-family:'Pixelify Sans','Courier New',monospace;font-size:1.02rem;font-weight:400;line-height:1.15;color:var(--ink);margin:9px 0 6px} .project-mini-copy>span:nth-child(3){font-size:.66rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .project-mini-open{margin-top:auto!important;display:inline-flex!important;align-items:center;gap:7px;font-family:'Pixelify Sans','Courier New',monospace;font-size:.64rem!important;letter-spacing:.055em;color:var(--sage)!important} .project-mini-open .icon{width:13px;height:13px;transition:transform 170ms var(--ease-out)} .project-marquee:hover .project-marquee-track,.project-marquee:focus-within .project-marquee-track{animation-play-state:paused} @keyframes projectRailLTR{from{transform:translate3d(calc(-50% - 7px),0,0)}to{transform:translate3d(0,0,0)}} @media(hover:hover) and (pointer:fine){.project-mini:hover{transform:translateY(-4px);border-color:var(--sage);box-shadow:5px 7px 0 var(--pix-shadow)}.project-mini:hover .project-mini-media img{transform:scale(1.025)}.project-mini:hover .project-mini-open .icon{transform:translateX(3px)}} @media(max-width:760px){.project-marquee-note{padding-bottom:10px}.project-marquee-note span:last-child{display:none}.project-marquee{mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%)}.project-mini{width:300px;height:142px;grid-template-columns:40% 60%}.project-mini-copy{padding:12px}.project-mini strong{font-size:.94rem}.project-marquee-track{animation-duration:30s}} @media(prefers-reduced-motion:reduce){.project-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scrollbar-width:thin}.project-marquee-track{animation:none;transform:none}.project-marquee-group[aria-hidden="true"]{display:none}.project-mini,.project-mini-media img,.project-mini-open .icon{transition:none!important}} .character-like-bubble{position:absolute;right:18px;top:52px;z-index:4;min-width:214px;max-width:228px;padding:15px 16px 13px;border:1px solid var(--pix-border);border-radius:24px;background:color-mix(in srgb,var(--bg) 97%,transparent);box-shadow:6px 6px 0 var(--pix-shadow);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:flex-start;text-align:left} .character-like-cloud,.character-like-tail{position:absolute;display:block;border:1px solid var(--pix-border);background:color-mix(in srgb,var(--bg) 96%,transparent)} .character-like-cloud{border-radius:999px;box-shadow:3px 3px 0 rgba(0,0,0,.05)} .character-like-cloud-a{width:42px;height:34px;left:18px;top:-15px} .character-like-cloud-b{width:58px;height:42px;left:52px;top:-22px} .character-like-cloud-c{width:40px;height:30px;left:108px;top:-12px} .character-like-tail{border-radius:999px} .character-like-tail-a{width:16px;height:16px;left:36px;bottom:-12px} .character-like-tail-b{width:10px;height:10px;left:24px;bottom:-22px} .character-like-question{margin:0 0 12px;font-family:'Pixelify Sans','Courier New',monospace;font-size:.8rem;line-height:1.35;letter-spacing:.015em;color:var(--ink);max-width:12ch} .character-like-actions{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;flex-wrap:wrap} .character-like-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:8px 12px;border:1px solid var(--pix-border);border-radius:999px;background:var(--bg);color:var(--soft3);font-family:'Pixelify Sans','Courier New',monospace;font-size:.69rem;letter-spacing:.02em;cursor:pointer;transition:transform 150ms var(--ease-out),border-color 150ms var(--ease-out),background-color 150ms var(--ease-out),color 150ms var(--ease-out);flex:0 0 auto;box-shadow:2px 2px 0 rgba(0,0,0,.04)} .character-like-heart{font-size:.92rem;line-height:1;transform:translateY(-.5px)} .character-like-count{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:66px;padding:0 10px;height:34px;border:1px solid var(--pix-border);border-radius:999px;background:var(--pix-btn);font-family:'Pixelify Sans','Courier New',monospace;font-size:.68rem;color:var(--ink);white-space:nowrap;box-shadow:2px 2px 0 rgba(0,0,0,.04)} .character-like-count strong{font-size:.74rem;font-weight:400;color:var(--soft3)} .character-like-count small{font-size:.58rem;letter-spacing:.04em;color:var(--muted);text-transform:uppercase} .character-like-bubble.is-liked .character-like-button{background:var(--sage);border-color:var(--sage);color:var(--on-sage)} .character-like-bubble.is-liked .character-like-heart{content:'♥'} .character-like-bubble.is-liked .character-like-label{content:'Loved'} @media(hover:hover) and (pointer:fine){.character-like-button:hover{transform:translate(-1px,-1px);border-color:var(--sage);color:var(--sage)}} .character-like-button:focus-visible{outline:1px solid var(--sage);outline-offset:2px} .character-like-button:active{transform:scale(.98)} @media(max-width:760px){.character-like-bubble{right:14px;top:38px;min-width:176px;max-width:188px;padding:12px 12px 10px}.character-like-cloud-a{width:34px;height:28px;left:12px;top:-12px}.character-like-cloud-b{width:48px;height:34px;left:38px;top:-18px}.character-like-cloud-c{width:32px;height:24px;left:90px;top:-8px}.character-like-tail-a{left:30px;bottom:-10px}.character-like-tail-b{left:20px;bottom:-18px}.character-like-question{font-size:.7rem;margin-bottom:9px}.character-like-actions{gap:6px}.character-like-button{min-height:30px;padding:7px 10px;font-size:.62rem}.character-like-count{height:30px;min-width:58px;font-size:.62rem}.character-like-count strong{font-size:.68rem}.character-like-count small{font-size:.52rem}} @media(max-width:430px){.character-like-bubble{right:10px;top:34px;min-width:146px;max-width:156px;padding:10px 10px 9px}.character-like-label{display:none}.character-like-question{max-width:none}.character-like-button{min-width:34px;justify-content:center}.character-like-count{padding:0 8px;min-width:46px}.character-like-count small{display:none}} #home.home-motion-in .character-like-bubble{animation:homeSystemIn 420ms var(--ease-out) 540ms both} #home.home-motion-out .character-like-bubble{animation:homeSystemOut 180ms var(--ease-in-out) both} @media(prefers-reduced-motion:reduce){.character-like-bubble,.character-like-button{transition:none}} #home .hero-visual-stack{min-height:520px} @media(max-width:1100px){#home .hero-visual-stack{min-height:470px}} @media(max-width:760px){#home .hero-visual-stack{min-height:0}.hero-visual{min-height:410px}} @media(max-width:430px){.hero-visual{min-height:370px}} /* Pixel-game character scene. Dialogue stays above the sprite at every width. */ #home .hero-visual{isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto 1fr auto;gap:0 8px;height:auto;min-height:530px;padding:24px 20px 16px;border:2px solid var(--pix-border2);background:radial-gradient(ellipse at 45% 65%,var(--pix-panel),transparent 65%),var(--bg);clip-path:none;box-shadow:6px 6px 0 var(--pix-shadow)} #home .hero-visual:before{background-size:32px 32px;opacity:.3;z-index:-2} #home .hero-visual:after{content:'';position:absolute;left:12%;right:12%;bottom:87px;height:38px;background:var(--pix-panel);border:2px solid var(--pix-border2);box-shadow:0 6px 0 var(--pix-shadow),inset 0 5px 0 var(--pix-border);transform:skewX(-18deg);z-index:-1} #home .hero-visual .character-like-bubble{position:relative;inset:auto;grid-column:1/-1;justify-self:end;width:min(100%,258px);min-width:0;max-width:none;padding:13px 16px 12px;border:2px solid var(--sage);border-radius:0;background:var(--bg);box-shadow:4px 4px 0 var(--pix-shadow),inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--pix-border);backdrop-filter:none} #home .character-like-cloud,#home .character-like-tail{display:none} #home .character-like-bubble:after{content:'';position:absolute;left:26px;bottom:-12px;width:18px;height:18px;background:var(--bg);border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:skewY(-40deg);box-shadow:3px 3px 0 var(--pix-shadow)} .character-dialogue-name{display:block;margin-bottom:6px;font-family:'Pixelify Sans','Courier New',monospace;font-size:.7rem;letter-spacing:.12em;color:var(--sage)} #home .character-like-question{max-width:none;font-size:1.0625rem;line-height:1.4;margin:0 0 8px;color:var(--ink)} #home .character-like-actions{gap:12px;flex-wrap:wrap} #home .character-like-button{min-height:44px;padding:6px 10px;font-size:.875rem;color:var(--ink);border:1px solid var(--pix-border2);border-radius:0;background:var(--pix-panel);box-shadow:2px 2px 0 var(--pix-shadow)} #home .character-like-label,#home .character-like-count small{display:inline} #home .character-like-heart{color:var(--sage)} #home .character-like-count{height:auto;min-width:0;padding:0;gap:5px;border:0;border-radius:0;box-shadow:none;background:none} #home .character-like-count strong{font-size:.875rem;color:var(--ink)} #home .character-like-count small{font-size:.7rem;color:var(--soft3)} #home .character-like-bubble.is-liked .character-like-button,#home .character-like-bubble.is-liked .character-like-heart{color:var(--on-sage)} #home .hero-visual .sculpture{position:relative;inset:auto;grid-column:1/-1;align-self:end;justify-self:center;width:min(100%,340px);height:310px;min-height:0;aspect-ratio:auto;margin:8px 0 4px} #home .hero-visual .sculpture-shadow{bottom:2%;height:8%;opacity:.4} #home .hero-visual .hoodie-picker{position:relative;inset:auto;grid-column:1;align-self:center;justify-self:start;transform:none;flex-direction:row;max-width:100%;padding:5px;background:var(--bg);border:1px solid var(--pix-border2);box-shadow:3px 3px 0 var(--pix-shadow)} #home .hero-visual .hoodie-swatches{display:flex;flex-direction:row;flex-wrap:wrap;gap:0} #home .hero-visual .hoodie-swatch{width:30px;height:34px;border:6px solid var(--bg);box-shadow:none} #home .hero-visual .hoodie-swatch.is-active{outline:1px solid var(--sage);outline-offset:-2px;transform:none} #home .hero-visual .hoodie-toggle{position:relative;inset:auto;grid-column:2;align-self:center;transform:none;width:44px;height:44px;background:var(--bg);color:var(--sage);border:1px solid var(--pix-border2);box-shadow:3px 3px 0 var(--pix-shadow)} #home .hero-visual .hoodie-picker.is-minimized{visibility:hidden;pointer-events:none;transform:none} #home .hero-visual .visual-corner{display:none} @media(max-width:760px){#home .hero-visual{min-height:510px;padding:20px 14px 14px}#home .hero-visual .sculpture{height:290px;width:min(100%,310px)}} @media(max-width:360px){#home .hero-visual{padding-inline:10px;column-gap:6px}#home .hero-visual .hoodie-swatch{width:28px}#home .character-like-bubble{padding-inline:12px}} /* Explicit scene rows keep DOM reading order independent of visual placement. */ #home .hero-visual .character-like-bubble{grid-row:1} #home .hero-visual .sculpture{grid-row:2} #home .hero-visual .hoodie-picker,#home .hero-visual .hoodie-toggle{grid-row:3} #home .hero-visual-stack{align-self:center;width:100%} /* Use a clear UI font for the action while keeping the pixel frame. */ #home .character-like-button{font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:0;min-height:44px;padding:10px 12px;background:var(--ink);color:var(--bg);border:2px solid var(--ink);gap:8px} #home .character-like-button .character-like-label{display:inline;color:inherit;font:inherit} #home .character-like-button .character-like-heart{color:inherit;font-size:20px} #home .character-like-bubble.is-liked .character-like-button{background:var(--ink);border-color:var(--ink);color:var(--bg)} #home .character-like-bubble.is-liked .character-like-heart{color:inherit} @media(hover:hover) and (pointer:fine){#home .character-like-button:hover{background:var(--ink);border-color:var(--ink);color:var(--bg);transform:translate(-1px,-1px)}} /* Custom life-heart sprite, with a bright pixel highlight when collected. */ #home .character-like-heart{display:inline-flex;flex:none;width:20px;height:20px;transform:none} #home .character-like-heart svg{display:block;width:100%;height:100%;overflow:visible} #home .pixel-heart-body{fill:currentColor;fill-opacity:.3;stroke:currentColor;stroke-width:1;stroke-linejoin:miter} #home .pixel-heart-glint{fill:var(--ink)} #home .is-liked .pixel-heart-body{fill-opacity:1} #home .is-liked .pixel-heart-glint{fill:var(--ink)} /* Collapsing the dialogue preserves the scene height and sprite position. */ #home .character-dialogue-name{padding-right:32px;min-height:24px;display:flex;align-items:center} #home .message-minimize{position:absolute;right:5px;top:3px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--ink);font:700 22px/1 Arial,sans-serif;cursor:pointer} #home .message-minimize:hover{color:var(--sage)} #home .hero-visual.message-collapsed .character-like-bubble{visibility:hidden;pointer-events:none} #home .message-thinking{grid-column:1/-1;grid-row:1;justify-self:center;align-self:end;transform:translateX(-15px);position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;width:80px;min-height:44px;margin-bottom:0;padding:12px;border:2px solid var(--sage);background:var(--bg);color:var(--ink);box-shadow:3px 3px 0 var(--pix-shadow);cursor:pointer} #home .message-thinking[hidden]{display:none} #home .message-thinking:after{content:none} #home .message-thinking span{width:7px;height:7px;background:currentColor;animation:pixelThinking 1.2s steps(3,end) infinite} #home .message-thinking span:nth-child(2){animation-delay:.16s} #home .message-thinking span:nth-child(3){animation-delay:.32s} @keyframes pixelThinking{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}} @media(prefers-reduced-motion:reduce){#home .message-thinking span{animation:none;opacity:1}} /* A stepped pixel tail connects the dialogue to the character. */ #home .character-like-bubble:after{content:'';position:absolute;left:26px;bottom:-18px;width:24px;height:18px;border:0;transform:none;background:var(--sage);box-shadow:none;clip-path:polygon(0 0,100% 0,100% 33.333%,75% 33.333%,75% 66.667%,50% 66.667%,50% 100%,25% 100%,25% 66.667%,0 66.667%)} #home .character-like-bubble:before{content:'';position:absolute;z-index:1;left:28px;bottom:-14px;width:20px;height:16px;background:var(--bg);clip-path:polygon(0 0,100% 0,100% 25%,70% 25%,70% 62.5%,40% 62.5%,40% 100%,30% 100%,30% 62.5%,0 62.5%)} @media(max-width:760px){#home .character-like-bubble:after{left:34%}#home .character-like-bubble:before{left:calc(34% + 2px)}} /* Brief thank-you feedback, without shifting the dialogue or character. */ #home .character-like-question{min-height:48px} #home .character-gratitude{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden} #home .character-gratitude span{position:absolute;left:43%;top:48%;width:16px;height:16px;font-size:0;opacity:0;background:var(--sage);clip-path:polygon(0 15%,15% 15%,15% 0,40% 0,50% 15%,60% 0,85% 0,85% 15%,100% 15%,100% 55%,85% 55%,85% 70%,70% 70%,70% 85%,55% 85%,55% 100%,45% 100%,45% 85%,30% 85%,30% 70%,15% 70%,15% 55%,0 55%)} #home .character-gratitude span:nth-child(2){left:62%;top:54%;animation-delay:.18s} #home .character-gratitude span:nth-child(3){left:28%;top:58%;animation-delay:.36s} #home .is-thanking .character-gratitude span{animation-name:gratitudeHeart;animation-duration:1.8s;animation-timing-function:steps(12,end);animation-fill-mode:both} @keyframes gratitudeHeart{0%{opacity:0;transform:translateY(12px) scale(.6)}20%{opacity:1;transform:translateY(-8px) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-72px) scale(.8)}} .gratitude-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @media(prefers-reduced-motion:reduce){#home .is-thanking .character-gratitude span{animation:none}} /* Keep floating hearts beside the sprite so its face stays clear. */ #home .character-gratitude span{left:18%;top:49%} #home .character-gratitude span:nth-child(2){left:77%;top:54%} #home .character-gratitude span:nth-child(3){left:85%;top:62%} /* Position dialogue details from the canvas head anchor, not breakpoint guesses. */ #home .hero-visual .character-like-bubble:after{left:var(--tail-x,26px)} #home .hero-visual .character-like-bubble:before{left:calc(var(--tail-x,26px) + 2px)} #home .hero-visual .message-thinking{position:absolute;left:var(--head-x,45%);top:var(--thinking-top,132px);transform:translateX(-50%);margin:0;z-index:6} /* Anchor to the scene padding box, not the inset dialogue grid area. */ #home .hero-visual .message-thinking{grid-column:auto;grid-row:auto;justify-self:auto;align-self:auto} /* Center the expanded dialogue over the same head anchor as the thinking dots. */ #home .hero-visual .character-like-bubble{justify-self:start;margin-left:var(--bubble-offset,0px)} #home .hero-visual .character-like-bubble{width:min(90%,258px)} #home .character-like-button:disabled{cursor:default;opacity:1;transform:none} /* Compact dialogue: primary action plus a quiet secondary reply. */ #home .hero-visual .character-like-bubble{padding:9px 12px 8px} #home .character-dialogue-name{margin-bottom:3px;min-height:24px} #home .character-like-question{min-height:0;margin-bottom:6px;font-size:1rem;line-height:1.4} #home .character-like-actions{gap:4px 10px} /* The appreciation button follows the actual selected hoodie palette. */ #home .character-like-button, #home .character-like-bubble.is-liked .character-like-button, #home .character-like-button:hover{background:var(--hoodie-color,#8ba469);border-color:var(--hoodie-color,#8ba469);color:var(--hoodie-button-text,#111812)} #home .character-like-button .pixel-heart-glint{fill:var(--hoodie-color,#8ba469)} /* A red collected heart distinguishes the saved appreciation state. */ #home .character-like-bubble.is-liked .character-like-heart{color:#a91432} /* White action text in light mode; the collected heart keeps its red accent. */ html[data-theme="light"] #home .character-like-button, html[data-theme="light"] #home .character-like-bubble.is-liked .character-like-button, html[data-theme="light"] #home .character-like-button:hover{color:#fff} #home .hero-visual .character-like-bubble{transform-origin:calc(var(--tail-x,26px) + 9px) bottom} #home .hero-visual .message-thinking{transform-origin:center bottom} /* Lowercase dialogue, including its name and response labels. */ #home .character-like-bubble, #home .character-like-bubble .character-dialogue-name, #home .character-like-bubble .character-like-question, #home .character-like-bubble .character-like-label, #home .character-like-bubble .character-like-count small{text-transform:lowercase} /* Hero social links: stable, centered, clickable layout */ #home .hero-socials{display:block;width:100%;max-width:560px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--line)} #home .hero-socials-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-items:stretch;gap:6px 10px;width:100%;margin:0;padding:0} #home .hero-socials-list a{display:inline-flex;width:100%;min-width:0;min-height:34px;align-items:center;justify-content:center;gap:7px;padding:6px 8px;position:relative;color:var(--muted);white-space:nowrap;pointer-events:auto} #home .hero-socials-list a+a:before{display:none!important} #home .hero-socials-list a:hover,#home .hero-socials-list a:focus-visible{color:var(--sage)} @media(max-width:760px){#home .hero-socials{max-width:430px}#home .hero-socials-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}#home .hero-socials-list a{justify-content:flex-start;padding:6px 10px}} @media(max-width:360px){#home .hero-socials-list a{font-size:.64rem;padding-inline:6px}} /* Character message type-in treatment */ #home .character-like-question.is-typing::after{ content:''; display:inline-block; width:.52em; height:.92em; margin-left:.16em; vertical-align:-.08em; background:currentColor; animation:characterTypingCursor .62s steps(1,end) infinite; } @keyframes characterTypingCursor{ 0%,48%{opacity:1} 49%,100%{opacity:0} } @media(prefers-reduced-motion:reduce){ #home .character-like-question.is-typing::after{animation:none;opacity:1} } /* Character dialogue state guard: author display rules must never override hidden UI. */ #home .hero-visual.message-collapsed .character-like-bubble, #home .character-like-bubble[hidden], #home .character-name-form[hidden], #home .character-like-actions[hidden]{display:none!important} #home .hero-visual:not(.message-collapsed) .message-thinking{display:none!important} /* Accessible visually-hidden utility used by the character form label */ .sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* Refined character dialogue UI */ #home .hero-visual .character-like-bubble{ width:min(92%, 320px); padding:12px 14px 12px; gap:0; border-width:2px; box-shadow:5px 5px 0 var(--pix-shadow), inset 0 0 0 2px var(--bg), inset 0 0 0 3px rgba(107,131,177,.24); } #home .character-dialogue-name{ margin-bottom:6px; min-height:auto; padding-right:34px; font-size:.72rem; letter-spacing:.14em; opacity:.92; } #home .message-minimize{ right:8px; top:7px; width:28px; height:28px; font-size:18px; border:1px solid transparent; } #home .message-minimize:hover, #home .message-minimize:focus-visible{ color:var(--sage); border-color:color-mix(in srgb, var(--sage) 45%, transparent); background:color-mix(in srgb, var(--sage) 8%, transparent); } #home .character-like-question{ min-height:2.9em; margin:0 0 10px; font-size:1rem; line-height:1.45; max-width:none; text-wrap:pretty; } #home .character-name-form{ display:grid; grid-template-columns:1fr; gap:10px; width:100%; margin-top:2px; } #home .character-name-input{ width:100%; min-height:42px; padding:9px 12px; border:2px solid var(--ink); background:var(--bg); color:var(--ink); font:500 .92rem/1.2 'Pixelify Sans','Courier New',monospace; outline:none; box-shadow:2px 2px 0 rgba(0,0,0,.08); } #home .character-name-input::placeholder{ color:color-mix(in srgb, var(--ink) 58%, transparent); } #home .character-name-input:hover{ border-color:var(--sage); } #home .character-name-input:focus{ border-color:var(--sage); box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 18%, transparent), 2px 2px 0 rgba(0,0,0,.08); } #home .character-name-input.is-invalid{ border-color:#a35f5f; box-shadow:0 0 0 3px rgba(163,95,95,.15); } #home .character-name-actions{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:10px; width:100%; } #home .character-name-continue, #home .character-name-skip{ min-height:40px; padding:9px 12px; border:2px solid var(--pix-border2); background:var(--bg); color:var(--ink); font:600 .92rem/1.1 'Pixelify Sans','Courier New',monospace; cursor:pointer; box-shadow:2px 2px 0 var(--pix-shadow); transition:transform .12s steps(2,end), background .16s, color .16s, border-color .16s; } #home .character-name-continue{ background:var(--hoodie-color,#8ba469); border-color:var(--hoodie-color,#8ba469); color:var(--hoodie-button-text,#111812); } #home .character-name-skip{ background:color-mix(in srgb, var(--bg) 92%, var(--ink) 8%); } @media (hover:hover) and (pointer:fine){ #home .character-name-continue:hover, #home .character-name-skip:hover{ transform:translate(-1px,-1px); } #home .character-name-skip:hover{ border-color:var(--sage); color:var(--sage); } } #home .character-name-continue:focus-visible, #home .character-name-skip:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; } #home .character-like-actions{ margin-top:4px; align-items:center; } @media (max-width:760px){ #home .hero-visual .character-like-bubble{ width:min(94%, 292px); padding:11px 12px 11px; } #home .character-like-question{ font-size:.92rem; min-height:3.1em; } #home .character-name-input, #home .character-name-continue, #home .character-name-skip{ min-height:38px; font-size:.86rem; } #home .character-name-actions{ grid-template-columns:1fr 78px; gap:8px; } } @media (max-width:430px){ #home .hero-visual .character-like-bubble{ width:min(96%, 272px); padding:10px 11px 10px; } #home .character-dialogue-name{ font-size:.68rem; } #home .character-like-question{ font-size:.88rem; margin-bottom:9px; } } /* Project frames share the green theme across all client work. */ .project-preview,.featured-work-preview,.project-mini-media{border-color:var(--pix-border);background:var(--pix-panel)} .project-preview img,.featured-work-preview img{border-color:var(--pix-border2)} .project-case-stage,.project-case-thumb{border-color:var(--pix-border2);background:var(--pix-panel)} .project-case-image{background:var(--pix-panel)} .project-case-view-label{border-color:var(--pix-border);background:var(--bg);color:var(--ink)} /* Photo navigation stays visible on both desktop and touch screens. */ .project-case-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:48px;display:grid;place-items:center;padding:0;border:1px solid var(--sage);background:var(--bg);color:var(--sage);cursor:pointer;box-shadow:2px 2px 0 var(--pix-shadow);transition:background-color 160ms ease,color 160ms ease} .project-case-prev{left:12px}.project-case-next{right:12px} .project-case-arrow:hover{background:var(--sage);color:var(--bg)} .project-case-arrow:focus-visible{outline:2px solid var(--sage);outline-offset:4px} .project-case-arrow .icon{width:24px;height:24px} .project-case-counter{position:absolute;right:12px;top:12px;z-index:3;background:var(--bg);color:var(--ink);border:1px solid var(--pix-border);padding:7px 10px;font:600 .75rem/1.2 system-ui,sans-serif;pointer-events:none} .project-case-arrow[hidden],.project-case-counter[hidden]{display:none} @media(max-width:760px){.project-case-prev{left:8px}.project-case-next{right:8px}.project-case-arrow{width:40px;height:44px}} @media(prefers-reduced-motion:reduce){.project-case-arrow{transition:none}}