/**
 * Korrekt Tech — public site theme + motion.
 *
 * Theming: Tailwind's white / black / zinc and the surface colours are wired
 * to the RGB-channel variables below (see tailwind.config in
 * layouts/public.blade.php), so every existing utility — text-white,
 * border-white/10, hover:text-white, bg-white/[0.04] … — follows the theme
 * without per-class overrides. In the dark theme "white" is the foreground;
 * in the light theme it becomes near-black, and "black" (text on brand
 * buttons) becomes white. Brand channels are printed inline by the layout
 * because they come from Admin → Site Settings.
 */

/* ------------------------------------------------------------------ tokens */
:root, [data-theme="dark"] {
    color-scheme: dark;
    --c-white: 250 250 250;
    --c-black: 10 10 10;
    --c-zinc-200: 228 228 231;
    --c-zinc-300: 212 212 216;
    --c-zinc-400: 161 161 170;
    --c-zinc-500: 113 113 122;
    --c-zinc-600: 82 82 91;
    --canvas: 5 5 5;
    --band: 8 8 10;
    --surface: 10 10 11;
    --raised: 14 14 17;

    --glow: .25;
    --aurora-opacity: .55;
    --shadow-lift: 0 24px 64px -24px rgb(0 0 0 / .8);

    /* Logo mark teals: brighter on the dark theme so the deep greens stay visible. */
    --km-a1: #1AA6A3; --km-a2: #0E6E6E;
    --km-b1: #2CC9C2; --km-b2: #1AA6A0;
    --km-c1: #0F6363; --km-c2: #1BAFA8;
}
[data-theme="light"] {
    color-scheme: light;
    --c-white: 15 26 26;
    --c-black: 255 255 255;
    --c-zinc-200: 39 39 42;
    --c-zinc-300: 52 58 60;
    --c-zinc-400: 74 82 85;
    --c-zinc-500: 103 111 115;
    --c-zinc-600: 150 158 161;
    --canvas: 255 255 255;
    --band: 244 247 247;
    --surface: 255 255 255;
    --raised: 235 242 242;

    --glow: .14;
    --aurora-opacity: .32;
    --shadow-lift: 0 24px 60px -28px rgb(15 50 50 / .28);

    /* The logo's own colours. */
    --km-a1: #006262; --km-a2: #0A4242;
    --km-b1: #007070; --km-b2: #005E5E;
    --km-c1: #103C3C; --km-c2: #005656;
}

/* Derived colours. Declared on every [data-theme] element (not only :root) so a
   nested data-theme="dark" island — the hero terminal, the sample bug report —
   resolves them from its own channels. */
:root, [data-theme] {
    --brand: rgb(var(--brand-rgb));
    --accent: rgb(var(--accent-rgb));
    --bg: rgb(var(--canvas));
    --fg: rgb(var(--c-white));
    --line: rgb(var(--c-white) / .08);
}

/* -------------------------------------------------------------------- base */
html { background: var(--bg); }
body { transition: background-color .4s ease, color .4s ease; }
[x-cloak] { display: none !important; }
::selection { background: rgb(var(--brand-rgb) / .3); color: var(--fg); }

#top-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 10000; background: linear-gradient(90deg, var(--brand), var(--accent)); width: 0%; transition: width .25s ease, opacity .3s ease; opacity: 0; box-shadow: 0 0 12px var(--brand); }
#top-progress.is-active { opacity: 1; }

/* Form fields */
.cv-input {
    display: block; width: 100%;
    border-radius: 0.75rem; border: 1px solid rgb(var(--c-white) / .1);
    padding: 0.75rem 0.95rem; font-size: 0.9rem; line-height: 1.4;
    color: var(--fg); background: rgb(var(--surface));
    transition: border-color .15s ease, box-shadow .15s ease, background-color .4s ease;
}
.cv-input::placeholder { color: rgb(var(--c-white) / .32); }
.cv-input:hover:not(:disabled):not(:focus) { border-color: rgb(var(--c-white) / .2); }
.cv-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .2); }
select.cv-input { cursor: pointer; }
select.cv-input option { background: rgb(var(--surface)); }
textarea.cv-input { resize: vertical; min-height: 6rem; }

/* ---------------------------------------------------------------- surfaces */
.k-grid { background-image: linear-gradient(rgb(var(--c-white) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-white) / .045) 1px, transparent 1px); background-size: 64px 64px; }
.k-dots { background-image: radial-gradient(rgb(var(--c-white) / .09) 1px, transparent 1px); background-size: 22px 22px; }
.k-glow { background: radial-gradient(60% 55% at 50% 0%, rgb(var(--brand-rgb) / var(--glow)) 0%, rgb(var(--brand-rgb) / calc(var(--glow) * .35)) 40%, transparent 72%); }
.k-glow-soft { background: radial-gradient(50% 50% at 50% 50%, rgb(var(--brand-rgb) / calc(var(--glow) * .6)) 0%, transparent 70%); }
.k-card { background: linear-gradient(180deg, rgb(var(--c-white) / .035), rgb(var(--c-white) / .012)); border: 1px solid var(--line); }
[data-theme="light"] .k-card { background: rgb(var(--surface)); box-shadow: 0 1px 2px rgb(15 50 50 / .04), 0 12px 32px -18px rgb(15 50 50 / .16); }
.k-card-hover { transition: border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.k-card-hover:hover { border-color: rgb(var(--brand-rgb) / .4); transform: translateY(-4px); }
.k-ring-brand { background: rgb(var(--surface)); box-shadow: 0 0 0 1px rgb(var(--brand-rgb) / .5), 0 20px 80px -20px rgb(var(--brand-rgb) / .4); }
.k-fade-x { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.shadow-lift { box-shadow: var(--shadow-lift); }
.ring-hairline { box-shadow: 0 0 0 1px var(--line); }
.marquee-fade { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
/* Heavy black drop shadows read as smudges on white; soften them in light mode. */
[data-theme="light"] [class*="shadow-[0_"][class*="rgba(0,0,0"] { box-shadow: var(--shadow-lift); }

/* Gradient text, with a slow sheen that travels across it. */
.text-gradient, .text-gradient-brand {
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: k-sheen 8s linear infinite;
}
.text-gradient { background-image: linear-gradient(90deg, var(--fg) 0%, var(--brand) 30%, var(--accent) 50%, var(--brand) 70%, var(--fg) 100%); }
.text-gradient-brand { background-image: linear-gradient(90deg, var(--brand), var(--accent), var(--brand)); }
@keyframes k-sheen { to { background-position: -200% center; } }

/* ------------------------------------------------------------ theme toggle */
.k-theme-toggle svg { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
[data-theme="dark"] .k-theme-toggle .k-moon,
[data-theme="light"] .k-theme-toggle .k-sun { transform: rotate(-90deg) scale(.4); opacity: 0; }
/* Circular wipe between themes (View Transitions API, where supported). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ===================================================================
 * MOTION
 * All of it is decoration: content is never hidden unless the <html>
 * has the "js" class, and everything is switched off below for visitors
 * who prefer reduced motion.
 * =================================================================== */
.k-ease { transition-timing-function: cubic-bezier(.2,.7,.2,1); }

/* Reveal on scroll: fade + rise + un-blur. data-reveal picks a variant. */
.js .reveal {
    opacity: 0; transform: translateY(24px); filter: blur(6px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1);
}
.js .reveal[data-reveal="scale"] { transform: translateY(18px) scale(.95); }
.js .reveal[data-reveal="left"] { transform: translateX(-36px); }
.js .reveal[data-reveal="right"] { transform: translateX(36px); }
.js .reveal[data-reveal="rise"] { transform: translateY(35%); filter: none; transition-duration: 1.4s; }
.js .reveal[data-reveal="line"] { opacity: 1; filter: none; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.6,0,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* Split headlines: each word blurs up into place, one after another. */
.k-split .k-w { display: inline-block; white-space: pre; }
.js .k-split .k-w {
    opacity: 0; transform: translateY(.42em) rotate(2deg); filter: blur(10px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .8s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--d, 0ms) + var(--i) * 70ms);
}
.js .k-split.is-in .k-w { opacity: 1; transform: none; filter: none; }

/* Cursor spotlight on cards: a soft brand glow plus a lit border under the pointer. */
.k-card { position: relative; isolation: isolate; }
.k-card::before, .k-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s ease;
}
.k-card::before { z-index: -1; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--brand-rgb) / .1), transparent 45%); }
.k-card::after {
    padding: 1px;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--brand-rgb) / .75), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.k-card.is-lit::before, .k-card.is-lit::after { opacity: 1; }

/* Hero: the grid lights up in brand colour around the cursor. */
.k-grid-spot {
    background-image: linear-gradient(rgb(var(--brand-rgb) / .55) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--brand-rgb) / .55) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%);
    mask-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%);
    opacity: .5;
}

/* Hero: drifting aurora blobs behind everything. */
.k-aurora { position: absolute; inset: -10% 0 auto; height: 820px; pointer-events: none; overflow: hidden; opacity: var(--aurora-opacity); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.k-aurora span { position: absolute; border-radius: 9999px; filter: blur(90px); will-change: transform; }
.k-aurora span:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: 8%; top: -6%; background: rgb(var(--brand-rgb) / .55); animation: k-drift-a 22s ease-in-out infinite alternate; }
.k-aurora span:nth-child(2) { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: 6%; top: 4%; background: rgb(var(--accent-rgb) / .35); animation: k-drift-b 26s ease-in-out infinite alternate; }
.k-aurora span:nth-child(3) { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: 38%; top: 22%; background: rgb(var(--brand-hover-rgb) / .45); animation: k-drift-c 30s ease-in-out infinite alternate; }
@keyframes k-drift-a { to { transform: translate(18vw, 12vh) scale(1.15); } }
@keyframes k-drift-b { to { transform: translate(-16vw, 16vh) scale(.9); } }
@keyframes k-drift-c { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10vw, -6vh) scale(1.2); } 100% { transform: translate(8vw, 8vh) scale(.95); } }

/* Hero: light beams falling down the grid lines (positioned on 64px columns). */
.k-beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.k-beams i {
    position: absolute; top: 0; width: 1px; height: 160px; margin-left: -.5px;
    background: linear-gradient(to bottom, transparent, rgb(var(--brand-rgb) / .9));
    box-shadow: 0 0 10px rgb(var(--brand-rgb) / .6);
    opacity: 0; animation: k-fall 7s cubic-bezier(.4,0,.6,1) infinite;
}
.k-beams i::after { content: ""; position: absolute; bottom: -2px; left: -1.5px; width: 4px; height: 4px; border-radius: 9999px; background: var(--brand); box-shadow: 0 0 12px 2px var(--brand); }
@keyframes k-fall {
    0% { transform: translateY(-160px); opacity: 0; }
    10% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateY(720px); opacity: 0; }
}

/* Gentle float for illustrative cards. */
.k-float { animation: k-float 7s ease-in-out infinite; }
@keyframes k-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 3D tilt (driven by JS); the transition smooths out pointer jitter. */
[data-tilt] { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* Magnetic buttons (driven by JS). */
[data-magnetic] { transition: transform .45s cubic-bezier(.2,.7,.2,1), background-color .15s ease, border-color .15s ease, color .15s ease; }

/* Light sweep across primary buttons on hover (and periodically on the hero CTA). */
.k-shine { position: relative; overflow: hidden; isolation: isolate; }
.k-shine::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%);
    transform: translateX(-130%);
}
.k-shine:hover::after { transition: transform .8s cubic-bezier(.2,.7,.2,1); transform: translateX(130%); }
.k-shine[data-shine-loop]::after { animation: k-shine 5s cubic-bezier(.4,0,.2,1) 2s infinite; }
@keyframes k-shine { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }

/* Pulse used by "live" dots. */
@keyframes k-pulse-ring { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .55); } 100% { box-shadow: 0 0 0 10px transparent; } }
.k-live { animation: k-pulse-ring 1.8s ease-out infinite; }

/* Testimonials marquee. */
@keyframes k-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.k-marquee { animation: k-marquee 40s linear infinite; }
.k-marquee:hover { animation-play-state: paused; }

/* Used by the shared hero-showcase / trusted-by partials. */
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance))); } }
.marquee-run { animation: logo-marquee var(--marquee-duration) linear infinite; }
.logo-mono { filter: brightness(0) invert(1); }
[data-theme="light"] .logo-mono { filter: brightness(0); }
.group:hover .logo-mono, .group:focus-within .logo-mono { filter: none; }

/* Logo mark: the three blades assemble on first load, then the upper blade nods on hover. */
.k-brand-mark path { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.js .k-brand-mark .k-brand-a { animation: k-blade-a .9s cubic-bezier(.2,.7,.2,1) both; }
.js .k-brand-mark .k-brand-b { animation: k-blade-b .9s .08s cubic-bezier(.2,.7,.2,1) both; }
.js .k-brand-mark .k-brand-c { animation: k-blade-c .9s .16s cubic-bezier(.2,.7,.2,1) both; }
@keyframes k-blade-a { from { transform: translate(-30%, -10%); opacity: 0; } }
@keyframes k-blade-b { from { transform: translate(30%, -30%); opacity: 0; } }
@keyframes k-blade-c { from { transform: translate(20%, 30%); opacity: 0; } }
a:hover > .k-brand .k-brand-b { transform: translate(4%, -6%); }
a:hover > .k-brand .k-brand-c { transform: translate(3%, 4%); }

/* Scroll progress line under the header. */
.k-scroll-progress { transform-origin: left; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 8px var(--brand); }

@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal[data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
    .js .k-split .k-w { opacity: 1; transform: none; filter: none; transition: none; }
    .k-marquee, .k-live, .k-float, .k-aurora span, .k-beams, .text-gradient, .text-gradient-brand,
    .js .k-brand-mark path, .k-shine[data-shine-loop]::after { animation: none !important; }
    .k-beams { display: none; }
    .k-card-hover:hover { transform: none; }
}

/* Centre a grid on the page, so decorations can line up with its columns at calc(50% - 32px ± n × 64px). */
.k-grid-c { background-position: center top; }

/* A revealed card keeps its hover lift (the reveal's "transform: none" would otherwise win). */
.js .reveal.is-visible.k-card-hover:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .js .reveal.is-visible.k-card-hover:hover { transform: none; } }