:root {
    /* M3 Expressive Color Palette */
    --md-sys-color-primary: #6A5AE0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #E8DEFF;
    --md-sys-color-on-primary-container: #22005D;
    --md-sys-color-secondary: #006D60;
    --md-sys-color-secondary-container: #7FF9E4;
    --md-sys-color-on-secondary-container: #00201C;
    --md-sys-color-background: #FFFBFF;
    --md-sys-color-on-background: #1C1B1E;
    --md-sys-color-surface: #FDF8FD;
    --md-sys-color-surface-variant: #E6E0E9;
    --md-sys-color-on-surface-variant: #48454E;
    --md-sys-color-outline: #79757F;

    /* M3 Expressive Typography System */
    --md-sys-font-family-ui: 'Manrope', sans-serif;
    --md-sys-font-family-display: 'Roboto Flex', sans-serif; /* Our "crazy" expressive font */
    --md-sys-typescale-display-large-font-size: 57px;
    --md-sys-typescale-headline-large-font-size: 32px; /* For the overlapping title */
    --md-sys-typescale-title-large-font-size: 22px;
    --md-sys-typescale-body-medium-font-size: 14px;
    --md-sys-typescale-label-large-font-size: 14px;
    
    /* M3 Motion */
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-duration-medium: 400ms;
}

body {
    font-family: var(--md-sys-font-family-ui);
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    margin: 0;
    /* Padding moved to main to allow full-bleed header */
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-wrapper {
    max-width: 1478px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

main {
    padding: 0 2rem 2rem; /* Give main container consistent padding */
    width: 100%;
    box-sizing: border-box;
}

/* Hero Header */
.hero-header {
    /*margin-bottom: 4rem;*/
    color: var(--md-sys-color-on-primary-container);
    text-align: center;

    /* New background implementation */
    height: 260px; /* A fixed height for the container */
    padding: 2rem; /* Inner spacing for the text */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 372 254' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M356.196 84.0809C363.995 97.5909 367.894 104.346 369.864 111.403C372.712 121.606 372.712 132.394 369.864 142.597C367.894 149.654 363.995 156.409 356.196 169.919L332.437 211.079C324.638 224.589 320.738 231.344 315.613 236.58C308.202 244.148 298.86 249.543 288.601 252.177C281.505 254 273.706 254 258.108 254L113.892 254C98.2941 254 90.4949 254 83.399 252.178C73.1398 249.543 63.798 244.149 56.3873 236.58C51.2616 231.345 47.3621 224.589 39.5632 211.079L15.8039 169.919C8.0054 156.409 4.10612 149.654 2.13613 142.597C-0.712043 132.394 -0.712043 121.606 2.13613 111.403C4.10613 104.346 8.0054 97.5912 15.804 84.0812L39.5632 42.9213C47.3622 29.4107 51.2616 22.6554 56.3874 17.4202C63.798 9.85137 73.1398 4.45699 83.3989 1.82245C90.4949 0.000216961 98.294 0.000206784 113.892 0.000186615L258.108 1.33871e-07C273.706 -2.00358e-05 281.505 -3.00407e-05 288.601 1.82219C298.86 4.45672 308.202 9.8511 315.613 17.42C320.738 22.6551 324.638 29.4104 332.437 42.9211L356.196 84.0809Z' fill='%23E8DEFF' fill-opacity='0.9'/%3e%3c/svg%3e");
    background-size: 100% auto; /* Key property: width is 100%, height scales proportionally */
    background-position: center;
    background-repeat: no-repeat;

    /* Flexbox to vertically center the text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.name-headline {
    font-family: 'Roboto Flex', sans-serif;
    /* Responsive font size: grows with viewport, but has min/max */
    font-size: clamp(3.5rem, 10vw, 7rem);
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: var(--md-sys-color-on-primary-container);
    font-weight: 1000;
    font-variation-settings:
      "wdth" 151,
      "GRAD" 150,
      "YTAS" 854;
    transition: font-variation-settings 0.4s cubic-bezier(0.2, 0, 0, 1);
}

 .hero-header h2 {
    font-family: var(--md-sys-font-family-ui); /* Use Manrope for clean contrast */
    font-size: var(--md-sys-typescale-headline-large-font-size);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
 }

 /*
================================================================
FONT JOYSTICK
================================================================
*/
 .font-joystick {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none; /* Prevent text selection while dragging */
    z-index: 1000; /* Ensure it's on top of all other content */
 }
 .joystick-track {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.1);
 }
 .joystick-thumb {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary);
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    touch-action: none; /* Prevents scrolling on mobile while dragging */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 .joystick-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
    transition: transform 0.1s ease;
 }
 .joystick-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    fill: var(--md-sys-color-on-primary);
    opacity: 0.7;
 }
 .arrow-up { top: 4px; }
 .arrow-right { right: 4px; }
 .arrow-down { bottom: 4px; }
 .arrow-left { left: 4px; }

 .hero-header p { font-size: var(--md-sys-typescale-title-large-font-size); max-width: 600px; margin: 1.5rem auto 0; opacity: 0.8; }

/*
================================================================
SPEED SLIDER
================================================================
*/
.slider-container {
    max-width: 500px;
    margin: -24px auto 2rem; /* Use a negative margin to counteract the padding below */
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative; /* Positioning context for the value bubble */
    padding-top: 50px; /* Make space for the bubble to appear above */
}

.slider-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.slider-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--md-sys-color-on-surface-variant);
}

.m3-slider {
    -webkit-appearance: none; /* Override default CSS */
    appearance: none;
    width: 100%;
    height: 16px; /* As per the design spec */
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    /* The two-tone track is created with a gradient controlled by a CSS variable */
    background: linear-gradient( to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) var(--slider-progress, 50%), var(--md-sys-color-primary-container) var(--slider-progress, 50%), var(--md-sys-color-primary-container) 100% );
}

/* Slider Thumb (the circle handle) */
.m3-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px; /* The visible vertical bar's idle width */
    height: 24px; /* Taller than the track, as per the design */
    border: none; /* Remove any default browser borders */
    background: var(--md-sys-color-primary);
    border-radius: 2px; /* Slightly rounded corners for the bar */
    transition: width 150ms ease; /* Animate the width change on drag */
    /* THE TRICK: A shadow with the same color as the background creates the "gap". */
    /* It's a 6px "aura" that masks the track behind the thumb. */
    box-shadow: 0 0 0 6px var(--md-sys-color-background);
}

.m3-slider:active::-webkit-slider-thumb {
    width: 6px; /* The visible vertical bar gets slightly wider on drag */
}

.slider-icon-slow svg {
    opacity: 0.7;
}

.slider-icon-fast {
    display: flex;
    align-items: center;
}

/* Left-most triangle */
.slider-icon-fast svg:nth-child(1) {
    /* This is the start of the "trail", so it's furthest left and most transparent */
    opacity: 0.35;
}
/* Middle triangle */
.slider-icon-fast svg:nth-child(2) {
    margin-left: -10px; /* Spread out a bit more */
    opacity: 0.6;
}
/* Right-most triangle, the "head" of the motion */
.slider-icon-fast svg:nth-child(3) {
    margin-left: -10px; /* Spread out a bit more */
    opacity: 0.9;
}

/* NEW: Value bubble that appears on drag */
.slider-value-bubble {
    position: absolute;
    top: 0; /* Position within the container's top padding */
    left: 50%; /* Will be updated by JS */
    transform: translateX(-50%) scale(0.8); /* Center horizontally, start scaled down */
    width: 40px;
    height: 40px;
    background-color: var(--md-sys-color-on-background);
    color: var(--md-sys-color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    pointer-events: none; /* So it doesn't interfere with slider interaction */
    opacity: 0;
    transition: opacity 150ms ease, transform 150ms cubic-bezier(0.2, 0, 0, 1);
}
.slider-value-bubble.is-active {
    opacity: 1;
    transform: translateX(-50%) scale(1); /* Pop into view */
}

/* 
================================================================
PORTFOLIO GRID & DECOUPLED ITEMS
The main layout structure.
================================================================
*/
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 4rem 2.5rem; /* More row gap to accommodate text */
}

.portfolio-item {
    text-align: center;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 2rem; /* More padding on the bottom */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

.portfolio-item:hover {
    /* On hover, lift the whole card instead of just the image shadow */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/*
================================================================
THE SHAPED IMAGE
This is now the star of the show. It gets the shape and shadow.
================================================================
*/
.shaped-image-container {
    display: block;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    text-decoration: none;
    transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

/* Applying the expressive shapes to the image container */
.img-shape-gem { clip-path: url(#shape-gem); }
.img-shape-fan { clip-path: url(#shape-fan); }
.img-shape-sunny { clip-path: url(#shape-sunny); }
.img-shape-puffy { clip-path: url(#shape-puffy); }
.img-shape-pixelcircle { clip-path: url(#shape-pixelcircle); }
.img-shape-cookie { clip-path: url(#shape-cookie); }

/*
================================================================
THE OVERLAPPING TITLE & STANDALONE TEXT
================================================================
*/
.portfolio-item h2 {
    font-family: var(--md-sys-font-family-display);
    font-size: var(--md-sys-typescale-headline-large-font-size);
    font-weight: 900; /* Very bold */
    color: var(--md-sys-color-primary);
    margin: -0.75rem auto 1.5rem; /* Negative margin to overlap image, centered */
    line-height: 1.1;
    position: relative;
    z-index: 1; /* Ensure it sits on top of the image and above following content */
    max-width: 90%; /* Prevents long titles from breaking out of the card */
    font-variation-settings:
      "wdth" 135,  /* Very wide */
      "GRAD" 50,   /* A little extra punch */
      "XTRA" 480;  /* Slightly more open counters for clarity */
}

.text-content {
    /* This is now just a simple container for the text below the title */
}

.text-content p {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    margin: 0 0 1rem;
    opacity: 0.8;
    max-width: 280px; /* Constrain line length for readability */
    margin-left: auto;
    margin-right: auto;
}

.card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.tag {
    background-color: var(--md-sys-color-on-secondary-container);
    color: #FFFFFF;
    padding: 0.25rem 0.75rem; border-radius: 8px; font-size: 12px; font-weight: 700;
}

/* CTA Button (Unchanged) */
.cta-section {
    text-align: center;
    margin: 5rem 0 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.m3-button {
    position: relative;
    overflow: hidden;
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 0.75rem; /* Space between icon and text */
    padding: 1rem 2.5rem; /* Increased padding for a larger, more expressive feel */
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 50px;
    font-size: 1rem; /* Slightly larger font size */
    font-weight: 700; text-decoration: none; letter-spacing: 0.5px; cursor: pointer; transition: box-shadow 200ms ease-out; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.m3-button:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple-effect 0.6s linear; }

/*
================================================================
BACKGROUND FLOATING SHAPES
================================================================
*/
.shape-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Places it behind all other content */
    overflow: hidden;
    pointer-events: none; /* Allows clicks to go through to content below */
}

.floating-shape {
    position: absolute;
    will-change: transform, opacity;
}

@keyframes float-and-rotate {
    from {
        transform: translateY(10vh) rotate(var(--start-rotation));
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.15; /* A subtle opacity for the background */
    }
    to {
        transform: translateY(-110vh) rotate(var(--end-rotation));
        opacity: 0;
    }
}

@keyframes ripple-effect { to { transform: scale(4); opacity: 0; } }

/*
================================================================
MOBILE RESPONSIVE ADJUSTMENTS
================================================================
*/
@media (max-width: 600px) {
    .hero-header {
        height: auto; /* Allow the header to grow vertically based on its content */
        background-size: cover; /* Make the background shape fill the taller container */
        padding: 3rem 1rem; /* Add more vertical padding and slightly less horizontal */
    }
}
/*
================================================================
DYNAMIC THEME SWITCHER WIDGET
================================================================
*/
.theme-switcher {
    position: fixed;
    top: 120px; /* Below joystick (1rem/16px + 80px height + 24px gap) */
    right: 15px; /* Pushed further right to align under joystick */
    z-index: 999;
    display: flex;
    flex-direction: row-reverse; /* Toggle on right, panel expands to left */
    align-items: center;
    gap: 12px;
}

/* Ensure visibility on mobile */
@media (max-width: 600px) {
    .theme-switcher {
        top: auto;
        bottom: 20px; /* Move to bottom on mobile for easier reach and visibility */
        right: 16px;
    }
}

.theme-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s;
}
.theme-toggle:hover { transform: scale(1.1); }
.theme-toggle:active { transform: scale(0.95); }

.theme-panel {
    background: rgba(255, 255, 255, 0.6); /* Glassmorphism */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.4s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s, padding 0.3s;
}

.theme-switcher.active .theme-panel {
    max-width: 150px;
    opacity: 1;
    padding: 6px 8px 6px 12px;
}

#theme-color-input {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: none;
    padding: 0;
}
#theme-color-input::-webkit-color-swatch-wrapper { padding: 0; }
#theme-color-input::-webkit-color-swatch { border: none; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

.icon-button {
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.icon-button:hover { background-color: rgba(0,0,0,0.05); }