/* SoftTech Valley — custom site styles
 * Theme tokens, glass utilities, gradient text, animations.
 * Tailwind utility classes are provided separately via the Play CDN.
 *
 * The animation easing here MATCHES the original Framer Motion config:
 *   cubic-bezier(0.21, 0.47, 0.32, 0.98)  (the "fadeUp" curve used everywhere)
 */

:root {
  --radius: 0.875rem;

  /* Deep black canvas with electric blue / cyan / violet glow */
  --background:      oklch(0.13 0.02 265);
  --foreground:      oklch(0.98 0.005 250);

  --surface:         oklch(0.17 0.025 265);
  --surface-2:       oklch(0.21 0.03 265);

  --card:            oklch(0.17 0.025 265);
  --card-foreground: oklch(0.98 0.005 250);

  --primary:            oklch(0.72 0.18 250);
  --primary-foreground: oklch(0.12 0.02 260);

  --electric:    oklch(0.72 0.18 250);
  --cyan-glow:   oklch(0.85 0.14 200);
  --violet-glow: oklch(0.66 0.22 295);

  --muted:            oklch(0.2 0.025 265);
  --muted-foreground: oklch(0.72 0.025 255);

  --border: oklch(1 0 0 / 8%);
  --input:  oklch(1 0 0 / 12%);
  --ring:   oklch(0.72 0.18 250);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* The signature Framer easing curve from the original */
  --ease-out-soft: cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(900px 500px at 85% -5%, oklch(0.72 0.18 250 / 0.18), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, oklch(0.66 0.22 295 / 0.18), transparent 60%),
    radial-gradient(700px 700px at 50% 110%, oklch(0.85 0.14 200 / 0.12), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
.font-mono { font-family: var(--font-mono); }
::selection { background: oklch(0.72 0.18 250 / 0.35); }

img { display: block; max-width: 100%; height: auto; }

/* ---- Layout helpers ---- */
.text-balance { text-wrap: balance; }
.container-wide {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---- Brand gradients ---- */
.text-gradient {
  background: linear-gradient(135deg, oklch(0.95 0.02 250), oklch(0.72 0.18 250) 50%, oklch(0.66 0.22 295));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.text-gradient-cool {
  background: linear-gradient(135deg, oklch(0.85 0.14 200), oklch(0.72 0.18 250));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---- Glass cards ---- */
.glass {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.05), oklch(1 0 0 / 0.02));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid oklch(1 0 0 / 0.08);
}
.glass-strong {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.08), oklch(1 0 0 / 0.03));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid oklch(1 0 0 / 0.1);
}

/* ---- Glowing border ---- */
.border-glow { position: relative; }
.border-glow::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, oklch(0.85 0.14 200 / 0.6), oklch(0.72 0.18 250 / 0.6), oklch(0.66 0.22 295 / 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.glow-blue   { box-shadow: 0 0 60px -10px oklch(0.72 0.18 250 / 0.55); }
.glow-violet { box-shadow: 0 0 80px -20px oklch(0.66 0.22 295 / 0.55); }

.grid-pattern {
  background-image:
    linear-gradient(to right,  oklch(1 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---- Marquee ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 40s linear infinite; }

/* ---- Pulsing glow blobs in hero ---- */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }

/* ---- Small status dot pulse ---- */
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.animate-pulse { animation: status-pulse 2s ease-in-out infinite; }

/* ============================================================
   REVEAL ANIMATIONS (replaces Framer Motion's whileInView fadeUp)
   Original: { opacity: 0, y: 24 } → { opacity: 1, y: 0 }
   Duration 0.6-0.8s, ease cubic-bezier(0.21, 0.47, 0.32, 0.98)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out-soft),
              transform 0.7s var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from the right (timeline items in About) */
.reveal-x {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s var(--ease-out-soft),
              transform 0.5s var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal-x.in {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-x { opacity: 1; transform: none; transition: none; }
  .animate-marquee, .animate-pulse-glow, .animate-pulse { animation: none; }
}

/* ============================================================
   NAVBAR — shrinks max-width on scroll (original: 6xl → 5xl)
   ============================================================ */
#site-header {
  max-width: 72rem;
  transition: max-width 0.5s var(--ease-out-soft);
}
#site-header.is-scrolled {
  max-width: 64rem;
}
#site-header.is-scrolled #site-header-inner {
  box-shadow: 0 25px 50px -12px oklch(0.72 0.18 250 / 0.10);
}

/* Mobile menu slide-down (original: y: -10 → 0) */
#mobile-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s var(--ease-out-soft),
              transform 0.25s var(--ease-out-soft);
  pointer-events: none;
}
#mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hamburger to X */
.hamburger span {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--foreground);
  transition: transform 0.25s, opacity 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   FORM INPUTS
   ============================================================ */
.input-base {
  width: 100%;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: 0.875rem;
  padding: 0.85rem 1rem;
  color: var(--foreground);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input-base:focus {
  outline: none;
  border-color: oklch(0.72 0.18 250 / 0.6);
  background: oklch(1 0 0 / 0.06);
  box-shadow: 0 0 0 4px oklch(0.72 0.18 250 / 0.12);
}
.input-base::placeholder { color: oklch(0.72 0.025 255 / 0.6); }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 60;
  background: linear-gradient(to right, var(--cyan-glow), var(--electric), var(--violet-glow));
  pointer-events: none;
}

/* ============================================================
   CURSOR GLOW (desktop only)
   ============================================================ */
#cursor-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  transition: opacity 0.3s;
}
#cursor-glow .dot {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 9999px;
  transform: translate(-210px, -210px);
  background: radial-gradient(closest-side, oklch(0.72 0.18 250 / 0.10), transparent 70%);
  will-change: left, top;
}
@media (max-width: 767px) {
  #cursor-glow { display: none; }
}

/* ============================================================
   FAQ ACCORDION — animates real height (original: height 0 → "auto")
   Uses grid-template-rows trick: smooth, intrinsic-height-aware.
   ============================================================ */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out-soft);
}
.faq-body > .faq-body-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-item .icon-plus  { display: inline-flex; }
.faq-item .icon-minus { display: none; }
.faq-item.open .icon-plus  { display: none; }
.faq-item.open .icon-minus { display: inline-flex; }

/* ============================================================
   TESTIMONIALS — AnimatePresence mode="wait" behavior:
   one slide visible at a time, full fade-out before fade-in.
   ============================================================ */
.testimonial-quote-stage,
.testimonial-author-stage {
  position: relative;
}
.testimonial-quote-stage { min-height: 7rem; }
@media (min-width: 768px) {
  .testimonial-quote-stage { min-height: 10rem; }
}
.testimonial-author-stage { min-height: 2.75rem; }

.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease-out-soft),
              transform 0.4s var(--ease-out-soft);
  pointer-events: none;
}
.testimonial-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* When leaving, slide upward (matches Framer's exit: y: -12) */
.testimonial-slide.leaving {
  opacity: 0;
  transform: translateY(-12px);
}

.testimonial-dot {
  background: oklch(1 0 0 / 0.15);
  transition: background 0.25s var(--ease-out-soft);
}
.testimonial-dot.is-active {
  background: linear-gradient(to right, var(--cyan-glow), var(--violet-glow));
}

/* ============================================================
   SERVICE FILTER — layout animation (original: AnimatePresence + layout)
   Cards smoothly slide to their new positions on filter change.
   ============================================================ */
.service-card {
  transition: opacity 0.45s var(--ease-out-soft),
              transform 0.45s var(--ease-out-soft);
  will-change: opacity, transform;
}
.service-card.is-leaving {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
.service-card.is-hidden {
  display: none;
}
.service-card.is-entering {
  opacity: 0;
  transform: translateY(20px);
}

.filter-btn {
  border: 1px solid transparent;
  color: var(--muted-foreground);
  transition: background 0.25s, color 0.25s;
}
.filter-btn.is-active {
  background: var(--foreground);
  color: var(--background);
}
.filter-btn:not(.is-active):hover {
  color: var(--foreground);
}

/* ============================================================
   FORM ALERT (PHP flash messages)
   ============================================================ */
.form-alert {
  border-radius: 0.875rem;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
}
.form-alert.success {
  background: oklch(0.85 0.14 200 / 0.10);
  border: 1px solid oklch(0.85 0.14 200 / 0.35);
  color: oklch(0.92 0.08 200);
}
.form-alert.error {
  background: oklch(0.62 0.23 27 / 0.10);
  border: 1px solid oklch(0.62 0.23 27 / 0.35);
  color: oklch(0.85 0.15 27);
}

/* ============================================================
   COLOR + UTILITY CLASSES (avoid Tailwind arbitrary-value flakiness)
   ============================================================ */
.text-foreground         { color: var(--foreground); }
.text-muted-foreground   { color: var(--muted-foreground); }
.text-electric           { color: var(--electric); }
.text-cyan-glow          { color: var(--cyan-glow); }
.text-violet-glow        { color: var(--violet-glow); }
.text-primary-foreground { color: var(--primary-foreground); }

.bg-electric    { background-color: var(--electric); }
.bg-cyan-glow   { background-color: var(--cyan-glow); }
.bg-violet-glow { background-color: var(--violet-glow); }
.bg-foreground  { background-color: var(--foreground); }
.bg-background  { background-color: var(--background); }

.fill-cyan-glow { fill: var(--cyan-glow); }
.stroke-cyan-glow { stroke: var(--cyan-glow); }

.border-border { border-color: var(--border); }

/* Brand gradients as backgrounds */
.bg-brand-grad        { background: linear-gradient(to right, var(--electric), var(--violet-glow)); }
.bg-brand-grad-br     { background: linear-gradient(135deg, var(--electric), var(--violet-glow)); }
.bg-brand-grad-cool   { background: linear-gradient(to right, var(--cyan-glow), var(--violet-glow)); }
.bg-brand-grad-mixed  { background: linear-gradient(135deg, oklch(0.72 0.18 250 / 0.30), oklch(0.66 0.22 295 / 0.30)); }

/* Specific hero h1 size that doesn't exist in default Tailwind */
.text-hero-xl { font-size: 5.5rem; line-height: 0.95; }
@media (max-width: 1023px) { .text-hero-xl { font-size: 4.5rem; } }
@media (max-width: 767px)  { .text-hero-xl { font-size: 3.5rem; } }
@media (max-width: 639px)  { .text-hero-xl { font-size: 3rem; } }

.tracking-section { letter-spacing: 0.2em; }
.tracking-mono    { letter-spacing: 0.18em; }

/* Hero CTA button shine on hover */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.25s var(--ease-out-soft);
  pointer-events: none;
}
.btn-shine:hover::before { background: rgba(255, 255, 255, 0.15); }

/* Service card hover glow */
.service-card .hover-glow {
  position: absolute;
  inset: -1px;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, oklch(0.72 0.18 250 / 0), transparent, oklch(0.66 0.22 295 / 0));
  transition: background 0.5s var(--ease-out-soft);
  z-index: -1;
  pointer-events: none;
}
.service-card:hover .hover-glow {
  background: linear-gradient(135deg, oklch(0.72 0.18 250 / 0.20), transparent, oklch(0.66 0.22 295 / 0.20));
}
.service-card .hover-blob {
  position: absolute;
  top: -6rem; right: -6rem;
  width: 12rem; height: 12rem;
  border-radius: 9999px;
  background: oklch(0.72 0.18 250 / 0);
  filter: blur(48px);
  transition: background 0.7s var(--ease-out-soft);
  pointer-events: none;
}
.service-card:hover .hover-blob {
  background: oklch(0.72 0.18 250 / 0.20);
}
.service-card .icon-wrap {
  transition: transform 0.3s var(--ease-out-soft);
}
.service-card:hover .icon-wrap {
  transform: scale(1.1);
}

/* Smooth image scale on project hover */
.proj-img {
  transition: transform 0.7s var(--ease-out-soft);
}
.proj-card:hover .proj-img {
  transform: scale(1.05);
}

/* Project arrow drift on hover */
.proj-arrow {
  transition: transform 0.3s var(--ease-out-soft), color 0.3s var(--ease-out-soft);
}
.proj-card:hover .proj-arrow {
  transform: translate(2px, -2px);
  color: var(--electric);
}

/* Nav link underline grow */
.nav-link { position: relative; }
.nav-link .underline-grow {
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--cyan-glow), var(--violet-glow));
  transition: width 0.3s var(--ease-out-soft);
}
.nav-link:hover .underline-grow { width: 100%; }
.nav-link:hover { color: var(--foreground); }

/* WhatsApp FAB */
.fab-glow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: oklch(0.85 0.14 200 / 0.40);
  filter: blur(20px);
  transition: background 0.25s;
}
.fab:hover .fab-glow { background: oklch(0.85 0.14 200 / 0.60); }
.fab-inner {
  transition: transform 0.25s var(--ease-out-soft);
}
.fab:hover .fab-inner { transform: scale(1.05); }