/**
 * Featured Projects — Pure CSS
 */

/* ── Section ── */
.sh-fp { padding: 6rem 0; position: relative; overflow: hidden; background: radial-gradient(circle at center, #0f172a 0%, #000 100%); }

/* Decorations */
.sh-fp__noise { position: absolute; inset: 0; opacity: 0.05; pointer-events: none; mix-blend-mode: overlay; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E'); }

.sh-fp__decos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sh-fp__deco-compass { position: absolute; top: -5rem; right: -5rem; width: 37.5rem; height: 37.5rem; color: rgba(255,255,255,0.05); animation: spin 60s linear infinite; }
.sh-fp__deco-grid { position: absolute; top: 5rem; left: -2.5rem; width: 25rem; height: 25rem; color: rgba(255,255,255,0.05); }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sh-fp__border-top, .sh-fp__border-bottom { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent); }
.sh-fp__border-top { top: 0; }
.sh-fp__border-bottom { bottom: 0; }

.sh-fp__spotlight { position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 62.5rem; height: 31.25rem; background: color-mix(in srgb, var(--pi-secondary, #ffb703) 5%, transparent); border-radius: 50%; filter: blur(100px); pointer-events: none; }

/* Container */
.sh-fp__container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; }

/* Header */
.sh-fp__header { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 5rem; text-align: center; }

.sh-fp__header-line { position: absolute; top: 50%; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.2)); display: none; }
@media (min-width: 768px) { .sh-fp__header-line { display: block; width: 6rem; } }
@media (min-width: 768px) { .sh-fp__header-line { width: 12rem; } }
.sh-fp__header-line--left { left: 2.5rem; }
.sh-fp__header-line--right { right: 2.5rem; background: linear-gradient(to left, transparent, rgba(255,255,255,0.2)); }
@media (min-width: 768px) { .sh-fp__header-line--left { left: 10rem; } .sh-fp__header-line--right { right: 10rem; } }

.sh-fp__badge { display: inline-block; padding: 0.25rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--pi-secondary, #ffb703); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.625rem; margin-bottom: 1.25rem; backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
@media (min-width: 768px) { .sh-fp__badge { font-size: 0.75rem; } }

.sh-fp__title { font-size: 2.25rem; font-weight: 900; color: #fff; line-height: 1.15; margin: 0 0 0.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5); }
@media (min-width: 768px) { .sh-fp__title { font-size: 3rem; } }
@media (min-width: 1024px) { .sh-fp__title { font-size: 3.75rem; } }

.sh-fp__title-accent { background: linear-gradient(to right, var(--pi-primary, #007d3d), #fff, var(--pi-secondary, #ffb703)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.sh-fp__subtitle { color: var(--pi-text-muted, #9ca3af); font-weight: 300; font-size: 0.875rem; letter-spacing: 0.025em; max-width: 32rem; margin: 1rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.05); }

/* Marquee */
.sh-fp__marquee-wrap { position: relative; width: 100%; overflow: hidden; margin-bottom: 3rem; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }

.sh-fp__marquee-track { display: flex; flex-wrap: nowrap; width: max-content; gap: 2rem; }

/* Cards */
.sh-fp__card { display: block; width: 85vw; flex-shrink: 0; position: relative; border-radius: 2.5rem; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); text-decoration: none; }
@media (min-width: 768px) { .sh-fp__card { width: 450px; aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .sh-fp__card { width: 480px; } }

.sh-fp__card-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 0.7s, opacity 0.5s; position: absolute; inset: 0; }
.sh-fp__card:hover .sh-fp__card-img { transform: scale(1.05); opacity: 1; }

.sh-fp__card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #000, rgba(0,0,0,0.5), transparent); opacity: 0.9; }

.sh-fp__card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; z-index: 10; }

.sh-fp__card-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }

.sh-fp__card-type { background: color-mix(in srgb, var(--pi-primary, #007d3d) 20%, transparent); color: var(--pi-primary, #007d3d); border: 1px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; backdrop-filter: blur(4px); }

.sh-fp__card-year { color: var(--pi-text-muted, #d1d5db); font-size: 0.875rem; font-weight: 700; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 0.75rem; }

.sh-fp__card-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 0.5rem; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
@media (min-width: 768px) { .sh-fp__card-title { font-size: 1.875rem; } }

.sh-fp__card-location { color: var(--pi-text-muted, #d1d5db); font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.sh-fp__card-loc-icon { width: 1rem; height: 1rem; color: var(--pi-secondary, #ffb703); }
.sh-fp__card-sep { color: var(--pi-text-3, #6b7280); }

/* Text Marquee */
.sh-fp__text-marquee-wrap { position: relative; width: 100%; overflow: hidden; pointer-events: none; margin-top: 2rem; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }

.sh-fp__text-marquee-track { display: flex; flex-wrap: nowrap; width: max-content; gap: 4rem; }

.sh-fp__text-marquee-item { font-size: 3.75rem; font-weight: 900; white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,0.3); }
@media (min-width: 768px) { .sh-fp__text-marquee-item { font-size: 5rem; } }

/* Gold sweep effect */
.sh-fp__text-marquee-item, .gold-sweep-text {
    background: linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,215,0,0.8) 50%, rgba(255,255,255,0) 60%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(255,255,255,0.05);
    -webkit-text-fill-color: transparent;
    animation: goldShine 3s linear infinite;
}

/* Background circles */
.sh-fp__bg-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.sh-fp__bg-circle--lg { width: 80vw; height: 80vw; border: 1px solid rgba(255,255,255,0.05); animation: pulse 10s infinite; }
.sh-fp__bg-circle--sm { width: 60vw; height: 60vw; border: 1px dashed rgba(255,255,255,0.05); animation: spin 120s linear infinite; }

/* Animations (keep from original) */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.animate-marquee { animation: marquee 60s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 50s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

@keyframes goldShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }