/* =================== POPUP (scoped) =================== */

/* animated conic ring */
@property --angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
}

/* ===== Base overlay ===== */
.popup{
    position:fixed; inset:0;
    width:100vw; height:100vh;
    background-color:rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center;
    z-index:10050;                /* sits above header/menu */
}
.popup.hidden{ display:none; }

/* ===== Card ===== */
.popup-content{
    position:relative;
    background:#ffffff; color:#1a1a1a;
    padding:2rem 2rem 1rem;
    border-radius:16px;
    max-width:700px; width:90%;
    max-height:80vh;
    display:flex; flex-direction:column; overflow:hidden;
    text-align:left;
    box-shadow:0 12px 40px rgba(0,0,0,0.3);
    isolation:isolate;
}
/* animated border ring */
.popup-content::before{
    content:"";
    position:absolute; inset:-1px; padding:4px; border-radius:18px;
    background:conic-gradient(from var(--angle), #a24cf1, #00ffaa, #a24cf1);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:spinColors 4s linear infinite;
    filter:drop-shadow(0 0 10px rgba(0,255,170,.25));
    pointer-events:none; z-index:-1;
}
@keyframes spinColors{ to{ --angle:360deg; } }
@media (prefers-reduced-motion:reduce){
    .popup-content::before{ animation:none; }
}

/* ===== Close button ===== */
#popup-close{
    position:absolute; top:10px; right:15px;
    font-size:1.5rem; line-height:1;
    cursor:pointer; color:#0f2b22;
    transition:transform .15s ease, color .15s ease;
}
#popup-close:hover{ transform:scale(1.1); color:#a24cf1; }

/* ===== Scroll area ===== */
#popup-content-container{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; margin-top:1rem; padding-right:1rem;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    position:relative;
}
#popup-content-container::-webkit-scrollbar{ width:8px; }
#popup-content-container::-webkit-scrollbar-thumb{ background:#888; border-radius:4px; }
#popup-content-container::-webkit-scrollbar-thumb:hover{ background:#555; }
/* subtle fade at bottom while scrolling */
#popup-content-container::after{
    content:""; position:sticky; display:block; bottom:-1px; height:32px; margin-top:-32px;
    background:linear-gradient(to bottom, transparent, rgba(255,255,255,.92));
    pointer-events:none;
}

/* ===== Rows ===== */
.project-row{
    display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
    gap:1.25rem; margin-bottom:1rem; padding:1rem;
    background:rgba(255,255,255,.95);
    border:1px solid #d9f3e8; border-radius:14px;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    position:relative;
}
.project-row:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(162,76,241,.5);
    background:rgba(255,255,255,.98);
}
.project-row.reverse{ flex-direction:row-reverse; }
.project-row .dot-line-wrapper{ display:flex; flex-direction:column; align-items:center; width:16px; align-self:stretch; min-height:100%; }

.project-text{ flex:1 1 300px; font-size:1rem; color:#0f2b22; text-align:left; }
.project-text h4{ margin:0 0 .35rem; font-size:1.2rem; color:#0f2b22; font-weight:800; }
.project-text p{ margin:0; font-size:1rem; line-height:1.5; }

/* ===== Media (restored) ===== */
.popup .project-image{ flex:1 1 300px; }
.popup .project-image img,
.popup .project-image video{
    width:100%; max-height:300px; object-fit:cover; border-radius:12px;
    outline:2px solid rgba(0,255,170,.25);
    box-shadow:0 8px 22px rgba(0, 255, 170, 0.2), 0 0 0 1px rgba(0,255,170,.06);
    transition:transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
}
.popup .project-row:hover .project-image img,
.popup .project-row:hover .project-image video{
    transform:translateY(-2px);
    outline-color:rgba(162,76,241,.5);
    box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(162,76,241,.22);
}

/* ===== Timeline accent (scoped) ===== */
.popup .dot-line{
    display:flex; flex-direction:column; align-items:center; width:16px; flex-shrink:0; justify-content:flex-start; min-height:60px;
}
.popup .dot-line::before{
    content:''; width:10px; height:10px; border-radius:50%; background:#a24cf1;
    box-shadow:0 0 8px rgba(162,76,241,.6); margin-bottom:4px; animation:dotPulse 2.4s ease-in-out infinite;
}
.popup .dot-line::after{
    content:''; flex-grow:1; width:2px; background:linear-gradient(to bottom,#a24cf1,#c08df9);
    animation:lineGlow 3.2s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } }
@keyframes lineGlow{ 0%,100%{ box-shadow:0 0 0 rgba(162,76,241,0); } 50%{ box-shadow:0 0 12px rgba(162,76,241,.55); } }

@media (prefers-reduced-motion:reduce){
    #popup-content-container::after,
    .popup .dot-line::before,
    .popup .dot-line::after{ animation:none; }
}

/* ===== Title (old underline style restored & scoped) ===== */
.popup #popup-title{
    --title-indent:1.25rem;      /* text start & dot center */
    --dot-size:12px;             /* dot diameter (for underline start) */
    --line-thickness:3px;        /* underline height */
    --line-gap:8px;              /* distance from text to underline */
    --close-clear:2.25rem;       /* room for the × on the right */

    position:relative;
    margin:-0.25rem var(--close-clear) 1.1rem 0;
    padding-left:var(--title-indent);

    font-size:clamp(1.2rem, 2.2vw, 1.5rem);
    line-height:1.3; font-weight:800; letter-spacing:.3px; color:#0f2b22;

    background:none !important;  /* avoid clipping effects */
    text-wrap:balance;
}
/* underline begins at the dot’s right edge */
.popup #popup-title::after{
    content:"";
    position:absolute;
    left:calc(var(--title-indent) + var(--dot-size) / 2);
    right:var(--close-clear);
    bottom:calc(-1 * var(--line-gap));
    height:var(--line-thickness);
    border-radius:999px;
    background:linear-gradient(90deg, #a24cf1, #00ffaa);
    box-shadow:0 0 6px rgba(162,76,241,.35);
    pointer-events:none;

}

/* ===== Mobile: stack rows top -> down ===== */
@media (max-width: 600px){

    /* Tighter card & scroll area */
    .popup-content{
        width: 94%;
        max-height: 86vh;
        padding: 1rem 1rem .75rem;
        border-radius: 14px;
    }
    #popup-content-container{ padding-right: .5rem; }

    /* Stack each project row vertically */
    .project-row{
        flex-direction: column;        /* image on top, text below */
        align-items: stretch;
        gap: .75rem;
        padding: .9rem;
    }
    .project-row.reverse{            /* neutralize the reverse variant */
        flex-direction: column;
    }

    /* Order + sizing for media/text */
    .popup .project-image{ order: 1; flex: 0 0 auto; }
    .project-text{ order: 2; }

    .popup .project-image img,
    .popup .project-image video{
        width: 100%;
        max-height: 48vh;              /* keep it visible within the modal */
        aspect-ratio: 16 / 9;          /* nice letterbox on tall phones */
        object-fit: cover;
        border-radius: 12px;
    }

    /* Hide the vertical dot-line column on mobile to free space */
    .project-row .dot-line-wrapper{ display: none; }

    /* Touch-friendly titles & spacing */
    .project-text h4{ font-size: 1.1rem; }
    .project-text{ font-size: .98rem; line-height: 1.5; }
}