/* ============================================================
   app.css  —  Global stylesheet for Gilbert Specialists Tech
   Scope: ALL styles shared across the entire application.
         Page-specific styles live in *.razor.css files.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=Barlow:wght@300;400;500;600&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
    --accent:       #FF4D00;
    --accent-dim:   rgba(255, 77, 0, 0.55);
    --accent-glow:  rgba(255, 77, 0, 0.18);
    --mono:         'DM Mono', monospace;
    --display:      'Bebas Neue', cursive;
    --serif:        'DM Serif Display', serif;
    --body:         'Barlow', sans-serif;
    --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark Theme (default) ─────────────────────────────────── */
[data-theme="dark"] {
    --bg:           #080808;
    --surface:      #101010;
    --surface-2:    #181818;
    --border:       rgba(255, 255, 255, 0.07);
    --border-s:     rgba(255, 255, 255, 0.13);
    --text:         #e8e4dc;
    --text-dim:     rgba(232, 228, 220, 0.48);
    --text-dimmer:  rgba(232, 228, 220, 0.20);
    --heading:      #ffffff;
    --nav-bg:       rgba(8, 8, 8, 0.94);
    --noise:        0.028;
    --marquee-bg:   #101010;
    --cred-bg:      #080808;
}

/* ── Light Theme ──────────────────────────────────────────── */
[data-theme="light"] {
    --bg:           #F5F1EB;
    --surface:      #EAE6E0;
    --surface-2:    #E0DCD6;
    --border:       rgba(0, 0, 0, 0.09);
    --border-s:     rgba(0, 0, 0, 0.18);
    --text:         #2A2520;
    --text-dim:     rgba(42, 37, 32, 0.55);
    --text-dimmer:  rgba(42, 37, 32, 0.28);
    --heading:      #0E0B08;
    --nav-bg:       rgba(245, 241, 235, 0.94);
    --noise:        0.016;
    --marquee-bg:   #EAE6E0;
    --cred-bg:      #F5F1EB;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-weight: 300;
    line-height: 1.6;
    cursor: none;
    overflow-x: hidden;
    transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

::selection {
    background: var(--accent);
    color: #fff;
}

/* ── Custom Cursor ────────────────────────────────────────── */
#cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease), height 0.3s var(--ease);
}

#cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 77, 0, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.4s var(--ease), height 0.4s var(--ease), border-color 0.3s;
}

body:has(a:hover) #cursor,
body:has(button:hover) #cursor  { width: 5px;  height: 5px; }

body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width: 54px; height: 54px; border-color: var(--accent); }

/* ── Layout Utility ───────────────────────────────────────── */
.container {
    max-width: 1400px;
    margin: 0 auto;
}

section {
    padding: 120px 48px;
}

/* ── Section Label ────────────────────────────────────────── */
.section-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 72px;
}

.section-label-line {
    width: 28px;
    height: 1px;
    background: var(--accent);
}

.section-label > span {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-label-num {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--text-dimmer);
    letter-spacing: 0.1em;
}

/* ── Page Header (used on inner pages) ───────────────────── */
.page-header {
    padding: 160px 48px 80px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    transition: background 0.5s, border-color 0.5s;
}

.ph-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}

.ph-eyebrow-line {
    width: 36px;
    height: 1px;
    background: var(--accent);
}

.ph-eyebrow span {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.ph-title {
    font-family: var(--display);
    font-size: clamp(64px, 10vw, 160px);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--heading);
    overflow: hidden;
    transition: color 0.5s;
}

.ph-title .line {
    display: block;
    overflow: hidden;
}

.ph-title .line span {
    display: block;
    transform: translateY(110%);
    animation: slideUp 0.9s var(--ease) forwards;
}

.ph-title .line:nth-child(1) span { animation-delay: 0.3s; }
.ph-title .line:nth-child(2) span { animation-delay: 0.45s; }

.ph-title .accent { color: var(--accent); }

.ph-sub {
    max-width: 520px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-dim);
    margin-top: 40px;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) 0.8s forwards;
    transition: color 0.5s;
}

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.visible  { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.32s; }
.reveal-d4 { transition-delay: 0.44s; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.55); }
}

@keyframes mq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes tq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes scrollAnim {
    0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
    50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Shared Component: Tag ────────────────────────────────── */
.tag {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 5px 9px;
    transition: border-color 0.3s, color 0.3s;
}

/* ── Shared Component: Buttons ────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--accent);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
    cursor: none;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #111;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

.btn-primary:hover::before { transform: scaleX(1); }

.btn-primary span { position: relative; z-index: 1; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--accent);
    padding: 18px 40px;
    position: relative;
    overflow: hidden;
    transition: color 0.25s;
    cursor: none;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
    z-index: -1;
}

.btn-secondary:hover { color: #fff; }
.btn-secondary:hover::before { transform: scaleX(1); }

.arrow-right { transition: transform 0.3s var(--ease); }
.btn-primary:hover .arrow-right,
.btn-secondary:hover .arrow-right { transform: translateX(4px); }

/* ── Shared Component: Marquee Strip ─────────────────────── */
.marquee-strip {
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
    background: var(--marquee-bg);
    transition: background 0.5s, border-color 0.5s;
}

.marquee-track {
    display: flex;
    animation: mq 28s linear infinite;
    white-space: nowrap;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 0 36px;
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: color 0.5s;
}

.marquee-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* ── Shared Component: Tagline Strip ─────────────────────── */
.tagline-strip {
    background: var(--accent);
    padding: 50px 0;
    overflow: hidden;
}

.tagline-text {
    font-family: var(--display);
    font-size: clamp(28px, 5vw, 76px);
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    animation: tq 22s linear infinite;
}

:focus { outline: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1:focus, h2:focus, h3:focus { outline: none !important; }

@media (max-width: 960px) {
    section { padding: 80px 24px; }

    .page-header { padding: 120px 24px 60px; }
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }