/* Base */

:root {
    --bg: #0b0c10;
    --bg-2: #0f1116;
    --text: #ffffff;
    --muted: #c8d0d8;
    --primary: #f77f00;
    /* carrot */
    --accent: #22c55e;
    /* green */
    --glass: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.12);
    --shadow-3d: 0 10px 30px rgba(247, 127, 0, .25), 0 2px 8px rgba(0, 0, 0, .6);
    --h1: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

html,
body {
    height: 100%
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    background: radial-gradient(1200px 800px at 10% -10%, rgba(247, 127, 0, .12), transparent), radial-gradient(1000px 600px at 90% 10%, rgba(34, 197, 94, .10), transparent), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    color: var(--text);
}

.glass-nav {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.brand-3d {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0b0c10;
    font-weight: 900;
    text-shadow: none;
}


/* Scroll progress bar */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 10px rgba(247, 127, 0, .6);
    z-index: 1100;
    pointer-events: none
}


/* Cursor spotlight */

.cursor-spotlight {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    background: radial-gradient(220px 220px at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: screen;
    opacity: .5;
    transition: opacity .2s ease
}

@media (pointer: coarse) {
    .cursor-spotlight {
        display: none
    }
}

.hero-section {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 0
}

.hero-section>.container {
    position: relative;
    z-index: 1
}

.hero-section h1 {
    font-size: var(--h1);
    line-height: 1.15
}

.section-pad {
    padding: 6rem 0
}

.bg-gradient-dark {
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .00));
}

.shadow-3d {
    box-shadow: var(--shadow-3d)
}


/* 3D elements */

[data-tilt] {
    transform-style: preserve-3d
}

.card-3d,
.glass-3d {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.card-3d .card-body,
.glass-3d .card-body {
    transform: translateZ(30px)
}

.pill-3d {
    display: inline-block;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px)
}

.project-thumb {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.project-card {
    overflow: hidden
}


/* World-class 3D gradient + sketch styling for project cards */

.project-card {
    position: relative;
    background: radial-gradient(120% 150% at 0% 0%, rgba(247, 127, 0, .10), transparent 60%), radial-gradient(120% 150% at 100% 100%, rgba(34, 197, 94, .10), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .00));
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}

.project-card::before {
    content: "";
    position: absolute;
    inset: -40% -40% auto auto;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle at 60% 40%, rgba(247, 127, 0, .25), rgba(247, 127, 0, 0));
    filter: blur(30px);
    transform: translateZ(0);
    pointer-events: none;
}

.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 2px, rgba(255, 255, 255, 0) 2px 8px);
    opacity: .35;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .55), 0 10px 30px rgba(247, 127, 0, .25)
}

.project-thumb {
    position: relative;
    overflow: hidden
}

.project-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 60%), conic-gradient(from 180deg at 50% 50%, rgba(247, 127, 0, .18), rgba(34, 197, 94, .14), rgba(247, 127, 0, .18));
    opacity: .35;
    mix-blend-mode: screen;
}


/* 3D scene */

.scene-3d {
    position: relative;
    height: 380px;
    perspective: 1000px
}

.grid-cube {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 260px;
    height: 260px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(247, 127, 0, .18), rgba(34, 197, 94, .12));
    box-shadow: inset 0 0 0 1px var(--border), 0 20px 60px rgba(0, 0, 0, .45);
    transform: rotateX(18deg) rotateY(-24deg) translateZ(0);
}

.grid-sphere {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%), conic-gradient(from 0deg, rgba(247, 127, 0, .75), rgba(34, 197, 94, .65), rgba(247, 127, 0, .75));
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, .45));
    animation: spin 10s linear infinite;
    display: none;
}

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

.orb {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    filter: blur(8px);
    opacity: .8
}

.orb-1 {
    top: 10%;
    left: -5%;
    background: radial-gradient(circle at 30% 30%, rgba(247, 127, 0, .85), transparent 60%)
}

.orb-2 {
    bottom: 0;
    right: -5%;
    background: radial-gradient(circle at 70% 70%, rgba(34, 197, 94, .85), transparent 60%)
}


/* Bubbles */

.bubble-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: .85;
    filter: blur(0.2px);
    will-change: transform
}

.bubble--carrot {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(247, 127, 0, .85), rgba(247, 127, 0, .55))
}

.bubble--green {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(34, 197, 94, .85), rgba(34, 197, 94, .55))
}


/* Parallax */

.parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1
}

.parallax-1 {
    background: radial-gradient(600px 300px at 70% -10%, rgba(247, 127, 0, .12), transparent)
}

.parallax-2 {
    background: radial-gradient(600px 300px at 0% 80%, rgba(34, 197, 94, .10), transparent)
}


/* Tighten spacing between hero and about for a continuous feel */

#about.section-pad {
    padding-top: 3rem
}


/* Forms */

.form-control,
.form-select {
    background: #0e1015;
    border-color: var(--border);
    color: var(--text)
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(247, 127, 0, .20)
}

label {
    font-weight: 600
}


/* Utilities */

.text-secondary {
    color: var(--muted)!important
}


/* Buttons */

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary)
}

.btn-primary:hover {
    background-color: #d96f00;
    border-color: #d96f00
}

.btn-outline-light {
    color: #ffffff;
    border-color: #ffffff
}

.btn-outline-light:hover {
    background-color: #ffffff;
    color: #0b0c10
}


/* Light theme overrides attached to <html> via .theme-light */

.theme-light {
    --bg: #f6f8fb;
    --bg-2: #ffffff;
    --text: #0b1220;
    --muted: #445065;
    --glass: rgba(0, 0, 0, 0.04);
    --border: rgba(0, 0, 0, 0.12);
}

.theme-light body {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    color: var(--text)
}

.theme-light .brand-3d {
    color: #0b0c10
}

.theme-light .text-secondary {
    color: var(--muted)!important
}

.theme-light .form-control,
.theme-light .form-select {
    background: #ffffff;
    color: #0b1220
}

.theme-light .navbar.navbar-dark {
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35));
}

@media (max-width: 992px) {
    .section-pad {
        padding: 4rem 0
    }
    .scene-3d {
        height: 280px
    }
}

@media (max-width: 576px) {
    .d-flex.gap-3>.btn {
        width: 100%
    }
    .grid-cube {
        display: none
    }
    .grid-sphere {
        display: block
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none!important;
        transition: none!important
    }
}