/* ============================================================
   FREELANCE DEV SITE — CUSTOM STYLES
   Palette, fonts, and bespoke components. Layout utilities
   (flex/grid/spacing) stay in Tailwind classes in the Blade.
   ============================================================ */

:root {
    --bg: #0a0e12;
    --surface: #11171d;
    --surface-2: #161e26;
    --border: #232d37;
    --text: #e6edf3;
    --muted: #8b98a5;
    --accent: #4ee1a0;      /* green */
    --accent-dim: #2c8f63;
    --blue: #6cb6ff;
}

/* ---------- Self-hosted fonts ----------
   Download woff2 files into public/fonts/:
     space-grotesk-regular.woff2
     space-grotesk-medium.woff2
     space-grotesk-semibold.woff2
     space-grotesk-bold.woff2
     jetbrains-mono-regular.woff2
     jetbrains-mono-medium.woff2
     jetbrains-mono-bold.woff2
   Both are SIL Open Font License — free to self-host.
------------------------------------------------------------*/
@font-face {
    font-family: 'Space Grotesk';
    src: url('{{ asset("fonts/space-grotesk-regular.woff2") }}') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('{{ asset("fonts/space-grotesk-medium.woff2") }}') format('woff2');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('{{ asset("fonts/space-grotesk-semibold.woff2") }}') format('woff2');
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('{{ asset("fonts/space-grotesk-bold.woff2") }}') format('woff2');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('{{ asset("fonts/jetbrains-mono-regular.woff2") }}') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('{{ asset("fonts/jetbrains-mono-medium.woff2") }}') format('woff2');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('{{ asset("fonts/jetbrains-mono-bold.woff2") }}') format('woff2');
    font-weight: 700; font-display: swap;
}

/* ---------- Base ---------- */
body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}
.mono { font-family: 'JetBrains Mono', monospace; }
::selection { background: var(--accent); color: #06231a; }
html { scroll-behavior: smooth; }

/* ---------- Ambient background ---------- */
.ambient-grid {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.15;
    mask-image: radial-gradient(circle at 50% 0%, black, transparent 75%);
}
.ambient-glow {
    position: fixed; z-index: -1; width: 60vw; height: 60vw;
    top: -20vw; right: -15vw; filter: blur(20px);
    background: radial-gradient(circle, rgba(78,225,160,0.10), transparent 60%);
}

/* ---------- Nav underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
    content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0;
    background: var(--accent); transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-dim);
    box-shadow: 0 20px 40px -20px rgba(78,225,160,0.25);
}

/* ---------- Tags / chips ---------- */
.tag {
    font-family:'JetBrains Mono',monospace; font-size:.72rem;
    padding:.25rem .55rem; border:1px solid var(--border); border-radius:6px;
    color:var(--muted); background:var(--surface-2);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--accent); color:#06231a; font-weight:600;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(78,225,160,0.6); }
.btn-ghost { border:1px solid var(--border); color:var(--text); transition:border-color .2s ease, background .2s ease; }
.btn-ghost:hover { border-color: var(--accent); background: rgba(78,225,160,0.06); }

/* ---------- Terminal ---------- */
.terminal {
    background:#0c1116; border:1px solid var(--border); border-radius:12px;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8);
}
.cursor-terminal { display:inline-block; width:9px; height:1.05em; background:var(--accent); vertical-align:text-bottom; animation: pulse 2s infinite; }
@keyframes pulse {50% {opacity: 0.5;}}

/* ---------- Skill bars ---------- */
.skill-bar { height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.skill-fill { height:100%; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); width:0; transition:width 1.2s cubic-bezier(.2,.7,.2,1); }

/* ---------- Section numbering ---------- */
.section-num { font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:.85rem; letter-spacing:.1em; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Globe container ---------- */
#globe-container canvas { outline: none; }

.fade-in {
    animation: fade 0.6s ease 0s forwards;
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fade-out {
    animation: fadeOut 0.6s ease 0s forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.reveal-in { opacity: 0; animation: revealIn 0.7s ease 0s forwards; }

@keyframes revealIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.case-study-desc a{color:#4ee1a0;text-decoration:none;border-bottom:1px dotted rgba(78,225,160,.4)}
.case-study-desc a:hover{text-decoration:underline}

.about-link a{color:#4ee1a0;text-decoration:none;border-bottom:1px dotted rgba(78,225,160,.4)}
.about-link a:hover{text-decoration:underline}

.intro-link {text-decoration:none;border-bottom:1px dotted;}
.intro-link:hover{text-decoration:underline}

/* The hover card. */
.map-card{position:absolute;top:0;left:0;z-index:5;pointer-events:none;max-width:150px;border-radius:6px;
padding:10px 10px 10px 10px;font:12px/1.5 var(--font-mono);color:#fff;background:rgba(0,0,0,.2);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
display:flex;flex-direction:row;align-items:flex-start}
.map-card[hidden]{display:none}
.map-card .map-card-icon{padding:4px 8px 0 8px;flex:none;width:32px;color:#fff}
.map-card .map-card-icon svg{display:block;width:16px;height:16px;fill:currentColor}
.map-card .map-card-icon svg[hidden]{display:none}
.map-card .map-card-icon .map-card-region{width:24px;height:24px;margin-top:-4px}
.map-card .map-card-header{font-size:16px;line-height:1.5;color:#fff}
.map-card .map-card-body{color:#959da5;white-space:pre-line}