/**
 * portfolio.css — Craftsman aesthetic styles for portfolio landing page.
 * Loaded after global.css for cascading specificity.
 * 
 * Contains portfolio-specific component styles that override or extend
 * global.css tokens. Does NOT duplicate color/spacing tokens (defined once in global.css).
 */

/* ===================================================================
   NAVIGATION
   Fixed top bar with frosted glass effect
   =================================================================== */

.navbar {
    position:           fixed;
    top:                0;
    left:               0;
    width:              100%;
    height:             var(--nav-height-desktop);
    background:         rgba(var(--color-black-rgb), 0.95);
    backdrop-filter:    blur(8px);
    z-index:            1000;
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            0 var(--space-lg);
    border-bottom:      none;
}

.navbar-brand {
    font-family:        var(--font-heading);
    font-size:          1.25rem;
    color:              var(--color-copper);
    text-decoration:    none;
}

.navbar-nav {
    display:            flex;
    gap:                var(--space-lg);
    list-style:         none;
    margin:             0;
    padding:            0;
}

.navbar-nav a {
    font-family:        var(--font-body);
    font-size:          1rem;
    color:              var(--color-smoke);
    text-decoration:    none;
    transition:         color 0.2s ease;
}

.navbar-nav a:hover {
    color:              var(--color-copper);
}

.navbar-nav a.active {
    color: var(--color-copper);
    text-decoration: underline;
}

/* ===================================================================
   HERO SECTION
   Full viewport height with background image
   =================================================================== */

.hero {
    min-height:             100vh;
    display:                flex;
    align-items:            center;
    background-image:       url('/assets/hero-backgrounds/hero-bg-desktop.webp');
    background-size:        cover;
    background-position:    center;
    position:               relative;
    opacity:                0;
    transition:             opacity 1.5s ease;
}

.hero.loaded {
    opacity: 1;
}

.hero-content {
    position:       absolute;
    top:            50%;
    left:           5%;
    transform:      translateY(-50%);
    max-width:      35vw;
    z-index:        2;
}

.hero-name {
    font-family:    var(--font-heading);
    font-size:      clamp(1.5rem, 4vw, 2.5rem);
    font-weight:    700;
    color:          var(--color-candlelight);
    line-height:    1.2;
    margin-bottom:  var(--space-md);
}

.hero-beat {
    font-family:    var(--font-heading);
    font-size:      clamp(1.5rem, 4vw, 2.5rem);
    font-weight:    600;
    color:          var(--color-cream);
    line-height:    1.6;
    white-space:    nowrap;
}

/* Hero Static Name (larger, top line) */
.hero-static-name {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 4vw, 2.75rem);
    font-weight:    900;
    color:          var(--color-candlelight);
    line-height:    1.1;
    white-space:    nowrap;
    margin-bottom:  var(--space-sm);
}

/* Hero Static Description (smaller, bottom line) */
.hero-static-desc {
    font-family:    var(--font-heading);
    font-size:      clamp(1.25rem, 3vw, 1.75rem);
    font-weight:    600;
    color:          var(--color-cream);
    line-height:    1.3;
    white-space:    nowrap;
}

/* Static phase container needs extra height */
.hero-phase[data-phase="4"] {
    min-height: 3.5rem;
}

/* ===================================================================
   HERO BEAT ANIMATION
   Phases overlap; JS toggles .active class to cycle visibility
   =================================================================== */

.hero-beats {
    position: relative;
    min-height: 8rem;       /* Space for 2 lines of beat text */
}

.hero-phase {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.hero-phase.active {
    opacity: 1;
    pointer-events: auto;
}

/* Reduced motion — show Beat 1 statically */
@media (prefers-reduced-motion: reduce) {
    .hero-phase {
        transition: none;
        position: relative;
        opacity: 1;
    }

    .hero-phase[data-phase="2"],
    .hero-phase[data-phase="3"],
    .hero-phase[data-phase="4"] {
        display: none;
    }
}

/* Mobile adjustment for beat container */
@media (max-width: 767px) {
    .hero-beats {
        min-height: 6rem;
    }
}

/* ===================================================================
   SECTIONS
   General section styling
   =================================================================== */

section {
    padding-top:    var(--space-xxl);
    padding-bottom: var(--space-xxl);
}

.section-title {
    font-size:      clamp(1.25rem, 3vw, 1.75rem);
    font-weight:    600;
    line-height:    1.3;
    margin-bottom:  var(--space-lg);
}

/* ===================================================================
   PROJECT CARDS — ALTERNATING LAYOUT WITH HOVER EFFECTS
   =================================================================== */

.project-card-wrapper {
    display: flex;
    position: relative;
    margin-bottom: var(--space-xl);
    max-width: 700px;
}

.project-card-wrapper:nth-child(even) {
    justify-content: flex-end;
    margin-left: auto;
}

.project-card-wrapper:nth-child(odd) {
    justify-content: flex-start;
}

.card-link-overlay {
    display: block;
    position: relative;
    z-index: 3;  /* Card content on top */
    width: 100%;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.project-card {
    background: var(--color-dark-brown);
    border: 1px solid var(--color-bronze);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    position: relative;
    transition: border-color 0.3s ease;
}

.project-card-wrapper:hover .card-link-overlay {
    transform: translateY(-4px);
}

/* ===================================================================
   COAL GLOW PULSE — red/orange/yellow cycling, continuous on hover
   =================================================================== */

.project-card-wrapper:hover .project-card {
    animation: coal-glow-pulse 3s ease-in-out infinite;
}

@keyframes coal-glow-pulse {
    0%, 100% {
        box-shadow: 
            0 6px 28px 3px rgba(220, 50, 20, 0.15),
            inset 0 -3px 12px 2px rgba(180, 30, 10, 0.1);
    }
    33% {
        box-shadow: 
            0 6px 32px 5px rgba(255, 140, 0, 0.25),
            inset 0 -3px 14px 2px rgba(220, 60, 20, 0.15);
    }
    66% {
        box-shadow: 
            0 6px 30px 4px rgba(255, 200, 30, 0.2),
            inset 0 -3px 14px 2px rgba(200, 50, 20, 0.12);
    }
}

/* ===================================================================
   CARD CONTENT
   =================================================================== */

.project-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.project-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0;
    color: var(--color-cream);
}

.project-card > p {
    font-size: 1rem;
    color: var(--color-smoke);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.tech-tag {
    background: transparent;
    border: 1px solid var(--color-bronze);
    border-radius: 2px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--color-candlelight);
}

.card-arrow {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: 1.25rem;
    color: var(--color-copper);
    opacity: 0;
    transform: translateX(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-card-wrapper:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ===================================================================
   REDUCED MOTION + MOBILE
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .project-card-wrapper:hover .project-card {
        animation: none;
    }
}

@media (max-width: 767px) {
    .project-card-wrapper {
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    .card-arrow {
        display: none;
    }

    .project-card-wrapper:hover .project-card {
        animation: none;
        box-shadow: none;
    }
}

/* ===================================================================
   BADGE SYSTEM
   Status indicators — forge coal glow underneath
   =================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    white-space: nowrap;
    min-height: 1.5rem;
    line-height: 1.4;
    position: relative;
}

/* Align badges to top of header */
.project-card-header {
    align-items: flex-start;
}

/* Base: In Development — forge coal glow underneath */
.badge--in-development {
    background: transparent;
    border: 1px solid var(--color-copper);
    color: var(--color-copper);
    transition: all 0.3s ease;
}

/* Forge coal glow underneath (hot ember effect) */
.badge--in-development::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(184, 134, 87, 0) 0%,
        rgba(238, 178, 121, 0.5) 50%,
        rgba(184, 134, 87, 0) 100%
    );
    animation: forge-coal-glow 3s ease-in-out infinite;
}

/* Coal glow animation — gentle pulsing heat from below */
@keyframes forge-coal-glow {
    0%, 100% {
        opacity: 0.5;
        filter: blur(1px);
    }
    50% {
        opacity: 1;
        filter: blur(2px);
    }
}

/* HOVER — Triggered by CARD HOVER, refined intensity */
.project-card:hover .badge--in-development {
    border: 1.5px solid var(--color-amber);
    background: rgba(184, 134, 87, 0.1);
    color: var(--color-amber);
}

.project-card:hover .badge--in-development::after {
    height: 3px;
    bottom: -6px;
    left: 5%;
    right: 5%;
    background: linear-gradient(90deg,
        rgba(184, 134, 87, 0) 0%,
        rgba(184, 134, 87, 0.7) 50%,
        rgba(184, 134, 87, 0) 100%
    );
    filter: blur(2px);
}

/* Complete — solid/stable appearance */
.badge--complete {
    background: var(--color-copper);
    border: 1px solid var(--color-copper);
    color: var(--color-black);
}

/* Archived — muted appearance */
.badge--archived {
    background: transparent;
    border: 1px solid var(--color-bronze);
    color: var(--color-smoke);
}

/* Reduced motion — disable all animations */
@media (prefers-reduced-motion: reduce) {
    .badge--in-development::after {
        animation: none;
        opacity: 0.5;
    }

    .project-card:hover .badge--in-development {
        background: transparent;
        border-color: var(--color-copper);
        color: var(--color-copper);
    }

    .project-card:hover .badge--in-development::after {
        height: 2px;
        bottom: -4px;
        left: 15%;
        right: 15%;
        filter: blur(1px);
    }
}

/* ===================================================================
   SECTION INNER WRAPPER
   Centers content with max-width
   =================================================================== */

.section-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ===================================================================
   ABOUT SECTION
   =================================================================== */

.about-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-copper);
    margin-bottom: var(--space-md);
}

.about-bio {
    font-size: 1.125rem;
    color: var(--color-smoke);
    margin-bottom: var(--space-lg);
    max-width: 65ch;
}

/* ===================================================================
   SKILLS SECTION
   Skill pills — text transforms from skill name to years on hover
   =================================================================== */

.skills-section {
    max-width: 65ch;
    margin: var(--space-xl) auto;
}

.skills-intro {
    font-size: 1rem;
    color: var(--color-smoke);
    margin-bottom: var(--space-md);
    font-style: italic;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.skill-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-bronze);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--color-candlelight);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: help;
    position: relative;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.skill-pill:hover {
    border-color: var(--color-copper);
    color: var(--color-copper);
}

/* Default: show skill name, hide experience */
.skill-name {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.skill-exp {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* On hover: fade out skill name, fade in experience */
.skill-pill:hover .skill-name {
    opacity: 0;
    transform: translateY(-5px);
}

.skill-pill:hover .skill-exp {
    opacity: 1;
    transform: translateY(0);
}

/* Focus state for keyboard accessibility */
.skill-pill:focus .skill-name {
    opacity: 0;
    transform: translateY(-5px);
}

.skill-pill:focus .skill-exp {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion — skip animation, always show skill name */
@media (prefers-reduced-motion: reduce) {
    .skill-name,
    .skill-exp {
        transition: none;
    }

    .skill-exp {
        display: none;
    }
}

/* ===================================================================
   PROJECT CARDS
   =================================================================== */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    justify-items: stretch;
}

/* Widen the projects section beyond the 800px section-inner default */
#projects .section-inner {
    max-width: 1100px;
}

/* ===================================================================
   CONTACT SECTION
   =================================================================== */

.contact-inner {
    text-align: center;
}

.contact-text {
    font-size: 1rem;
    color: var(--color-smoke);
    margin-bottom: var(--space-xl);
}

.contact-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

/* ===================================================================
   BUTTONS
   =================================================================== */

.btn {
    display:          inline-block;
    padding:          0.75rem 1.5rem;
    border-radius:    var(--border-radius);
    font-family:      var(--font-body);
    font-size:        1rem;
    text-decoration:  none;
    transition:       all 0.2s ease;
    cursor:           pointer;
}

.btn:focus {
    outline:          2px solid var(--color-cream);
    outline-offset:   2px;
}

.btn-primary {
    background:       var(--color-copper);
    color:            var(--color-black);
    border:           none;
    transform:        translateY(0);
}

.btn-primary:hover {
    filter:           brightness(0.9);
    transform:        translateY(-2px);
    color:            var(--color-black);
}

.btn-secondary {
    background:       transparent;
    border:           1px solid var(--color-copper);
    color:            var(--color-copper);
    transform:        translateY(0);
}

.btn-secondary:hover {
    background:       var(--color-copper);
    transform:        translateY(-2px);
    color:            var(--color-black);
}

/* ===================================================================
   FOOTER
   3-column grid with bronze divider and anvil logo
   =================================================================== */

.site-footer-craftsman {
    background: var(--color-black);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-bronze);
    position: relative;
}

/* Bronze divider with anvil breaking through */
.footer-divider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-bronze);
    overflow: visible;
}

.footer-anvil-logo {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: auto;
    z-index: 1;
}

.footer-anvil-logo img {
    display: block;
    width: 3rem;
    height: auto;
}

/* 3-column grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
    align-items: center;
}

/* Left column: reserved/empty */
.footer-left {
    /* Reserved for future branding use */
}

/* Center column: Email + Social links */
.footer-center {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    align-items: center;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-copper);
    font-size: 1.125rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-amber);
}

.footer-link svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 0.5px; /* Regular 0.5px stroke per spec */
}

/* Right column: Legal/Copyright */
.footer-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-right span {
    color: var(--color-smoke);
    font-size: 0.875rem;
}

/* ===================================================================
   RESPONSIVE FOOTER (Mobile)
   Stack vertically, center alignment
   =================================================================== */

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-lg);
    }

    .footer-left {
        /* Empty on mobile too */
    }

    .footer-center {
        display: flex;
        justify-content: center;
        gap: var(--space-md);  /* Reduced from lg for tighter icon spacing */
        align-items: center;
    }

    .footer-link {
        justify-content: center;
    }

    .footer-right {
        justify-content: center;
    }

    .footer-anvil-logo {
        width: 2.5rem;
        top: -1.25rem;
    }
}

/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* Tablet */
@media (max-width: 1199px) {
    .hero-content {
        left: 5%;
        max-width: 45vw;
    }

    .hero-static-name {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    }

    .hero-static-desc {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
    }

    .projects-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .navbar {
        height: var(--nav-height-mobile);
    }

    .hero {
        min-height:     100vh;
        align-items:    flex-start;
        padding-top:    calc(var(--nav-height-mobile) + var(--space-lg));
    }

    .hero-content {
        left: 5%;
        max-width: 90%;
    }

    .hero-beat {
        white-space: normal;
    }

    .hero-static-name,
    .hero-static-desc {
        white-space: normal;
        text-align: center;
    }

    .hero-static-name {
        font-size: clamp(1.25rem, 4vw, 1.75rem);
    }

    .hero-static-desc {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }

    .hero-phase[data-phase="4"] {
        min-height: auto;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding-top:    var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}

/* ===================================================================
   MOBILE NAVIGATION
   Hamburger menu + full-screen overlay
   =================================================================== */

/* Hamburger icon button */
.hamburger-btn {
    display:    none;
    background: transparent;
    border:     none;
    cursor:     pointer;
    padding:    0.5rem;
    z-index:    1001;
}

.hamburger-btn span{
    display:        block;
    width:          25px;
    height:         3px;
    background:     var(--color-copper);
    margin:         5px 0;
    border-radius:  2px;
    transition:     all 0.3s ease;
}

/* Full-screen overlay menu */
.mobile-menu-overlay {
    display:            flex;
    visibility:         hidden;
    pointer-events:     none;
    position:           fixed;
    top:                0;
    left:               0;
    width:              100%;
    height:             100vh;
    background:         rgba(var(--color-black-rgb), 0.95);
    backdrop-filter:    blur(8px);
    z-index:            1000;
    flex-direction:     column;
    justify-content:    center;
    align-items:        center;
    gap:                2rem;
    opacity:            0;
    transform:          translateX(-100%);
    transition:         opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    visibility:         visible;
    pointer-events:     auto;
    opacity:            1;
    transform:          translateX(0);
}

.mobile-menu-overlay nav {
    display:          flex;
    flex-direction:   column;
    gap:              2rem;
    width:            100%;
    max-width:        400px;
    padding:          0 2rem;
}

.mobile-menu-overlay a {
    font-family:      var(--font-body);
    font-size:        1.75rem;
    color:            var(--color-smoke);
    text-decoration:  none;
    padding:          1.5rem;
    text-align:       center;
    border-radius:    var(--border-radius);
    transition:       all 0.2s ease;
}

.mobile-menu-overlay a:hover {
    color:            var(--color-copper);
    background:       rgba(var(--color-black-rgb), 0.2);
}

/* Close button */
.close-menu-btn {
    position:           absolute;
    top:                1rem;
    right:              1rem;
    background:         transparent;
    border:             none;
    font-size:          2rem;
    color:              var(--color-copper);
    cursor:             pointer;
    z-index:            1001;
}

/* Mobile media query extension */
@media (max-width: 767px) {
    .navbar-nav {
        display: none;
    }

    .hamburger-btn {
        display: block;
    }
}

/* ===================================================================
   SCROLL FADE-IN ANIMATION
   Sections fade from opacity 0.3 → 0.9 with upward slide
   =================================================================== */

.scroll-fade {
    opacity: 0.3;
    transform: translateY(15px);
    transition: opacity 1.4s cubic-bezier(0.2, 0.6, 0.3, 1),
                transform 1.4s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.scroll-fade.visible {
    opacity: 0.9;
    transform: translateY(0);
}

/* Reduced motion — skip animation, content visible */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade {
        transition: none;
        opacity: 1;
        transform: none;
    }
}