/* ============================================================
   PROJECT DETAIL PAGES — shared stylesheet
   Loaded ONLY on the 3 case-study pages, after style.css.
   Each page carries a body modifier class:
   body.pd-doctor / body.pd-blood / body.pd-portfolio
   which swaps the accent colors + a signature animation.
   ============================================================ */

:root{
    --pd-radius:22px;
}

.pd-hero,
.pd-github-btn,
.pd-stack-chip i,
.pd-feature-card .pd-feature-icon{
    --pd-accent:#7b2ff7;
    --pd-accent-2:#c46bff;
}

/* THEME 1 — Doctor Appointment App (clinical teal) */
body.pd-doctor{
    --pd-accent:#00b8a9;
    --pd-accent-2:#3ee6c4;
}

/* THEME 2 — Blood Donation System (crimson) */
body.pd-blood{
    --pd-accent:#e63950;
    --pd-accent-2:#ff7a90;
}

/* THEME 3 — Portfolio Website (rainbow / creative) */
body.pd-portfolio{
    --pd-accent:#7b2ff7;
    --pd-accent-2:#ff6ec7;
}

/* ============================================================
   HERO
   IMPORTANT: padding-top is 140px — the fixed navbar is 85px tall,
   so anything less makes the hero content slide in underneath it.
   ============================================================ */
.pd-hero{
    position:relative;
    overflow:hidden;
    max-width:1400px;
    margin:0 auto;
    padding:140px 8% 70px;
    text-align:center;
    background:var(--bg-page);
    isolation:isolate;
}

/* Soft glowing blobs behind the hero content, theme-tinted */
.pd-hero::before,
.pd-hero::after{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,var(--pd-accent) 0%,transparent 70%);
    opacity:.22;
    filter:blur(60px);
    z-index:-1;
    animation:pdBlobDrift 10s ease-in-out infinite;
}

.pd-hero::before{
    top:-120px;
    left:-100px;
}

.pd-hero::after{
    top:60px;
    right:-120px;
    background:radial-gradient(circle,var(--pd-accent-2) 0%,transparent 70%);
    animation-delay:-4s;
}

@keyframes pdBlobDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(30px,20px) scale(1.15); }
}

/* Signature project photo behind the hero, clearly visible + Ken Burns drift.
   Each theme points at the same image used for that project's card
   on projects.html, so the two pages feel connected. */
.pd-hero-bg{
    position:absolute;
    inset:0;
    z-index:-3;
    background-size:cover;
    background-position:center;
    opacity:.6;
    filter:saturate(1.15) contrast(1.05);
    animation:pdKenBurns 16s ease-in-out infinite alternate;
}

.pd-hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-page) 18%, transparent) 0%, color-mix(in srgb, var(--bg-page) 55%, transparent) 55%, var(--bg-page) 92%),
        linear-gradient(120deg, color-mix(in srgb, var(--pd-accent) 45%, transparent), transparent 70%);
}

body.pd-doctor .pd-hero-bg{
    background-image:url('https://images.unsplash.com/photo-1758691461957-474a7686e388?w=1600&q=80');
}

body.pd-blood .pd-hero-bg{
    background-image:url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1600&q=80');
}

body.pd-portfolio .pd-hero-bg{
    background-image:url('https://images.unsplash.com/photo-1517134191118-9d595e4c8c2b?w=1600&q=80');
}

@keyframes pdKenBurns{
    0%{ transform:scale(1) translate(0,0); }
    100%{ transform:scale(1.13) translate(-1.5%,-1%); }
}

/* Faint dot-grid texture for extra polish */
.pd-hero-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    background-image:radial-gradient(circle,color-mix(in srgb, var(--pd-accent) 35%, transparent) 1.4px,transparent 1.4px);
    background-size:26px 26px;
    opacity:.25;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 40%,transparent 100%);
}

.pd-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#fff;
    background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2));
    box-shadow:0 10px 24px -6px color-mix(in srgb, var(--pd-accent) 60%, transparent);
    margin-bottom:22px;
    animation:pdFloat 3s ease-in-out infinite;
}

.pd-hero h1{
    font-family:'Unbounded',sans-serif;
    font-size:clamp(32px,5vw,56px);
    font-weight:800;
    line-height:1.15;
    color:var(--text-main);
    margin-bottom:18px;
}

.pd-hero h1 span{
    background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2),var(--pd-accent));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:pdGradientText 4s linear infinite;
}

.pd-tagline{
    max-width:640px;
    margin:0 auto 34px;
    color:var(--text-muted);
    font-size:17px;
    line-height:1.7;
}

/* ---------- quick-facts strip ---------- */
.pd-facts{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-bottom:38px;
}

.pd-fact{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    border-radius:14px;
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    font-size:13.5px;
    color:var(--text-muted);
    backdrop-filter:blur(6px);
}

.pd-fact i{
    color:var(--pd-accent);
    font-size:15px;
}

.pd-fact strong{
    color:var(--text-main);
    font-weight:700;
}

.pd-hero-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
}

.pd-github-btn,
.pd-back-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    border-radius:50px;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease;
}

.pd-github-btn{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(90deg,#181818,#2b2b2b);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 30px -8px rgba(0,0,0,.55);
}

.pd-github-btn i{
    font-size:19px;
    position:relative;
    z-index:2;
}

.pd-github-btn span{
    position:relative;
    z-index:2;
}

.pd-github-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-60%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    animation:pdShine 3s ease-in-out infinite;
}

.pd-github-btn:hover{
    transform:translateY(-5px) scale(1.04);
    box-shadow:0 20px 40px -6px rgba(0,0,0,.6),0 0 0 3px color-mix(in srgb, var(--pd-accent) 50%, transparent);
}

.pd-back-btn{
    color:var(--text-main);
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
}

.pd-back-btn:hover{
    transform:translateY(-5px);
    background:var(--pd-accent);
    color:#fff;
    box-shadow:0 14px 28px -8px color-mix(in srgb, var(--pd-accent) 55%, transparent);
}

@keyframes pdShine{
    0%{ left:-60%; }
    45%{ left:130%; }
    100%{ left:130%; }
}

@keyframes pdFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-5px); }
}

@keyframes pdGradientText{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.pd-section{
    max-width:1000px;
    margin:0 auto;
    padding:60px 24px;
    opacity:0;
    transform:translateY(36px);
    transition:opacity .8s ease, transform .8s ease;
}

.pd-section.pd-in-view{
    opacity:1;
    transform:translateY(0);
}

.pd-section:nth-of-type(even){
    background:var(--bg-alt);
}

.pd-section-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:8px;
}

.pd-section-icon{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    color:#fff;
    background:linear-gradient(135deg,var(--pd-accent),var(--pd-accent-2));
    box-shadow:0 10px 22px -8px color-mix(in srgb, var(--pd-accent) 55%, transparent);
}

.pd-section h2{
    font-family:'Unbounded',sans-serif;
    font-size:clamp(22px,3vw,30px);
    color:var(--text-main);
}

.pd-section-sub{
    width:56px;
    height:5px;
    border-radius:6px;
    background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2));
    margin:0 0 26px 64px;
}

.pd-section p{
    color:var(--text-muted);
    font-size:16px;
    line-height:1.85;
    max-width:760px;
}

/* ---------- Overview / Why cards ---------- */
.pd-info-card{
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    border-radius:var(--pd-radius);
    padding:32px;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 40px -20px var(--shadow-color);
}

.pd-info-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg,var(--pd-accent),var(--pd-accent-2));
}

.pd-info-card::after{
    content:'\201D';
    position:absolute;
    top:-30px;
    right:20px;
    font-family:Georgia,serif;
    font-size:160px;
    line-height:1;
    color:var(--pd-accent);
    opacity:.08;
    pointer-events:none;
}

/* ============================================================
   "STAND OUT" SECTIONS — bigger kicker + heading treatment for
   Challenges and Market Edge, so they read as a highlight, not
   another plain paragraph block
   ============================================================ */
.pd-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--pd-accent);
    margin-bottom:10px;
}

.pd-kicker::before{
    content:'';
    width:26px;
    height:3px;
    border-radius:4px;
    background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2));
    animation:pdKickerPulse 2.4s ease-in-out infinite;
}

@keyframes pdKickerPulse{
    0%,100%{ width:26px; opacity:1; }
    50%{ width:44px; opacity:.6; }
}

.pd-standout-head h2{
    font-size:clamp(26px,3.6vw,38px) !important;
    line-height:1.2;
}

.pd-standout-head .pd-section-icon{
    animation:pdFloat 2.6s ease-in-out infinite;
}

/* ============================================================
   CHALLENGES CARD — reuses .pd-info-card look, adds a small
   "lived experience" ribbon in the corner
   ============================================================ */
.pd-challenge-card{
    position:relative;
}

.pd-challenge-card p{
    font-size:17px;
}

.pd-challenge-card .pd-ribbon{
    position:absolute;
    top:18px;
    right:20px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 14px;
    border-radius:50px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#fff;
    background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2));
    box-shadow:0 0 0 0 color-mix(in srgb, var(--pd-accent) 55%, transparent);
    animation:pdRibbonGlow 2.2s ease-in-out infinite;
    z-index:1;
}

@keyframes pdRibbonGlow{
    0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--pd-accent) 45%, transparent); }
    50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--pd-accent) 0%, transparent); }
}

/* ============================================================
   MARKET-EDGE LIST — what makes this build stand out
   ============================================================ */
.pd-edge-list{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.pd-edge-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:linear-gradient(135deg,color-mix(in srgb, var(--pd-accent) 9%, var(--card-bg-alt)),var(--card-bg-alt));
    border:1px solid var(--border-color-2);
    border-radius:16px;
    padding:22px 24px;
    color:var(--text-main);
    font-size:15.5px;
    font-weight:500;
    line-height:1.65;
    opacity:0;
    transform:translateY(20px);
    transition:transform .4s cubic-bezier(.2,.8,.3,1.2), box-shadow .4s ease, border-color .4s ease, opacity .5s ease;
}

.pd-in-view .pd-edge-list li{
    opacity:1;
    transform:translateY(0);
}

.pd-edge-list li:nth-child(1){ transition-delay:.05s; }
.pd-edge-list li:nth-child(2){ transition-delay:.15s; }
.pd-edge-list li:nth-child(3){ transition-delay:.25s; }
.pd-edge-list li:nth-child(4){ transition-delay:.35s; }

.pd-edge-list li:hover{
    transform:translateY(-8px) scale(1.02);
    border-color:color-mix(in srgb, var(--pd-accent-2) 55%, transparent);
    box-shadow:0 20px 38px -16px color-mix(in srgb, var(--pd-accent-2) 45%, transparent);
}

.pd-edge-list li i{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--pd-accent-2),var(--pd-accent));
    color:#fff;
    font-size:15px;
    margin-top:2px;
    animation:pdFloat 3s ease-in-out infinite;
    transition:transform .35s ease;
}

.pd-edge-list li:nth-child(odd) i{ animation-delay:0s; }
.pd-edge-list li:nth-child(even) i{ animation-delay:-1.5s; }

.pd-edge-list li:hover i{
    animation-play-state:paused;
    transform:scale(1.2) rotate(10deg);
}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.pd-feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

.pd-feature-card{
    position:relative;
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    border-radius:var(--pd-radius);
    padding:30px 26px;
    transition:transform .4s cubic-bezier(.2,.8,.3,1.2), box-shadow .4s ease, border-color .4s ease, opacity .5s ease;
    opacity:0;
    transform:translateY(24px);
}

.pd-in-view .pd-feature-card{
    opacity:1;
    transform:translateY(0);
}

.pd-feature-grid .pd-feature-card:nth-child(1){ transition-delay:.05s; }
.pd-feature-grid .pd-feature-card:nth-child(2){ transition-delay:.15s; }
.pd-feature-grid .pd-feature-card:nth-child(3){ transition-delay:.25s; }
.pd-feature-grid .pd-feature-card:nth-child(4){ transition-delay:.35s; }
.pd-feature-grid .pd-feature-card:nth-child(5){ transition-delay:.45s; }
.pd-feature-grid .pd-feature-card:nth-child(6){ transition-delay:.55s; }

.pd-feature-card:hover{
    transform:translateY(-10px) rotate(-.5deg);
    border-color:color-mix(in srgb, var(--pd-accent) 50%, transparent);
    box-shadow:0 24px 46px -14px color-mix(in srgb, var(--pd-accent) 40%, transparent);
}

.pd-feature-tag{
    position:absolute;
    top:18px;
    right:20px;
    font-family:'Unbounded',sans-serif;
    font-size:26px;
    font-weight:800;
    color:color-mix(in srgb, var(--pd-accent) 25%, transparent);
    user-select:none;
}

.pd-feature-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    background:linear-gradient(135deg,var(--pd-accent),var(--pd-accent-2));
    margin-bottom:18px;
    transition:transform .4s ease;
}

.pd-feature-card:hover .pd-feature-icon{
    transform:scale(1.12) rotate(8deg);
}

.pd-feature-card h3{
    font-size:17px;
    color:var(--text-main);
    margin-bottom:8px;
}

.pd-feature-card p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--text-muted);
}

/* ============================================================
   TOOLS / TECH STACK CHIPS
   ============================================================ */
.pd-stack-grid{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.pd-stack-chip{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    border-radius:16px;
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    font-weight:600;
    color:var(--text-main);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor:default;
    animation:pdChipFloat 3.4s ease-in-out infinite;
}

.pd-stack-grid .pd-stack-chip:nth-child(odd){ animation-delay:0s; }
.pd-stack-grid .pd-stack-chip:nth-child(even){ animation-delay:-1.7s; }

@keyframes pdChipFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
}

.pd-stack-chip i{
    font-size:22px;
    color:var(--pd-accent);
    transition:transform .4s ease;
}

.pd-stack-chip:hover{
    animation-play-state:paused;
    transform:translateY(-8px) scale(1.06);
    border-color:color-mix(in srgb, var(--pd-accent) 55%, transparent);
    box-shadow:0 18px 34px -10px color-mix(in srgb, var(--pd-accent) 45%, transparent);
}

.pd-stack-chip:hover i{
    transform:rotate(-12deg) scale(1.25);
}

/* ============================================================
   WHAT-I-LEARNED — checklist
   ============================================================ */
.pd-learn-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.pd-learn-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    border-radius:16px;
    padding:18px 22px;
    color:var(--text-muted);
    font-size:15px;
    line-height:1.6;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.pd-learn-list li:hover{
    transform:translateX(10px);
    border-color:color-mix(in srgb, var(--pd-accent) 50%, transparent);
    box-shadow:0 14px 28px -14px color-mix(in srgb, var(--pd-accent) 40%, transparent);
}

.pd-learn-list li i{
    flex-shrink:0;
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--pd-accent),var(--pd-accent-2));
    color:#fff;
    font-size:13px;
    margin-top:2px;
    transition:transform .3s ease;
}

.pd-learn-list li:hover i{
    transform:scale(1.2) rotate(-10deg);
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.pd-cta{
    position:relative;
    overflow:hidden;
    max-width:1000px;
    margin:20px auto 90px;
    padding:56px 30px;
    text-align:center;
    border-radius:28px;
    background:linear-gradient(135deg,color-mix(in srgb, var(--pd-accent) 20%, transparent),color-mix(in srgb, var(--pd-accent-2) 12%, transparent));
    border:1px solid color-mix(in srgb, var(--pd-accent) 30%, transparent);
}

.pd-cta::before{
    content:'';
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle,var(--pd-accent) 0%,transparent 70%);
    opacity:.25;
    filter:blur(50px);
    top:-100px;
    left:-60px;
    animation:pdBlobDrift 8s ease-in-out infinite;
}

.pd-cta::after{
    content:'';
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle,var(--pd-accent-2) 0%,transparent 70%);
    opacity:.25;
    filter:blur(50px);
    bottom:-100px;
    right:-60px;
    animation:pdBlobDrift 8s ease-in-out infinite reverse;
}

.pd-cta h2{
    position:relative;
    z-index:1;
    font-family:'Unbounded',sans-serif;
    font-size:clamp(22px,3vw,30px);
    color:var(--text-main);
    margin-bottom:12px;
}

.pd-cta p{
    position:relative;
    z-index:1;
    color:var(--text-muted);
    margin-bottom:26px;
}

.pd-github-btn-lg{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 38px;
    border-radius:50px;
    font-weight:700;
    font-size:16px;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-2),var(--pd-accent));
    background-size:200% auto;
    box-shadow:0 18px 36px -10px color-mix(in srgb, var(--pd-accent) 55%, transparent);
    animation:pdGradientText 4s linear infinite, pdFloat 2.6s ease-in-out infinite;
    transition:box-shadow .3s ease;
}

.pd-github-btn-lg:hover{
    animation-play-state:paused;
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 24px 46px -8px color-mix(in srgb, var(--pd-accent) 65%, transparent);
}

/* ============================================================
   THEME-SPECIFIC SIGNATURE TOUCHES
   ============================================================ */
body.pd-doctor .pd-badge i{
    animation:pdHeartbeat 1.6s ease-in-out infinite;
}

@keyframes pdHeartbeat{
    0%,100%{ transform:scale(1); }
    15%{ transform:scale(1.3); }
    30%{ transform:scale(1); }
    45%{ transform:scale(1.2); }
    60%{ transform:scale(1); }
}

body.pd-blood .pd-badge i{
    animation:pdDrop 1.8s ease-in-out infinite;
}

@keyframes pdDrop{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(4px); }
}

body.pd-portfolio .pd-feature-card:hover{
    border-image:linear-gradient(120deg,#7b2ff7,#ff6ec7,#3ee6c4,#7b2ff7) 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
    .pd-hero{ padding:120px 6% 50px; }
    .pd-section{ padding:44px 18px; }
    .pd-hero-actions{ flex-direction:column; align-items:stretch; }
    .pd-stack-grid{ justify-content:center; }
    .pd-section-sub{ margin-left:0; }
    .pd-challenge-card .pd-ribbon{ position:static; display:inline-flex; margin-bottom:14px; }
}