/* Font @import must come before the Tailwind import (CSS requires @import first). */
@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap');
@import "tailwindcss";

/* =====================================================================
   wedigtech — global design system
   Aesthetic: soft, airy "intelligent growth". Rounded geometric type,
   green → teal → blue gradient accents, near-white aurora backgrounds.
   ===================================================================== */

@theme {
  /* Brand palette */
  --color-ink: #131a16;
  --color-ink-soft: #3a4a42;
  --color-muted: #69756f;
  --color-line: #e7efe9;
  --color-paper: #ffffff;
  --color-mist: #f4faf6;

  /* Accent ramp: leaf green → teal → sky blue */
  --color-leaf: #4fc46b;
  --color-leaf-deep: #36b85f;
  --color-teal: #2bbac8;
  --color-sky: #5aa8f0;

  /* Soft atmospheric tints used for washes */
  --color-wash-green: #e9f8ee;
  --color-wash-mint: #e4f6f3;
  --color-wash-sky: #e8f1fd;

  /* Fonts — ABeeZee applied globally (headings + body) */
  --font-display: "ABeeZee", var(--font-quicksand), ui-rounded, "Segoe UI", sans-serif;
  --font-body: "ABeeZee", var(--font-nunito), ui-sans-serif, system-ui, sans-serif;

  /* Radii */
  --radius-card: 1.5rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 18px 40px -24px rgba(36, 80, 56, 0.28);
  --shadow-lift: 0 30px 70px -36px rgba(36, 80, 56, 0.38);

  /* Easing */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

:root {
  --background: var(--color-paper);
  --foreground: var(--color-ink);
}

* {
  border-color: var(--color-line);
}

html {
  scroll-behavior: smooth;
  /* Guards the whole site against any single element (a pasted image, a wide
     table, a decorative flourish) being a few px wider than the viewport and
     making the entire page horizontally scrollable — swiping right would then
     reveal blank space past the centered content, worst on mobile. Elements
     that legitimately need to scroll sideways (e.g. .blog-content figure,
     the story-card carousel) set their own overflow-x and are unaffected. */
  overflow-x: hidden;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: color-mix(in srgb, var(--color-leaf) 30%, transparent);
  color: var(--color-ink);
}

/* ----- Reusable utilities ----- */

/* Gradient accent text — the signature green→blue highlight.
   These two literals come straight from the "Wedigtech – Website 2.0" Canva
   spec (linear-gradient 90°: #51e139 → #52abe3). They are deliberately NOT the
   --color-leaf / --color-sky accent-ramp tokens: those are a softer green and a
   bluer blue, and they still drive the buttons, pills, logo border and washes,
   which the design team has not respecced. Two stops, not three — the ramp goes
   green straight to blue with no --color-teal waypoint in the middle.
   If the brand ramp is ever repointed to match, fold these back into @theme. */
.text-gradient {
  background: linear-gradient(90deg, #51e139 0%, #52abe3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-green {
  background: linear-gradient(100deg, var(--color-leaf) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo-gradient-border {
  position: relative;
}

.logo-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.1px;
  background: linear-gradient(135deg, var(--color-leaf), var(--color-teal), var(--color-sky));
  -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;
  pointer-events: none;
}

/* Gradient card outline — same ramp as .text-gradient, at the Canva's 68%
   opacity. Same mask trick as .logo-gradient-border: paints only the ring and
   punches out the middle, so the card fill stays transparent. */
/* A 1px padding box carrying the gradient, with an opaque panel sitting on top
   of all but that 1px. Deliberately NOT the ::before mask ring that
   .logo-gradient-border uses: at fractional browser zoom a masked 1px ring
   rasterises unevenly and one edge lands across two device pixels, reading as a
   doubled border. A padding edge is a plain box and stays crisp at any zoom.
   --gb-span/--gb-pos let a row of cards share ONE ramp — each card oversizes
   the gradient and shows its own slice, so the row reads green→blue overall
   instead of every card repeating the full ramp. Opacity is baked into the
   stops (0.68, per Canva) so it doesn't fade the card contents. */
.gradient-border {
  /* A real 1px border: gradient on a border-box layer, opaque fill on a
     padding-box layer above it. One border path, so thickness stays even
     around the corners. Each card carries the full ramp on its own stroke,
     matching the Canva. Same technique as .btn-gradient. */
  border: 1px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, rgba(81, 225, 57, 0.68) 0%, rgba(82, 171, 227, 0.68) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Article callout (AI Insight box). Same construction as .gradient-border,
   but tuned to sit inside blog content: the ring uses the SAME full-opacity
   leaf→teal→sky ramp as the CMS table frame in blog-content.css so the two
   read as one family, at 2px — one step under the table's 3px, since this is
   a callout, not a data grid. Flat paper fill by default (Testimonial). */
.callout-gradient {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--color-paper), var(--color-paper)),
    linear-gradient(135deg, var(--color-leaf), var(--color-teal), var(--color-sky));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Pale green→blue wash fill (same as .btn-gradient's pill) — used by the
   AI Insight box so it reads as a highlight; the Testimonial stays plain. */
.callout-gradient-wash {
  background-image:
    linear-gradient(90deg, #f6fff4 0%, #eef6ff 100%),
    linear-gradient(135deg, var(--color-leaf), var(--color-teal), var(--color-sky));
}

/* Pill button per Canva: pale green→blue fill with a green→blue gradient
   border. Two backgrounds — the fill clipped to padding-box, the border ramp to
   border-box — which is crisper on a pill than a masked ring. */
.btn-gradient {
  border: 1px solid transparent;
  background-image:
    linear-gradient(90deg, #f0ffed 0%, #c6e9ff 100%),
    linear-gradient(90deg, #51e139 0%, #52abe3 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Soft section wash backgrounds */
.wash-aurora {
  background:
    radial-gradient(60% 80% at 80% 10%, var(--color-wash-sky) 0%, transparent 60%),
    radial-gradient(70% 90% at 10% 0%, var(--color-wash-green) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-mist) 0%, var(--color-paper) 70%);
}

/* Founder letter body — styles the CMS rich-text tags (h2, strong, hr, p spacing) */
.letter-prose > * + * {
  margin-top: 1.5rem;
}
.letter-prose h2 {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink);
  font-size: 1.5rem;
}
.letter-prose h2:first-child {
  margin-top: 0;
  font-size: 1.875rem;
  line-height: 1.15;
}
@media (min-width: 640px) {
  .letter-prose h2 {
    font-size: 1.875rem;
  }
  .letter-prose h2:first-child {
    font-size: 2.5rem;
  }
}
.letter-prose strong {
  font-weight: 700;
  color: var(--color-ink);
}
.letter-prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

/* Pill button base */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  transition:
    transform 0.4s var(--ease-out-soft),
    box-shadow 0.4s var(--ease-out-soft),
    background 0.3s ease;
}

.btn-pill:hover {
  transform: translateY(-2px);
}

/* ----- Entrance animations ----- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2%, -3%, 0) scale(1.05);
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-rise {
  opacity: 0;
  animation: rise 0.9s var(--ease-out-soft) forwards;
}

.animate-drift {
  animation: drift 18s ease-in-out infinite;
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-rise,
  .animate-drift,
  .animate-float-slow {
    animation: none;
    opacity: 1;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Hide scrollbar for horizontal carousels */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Mobile logo ticker keyframes (the track is styled inline in app/page.tsx so
   it survives iOS 15, where Tailwind v4's layered CSS can be dropped). Two
   identical logo copies slide one copy-width (-50%) for a seamless loop.
   translate3d keeps it on the GPU; @keyframes is well supported on old Safari. */
@keyframes logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [style*="logo-marquee"] {
    animation: none !important;
  }
}