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

/* Hero onload animation */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-item {
    opacity: 0;
    animation: heroFadeUp 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

/* Scroll Reveal Base State */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--delay, 0ms);
}

/* Active State when in Viewport */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* iOS-style glass morphism nav — mobile only */
.nav-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    padding-top: env(safe-area-inset-top);
}

@media (min-width: 768px) {
    .nav-glass {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        padding-top: 0;
    }
}

/* Active nav link highlight */
.nav-link.active-link {
    color: #0d9488;
}

/* Custom Selection Color */
::selection {
    background: #f0fdfa;
    color: #115e59;
}

/* Gradient Flow Button */
.btn-gradient-flow {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    background-color: white;
    color: #0d9488;
    font-weight: 700;
    transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-gradient-flow::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(135deg, #0d9488, #00ff6a, #0d9488, #00ff6a);
    background-size: 300% 300%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    animation: flowGradient 10s ease infinite;
}

.btn-gradient-flow:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(13, 148, 136, 0.4);
}

.btn-gradient-flow:hover::before {
    opacity: 1;
}

.btn-gradient-flow:active {
    transform: translateY(0);
}

@keyframes flowGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Barlow display heading treatment */
h1, h2 {
    letter-spacing: -0.025em;
}

/* Prevent tight line-height from clipping cycling word */
h1 {
    overflow: visible;
}

/* Cycling word flip animation */
@keyframes wordFlipOut {
    0%   { opacity: 1; transform: translateY(0) rotateX(0deg); }
    100% { opacity: 0; transform: translateY(-40%) rotateX(30deg); }
}

@keyframes wordFlipIn {
    0%   { opacity: 0; transform: translateY(40%) rotateX(-30deg); }
    100% { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

#cycling-word,
#cycling-role,
#cycling-service {
    display: inline-block;
    transform-origin: center center;
    perspective: 400px;
    padding-bottom: 0.25em;
    margin-bottom: -0.25em;
    overflow: visible;
}

#cycling-word.flip-out,
#cycling-role.flip-out,
#cycling-service.flip-out {
    animation: wordFlipOut 0.55s cubic-bezier(0.4, 0, 1, 1) forwards;
}

#cycling-word.flip-in,
#cycling-role.flip-in,
#cycling-service.flip-in {
    animation: wordFlipIn 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* Innovo brand accent */
.text-gradient-innovo {
    color: #00ff6a;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-item {
        opacity: 1;
        animation: none;
    }

    .btn-gradient-flow {
        transition: none;
    }

    .btn-gradient-flow::before {
        animation: none;
    }

}

.mono {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}

.label-mono {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
}

.log-row { transition: background-color .25s; }
.log-row:hover { background: #f8fafc; }
.log-row:hover .row-arrow { transform: translateX(6px); color: #0d9488; }
.row-arrow { transition: transform .25s, color .25s; }

.service-row { transition: background-color .2s; }
.service-row:hover { background: #f8fafc; }

.log-row.live { background: #134e4a; }
.log-row.live:hover { background: #0f3d3a; }
.log-row.live:hover .row-arrow { transform: translateX(6px); color: #2dd4bf; }

.status-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
    display: inline-block;
    animation: pulse 2.5s ease-in-out infinite;
}
.status-dot.amber {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,0.18);
    animation: none;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
    50%       { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

.tree {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
    font-size: 15px;
    line-height: 1.85;
    color: #475569;
    /* .tree-line rows use white-space: pre for ASCII alignment and can't
       wrap, so on narrow screens they must scroll within this box instead
       of forcing the whole page's layout viewport wider than the device
       (which visibly shrinks/zooms out the entire site on mobile). */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tree-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    white-space: pre;
}
.ln {
    width: 2ch;
    text-align: right;
    margin-right: 5ch;
    color: #cbd5e1;
    user-select: none;
    font-size: 0.8em;
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center;
}
.tree b { font-weight: 600; color: #0f172a; }
.tree-label {
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    display: inline;
}
.tree-label:hover b { opacity: 0.7; }
.tree-label:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 2px;
}
.tree-arrow { color: #0d9488; display: inline-block; width: 1.4ch; transition: opacity 0.15s; font-size: 1.5em; font-weight: 700; line-height: 1; vertical-align: middle; letter-spacing: -0.05em; transform: translateY(-0.1em); }
.tree-branch[data-open="false"] .tree-children { display: none; }
.tree .k-blue  { color: #0d9488; }
.tree .k-green { color: #16a34a; }
.tree .k-amber { color: #d97706; }
.tree .k-red   { color: #dc2626; }

.corner { position: absolute; width: 12px; height: 12px; border: 1px solid #cbd5e1; pointer-events: none; }
.corner.tl { top: -1px; left: -1px;    border-right: none;  border-bottom: none; }
.corner.tr { top: -1px; right: -1px;   border-left: none;   border-bottom: none; }
.corner.bl { bottom: -1px; left: -1px; border-right: none;  border-top: none; }
.corner.br { bottom: -1px; right: -1px; border-left: none;  border-top: none; }
.card-corners:hover > .corner { border-color: #0d9488; }

.card-corners-hover .corner { border-color: transparent; }
.card-corners-hover:hover .corner { border-color: #0d9488; }

.card-corners-hover-gray .corner { border-color: transparent; }
.card-corners-hover-gray:hover .corner { border-color: #94a3b8; }

/* Project type tabs */
.project-tabs-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #f1f5f9;
}

.project-tab {
    font-family: 'Barlow', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #94a3b8;
    background: none;
    border: none;
    border-bottom: 1.5px solid transparent;
    padding: 10px 18px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-bottom-color 0.15s, background 0.15s;
    line-height: 1;
}

.project-tab:hover {
    color: #475569;
}

.project-tab.active {
    color: #0d9488;
    background: none;
    border-bottom: 3px solid #0d9488;
    font-weight: 600;
}

.project-tab:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Hidden log rows (tag filter) */
.log-row[hidden] {
    display: none;
}

/* Section divider labels */
.project-section-label {
    background: rgba(248, 250, 252, 0.6);
}
.project-section-label[hidden] {
    display: none;
}

/* Placeholder rows — unallocated log slots */
.log-row-ph {
    color: #cbd5e1;
    opacity: 0.5;
    pointer-events: none;
}
.log-row-ph[hidden] {
    display: none;
}

/* ── Hero photograph + cinematic scrim ─────────────────────────────── */
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(2,15,20,.92) 0%, rgba(2,15,20,.80) 42%,
        rgba(2,15,20,.45) 70%, rgba(2,15,20,.25) 100%);
}
.hero-scrim-v {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(2,15,20,.75) 0%, rgba(2,15,20,.10) 35%, rgba(2,15,20,.35) 100%);
}
/* The brand grid survives on top of the photo, as a texture */
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 6rem 4rem;
}

/* ── Nav inverts over any .dark-section ────────────────────────────── */
/* Desktop only: below 768px the nav is .nav-glass and already legible. */
@media (min-width: 768px) {
    #navbar .nav-link,
    #navbar .nav-cta,
    #navbar .nav-logo {
        transition: color .35s ease, background-color .35s ease, filter .35s ease;
    }
    body.nav-over-dark #navbar .nav-link { color: #ffffff; }
    body.nav-over-dark #navbar .nav-link:hover { color: #5eead4; }
    body.nav-over-dark #navbar .nav-cta { background: #ffffff; color: #0f172a; box-shadow: none; }
    /* keep the lift + teal glow on hover while the pill is inverted */
    body.nav-over-dark #navbar .nav-cta:hover {
        background: #ffffff; color: #0f172a;
        box-shadow: 0 10px 25px -5px rgba(13, 148, 136, 0.45);
    }
    body.nav-over-dark #navbar .nav-logo { filter: brightness(0) invert(1); }
}