/* ========================================================
   GCT Interactivity Layer — scroll reveals, magnetic buttons,
   tilt, animated counters, custom cursor, ambient grid bg.
   Designed to feel cool and techy without being heavy.
   ======================================================== */

/* ---------- 1. Scroll-reveal primitives ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.13s; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.21s; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.29s; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.37s; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.53s; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.61s; }
.reveal-stagger.is-visible > *:nth-child(9)  { transition-delay: 0.69s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.77s; }

/* ---------- 2. Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; z-index: 9999;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c85a2a 0%, #e06b35 50%, #1c3461 100%);
  box-shadow: 0 0 8px rgba(200, 90, 42, 0.5);
  transition: width 0.05s linear;
}

/* ---------- 3. Magnetic / shine buttons ---------- */
.nav-cta, .btn-submit, #logo-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.nav-cta::before, .btn-submit::before, #logo-toggle::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.nav-cta:hover::before, .btn-submit:hover::before, #logo-toggle:hover::before {
  transform: translateX(100%);
}

/* ---------- 4. Service / project / why card hovers ---------- */
.service-card, .why-card, .project-card, .case-card-real {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.service-card:hover, .why-card:hover, .project-card:hover, .case-card-real:hover {
  transform: translateY(-4px);
}

/* Animated underline for nav links */
nav .nav-links a, .footer-links a {
  position: relative;
}
nav .nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  height: 1.5px; width: 0;
  background: var(--orange);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
nav .nav-links a:hover::after, nav .nav-links a.active::after {
  width: 100%;
}

/* Logo cells: subtle scale on hover */
.logo-cell {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s, box-shadow 0.3s !important;
}
.logo-cell:hover {
  transform: translateY(-2px) scale(1.02);
}

/* ---------- 5. Hero ambient grid background ---------- */
#hero {
  position: relative;
  overflow: hidden;
}
#hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(28, 52, 97, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 52, 97, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: hero-grid-drift 24s linear infinite;
}
#hero > * { position: relative; z-index: 1; }
@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* Glowing accent dot in hero */
.hero-glow {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 90, 42, 0.18) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
  opacity: 0;
  animation: hero-glow-fade-in 1.4s 0.3s ease-out forwards, hero-glow-pulse 8s ease-in-out infinite 1.7s;
}
@keyframes hero-glow-fade-in { to { opacity: 1; } }
@keyframes hero-glow-pulse {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(40px, -20px); }
}

/* ---------- 6. Section eyebrow with animated dot ---------- */
.section-eyebrow {
  position: relative;
  padding-left: 18px;
}
html[dir="rtl"] .section-eyebrow {
  padding-left: 0;
  padding-right: 18px;
}
.section-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(200, 90, 42, 0.18);
  animation: eyebrow-pulse 2.4s ease-in-out infinite;
}
html[dir="rtl"] .section-eyebrow::before {
  left: auto; right: 0;
}
@keyframes eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 90, 42, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(200, 90, 42, 0.05); }
}

/* ---------- 7. Animated counters --- visual cue ---------- */
[data-count-target] { font-variant-numeric: tabular-nums; }

/* ---------- 8. Process timeline animated trail ---------- */
.process-step::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 0;
  background: linear-gradient(to bottom, var(--orange), transparent);
  transform: translateX(-50%);
  transition: height 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.process-step.is-visible::after { height: 100%; }

/* ---------- 9. Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important; transform: none !important;
    transition: none !important;
  }
  #hero::before, .hero-glow, .section-eyebrow::before {
    animation: none !important;
  }
}