/* common styles */

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

/* Logo stroke animation */
.logo-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.logo-animated .logo-line {
    animation: drawLine 1.2s ease forwards;
}

.logo-animated .l1 {
    animation-delay: 0s;
}

.logo-animated .l2 {
    animation-delay: .15s;
}

.logo-animated .l3 {
    animation-delay: .3s;
}

.logo-animated .l4 {
    animation-delay: .45s;
}

.logo-animated .l5 {
    animation-delay: .6s;
}

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: .1s;
}

.delay-2 {
    transition-delay: .2s;
}

.delay-3 {
    transition-delay: .3s;
}

/* Ticker */
.ticker-track {
    animation: ticker 30s linear infinite;
    white-space: nowrap;
}

.ticker-track:hover {
    animation-play-state: paused;
}

/* Smooth theme transition (bg + border only, not transforms) */
body,
header,
section,
footer,
div,
p,
h1,
h2,
h3,
h4,
span,
a,
button,
ul,
li,
nav {
    transition: background-color .25s ease, border-color .25s ease, color .15s ease, box-shadow .25s ease;
}

/* additional styles from services.html */

[id] {
    scroll-margin-top: 100px;
}

.mesh-bg {
    background: radial-gradient(circle at 80% 20%, rgba(232, 118, 26, 0.08), transparent 35%),
        radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.05), transparent 35%),
        #04091a;
}

.gal-card .info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(4, 9, 26, 0.95), transparent);
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 30;
}

.gal-card:hover .info {
    transform: translateY(0);
    opacity: 1;
}

.glow-shadow {
    filter: blur(20px);
    opacity: 0.7;
}

/* ── TABS ──────────────────────────────────────── */
.brand-tab {
    position: relative;
    cursor: pointer;
    transition: color .2s, background .2s;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.brand-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

/* active states */
.tab-orange {
    color: #e8761a !important;
}

.tab-orange::after {
    background: #e8761a;
    transform: scaleX(1);
}

.tab-teal {
    color: #2dd4bf !important;
}

.tab-teal::after {
    background: #2dd4bf;
    transform: scaleX(1);
}

.tab-green {
    color: #22c55e !important;
}

.tab-green::after {
    background: #22c55e;
    transform: scaleX(1);
}

.tab-red {
    color: #ef4444 !important;
}

.tab-red::after {
    background: #ef4444;
    transform: scaleX(1);
}

/* ── PANELS ────────────────────────────────────── */
.panel {
    display: none;
}

.panel.active {
    display: block;
    animation: panelIn .4s cubic-bezier(.22, 1, .36, 1) both;
}

/* ── GALLERY CARD ──────────────────────────────── */
.gal-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    cursor: pointer;
    transition: transform .32s ease, box-shadow .32s ease;
}

.gal-card:hover {
    transform: translateY(-5px) scale(1.012);
}

.gal-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.gal-card:hover img {
    transform: scale(1.07);
}

/* gradient overlay — always visible at bottom */
.gal-card .grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(4, 9, 26, .95) 0%,
            rgba(4, 9, 26, .5) 40%,
            transparent 70%);
    transition: opacity .3s;
}

.gal-card .info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.1rem 1.25rem;
    transform: translateY(4px);
    transition: transform .28s ease;
}

.gal-card:hover .info {
    transform: translateY(0);
}

/* description line — hidden until hover */
.gal-card .desc-line {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .3s ease;
    opacity: 0;
}

.gal-card:hover .desc-line {
    max-height: 60px;
    opacity: 1;
}

/* placeholder (no image yet) */
.gal-placeholder {
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .02) 0px,
            rgba(255, 255, 255, .02) 1px,
            transparent 1px,
            transparent 16px);
}

.gal-placeholder .ph-icon {
    opacity: .18;
}

/* ── BENTO-GRID sizes ──────────────────────────── */
.h-gal-sm {
    height: 220px;
}

.h-gal-md {
    height: 280px;
}

.h-gal-lg {
    height: 360px;
}

/* ── LIGHTBOX ──────────────────────────────────── */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(4, 9, 26, .97);
    backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#lightbox.open {
    display: flex;
    animation: lbIn .28s ease both;
}

#lb-img {
    max-width: min(900px, 100%);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
}

/* ── REVEAL ────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

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

/* ── THEME TRANSITIONS ─────────────────────────── */
body,
header,
section,
footer,
div,
p,
h1,
h2,
h3,
h4,
span,
a,
button,
ul,
li,
nav {
    transition: background-color .25s ease, border-color .25s ease, color .15s ease;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #e8761a;
    border-radius: 2px;
}