/* ==========================================================================
   ClipTech — marketing design system
   Turf-green world · Fraunces / Space Grotesk / Space Mono
   ========================================================================== */

:root {
    /* greens, dark -> light */
    --ink:        #0B1F14;
    --field-950:  #081A10;
    --field-900:  #0E2A1A;
    --field-800:  #123C25;
    --field-700:  #1A5233;
    --field-600:  #22683F;
    --field-500:  #2E7D46;
    /* fresh cut accents */
    --grass:      #7AC943;
    --grass-lo:   #5FA835;
    --lime-hi:    #B7F05A;
    /* warm spark */
    --sun:        #F4C24B;
    --clay:       #E08A4B;
    /* paper / light surfaces */
    --paper:      #F5F8EE;
    --paper-2:    #E9F0DA;
    --paper-3:    #DEE8C9;
    --line:       #CFDCBB;
    --line-soft:  #E0E8CF;
    /* text */
    --text:       #10241A;
    --text-soft:  #40563F;
    --text-mute:  #6C7D63;
    --on-dark:        #EAF3DE;
    --on-dark-soft:   #A9C199;
    --on-dark-mute:   #7B9670;
    --line-dark:  rgba(183, 240, 90, .16);

    --radius:     18px;
    --radius-sm:  12px;
    --radius-lg:  28px;
    --shadow-sm:  0 1px 2px rgba(11,31,20,.06), 0 4px 14px rgba(11,31,20,.05);
    --shadow-md:  0 4px 12px rgba(11,31,20,.08), 0 18px 44px rgba(11,31,20,.10);
    --shadow-glow: 0 0 0 1px var(--line-dark), 0 24px 60px rgba(0,0,0,.45);

    --maxw: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono:    'Space Mono', 'SFMono-Regular', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

html, body { overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Grid/flex children must be allowed to shrink below their content size so a
   long word or wide panel never forces a horizontal scrollbar. */
.wrap > *, .hero__copy, .hero__panel { min-width: 0; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0;
    font-optical-sizing: auto;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--lime-hi); color: var(--field-900); }

img, svg { max-width: 100%; display: block; }

:focus-visible {
    outline: 3px solid var(--grass);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Programmatic focus target (FocusOnNavigate) and headings shouldn't show a ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus, h2:focus, h3:focus { outline: none; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }

.section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.dark { background: var(--field-900); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }

/* ---------- eyebrow / mono labels ---------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--grass-lo);
    display: inline-flex;
    align-items: center;
    gap: .6em;
}
.dark .eyebrow { color: var(--grass); }
.eyebrow::before {
    content: "";
    width: 22px; height: 2px;
    background: currentColor;
    display: inline-block;
    opacity: .7;
}

/* ---------- type scale ---------- */
.display {
    font-size: clamp(2.7rem, 6.4vw, 5.2rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}
.h-sec {
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}
.h-card { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; }
.lede {
    font-size: clamp(1.08rem, 1.7vw, 1.32rem);
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 42ch;
}
.dark .lede { color: var(--on-dark-soft); }
.italic-ink { font-style: italic; color: var(--grass-lo); }
.dark .italic-ink { color: var(--lime-hi); }

/* ---------- mower-stripe fields (signature) ---------- */
.stripes { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.stripes--dark {
    background:
        repeating-linear-gradient(118deg,
            var(--field-900) 0 74px,
            var(--field-800) 74px 148px);
}
.stripes--dark::after {
    content: "";
    position: absolute; inset: -20%;
    background:
        radial-gradient(120% 80% at 78% 8%, rgba(122,201,67,.16), transparent 55%),
        radial-gradient(90% 70% at 8% 100%, rgba(8,26,16,.9), transparent 60%);
}
.stripes--paper {
    background:
        repeating-linear-gradient(118deg,
            var(--paper) 0 74px,
            var(--paper-2) 74px 148px);
    opacity: .8;
}
.stripes--paper::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(100% 80% at 50% 0%, transparent, var(--paper) 78%);
}
.section > .wrap { position: relative; z-index: 1; }

/* ---------- buttons ---------- */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: .55em;
    padding: .82em 1.35em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--grass {
    background: var(--grass);
    color: var(--field-950);
    box-shadow: 0 6px 20px rgba(95,168,53,.35);
}
.btn--grass:hover { background: var(--lime-hi); box-shadow: 0 10px 28px rgba(122,201,67,.42); }
.btn--ghost {
    background: transparent;
    color: var(--on-dark);
    border-color: var(--line-dark);
}
.btn--ghost:hover { border-color: var(--grass); color: var(--lime-hi); }
.btn--ink {
    background: var(--field-900);
    color: var(--on-dark);
}
.btn--ink:hover { background: var(--field-800); }
.btn--outline {
    background: transparent;
    color: var(--field-700);
    border-color: var(--line);
}
.btn--outline:hover { border-color: var(--field-600); background: var(--paper-2); }
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- chips ---------- */
.chip {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .42em .8em;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-soft);
    background: rgba(255,255,255,.5);
    display: inline-flex; align-items: center; gap: .5em;
}
.dark .chip { border-color: var(--line-dark); color: var(--on-dark-soft); background: rgba(255,255,255,.03); }
.chip--live { color: var(--field-700); border-color: var(--grass-lo); background: rgba(122,201,67,.12); }
.dark .chip--live { color: var(--lime-hi); }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grass); box-shadow: 0 0 0 0 rgba(122,201,67,.6); animation: pulse 2.2s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(122,201,67,.55); }
    70% { box-shadow: 0 0 0 8px rgba(122,201,67,0); }
    100% { box-shadow: 0 0 0 0 rgba(122,201,67,0); }
}

/* ---------- reveal on scroll (CSS scroll-driven) ----------
   Pure CSS via animation-timeline so Blazor's interactive re-renders never
   clobber it. Elements are fully visible by default; the reveal only applies
   where the browser supports scroll timelines and motion is welcome, so no
   content is ever hidden behind an effect that might not run. */
@keyframes reveal-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            animation: reveal-in linear both;
            animation-timeline: view();
            animation-range: entry 2% cover 22%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- misc ---------- */
.hr-hair { border: 0; height: 1px; background: var(--line); margin: 0; }
.dark .hr-hair { background: var(--line-dark); }

/* Blazor error UI */
#blazor-error-ui {
    color-scheme: light;
    background: var(--field-900);
    color: var(--on-dark);
    bottom: 0; box-shadow: 0 -1px 20px rgba(0,0,0,.4);
    box-sizing: border-box; display: none; left: 0;
    padding: 0.8rem 1.4rem; position: fixed; width: 100%; z-index: 1200;
    font-family: var(--font-body); font-size: .9rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.6rem; }
.blazor-error-boundary {
    background: var(--field-800); padding: 1rem 1rem 1rem 1rem; color: white; border-radius: 8px;
}
.blazor-error-boundary::after { content: "An error has occurred." }