body{margin:0;padding:0;background:#000;color:#fff;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;min-height:100vh;touch-action:pan-y pinch-zoom;-webkit-text-size-adjust:100%}html{touch-action:manipulation}.section{height:100vh;width:100%;display:flex;justify-content:center;align-items:center}.container,.section{touch-action:pan-y;-webkit-touch-callout:none}.container{position:relative;mix-blend-mode:screen;opacity:0;animation:containerIn 3s cubic-bezier(.2,.8,.2,1) forwards}.logo-wrapper{position:relative;height:200px}.logo-svg{transform:translate(-50%,-50%);width:400px;height:auto}.layer,.logo-svg{position:absolute;left:50%;top:50%}.layer{font-family:Arial,sans-serif;font-size:72px;font-weight:900;transform-origin:center;mix-blend-mode:screen;will-change:transform;white-space:nowrap}#white,.white-layer{color:#fff;mix-blend-mode:normal;z-index:1}#red,.red-layer{color:#f36}#green,.green-layer{color:#3f6}#blue,.blue-layer{color:#36f}#purple,.purple-layer{color:#93f}.text-container{position:relative;height:100%;justify-content:center}.text-container,.text-layer{mix-blend-mode:screen;display:flex;flex-direction:column;align-items:center}.text-layer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Arial,sans-serif;font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:2px;will-change:transform;white-space:nowrap}.tagline-wrapper{position:absolute;bottom:35px;left:0;width:100%;mix-blend-mode:screen}.tagline-layer{position:absolute;left:50%;top:0;font-family:Arial,sans-serif;font-size:24px;text-align:center;letter-spacing:4px;white-space:nowrap;will-change:transform,opacity;opacity:0}.tagline-white{color:#fff;mix-blend-mode:normal;z-index:1}.tagline-red{color:#f36}.tagline-green{color:#3f6}.tagline-blue{color:#36f}.tagline-purple{color:#93f}.toggle-container{position:absolute;left:0;opacity:0;z-index:50;width:100%;animation:toggleFadeIn 1s ease-out forwards;animation-delay:2.2s}@keyframes toggleFadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInWhite{0%{transform:translate(-50%,calc(-50vh - 50%))}to{transform:translate(-50%,-50%)}}@keyframes slideInRed{0%{transform:translate(-50%,calc(-50vh - 50% + 100px))}to{transform:translate(-50%,-50%)}}@keyframes slideInGreen{0%{transform:translate(-50%,calc(-50vh - 50% + 200px))}to{transform:translate(-50%,-50%)}}@keyframes slideInBlue{0%{transform:translate(-50%,calc(-50vh - 50% + 300px))}to{transform:translate(-50%,-50%)}}@keyframes slideInPurple{0%{transform:translate(-50%,calc(-50vh - 50% + 400px))}to{transform:translate(-50%,-50%)}}@keyframes springIn{0%{bottom:-150px}50%{bottom:50px}70%{bottom:15px}85%{bottom:25px}95%{bottom:18px}to{bottom:20px}}@keyframes springOut{0%{bottom:20px}to{bottom:-150px}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@keyframes containerIn{0%{opacity:0}to{opacity:1}}@keyframes colorFade{0%{fill:#7e42f5}50%{fill:#f36}to{fill:#7e42f5}}@keyframes toggleColorFade{0%,to{background-color:#7e42f5}50%{background-color:#f36}}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutToLeft{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100%)}}@keyframes slideOutToRight{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}#white{animation:slideInWhite 3s cubic-bezier(.2,.8,.2,1) forwards}#red{animation:slideInRed 3s cubic-bezier(.2,.8,.2,1) forwards}#green{animation:slideInGreen 3s cubic-bezier(.2,.8,.2,1) forwards}#blue{animation:slideInBlue 3s cubic-bezier(.2,.8,.2,1) forwards}#purple{animation:slideInPurple 3s cubic-bezier(.2,.8,.2,1) forwards}.color-animate{animation:colorFade 3s infinite}.icon-animate{animation:iconColorFade 3s infinite}@keyframes iconColorFade{0%,to{color:#7e42f5}50%{color:#f36}}@media (max-width:768px){.container{transform:translateY(-10vh);scale:.8}}.portfolio-container{background:#000;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px}.portfolio-header{text-align:center;margin-bottom:40px}.logo-wrapper{width:150px;margin:0 auto}.tagline{display:inline-flex;gap:2px;font-family:Arial,sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;color:#fff;margin-top:10px}.wave-char{display:inline-block;animation:fadeColor 8.5s ease-in-out infinite;animation-fill-mode:both}.wave-space{width:8px}@keyframes fadeColor{0%{color:#f36}50%{color:#7e42f5}to{color:#f36}}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:1200px;padding:20px}@media (max-width:768px){.grid-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.grid-container{grid-template-columns:1fr}}.project-card{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:transform .3s ease,box-shadow .3s ease}.project-card:hover{transform:scale(1.05);box-shadow:0 8px 16px rgba(0,0,0,.4)}.project-gif,.project-image{width:100%;height:auto;object-fit:cover;transition:opacity .3s ease}.project-gif{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.project-card:hover .project-gif{opacity:1}.project-card:hover .project-image{opacity:0}.project-hover-overlay{position:absolute;bottom:0;left:0;width:100%;background:rgba(0,0,0,.7);color:#fff;padding:20px;opacity:0;transition:opacity .3s ease}.project-card:hover .project-hover-overlay{opacity:1}.project-hover-overlay h3{margin:0 0 10px;font-size:18px;font-weight:700}.project-hover-overlay p{margin:0;font-size:14px}