/**
 * Sketch theme — notebook page, doodles, sticky notes, ink details.
 */

.sketch-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ── Notebook page ── */

[data-theme="sketch"] body {
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse at 78% 18%, rgb(47 79 122 / 0.06) 0%, transparent 38%),
        radial-gradient(ellipse at 12% 88%, rgb(26 23 20 / 0.05) 0%, transparent 32%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgb(47 79 122 / 0.045) 39px,
            rgb(47 79 122 / 0.045) 40px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgb(47 79 122 / 0.045) 39px,
            rgb(47 79 122 / 0.045) 40px
        );
}

[data-theme="sketch"] .page::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--notebook-margin);
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--color-margin-line) 4%,
        var(--color-margin-line) 96%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

[data-theme="sketch"] .page::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0.85rem;
    width: 1rem;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle, rgb(26 23 20 / 0.12) 0.28rem, transparent 0.3rem) center 9%,
        radial-gradient(circle, rgb(26 23 20 / 0.1) 0.28rem, transparent 0.3rem) center 22%,
        radial-gradient(circle, rgb(26 23 20 / 0.11) 0.28rem, transparent 0.3rem) center 35%,
        radial-gradient(circle, rgb(26 23 20 / 0.1) 0.28rem, transparent 0.3rem) center 48%,
        radial-gradient(circle, rgb(26 23 20 / 0.12) 0.28rem, transparent 0.3rem) center 61%,
        radial-gradient(circle, rgb(26 23 20 / 0.1) 0.28rem, transparent 0.3rem) center 74%,
        radial-gradient(circle, rgb(26 23 20 / 0.11) 0.28rem, transparent 0.3rem) center 87%;
}

[data-theme="sketch"] .page-main {
    position: relative;
    padding-left: calc(var(--notebook-margin) + var(--space-4));
    counter-reset: sketch-section;
}

[data-theme="sketch"] .section {
    counter-increment: sketch-section;
    position: relative;
}

[data-theme="sketch"] .section::before {
    content: counter(sketch-section, decimal-leading-zero);
    position: absolute;
    left: calc(-1 * var(--notebook-margin) + 0.15rem);
    top: 0.15rem;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-margin-line);
    rotate: -4deg;
    pointer-events: none;
    user-select: none;
}

[data-theme="sketch"] .page-header {
    padding-right: calc(var(--space-6) + var(--space-2));
}

[data-theme="sketch"] .page-header nav::before {
    content: "palette";
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    text-align: right;
    rotate: 2deg;
}

[data-theme="sketch"] .theme-btn {
    border-radius: 0;
}

[data-theme="sketch"] .theme-btn:nth-child(1) {
    rotate: -2deg;
}

[data-theme="sketch"] .theme-btn:nth-child(2) {
    rotate: 1.5deg;
}

[data-theme="sketch"] .theme-btn:nth-child(3) {
    rotate: -1deg;
}

[data-theme="sketch"] .theme-btn:nth-child(4) {
    rotate: 2deg;
}

[data-theme="sketch"] .theme-btn:nth-child(5) {
    rotate: -1.5deg;
}

[data-theme="sketch"] .page {
    background-image: radial-gradient(
        ellipse 9rem 8rem at 88% 72%,
        rgb(139 90 43 / 0.07) 0%,
        rgb(139 90 43 / 0.03) 42%,
        transparent 68%
    );
}

@media (max-width: 40rem) {
    [data-theme="sketch"] {
        --notebook-margin: 1.75rem;
    }

    [data-theme="sketch"] .page-main {
        padding-left: calc(var(--notebook-margin) + var(--space-3));
    }
}

/* ── Typography & ink ── */

[data-theme="sketch"] h1,
[data-theme="sketch"] h2,
[data-theme="sketch"] h3,
[data-theme="sketch"] .profile-name,
[data-theme="sketch"] .timeline-role {
    text-transform: none;
    letter-spacing: 0.02em;
}

[data-theme="sketch"] .hero {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cpath d='M24 42 C 40 28, 58 48, 72 36' fill='none' stroke='%231a1714' stroke-width='2' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M260 58 L 290 48 L 285 68 Z' fill='none' stroke='%231a1714' stroke-width='2' stroke-linejoin='round' opacity='0.3'/%3E%3Ccircle cx='280' cy='130' r='18' fill='none' stroke='%232f4f7a' stroke-width='1.8' stroke-dasharray='3 4' opacity='0.35'/%3E%3Cpath d='M48 160 C 70 150, 90 168, 110 158 S 140 148, 160 156' fill='none' stroke='%231a1714' stroke-width='1.6' opacity='0.25'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 12%;
    background-size: min(90%, 22rem);
}

[data-theme="sketch"] .hero-name {
    line-height: 0.88;
    rotate: -1.2deg;
    filter: url(#sketch-ink-rough);
    text-shadow:
        2px 2px 0 color-mix(in srgb, var(--color-accent) 16%, transparent),
        4px 4px 0 rgb(26 23 20 / 0.05);
}

[data-theme="sketch"] .hero-meta span {
    display: inline-block;
    rotate: -0.6deg;
    padding-inline: var(--space-1);
}

[data-theme="sketch"] .hero-meta span:nth-child(even) {
    rotate: 0.8deg;
}

[data-theme="sketch"] .section-title {
    display: inline-block;
    padding-bottom: var(--space-3);
    border-bottom: none;
    filter: url(#sketch-ink-rough);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C 12 1, 22 7, 35 4 S 58 2, 72 5 S 95 7, 110 3 S 135 1, 150 5 S 175 6, 200 4' fill='none' stroke='%231a1714' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 7px;
}

[data-theme="sketch"] .section-subtitle {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    rotate: -0.5deg;
}

[data-theme="sketch"] .section-subtitle::before {
    content: "↳ ";
    color: var(--color-accent);
}

[data-theme="sketch"] .section-header::after {
    display: none;
}

[data-theme="sketch"] .about-text {
    line-height: 1.8;
    background-image: repeating-linear-gradient(
        transparent,
        transparent calc(1.8em - 1px),
        rgb(47 79 122 / 0.09) calc(1.8em - 1px),
        rgb(47 79 122 / 0.09) 1.8em
    );
    padding-bottom: var(--space-2);
}

/* ── Inset spacing (keep text inside wobbly borders) ── */

[data-theme="sketch"] .hero-tagline {
    padding: var(--sketch-inset-lg) var(--sketch-inset-xl);
    line-height: 1.45;
}

[data-theme="sketch"] .hero-contact {
    padding: calc(var(--sketch-inset) + 0.1rem) var(--sketch-inset-lg);
    color: var(--color-bg-elevated);
    background: var(--color-accent);
    border: var(--sketch-stroke) solid var(--color-border-strong);
    border-radius: 0;
    rotate: 0.5deg;
    box-shadow:
        var(--shadow-sm),
        2px 3px 6px rgb(26 23 20 / 0.12);
}

[data-theme="sketch"] .social-link {
    padding: var(--sketch-inset) var(--sketch-inset-lg);
    line-height: 1.35;
}

[data-theme="sketch"] .github-dashboard-link {
    padding: var(--sketch-inset) var(--sketch-inset-lg);
}

[data-theme="sketch"] .theme-switcher {
    padding: var(--space-2);
    gap: var(--space-2);
}

[data-theme="sketch"] .github-dashboard {
    padding: var(--sketch-inset-xl);
    gap: var(--space-5);
}

[data-theme="sketch"] .github-stat {
    padding: var(--sketch-inset-md);
}

@supports (border-shape: circle(50%)) {
    [data-theme="sketch"] #about .about-text {
        padding: var(--sketch-inset-lg);
    }

    [data-theme="sketch"] #experience .timeline {
        padding: var(--sketch-inset-lg) var(--sketch-inset-lg) var(--sketch-inset-md);
    }
}

[data-theme="sketch"] .empty-state {
    padding: var(--sketch-inset-xl);
}

/* ── Ink boxes (shared) ── */

[data-theme="sketch"] .social-link,
[data-theme="sketch"] .skill-tag,
[data-theme="sketch"] .theme-switcher,
[data-theme="sketch"] .github-dashboard,
[data-theme="sketch"] .github-stat,
[data-theme="sketch"] .github-dashboard-link {
    position: relative;
    border: var(--sketch-stroke) solid var(--color-border-strong);
    border-radius: 0;
    box-shadow: var(--shadow-sm), var(--shadow-ink);
    background: var(--color-surface);
}

/* ── Sticky-note skills ── */

[data-theme="sketch"] .skill-tag {
    padding: calc(var(--sketch-inset-md) + 0.4rem) var(--sketch-inset-md) var(--sketch-inset);
    box-shadow:
        var(--shadow-sm),
        2px 3px 6px rgb(26 23 20 / 0.08);
}

[data-theme="sketch"] .skill-tag::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: 50%;
    width: 1.75rem;
    height: 0.55rem;
    translate: -50% 0;
    background: rgb(255 255 255 / 0.55);
    border: 1px solid rgb(26 23 20 / 0.12);
    rotate: -2deg;
}

[data-theme="sketch"] .skill-tag:nth-child(5n + 1) {
    background: #fff8b8;
    rotate: -1.6deg;
}

[data-theme="sketch"] .skill-tag:nth-child(5n + 2) {
    background: #ffe8f0;
    rotate: 1.1deg;
}

[data-theme="sketch"] .skill-tag:nth-child(5n + 3) {
    background: #e8f4ff;
    rotate: -0.7deg;
}

[data-theme="sketch"] .skill-tag:nth-child(5n + 4) {
    background: #e9ffe8;
    rotate: 1.4deg;
}

[data-theme="sketch"] .skill-tag:nth-child(5n) {
    background: #fff3e0;
    rotate: -1deg;
}

/* ── Social & stats tilts ── */

[data-theme="sketch"] .hero-tagline {
    font-size: var(--text-2xl);
    color: var(--color-text);
}

[data-theme="sketch"] .social-link:nth-child(odd) {
    rotate: -0.9deg;
}

[data-theme="sketch"] .social-link:nth-child(even) {
    rotate: 0.75deg;
}

[data-theme="sketch"] .github-stat {
    background: linear-gradient(165deg, #fffdf8 0%, #f5efe4 100%);
}

[data-theme="sketch"] .github-stat:nth-child(odd) {
    rotate: -0.55deg;
}

[data-theme="sketch"] .github-stat:nth-child(even) {
    rotate: 0.65deg;
}

[data-theme="sketch"] .github-stat-label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: 0.03em;
}

[data-theme="sketch"] .github-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
}

[data-theme="sketch"] .theme-btn[aria-pressed="true"] {
    border: var(--sketch-stroke) solid var(--color-border-strong);
    box-shadow: 2px 3px 0 rgb(26 23 20 / 0.12);
}

/* ── GitHub dashboard doodles ── */

[data-theme="sketch"] .github-dashboard-header {
    padding-bottom: var(--space-2);
    border-bottom: 2px dashed rgb(26 23 20 / 0.2);
}

[data-theme="sketch"] .github-dashboard-profile .profile-avatar {
    border: var(--sketch-stroke) solid var(--color-border-strong);
    border-radius: 45% 55% 52% 48% / 48% 45% 55% 52%;
    box-shadow: var(--shadow-ink);
}

[data-theme="sketch"] .contrib-graph-total {
    font-family: var(--font-display);
    font-size: var(--text-base);
}

[data-theme="sketch"] .contrib-cell {
    border-radius: 0;
    outline: 1.5px solid color-mix(in srgb, var(--color-text) 24%, transparent);
    rotate: var(--cell-tilt, 0deg);
}

[data-theme="sketch"] .contrib-cell[data-level="0"] {
    background: repeating-linear-gradient(
        135deg,
        var(--contrib-level-0),
        var(--contrib-level-0) 2px,
        rgb(26 23 20 / 0.04) 2px,
        rgb(26 23 20 / 0.04) 3px
    );
}

[data-theme="sketch"] .contrib-cell:nth-child(7n + 1) {
    --cell-tilt: -5deg;
}

[data-theme="sketch"] .contrib-cell:nth-child(7n + 3) {
    --cell-tilt: 4deg;
}

[data-theme="sketch"] .contrib-cell:nth-child(7n + 5) {
    --cell-tilt: -3deg;
}

/* ── Timeline ── */

[data-theme="sketch"] .timeline-item {
    rotate: var(--timeline-tilt, 0deg);
}

[data-theme="sketch"] .timeline-item:nth-child(odd) {
    --timeline-tilt: -0.35deg;
}

[data-theme="sketch"] .timeline-item:nth-child(even) {
    --timeline-tilt: 0.4deg;
}

[data-theme="sketch"] .timeline-marker {
    width: 0.85rem;
    height: 0.85rem;
    border: var(--sketch-stroke) solid var(--color-border-strong);
    border-radius: 42% 58% 54% 46% / 52% 44% 56% 48%;
    box-shadow: var(--shadow-ink);
    background: var(--color-marker);
}

[data-theme="sketch"] .timeline-item:not(:last-child) .timeline-marker::after {
    width: 0;
    background: none;
    border-left: none;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 120' preserveAspectRatio='none'%3E%3Cpath d='M2 0 C 3.2 14, 0.8 28, 2.1 42 S 0.9 76, 2.2 90 S 3.1 106, 2 120' fill='none' stroke='%231a1714' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
        1 / 0 0 0 2.5px / 0 0 0 0.45rem stretch;
}

[data-theme="sketch"] .timeline-period {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--color-accent);
}

/* ── Footer & cursor ── */

[data-theme="sketch"] .page-footer {
    border-top: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C 30 1, 55 5, 85 3 S 140 2, 170 4 S 220 6, 255 2 S 310 1, 340 4 S 380 5, 400 3' fill='none' stroke='%231a1714' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 5px;
    padding-top: var(--space-6);
}

[data-theme="sketch"] .footer-text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    rotate: -0.4deg;
}

[data-theme="sketch"] .cursor-ring {
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-border-strong);
    border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%;
}

[data-theme="sketch"] .cursor-dot {
    border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
    box-shadow: 2px 2px 0 rgb(26 23 20 / 0.18);
}

[data-theme="sketch"] .empty-state {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    background: #fff8b8;
    border: var(--sketch-stroke) dashed var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

/* ── Sketch motion (gentler hovers) ── */

[data-theme="sketch"] .social-link:hover,
[data-theme="sketch"] .skill-tag:hover,
[data-theme="sketch"] [data-stagger="skills"] > *:hover,
[data-theme="sketch"] .github-stat:hover {
    rotate: 0deg;
    transform: translateY(-2px);
    scale: 1;
    skew: none;
}

[data-theme="sketch"] .github-dashboard-link:hover {
    transform: translateY(-1px) rotate(0.3deg);
}

/* ── Sketch animations (ink & paper, not digital sweeps) ── */

@keyframes sketch-hero-ink {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
        filter: blur(1.5px) url(#sketch-ink-rough);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: url(#sketch-ink-rough);
    }
}

@keyframes sketch-note-settle {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }

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

@keyframes sketch-links-drop {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

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

@keyframes sketch-header-drift {
    from {
        opacity: 0;
        transform: translateY(-0.75rem);
    }

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

@keyframes sketch-scroll-settle {
    entry 0% {
        opacity: 0;
        transform: translateY(1.5rem);
    }

    entry 100%,
    exit 0% {
        opacity: 1;
        transform: translateY(0);
    }

    exit 100% {
        opacity: 0;
        transform: translateY(1rem);
    }
}

@keyframes sketch-scroll-note {
    entry 0% {
        opacity: 0;
        transform: translateY(-0.85rem) scale(0.96);
    }

    entry 100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sketch-scroll-unfold {
    entry 0% {
        opacity: 0;
        transform: scale(0.98);
    }

    entry 100%,
    exit 0% {
        opacity: 1;
        transform: scale(1);
    }

    exit 100% {
        opacity: 0;
        transform: scale(0.99);
    }
}

@keyframes sketch-scroll-wash {
    entry 0% {
        opacity: 0.25;
    }

    entry 100% {
        opacity: 1;
    }
}

@keyframes sketch-theme-scribble {
    from {
        transform: translateX(-110%) rotate(-2deg);
        opacity: 0.7;
    }

    to {
        transform: translateX(110%) rotate(-2deg);
        opacity: 0;
    }
}

[data-theme="sketch"] .hero-name {
    animation: sketch-hero-ink var(--duration-sketch) var(--ease-sketch) 0.1s both;
}

[data-theme="sketch"] .hero-tagline {
    animation: sketch-note-settle var(--duration-sketch) var(--ease-sketch) 0.3s both;
}

[data-theme="sketch"] .hero-meta {
    animation: sketch-note-settle calc(var(--duration-sketch) - 80ms) var(--ease-sketch) 0.48s both;
}

[data-theme="sketch"] .hero .social-links {
    animation: sketch-links-drop calc(var(--duration-sketch) - 100ms) var(--ease-sketch) 0.58s both;
}

[data-theme="sketch"] .hero .social-link {
    animation: sketch-links-drop 560ms var(--ease-sketch) both;
}

[data-theme="sketch"] .hero .social-link:nth-child(1) {
    animation-delay: 0.66s;
}

[data-theme="sketch"] .hero .social-link:nth-child(2) {
    animation-delay: 0.74s;
}

[data-theme="sketch"] .hero .social-link:nth-child(3) {
    animation-delay: 0.82s;
}

[data-theme="sketch"] .page-header {
    animation: sketch-header-drift 620ms var(--ease-sketch) both;
}

html.theme-sweeping[data-sweep-from="sketch"] .theme-sweep-beam {
    animation: sketch-theme-scribble 1s var(--ease-sketch) forwards;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgb(26 23 20 / 0.06) 40%,
        rgb(47 79 122 / 0.12) 50%,
        rgb(26 23 20 / 0.06) 60%,
        transparent 100%
    );
    filter: blur(1px);
}

html.theme-sweeping[data-sweep-from="sketch"] .theme-sweep-ring {
    animation-duration: 1.1s;
    border-style: dashed;
    border-radius: 42% 58% 54% 46% / 52% 44% 56% 48%;
}

@supports (animation-timeline: view()) {
    [data-theme="sketch"] [data-reveal="fade-up"],
    [data-theme="sketch"] [data-reveal="slide-left"],
    [data-theme="sketch"] [data-reveal="slide-right"],
    [data-theme="sketch"] [data-reveal="sweep-up"] {
        animation-name: sketch-scroll-settle;
        animation-range: cover 0% cover 35%;
    }

    [data-theme="sketch"] [data-reveal="flip"] {
        animation-name: sketch-scroll-unfold;
    }

    [data-theme="sketch"] [data-stagger="skills"] > * {
        animation-name: sketch-scroll-note;
    }

    [data-theme="sketch"] [data-stagger="skills"] > *:nth-child(even) {
        animation-name: sketch-scroll-note;
    }

    [data-theme="sketch"] .timeline-item {
        animation-name: sketch-scroll-settle;
        animation-range: cover 0% cover 28%;
    }

    [data-theme="sketch"] .github-dashboard {
        animation-name: sketch-scroll-settle;
        animation-range: cover 0% cover 30%;
    }

    [data-theme="sketch"] .github-stat {
        animation-name: sketch-scroll-settle;
        animation-range: cover 0% cover 24%;
    }

    [data-theme="sketch"] .contrib-graph-scroll {
        animation-name: sketch-scroll-wash;
    }

    [data-theme="sketch"] .timeline-item .timeline-marker::after {
        animation-name: sketch-scroll-wash;
        animation-range: entry 8% cover 36%;
    }
}

[data-theme="sketch"] .social-link,
[data-theme="sketch"] .skill-tag,
[data-theme="sketch"] .github-stat,
[data-theme="sketch"] .github-dashboard-link,
[data-theme="sketch"] .theme-btn {
    transition-timing-function: var(--ease-sketch);
}

[data-theme="sketch"] .theme-btn[aria-pressed="true"] svg {
    animation: none;
}

/* ── Focus rings on irregular sketch controls ── */

[data-theme="sketch"] a:focus-visible,
[data-theme="sketch"] button:focus-visible,
[data-theme="sketch"] .theme-btn:focus-visible,
[data-theme="sketch"] .skill-tag:focus-visible,
[data-theme="sketch"] .contrib-cell[role="gridcell"]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--color-accent) 22%, transparent),
        var(--shadow-sm);
    z-index: 1;
}

/* Fallback when border-shape unavailable */
@supports not (border-shape: circle(50%)) {
    [data-theme="sketch"] .social-link,
    [data-theme="sketch"] .skill-tag,
    [data-theme="sketch"] .theme-switcher,
    [data-theme="sketch"] .github-dashboard,
    [data-theme="sketch"] .github-stat,
    [data-theme="sketch"] .hero-tagline {
        border-style: solid;
        border-radius: 2px;
    }
}