/* ============================================
   Page Loader Overlay
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0a0a0c;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader--fade-out {
    opacity: 0;
    visibility: hidden;
}

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    /* Colors - Dark fantasy palette */
    --color-bg: #0a0a0c;
    --color-bg-elevated: #12121a;
    --color-bg-card: #16161f;
    --color-surface: #1a1a24;
    
    --color-text: #e8e6e3;
    --color-text-muted: #9a9a9a;
    --color-text-dim: #6a6a6a;
    
    --color-accent: #c9a227;
    --color-accent-hover: #e0b82e;
    --color-accent-dim: rgba(201, 162, 39, 0.2);
    
    --color-border: #2a2a35;
    --color-border-light: #3a3a45;
    
    /* Minesweeper colors */
    --mine-1: #4a9eff;
    --mine-2: #22c55e;
    --mine-3: #ef4444;
    --mine-4: #8b5cf6;
    --mine-5: #f97316;
    --mine-6: #06b6d4;
    --mine-7: #334155;
    --mine-8: #94a3b8;
    
    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
    --space-2xl: 8rem;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Layout */
    --container-max: 1200px;
    --nav-height: 70px;
    
    /* Diamond Nav */
    --diamond-size: 56px;
    --diamond-bg: rgba(20, 20, 28, 0.95);
    --diamond-border: rgba(255, 255, 255, 0.15);
    --diamond-glow: rgba(255, 255, 255, 0.4);
    --diamond-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --radial-item-size: 46px;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: #000000;
    overflow-x: hidden;
}

/* Scroll lock for modals - prevents background scrolling */
html.scroll-locked,
html.scroll-locked body {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Prevent image selection and saving */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

/* Re-enable pointer events on interactive image containers */
.project-card__image,
.artwork-carousel__slides,
.hero__image-container {
    pointer-events: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
}

p + p {
    margin-top: var(--space-md);
}

strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* ============================================
   Layout
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-2xl) 0;
    position: relative;
}

/* Black background for about, skills, projects, and apps sections */
.about,
.skills,
.projects,
.apps {
    background-color: #000000;
}

/* ============================================
   Hero to Content Transition
   ============================================ */
.hero-transition {
    position: relative;
    height: 150px;
    background: linear-gradient(to bottom, #000000 0%, #000000 30%, transparent 100%);
    z-index: 1;
}

/* ============================================
   Content Paper Wrapper - Torn Edge Effect
   ============================================ */
.content-paper {
    position: relative;
    z-index: 1;
    max-width: 1460px;
    margin: 0 auto;
}

/* Animated diagonal stripes background - only behind content paper */
.content-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: -1;
    background: #070608;
    background: linear-gradient(
        135deg,
        #070608 25%,
        #0f0f10 25%,
        #0f0f10 50%,
        #070608 50%,
        #070608 75%,
        #0f0f10 75%,
        #0f0f10
    );
    background-size: 40px 40px;
    animation: stripe-move 4s linear infinite;
    /* Fade out at top to blend with hero */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 150px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 150px);
}

@keyframes stripe-move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 40px;
    }
}

.content-paper__inner {
    background-color: #000000;
    position: relative;
    z-index: 2;
    /* Clip the inner content to create torn edges */
    /* Wider container - sides 0-15 range */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L1000 0 L1000 8 L992 16 L1000 24 L990 32 L998 40 L988 48 L1000 56 L992 64 L998 72 L988 80 L1000 88 L992 96 L998 104 L988 112 L1000 120 L992 128 L998 136 L988 144 L1000 152 L992 160 L998 168 L988 176 L1000 184 L992 192 L998 200 L988 208 L1000 216 L992 224 L998 232 L988 240 L1000 248 L992 256 L998 264 L988 272 L1000 280 L992 288 L998 296 L988 304 L1000 312 L992 320 L998 328 L988 336 L1000 344 L992 352 L998 360 L988 368 L1000 376 L992 384 L998 392 L988 400 L1000 408 L992 416 L998 424 L988 432 L1000 440 L992 448 L998 456 L988 464 L1000 472 L992 480 L998 488 L988 496 L1000 504 L992 512 L998 520 L988 528 L1000 536 L992 544 L998 552 L988 560 L1000 568 L992 576 L998 584 L988 592 L1000 600 L992 608 L998 616 L988 624 L1000 632 L992 640 L998 648 L988 656 L1000 664 L992 672 L998 680 L988 688 L1000 696 L992 704 L998 712 L988 720 L1000 728 L992 736 L998 744 L988 752 L1000 760 L992 768 L998 776 L988 784 L1000 792 L992 800 L998 808 L988 816 L1000 824 L992 832 L998 840 L988 848 L1000 856 L992 864 L998 872 L988 880 L1000 888 L992 896 L998 904 L988 912 L1000 920 L992 928 L998 936 L988 944 L1000 952 L992 960 L998 968 L990 976 L998 984 L992 992 L1000 1000 L0 1000 L0 992 L8 984 L0 976 L10 968 L2 960 L12 952 L0 944 L8 936 L2 928 L12 920 L0 912 L8 904 L2 896 L12 888 L0 880 L8 872 L2 864 L12 856 L0 848 L8 840 L2 832 L12 824 L0 816 L8 808 L2 800 L12 792 L0 784 L8 776 L2 768 L12 760 L0 752 L8 744 L2 736 L12 728 L0 720 L8 712 L2 704 L12 696 L0 688 L8 680 L2 672 L12 664 L0 656 L8 648 L2 640 L12 632 L0 624 L8 616 L2 608 L12 600 L0 592 L8 584 L2 576 L12 568 L0 560 L8 552 L2 544 L12 536 L0 528 L8 520 L2 512 L12 504 L0 496 L8 488 L2 480 L12 472 L0 464 L8 456 L2 448 L12 440 L0 432 L8 424 L2 416 L12 408 L0 400 L8 392 L2 384 L12 376 L0 368 L8 360 L2 352 L12 344 L0 336 L8 328 L2 320 L12 312 L0 304 L8 296 L2 288 L12 280 L0 272 L8 264 L2 256 L12 248 L0 240 L8 232 L2 224 L12 216 L0 208 L8 200 L2 192 L12 184 L0 176 L8 168 L2 160 L12 152 L0 144 L8 136 L2 128 L12 120 L0 112 L8 104 L2 96 L12 88 L0 80 L8 72 L2 64 L12 56 L0 48 L8 40 L2 32 L12 24 L0 16 L8 8 L0 0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L1000 0 L1000 8 L992 16 L1000 24 L990 32 L998 40 L988 48 L1000 56 L992 64 L998 72 L988 80 L1000 88 L992 96 L998 104 L988 112 L1000 120 L992 128 L998 136 L988 144 L1000 152 L992 160 L998 168 L988 176 L1000 184 L992 192 L998 200 L988 208 L1000 216 L992 224 L998 232 L988 240 L1000 248 L992 256 L998 264 L988 272 L1000 280 L992 288 L998 296 L988 304 L1000 312 L992 320 L998 328 L988 336 L1000 344 L992 352 L998 360 L988 368 L1000 376 L992 384 L998 392 L988 400 L1000 408 L992 416 L998 424 L988 432 L1000 440 L992 448 L998 456 L988 464 L1000 472 L992 480 L998 488 L988 496 L1000 504 L992 512 L998 520 L988 528 L1000 536 L992 544 L998 552 L988 560 L1000 568 L992 576 L998 584 L988 592 L1000 600 L992 608 L998 616 L988 624 L1000 632 L992 640 L998 648 L988 656 L1000 664 L992 672 L998 680 L988 688 L1000 696 L992 704 L998 712 L988 720 L1000 728 L992 736 L998 744 L988 752 L1000 760 L992 768 L998 776 L988 784 L1000 792 L992 800 L998 808 L988 816 L1000 824 L992 832 L998 840 L988 848 L1000 856 L992 864 L998 872 L988 880 L1000 888 L992 896 L998 904 L988 912 L1000 920 L992 928 L998 936 L988 944 L1000 952 L992 960 L998 968 L990 976 L998 984 L992 992 L1000 1000 L0 1000 L0 992 L8 984 L0 976 L10 968 L2 960 L12 952 L0 944 L8 936 L2 928 L12 920 L0 912 L8 904 L2 896 L12 888 L0 880 L8 872 L2 864 L12 856 L0 848 L8 840 L2 832 L12 824 L0 816 L8 808 L2 800 L12 792 L0 784 L8 776 L2 768 L12 760 L0 752 L8 744 L2 736 L12 728 L0 720 L8 712 L2 704 L12 696 L0 688 L8 680 L2 672 L12 664 L0 656 L8 648 L2 640 L12 632 L0 624 L8 616 L2 608 L12 600 L0 592 L8 584 L2 576 L12 568 L0 560 L8 552 L2 544 L12 536 L0 528 L8 520 L2 512 L12 504 L0 496 L8 488 L2 480 L12 472 L0 464 L8 456 L2 448 L12 440 L0 432 L8 424 L2 416 L12 408 L0 400 L8 392 L2 384 L12 376 L0 368 L8 360 L2 352 L12 344 L0 336 L8 328 L2 320 L12 312 L0 304 L8 296 L2 288 L12 280 L0 272 L8 264 L2 256 L12 248 L0 240 L8 232 L2 224 L12 216 L0 208 L8 200 L2 192 L12 184 L0 176 L8 168 L2 160 L12 152 L0 144 L8 136 L2 128 L12 120 L0 112 L8 104 L2 96 L12 88 L0 80 L8 72 L2 64 L12 56 L0 48 L8 40 L2 32 L12 24 L0 16 L8 8 L0 0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Top torn edge - more dramatic tears */
.content-paper__edge--top {
    position: relative;
    height: 60px;
    background-color: #000000;
    z-index: 2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 60' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 L0 18 L15 22 L25 8 L40 20 L55 5 L70 18 L85 10 L100 25 L115 8 L130 20 L145 12 L160 22 L175 5 L190 18 L205 10 L220 24 L235 8 L250 20 L265 12 L280 22 L295 5 L310 18 L325 10 L340 25 L355 8 L370 20 L385 12 L400 22 L415 5 L430 18 L445 10 L460 24 L475 8 L490 20 L505 12 L520 22 L535 5 L550 18 L565 10 L580 25 L595 8 L610 20 L625 12 L640 22 L655 5 L670 18 L685 10 L700 24 L715 8 L730 20 L745 12 L760 22 L775 5 L790 18 L805 10 L820 25 L835 8 L850 20 L865 12 L880 22 L895 5 L910 18 L925 10 L940 24 L955 8 L970 20 L985 15 L1000 22 L1000 60 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 60' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 L0 18 L15 22 L25 8 L40 20 L55 5 L70 18 L85 10 L100 25 L115 8 L130 20 L145 12 L160 22 L175 5 L190 18 L205 10 L220 24 L235 8 L250 20 L265 12 L280 22 L295 5 L310 18 L325 10 L340 25 L355 8 L370 20 L385 12 L400 22 L415 5 L430 18 L445 10 L460 24 L475 8 L490 20 L505 12 L520 22 L535 5 L550 18 L565 10 L580 25 L595 8 L610 20 L625 12 L640 22 L655 5 L670 18 L685 10 L700 24 L715 8 L730 20 L745 12 L760 22 L775 5 L790 18 L805 10 L820 25 L835 8 L850 20 L865 12 L880 22 L895 5 L910 18 L925 10 L940 24 L955 8 L970 20 L985 15 L1000 22 L1000 60 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .content-paper {
        max-width: calc(100% - 60px);
    }
}

@media (max-width: 768px) {
    .content-paper {
        max-width: calc(100% - 30px);
    }
    
    .content-paper__edge--top {
        height: 40px;
    }
    
    .hero-transition {
        height: 100px;
    }
    
    .content-paper::before {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100px);
        mask-image: linear-gradient(to bottom, transparent 0%, black 100px);
    }
}

@media (max-width: 480px) {
    .content-paper {
        max-width: calc(100% - 16px);
    }
    
    .content-paper__edge--top {
        height: 25px;
    }
    
    .hero-transition {
        height: 60px;
    }
    
    .content-paper::before {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60px);
        mask-image: linear-gradient(to bottom, transparent 0%, black 60px);
    }
}

/* ============================================
   Skills Section
   ============================================ */
.skills {
    min-height: 200px;
    padding-bottom: var(--space-xl);
}

.skills__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skills__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    position: relative;
}

/* Vertical divider between skill columns */
.skills__row::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--color-border) 15%,
        var(--color-border-light) 50%,
        var(--color-border) 85%,
        transparent 100%
    );
    transform: translateX(-50%);
    pointer-events: none;
}

.skills__segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image content";
    gap: var(--space-md);
    padding: var(--space-lg) 0;
}

.skills__image {
    grid-area: image;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Glow effect on the tile itself */
.skills__image:hover {
    border-color: rgba(201, 162, 39, 0.4);
    animation: skill-tile-glow 1.5s ease-in-out infinite;
}

@keyframes skill-tile-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(201, 162, 39, 0.25); }
    50% { box-shadow: 0 0 25px rgba(201, 162, 39, 0.45); }
}

.skills__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(201, 162, 39, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.skills__image-emoji {
    font-size: 3rem;
    filter: grayscale(30%);
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* GIF images in skill tiles */
.skills__image-gif {
    width: 75%;
    height: 75%;
    object-fit: contain;
    transition: transform var(--transition-base), filter var(--transition-base);
    pointer-events: none;
    filter: grayscale(100%);
}

/* Hover effects for skill image */
.skills__image:hover .skills__image-gif {
    animation: skill-pulse 0.6s ease-in-out;
    filter: grayscale(0%);
}

@keyframes skill-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.skills__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-sm);
}

.skills__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

.skills__list {
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.8;
    list-style: none;
    padding: 0;
    margin: 0;
}

.skills__list li {
    position: relative;
    padding-left: 1.25em;
}

.skills__list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.skills__separator {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-border) 15%,
        var(--color-border-light) 50%,
        var(--color-border) 85%,
        transparent 100%
    );
    margin: 0;
}

/* Tablet: 2 columns but segments stack internally */
@media (max-width: 1024px) {
    .skills__segment {
        gap: var(--space-sm);
    }
    
    .skills__image-emoji {
        font-size: 2.5rem;
    }
    
    .skills__image-gif {
        width: 70%;
        height: 70%;
    }
    
    .skills__title {
        font-size: 1.4rem;
    }
    
    .skills__list {
        font-size: 1rem;
    }
}

/* Small tablet: single column rows */
@media (max-width: 900px) {
    .skills__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Hide vertical divider when stacked */
    .skills__row::after {
        display: none;
    }
    
    .skills__segment {
        border-bottom: 1px solid var(--color-border);
    }
    
    .skills__segment:last-child {
        border-bottom: none;
    }
    
    .skills__row:last-child .skills__segment:last-child {
        border-bottom: none;
    }
    
    .skills__separator {
        display: none;
    }
}

/* Mobile: segments stack to image above text */
@media (max-width: 600px) {
    .skills__segment {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "image"
            "content";
        text-align: center;
        padding: var(--space-md) 0;
    }
    
    .skills__image {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    .skills__image-emoji {
        font-size: 2rem;
    }
    
    .skills__image-gif {
        width: 80%;
        height: 80%;
    }
    
    .skills__content {
        padding: var(--space-sm) 0;
    }
    
    .skills__title {
        font-size: 1.3rem;
    }
    
    .skills__list {
        font-size: 0.95rem;
        text-align: left;
        display: inline-block;
    }
}

.section__title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.section__subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* CSS custom properties for light positions and sizes (set by JS) */
    --cursor-x: -1000px;
    --cursor-y: -1000px;
    --avatar-x: 50%;
    --avatar-y: 50%;
    --avatar-pulse: 1;
    --avatar-radius: 290px; /* Default: 180px avatar / 2 + 200px buffer, updated by JS */
}

/* ============================================
   Hero Darkness/Mist Overlay
   ============================================ 
   ADJUSTABLE VALUES:
   - Cursor light size: CURSOR_LIGHT_RADIUS in JS (default 300px)
   - Cursor flicker/wobble: CURSOR_FLICKER_AMOUNT, CURSOR_WOBBLE_AMOUNT in JS
   - Avatar light buffer: AVATAR_LIGHT_BUFFER in JS (200px beyond avatar edge)
   - Mist opacity: Change opacity on .hero__mist layers (0.75-0.95)
   - Mist color: Change background colors in .hero__mist gradients
   - Swirl speed: Change animation duration (currently 60s, 45s, 80s)
   - Darkness opacity: Change background alpha on .hero__darkness (currently 0.6)
   - Light softness: Adjust gradient percentages in mask-image
*/

/* Mist container - masked by light sources */
.hero__mist-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 50ms linear;
    /* Same light reveal mask as darkness layer */
    -webkit-mask-image: 
        radial-gradient(
            circle var(--cursor-radius) at var(--cursor-x) var(--cursor-y),
            transparent 0%,
            transparent 20%,
            black 80%
        ),
        radial-gradient(
            circle calc(var(--avatar-radius) * var(--avatar-pulse)) at var(--avatar-x) var(--avatar-y),
            transparent 0%,
            transparent 25%,
            black 75%
        );
    mask-image: 
        radial-gradient(
            circle var(--cursor-radius) at var(--cursor-x) var(--cursor-y),
            transparent 0%,
            transparent 20%,
            black 80%
        ),
        radial-gradient(
            circle calc(var(--avatar-radius) * var(--avatar-pulse)) at var(--avatar-x) var(--avatar-y),
            transparent 0%,
            transparent 25%,
            black 75%
        );
    -webkit-mask-composite: source-over;
    mask-composite: intersect;
}

/* Darkness layer - masked by light sources */
.hero__darkness {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    /* Light reveal mask - combines cursor and avatar lights */
    -webkit-mask-image: 
        radial-gradient(
            circle var(--cursor-radius) at var(--cursor-x) var(--cursor-y),
            transparent 0%,
            transparent 20%,
            black 80%
        ),
        radial-gradient(
            circle calc(var(--avatar-radius) * var(--avatar-pulse)) at var(--avatar-x) var(--avatar-y),
            transparent 0%,
            transparent 25%,
            black 75%
        );
    mask-image: 
        radial-gradient(
            circle var(--cursor-radius) at var(--cursor-x) var(--cursor-y),
            transparent 0%,
            transparent 20%,
            black 80%
        ),
        radial-gradient(
            circle calc(var(--avatar-radius) * var(--avatar-pulse)) at var(--avatar-x) var(--avatar-y),
            transparent 0%,
            transparent 25%,
            black 75%
        );
    -webkit-mask-composite: source-over;
    mask-composite: intersect;
    transition: opacity 50ms linear;
}

/* Swirling mist layers */
.hero__mist {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}

.hero__mist--1 {
    opacity: 0.95;
    background: 
        radial-gradient(ellipse 50% 40% at 30% 30%, rgba(0, 0, 0, 1) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 70% 60%, rgba(0, 0, 0, 0.95) 0%, transparent 55%),
        radial-gradient(ellipse 60% 35% at 50% 80%, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
    animation: mist-swirl-1 60s linear infinite;
}

.hero__mist--2 {
    opacity: 0.85;
    background: 
        radial-gradient(ellipse 45% 55% at 60% 40%, rgba(20, 20, 30, 0.95) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 25% 70%, rgba(10, 10, 20, 1) 0%, transparent 60%),
        radial-gradient(ellipse 35% 60% at 80% 20%, rgba(15, 15, 25, 0.9) 0%, transparent 50%);
    animation: mist-swirl-2 45s linear infinite reverse;
}

.hero__mist--3 {
    opacity: 0.75;
    background: 
        radial-gradient(ellipse 50% 50% at 45% 55%, rgba(25, 25, 40, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 75% 35%, rgba(5, 5, 15, 1) 0%, transparent 55%),
        radial-gradient(ellipse 55% 35% at 20% 45%, rgba(15, 15, 30, 0.95) 0%, transparent 55%);
    animation: mist-swirl-3 80s linear infinite;
}

@keyframes mist-swirl-1 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes mist-swirl-2 {
    0% { transform: rotate(0deg) translateX(0) translateY(0); }
    33% { transform: rotate(120deg) translateX(5%) translateY(-3%); }
    66% { transform: rotate(240deg) translateX(-3%) translateY(5%); }
    100% { transform: rotate(360deg) translateX(0) translateY(0); }
}

@keyframes mist-swirl-3 {
    0% { transform: rotate(0deg) scale(1.05); }
    25% { transform: rotate(90deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    75% { transform: rotate(270deg) scale(1); }
    100% { transform: rotate(360deg) scale(1.05); }
}

/* Particles canvas */
.hero__particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    transition: opacity 50ms linear;
}

/* Mobile: hide cursor-based effects, simplify */
@media (max-width: 768px) {
    .hero__darkness,
    .hero__mist-container {
        /* Only avatar light on mobile */
        -webkit-mask-image: 
            radial-gradient(
                circle calc(var(--avatar-radius) * var(--avatar-pulse)) at var(--avatar-x) var(--avatar-y),
                transparent 0%,
                transparent 25%,
                black 75%
            );
        mask-image: 
            radial-gradient(
                circle calc(var(--avatar-radius) * var(--avatar-pulse)) at var(--avatar-x) var(--avatar-y),
                transparent 0%,
                transparent 25%,
                black 75%
            );
    }
    
    /* Reduce mist animation complexity on mobile */
    .hero__mist--2,
    .hero__mist--3 {
        display: none;
    }
    
    .hero__mist--1 {
        animation-duration: 90s;
    }
}
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero__image-container {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* These values are animated by JS */
    transform: scale(var(--hero-scale, 1));
    filter: blur(var(--hero-blur, 0px));
    opacity: var(--hero-opacity, 1);
    transition: transform 50ms linear, filter 50ms linear, opacity 50ms linear;
    will-change: transform, filter, opacity;
}

.hero__scroll-hint {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: float 2s ease-in-out infinite;
    /* Fade out as user scrolls */
    opacity: var(--hero-content-opacity, 1);
    transition: opacity 50ms linear;
    /* White text with black outline */
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 8px rgba(0, 0, 0, 0.5);
}

.hero__scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
}

/* Hero Avatar */
.hero__avatar {
    position: relative;
    z-index: 10;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    overflow: hidden;
    box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base), opacity 50ms linear;
    cursor: pointer;
}

.hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero__avatar:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 40px rgba(255, 255, 255, 0.2),
        0 0 60px rgba(0, 0, 0, 0.4);
    animation: avatar-pulse 1.5s ease-in-out infinite;
}

/* Shine sweep effect on hover */
.hero__avatar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        60deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 60%,
        transparent 100%
    );
    transform: translateX(-100%) rotate(0deg);
    transition: none;
    pointer-events: none;
    z-index: 10;
}

.hero__avatar--sparkling::before {
    animation: avatar-shine 0.6s ease-out forwards;
}

@keyframes avatar-shine {
    0% {
        transform: translateX(-100%) rotate(0deg);
    }
    100% {
        transform: translateX(100%) rotate(0deg);
    }
}

@keyframes avatar-pulse {
    0%, 100% { 
        box-shadow: 
            0 0 40px rgba(255, 255, 255, 0.2),
            0 0 60px rgba(0, 0, 0, 0.4);
    }
    50% { 
        box-shadow: 
            0 0 50px rgba(255, 255, 255, 0.35),
            0 0 80px rgba(0, 0, 0, 0.3);
    }
}

/* Hero Profile Container (avatar + linkedin) */
.hero__profile {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

/* LinkedIn Icon */
.hero__linkedin {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-base), transform var(--transition-base);
}

.hero__linkedin svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.hero__linkedin:hover {
    color: #0a66c2;
}

/* LinkedIn hop and wiggle animation */
.hero__linkedin--animating {
    animation: linkedin-hop 0.6s ease-out;
}

@keyframes linkedin-hop {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    20% { transform: translateY(-12px) scale(1.15) rotate(0deg); }
    40% { transform: translateY(-8px) scale(0.95) rotate(-8deg); }
    55% { transform: translateY(-4px) scale(1.05) rotate(6deg); }
    70% { transform: translateY(-2px) scale(0.98) rotate(-4deg); }
    85% { transform: translateY(0) scale(1.02) rotate(2deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .hero__profile {
        gap: var(--space-md);
    }
    
    .hero__linkedin svg {
        width: 36px;
        height: 36px;
    }
}

/* Hero bottom fade gradient */
.hero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, #000000 100%);
    z-index: 6;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ============================================
   Diamond Navigation
   ============================================ */
.diamond-nav {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: 
        opacity var(--diamond-transition),
        visibility var(--diamond-transition),
        transform var(--diamond-transition);
}

.diamond-nav--visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Main Diamond Button */
.diamond-nav__trigger {
    width: var(--diamond-size);
    height: var(--diamond-size);
    background: var(--diamond-bg);
    border: 1px solid var(--diamond-border);
    border-radius: 8px;
    transform: rotate(45deg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all var(--diamond-transition);
    backdrop-filter: blur(10px);
    z-index: 3;
}

/* Holographic shine effect */
.diamond-nav__trigger::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        transparent 40%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 60%,
        transparent
    );
    transform: rotate(-25deg) translateX(-100%);
    transition: transform 600ms ease;
    pointer-events: none;
}

.diamond-nav__trigger:hover::before {
    transform: rotate(-25deg) translateX(100%);
}

.diamond-nav__trigger:hover {
    transform: rotate(45deg) scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 0 20px var(--diamond-glow),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Home icon inside diamond */
.diamond-nav__icon {
    transform: rotate(-45deg);
    font-size: 1.4rem;
    color: var(--color-text);
    transition: color var(--transition-fast);
    line-height: 1;
}

.diamond-nav__trigger:hover .diamond-nav__icon {
    color: #fff;
}

/* Radial Menu Container */
.diamond-nav__menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

/* Invisible hover bridge - keeps menu open when moving to items */
.diamond-nav::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: calc(var(--diamond-size) + 75px + 30px);
    height: calc(var(--diamond-size) + (var(--radial-item-size) + 10px) * 4 + 50px);
    pointer-events: none;
    z-index: 1;
}

.diamond-nav:hover::after {
    pointer-events: auto;
}

/* Individual Radial Items - starts as circle */
.diamond-nav__item {
    --expand-amount: 75px;
    position: absolute;
    width: var(--radial-item-size);
    height: var(--radial-item-size);
    background: var(--diamond-bg);
    border: 1px solid var(--diamond-border);
    border-radius: calc(var(--radial-item-size) / 2);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 calc((var(--radial-item-size) - 1.1rem) / 2);
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    opacity: 0;
    transform: scale(0.5);
    transition: width var(--diamond-transition), 
                height var(--diamond-transition),
                opacity var(--diamond-transition), 
                transform var(--diamond-transition),
                background var(--diamond-transition),
                border-color var(--diamond-transition),
                box-shadow var(--diamond-transition);
    pointer-events: none;
    backdrop-filter: blur(10px);
    overflow: hidden;
    white-space: nowrap;
    /* Anchor from right edge - centered under diamond */
    right: calc(50% - var(--radial-item-size) / 2);
    top: 50%;
}

.diamond-nav__item-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.diamond-nav__item-label {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}

/* Position items vertically below diamond - centered */
/* Item 1: About */
.diamond-nav__item:nth-child(1) {
    --target-y: calc(var(--diamond-size) * 0.7 + 10px);
    transition-delay: 0ms;
}

/* Item 2: Skills */
.diamond-nav__item:nth-child(2) {
    --target-y: calc(var(--diamond-size) * 0.7 + 10px + (var(--radial-item-size) + 10px));
    transition-delay: 50ms;
}

/* Item 3: Projects */
.diamond-nav__item:nth-child(3) {
    --target-y: calc(var(--diamond-size) * 0.7 + 10px + (var(--radial-item-size) + 10px) * 2);
    transition-delay: 100ms;
}

/* Item 4: Apps */
.diamond-nav__item:nth-child(4) {
    --target-y: calc(var(--diamond-size) * 0.7 + 10px + (var(--radial-item-size) + 10px) * 3);
    transition-delay: 150ms;
}

/* Item 5: Contact */
.diamond-nav__item:nth-child(5) {
    --target-y: calc(var(--diamond-size) * 0.7 + 10px + (var(--radial-item-size) + 10px) * 4);
    transition-delay: 200ms;
}

/* Hover state - expand radial menu */
.diamond-nav:hover .diamond-nav__item {
    opacity: 1;
    transform: scale(1) translateY(var(--target-y));
    pointer-events: auto;
}

/* Item hover - expand capsule leftward only (icon stays in place) */
.diamond-nav__item:hover {
    width: calc(var(--radial-item-size) + var(--expand-amount));
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px var(--diamond-glow);
}

.diamond-nav__item:hover .diamond-nav__item-label {
    opacity: 1;
    transition-delay: 250ms;
}

/* Diamond nav mobile adjustments */
@media (max-width: 768px) {
    .diamond-nav {
        --diamond-size: 50px;
        --radial-item-size: 40px;
        top: 15px;
        right: 15px;
    }
    
    .diamond-nav__item-label {
        display: none;
    }
    
    .diamond-nav__item:hover {
        width: var(--radial-item-size);
    }
}

/* ============================================
   Apps / Minesweeper Grid Section
   ============================================ */
.apps {
    background: #000;
    padding: var(--space-xl) 0;
}

.container--wide {
    max-width: 1400px;
}

/* Frame surrounding the grid */
.apps__frame {
    position: relative;
    background: #1a1a1f;
    border: 3px solid #2a2a32;
    border-radius: 8px;
    padding: 12px;
    margin-top: 40px; /* Space for the eye - half height sits on frame */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.5);
}

/* The Eye - sharp almond shape, pointed corners */
.apps__eye {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 70px;
    cursor: pointer;
    z-index: 10;
}

/* Outer frame - sharp almond, steep angular tips */
.apps__eye-frame {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 70px;
    background: #2a2a32;
    clip-path: polygon(
        0% 50%,
        20% 8%, 50% 0%, 80% 8%,
        100% 50%,
        80% 92%, 50% 100%, 20% 92%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner border/bevel effect */
.apps__eye-frame::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: linear-gradient(135deg, #3a3a45 0%, #25252d 100%);
    clip-path: polygon(
        0% 50%,
        20% 8%, 50% 0%, 80% 8%,
        100% 50%,
        80% 92%, 50% 100%, 20% 92%
    );
    z-index: 1;
}

/* Eye socket - black void, sharp almond */
.apps__eye-socket {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 118px;
    height: 52px;
    background: #0a0a0c;
    clip-path: polygon(
        0% 50%,
        20% 8%, 50% 0%, 80% 8%,
        100% 50%,
        80% 92%, 50% 100%, 20% 92%
    );
    z-index: 2;
    overflow: hidden;
}

/* Eyelids - positioned inside socket, controlled via JS transforms */
.apps__eye-lid {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.apps__eye-lid svg {
    display: block;
    width: 100%;
    height: 100%;
}

.apps__eye-lid--top {
    top: 0;
}

.apps__eye-lid--bottom {
    top: 0;
}

/* Eye Speech Bubble */
.apps__eye-speech {
    position: absolute;
    top: -55px;
    left: 75%;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
}

.apps__eye-speech--visible {
    opacity: 1;
}

.apps__eye-speech__line {
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 1px;
    height: 20px;
    background: #e8e6e3;
    transform: rotate(30deg);
    transform-origin: top left;
}

.apps__eye-speech__text {
    background: transparent;
    color: #e8e6e3;
    font-family: 'Cinzel', serif;  /* Gothic font - change here */
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
    padding: 4px 8px;
    text-align: left;
}

/* Twitching animation for "Ow!" */
@keyframes twitch {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-3deg) translateX(-2px); }
    40% { transform: rotate(2deg) translateX(2px); }
    60% { transform: rotate(-2deg) translateX(-1px); }
    80% { transform: rotate(1deg) translateX(1px); }
}

.apps__eye-speech--twitching {
    animation: twitch 0.3s ease-in-out infinite;
}

/* Iris container - for tracking */
.apps__eye-iris {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    transition: transform 0.15s ease-out;
    z-index: 3;
}

/* Cat-eye pupil - sharp pointed slit */
.apps__eye-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 46px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.7) 0%, 
        #ffffff 20%,
        #f8f8f8 50%,
        #ffffff 80%,
        rgba(255, 255, 255, 0.7) 100%
    );
    clip-path: polygon(
        50% 0%,
        85% 20%, 100% 50%, 85% 80%,
        50% 100%,
        15% 80%, 0% 50%, 15% 20%
    );
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
}

/* Pupil highlight */
.apps__eye-pupil::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 3px;
    width: 5px;
    height: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    filter: blur(1px);
}

/* Hover effect */
.apps__eye:hover .apps__eye-frame {
    background: #35353f;
}

.apps__eye:hover .apps__eye-pupil {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 16px rgba(201, 162, 39, 0.4));
}

/* Eye during game over - pulsing glow */
.apps__frame:has(.apps__grid--game-over) .apps__eye .apps__eye-pupil {
    animation: pupil-pulse 2s ease-in-out infinite;
}

@keyframes pupil-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
    }
    50% { 
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
                drop-shadow(0 0 20px rgba(201, 162, 39, 0.5));
    }
}

/* Grid */
.apps__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    padding: 16px;
    position: relative;
}

/* Game Status - positioned on sides of eye */
.apps__status-container {
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 160px; /* Space for the larger eye in the middle */
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.apps__status-container--visible {
    opacity: 1;
    pointer-events: auto;
}

.apps__status-left,
.apps__status-right {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.apps__status-left {
    text-align: right;
}

.apps__status-right {
    text-align: left;
}

.apps__status-left:hover,
.apps__status-right:hover {
    color: var(--color-accent) !important;
    text-shadow: 0 0 12px rgba(201, 162, 39, 0.6) !important;
    transform: scale(1.1);
    animation: none;
}

.apps__status--win .apps__status-left,
.apps__status--win .apps__status-right {
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.apps__status--lose .apps__status-left,
.apps__status--lose .apps__status-right {
    color: #ef4444;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Base App Tile - reduced size */
.app-tile {
    aspect-ratio: 1;
    background: #1e1e24;
    border: 1px solid #2a2a32;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    user-select: none;
    /* Smaller tiles */
    max-width: 100%;
}

/* App tile icon/label base styles */
.app-tile__icon {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    transition: all var(--transition-base);
    line-height: 1;
}

.app-tile__label {
    font-size: 0.55rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: all var(--transition-fast);
}


/* Revealed app tile - icons and labels visible */
.app-tile--app.app-tile--app-revealed .app-tile__icon,
.app-tile--app.app-tile--hinted .app-tile__icon {
    color: var(--color-accent);
    text-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
}

.app-tile--app.app-tile--app-revealed .app-tile__label,
.app-tile--app.app-tile--hinted .app-tile__label {
    opacity: 1;
    transform: translateY(0);
    color: var(--color-text);
}

/* Hover glow on revealed app tile icon */
.app-tile--app.app-tile--app-revealed:hover .app-tile__icon {
    text-shadow: 0 0 12px var(--color-accent);
}


/* ============================================
   Minesweeper Cells
   ============================================ */
.app-tile--mine.revealed .app-tile__back {
    cursor: default;
}

/* Number colors on back face */
.app-tile--mine.revealed[data-count="1"] .app-tile__back { color: var(--mine-1); }
.app-tile--mine.revealed[data-count="2"] .app-tile__back { color: var(--mine-2); }
.app-tile--mine.revealed[data-count="3"] .app-tile__back { color: var(--mine-3); }
.app-tile--mine.revealed[data-count="4"] .app-tile__back { color: var(--mine-4); }
.app-tile--mine.revealed[data-count="5"] .app-tile__back { color: var(--mine-5); }
.app-tile--mine.revealed[data-count="6"] .app-tile__back { color: var(--mine-6); }
.app-tile--mine.revealed[data-count="7"] .app-tile__back { color: var(--mine-7); }
.app-tile--mine.revealed[data-count="8"] .app-tile__back { color: var(--mine-8); }

/* Flagged cell - pentagram/star marker */
.app-tile--mine.flagged .app-tile__back::before {
    content: '\2726'; /* Four-pointed star */
    font-size: clamp(1rem, 3vw, 2.6rem);
    color: var(--color-accent);
    text-shadow: 0 0 8px rgba(201, 162, 39, 0.6);
    line-height: 1;
}

/* Mine (skull) */
.app-tile--mine.mine-revealed .app-tile__back::before {
    content: '\2620'; /* Skull and crossbones */
    font-size: clamp(1rem, 3vw, 2.6rem);
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
    line-height: 1;
}

/* Exploded mine */
.app-tile--mine.mine-exploded .app-tile__back {
    background: #4a1a1a;
    border-color: #6a2a2a;
}

.app-tile--mine.mine-exploded .app-tile__back::before {
    content: '\2620';
    font-size: clamp(1rem, 3vw, 2.6rem);
    color: #ff6666;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.8);
    line-height: 1;
}

/* Wrong flag */
.app-tile--mine.wrong-flag .app-tile__back::before {
    content: '\2716'; /* X mark */
    font-size: clamp(0.9rem, 2.2vw, 1.6rem);
    color: #ef4444;
    line-height: 1;
}

/* Game over - disable interactions */
.apps__grid--game-over .app-tile--mine {
    pointer-events: none;
}

.apps__grid--game-over .app-tile--app {
    pointer-events: auto;
}

/* ============================================
   Play Overlay - shown before game starts
   ============================================ */
.apps__play-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(26, 26, 31, 0.6);
    border-radius: 5px;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}

.apps__play-overlay--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.apps__play-btn {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    background: rgba(16, 16, 22, 0.92);
    border: 2px solid var(--color-accent);
    border-radius: 10px;
    padding: 0.9rem 2.2rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    animation: play-btn-breathe 2s ease-in-out infinite;
    white-space: nowrap;
    z-index: 2;
}

.apps__play-btn:hover {
    background: rgba(201, 162, 39, 0.15);
    box-shadow: 0 0 30px rgba(201, 162, 39, 0.4);
    transform: scale(1.08);
}

@keyframes play-btn-breathe {
    0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 39, 0.2); }
    50% { box-shadow: 0 0 22px rgba(201, 162, 39, 0.45); }
}

/* ============================================
   Tile States - pre-game and entrance
   ============================================ */

/* Before game: tiles are invisible + scaled down */
.apps__grid--pregame .app-tile {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
    pointer-events: none;
}

/* Entrance animation class (added per-tile with staggered delay via JS) */
.app-tile--entering {
    animation: tile-drop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tile-drop-in {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* App tiles hidden by default - look like mine tiles */
.app-tile--app {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    perspective: 400px;
}

/* When entering, app tiles animate in */
.app-tile--app.app-tile--entering {
    animation: tile-drop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* After entrance: visible but disguised as mine tile */
.app-tile--app.app-tile--entered {
    opacity: 1;
    pointer-events: auto;
}

/* Disguised state - blend with mine tiles */
.app-tile--app.app-tile--entered:not(.app-tile--app-revealed):not(.app-tile--hinted) .app-tile__icon,
.app-tile--app.app-tile--entered:not(.app-tile--app-revealed):not(.app-tile--hinted) .app-tile__label {
    opacity: 0;
}

.app-tile--app.app-tile--entered:not(.app-tile--app-revealed):not(.app-tile--hinted) .app-tile__app-front {
    opacity: 1;
}

/* Card flip structure for app tiles */
.app-tile__app-inner {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.app-tile__app-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background: #252530;
    border: 1px solid #35353f;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-tile__app-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Revealed app tile - flipped, shows content */
.app-tile--app.app-tile--app-revealed .app-tile__app-inner {
    transform: rotateY(180deg);
}

.app-tile--app.app-tile--app-revealed {
    cursor: pointer;
}

.app-tile--app.app-tile--app-revealed:hover {
    z-index: 2;
}

.app-tile--app.app-tile--app-revealed:hover .app-tile__app-back {
    background: var(--color-bg-card);
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.25);
}

/* Hinted state - eye reveal (gold glow, immediately visible) */
.app-tile--app.app-tile--hinted {
    opacity: 1;
    pointer-events: auto;
}

.app-tile--app.app-tile--hinted .app-tile__app-inner {
    transform: rotateY(180deg);
}

.app-tile--app.app-tile--hinted .app-tile__app-back {
    border-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.4);
    animation: pulse-glow 1s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(201, 162, 39, 0.4); }
    50% { box-shadow: 0 0 20px rgba(201, 162, 39, 0.6); }
}

/* Hover lift on unrevealed mine tiles */
.app-tile--mine:not(.revealed):not(.flagged):not(.mine-revealed):not(.mine-exploded) .app-tile__front {
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.app-tile--mine:not(.revealed):not(.flagged):not(.mine-revealed):not(.mine-exploded):hover .app-tile__front {
    transform: translateZ(3px);
    background: #2d2d3a;
    border-color: #45454f;
}

/* Hover lift on disguised app tiles */
.app-tile--app.app-tile--entered:not(.app-tile--app-revealed):not(.app-tile--hinted):hover .app-tile__app-front {
    transform: translateZ(3px);
    background: #2d2d3a;
    border-color: #45454f;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* ============================================
   Tile-based Shockwave - pixel art ripple
   ============================================ */

/* Wave passing through a tile - brief red flash on front face */
.app-tile--shockwave .app-tile__front {
    animation: tile-shockwave 0.5s ease-out forwards;
}

/* App tile front also gets the wave */
.app-tile--shockwave .app-tile__app-front {
    animation: tile-shockwave 0.5s ease-out forwards;
}

@keyframes tile-shockwave {
    0% {
        background: #252530;
        border-color: #35353f;
        box-shadow: none;
    }
    20% {
        background: #5a1a1a;
        border-color: #8a2a2a;
        box-shadow: 0 0 8px rgba(180, 40, 40, 0.6);
    }
    50% {
        background: #3a1515;
        border-color: #5a2020;
        box-shadow: 0 0 4px rgba(140, 30, 30, 0.3);
    }
    100% {
        background: #252530;
        border-color: #35353f;
        box-shadow: none;
    }
}

/* Already-revealed tiles get a subtler aftershock on the back face */
.app-tile--shockwave.revealed .app-tile__back,
.app-tile--shockwave.app-tile--app-revealed .app-tile__app-back {
    animation: tile-aftershock 0.4s ease-out forwards;
}

@keyframes tile-aftershock {
    0% { box-shadow: none; }
    30% { box-shadow: inset 0 0 6px rgba(180, 40, 40, 0.3); }
    100% { box-shadow: none; }
}

/* ============================================
   Fade Overlay - navigation transition
   ============================================ */
.apps__fade-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.apps__fade-overlay--active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   Touch Support - long-press indicator
   ============================================ */
.app-tile--touch-hold::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent);
    border-radius: 4px;
    opacity: 0;
    z-index: 5;
    animation: touch-hold-fill 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes touch-hold-fill {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}



/* ============================================
   Card Flip Animation
   ============================================ */
.app-tile--mine {
    perspective: 400px;
    background: transparent;
    border-color: transparent;
}

.app-tile__inner {
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
}

.app-tile--mine.revealed .app-tile__inner,
.app-tile--mine.mine-revealed .app-tile__inner,
.app-tile--mine.mine-exploded .app-tile__inner,
.app-tile--mine.flagged .app-tile__inner,
.app-tile--mine.wrong-flag .app-tile__inner {
    transform: rotateY(180deg);
}

.app-tile__front,
.app-tile__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.app-tile__front {
    background: #252530;
    border: 1px solid #35353f;
}

.app-tile__back {
    background: #18181f;
    border: 1px solid #1e1e26;
    transform: rotateY(180deg);
}

/* Override back face for specific states */
.app-tile--mine.flagged .app-tile__back {
    background: #2a2535;
    border-color: #3d3548;
}

.app-tile--mine.mine-revealed .app-tile__back {
    background: #2a1a1a;
    border-color: #4a2a2a;
}

.app-tile--mine.mine-exploded .app-tile__back {
    background: #4a1a1a;
    border-color: #6a2a2a;
}

.app-tile--mine.wrong-flag .app-tile__back {
    background: #2a2020;
    border-color: #4a3030;
}

/* Move number/icon content onto the back face */
.app-tile--mine.revealed[data-count] .app-tile__back {
    font-size: clamp(0.9rem, 2.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1;
}

/* ============================================
   Ripple Mine Explosion
   ============================================ */
.app-tile--mine.mine-ripple .app-tile__inner {
    transition-delay: var(--ripple-delay, 0s);
}

.app-tile--mine.mine-ripple.mine-revealed .app-tile__back,
.app-tile--mine.mine-ripple.mine-exploded .app-tile__back {
    animation: ripple-shake 0.3s ease-out;
    animation-delay: var(--ripple-delay, 0s);
}

@keyframes ripple-shake {
    0% { transform: rotateY(180deg) scale(1); }
    40% { transform: rotateY(180deg) scale(1.15); }
    100% { transform: rotateY(180deg) scale(1); }
}

/* Tile exit animation for restart */
.app-tile--exiting {
    animation: tile-drop-out 0.25s ease-in forwards;
}

@keyframes tile-drop-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(15px) scale(0.85);
    }
}

/* Responsive grid */
@media (max-width: 1200px) {
    .apps__grid {
        gap: 5px;
        padding: 14px;
    }
}

@media (max-width: 900px) {
    .apps__grid {
        gap: 4px;
        padding: 12px;
    }
    
    .apps__frame {
        padding: 8px;
        margin-top: 35px;
    }
}

@media (max-width: 600px) {
    .apps__grid {
        gap: 3px;
        padding: 10px;
    }
    
    .apps__frame {
        margin-top: 30px;
    }
    
    .app-tile__icon {
        font-size: 1rem;
    }
    
    .apps__status-container {
        gap: 120px;
        top: -22px;
    }
    
    .apps__status-left,
    .apps__status-right {
        font-size: 0.75rem;
    }
    
    .apps__eye {
        width: 105px;
        height: 52px;
        top: -26px;
    }
    
    .apps__eye-frame {
        width: 105px;
        height: 52px;
    }
    
    .apps__eye-socket {
        width: 88px;
        height: 39px;
    }
    
    .apps__eye-iris {
        width: 32px;
        height: 32px;
    }
    
    .apps__eye-pupil {
        width: 10px;
        height: 33px;
    }
}

@media (max-width: 400px) {
    .apps__grid {
        gap: 2px;
        padding: 8px;
    }
    
    .apps__frame {
        margin-top: 25px;
    }
    
    .apps__status-container {
        gap: 95px;
        top: -18px;
    }
    
    .apps__status-left,
    .apps__status-right {
        font-size: 0.65rem;
    }
    
    .apps__eye {
        width: 84px;
        height: 42px;
        top: -21px;
    }
    
    .apps__eye-frame {
        width: 84px;
        height: 42px;
    }
    
    .apps__eye-socket {
        width: 70px;
        height: 31px;
    }
    
    .apps__eye-iris {
        width: 26px;
        height: 26px;
    }
    
    .apps__eye-pupil {
        width: 8px;
        height: 26px;
    }
}

/* ============================================
   About Section
   ============================================ */
.about {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fill viewport on larger screens */
@media (min-width: 1024px) {
    .about {
        min-height: 100vh;
    }
}

.about__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-xl);
    align-items: center;
    min-height: 500px;
}

.about__content {
    padding-right: var(--space-lg);
}

.about__content p {
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
}

.about__intro {
    font-family: var(--font-display);
    font-size: 2.25rem;
    margin-bottom: var(--space-md);
    text-align: left;
}

/* Video showcase replacing skill bars */
.about__media {
    position: relative;
    border-radius: 12px;
    overflow: visible; /* Allow glow to extend beyond */
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    /* 540x960 aspect ratio (9:16 portrait) */
    aspect-ratio: 9 / 16;
    max-height: 560px;
    width: auto;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10;
    isolation: isolate;
}

/* Ambilight glow effect canvas */
.about__video-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    filter: blur(40px);
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
    border-radius: 12px;
}

/* Hide ambilight on mobile for performance */
@media (max-width: 768px) {
    .about__video-glow {
        display: none;
    }
    
    .about__media {
        overflow: hidden; /* Restore hidden overflow on mobile */
    }
    
    .about__media::after {
        display: none; /* No need for soft edges without glow */
    }
}

.about__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 12px;
}

/* Soft edge overlay to blend video with glow */
.about__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: inset 0 0 30px 15px rgba(0, 0, 0, 0.5);
}

/* Typewriter roles animation */
.about__roles {
    min-height: 2.5em;
    margin-bottom: var(--space-lg);
}

.typewriter {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 500;
    color: var(--color-accent);
    --caret: var(--color-accent);
}

.typewriter::before {
    content: "";
    animation: typing 38s infinite;
}

.typewriter::after {
    content: "";
    border-right: 2px solid var(--caret);
    animation: blink 0.5s linear infinite;
    margin-left: 1px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes typing {
  0.0000% { content: ""; }
  0.2105% { content: "a"; }
  0.4211% { content: "a "; }
  0.6316% { content: "a Q"; }
  0.8421% { content: "a Qu"; }
  1.0526% { content: "a Qua"; }
  1.2632% { content: "a Qual"; }
  1.4737% { content: "a Quali"; }
  1.6842% { content: "a Qualit"; }
  1.8947% { content: "a Quality"; }
  2.1053% { content: "a Quality "; }
  2.3158% { content: "a Quality A"; }
  2.5263% { content: "a Quality As"; }
  2.7368% { content: "a Quality Ass"; }
  2.9474% { content: "a Quality Assu"; }
  3.1579% { content: "a Quality Assur"; }
  3.3684% { content: "a Quality Assura"; }
  3.5789% { content: "a Quality Assuran"; }
  3.7895% { content: "a Quality Assuranc"; }
  4.0000% { content: "a Quality Assurance"; }
  4.2105% { content: "a Quality Assurance "; }
  4.4211% { content: "a Quality Assurance E"; }
  4.6316% { content: "a Quality Assurance En"; }
  4.8421% { content: "a Quality Assurance Eng"; }
  5.0526% { content: "a Quality Assurance Engi"; }
  5.2632% { content: "a Quality Assurance Engin"; }
  5.4737% { content: "a Quality Assurance Engine"; }
  5.6842% { content: "a Quality Assurance Enginee"; }
  5.8947% { content: "a Quality Assurance Engineer"; }
  11.1579% { content: "a Quality Assurance Engineer"; }
  11.3684% { content: "a Quality Assurance Enginee"; }
  11.5789% { content: "a Quality Assurance Engine"; }
  11.7895% { content: "a Quality Assurance Engin"; }
  12.0000% { content: "a Quality Assurance Engi"; }
  12.2105% { content: "a Quality Assurance Eng"; }
  12.4211% { content: "a Quality Assurance En"; }
  12.6316% { content: "a Quality Assurance E"; }
  12.8421% { content: "a Quality Assurance "; }
  13.0526% { content: "a Quality Assurance"; }
  13.2632% { content: "a Quality Assuranc"; }
  13.4737% { content: "a Quality Assuran"; }
  13.6842% { content: "a Quality Assura"; }
  13.8947% { content: "a Quality Assur"; }
  14.1053% { content: "a Quality Assu"; }
  14.3158% { content: "a Quality Ass"; }
  14.5263% { content: "a Quality As"; }
  14.7368% { content: "a Quality A"; }
  14.9474% { content: "a Quality "; }
  15.1579% { content: "a Quality"; }
  15.3684% { content: "a Qualit"; }
  15.5789% { content: "a Quali"; }
  15.7895% { content: "a Qual"; }
  16.0000% { content: "a Qua"; }
  16.2105% { content: "a Qu"; }
  16.4211% { content: "a Q"; }
  16.6316% { content: "a "; }
  16.8421% { content: "a"; }
  17.0526% { content: ""; }
  17.4737% { content: ""; }
  17.6842% { content: "a"; }
  17.8947% { content: "a "; }
  18.1053% { content: "a S"; }
  18.3158% { content: "a Su"; }
  18.5263% { content: "a Sup"; }
  18.7368% { content: "a Supp"; }
  18.9474% { content: "a Suppo"; }
  19.1579% { content: "a Suppor"; }
  19.3684% { content: "a Support"; }
  19.5789% { content: "a Support "; }
  19.7895% { content: "a Support C"; }
  20.0000% { content: "a Support Co"; }
  20.2105% { content: "a Support Coo"; }
  20.4211% { content: "a Support Coor"; }
  20.6316% { content: "a Support Coord"; }
  20.8421% { content: "a Support Coordi"; }
  21.0526% { content: "a Support Coordin"; }
  21.2632% { content: "a Support Coordina"; }
  21.4737% { content: "a Support Coordinat"; }
  21.6842% { content: "a Support Coordinato"; }
  21.8947% { content: "a Support Coordinator"; }
  27.1579% { content: "a Support Coordinator"; }
  27.3684% { content: "a Support Coordinato"; }
  27.5789% { content: "a Support Coordinat"; }
  27.7895% { content: "a Support Coordina"; }
  28.0000% { content: "a Support Coordin"; }
  28.2105% { content: "a Support Coordi"; }
  28.4211% { content: "a Support Coord"; }
  28.6316% { content: "a Support Coor"; }
  28.8421% { content: "a Support Coo"; }
  29.0526% { content: "a Support Co"; }
  29.2632% { content: "a Support C"; }
  29.4737% { content: "a Support "; }
  29.6842% { content: "a Support"; }
  29.8947% { content: "a Suppor"; }
  30.1053% { content: "a Suppo"; }
  30.3158% { content: "a Supp"; }
  30.5263% { content: "a Sup"; }
  30.7368% { content: "a Su"; }
  30.9474% { content: "a S"; }
  31.1579% { content: "a "; }
  31.3684% { content: "a"; }
  31.5789% { content: ""; }
  32.0000% { content: ""; }
  32.2105% { content: "a"; }
  32.4211% { content: "a "; }
  32.6316% { content: "a G"; }
  32.8421% { content: "a Ga"; }
  33.0526% { content: "a Gam"; }
  33.2632% { content: "a Game"; }
  33.4737% { content: "a Game "; }
  33.6842% { content: "a Game D"; }
  33.8947% { content: "a Game De"; }
  34.1053% { content: "a Game Dev"; }
  34.3158% { content: "a Game Deve"; }
  34.5263% { content: "a Game Devel"; }
  34.7368% { content: "a Game Develo"; }
  34.9474% { content: "a Game Develop"; }
  35.1579% { content: "a Game Develope"; }
  35.3684% { content: "a Game Developer"; }
  40.6316% { content: "a Game Developer"; }
  40.8421% { content: "a Game Develope"; }
  41.0526% { content: "a Game Develop"; }
  41.2632% { content: "a Game Develo"; }
  41.4737% { content: "a Game Devel"; }
  41.6842% { content: "a Game Deve"; }
  41.8947% { content: "a Game Dev"; }
  42.1053% { content: "a Game De"; }
  42.3158% { content: "a Game D"; }
  42.5263% { content: "a Game "; }
  42.7368% { content: "a Game"; }
  42.9474% { content: "a Gam"; }
  43.1579% { content: "a Ga"; }
  43.3684% { content: "a G"; }
  43.5789% { content: "a "; }
  43.7895% { content: "a"; }
  44.0000% { content: ""; }
  44.4211% { content: ""; }
  44.6316% { content: "a"; }
  44.8421% { content: "a "; }
  45.0526% { content: "a U"; }
  45.2632% { content: "a UX"; }
  45.4737% { content: "a UX "; }
  45.6842% { content: "a UX P"; }
  45.8947% { content: "a UX Pr"; }
  46.1053% { content: "a UX Pra"; }
  46.3158% { content: "a UX Prac"; }
  46.5263% { content: "a UX Pract"; }
  46.7368% { content: "a UX Practi"; }
  46.9474% { content: "a UX Practit"; }
  47.1579% { content: "a UX Practiti"; }
  47.3684% { content: "a UX Practitio"; }
  47.5789% { content: "a UX Practition"; }
  47.7895% { content: "a UX Practitione"; }
  48.0000% { content: "a UX Practitioner"; }
  53.2632% { content: "a UX Practitioner"; }
  53.4737% { content: "a UX Practitione"; }
  53.6842% { content: "a UX Practition"; }
  53.8947% { content: "a UX Practitio"; }
  54.1053% { content: "a UX Practiti"; }
  54.3158% { content: "a UX Practit"; }
  54.5263% { content: "a UX Practi"; }
  54.7368% { content: "a UX Pract"; }
  54.9474% { content: "a UX Prac"; }
  55.1579% { content: "a UX Pra"; }
  55.3684% { content: "a UX Pr"; }
  55.5789% { content: "a UX P"; }
  55.7895% { content: "a UX "; }
  56.0000% { content: "a UX"; }
  56.2105% { content: "a U"; }
  56.4211% { content: "a "; }
  56.6316% { content: "a"; }
  56.8421% { content: ""; }
  57.2632% { content: ""; }
  57.4737% { content: "a"; }
  57.6842% { content: "a "; }
  57.8947% { content: "a T"; }
  58.1053% { content: "a Ta"; }
  58.3158% { content: "a Tab"; }
  58.5263% { content: "a Tabl"; }
  58.7368% { content: "a Table"; }
  58.9474% { content: "a Tablet"; }
  59.1579% { content: "a Tableto"; }
  59.3684% { content: "a Tabletop"; }
  59.5789% { content: "a Tabletop "; }
  59.7895% { content: "a Tabletop R"; }
  60.0000% { content: "a Tabletop RP"; }
  60.2105% { content: "a Tabletop RPG"; }
  60.4211% { content: "a Tabletop RPGs"; }
  60.6316% { content: "a Tabletop RPGs "; }
  60.8421% { content: "a Tabletop RPGs E"; }
  61.0526% { content: "a Tabletop RPGs En"; }
  61.2632% { content: "a Tabletop RPGs Ent"; }
  61.4737% { content: "a Tabletop RPGs Enth"; }
  61.6842% { content: "a Tabletop RPGs Enthu"; }
  61.8947% { content: "a Tabletop RPGs Enthus"; }
  62.1053% { content: "a Tabletop RPGs Enthusi"; }
  62.3158% { content: "a Tabletop RPGs Enthusia"; }
  62.5263% { content: "a Tabletop RPGs Enthusias"; }
  62.7368% { content: "a Tabletop RPGs Enthusiast"; }
  68.0000% { content: "a Tabletop RPGs Enthusiast"; }
  68.2105% { content: "a Tabletop RPGs Enthusias"; }
  68.4211% { content: "a Tabletop RPGs Enthusia"; }
  68.6316% { content: "a Tabletop RPGs Enthusi"; }
  68.8421% { content: "a Tabletop RPGs Enthus"; }
  69.0526% { content: "a Tabletop RPGs Enthu"; }
  69.2632% { content: "a Tabletop RPGs Enth"; }
  69.4737% { content: "a Tabletop RPGs Ent"; }
  69.6842% { content: "a Tabletop RPGs En"; }
  69.8947% { content: "a Tabletop RPGs E"; }
  70.1053% { content: "a Tabletop RPGs "; }
  70.3158% { content: "a Tabletop RPGs"; }
  70.5263% { content: "a Tabletop RPG"; }
  70.7368% { content: "a Tabletop RP"; }
  70.9474% { content: "a Tabletop R"; }
  71.1579% { content: "a Tabletop "; }
  71.3684% { content: "a Tabletop"; }
  71.5789% { content: "a Tableto"; }
  71.7895% { content: "a Tablet"; }
  72.0000% { content: "a Table"; }
  72.2105% { content: "a Tabl"; }
  72.4211% { content: "a Tab"; }
  72.6316% { content: "a Ta"; }
  72.8421% { content: "a T"; }
  73.0526% { content: "a "; }
  73.2632% { content: "a"; }
  73.4737% { content: ""; }
  73.8947% { content: ""; }
  74.1053% { content: "a"; }
  74.3158% { content: "a "; }
  74.5263% { content: "a S"; }
  74.7368% { content: "a So"; }
  74.9474% { content: "a Sof"; }
  75.1579% { content: "a Soft"; }
  75.3684% { content: "a Softw"; }
  75.5789% { content: "a Softwa"; }
  75.7895% { content: "a Softwar"; }
  76.0000% { content: "a Software"; }
  76.2105% { content: "a Software "; }
  76.4211% { content: "a Software E"; }
  76.6316% { content: "a Software En"; }
  76.8421% { content: "a Software Eng"; }
  77.0526% { content: "a Software Engi"; }
  77.2632% { content: "a Software Engin"; }
  77.4737% { content: "a Software Engine"; }
  77.6842% { content: "a Software Enginee"; }
  77.8947% { content: "a Software Engineer"; }
  83.1579% { content: "a Software Engineer"; }
  83.3684% { content: "a Software Enginee"; }
  83.5789% { content: "a Software Engine"; }
  83.7895% { content: "a Software Engin"; }
  84.0000% { content: "a Software Engi"; }
  84.2105% { content: "a Software Eng"; }
  84.4211% { content: "a Software En"; }
  84.6316% { content: "a Software E"; }
  84.8421% { content: "a Software "; }
  85.0526% { content: "a Software"; }
  85.2632% { content: "a Softwar"; }
  85.4737% { content: "a Softwa"; }
  85.6842% { content: "a Softw"; }
  85.8947% { content: "a Soft"; }
  86.1053% { content: "a Sof"; }
  86.3158% { content: "a So"; }
  86.5263% { content: "a S"; }
  86.7368% { content: "a "; }
  86.9474% { content: "a"; }
  87.1579% { content: ""; }
  87.5789% { content: ""; }
  87.7895% { content: "a"; }
  88.0000% { content: "a "; }
  88.2105% { content: "a L"; }
  88.4211% { content: "a Le"; }
  88.6316% { content: "a Lev"; }
  88.8421% { content: "a Leve"; }
  89.0526% { content: "a Level"; }
  89.2632% { content: "a Level "; }
  89.4737% { content: "a Level D"; }
  89.6842% { content: "a Level De"; }
  89.8947% { content: "a Level Des"; }
  90.1053% { content: "a Level Desi"; }
  90.3158% { content: "a Level Desig"; }
  90.5263% { content: "a Level Design"; }
  90.7368% { content: "a Level Designe"; }
  90.9474% { content: "a Level Designer"; }
  96.2105% { content: "a Level Designer"; }
  96.4211% { content: "a Level Designe"; }
  96.6316% { content: "a Level Design"; }
  96.8421% { content: "a Level Desig"; }
  97.0526% { content: "a Level Desi"; }
  97.2632% { content: "a Level Des"; }
  97.4737% { content: "a Level De"; }
  97.6842% { content: "a Level D"; }
  97.8947% { content: "a Level "; }
  98.1053% { content: "a Level"; }
  98.3158% { content: "a Leve"; }
  98.5263% { content: "a Lev"; }
  98.7368% { content: "a Le"; }
  98.9474% { content: "a L"; }
  99.1579% { content: "a "; }
  99.3684% { content: "a"; }
  99.5789% { content: ""; }
  100.0000% { content: ""; }
}

/* Reduced motion: just cycle text without animation */
@media (prefers-reduced-motion) {
    .typewriter::after {
        animation: none;
    }

    @keyframes typing {
        0%, 14.28% { content: "a Quality Assurance Engineer"; }
        14.29%, 28.56% { content: "a Support Coordinator"; }
        28.57%, 42.84% { content: "a Game Developer"; }
        42.85%, 57.13% { content: "a UX Practitioner"; }
        57.14%, 71.41% { content: "a Tabletop RPGs Enthusiast"; }
        71.42%, 85.70% { content: "a Software Engineer"; }
        85.71%, 100% { content: "a Level Designer"; }
    }
}

/* Larger screens - let video breathe more */
@media (min-width: 1200px) {
    .about__grid {
        grid-template-columns: 1.3fr 0.7fr;
        gap: var(--space-2xl);
    }
    
    .about__media {
        max-height: 600px;
    }
}

/* Extra large screens - scale up avatar and about content */
@media (min-width: 1400px) {
    .hero__avatar {
        width: 280px;
        height: 280px;
        border-width: 4px;
    }
    
    .about__content p {
        font-size: 1.15rem;
        line-height: 1.8;
    }
    
    .about__roles {
        --role-height: 70px;
    }
    
    .about__roles-flip > div > div {
        font-size: 2.75rem;
    }
    
    .about__media {
        max-height: 700px;
    }
}

@media (min-width: 1800px) {
    .hero__avatar {
        width: 360px;
        height: 360px;
        border-width: 5px;
    }
    
    .section__title {
        font-size: 3.5rem;
    }
    
    .about__content p {
        font-size: 1.25rem;
    }
    
    .about__roles {
        --role-height: 80px;
    }
    
    .about__roles-flip > div > div {
        font-size: 3rem;
    }
    
    .about__media {
        max-height: 850px;
    }
}

/* ============================================
   Projects Section
   ============================================ */
.projects__group {
    margin-bottom: var(--space-2xl);
}

.projects__group:last-child {
    margin-bottom: 0;
}

.projects__group-title {
    font-size: 2rem;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.projects__group-icon {
    color: var(--color-accent);
}

.projects__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

/* Project Card */
.project-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.project-card__image {
    position: relative;
    height: 180px;
    background: var(--color-surface);
    overflow: hidden;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.project-card:hover .project-card__image img {
    transform: scale(1.05);
}

.project-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 12, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.project-card__overlay span {
    color: var(--color-accent);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
}

.project-card:hover .project-card__overlay {
    opacity: 1;
}

.project-card__info {
    padding: var(--space-md);
}

.project-card__year {
    font-size: 0.75rem;
    color: var(--color-accent);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.project-card__title {
    font-size: 1.1rem;
    margin: var(--space-xs) 0;
    color: var(--color-text);
}

.project-card__tagline {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Placeholder card */
.project-card--placeholder {
    opacity: 0.5;
    cursor: default;
}

.project-card--placeholder:hover {
    transform: none;
    border-color: var(--color-border);
    box-shadow: none;
}

.project-card__coming {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-text-dim);
}

/* ============================================
   Artwork Carousel
   ============================================ */
.artwork-carousel {
    position: relative;
    width: 100%;
}

.artwork-carousel__stage {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.artwork-carousel__slides {
    position: relative;
    aspect-ratio: 16 / 10;
}

.artwork-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.artwork-slide.active {
    opacity: 1;
}

.artwork-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-bg);
}

.artwork-carousel__caption {
    padding: var(--space-md);
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.artwork-carousel__title {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.artwork-carousel__description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.artwork-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all var(--transition-fast);
}

.artwork-carousel__btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

.artwork-carousel__btn--prev {
    left: -22px;
}

.artwork-carousel__btn--next {
    right: -22px;
}

.artwork-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.artwork-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.artwork-carousel__dot:hover,
.artwork-carousel__dot.active {
    background: var(--color-accent);
    transform: scale(1.2);
}

/* ============================================
   Section Footer (visual break between paper and Contact)
   ============================================ */
.section-footer {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
    background-color: #000000;
}

/* ============================================
   Contact Section
   ============================================ */
/* ============================================
   Section Separator (line with centered dot)
   ============================================ */
.section-separator {
    background: #000;
    padding: var(--space-lg) 0;
}

.section-separator .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.section-separator__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Fade lines at outer edges like skill separators */
.section-separator__line:first-child {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-border) 20%,
        var(--color-border-light) 100%
    );
}

.section-separator__line:last-child {
    background: linear-gradient(
        90deg,
        var(--color-border-light) 0%,
        var(--color-border) 80%,
        transparent 100%
    );
}

/* Extend separator on larger screens - halfway into the paper margin */
@media (min-width: 1200px) {
    .section-separator .container {
        max-width: calc(var(--container-max) + (100vw - var(--container-max)) / 2);
    }
}

/* Cap extension when viewport exceeds paper width */
@media (min-width: 1460px) {
    .section-separator .container {
        max-width: 1330px;
    }
}

.section-separator__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border-light);
    flex-shrink: 0;
}

/* Reduce top padding on sections that follow a separator */
.section-separator + .section {
    padding-top: var(--space-xl);
}

/* ============================================
   Contact Section
   ============================================ */
.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

/* Animated blob background */
.contact__blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
}

.contact > .container {
    position: relative;
    z-index: 1;
}

.contact__box {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-xl) var(--space-2xl);
    backdrop-filter: blur(8px);
}

.contact__box .section__title {
    text-align: center;
}

.contact__box .section__subtitle {
    text-align: center;
}

/* Fill viewport on larger screens */
@media (min-width: 1024px) {
    .contact {
        min-height: 100vh;
    }
}

.contact__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.contact__item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--space-lg);
    text-align: center;
    transition: all var(--transition-base);
}

a.contact__item:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.contact__icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    display: block;
}

.contact__icon svg {
    display: inline-block;
    vertical-align: middle;
}

.contact__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--space-xs);
}

.contact__value {
    color: var(--color-text);
    font-weight: 500;
    display: block;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.875rem;
    background-color: #000000;
}

.footer p {
    color: var(--color-text-muted);
}

/* ============================================
   Modal
   ============================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.modal__container {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Wrapper for container + close button positioning */
.modal__wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    transform: scale(0.95);
    transition: transform var(--transition-base);
}

.modal[aria-hidden="false"] .modal__wrapper {
    transform: scale(1);
}

.modal__close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.modal__close:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

/* Modal hero image at top - outside scrollable area */
.modal__image {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.modal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.modal__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Custom scrollbar for modal */
.modal__content::-webkit-scrollbar {
    width: 8px;
}

.modal__content::-webkit-scrollbar-track {
    background: var(--color-bg-elevated);
}

.modal__content::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 4px;
}

.modal__content::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-dim);
}

/* Firefox scrollbar */
.modal__content {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-light) var(--color-bg-elevated);
}

/* Scroll indicator arrow */
.modal__scroll-indicator {
    position: absolute;
    bottom: 16px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    pointer-events: none;
    z-index: 5;
}

.modal__scroll-indicator--visible {
    opacity: 1;
    visibility: visible;
}

.modal__scroll-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    animation: modal-bounce 1.5s ease-in-out infinite;
}

@keyframes modal-bounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(4px); }
}

/* Image is edge-to-edge, header and body have padding */
.modal__header {
    padding: var(--space-lg) var(--space-xl) 0;
    margin-bottom: var(--space-lg);
}

.modal__year {
    font-size: 0.875rem;
    color: var(--color-accent);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.modal__title {
    font-size: 2rem;
    margin: var(--space-xs) 0 var(--space-sm);
}

.modal__tagline {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.modal__body {
    padding: 0 var(--space-xl) var(--space-xl);
}

.modal__body h4 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-accent);
    margin: var(--space-lg) 0 var(--space-sm);
}

.modal__body h4:first-child {
    margin-top: 0;
}

.modal__body ul {
    margin-left: var(--space-md);
}

.modal__body li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--color-text-muted);
}

.modal__body li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.modal__media {
    margin: var(--space-lg) 0;
    border-radius: 8px;
    overflow: hidden;
}

.modal__media img,
.modal__media iframe {
    width: 100%;
    display: block;
}

.modal__media iframe {
    aspect-ratio: 16 / 9;
    border: none;
}

/* ============================================
   App Modal (Embedded Games/Apps)
   ============================================ */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.app-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}

.app-modal__container {
    position: relative;
    background: var(--color-bg);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform var(--transition-base);
    /* Auto-sizing based on content */
    max-width: 95vw;
    max-height: 90vh;
}

.app-modal[aria-hidden="false"] .app-modal__container {
    transform: scale(1);
}

.app-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.app-modal__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-text);
}

.app-modal__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.app-modal__external {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.app-modal__external:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

.app-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.app-modal__close:hover {
    background: #c53030;
    border-color: #c53030;
    color: #fff;
}

.app-modal__content {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.app-modal__content iframe {
    display: block;
    border: none;
    /* Tetris-friendly dimensions - portrait aspect */
    width: 400px;
    height: 600px;
    max-width: 100%;
    max-height: calc(90vh - 60px);
}

/* ============================================
   Responsive
   ============================================ */

/* Large tablets and small laptops */
@media (max-width: 1024px) {
    .about__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        min-height: auto;
    }
    
    .about__content {
        padding-right: 0;
    }
    
    .about__media {
        max-height: 450px;
    }
}

/* Tablets */
@media (max-width: 900px) {
    .about__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .about__content {
        order: 1;
    }
    
    .about__content p {
        text-align: justify;
    }
    
    .about__intro {
        text-align: center;
    }
    
    .about__roles {
        display: flex;
        justify-content: center;
    }
    
    .about__roles-flip > div {
        justify-content: center;
    }
    
    .about__media {
        order: 2;
        max-width: 280px;
        max-height: 500px;
    }
    
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small tablets */
@media (max-width: 768px) {
    :root {
        --space-xl: 3rem;
        --space-2xl: 6rem;
    }
    
    .section__title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    .about__roles {
        --role-height: 50px;
    }
    
    .about__roles-flip > div > div {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact__grid {
    grid-template-columns: repeat(2, 1fr);
}
    
    .contact__value {
        font-size: 0.9rem;
    }
    
    .artwork-carousel__btn--prev {
        left: 8px;
    }
    
    .artwork-carousel__btn--next {
        right: 8px;
    }
}

/* Contact early single column for better text fit */
@media (max-width: 700px) {
    .contact__grid {
        grid-template-columns: 1fr;
    }
    
    .contact__value {
        font-size: 1rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    :root {
        --space-xl: 2.5rem;
        --space-2xl: 4rem;
        --space-lg: 1.5rem;
    }
    
    .container {
        padding: 0 var(--space-md);
    }
    
    .hero__scroll-hint {
        bottom: 5vh;
    }
    
    .hero__avatar {
        width: 140px;
        height: 140px;
    }
    
    .about__roles {
        --role-height: 42px;
    }
    
    .about__roles-flip > div > div {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    
    .projects__grid {
        grid-template-columns: 1fr;
    }
    
    .contact__grid {
        grid-template-columns: 1fr;
    }
    
    .contact__item {
        padding: var(--space-md) var(--space-lg);
    }
    
    .contact__value {
        font-size: 1rem;
    }
    
    .contact__box {
        padding: var(--space-lg) var(--space-md);
    }
    
    .modal__header {
        padding: var(--space-md) var(--space-lg) 0;
    }
    
    .modal__body {
        padding: 0 var(--space-lg) var(--space-lg);
    }
    
    .about__media {
        max-width: 240px;
        max-height: 426px;
    }
    
    .about__intro {
        font-size: 1.75rem;
    }
    
    .about__content p {
        font-size: 1rem;
    }
    
    .project-card__image {
        height: 160px;
    }
    
    .app-modal__content iframe {
        width: 100%;
        height: 500px;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    :root {
        --space-xl: 2rem;
        --space-2xl: 3rem;
    }
    
    .nav__logo {
        font-size: 1.25rem;
    }
    
    .about__intro {
        font-size: 1.5rem;
    }
    
    .app-modal__content iframe {
        height: 400px;
    }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
.stagger > *:nth-child(4) { animation-delay: 0.4s; }

/* Initial state for animated elements */
[data-animate] {
    opacity: 0;
}

[data-animate].animated {
    animation: fadeInUp 0.6s ease forwards;
}