/* ============================================================
   TLP GROUP — "Blackheath Brass" design system
   Dark architectural theme, cinematic motion.
   ============================================================ */

:root {
    --bg: #0b0b0d;
    --bg-soft: #121214;
    --surface: #18181b;
    --surface-2: #202024;
    --ink: #f5f2ea;
    --ink-dim: #b7b4ac;
    --ink-mute: #79766f;
    --gold: #c9a227;
    --gold-2: #e3c568;
    --line: rgba(245, 242, 234, 0.1);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    scroll-behavior: auto;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    cursor: none;
}

@media (hover: none), (pointer: coarse) {
    body { cursor: auto; }
}

::selection { background: var(--gold); color: #0b0b0d; }

.font-display { font-family: 'Fraunces', serif; }

a { -webkit-tap-highlight-color: transparent; }

/* ---------- Noise overlay ---------- */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 10000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.cursor-dot {
    width: 6px; height: 6px;
    background: var(--gold);
}
.cursor-ring {
    width: 38px; height: 38px;
    border: 1px solid rgba(201, 162, 39, 0.55);
    transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cursor-ring.is-active {
    width: 70px; height: 70px;
    background: rgba(201, 162, 39, 0.08);
    border-color: var(--gold);
}
@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Page transition overlay ---------- */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: var(--gold);
    transform: scaleY(1);
    transform-origin: bottom;
    pointer-events: none;
}
.page-transition-overlay.leave {
    animation: overlayLeave 0.9s var(--ease) forwards;
}
.page-transition-overlay.enter {
    transform-origin: bottom;
    animation: overlayEnter 0.7s var(--ease) forwards;
}
@keyframes overlayLeave {
    to { transform: scaleY(0); transform-origin: top; }
}
@keyframes overlayEnter {
    from { transform: scaleY(0); transform-origin: bottom; }
    to { transform: scaleY(1); transform-origin: bottom; }
}

/* ---------- Nav ---------- */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    padding: 28px 0;
    transition: padding 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
    border-bottom: 1px solid transparent;
}
.site-nav.nav-scrolled {
    padding: 16px 0;
    background: rgba(11, 11, 13, 0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav-link {
    position: relative;
    color: var(--ink-dim);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 0.3s var(--ease);
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0%; height: 1px;
    background: var(--gold);
    transition: width 0.4s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Buttons ---------- */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold);
    color: #0b0b0d;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 11px;
    padding: 18px 34px;
    border-radius: 999px;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn-gold:hover { background: var(--gold-2); box-shadow: 0 12px 40px -10px rgba(201,162,39,0.5); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(245,242,234,0.25);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 11px;
    padding: 18px 34px;
    border-radius: 999px;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,162,39,0.08); }

.magnetic { display: inline-flex; will-change: transform; }

/* ---------- Split text reveal ---------- */
.split-line { overflow: hidden; display: block; }
.split-word {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms);
}
.split-line.revealed .split-word,
.revealed .split-word {
    transform: translateY(0);
    opacity: 1;
}

/* ---------- Generic reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-scale.active { opacity: 1; transform: scale(1); }

/* ---------- Image reveal wipe ---------- */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    transition: transform 1.6s var(--ease);
}
.img-reveal::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--gold);
    transform-origin: left;
    z-index: 2;
    transition: transform 1s var(--ease);
}
.img-reveal.active img { transform: scale(1); }
.img-reveal.active::after { transform: scaleX(0); transform-origin: right; }

/* ---------- Parallax hero ---------- */
.parallax-img { will-change: transform; }

/* ---------- Marquee ---------- */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 26s linear infinite;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ---------- Counters ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- Cards ---------- */
.svc-card {
    position: relative;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), background 0.5s var(--ease);
}
.svc-card:hover {
    border-color: rgba(201,162,39,0.5);
    transform: translateY(-6px);
}

.pill {
    border: 1px solid var(--line);
    color: var(--ink-dim);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.pill:hover { border-color: var(--gold); color: var(--gold-2); }

/* Scroll snap gallery */
.snap-row {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.snap-item { scroll-snap-align: start; }

/* Divider line */
.hr-line { height: 1px; background: var(--line); border: none; }

/* GetClient badge sits on dark backgrounds as a bright pill by design (kept as provided) */
.getclient-badge { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); }

/* ---------- Mobile menu ---------- */
#mobile-menu {
    transition: clip-path 0.7s var(--ease);
    clip-path: circle(0% at calc(100% - 44px) 44px);
}
#mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .split-word, .reveal, .reveal-scale, .img-reveal img, .img-reveal::after {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .marquee-track { animation: none; }
    .page-transition-overlay { display: none; }
    body { cursor: auto; }
    .cursor-dot, .cursor-ring { display: none; }
}