/* 1) Default (dark) vars in :root */
:root {
    --color-bg: #222831;
    --color-text: #EEEEEE;
    --color-primary: #077A7D;
    --color-accent: #80FFDB;
}

/* 2) Light overrides under .light-theme */
.light-theme {
    --color-bg: #EEEEEE;
    --color-text: #222831;
    --color-primary: #077A7D;
    --color-accent: #80FFDB;
}


/* Global resets & smooth transitions */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: none !important;

}

html,
body {
    font-family: 'Raleway', sans-serif;
    background: url("assets/background.gif") center center / cover no-repeat fixed;
    /* fallback color */
    color: var(--color-text);
    min-height: 100vh;
    transition: background-image 0.3s ease;
    overflow: hidden;
    /* no page scrolling anywhere else */
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: none;
    margin: 0;
    padding: 0;
}

.headline,
.subheadline {
    opacity: 0;
    filter: blur(30px);
    transition:
        opacity 1s ease-out,
        filter 1s ease-out;
}

/* the “in view” state */
.headline.visible,
.subheadline.visible {
    opacity: 1;
    filter: blur(0);
}

/* hide + blur by default */
.about-container,
.projects-wrapper {
    opacity: 0;
    filter: blur(30px);
    transition:
        opacity 1s ease-out,
        filter 1s ease-out;
}

/* show state */
.about-container.visible,
.projects-wrapper.visible {
    opacity: 1;
    filter: blur(0);
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Dark theme background override */
.light-theme body {
    background: url("assets/background_light.gif") center center / cover no-repeat fixed;
}

nav {
    position: absolute;
    /* establish a containing block for absolutely positioned children */
    display: flex;
    justify-content: center;
    /* center the UL (and any other flex items unless they’re taken out of flow) */
    align-items: center;
    width: 100%;
    padding: 4rem 2rem;
    background: transparent;
}

nav .logo {
    position: absolute;
    left: 2rem;
    /* distance from left edge */
    top: 50%;
    transform: translateY(-50%);
}

.light-theme nav {
    background: transparent;
}

/* Ensure initials + rest flow inline */
.logo {
    display: inline-flex;
    cursor: pointer;
    /* no clipping needed now */
    overflow: visible;
    position: absolute;
}

/* The “rest” parts are inline-block but invisible and collapsed */
.logo .rest {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 40px;
    font-weight: 200;
    color: var(--color-accent);
    opacity: 0;
    max-width: 0;
    margin: 0;
    transition:
        opacity 0.3s ease,
        max-width 0.3s ease,
        margin 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* Initials styling */
.logo .initials {
    font-family: 'Megrim', cursive;
    font-size: 40px;
    font-weight: 500;
    color: var(--color-accent);
    transition: margin 0.3s ease;
}

.light-theme .logo .initials {
    color: var(--color-primary);
}

.light-theme .logo .rest {
    color: var(--color-primary);
}


/* On hover: expand each .rest next to its initial */
.logo:hover .rest {
    opacity: 1;
    max-width: 5ch;
    /* enough for “yad” or “hmad” */
}

/* Optional: give a tiny gap between the two name-parts */
.logo .rest+.initials {
    margin-left: 0.2ch;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 1rem 3rem;
    /* give it some breathing room */
    border: 1px solid var(--color-accent);
    /* accent-color border */
    border-radius: 9999px;
    /* fully rounded “pill” */
    background: none;
    /* transparent interior */
}

.light-theme nav ul {
    border: 1px solid var(--color-primary);
}

nav ul li:first-child a {
    padding-left: 0;
}

nav ul li:last-child a {
    padding-right: 0;
}

nav ul a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

nav ul a:hover {
    color: var(--color-primary);
}

/* 4) Theme-toggle (if you have it) at right */
#theme-toggle {
    position: absolute;
    right: 2rem;
    /* distance from right edge */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-text);
    transition: color 0.3s ease;
}

#theme-toggle .icon svg {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}


/* Section container */
section {
    display: none;
    height: 100vh;
    padding-top: 70px;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

section.active {
    display: flex;
}

/* Home section styling */
.headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    /* heaviest weight */
    font-size: 150px;
    /* larger size */
    color: var(--color-accent);
    animation: pulse-glow 2s ease-in-out infinite;
    will-change: text-shadow;
}

.light-theme .headline {
    color: var(--color-primary);
}

.subheadline {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: var(--color-text);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5ch;
    justify-content: center;
}

.subheadline .sep {
    color: var(--color-accent);
    font-weight: 700;
}

.rotating-word {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: var(--color-accent);
    opacity: 1;
    transition: opacity 1s ease-in-out;
    /* smoother, longer fade */
}

.light-theme .rotating-word {
    color: var(--color-primary);
}

/* when hiding */
.rotating-word.fade {
    opacity: 0;
}

/* ABOUT SECTION */
.about-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.about-image {
    flex: 0 0 200px;
    /* fixed width */
    object-fit: cover;
    border-radius: 20%;
    /* permanent shadow for elevation */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    /* float animation */
    animation: float-bounce 4s ease-in-out infinite;
}

.about-text {
    flex: 1;
    text-align: left;

}

.about-text h2 {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.light-theme .about-text h2 {
    color: var(--color-primary);
}

.about-text p {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.highlight {
    font-family: 'Outfit', sans-serif;
    color: var(--color-accent);
    font-weight: 700;
    /* or 900 if you want extra emphasis */
}

.light-theme .highlight {
    color: var(--color-primary);
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-image {
        margin-bottom: 1.5rem;
    }
}

/* keyframes for smooth vertical bounce */
@keyframes float-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        /* remove text-align here */
    }

    .about-image {
        margin-bottom: 1.5rem;
    }

    .about-text {
        text-align: left;
        /* ensure left alignment on mobile too */
    }
}

/* Container: two columns */
.projects-wrapper {
    display: flex;
    width: 100%;
}

#projects.active {
    display: flex;
    flex-direction: row;
    height: 100vh;
    /* above other sections */
}


/* LEFT: preview area */
.preview {
    flex: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* In your CSS, replace the preview img rule with: */
.preview img {
    width: 70%;
    max-width: 70%;
    max-height: 60vh;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: opacity 0.4s ease;
}

.light-theme .preview img {
    width: 70%;
    max-width: 70%;
    max-height: 60vh;
    object-fit: cover;
    border-radius: 1rem;
    transition: opacity 0.4s ease;
}


/* RIGHT: list area */
.projects-list {
    flex: 1;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.list-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    color: var(--color-accent);
}

.light-theme .list-header h2 {
    color: var(--color-primary);
}

.list-header #project-counter {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    color: var(--color-text);
}

.projects-list ul {
    list-style: none;
    flex: 1;
    overflow-y: auto;
}

.projects-list li {
    position: relative;
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    font-family: 'Raleway', sans-serif;
    color: var(--color-text);
    cursor: pointer;
    transition: color 0.2s ease;
}

.projects-list li+li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.light-theme .projects-list li+li {
    border-top: 1px solid #077A7D;
}

.projects-list li:hover,
.projects-list li.active {
    color: var(--color-accent);
}

/* Arrow indicator on the active item */
.projects-list li.active::before {
    content: '➔';
    position: absolute;
    left: -2rem;
    font-size: 1.2rem;
    color: var(--color-accent);
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.3s ease;
}

/* Name & type styling */
.proj-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
}

.proj-type {
    font-size: 1rem;
    color: var(--color-accent);
}

.light-theme .proj-type {
    color: var(--color-primary);
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

/* Hide by default */
.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.modal-content {
    padding-top: 5rem;
    position: relative;
    max-width: 70%;
    height: 100%;
    margin: auto;
    background: transparent;
    color: var(--color-text);
    overflow-y: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}



/* Close button */
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 3rem;
    color: var(--color-accent);
    cursor: pointer;
    z-index: 9999;
}

/* Images gallery */
.modal-images {
    /* optional max width */
    object-fit: cover;
    border-radius: 1rem;
}

.modal-images img {
    /* optional max width */
    object-fit: cover;
    border-radius: 1rem;
}

.modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 3rem;
}

/* Main screenshot (using your first data-img) */
.modal-main-screenshot {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.modal-main-screenshot img {
    width: 100%;
    /* optional max width */
    object-fit: cover;
    border-radius: 1rem;
}

/* Type & description */
#modal-type {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
    margin-bottom: 0.75rem;
    font-size: 2.25rem;
}

#modal-desc {
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.25rem;
}

.modal-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    align-items: center;
    /* center each image */
    margin-top: 2rem;
}

/* Apply the same sizing as your main screenshot */
.modal-gallery img {
    width: 100%;
    /* full width of the 70%-wide content box */
    /* same cap as main screenshot */
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* CONTACT SECTION */
#contact {
    color: var(--color-text);
    padding: 4rem 2rem;
    height: 100vh;
}

.contact-wrapper {
    display: flex;
    height: 100%;
    /* fill the #contact’s 100vh */
    align-items: center;
    /* centers both columns vertically */
    gap: 2rem;
    /* optional spacing between the two columns */
}

/* LEFT: slogan + socials */
.contact-info {
    flex: 1;
    min-width: 250px;
    text-align: left;
    gap: 1rem;
}


.contact-info h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--color-accent);
    text-align: left;
}

.light-theme .contact-info h2 {
    color: var(--color-primary);
}

.social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* left-align all children */
    text-align: left;
    /* ensure any inline text is left-aligned */
}

.social-links a {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s, border-color 0.3s;
    display: inline-block;
    /* or block if you want 100% width */

}

.social-links a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* RIGHT: contact form */
.contact-form-wrapper {
    flex: 1;
    min-width: 300px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form label {
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
    background: transparent;
    color: var(--color-text);


}

.light-theme .contact-form input,
.light-theme .contact-form textarea {
    background: transparent;
    border: 1px solid var(--color-primary);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.light-theme .contact-form input:focus,
.light-theme .contact-form textarea:focus {
    border-color: var(--color-primary);
}

.contact-form button {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: var(--color-bg);
    border: none;
    border-radius: 0.5rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button:hover {
    background: var(--color-primary);
}

.light-theme .contact-form button {
    background: var(--color-primary);
    color: var(--color-bg);
}

/* Responsive stack */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }
}

.contact-info a {
    position: relative;
    display: inline-block;
    margin-right: 1rem;
    font-family: 'Raleway', sans-serif;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    /* just under the text */
    height: 2px;
    width: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}


.contact-info a:hover {
    color: var(--color-accent);
}

.light-theme .contact-info a:hover {
    color: var(--color-primary);
}

.contact-info a:hover::after {
    width: 100%;
}

.light-theme .contact-info a:hover::after {
    background-color: var(--color-primary);
}

#cursor-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
}

.cursor-dot {
    position: fixed;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
    mix-blend-mode: difference;
    z-index: 9999;
}

/* “filled” state when over button or nav-link */
.cursor-dot.fill {
    background: var(--color-accent);
    transform: translate(-50%, -50%) scale(1.3);
}

/* theme override */
.light-theme .cursor-dot {
    border-color: var(--color-primary);
}

.light-theme .cursor-dot.fill {
    background: var(--color-primary);
}

/* 3) The reveal-on-hover link */
.reveal-on-hover {
    position: relative;
    color: var(--color-text);
    text-decoration: none;
}


/* copy the text into ::before, color it accent, and clip it */
.reveal-on-hover::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--color-accent);
    overflow: visible;
    pointer-events: none;
    /* circle radius and center come from CSS vars we’ll update in JS */
    clip-path: circle(var(--r, 0px) at var(--x, 0px) var(--y, 0px));
    transition: clip-path 0.1s ease-out;
    white-space: nowrap;
}

.light-theme .reveal-on-hover::before {
    color: var(--color-primary);
}

/* store the original text in a data attribute */
.reveal-on-hover[data-text] {
    /* nothing here, just means we have the attr */
}

.cursor-dot.fill {
    background: var(--color-accent);
    transform: translate(-50%, -50%) scale(1.3);
}

#menu-toggle {
    display: none;
}

/* === only on mobile, hide normal nav links and show burger === */
@media (max-width: 768px) {
    nav ul {
        display: none;
    }

    #theme-toggle {
        margin-right: 2.5rem;
    }

    #menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;

    }

    #menu-toggle .burger {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-accent);
        border-radius: 1px;
    }

    .light-theme #menu-toggle .burger {
        background: var(--color-primary);
    }


}

/* === nav modal overlay === */
.nav-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.nav-modal.hidden {
    display: none;
}

.nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.nav-content {
    position: relative;
    background: var(--color-bg);
    padding: 2rem;
    border-radius: 8px;
    min-width: 80%;
    max-width: 300px;
    text-align: center;
}

.nav-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text);
    cursor: pointer;
}

.nav-content ul {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.nav-content li+li {
    margin-top: 1.5rem;
}

.nav-content a {
    color: var(--color-text);
    font-size: 1.25rem;
    text-decoration: none;
}

.nav-content a:hover {
    color: var(--color-accent);
}

/* make the mobile menu list sit nicely inside .modal-content */
.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
    margin: 0;
    align-items: center;
}

.mobile-nav-list a {
    color: var(--color-text);
    font-size: 2rem;
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-nav-list a:hover {
    color: var(--color-accent);
}

/* on mobile only: hide your regular nav and show the burger */
@media (max-width: 768px) {
    nav ul {
        display: none;
    }

    /* your existing #menu-toggle rules remain */
}

/* nav-modal close should be accent */
#nav-modal .modal-close {
    color: var(--color-accent);
}

/* -------------------------------------------------------------------------- */
/* your existing keyframes (no change!)                                      */
/* -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------------------------------------------------------------- */
/* “open” state (same as before)                                              */
/* -------------------------------------------------------------------------- */
#nav-modal:not(.hidden) .modal-backdrop,
#nav-modal:not(.hidden) .modal-content {
    animation: fadeIn 0.3s ease-out forwards;
}

#nav-modal:not(.hidden) .mobile-nav-list li {
    opacity: 0;
    animation: dropIn 0.4s ease-out forwards;
}

#nav-modal:not(.hidden) .mobile-nav-list li:nth-child(1) {
    animation-delay: 0.1s;
}

#nav-modal:not(.hidden) .mobile-nav-list li:nth-child(2) {
    animation-delay: 0.2s;
}

#nav-modal:not(.hidden) .mobile-nav-list li:nth-child(3) {
    animation-delay: 0.3s;
}

#nav-modal:not(.hidden) .mobile-nav-list li:nth-child(4) {
    animation-delay: 0.4s;
}

#nav-modal:not(.hidden) .mobile-nav-list li:nth-child(5) {
    animation-delay: 0.5s;
}

/* -------------------------------------------------------------------------- */
/* project-modal “open” state: fade backdrop in & drop content in           */
/* -------------------------------------------------------------------------- */
#project-modal:not(.hidden) .modal-backdrop,
#project-modal:not(.hidden) .modal-content {
    animation: fadeIn 0.3s ease-out forwards;
}

#project-modal:not(.hidden) .modal-content {
    opacity: 0;
    /* start invisible to drop in */
    animation: dropIn 0.4s ease-out forwards;
    animation-delay: 0.1s;
}


/* -------------------------------------------------------------------------- */
/* project-modal “closing” state: play fade & drop in reverse                */
/* -------------------------------------------------------------------------- */
#project-modal.closing .modal-backdrop,
#project-modal.closing .modal-content {
    animation: fadeIn 0.3s ease-out reverse forwards;
}

#project-modal.closing .modal-content {
    animation: dropIn 0.4s ease-out reverse forwards;
    /* no delay, drops up immediately */
}

.light-theme .projects-list li:hover .proj-name {
    color: var(--color-primary);
}

/* and if you want the active state too: */
.light-theme .projects-list li.active .proj-name {
    color: var(--color-primary);
}



@media (max-width: 768px) {
    .headline {
        font-size: 4.5rem;
        /* ~72px instead of 150px */
        line-height: 1.1;
        /* tighten up if you like */
    }

    .subheadline {
        font-size: 1.5rem;
        /* down from 2rem */
        margin-top: 0.5rem;
        /* adjust spacing */
    }
}

@media (max-width: 768px) {
    .about-container {
        /* keep stacking, but center everything */
        flex-direction: column;
        align-items: center;
        gap: 0;
        /* remove the 2rem gap on mobile */

    }

    .about-image {
        /* smaller and padded from the top */
        flex: 0 0 150px;
        /* fix width */
        width: 150px;
        height: auto;
        /* preserve aspect */
    }

    .about-text {
        line-height: 1.5;
        text-align: left;
    }

    .about-text h2 {
        font-size: 2rem;
        /* down from 3rem */
        margin-bottom: 1rem;
    }

    .about-text p {
        font-size: 1rem;
        /* mobile-only tiny text */
    }
}

@media (max-width: 768px) {

    /* hide the left preview panel on mobile */
    .preview {
        display: none;
    }
}

@media (max-width: 768px) {
    .proj-name {
        font-size: 1rem;
        /* down from 1.3rem */
    }

    .proj-type {
        font-size: 0.875rem;
        /* down from 1rem */
    }
}

@media (max-width: 768px) {

    /* shrink project modal text on phones */
    #modal-type {
        font-size: 1.5rem;
        /* down from 2.25rem */
    }

    #modal-desc {
        font-size: 1rem;
        /* down from 1.25rem */
    }
}

@media (max-width: 768px) {

    #modal-type,
    #modal-desc {
        text-align: left;
    }

    #modal-title {
        font-size: 2rem;
        /* down from 3rem */
    }

    .contact-info h2 {
        font-size: 1.8rem;
        /* down from 2.5rem */
        margin-top: 3rem;
        /* add that extra breathing room */
    }

    .contact-info {
        flex: 0;
        min-width: 250px;
        text-align: left;
    }

    .contact-form-wrapper {
        margin-top: 1rem;
        min-width: 300px;
    }

    #chat-overlay {
        font-size: 2rem !important;
    }
}

#chat-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    /* ← stack */
    align-items: center;
    /* ← center both children */
    background: transparent;
    max-height: 80vh;

}

.chat-form {
    display: flex;
    width: 100%;
    max-width: 1000px;
    /* your desired cap */
    margin: 0 auto;
    padding: 0.5rem 1rem;
    background: transparent;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-direction: row;
    flex: 0 0 auto;

    /* ← force a row */

}

#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 1000px;
    padding: 1rem;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: none;
    /* IE 10+ */
    -ms-overflow-style: none;
    /* scroll when content overflows */
}

#chat-messages::-webkit-scrollbar {
    width: 0;
    height: 0;
}



/* 3) Reuse your contact-form inputs & button exactly */
.chat-input {
    /* remove any width:100% here */
    flex: 1 1 auto;
    /* grow to fill */
    min-width: 0;
    /* allow shrink */
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    background: rgba(34, 40, 49, 0.4);
    /* dark theme */
    /* blur whatever’s behind it */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.chat-send {
    flex: none;
    /* don’t stretch */
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: var(--color-bg);
    border: none;
    border-radius: 0.5rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.3s;
}

.light-theme .chat-send {
    background: var(--color-primary);
}

.chat-send:hover {
    background: var(--color-primary);
}

.light-theme .chat-send:hover {
    background: var(--color-accent);
}

.msg {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    /* tweak alpha to taste */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.4;
}

/* 3) bot vs user */
.msg.bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
}

.msg.user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.15);
}

.chat-input {
    text-align: left;
}

/* also right-align placeholder text, if needed */
.chat-input::placeholder {
    text-align: left;
}

/* right-align all chat bubbles */
.msg {
    text-align: left;
}

#chat-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    /* match your headline size */
    color: var(--color-accent);
    /* or var(--color-text) */
    pointer-events: none;
    /* clicks pass through */
    z-index: 100;
    /* above everything */
    white-space: nowrap;
}

.light-theme #chat-overlay {
    color: var(--color-primary);
}

/* hidden state */
#chat-overlay.hidden {
    display: none;
}

@media (max-width: 768px),
(hover: none) {

    /* remove the visual dot and the canvas layer */
    .cursor-dot,
    #cursor-canvas {
        display: none !important;
    }

    /* restore the default cursor state, just in case */
    * {
        cursor: auto !important;
    }
}

/* ── Lift the chat / “Me” bar while it has focus ─────────────────────────── */
@media (max-width: 768px) {

    /* Any time an element *inside* #chat-container gains focus */
    #chat-container:focus-within {
        /* Nudge it up roughly one-half of the viewport */
        bottom: 50vh;
        /* smooth spring-back when you leave the field */
        transition: bottom 0.3s ease;
    }

    /* iOS 16+ & modern mobile Chrome expose the *real* keyboard height */
    @supports (bottom: env(keyboard-inset-height)) {
        #chat-container:focus-within {
            bottom: calc(env(keyboard-inset-height) + 0.5rem);
        }
    }
}