body {
    font-family: 'Sora', sans-serif;
}

/* ================================== */
/* HERO ENHANCEMENTS                  */
/* ================================== */

/* Gradient hero name */
.hero-gradient-name {
    background: linear-gradient(120deg, #e0e7ff 0%, #a5b4fc 35%, #c084fc 65%, #f0abfc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Aurora radial glow behind hero text */
.hero-aurora {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse at center,
        rgba(99, 102, 241, 0.18) 0%,
        rgba(168, 85, 247, 0.10) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 2;
    animation: aurora-pulse 6s ease-in-out infinite;
}
@keyframes aurora-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* Open to work badge */
.open-to-work-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.otw-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: otw-ping 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes otw-ping {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    60%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

/* Hero stats strip */
.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 72px;
}
.hero-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(120deg, #a5b4fc, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(99, 102, 241, 0.25);
    align-self: center;
}

/* ================================== */
/* PROFILE PHOTO GRADIENT RING        */
/* ================================== */
@keyframes ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.photo-ring-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 9999px;
    padding: 4px;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 300%;
    animation: ring-gradient 4s ease infinite;
}
@keyframes ring-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.photo-ring-wrapper img {
    display: block;
    border-radius: 9999px;
    border: 4px solid #111827;
}

/* ================================== */
/* SPECIALTY CARDS                    */
/* ================================== */
.specialty-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.specialty-card {
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(8px);
}
.specialty-card:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-4px);
}
.specialty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
.specialty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #e0e7ff;
    margin-bottom: 0.4rem;
}
.specialty-card p {
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.55;
}

/* ================================== */
/* PROJECT ORB LABELS                 */
/* ================================== */
/* style.css sets base positioning;   */
/* here we override visuals only      */
.project-label {
    /* Neon badge look */
    color: var(--clr, #a5b4fc) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.85rem !important;
    background: rgba(10, 10, 20, 0.72) !important;
    border: 1px solid var(--clr, #6366f1) !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(6px);
    box-shadow:
        0 0 6px  var(--clr, #6366f1),
        0 0 18px var(--clr, #6366f1) !important;
    text-shadow: 0 0 8px var(--clr, #6366f1);
    pointer-events: none;
    /* Perfectly center the badge on the projected orb position */
    transform: translate(-50%, -50%) !important;
}

/* ================================== */
/* SITE-WIDE FIXED STAR FIELD         */
/* ================================== */

/* Labels must be fixed like the canvas so scroll offset doesn't shift them */
#project-labels {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
}

#three-canvas {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0;
}

/* Hero is fully transparent — stars fully visible */
#home {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Other sections are semi-transparent — stars bleed through subtly */
#about {
    position: relative;
    z-index: 1;
    background-color: rgba(17, 24, 39, 0.84);
}

#referrals {
    position: relative;
    z-index: 1;
    background-color: rgba(17, 24, 39, 0.84);
}

#referral-carousel {
    min-height: 350px;
}

#projects {
    position: relative;
    z-index: 1;
    background-color: rgba(17, 24, 39, 0.88) !important;
}

#contact {
    position: relative;
    z-index: 1;
    background-color: rgba(17, 24, 39, 0.84);
}

footer {
    position: relative;
    z-index: 1;
    background-color: rgba(17, 24, 39, 0.92) !important;
}

/* ================================== */
/* 3D SKILL CLOUD                     */
/* ================================== */
.skill-cloud-container {
    position: relative;
    width: 100%;
    height: 380px;
    cursor: default;
    user-select: none;
    margin-top: 0.5rem;
}

.skill-tag-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.3rem 0.8rem;
    background-color: rgba(55, 65, 81, 0.85);
    border-radius: 9999px;
    white-space: nowrap;
    pointer-events: auto;
    transition: background-color 0.25s ease, color 0.25s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.skill-tag-3d:hover {
    background-color: #4F46E5 !important;
    color: #FFF !important;
    z-index: 100 !important;
}

/* ================================== */
/* CONTACT PILL LINKS                 */
/* ================================== */
.contact-pill {
    display: inline-block;
    padding: 0.5rem 1.4rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.08);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.contact-pill:hover {
    background: rgba(99, 102, 241, 0.22);
    color: #fff;
    border-color: rgba(99, 102, 241, 0.6);
}

/* ================================== */
/* PROJECT CATEGORY BADGE             */
/* ================================== */
.project-category-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    margin-bottom: 0.6rem;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.project-category-badge.ai {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.4);
}

/* ================================== */
/* CARD REVEAL (cross-fade + scale)   */
/* ================================== */
.project-card-wrapper {
    position: relative;
    height: 420px;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    /* Safari: overflow:hidden doesn't clip transformed children without this */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.project-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.project-card-front,
.project-card-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.project-card-front {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #1F2937;
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Back: dramatically different — indigo gradient + accent bar */
.project-card-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(140deg, #1e1b4b 0%, #1F2937 60%);
    border: 1px solid rgba(99, 102, 241, 0.5);
    opacity: 0;
    transform: scale(0.94);
    z-index: 1;
}

/* Accent bar at top of back */
.project-card-back::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 9999px;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.project-card-wrapper:hover .project-card-front {
    opacity: 0;
    transform: scale(1.04);
}

.project-card-wrapper:hover .project-card-back {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
    box-shadow: inset 0 0 40px rgba(99, 102, 241, 0.1);
}

/* Skill badges — gentle float with enough row gap to avoid crowding */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.skill-badge {
    animation: float-gentle 5s ease-in-out infinite !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.82rem !important;
}

.skill-badge:nth-child(2)  { animation-delay: -0.8s !important; }
.skill-badge:nth-child(3)  { animation-delay: -2s !important; }
.skill-badge:nth-child(4)  { animation-delay: -3.2s !important; }
.skill-badge:nth-child(5)  { animation-delay: -1.5s !important; }
.skill-badge:nth-child(6)  { animation-delay: -4s !important; }
.skill-badge:nth-child(7)  { animation-delay: -0.4s !important; }
.skill-badge:nth-child(8)  { animation-delay: -2.8s !important; }
.skill-badge:nth-child(9)  { animation-delay: -1.1s !important; }
.skill-badge:nth-child(10) { animation-delay: -3.6s !important; }
.skill-badge:nth-child(11) { animation-delay: -0.7s !important; }
.skill-badge:nth-child(12) { animation-delay: -2.4s !important; }
.skill-badge:nth-child(13) { animation-delay: -4.5s !important; }
.skill-badge:nth-child(14) { animation-delay: -1.9s !important; }
.skill-badge:nth-child(15) { animation-delay: -3s !important; }
.skill-badge:nth-child(16) { animation-delay: -0.2s !important; }
.skill-badge:nth-child(17) { animation-delay: -2.1s !important; }
.skill-badge:nth-child(18) { animation-delay: -4.8s !important; }
.skill-badge:nth-child(19) { animation-delay: -1.3s !important; }

/* Tech badges: indigo gradient, bold */
.tech-badge {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    display: inline-block;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
}

/* ================================== */
/* SKIP LINK                          */
/* ================================== */
.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 10001;
    padding: 0.5rem 1.25rem;
    background: #4F46E5;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

/* ================================== */
/* TOUCH / COARSE-POINTER: restore    */
/* native cursor, hide custom one     */
/* ================================== */
@media (hover: none), (pointer: coarse) {
    body { cursor: auto !important; }
    .cursor-dot, .cursor-outline { display: none !important; }
}

/* ================================== */
/* CURSOR OUTLINE: smooth CSS trail   */
/* (replaces Web Animations API)      */
/* ================================== */
.cursor-outline {
    transition: opacity 0.3s ease,
                transform 0.3s ease,
                background-color 0.3s ease,
                left 0.1s ease-out,
                top 0.1s ease-out !important;
}

/* ================================== */
/* FOCUS VISIBLE: keyboard ring       */
/* ================================== */
:focus-visible {
    outline: 2px solid #818CF8 !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

/* ================================== */
/* PROGRESSIVE ENHANCEMENT            */
/* animate-on-scroll visible by       */
/* default; JS adds js-hidden first,  */
/* then observer removes it           */
/* ================================== */
.animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
}
/* JS-active: hide before animating in */
.animate-on-scroll.js-hidden {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}
/* Observer fires: reveal with transition */
.animate-on-scroll.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ================================== */
/* REDUCED MOTION                     */
/* ================================== */
@media (prefers-reduced-motion: reduce) {
    .hero-aurora { animation: none !important; }
    .otw-dot {
        animation: none !important;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
    }
    .photo-ring-wrapper { animation: none !important; }
    .skill-badge { animation: none !important; transform: none !important; }
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .typing-cursor { animation: none !important; opacity: 1 !important; }
    .skill-tag-3d { transition: none !important; }
    .project-card-front,
    .project-card-back { transition: none !important; }
    .specialty-card { transition: none !important; }
    .contact-pill { transition: none !important; }
}