/* =========================
   CARD CONTAINER (optional)
========================= */
.about-card-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* =========================
   CARD WRAPPER
========================= */
.wrap {
    --card-bg: url("https://assets.codepen.io/4787486/trees.png");

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 85vmin;
    height: 65vmin;
    border: 8px solid;
    border-image: linear-gradient(
        -50deg,
        green,
        #00b300,
        forestgreen,
        green,
        lightgreen,
        #00e600,
        green
    ) 1;
    transition: 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* =========================
   OVERLAY
========================= */
.overlay {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    background: #186218;
    transition: 0.4s ease-in-out;
    z-index: 1;
}

/* =========================
   LEFT PANEL
========================= */
.overlay-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 15vmin;
    height: 100%;
    padding: 0.5rem 0 0 0.5rem;
    border: 3px solid;
    border-image: linear-gradient(
        to bottom,
        #aea724 5%,
        forestgreen 35% 65%,
        #aea724 95%
    ) 0 0 0 100%;
    transition: 0.3s ease-in-out 0.2s;
}

.card-subtitle {
    color: white;
    margin-bottom: 2.5rem;
}

/* =========================
   IMAGE (DYNAMIC)
========================= */
.image-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 60vmin;
    height: 100%;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    transition: 0.3s ease-in-out;
}

/* =========================
   TEXT PANEL
========================= */
.text {
    display: grid;
    position: absolute;
    top: 0;
    right: 0;
    width: 60vmin;
    height: 100%;
    padding: 3vmin 4vmin;
    background: #ffffff;
    color: #111;
    box-shadow: inset 1px 1px 15px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

/* FIX GLOBAL P TAG CONFLICT */
.text p {
    color: inherit;
    line-height: 1.5;
}

/* =========================
   DARK MODE SUPPORT
   (matches your toggle)
========================= */
body.dark-mode .text {
    background: #1a1a1a;
    color: #e0e0e0;
    box-shadow: inset 1px 1px 20px rgba(0, 0, 0, 0.8);
}

/* =========================
   DOTS
========================= */
.dots {
    position: absolute;
    bottom: 1rem;
    right: 2rem;
    display: flex;
    gap: 10px;
}

.dot {
    width: 1rem;
    height: 1rem;
    background: yellow;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}

/* =========================
   HOVER EFFECT
========================= */
.wrap:hover .overlay {
    transform: translateX(-60vmin);
}

.wrap:hover .image-content {
    width: 30vmin;
}

.wrap:hover .overlay-content {
    border: none;
    transform: translateX(60vmin);
}

.wrap:hover .dots {
    transform: translateX(1rem);
}

.wrap:hover .dot {
    background: white;
}

/* =========================
   ANIMATIONS
========================= */
.animate {
    animation-duration: 0.7s;
    animation-fill-mode: backwards;
}

.pop { animation-name: pop; }
.slide { animation-name: slide; }
.slide-left { animation-name: slide-left; }
.slide-up { animation-name: slide-up; }

@keyframes pop {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slide {
    from { opacity: 0; transform: translateX(4em); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-left {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(3em); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================
   DELAYS
========================= */
.delay-2 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 1.2s; }
.delay-5 { animation-delay: 1.5s; }
.delay-6 { animation-delay: 1.8s; }
.delay-7 { animation-delay: 2.1s; }
.delay-8 { animation-delay: 2.4s; }

/* =========================
   PAGE-SPECIFIC THEMES
========================= */

/* ---------- HOME ---------- */
.home-page .wrap {
    --card-bg: url("YOUR_IMAGE_HERE");
}
.home-page .overlay {
    background: #1e1e1e;
}

/* ---------- ABOUT ---------- */
.about-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/profile/logo.jpg");
}
.about-page .overlay {
    background: #186218;
}

/* ---------- GAMING ---------- */
.gaming-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/gaming/gaming.jpg");
}
.gaming-page .overlay {
    background: #1a1a3a;
}

/* ---------- CONTENT ---------- */
.content-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/content/content.jpeg");
}
.content-page .overlay {
    background: #3a1a1a;
}

/* ---------- MUSIC ---------- */
.music-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/music/music.png");
}
.music-page .overlay {
    background: #2d1a3a;
}

/* ---------- COMMUNITY ---------- */
.community-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/social/community.png");
}
.community-page .overlay {
    background: #1a3a2d;
}

/* ---------- CODING ---------- */
.coding-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/coding/coding.jpg");
}
.coding-page .overlay {
    background: #0f2027;
}

/* ---------- PROJECTS ---------- */
.projects-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/projects/projects.png");
}
.projects-page .overlay {
    background: #2a2a2a;
}

/* ---------- COLLABORATIONS ---------- */
.collab-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/social/music-collab.jpg");
}
.collab-page .overlay {
    background: #1a1a3a;
}
.collab-page .dot {
    background: cyan;
}

/* ---------- ACTIVITIES ---------- */
.activities-page .wrap {
    --card-bg: url("https://raw.githubusercontent.com/the-RealZayne/the-RealZayne.github.io/refs/heads/main/images/activities/water.jpg");
}
.activities-page .overlay {
    background: #2e4d2c;
}

/* ---------- BOOKING ---------- */
.booking-page .wrap {
    --card-bg: url("YOUR_IMAGE_HERE");
}
.booking-page .overlay {
    background: #3a2d1a;
}

/* ---------- CONTRIBUTE ---------- */
.contribute-page .wrap {
    --card-bg: url("YOUR_IMAGE_HERE");
}
.contribute-page .overlay {
    background: #2a1a3a;
}