/*
 * MAVALEX — style.css
 * Tailwind handles layout, spacing, colour, typography.
 * This file covers only what Tailwind cannot:
 *   - CSS custom properties (brand tokens)
 *   - Keyframe animations
 *   - Pseudo-element tricks
 *   - Third-party component states (.scrolled, .open, .in, .out)
 *   - Scroll-reveal transitions
 */

/* ── BRAND TOKENS ─────────────────────────────────────────── */
:root {
  --blue:    #3a5980;
  --blue-d:  #2a4060;
  --sky:     #97c0d9;
  --yellow:  #f8a119;
  --yellow-d:#e08e10;
  --off-white:#f4f6f6;
  --ink:     #231f20;
  --green:   #29c940;

  --fh: 'Syne', sans-serif;
  --fb: 'Plus Jakarta Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--off-white); color: var(--ink); overflow-x: hidden; }

/* scrollbar */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 3px; }

/* font helpers */
.font-head { font-family: var(--fh); }

/* brand colour utilities (extend Tailwind) */
.bg-brand-blue    { background-color: var(--blue); }
.bg-brand-sky     { background-color: var(--sky); }
.bg-brand-yellow  { background-color: var(--yellow); }
.bg-brand-ink     { background-color: var(--ink); }
.text-brand-blue  { color: var(--blue); }
.text-brand-sky   { color: var(--sky); }
.text-brand-yellow{ color: var(--yellow); }
.text-brand-ink   { color: var(--ink); }
.border-brand-blue{ border-color: var(--blue); }

/* ── LOADER ───────────────────────────────────────────────── */
#loader { transition: opacity .4s; }
#loader.out { animation: loaderOut .55s cubic-bezier(.76,0,.24,1) both; }
@keyframes loaderOut {
  to { opacity: 0; transform: scaleY(0); transform-origin: top; }
}
body.loading { overflow: hidden; }

/* ── NAV SCROLL STATE ─────────────────────────────────────── */
#mainNav { transition: box-shadow .3s, border-color .3s; }
#mainNav.scrolled { box-shadow: 0 2px 32px rgba(58,89,128,.1); border-color: #c5cdd6; background:rgba(85, 87, 87, 0.9); }

/* nav link underline on hover/active */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: 0; left: 10px; right: 10px;
  height: 2px; background: var(--yellow); border-radius: 2px;
  transform: scaleX(0); transition: transform .25s;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* btn shine sweep */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; top: 0; left: -110%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-15deg); transition: left .45s ease;
}
.btn-shine:hover::after { left: 150%; }

/* ── STICKY BAR ───────────────────────────────────────────── */
#sticky {
  transform: translateX(-50%) translateY(80px);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  opacity: 0; pointer-events: none;
}
#sticky.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all; }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.rev    { opacity: 0; transform: translateY(36px); transition: opacity .75s ease, transform .75s ease; }
.rev-l  { opacity: 0; transform: translateX(-36px); transition: opacity .75s, transform .75s; }
.rev-r  { opacity: 0; transform: translateX(36px);  transition: opacity .75s, transform .75s; }
.rev.in, .rev-l.in, .rev-r.in { opacity: 1; transform: none; }

/* ── HERO ─────────────────────────────────────────────────── */
/* animated grid background drift */
.hero-grid {
  background-image: linear-gradient(rgba(151,192,217,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(151,192,217,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift { to { background-position: 64px 64px; } }

/* mesh background pulse */
.hero-mesh { animation: meshPulse 8s ease-in-out infinite alternate; }
@keyframes meshPulse { 0%{opacity:.9;transform:scale(1)} 100%{opacity:1;transform:scale(1.05)} }

/* floating shapes */
.hs {
  position: absolute; border-radius: 50%;
  animation: hsFloat ease-in-out infinite alternate;
  border: 1.5px solid rgba(255,255,255,.07);
}
@keyframes hsFloat { from{transform:translateY(0) rotate(0deg)} to{transform:translateY(-26px) rotate(180deg)} }

/* hero badge entrance */
.hero-badge { transition: opacity .5s ease, transform .5s ease; }
.hero-badge.in { opacity: 1 !important; transform: none !important; }
@keyframes pdot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }
.pulse-dot { animation: pdot 2s infinite; }

/* hero text fade-ins */
#heroDesc, #heroBtns, #heroProof, #heroStats {
  transition: opacity .6s ease, transform .6s ease;
}
#heroDesc.in, #heroBtns.in, #heroProof.in, #heroStats.in { opacity: 1 !important; transform: none !important; }

/* typewriter line */
.h1-type { -webkit-text-stroke: 1.5px rgba(151,192,217,.5); transition: color .4s, -webkit-text-stroke .4s; }
.h1-type.done { color: var(--sky) !important; -webkit-text-stroke: 0px transparent; }
.type-cur {
  display: inline-block; width: 3px; height: .82em; background: var(--yellow);
  border-radius: 2px; margin-left: 4px; vertical-align: middle;
  animation: blinkCur .65s step-end infinite;
}
@keyframes blinkCur { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── STAT CARD HOVER BAR ──────────────────────────────────── */
.stat-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .45s;
}
.stat-card:hover::before { transform: scaleX(1); }

/* ── SERVICE CARD ACCENT BAR ──────────────────────────────── */
.srv-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.group:hover .srv-accent { transform: scaleX(1); }

/* ── SKILL BAR ────────────────────────────────────────────── */
.skill-fill {
  height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transition: width 1.6s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.skill-fill::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--sky);
  border: 3px solid var(--off-white); box-shadow: 0 0 0 3px var(--sky);
}

/* ── FAQ OPEN STATE ───────────────────────────────────────── */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-item.open .faq-ico { background: var(--blue) !important; color: white !important; transform: rotate(45deg); }

/* ── TICKER ───────────────────────────────────────────────── */
.ticker-track { animation: ticker 28s linear infinite; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── MOBILE MENU ──────────────────────────────────────────── */
#mobMenu { transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
#mobMenu.open { transform: translateX(0); }

/* ── BURGER OPEN ──────────────────────────────────────────── */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── PRE-FOOTER CTA STRIP ─────────────────────────────────── */
.ft-cta-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 600px 400px at 75% 50%, rgba(151,192,217,.15), transparent);
}

/* ── PULSING GREEN DOT ────────────────────────────────────── */
@keyframes pulseG { 0%,100%{box-shadow:0 0 0 0 rgba(41,201,64,.5)} 50%{box-shadow:0 0 0 7px rgba(41,201,64,0)} }
.pulse-g { animation: pulseG 2s infinite; }

/* ── SCROLL PROGRESS ──────────────────────────────────────── */
#sp { transition: width .08s linear; }
/* ── MOBILE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* Reduce section vertical padding on mobile */
  section { padding-top: 56px; padding-bottom: 56px; }

  /* Hero H1 tighter tracking on small screens */
  .hero-h1, h1 { letter-spacing: -1.5px; }

  /* Sticky booking bar — hide on small screens */
  #sticky { display: none !important; }

  /* Portfolio grid: 12-col collapses to 1-col */
  .col-span-7, .col-span-5 { grid-column: span 1 !important; }

  /* Skills section: reduce gap */
  .skills-inner { gap: 12px; }

  /* FAQ section: reduce padding */
  .faq-layout { gap: 32px; }

  /* Service bullets: smaller gap */
  .srv-bullets { gap: 6px; }

  /* Ticker: slightly smaller on mobile */
  .ticker-track { gap: 32px; }

  /* Stat card: reduce padding */
  .stat-card { padding: 36px 16px; }

  /* Nav: reduce px */
  .nav-in { padding-left: 16px !important; padding-right: 16px !important; }

  /* Footer CTA strip */
  .ft-cta-strip { padding: 40px 16px; }
  .ft-cta-strip .ft-cta-actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  /* Process row connector line hidden on mobile */
  .process-connector { display: none; }

  /* Service page hero stat grid hidden on mobile — already done with hidden lg:grid */
  .hero-stats-mobile { display: none; }

  /* Footer: stack contact items */
  .ft-contacts { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ── NAV MOBILE OPEN STATE ───────────────────────────────────── */
body.menu-open { overflow: hidden; }