@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {

:root {

--background: 0 0% 2%;

--background-light: 0 0% 8%;

--foreground: 0 0% 98%;

--card: 0 0% 5%;

--card-foreground: 0 0% 98%;

--popover: 0 0% 5%;

--popover-foreground: 0 0% 98%;

--primary: 140 100% 50%;

--primary-foreground: 0 0% 2%;

--secondary: 193 100% 52%;

--secondary-foreground: 0 0% 2%;

--muted: 0 0% 12%;

--muted-foreground: 0 0% 75%;

--accent: 0 0% 15%;

--accent-foreground: 0 0% 98%;

--destructive: 0 70% 45%;

--destructive-foreground: 0 0% 98%;

--border: 0 0% 20%;

--input: 0 0% 12%;

--ring: 0 0% 85%;

--radius: 0.5rem;

--chart-1: 220 75% 55%;

--chart-2: 160 70% 50%;

--chart-3: 30 85% 60%;

--chart-4: 280 70% 65%;

--chart-5: 340 80% 60%;

/* Banner glitch animation variables - Enhanced for chromatic aberration */

--banner-text-shadow-glitch-primary:

0 0 2px hsl(var(--primary)),

2px 0 0 hsl(0 100% 50%),

-2px 0 0 hsl(var(--secondary));

--banner-text-shadow-glitch-secondary:

0 0 2px hsl(var(--foreground)),

3px 0 0 hsl(0 100% 50%),

-3px 0 0 hsl(var(--primary));

--banner-transform-glitch-x-pos: translate3d(-3px, 1px, 0);

--banner-transform-glitch-x-neg: translate3d(3px, -1px, 0);

--banner-transform-normal: translate3d(0, 0, 0);

}

}

@layer base {

::-webkit-scrollbar {

display: none;

}

* {

@apply border-border;

}

html {

@apply overflow-x-hidden;

}

/* Disable smooth scroll snapping for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {

html {

scroll-behavior: auto;

}

}

body {

@apply bg-background text-foreground font-roboto-flex overflow-x-hidden;

}

/* Focus visible styles for keyboard navigation */

a:focus-visible,

button:focus-visible,

[role='button']:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible {

outline: 2px solid hsl(var(--primary));

outline-offset: 2px;

}

/* Hide cursor only on desktop where custom cursor is shown, and respect prefers-reduced-motion */

@media (min-width: 768px) {

@media (prefers-reduced-motion: no-preference) {

* {

cursor: none !important;

}

}

}

}

@layer components {

.grid {

@apply gap-[25px];

}

/* Responsive menu grid pattern - larger cells on mobile, denser on desktop */

.bg-menu-grid {

background-image:

linear-gradient(rgba(0, 255, 0, 0.15) 1px, transparent 1px),

linear-gradient(90deg, rgba(0, 255, 0, 0.15) 1px, transparent 1px);

background-size: 32px 32px;

}

@media (min-width: 640px) {

.bg-menu-grid {

background-size: 24px 24px;

}

}

.markdown-text ul {

@apply pl-5 mt-2 list-disc;

}

/* Performance optimizations for animations */

@media (prefers-reduced-motion: reduce) {

*,

*::before,

*::after {

animation-duration: 0.01ms !important;

animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;

}

/* CRITICAL: Ensure all content is visible when animations are disabled */

.stack-category,

.category-title,

.category-item,

.slide-up-and-fade,

.experience-item,

.certification-item,

.project-item {

opacity: 1 !important;

transform: none !important;

}

}

/* GPU acceleration for frequently animated elements */

.will-change-transform {

will-change: transform;

}

@supports (backdrop-filter: blur(1px)) {

.backdrop-blur-sm,

.backdrop-blur-md {

transform: translateZ(0);

-webkit-font-smoothing: antialiased;

}

}

/* Banner glitch text - responsive sizing */

.banner-title {

font-size: clamp(3.5rem, 12vw, 4.5rem);

}

@media (min-width: 640px) {

.banner-title {

font-size: 3.5rem;

}

}

@media (min-width: 768px) {

.banner-title {

font-size: 4.5rem;

}

}

@media (min-width: 1148px) {

.banner-title {

font-size: 5.625rem;

}

}

/* Glitch text effect - RGB split with clip-path slicing */

.glitch-text {

position: relative;

}

.glitch-text[data-text]::before,

.glitch-text[data-text]::after {

content: attr(data-text);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0.8;

}

.glitch-text[data-text]::before {

left: 3px;

text-shadow: -3px 0 hsl(var(--primary));

animation: glitch-anim 0.8s infinite linear alternate-reverse;

}

.glitch-text[data-text]::after {

left: -3px;

text-shadow:

-3px 0 hsl(var(--secondary)),

3px 2px hsl(var(--primary));

animation: glitch-anim2 0.6s infinite linear alternate-reverse;

}

/* Variants for primary/secondary colors */

.glitch-text.glitch-primary[data-text]::before {

text-shadow: -3px 0 hsl(var(--primary));

}

.glitch-text.glitch-primary[data-text]::after {

text-shadow: 3px 0 hsl(var(--secondary)), -2px 0 hsl(0 100% 50%);

}

.glitch-text.glitch-secondary[data-text]::before {

text-shadow: -3px 0 hsl(var(--secondary));

}

.glitch-text.glitch-secondary[data-text]::after {

text-shadow: 3px 0 hsl(var(--primary)), -2px 0 hsl(0 100% 50%);

}

@keyframes glitch-anim {

0% {

clip-path: inset(30px 0 calc(100% - 10px) 0);

transform: skew(0.5deg);

}

10% {

clip-path: inset(70px 0 calc(100% - 30px) 0);

transform: skew(-0.5deg);

}

20% {

clip-path: inset(50px 0 calc(100% - 60px) 0);

transform: skew(0.5deg);

}

30% {

clip-path: inset(10px 0 calc(100% - 45px) 0);

transform: skew(-0.5deg);

}

40% {

clip-path: inset(80px 0 calc(100% - 25px) 0);

transform: skew(0.3deg);

}

50% {

clip-path: inset(20px 0 calc(100% - 80px) 0);

transform: skew(-0.3deg);

}

60% {

clip-path: inset(60px 0 calc(100% - 15px) 0);

transform: skew(0.5deg);

}

70% {

clip-path: inset(35px 0 calc(100% - 70px) 0);

transform: skew(-0.5deg);

}

80% {

clip-path: inset(45px 0 calc(100% - 50px) 0);

transform: skew(0.3deg);

}

90% {

clip-path: inset(15px 0 calc(100% - 90px) 0);

transform: skew(-0.3deg);

}

100% {

clip-path: inset(55px 0 calc(100% - 40px) 0);

transform: skew(0.5deg);

}

}

@keyframes glitch-anim2 {

0% {

clip-path: inset(65px 0 calc(100% - 100px) 0);

transform: skew(-0.5deg);

}

10% {

clip-path: inset(40px 0 calc(100% - 55px) 0);

transform: skew(0.5deg);

}

20% {

clip-path: inset(80px 0 calc(100% - 20px) 0);

transform: skew(-0.3deg);

}

30% {

clip-path: inset(25px 0 calc(100% - 85px) 0);

transform: skew(0.3deg);

}

40% {

clip-path: inset(55px 0 calc(100% - 35px) 0);

transform: skew(-0.5deg);

}

50% {

clip-path: inset(15px 0 calc(100% - 75px) 0);

transform: skew(0.5deg);

}

60% {

clip-path: inset(90px 0 calc(100% - 10px) 0);

transform: skew(-0.3deg);

}

70% {

clip-path: inset(30px 0 calc(100% - 65px) 0);

transform: skew(0.3deg);

}

80% {

clip-path: inset(70px 0 calc(100% - 45px) 0);

transform: skew(-0.5deg);

}

90% {

clip-path: inset(20px 0 calc(100% - 95px) 0);

transform: skew(0.5deg);

}

100% {

clip-path: inset(50px 0 calc(100% - 30px) 0);

transform: skew(-0.3deg);

}

}

@keyframes glitch-skew {

0% {

transform: skew(0deg);

}

20% {

transform: skew(0deg);

}

21% {

transform: skew(1deg);

}

22% {

transform: skew(-1deg);

}

23% {

transform: skew(0deg);

}

100% {

transform: skew(0deg);

}

}

@keyframes download-bounce {

0%,

100% {

transform: translateY(-3px);

opacity: 0.6;

}

50% {

transform: translateY(2px);

opacity: 1;

}

}

@keyframes download-line {

0% {

transform: translateY(-4px);

opacity: 0;

}

30% {

opacity: 1;

}

100% {

transform: translateY(4px);

opacity: 0;

}

}

@keyframes pulse-dot {

0%, 100% {

opacity: 1;

transform: scale(1);

}

50% {

opacity: 0.6;

transform: scale(1.2);

}

}

/* Pulse dot for current roles */

.pulse-dot {

animation: pulse-dot 2s ease-in-out infinite;

}

/* Timeline pulse animation */

.timeline-dot {

transition: border-color 0.4s ease, box-shadow 0.4s ease;

}

.timeline-dot-current {

position: relative;

box-shadow: 0 0 12px hsl(var(--primary) / 0.6), 0 0 24px hsl(var(--primary) / 0.3);

}

.timeline-dot-current.timeline-dot-active::before {

content: '';

position: absolute;

inset: -8px;

border-radius: 9999px;

border: 2px solid hsl(var(--primary) / 0.5);

animation: timeline-current-ring 2s ease-in-out infinite;

}

.timeline-dot-current.timeline-dot-active::after {

content: '';

position: absolute;

inset: -14px;

border-radius: 9999px;

border: 1px solid hsl(var(--primary) / 0.2);

animation: timeline-current-ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;

}

@keyframes timeline-current-ring {

0%, 100% {

transform: scale(1);

opacity: 0.6;

}

50% {

transform: scale(1.15);

opacity: 0.8;

}

}

@keyframes timeline-current-ping {

0% {

transform: scale(0.9);

opacity: 0.5;

}

50% {

transform: scale(1.8);

opacity: 0;

}

100% {

transform: scale(0.9);

opacity: 0;

}

}

/* Grid background pattern */

.experience-grid-bg {

background-image:

linear-gradient(rgba(0, 255, 0, 0.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(0, 255, 0, 0.03) 1px, transparent 1px);

background-size: 40px 40px;

}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {

.pulse-dot {

animation: none;

}

.timeline-dot {

transition: none;

border-color: hsl(var(--primary)) !important;

background-color: hsl(var(--primary)) !important;

}

.timeline-dot-current.timeline-dot-active::after {

animation: none;

}

.timeline-dot-current.timeline-dot-active::before {

animation: none;

opacity: 0.6;

transform: scale(1);

}

.timeline-line-fill {

height: 100% !important;

}

.timeline-pulse-ring,

.timeline-pulse-ring-2 {

display: none;

}

/* Duration bar reduced motion */

.duration-bar-fill {

width: 100% !important;

animation: none !important;

box-shadow: none !important;

}

.experience-card-highlighted {

border-color: hsl(var(--primary) / 0.3);

box-shadow: none;

}

.present-dot,

.present-dot-active {

animation: none;

}

/* Footer email underline - always visible */

.group:hover .footer-email-underline {

transform: scaleX(1) !important;

}

/* ProjectCard corner bracket extension lines - always fully drawn */

.corner-bracket-line {

stroke-dashoffset: 0 !important;

}

}

/* Duration bar - GSAP handles width animation, this ensures initial state */

.present-dot {

animation: present-pulse 2s ease-in-out infinite;

}

.present-dot-active {

animation: present-pulse-active 1.5s ease-in-out infinite;

}

@keyframes present-pulse {

0%, 100% {

opacity: 0.6;

transform: scale(1);

}

50% {

opacity: 1;

transform: scale(1.15);

}

}

@keyframes present-pulse-active {

0%, 100% {

opacity: 1;

transform: scale(1);

box-shadow: 0 0 4px hsl(var(--primary));

}

50% {

opacity: 1;

transform: scale(1.3);

box-shadow: 0 0 12px hsl(var(--primary)), 0 0 20px hsl(var(--primary) / 0.4);

}

}

/* Subtle pulse animation for highlighted duration bars */

.animate-pulse-subtle {

animation: pulse-subtle 1.5s ease-in-out infinite;

}

@keyframes pulse-subtle {

0%, 100% {

opacity: 1;

box-shadow: 0 0 4px hsl(var(--primary) / 0.3);

}

50% {

opacity: 0.9;

box-shadow: 0 0 8px hsl(var(--primary) / 0.5);

}

}

/* Highlighted experience card glow */

.experience-card-highlighted {

border: 1px solid hsl(var(--primary) / 0.2);

box-shadow: 0 0 20px hsl(var(--primary) / 0.1);

}

.experience-card-highlighted:hover {

border-color: hsl(var(--primary) / 0.4);

box-shadow: 0 0 30px hsl(var(--primary) / 0.15);

}

}