/* Site-wide motion & hover system — Adisa Abiodun Sunday */

@view-transition{
  navigation: auto;
}

:root{
  --site-accent: #3B82F6;
  --site-navy: #0B1020;
}

/* ---------- Buttons ---------- */
.elementor-button{
  transition: transform .22s cubic-bezier(.16,.8,.24,1), box-shadow .22s ease, background-color .22s ease, color .22s ease !important;
}
.elementor-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(11,18,32,0.18);
}
.elementor-button:active{
  transform: translateY(-1px);
}

/* ---------- Icon boxes ---------- */
.elementor-icon-box-wrapper .elementor-icon-box-icon{
  transition: transform .3s cubic-bezier(.16,.8,.24,1), background-color .3s ease;
}
.elementor-icon-box-wrapper:hover .elementor-icon-box-icon{
  transform: translateY(-4px) scale(1.08);
}

/* ---------- Nav links: animated underline ---------- */
.ct-header-menu-item > a,
.ct-panel-content-inner .menu-item > a,
.menu-item > a{
  position: relative;
}
.ct-header-menu-item > a::after{
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--site-accent);
  transition: width .25s cubic-bezier(.16,.8,.24,1);
}
.ct-header-menu-item > a:hover::after,
.ct-header-menu-item.current-menu-item > a::after{
  width: 100%;
}

/* ---------- Generic card hover (opt-in via .site-card) ---------- */
.site-card{
  transition: transform .28s cubic-bezier(.16,.8,.24,1), box-shadow .28s ease, border-color .28s ease;
}
.site-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(11,18,32,0.12);
}

/* Portfolio-style card with image zoom + overlay reveal */
.site-portfolio-card{ overflow: hidden; position: relative; }
.site-portfolio-card .site-portfolio-media img,
.site-portfolio-card .site-portfolio-media{
  transition: transform .5s cubic-bezier(.16,.8,.24,1);
}
.site-portfolio-card:hover .site-portfolio-media img,
.site-portfolio-card:hover .site-portfolio-media{
  transform: scale(1.06);
}
.site-portfolio-card .site-portfolio-cta{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.site-portfolio-card:hover .site-portfolio-cta{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Scroll reveal ---------- */
body.site-motion-ready [data-element_type="container"].site-reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--reveal-delay, 0s);
}
body.site-motion-ready [data-element_type="container"].site-reveal.site-visible{
  opacity: 1;
  transform: none;
}

/* ---------- Filter bar ---------- */
.site-filter-btn{
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---------- Animated counters ---------- */
.site-counter{ font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body.site-motion-ready [data-element_type="container"].site-reveal{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Nav dropdowns: dark-theme consistent submenu styling ---------- */
.header-menu-1 .sub-menu,
.mobile-menu .sub-menu{
  background: #0B1020 !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(11,18,32,0.28);
  padding: 8px;
  min-width: 260px;
}
.header-menu-1 .sub-menu .menu-item > a,
.mobile-menu .sub-menu .menu-item > a{
  color: rgba(255,255,255,0.85) !important;
  padding: 10px 14px !important;
  border-radius: 8px;
  transition: background-color .18s ease, color .18s ease;
  white-space: normal;
}
.header-menu-1 .sub-menu .menu-item > a:hover,
.mobile-menu .sub-menu .menu-item > a:hover{
  background: rgba(59,130,246,0.14) !important;
  color: #3B82F6 !important;
}
.header-menu-1 .sub-menu .menu-item.current-menu-item > a{
  color: #3B82F6 !important;
}
/* Mobile off-canvas panel background/text, kept legible and on-brand */
.mobile-menu{
  --theme-text-color: #0B1020;
}
.mobile-menu .menu-item-has-children > .ct-sub-menu-parent > a{
  font-weight: 600;
}

/* ================= CINEMATIC HOME UPGRADE ================= */

/* ---------- Hero staged entrance ---------- */
.cine-hero{ position: relative; overflow: hidden; }
.cine-hero-canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.cine-hero-content, .cine-hero-media{ position: relative; z-index: 1; }

body.site-motion-ready .cine-eyebrow,
body.site-motion-ready .cine-headline,
body.site-motion-ready .cine-sub,
body.site-motion-ready .cine-cta,
body.site-motion-ready .cine-specialties{
  opacity: 0;
  transform: translateY(22px);
  animation: cineIn .9s cubic-bezier(.16,.8,.24,1) forwards;
}
body.site-motion-ready .cine-eyebrow{ animation-delay: .05s; }
body.site-motion-ready .cine-headline{ animation-delay: .22s; }
body.site-motion-ready .cine-sub{ animation-delay: .46s; }
body.site-motion-ready .cine-cta{ animation-delay: .64s; }
body.site-motion-ready .cine-specialties{ animation-delay: .78s; }
@keyframes cineIn{ to{ opacity:1; transform:none; } }

.cine-headline{ letter-spacing: -0.01em; }

body.site-motion-ready .cine-hero-media{
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  animation: cineInMedia .9s cubic-bezier(.16,.8,.24,1) .3s forwards;
}
@keyframes cineInMedia{ to{ opacity:1; transform:none; } }
body.site-motion-ready.js-motion-ready .cine-hero-media{
  animation: cineInMedia .9s cubic-bezier(.16,.8,.24,1) .3s forwards, cineFloat 6s ease-in-out 1.3s infinite;
}
@keyframes cineFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------- Section rhythm: alternating tonal bands ---------- */
[data-element_type="container"].sec-tint-a{ background-color: rgba(255,255,255,0.015); }
[data-element_type="container"].sec-tint-b{ background-color: rgba(11,18,32,0.02); }

/* ---------- Reveal variants ---------- */
body.site-motion-ready [data-element_type="container"].site-reveal.reveal-blur{
  filter: blur(6px);
}
body.site-motion-ready [data-element_type="container"].site-reveal.reveal-blur.site-visible{
  filter: blur(0);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1), filter .8s ease;
}
body.site-motion-ready [data-element_type="container"].site-reveal.reveal-scale{
  transform: translateY(26px) scale(.96);
}
body.site-motion-ready [data-element_type="container"].site-reveal.reveal-scale.site-visible{
  transform: none;
}
body.site-motion-ready [data-element_type="container"].site-reveal.reveal-mask{
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.16,.8,.24,1), opacity .5s ease;
}
body.site-motion-ready [data-element_type="container"].site-reveal.reveal-mask.site-visible{
  clip-path: inset(0 0 0% 0);
}

/* ---------- Final CTA cinematic band ---------- */
[data-element_type="container"].cine-final-cta{
  background: radial-gradient(120% 140% at 50% 0%, rgba(59,130,246,0.14), rgba(11,18,32,0) 60%);
}

/* ---------- Service icon-box category hover accents ---------- */
.svc-strategy .elementor-icon-box-icon,
.svc-seo .elementor-icon-box-icon,
.svc-leadgen .elementor-icon-box-icon,
.svc-ai .elementor-icon-box-icon,
.svc-social .elementor-icon-box-icon,
.svc-content .elementor-icon-box-icon,
.svc-website .elementor-icon-box-icon,
.svc-email .elementor-icon-box-icon,
.svc-data .elementor-icon-box-icon{
  position: relative;
  isolation: isolate;
}
/* Strategy: compass tilt */
.svc-strategy:hover .elementor-icon-box-icon{ transform: translateY(-4px) rotate(10deg) scale(1.1); }
/* SEO: radar sweep ring */
.svc-seo .elementor-icon-box-icon::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border: 1.5px solid var(--site-accent); opacity:0; transform: scale(.7);
  transition: opacity .3s ease, transform .5s cubic-bezier(.16,.8,.24,1); z-index:-1;
}
.svc-seo:hover .elementor-icon-box-icon::after{ opacity:.6; transform: scale(1.25); }
/* Lead Generation: connecting-dot ping */
.svc-leadgen .elementor-icon-box-icon::before{
  content:''; position:absolute; top:-6px; right:-6px; width:6px; height:6px; border-radius:50%;
  background: var(--site-accent); opacity:0; transform: scale(.4);
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,.8,.24,1);
}
.svc-leadgen:hover .elementor-icon-box-icon::before{ opacity:1; transform: scale(1); animation: pingDot 1.2s ease-out infinite; }
@keyframes pingDot{ 0%{ box-shadow: 0 0 0 0 rgba(59,130,246,.5);} 100%{ box-shadow: 0 0 0 8px rgba(59,130,246,0);} }
/* AI: scanline sweep */
.svc-ai .elementor-icon-box-icon::after{
  content:''; position:absolute; left:-10%; top:50%; width:120%; height:1.5px;
  background: linear-gradient(90deg, transparent, var(--site-accent), transparent);
  transform: translateY(-50%) scaleX(0); opacity:0; transition: transform .5s ease, opacity .3s ease;
}
.svc-ai:hover .elementor-icon-box-icon::after{ opacity:.8; transform: translateY(-50%) scaleX(1); }
/* Social: ripple pulse */
.svc-social .elementor-icon-box-icon::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background: var(--site-accent); opacity:.25; transform: scale(0); z-index:-1;
  transition: transform .45s cubic-bezier(.16,.8,.24,1), opacity .45s ease;
}
.svc-social:hover .elementor-icon-box-icon::after{ transform: scale(1); opacity:.12; }
/* Content: underline draw */
.svc-content .elementor-icon-box-icon::before{
  content:''; position:absolute; left:10%; right:10%; bottom:-6px; height:2px;
  background: var(--site-accent); transform: scaleX(0); transform-origin:left;
  transition: transform .35s cubic-bezier(.16,.8,.24,1);
}
.svc-content:hover .elementor-icon-box-icon::before{ transform: scaleX(1); }
/* Website: blinking cursor line */
.svc-website .elementor-icon-box-icon::after{
  content:''; position:absolute; right:-10px; top:12%; bottom:12%; width:2px;
  background: var(--site-accent); opacity:0; transition: opacity .2s ease;
}
.svc-website:hover .elementor-icon-box-icon::after{ opacity:.8; animation: cursorBlink 1s steps(2) infinite; }
@keyframes cursorBlink{ 50%{ opacity:0; } }
/* Email: float/lift */
.svc-email:hover .elementor-icon-box-icon{ transform: translateY(-6px) rotate(-4deg) scale(1.08); }
/* Data: bar pulse */
.svc-data .elementor-icon-box-icon::after{
  content:''; position:absolute; inset:-8px; border-radius:8px;
  box-shadow: 0 0 0 0 rgba(59,130,246,.35); opacity:0; transition: opacity .3s ease;
}
.svc-data:hover .elementor-icon-box-icon::after{ opacity:1; animation: dataPulse 1.4s ease-out infinite; }
@keyframes dataPulse{ 0%{ box-shadow: 0 0 0 0 rgba(59,130,246,.35);} 100%{ box-shadow: 0 0 0 10px rgba(59,130,246,0);} }

/* ---------- Cinematic case-study cards (no image yet: gradient cover + reveal) ---------- */
.cine-case-card{
  position: relative; overflow: hidden; border-radius: 16px;
  transition: transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .4s ease;
}
.cine-case-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.9;
  background: linear-gradient(155deg, rgba(11,18,32,0.9), rgba(11,18,32,0.55));
  transition: opacity .4s ease;
}
.cine-case-card.cat-seo::before{ background: linear-gradient(155deg, rgba(59,130,246,.16), rgba(11,18,32,.85)); }
.cine-case-card.cat-leadgen::before{ background: linear-gradient(155deg, rgba(59,130,246,.14), rgba(11,18,32,.85)); }
.cine-case-card.cat-website::before{ background: linear-gradient(155deg, rgba(168,85,247,.14), rgba(11,18,32,.85)); }
.cine-case-card > *{ position: relative; z-index: 1; }
.cine-case-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 48px rgba(11,18,32,0.22); }
.cine-case-card .elementor-button::after{
  content:'→'; margin-left:8px; display:inline-block; transition: transform .3s cubic-bezier(.16,.8,.24,1);
}
.cine-case-card:hover .elementor-button::after{ transform: translateX(6px); }

/* ---------- Mobile adjustments ---------- */
@media (max-width: 767px){
  .cine-hero-canvas{ opacity: .6; }
  body.site-motion-ready .cine-hero-media{ animation-delay: .2s; }
}

/* ---------- prefers-reduced-motion: disable cinematic keyframes ---------- */
@media (prefers-reduced-motion: reduce){
  body.site-motion-ready .cine-eyebrow,
  body.site-motion-ready .cine-headline,
  body.site-motion-ready .cine-sub,
  body.site-motion-ready .cine-cta,
  body.site-motion-ready .cine-specialties,
  body.site-motion-ready .cine-hero-media{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .svc-leadgen:hover .elementor-icon-box-icon::before,
  .svc-ai:hover .elementor-icon-box-icon::after,
  .svc-website:hover .elementor-icon-box-icon::after,
  .svc-data:hover .elementor-icon-box-icon::after{ animation:none !important; }
  .cine-hero-canvas{ display:none !important; }
  [data-element_type="container"].site-reveal.reveal-blur{ filter:none !important; }
  [data-element_type="container"].site-reveal.reveal-mask{ clip-path:none !important; }
}

/* ---------- Tools & Technology: categorized chip grid ---------- */
.tools-category{ padding-bottom: 4px; border-bottom: 1px solid rgba(11,18,32,0.06); }
.tools-category:last-child{ border-bottom: none; padding-bottom: 0; }
.tools-cat-label{ opacity: .85; }

/* ---------- Real CSS Grid card layouts (Elementor's flex-item width
   control does not reliably render per-card percentage widths in this
   version - these classes replace it with guaranteed, testable CSS Grid). ---------- */
.grid-2up,.grid-3up,.grid-4up,.grid-5up,.grid-6up,.grid-8up{
  display:grid !important;
  gap:24px;
  align-items:stretch;
}
.grid-2up{ grid-template-columns:repeat(2,1fr); }
.grid-3up{ grid-template-columns:repeat(3,1fr); }
.grid-4up{ grid-template-columns:repeat(4,1fr); }
.grid-5up{ grid-template-columns:repeat(5,1fr); }
.grid-6up{ grid-template-columns:repeat(3,1fr); }
.grid-8up{ grid-template-columns:repeat(4,1fr); }
.grid-2up > *,.grid-3up > *,.grid-4up > *,.grid-5up > *,.grid-6up > *,.grid-8up > *{
  width:auto !important;
  max-width:100% !important;
}
@media (max-width:1024px){
  .grid-3up,.grid-4up,.grid-5up,.grid-6up,.grid-8up{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid-2up,.grid-3up,.grid-4up,.grid-5up,.grid-6up,.grid-8up{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width:420px){
  .grid-5up{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Process flow connector: a subtle arrow between steps in a
   single-row desktop grid, to read as a sequence rather than a card wall.
   Desktop-only -- once the grid wraps to 2 columns, adjacent cards are no
   longer a left-to-right sequence, so the connector would mislead. ---------- */
.cine-process-flow > .site-card{ position:relative; }
.cine-process-flow > .site-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-24px;
  width:18px;
  height:18px;
  transform:translate(50%,-50%);
  background:no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E");
  opacity:0.4;
  pointer-events:none;
}
@media (max-width:1024px){
  .cine-process-flow > .site-card::after{ display:none; }
}
/* ---------- Balanced short row (e.g. "3+2" category matrix): fixed,
   comfortable column width, centered as a group -- for a trailing row
   that's intentionally shorter than the row above it, not a dangling
   leftover. Pair with a grid-Nup row above for the full-width rows. ---------- */
.grid-2up-centered{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 384px));
  justify-content:center;
  gap:24px;
  align-items:stretch;
}
.grid-2up-centered > *{ width:auto !important; max-width:100% !important; }
@media (max-width:1024px){
  .grid-2up-centered{ grid-template-columns:repeat(2,1fr); justify-content:stretch; }
}
@media (max-width:600px){
  .grid-2up-centered{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
/* ---------- Dangling last item in an odd-count grid: center it instead
   of leaving it stuck to the left column with empty space beside it. ---------- */
.grid-center-last-odd > *:last-child:nth-child(odd){
  grid-column: 1 / -1;
  justify-self: center;
  max-width: calc(50% - 12px);
}
@media (max-width:1024px){
  .grid-2up > *:last-child:nth-child(odd),
  .grid-3up > *:last-child:nth-child(odd),
  .grid-4up > *:last-child:nth-child(odd),
  .grid-5up > *:last-child:nth-child(odd),
  .grid-6up > *:last-child:nth-child(odd),
  .grid-8up > *:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: calc(50% - 12px);
  }
}
@media (max-width:600px){
  .grid-2up > *:last-child:nth-child(odd),
  .grid-3up > *:last-child:nth-child(odd),
  .grid-4up > *:last-child:nth-child(odd),
  .grid-5up > *:last-child:nth-child(odd),
  .grid-6up > *:last-child:nth-child(odd),
  .grid-8up > *:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: calc(50% - 6px);
  }
}

/* ---------- Tools chip rows: real CSS Grid (auto-fill), not flex-wrap
   relying on each chip's own width control, which does not reliably
   render in this Elementor build. ---------- */
.tools-chip-row{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:10px;
}
.tools-chip-row > *{ width:auto !important; max-width:100% !important; }
@media (max-width:600px){
  .tools-chip-row{ grid-template-columns:repeat(2,1fr); gap:8px; }
}