@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- */
/* reset                                                             */
/* ---------------------------------------------------------------- */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
        margin: 0;
    }

    ul, ol {
        padding: 0;
        list-style: none;
    }

    img, svg, video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    a {
        color: inherit;
    }

    button, input, textarea {
        font: inherit;
        color: inherit;
    }
}

/* ---------------------------------------------------------------- */
/* tokens                                                             */
/*                                                                     */
/* The old site used its brand purple (or a dark charcoal in its dark  */
/* variant) as the literal page background with white text throughout */
/* — not a neutral background with purple as a small accent. This     */
/* rebuild keeps that identity: white text stays constant, only the   */
/* page-background hue swaps with prefers-color-scheme, exactly like  */
/* the original Chakra theme tokens did.                              */
/* ---------------------------------------------------------------- */
@layer tokens {
    :root {
        --color-bg: #8458b3;
        --color-bg-deep: #6d4693;
        /* Kept deliberately subtle: white text on top needs to stay >= 4.5:1,
           and this purple is dark enough that lightening it much further
           starts to fail that with full-opacity white text. */
        --color-surface: rgba(255, 255, 255, 0.06);
        --color-border: rgba(255, 255, 255, 0.24);
        --color-text: #ffffff;
        --color-text-muted: rgba(255, 255, 255, 0.82);

        --color-button-bg: #ffffff;
        --color-button-text: #3d2a56;

        --color-alert-bg: #ffffff;
        --color-alert-text: #18181b;
        --color-alert-success: #15803d;
        --color-alert-error: #b91c1c;

        --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
        --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-24: 6rem;

        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 1rem;

        --max-width: 72rem;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.22);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.28);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-bg: #282828;
            --color-bg-deep: #1c1c1c;
            --color-surface: rgba(255, 255, 255, 0.06);
            --color-border: rgba(255, 255, 255, 0.16);

            --color-button-text: #282828;

            --color-alert-bg: #1c1c1f;
            --color-alert-text: #f4f4f5;
            --color-alert-success: #86efac;
            --color-alert-error: #fca5a5;
        }
    }
}

/* ---------------------------------------------------------------- */
/* base                                                               */
/* ---------------------------------------------------------------- */
@layer base {
    html, body {
        /* decorative bleed elements (hero glow, wave-cap drift) are never
           allowed to introduce a horizontal scrollbar */
        overflow-x: hidden;
    }

    html {
        scroll-padding-top: 5rem;
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.6;
        background: linear-gradient(180deg, var(--color-bg), var(--color-bg-deep) 140%);
        background-attachment: fixed;
        color: var(--color-text);
    }

    h1, h2, h3, h4 {
        line-height: 1.2;
        font-weight: 600;
        font-family: var(--font-heading);
    }

    h1 {
        font-size: clamp(2.25rem, 4.5vw, 3.5rem);
        font-style: italic;
        font-weight: 700;
    }
    h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
    h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
    h4 { font-size: 1.125rem; }

    p a,
    .richtext a {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.15em;
    }

    p a:hover,
    .richtext a:hover {
        text-decoration-thickness: 0.14em;
    }

    :focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35);
        border-radius: var(--radius-sm);
    }
}

/* ---------------------------------------------------------------- */
/* layout                                                             */
/* ---------------------------------------------------------------- */
@layer layout {
    .wrap {
        width: 100%;
        max-width: var(--max-width);
        margin-inline: auto;
        padding-inline: var(--space-6);
    }

    .section {
        padding-block: var(--space-16);
    }

    .section__subheading {
        margin-block: var(--space-8) var(--space-4);
    }

    .hero {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: var(--space-8);
        text-align: center;
    }

    @media (min-width: 48rem) {
        .hero {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        }
    }

    .skills-grid {
        display: grid;
        gap: var(--space-8);
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .project-grid,
    .testimonial-grid {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        margin-bottom: var(--space-12);
    }

    .gallery {
        display: grid;
        gap: var(--space-3);
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        margin-block: var(--space-6);
    }

    .gallery img {
        border-radius: var(--radius-md);
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}

/* ---------------------------------------------------------------- */
/* components                                                         */
/* ---------------------------------------------------------------- */
@layer components {
    .skip-link {
        position: absolute;
        top: -3rem;
        left: var(--space-4);
        z-index: 1000;
        background: var(--color-button-bg);
        color: var(--color-button-text);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        transition: top 0.15s ease;
    }

    .skip-link:focus {
        top: var(--space-4);
    }

    .messages {
        position: sticky;
        top: 0;
        z-index: 900;
        padding: var(--space-2) var(--space-4);
    }

    .message {
        max-width: var(--max-width);
        margin: var(--space-2) auto;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        background: var(--color-alert-bg);
        color: var(--color-alert-text);
        box-shadow: var(--shadow-md);
        font-family: var(--font-body);
    }

    .message--success {
        border-color: var(--color-alert-success);
        color: var(--color-alert-success);
    }

    .message--error {
        border-color: var(--color-alert-error);
        color: var(--color-alert-error);
    }

    /* header */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 800;
        background: color-mix(in srgb, var(--color-bg) 82%, transparent);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--color-border);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding-block: var(--space-3);
    }

    .brand {
        font-family: var(--font-heading);
        font-weight: 700;
        font-style: italic;
        font-size: 1.35rem;
        text-decoration: none;
    }

    .site-nav .nav-list {
        display: flex;
        gap: var(--space-6);
    }

    .site-nav .nav-list a {
        position: relative;
        text-decoration: none;
        font-weight: 500;
        padding-bottom: 0.2rem;
    }

    .site-nav .nav-list a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: 0;
        height: 2px;
        background: currentColor;
        transition: right 0.25s ease;
    }

    .site-nav .nav-list a:hover::after,
    .site-nav .nav-list a:focus-visible::after {
        right: 0;
    }

    .nav-toggle {
        display: none;
        align-items: center;
        list-style: none;
        cursor: pointer;
        padding: var(--space-2);
        border-radius: var(--radius-sm);
    }

    .nav-toggle::-webkit-details-marker {
        display: none;
    }

    .nav-toggle__icon {
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
    }

    .nav-toggle__bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    .nav-toggle__bar:nth-child(1) {
        top: 4px;
    }

    .nav-toggle__bar:nth-child(2) {
        top: 11px;
    }

    .nav-toggle__bar:nth-child(3) {
        top: 18px;
    }

    .nav-disclosure[open] .nav-toggle__bar:nth-child(1) {
        top: 11px;
        transform: rotate(45deg);
    }

    .nav-disclosure[open] .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    .nav-disclosure[open] .nav-toggle__bar:nth-child(3) {
        top: 11px;
        transform: rotate(-45deg);
    }

    @media (prefers-reduced-motion: no-preference) {
        .nav-toggle__bar {
            transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
        }
    }

    @media (max-width: 47.99rem) {
        .nav-toggle {
            display: flex;
        }

        .site-nav .nav-list {
            display: none;
            flex-direction: column;
            gap: var(--space-2);
            position: absolute;
            inset-inline: 0;
            top: 100%;
            background: var(--color-bg);
            border-bottom: 1px solid var(--color-border);
            padding: var(--space-4) var(--space-6);
        }

        .nav-disclosure[open] .nav-list {
            display: flex;
        }
    }

    .site-header__actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .icon-link {
        display: inline-flex;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .icon-link .icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .icon-link:hover {
        transform: translateY(-2px) scale(1.08);
        opacity: 0.85;
    }

    /* hero */
    .hero__role {
        font-weight: 500;
        color: var(--color-text-muted);
        font-size: 1.25rem;
        font-family: var(--font-body);
    }

    .hero__tagline {
        margin-top: var(--space-2);
        font-size: 1.125rem;
    }

    .hero__intro {
        margin-top: var(--space-4);
        color: var(--color-text-muted);
        max-width: 42rem;
    }

    .hero__location {
        margin-top: var(--space-2);
        color: var(--color-text-muted);
        font-size: 0.875rem;
    }

    .hero__actions {
        margin-top: var(--space-6);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    @media (min-width: 48rem) {
        .hero__actions {
            justify-content: flex-start;
        }
    }

    .hero__media {
        position: relative;
    }

    .hero__media::before {
        content: "";
        position: absolute;
        inset: -1rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
        filter: blur(18px);
        z-index: -1;
    }

    @media (prefers-reduced-motion: no-preference) {
        .hero__media::before {
            animation: pulse-glow 4s ease-in-out infinite;
        }
    }

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

    .hero__photo,
    .hero__photo--placeholder {
        width: 12rem;
        height: 12rem;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 3px solid rgba(255, 255, 255, 0.5);
        box-shadow: var(--shadow-lg);
    }

    .hero__photo--placeholder {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05));
    }

    /* buttons */
    .button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-md);
        background: var(--color-button-bg);
        color: var(--color-button-text);
        font-weight: 600;
        text-decoration: none;
        border: 1px solid transparent;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: var(--shadow-sm);
    }

    .button .icon {
        width: 1rem;
        height: 1rem;
    }

    .button:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .button--ghost {
        background: transparent;
        color: var(--color-text);
        border-color: var(--color-border);
        box-shadow: none;
    }

    .button--ghost:hover {
        background: var(--color-surface);
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* skills */
    .skill-group__category {
        margin-bottom: var(--space-3);
    }

    .skill-group__list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .skill-chip {
        padding: var(--space-1) var(--space-3);
        border-radius: 999px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        font-size: 0.875rem;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .skill-chip:hover {
        background: var(--color-button-bg);
        color: var(--color-button-text);
        transform: translateY(-2px);
    }

    /* project cards */
    .project-card {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .project-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .project-card__media {
        aspect-ratio: 4 / 3;
        background: var(--color-surface);
    }

    .project-card__image,
    .project-card__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .project-card__image--placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04));
    }

    .project-card__body {
        padding: var(--space-4) var(--space-6) var(--space-6);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        flex: 1;
    }

    .project-card__description {
        /* full opacity, not muted: this sits on the translucent --color-surface
           card background, where reduced-opacity white fails contrast */
        color: var(--color-text);
        font-size: 0.9375rem;
        flex: 1;
    }

    .project-card__description p + p {
        margin-top: var(--space-2);
    }

    .link-with-icon {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border-radius: 999px;
        font-weight: 600;
        text-decoration: none;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        align-self: flex-start;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .link-with-icon:hover {
        background: var(--color-button-bg);
        color: var(--color-button-text);
        transform: translateY(-2px);
    }

    .link-with-icon .icon {
        width: 1rem;
        height: 1rem;
    }

    /* testimonials */
    .testimonial-card {
        display: flex;
        gap: var(--space-4);
        padding: var(--space-6);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .testimonial-card:hover {
        transform: translateY(-4px) rotate(-0.5deg);
        box-shadow: var(--shadow-lg);
    }

    .testimonial-card__avatar {
        flex-shrink: 0;
    }

    .testimonial-card__avatar-image {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }

    .testimonial-card__initials {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        background: var(--color-button-bg);
        color: var(--color-button-text);
        font-weight: 700;
        font-family: var(--font-heading);
    }

    .testimonial-card__quote {
        font-style: italic;
    }

    .testimonial-card__author {
        margin-top: var(--space-2);
        font-size: 0.875rem;
    }

    .testimonial-card__title {
        /* full opacity, not muted: sits on the translucent card surface */
        color: var(--color-text);
    }

    /* paper sections (Skills, About): a white band that bulges into the
       surrounding purple/charcoal page via curved caps top and bottom.
       Overriding the shared color tokens here is what flips every
       component inside (chips, cards, avatars) from "white on brand" to
       "brand on white" without duplicating their rules. */
    .section--paper {
        position: relative;
        background: #ffffff;
        color: #241733;
        --color-text: #241733;
        --color-text-muted: rgba(36, 23, 51, 0.7);
        --color-surface: rgba(132, 88, 179, 0.08);
        --color-border: rgba(36, 23, 51, 0.16);
        --color-button-bg: #8458b3;
        --color-button-text: #ffffff;
    }

    .wave-cap {
        position: absolute;
        left: 0;
        right: 0;
        line-height: 0;
        color: #ffffff;
        pointer-events: none;
        overflow: hidden;
    }

    .wave-cap svg {
        width: 100%;
        height: 5rem;
        display: block;
    }

    /* Scroll-linked drift, tied directly to page scroll progress via the
       native CSS scroll timeline — no JS. scaleX (not width%/margin%)
       gives symmetric horizontal overscan around the center, so the
       translateX below never uncovers one edge while leaving the other
       short: both sides get the same buffer regardless. */
    @keyframes wave-drift {
        from { transform: scaleX(1.2) translateX(-6%); }
        to { transform: scaleX(1.2) translateX(6%); }
    }

    @media (prefers-reduced-motion: no-preference) {
        .wave-cap svg {
            animation-name: wave-drift;
            animation-duration: auto;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: scroll(root);
        }
    }

    .wave-cap--top {
        top: 0;
        transform: translateY(-99%);
    }

    .wave-cap--bottom {
        bottom: 0;
        transform: translateY(99%) scaleY(-1);
    }

    /* contact */
    .contact {
        display: grid;
        gap: var(--space-10);
        align-items: start;
        /* grid items default to min-width: auto, which refuses to shrink
           below their content's intrinsic size — with a form full of
           <input> elements inside, that forces the whole grid (and the
           page) wider than the viewport. min-width: 0 overrides that. */
        min-width: 0;
    }

    .contact__intro,
    .contact__card {
        min-width: 0;
    }

    @media (min-width: 56rem) {
        .contact {
            grid-template-columns: 0.85fr 1.15fr;
            gap: var(--space-16);
        }
    }

    .contact__lede {
        margin-top: var(--space-3);
        color: var(--color-text-muted);
        font-size: 1.0625rem;
        max-width: 28rem;
    }

    .contact__email {
        margin-top: var(--space-6);
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 600;
        font-size: 1.125rem;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.15em;
    }

    .contact__email .icon {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    /* a solid paper card floating on the purple/charcoal page, matching the
       Skills/About treatment so the form reads as an inviting, legible
       surface rather than low-contrast fields on the brand color */
    .contact__card {
        background: #ffffff;
        color: #241733;
        --color-text: #241733;
        --color-text-muted: rgba(36, 23, 51, 0.7);
        --color-surface: #f5f2f9;
        --color-border: rgba(36, 23, 51, 0.16);
        --color-button-bg: #8458b3;
        --color-button-text: #ffffff;
        border-radius: var(--radius-lg);
        padding: var(--space-8);
        box-shadow: var(--shadow-lg);
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .contact-form .button {
        align-self: flex-start;
    }

    .form-status {
        display: none;
        margin-bottom: var(--space-5);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .form-status--success,
    .form-status--error {
        display: block;
    }

    .form-status--success {
        border-color: var(--color-alert-success);
        background: color-mix(in srgb, var(--color-alert-success) 12%, transparent);
        color: var(--color-alert-success);
    }

    .form-status--error {
        border-color: var(--color-alert-error);
        background: color-mix(in srgb, var(--color-alert-error) 12%, transparent);
        color: var(--color-alert-error);
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .form-field label {
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .form-field input,
    .form-field textarea {
        width: 100%;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        border: 1.5px solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-text);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-field input:focus-visible,
    .form-field textarea:focus-visible {
        border-color: var(--color-button-bg);
    }

    .form-field input[aria-invalid="true"],
    .form-field textarea[aria-invalid="true"] {
        border-color: #c53030;
    }

    .form-error {
        color: #c53030;
        font-weight: 600;
        font-size: 0.875rem;
        border-left: 3px solid #c53030;
        padding-left: var(--space-2);
    }

    .form-field--honeypot {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    /* footer */
    .site-footer {
        border-top: 1px solid var(--color-border);
        padding-block: var(--space-8);
    }

    .site-footer__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .site-footer__nav ul {
        display: flex;
        gap: var(--space-4);
    }

    .site-footer__nav a {
        text-decoration: none;
    }

    .site-footer__social {
        display: flex;
        gap: var(--space-3);
    }

    .site-footer__copyright {
        width: 100%;
        color: var(--color-text-muted);
        font-size: 0.8125rem;
    }
}

/* ---------------------------------------------------------------- */
/* utilities + motion                                                 */
/* ---------------------------------------------------------------- */
@layer utilities {
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        [data-animate] {
            opacity: 0;
            transform: translateY(1.5rem);
            transition: opacity 0.6s ease, transform 0.6s ease;
            transition-delay: calc(var(--i, 0) * 70ms);
        }

        [data-animate].in-view {
            opacity: 1;
            transform: none;
        }
    }
}