/* persona 5 theme */

@font-face {
    font-family: 'Optima Nova';
    src: url('../assets/fonts/Optima\ nova\ LT\ Black\ Regular.otf') format('opentype');
    font-weight: bold;
}

:root {
    --p5-red: #d91c1c;
    --p5-black: #1a1a1a;
    --p5-white: #f0f0f0;
    --font-p5: 'Optima Nova', sans-serif;
}

body {
    background-color: var(--p5-red);
    margin: 0;
    font-family: var(--font-p5);
    color: var(--p5-black);
    overflow-x: hidden;
    min-height: 100vh;
}

.p5-bg-dots {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0,0,0,0.2) 2px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    animation: dotScroll 3s linear infinite;
}

@keyframes dotScroll {
    0%   { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

.p5-deco {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
}

.star-pattern-1 { top: 80%; right: 0; width: 450px; height: auto; opacity: 0.9; }
.star-pattern-2 { top: 30%; left: -50px; width: 400px; height: auto; opacity: 0.8; transform: rotate(180deg); }
.star-1 { bottom: 15%; left: 5%; width: 50px; transform: rotate(-15deg); opacity: 0.6; }
.star-2 { top: 25%; left: 20%; width: 30px; transform: rotate(45deg); opacity: 0.4; }
.star-3 { bottom: 30%; right: 10%; width: 40px; transform: rotate(10deg); opacity: 0.5; }
.star-4 { top: 20%; left: 80%; width: 25px; transform: rotate(-30deg); opacity: 0.3; }

.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%);
    background-size: 200% 200%;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}

/* ─── ARCHIVE HEADER ─────────────────────────────────────────── */

.archive-header {
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    background-image: url('../assets/star-pattern-moving.webp');
    background-repeat: repeat;
    background-size: 700px;
    transform: skewX(-10deg) rotate(-2deg);
    border: 4px solid var(--p5-white);
    box-shadow: 7px 7px 0px var(--p5-black);
}

.title-group {
    display: flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    justify-content: center;
    cursor: default;
    padding: 20px 40px;
}

.p5-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    z-index: 1;
    transform: skewX(-10deg);
}

.bg-layer {
    position: absolute;
    top: 6px; left: -6px; width: 100%; height: 100%;
    z-index: -2;
    transition: transform 0.3s ease-out, background-color 0.2s;
}

.p5-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    transition: background-color 0.2s;
}

.black-box { z-index: 1; margin-right: -15px; }
.black-box::before { background: var(--p5-black); clip-path: polygon(0 0, 100% 5%, 95% 100%, 0% 100%); }
.black-box .bg-layer { background: var(--p5-white); clip-path: polygon(2% 0, 95% 5%, 100% 95%, 0% 100%); }

.project-text {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--p5-white);
    transform: rotate(-2deg);
    transition: color 0.2s;
}

.white-box { z-index: 2; padding-left: 30px; }
.white-box::before { background: var(--p5-white); clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 95%); }
.white-box .bg-layer { background: var(--p5-black); clip-path: polygon(0 0, 100% 5%, 98% 100%, 5% 95%); }

.archive-img {
    height: 50px; width: auto; display: block;
    filter: invert(1);
    transform: rotate(2deg);
    transition: filter 0.2s;
}

.date-box {
    z-index: 0;
    margin-left: -10px;
    padding: 5px 15px;
    transform: skewX(-10deg) translateY(15px) rotate(-5deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.date-box::before { background: var(--p5-black); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%); }
.date-text { font-family: 'Times New Roman', serif; color: var(--p5-red); font-weight: bold; font-size: 1.2rem; letter-spacing: 2px; transition: color 0.2s; }

.title-group:hover { transform: scale(1.05) rotate(0deg); }
.title-group:hover .bg-layer { transform: translate(-8px, 8px); }
.title-group:hover .black-box::before { background: var(--p5-white); }
.title-group:hover .black-box .bg-layer { background: var(--p5-black); }
.title-group:hover .project-text { color: var(--p5-black); }
.title-group:hover .white-box::before { background: var(--p5-black); }
.title-group:hover .white-box .bg-layer { background: var(--p5-red); box-shadow: 2px 2px 0px var(--p5-black); }
.title-group:hover .archive-img { filter: invert(0); }
.title-group:hover .date-box { transform: skewX(-10deg) translateY(20px) rotate(0deg) scale(1.1); }
.title-group:hover .date-box::before { background: var(--p5-red); }
.title-group:hover .date-text { color: var(--p5-black); }

.p5-box:hover { transform: skewX(-10deg) !important; z-index: 1; }
.p5-box:hover .bg-layer { transform: translate(-5px, 5px); }

/* ─── SIDEBAR + STAGE ────────────────────────────────────────── */

.project-stage {
    display: grid;
    grid-template-columns: minmax(350px, 420px) minmax(0, 1fr);
    gap: 45px;
    align-items: start;
    width: 100%;
}

.target-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    width: 100%;
    top: 40px;
}

.target-card {
    position: relative;
    display: flex;
    background: var(--p5-black);
    color: var(--p5-white);
    cursor: pointer;
    border: 3px solid var(--p5-black);
    opacity: 1;
    transform: skewX(-10deg);
    transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.28s ease, box-shadow 0.28s ease;
    outline: none;
    min-height: 118px;
    flex-shrink: 0;
    animation: p5CardEject 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) backwards;
}

.rank, .content-wrapper { transform: skewX(10deg); }

.target-card:hover {
    transform: skewX(-10deg) translate(-2px, -2px);
    border-color: var(--p5-white);
    box-shadow: 8px 8px 0px var(--p5-red);
}

.target-card.active {
    background: var(--p5-black);
    border-color: var(--p5-white);
    box-shadow: 10px 10px 0px var(--p5-red);
    transform: skewX(-10deg) translate(-3px, -3px);
}

.target-card:focus-visible {
    border-color: var(--p5-white);
    box-shadow: 0 0 0 4px rgba(240,240,240,0.35), 8px 8px 0px var(--p5-red);
}

body.heist-success .target-card,
body.heist-success .project-panel {
    animation: none;
}

.rank {
    width: 75px; /* Increased from 58px to fit 'III' comfortably */
    flex-shrink: 0; /* Prevents the rank box from being squished */
    background: var(--p5-red);
    color: var(--p5-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 900;
    font-family: 'Optima Nova', serif;
    transform: skewX(0deg);
}

.content-wrapper {
    flex: 1;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
}

.main-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.details {
    position: relative;
    padding: 8px 10px;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 5;
}

.details::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../assets/red-star-pattern-moving.webp');
    background-size: 200px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
}

.details h2 { margin: 0; font-size: 1.45rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; white-space: normal; }
.details p  { margin: 5px 0 0; font-weight: bold; font-size: 0.95rem; white-space: normal; }

.target-card:hover .details,
.target-card.active .details { border-color: var(--p5-white); box-shadow: 5px 5px 0px var(--p5-black); }

.target-card:hover .details::before,
.target-card.active .details::before { opacity: 1; }

.target-card:hover .details h2,
.target-card.active .details h2 {
    color: var(--p5-white);
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    transform: rotate(0deg);
    margin-bottom: 2px;
    transition: transform 0.1s ease;
}

.target-card:hover .details p,
.target-card.active .details p { color: var(--p5-white); font-weight: bold; text-shadow: 2px 2px 0px #000; }

.category {
    position: relative;
    color: var(--p5-white);
    transform: rotate(-5deg);
    padding: 5px 8px;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 1.4px;
    border: 2px solid var(--p5-black);
    background: transparent;
    z-index: 1;
    transition: color 0.3s, border-color 0.3s;
}

.category::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../assets/star-pattern-moving.webp');
    background-size: 400px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.target-card:hover .category,
.target-card.active .category { border-color: var(--p5-white); color: var(--p5-white); }

.target-card:hover .category::before,
.target-card.active .category::before { opacity: 1; }

/* ── The P5 Pagination Buttons ── */
.p5-page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Pushes controls to the bottom */
    padding-top: 10px;
    border-top: 3px solid var(--p5-black);
}

.p5-page-btn {
    background: var(--p5-black);
    color: var(--p5-white);
    border: 3px solid var(--p5-white);
    padding: 5px 20px;
    font-family: 'Optima Nova', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    cursor: pointer;
    transform: skewX(-10deg);
    box-shadow: 4px 4px 0px var(--p5-red);
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p5-page-btn:hover:not(:disabled) {
    background: var(--p5-white);
    color: var(--p5-black);
    border-color: var(--p5-black);
    transform: skewX(-10deg) translate(-3px, -3px);
    box-shadow: 7px 7px 0px var(--p5-black);
}

.p5-page-btn:active:not(:disabled) {
    transform: skewX(-10deg) translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--p5-black);
}

.p5-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
    transform: skewX(-10deg) translate(0, 0);
}

.p5-page-info {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--p5-red);
    letter-spacing: 2px;
}

/* ── Sidebar Card Load Animation ── */
@keyframes p5CardEject {
    0% {
        opacity: 0;
        /* Start pushed down, right, and slightly shrunk */
        transform: skewX(-10deg) translate(30px, 15px) scale(0.95);
    }
    100% {
        opacity: 1;
        /* Snap into normal position */
        transform: skewX(-10deg) translate(0, 0) scale(1);
    }
}

.sidebar-return {
    margin-top: 25px;       /* Adds space between pagination and the button */
    align-self: center;     /* Centers it in the sidebar flexbox */
    padding: 10px 45px;     /* Scaled down slightly from the massive footer version */
    font-size: 1.3rem;      /* Scaled down from 1.6rem */
    width: fit-content;
}

/* ─── CALLING CARD ───────────────────────────────────────────── */
/*
 * The calling card is built from the same "layered p5-box" DNA as the
 * archive header, but scaled up to fill a full panel.
 *
 * Anatomy:
 *   .calling-card           – outer shell (skewed, scrolling bg)
 *   .cc-inner               – un-skews content; acts as the hover anchor
 *   .cc-title-block         – the p5-box cluster (tag + title + number)
 *     .cc-tag-box           – small "TARGET N" label (like black-box)
 *       .cc-tag-bg          – shadow layer (like .bg-layer)
 *     .cc-heading-box       – large project title (like white-box)
 *       .cc-heading-bg      – shadow layer
 *     .cc-num-box           – roman numeral accent (like date-box)
 *       .cc-num-bg          – shadow layer
 *   .cc-body                – description text
 *   .cc-actions             – VISIT REPO button
 *
 * Hover rules mirror title-group:hover exactly — colours invert,
 * bg-layers slide, and the whole block scales.
 */

/* ── Allow the card to stretch naturally ── */
.calling-card {
    position: relative;
    border: 4px solid var(--p5-white);
    background-color: var(--p5-black);
    
    background-image: repeating-radial-gradient(
        circle at 50% 50%, 
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 35px,
        transparent 35px,
        transparent 70px
    );
    
    box-shadow: 8px 8px 0px var(--p5-black); 
    transform: skewX(-2deg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: fit-content; 
    min-height: 480px; 
}

.calling-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 350px;
    height: 350px;
    background-image: url('../assets/mask.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.04; /* Extremely subtle */
    z-index: 0; /* Keeps it behind text */
    pointer-events: none; /* So it doesn't block clicks */
    transform: rotate(-15deg);
}

.cc-inner {
    position: relative;
    z-index: 1;
    transform: skewX(2deg); /* Un-skew the content */
    padding: 40px 38px 45px;
    display: flex;
    flex-direction: column;
}

/* ── The Classic Staggered Title Block ── */
.cc-title-block {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping if screen gets too small */
    gap: 0;
    cursor: default;
    transition: transform 0.15s ease-out;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 30px;
}

/* Base Shadow Layer Rules */
.cc-tag-bg,
.cc-heading-bg {
    position: absolute;
    top: 6px; left: -6px; width: 100%; height: 100%;
    z-index: -2;
    transition: transform 0.15s ease-out, background-color 0.15s;
}

/* Base Box Rules */
.cc-tag-box,
.cc-heading-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    z-index: 1;
    transform: skewX(-10deg);
}

.cc-tag-box::before,
.cc-heading-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    transition: background-color 0.1s;
}

/* 1. TAG BOX (TARGET I) */
.cc-tag-box {
    z-index: 1;
    margin-right: -12px;
    margin-top: -1px;
    padding: 6px 18px;
}
.cc-tag-box::before { background: var(--p5-white); clip-path: polygon(0 0, 100% 5%, 95% 100%, 0% 100%); }
.cc-tag-bg { background: var(--p5-black); clip-path: polygon(2% 0, 95% 5%, 100% 95%, 0% 100%); }
.cc-tag-text {
    font-size: 0.78rem; font-weight: 900; color: var(--p5-black);
    text-transform: uppercase; letter-spacing: 2px; transform: rotate(-1deg);
    transition: color 0.1s;
}

/* 2. HEADING BOX (MOONWEFT) */
.cc-heading-box {
    z-index: 2;
    padding-left: 28px; padding-right: 24px;
}
.cc-heading-box::before { background: var(--p5-black); clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 95%); }
.cc-heading-bg { background: var(--p5-white); clip-path: polygon(0 0, 100% 5%, 98% 100%, 5% 95%); }
.cc-heading-text {
    font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 900; color: var(--p5-white);
    text-transform: uppercase; letter-spacing: 1px; transform: rotate(-1deg);
    line-height: 1.1; transition: color 0.1s; word-wrap: break-word;
}

/* ── SNAPPY HOVER ANIMATIONS ── */
.cc-title-block:hover { 
    transform: scale(1) rotate(0deg); 
}

/* ── The "Side-to-Side" Wave Effect ── */
/* When hovering over the specific individual boxes, their shadows push out further */

.cc-tag-box:hover .cc-tag-bg {
    transform: translate(-6px, 6px) !important;
}

.cc-heading-box:hover .cc-heading-bg {
    transform: translate(-6px, 6px) !important;
}

/* 1. Shadows shift tightly */
.cc-title-block:hover .cc-tag-bg,
.cc-title-block:hover .cc-heading-bg {
    transform: translate(-2px, 2px); 
}
/* Colors invert instantly */
.cc-title-block:hover .cc-tag-box::before { background: var(--p5-black); }
.cc-title-block:hover .cc-tag-bg { background: var(--p5-white); }
.cc-title-block:hover .cc-tag-text { color: var(--p5-white); }

.cc-title-block:hover .cc-heading-box::before { background: var(--p5-white); }
.cc-title-block:hover .cc-heading-bg { background: var(--p5-red); box-shadow: 2px 2px 0px var(--p5-black); }
.cc-title-block:hover .cc-heading-text { color: var(--p5-black); }

/* ── Layout Flow for Images & Buttons ── */
.cc-content-flow {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cc-badges-container {
    position: absolute;
    right: -20px;
    bottom: -15px;
    display: flex;
    gap: 10px;
    z-index: 5;
}

.cc-actions {
    margin-top: 10px;
}

.calling-card:hover {
    border-color: var(--p5-white);
    box-shadow: 10px 10px 0px var(--p5-black);
    transform: skewX(-2deg);
}

/* ── The Reworked Category Badge ── */
.cc-num-box {
    position: relative;
    right: 0px;
    bottom: 0px;
    z-index: 5;    /* Pops on top of the main heading */
    padding: 4px 12px;
    background-color: var(--p5-red);
    border: 2px solid var(--p5-black);
    box-shadow: 4px 4px 0px var(--p5-black);
    transform: skewX(-8deg) rotate(-2deg);
    transition: transform 0.15s ease-out, background-color 0.15s, border-color 0.15s;
    pointer-events: none; /* Prevents it from interfering with hover detection */
}

/* Hide the old shadow layer span entirely */
.cc-num-bg {
    display: none; 
}

.cc-num-text {
    font-size: 0.9rem; 
    font-weight: 900;
    letter-spacing: 2px; 
    color: var(--p5-white);
    text-transform: uppercase;
    transition: color 0.15s;
}

/* ── Snappy Badge Hover ── */
.cc-title-block:hover .cc-num-box {
    /* Shifts slightly, inverts to black and white */
    transform: skewX(-8deg) rotate(-2deg) translate(-2px, -2px);
    background-color: var(--p5-black);
    border-color: var(--p5-white);
    box-shadow: 6px 6px 0px var(--p5-red);
}

.cc-title-block:hover .cc-num-text {
    color: var(--p5-white);
}

/* Un-skew wrapper so all child content reads straight */
.cc-inner {
    position: relative;
    z-index: 1;
    transform: skewX(2deg);
    padding: 40px 38px 38px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Body text ── */
.cc-body {
    max-width: 58ch;
    line-height: 1.7;
    font-size: 1rem;
    color: rgba(240,240,240,0.85);
    padding-left: 4px;
    border-left: 4px solid var(--p5-red);
    padding-left: 16px;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.calling-card:hover .cc-body {
    border-left-color: var(--p5-white);
    color: var(--p5-white);
}

.cc-image {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    border: 3px solid var(--p5-white);
    box-shadow: 6px 6px 0px var(--p5-black);
    transform: skewX(-2deg);
    display: block;
}

/* Allow paragraphs inside cc-body to space out nicely */
.cc-body p {
    margin-top: 0;
    margin-bottom: 12px;
}
.cc-body p:last-child {
    margin-bottom: 0;
}

/* ── Intro placeholder (Take Your Time Image Motif) ── */
.cc-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    pointer-events: none;
}

.p5-motif {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: skewX(-10deg) rotate(-5deg);
    opacity: 0.85;
    animation: p5Breathe 4s ease-in-out infinite;
}

/* This is the magic rule for transparent PNGs */
.motif-img {
    display: block;
    /* Acts exactly like text-shadow, tracing the edge of your image */
    filter: drop-shadow(6px 6px 0px var(--p5-black)); 
}

/* 1. Top Left */
.motif-take { 
    width: 140px; /* Adjust this to scale your image */
    align-self: flex-start; 
    margin-left: -20px; 
}

/* 2. Middle, overlapping */
.motif-your { 
    width: 110px; 
    z-index: 2; 
    margin-top: -15px; /* Negative margin pulls it up over "TAKE" */
}

/* 3. Bottom Right, overlapping */
.motif-time { 
    width: 180px; 
    align-self: flex-end; 
    margin-right: -30px; 
    margin-top: -25px; /* Negative margin pulls it up over "YOUR" */
}

/* ── The Double-Thump Heartbeat Effect ── */
@keyframes p5Breathe {
    0%, 100% { 
        transform: skewX(-10deg) rotate(-5deg) scale(1); 
        filter: drop-shadow(6px 6px 0px var(--p5-black));
    }
    50% { 
        /* Slightly straightens out and grows, shadow extends */
        transform: skewX(-8deg) rotate(-3deg) scale(1.05); 
        filter: drop-shadow(10px 10px 0px var(--p5-black));
    }
}

/* ── Panels ── */
.project-panel {
    position: relative;
    z-index: 1;
    display: none;
    flex-direction: column;
    gap: 0;
    animation: panelReveal 220ms ease-out;
}

.project-panel.active { display: flex; }

/* intro panel is its own shape */
.intro-panel.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 380px;
    animation: none;
}

@keyframes panelReveal {
    from { opacity: 0; transform: translateX(18px) skewX(3deg); }
    to   { opacity: 1; transform: translateX(0) skewX(0deg); }
}

/* ── Repo link ── */
.repo-link {
    display: inline-block;
    padding: 12px 35px;
    background: var(--p5-black);
    color: var(--p5-white);
    border: 3px solid var(--p5-white);
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Optima Nova', sans-serif;
    cursor: pointer;
    
    /* Matches the Escape button's aggressive skew and slight tilt */
    transform: skewX(-20deg) rotate(-2deg);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.5);
    transition: all 0.2s cubic-bezier(0.1, 0.7, 0.1, 1);
    align-self: flex-start;
    margin-top: 15px;
    z-index: 1;
}

.repo-link:hover {
    background-color: var(--p5-white);
    color: var(--p5-black);
    border-color: var(--p5-black);
    
    /* Straightens out and snaps the shadow to the opposite side */
    transform: skewX(-20deg) rotate(0deg) translate(4px, -4px);
    box-shadow: -6px 6px 0px var(--p5-red);
}
/* ─── FOOTER ─────────────────────────────────────────────────── */

.footer-section { margin-top: 100px; text-align: center; }

.escape-btn {
    display: inline-block;
    padding: 15px 60px;
    text-decoration: none;
    background: var(--p5-black);
    color: var(--p5-white);
    font-weight: 900;
    font-size: 1.6rem;
    text-transform: uppercase;
    transform: skewX(-20deg) rotate(-2deg);
    border: 3px solid var(--p5-white);
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3);
    transition: all 0.2s;
}

.escape-btn:hover {
    background-color: var(--p5-white);
    color: var(--p5-black);
    border-color: var(--p5-black);
    transform: skewX(-20deg) rotate(0deg) translate(5px, -5px);
    box-shadow: -8px 8px 0px var(--p5-black);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .project-stage { grid-template-columns: 1fr; }
    .target-list   { position: static; max-width: 100%; }
    .container     { padding: 20px 10px; overflow-x: hidden; }
    .project-text  { font-size: 2rem; }

    .target-card {
        transform: skewX(-5deg);
        min-height: 102px;
    }
    .target-card:hover,
    .target-card.active { transform: skewX(-5deg) translate(-2px, -2px); }

    .details h2, .details p { white-space: normal; }

    .calling-card  { transform: none; min-height: 340px; }
    .calling-card:hover { transform: none; }
    .cc-inner      { padding: 28px 20px; }

    .cc-heading-text { font-size: 1.8rem; }

    .repo-link { padding: 10px 15px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .p5-bg-dots, .target-card, .bg-layer, .title-group,
    .project-panel, .repo-link, .escape-btn,
    .cc-title-block, .cc-intro-arrow {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}