@media (min-width: 1200px) {
    #latest-posts a[href$='blog'] {
        font-size: 0.85rem !important;
        padding: 1rem 2.15rem !important;
        letter-spacing: 0.06em;
    }
}


/* ============================================================ */


/* Extreme ultra-wide navigation (>2500px & >3000px)            */

@media (min-width: 2500px) {
    #home>div {
        padding-left: clamp(4rem, 5vw, 6rem);
        padding-right: clamp(4rem, 5vw, 6rem);
    }
    #services article {
        min-height: 430px !important;
    }
    #projects .project-card {
        min-height: 480px !important;
    }
    #latest-posts article {
        min-height: 470px;
    }
}

@media (min-width: 3000px) {
    #home>div {
        padding-left: clamp(5rem, 6vw, 7rem);
        padding-right: clamp(5rem, 6vw, 7rem);
    }
    #services article {
        min-height: 460px !important;
    }
    #projects .project-card {
        min-height: 520px !important;
    }
    #latest-posts article {
        min-height: 500px;
    }
}


/* Group container base */

.position-group {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}


/* Positioning of the two groups */

.position-group-top-left {
    top: -32px;
    left: -24px;
}

.position-group-bottom-right {
    bottom: -32px;
    right: -24px;
}


/* Top-left layout  */

.position-group-top-left .position-box-1 {
    position: relative;
    transform: rotate(-6deg);
}

.position-group-top-left .position-box-2 {
    position: absolute;
    top: 14px;
    left: 88px;
    transform: rotate(-3deg);
}

.position-group-top-left .position-box-3 {
    position: absolute;
    top: 92px;
    left: 24px;
    transform: rotate(2deg);
}


/* Bottom-right layout (boxes 4-6) */

.position-group-bottom-right .position-box-4 {
    position: relative;
    transform: rotate(6deg);
}

.position-group-bottom-right .position-box-5 {
    position: absolute;
    bottom: 14px;
    right: 88px;
    transform: rotate(3deg);
}

.position-group-bottom-right .position-box-6 {
    position: absolute;
    bottom: 92px;
    right: 24px;
    transform: rotate(-2deg);
}


/* Original shadow refinement */

.position-group .position-box-1,
.position-group .position-box-2,
.position-group .position-box-3,
.position-group .position-box-4,
.position-group .position-box-5,
.position-group .position-box-6 {
    box-shadow: 0 8px 24px rgba(19, 15, 62, 0.08);
    will-change: transform;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* Small screens tweak */

@media (max-width: 640px) {
    .position-group-bottom-right {
        display: none !important;
    }
    .position-group {
        transform: scale(0.95);
    }
    .position-group-top-left {
        top: -18px;
        left: -14px;
        transform-origin: top left;
    }
    .position-group-top-left .position-box-2 {
        top: 10px;
        left: 72px;
    }
    .position-group-top-left .position-box-3 {
        top: 72px;
        left: 18px;
    }
}


/* Extra small screens */

@media (max-width: 480px) {
    .position-group {
        transform: scale(0.9);
    }
    .position-group-top-left {
        transform-origin: top left;
    }
}


/* Experience section */

.experience-box {
    width: 140px;
    height: 120px;
    border: 1px solid var(--color-accent);
}


/* Services Box */


/* Responsive Boxes */


/* Project cards readability enhancements */

.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 18, 0.78), rgba(10, 10, 18, 0.32) 55%, rgba(10, 10, 18, 0) 90%);
    opacity: var(--overlay-opacity, 1);
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 1;
}

.project-card:hover::before {
    opacity: 0.95;
}

.project-card .project-content {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.project-card img {
    filter: brightness(.9) saturate(.95);
    transition: filter .6s ease, transform .7s ease;
}

.project-card:hover img {
    filter: brightness(1) saturate(1);
    transform: scale(1.03);
}

.project-tech-badges li {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (min-width: 768px) {
    .project-card::before {
        background: linear-gradient(to top, rgba(10, 10, 18, 0.82), rgba(10, 10, 18, 0.38) 50%, rgba(10, 10, 18, 0) 92%);
    }
}


/* Mobile tweaks for project section */

@media (max-width: 767px) {
    #projects .grid {
        gap: 14px !important;
        border: none;
    }
    #projects .project-card {
        border-radius: 18px;
        border: 1px solid rgba(112, 111, 211, 0.22);
        min-height: 230px;
    }
    #projects .project-card img {
        object-position: center top;
    }
    #projects .project-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.9rem !important;
    }
    #projects h3 {
        font-size: 1.02rem;
    }
    #projects .project-tech-badges {
        margin-top: 0.55rem !important;
    }
    #projects .project-tech-badges li {
        font-size: 9px !important;
        padding: 2px 6px !important;
        line-height: 1;
    }
    #projects .project-card::before {
        background: linear-gradient(to top, rgba(8, 8, 15, 0.88), rgba(8, 8, 15, 0.44) 55%, rgba(8, 8, 15, 0) 95%);
    }
    #projects p {
        font-size: 11.5px !important;
    }
}


/* ----------------------------------------------------------- */


/* Ultra-wide screens (beyond typical desktop: > 1600px)       */


/* ----------------------------------------------------------- */

@media (min-width: 1600px) {
    .max-w-7xl {
        max-width: 88rem;
    }
    .max-w-\[1150px\] {
        max-width: 1400px;
    }
    #home>div {
        padding-left: clamp(3rem, 4vw, 5rem);
        padding-right: clamp(3rem, 4vw, 5rem);
    }
}


/* Navbar larger touch targets & spacing (ultra-wide) */

@media (min-width: 768px) {
    #latest-posts a[href$='blog'] {
        font-size: 0.8rem !important;
        padding: 0.85rem 1.75rem !important;
        border-radius: 0.8rem !important;
    }
}

@media (min-width: 1200px) {
    #latest-posts a[href$='blog'] {
        font-size: 0.85rem !important;
        padding: 1rem 2.15rem !important;
        letter-spacing: 0.06em;
        /* ===================================================== */
        /* ultra-wide navigation (>2500px & >3000px)     */
        /* ===================================================== */
        @media (min-width: 2500px) {
            .primary-nav {
                max-width: 110rem;
                padding-top: 1.35rem;
                padding-bottom: 1.35rem;
            }
            .primary-nav .site-logo {
                height: 4.25rem;
            }
            .primary-nav .nav-pill-group {
                gap: 1.25rem;
                padding: 0.85rem 1.25rem;
            }
            .primary-nav .nav-pill-group a {
                padding: 1.05rem 2rem;
                font-size: 1.05rem;
                border-radius: 999px;
            }
            /* Slight hero inner breathing on very wide */
            #home>div {
                padding-left: clamp(4rem, 5vw, 6rem);
                padding-right: clamp(4rem, 5vw, 6rem);
            }
            /* Services / projects subtle increase */
            #services article {
                min-height: 430px !important;
            }
            #projects .project-card {
                min-height: 480px !important;
            }
            #latest-posts article {
                min-height: 470px;
            }
        }
        @media (min-width: 3000px) {
            .primary-nav {
                max-width: 120rem;
                padding-top: 1.5rem;
                padding-bottom: 1.5rem;
            }
            .primary-nav .site-logo {
                height: 4.75rem;
            }
            .primary-nav .nav-pill-group {
                gap: 1.4rem;
                padding: 1rem 1.45rem;
            }
            .primary-nav .nav-pill-group a {
                padding: 1.15rem 2.25rem;
                font-size: 1.1rem;
            }
            #home>div {
                padding-left: clamp(5rem, 6vw, 7rem);
                padding-right: clamp(5rem, 6vw, 7rem);
            }
            #services article {
                min-height: 460px !important;
            }
            #projects .project-card {
                min-height: 520px !important;
            }
            #latest-posts article {
                min-height: 500px;
            }
        }
    }
}

@media (min-width: 1800px) {
    #latest-posts a[href$='blog'] {
        font-size: 0.9rem !important;
        padding: 1.1rem 2.5rem !important;
    }
}

@media (min-width: 1600px) {
    .primary-nav {
        padding-top: 1.15rem;
        padding-bottom: 1.15rem;
    }
    .primary-nav .nav-pill-group {
        gap: 0.85rem;
        padding: 0.55rem 0.85rem;
    }
    .primary-nav .nav-pill-group a {
        padding: 0.75rem 1.4rem;
        font-size: 0.92rem;
    }
}

@media (min-width: 1900px) {
    .primary-nav {
        max-width: 90rem;
    }
    .primary-nav .nav-pill-group {
        gap: 1rem;
        padding: 0.65rem 1rem;
    }
    .primary-nav .nav-pill-group a {
        padding: 0.85rem 1.55rem;
        font-size: 0.95rem;
    }
}

@media (min-width: 2200px) {
    .primary-nav {
        max-width: 100rem;
    }
    .primary-nav .nav-pill-group {
        gap: 1.1rem;
        padding: 0.75rem 1.15rem;
    }
    .primary-nav .nav-pill-group a {
        padding: 0.95rem 1.85rem;
        font-size: 1rem;
    }
}

@media (min-width: 1800px) {
    .max-w-7xl {
        max-width: 96rem;
    }
    .max-w-\[1150px\] {
        max-width: 1500px;
    }
    #latest-posts .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #blog-section #posts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .max-w-6xl {
        max-width: 92rem;
    }
}

@media (min-width: 2200px) {
    .max-w-7xl {
        max-width: 110rem;
    }
    .max-w-\[1150px\] {
        max-width: 1650px;
    }
    #latest-posts .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .position-group .position-box-1,
    .position-group .position-box-4 {
        width: 8.5rem;
        height: 8.5rem;
    }
    .position-group .position-box-2,
    .position-group .position-box-3,
    .position-group .position-box-5,
    .position-group .position-box-6 {
        width: 6.75rem;
        height: 6.75rem;
    }
    /* Blog index: allow a 4-column grid at very wide screens */
    #blog-section #posts-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* Contact page: small additional width */
    .max-w-6xl {
        max-width: 100rem;
    }
}

@media (min-width: 1600px) {
    .prose,
    .longform,
    .rich-text {
        max-width: 70ch;
    }
}


/* =========================================================== */


/* Dashboard Service Form Styles                              */


/* =========================================================== */


/* Services section */

@media (min-width: 768px) {
    #services article {
        min-height: 360px !important;
    }
}


/* Projects / Works section (#projects .project-card) */

@media (min-width: 768px) {
    #projects .project-card {
        min-height: 380px !important;
    }
}

@media (min-width: 1200px) {
    #projects .project-card {
        min-height: 420px !important;
    }
}


/* Latest blog cards (home latest posts section) */

@media (min-width: 768px) {
    #latest-posts article {
        min-height: 360px;
    }
    #latest-posts .aspect-\[16\/9\] {
        aspect-ratio: 16/10;
    }
    #latest-posts article .px-5 {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
}

@media (min-width: 1200px) {
    #latest-posts article {
        min-height: 400px;
    }
    #latest-posts .aspect-\[16\/9\] {
        aspect-ratio: 5/3;
    }
}

@media (min-width: 1800px) {
    #projects .project-card {
        min-height: 460px !important;
    }
    #services article {
        min-height: 400px !important;
    }
    #latest-posts article {
        min-height: 440px;
    }
}


/* Base prep: allow overlay pseudo elements */

#projects .project-card {
    isolation: isolate;
}


/* Glitch state */

#projects .project-card.glitching {
    animation: glitch-flicker 420ms steps(2, end) forwards;
}


/* Color channel offsets */

#projects .project-card.glitching::before,
#projects .project-card.glitching::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-clip: border-box;
    mix-blend-mode: screen;
    pointer-events: none;
    filter: brightness(0.8) contrast(1.2);
    opacity: 0.4;
}

#projects .project-card.glitching::before {
    transform: translate(2px, -2px);
    clip-path: polygon(0 0, 100% 0, 100% 55%, 0 60%);
    filter: hue-rotate(20deg) saturate(1.6);
}

#projects .project-card.glitching::after {
    transform: translate(-3px, 3px);
    clip-path: polygon(0 45%, 100% 40%, 100% 100%, 0 100%);
    filter: hue-rotate(-35deg) saturate(1.4);
}


/* Sub-slice jitter layers */

#projects .project-card.glitching .project-content {
    animation: glitch-text 380ms steps(2, end);
}

@keyframes glitch-flicker {
    0% {
        filter: none;
    }
    10% {
        filter: brightness(1.35) contrast(1.15) saturate(1.2);
    }
    18% {
        filter: brightness(0.85) contrast(1.3) saturate(1.4);
    }
    32% {
        filter: brightness(1.25) contrast(1.25);
    }
    55% {
        filter: brightness(0.9) contrast(1.4);
    }
    70% {
        filter: brightness(1.4) contrast(1.2);
    }
    100% {
        filter: none;
    }
}

@keyframes glitch-text {
    0%,
    100% {
        text-shadow: 0 0 0 rgba(255, 0, 120, 0.0), 0 0 0 rgba(0, 180, 255, 0.0);
        transform: translate(0, 0);
    }
    15% {
        text-shadow: -2px 0 2px rgba(255, 0, 120, 0.6), 2px 0 2px rgba(0, 180, 255, 0.55);
    }
    35% {
        text-shadow: 2px -1px 2px rgba(255, 0, 120, 0.55), -2px 1px 2px rgba(0, 180, 255, 0.5);
        transform: translate(-1px, 1px);
    }
    55% {
        text-shadow: -1px 1px 2px rgba(255, 0, 120, 0.5), 1px -1px 2px rgba(0, 180, 255, 0.45);
        transform: translate(1px, -1px);
    }
    75% {
        text-shadow: 0 0 1px rgba(255, 0, 120, 0.4), 0 0 1px rgba(0, 180, 255, 0.35);
    }
}


/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
    #projects .project-card.glitching,
    #projects .project-card.glitching .project-content,
    #projects .project-card.glitching::before,
    #projects .project-card.glitching::after {
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
}


/* Refined responsive heights for project cards */

#projects .grid>div:not(.project-card),
#projects .project-card {
    min-height: 240px !important;
}

@media (min-width: 640px) {
    #projects .grid>div:not(.project-card),
    #projects .project-card {
        min-height: 260px !important;
    }
}

@media (min-width: 768px) {
    #projects .grid>div:not(.project-card),
    #projects .project-card {
        min-height: 320px !important;
    }
}

@media (min-width: 1200px) {
    #projects .grid>div:not(.project-card),
    #projects .project-card {
        min-height: 320px !important;
    }
}

@media (min-width: 1800px) {
    #projects .grid>div:not(.project-card),
    #projects .project-card {
        min-height: 340px !important;
    }
}


/* =========================================================== */


/* Hero Background Grid & SVG Threads                          */


/* =========================================================== */

.hero-visual-layer {
    position: absolute;
    inset: 0;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--accent)/8 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, var(--accent)/8 1px, transparent 1px) 0 0 / 60px 60px, radial-gradient(circle at 30% 35%, var(--accent)/12, transparent 55%), radial-gradient(circle at 70% 65%, var(--accent-alt)/15, transparent 60%);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, .65) 40%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, 0));
    animation: hero-grid-pan 34s linear infinite;
    opacity: .55;
}

@keyframes hero-grid-pan {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-30px, -20px, 0) scale(1.015);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.hero-svg-lines {
    mix-blend-mode: screen;
    opacity: .55;
}

.hero-thread {
    stroke-dasharray: 8 260;
    stroke-dashoffset: 0;
    animation: hero-thread-dash 9s ease-in-out infinite;
}

.hero-thread.delay-1 {
    animation-delay: 3s;
}

.hero-thread.delay-2 {
    animation-delay: 6s;
}

@keyframes hero-thread-dash {
    0% {
        stroke-dasharray: 0 400;
        stroke-dashoffset: 0;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    45% {
        stroke-dasharray: 140 260;
        stroke-dashoffset: -40;
        opacity: 1;
    }
    70% {
        stroke-dasharray: 400 0;
        stroke-dashoffset: -180;
        opacity: .85;
    }
    85% {
        opacity: .4;
    }
    100% {
        stroke-dasharray: 0 400;
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

.hero-nodes circle {
    animation: hero-node-pulse 6s ease-in-out infinite;
    transform-origin: center;
}

.hero-nodes circle:nth-child(2) {
    animation-delay: 2s;
}

.hero-nodes circle:nth-child(3) {
    animation-delay: 4s;
}

@keyframes hero-node-pulse {
    0%,
    100% {
        r: 3;
        filter: drop-shadow(0 0 0 var(--accent));
        opacity: .5;
    }
    50% {
        r: 5;
        filter: drop-shadow(0 0 6px var(--accent));
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-grid,
    .hero-thread,
    .hero-nodes circle {
        animation: none !important;
    }
    .hero-thread {
        stroke-dasharray: none;
    }
}


/* =========================================================== */


/* Reveal Animations                                          */


/* =========================================================== */

@layer components {
    [data-reveal].reveal-init {
        opacity: 0;
        transform: translateY(28px) scale(.98);
    }
    [data-reveal].reveal-in {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[data-reveal] {
    transition: opacity .9s cubic-bezier(.16, .8, .27, 1), transform .9s cubic-bezier(.16, .8, .27, 1);
    will-change: opacity, transform;
}

[data-reveal][style*="transition-delay"] {
    transition-duration: .85s;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}