/* Styles extracted from index.html */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}
/* Custom scroll reveal utility */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Hover underline effect */
.hover-underline {
    position: relative;
}
.hover-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.hover-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
/* Grid mask for intro */
.hero-mask {
    clip-path: inset(0 0 100% 0);
    animation: heroReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes heroReveal {
    to { clip-path: inset(0 0 0 0); }
}

/* Force default look: black background + white text globally */
.html-default-bg {
    /* legacy helper - not used directly; prefer utilities. */
}
html, body { background-color: #000 !important; color: #fff !important; }
/* Keep text utilities consistent with Tailwind expectations */
.text-white { color: #fff !important; }
.text-black { color: #000 !important; }
.bg-neutral-50 { background-color: #0b0b0b !important; }
.border-outline { border-color: #1f2937 !important; }

/* Ensure header/nav links are visible on black header */
header a, header a:hover, header .hover-underline { color: #fff !important; }
header .material-symbols-outlined { color: #fff !important; }

/* Animated name (replaces portrait) */
.name-anim { color: #ffffff; }
.name-line { display: block; transform: translateY(24px); opacity: 0; animation: nameLine 800ms cubic-bezier(0.22,1,0.36,1) forwards; }
.name-line:nth-of-type(1) { animation-delay: 200ms; }
.name-line:nth-of-type(2) { animation-delay: 500ms; }
@keyframes nameLine { to { transform: translateY(0); opacity: 1; } }

/* Biography box specific styling */
.bio-box { background-color:#000 !important; color:#fff !important; }

/* Projects grid: 3x3 tiles */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.project-tile {
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 2rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.project-tile h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: #fff; }
.project-tile p { color: #c7c7c7; margin-bottom: 1rem; }
.project-tile a.project-link { color: #9ca3af; font-weight: 700; text-decoration: none; }
.project-tile:hover { transform: translateY(-4px); transition: transform 160ms ease; }

/* Tech stack line inside project tile */
.project-tile .tech-stack { color: #9ca3af; font-size: 0.95rem; margin-bottom: 0.75rem; }
.project-tile .tech-stack span { background: rgba(255,255,255,0.04); padding: 4px 8px; border-radius: 999px; margin-right: 6px; color: #d1d5db; font-weight:600; font-size:0.85rem; }

@media (max-width: 900px) {
    .project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
    .project-grid { grid-template-columns: 1fr; }
}

/* About avatar styling */
.about-figure { background-color: #000; width: 100%; height: 100%; display: block; }
.about-figure img.about-avatar { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }

/* Small utility: screen-reader only (accessible text) */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Skill badges + icons */
.tech-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tech-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.03); color: #e5e7eb; font-weight:600; font-size:0.9rem; }
.tech-badge .badge-label { display: inline-block; }
.tech-badge i { font-size: 1.15rem; line-height: 1; }
.tech-badge .devicon-javascript-plain { transform: translateY(1px); }
.tech-badge .devicon-python-plain { transform: translateY(1px); }

@media (max-width: 520px) {
    .tech-badge { padding: 6px 8px; font-size: 0.85rem; }
}

/* Fallback glyph for skills without Devicon */
.tech-badge .tech-glyph { font-variation-settings: 'FILL' 0, 'wght' 400; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; }
.tech-badge img.tech-icon { width: 1.2rem; height: 1.2rem; display:inline-block; }
.tech-badge img.tech-icon-invert { filter: brightness(0) invert(1); }