/* ============================================================
   SiteCraft — Full Animation CSS (matching ApexTint site)
   ============================================================ */

/* ── Scroll progress bar ── */
#sc-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #3B82F6, #06B6D4);
  z-index: 9999; transition: width 0.1s linear; pointer-events: none;
}

/* ── Intro splash ── */
#sc-splash {
  position: fixed; inset: 0; z-index: 10000;
  background: #060810;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#sc-splash.sc-splash--out { opacity: 0; pointer-events: none; }
.sc-splash-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(59,130,246,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: sc-grid-pulse 2s ease-in-out infinite alternate;
}
@keyframes sc-grid-pulse { from { opacity: 0.4; } to { opacity: 1; } }
.sc-splash-line {
  position: absolute; top: 50%; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, #3B82F6, #06B6D4, transparent);
  transform: scaleX(0); animation: sc-line-grow 0.8s 0.3s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sc-line-grow { to { transform: scaleX(1); } }
.sc-splash-logo {
  position: relative; z-index: 1;
  font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 2.5rem;
  color: #F0F4FF; letter-spacing: -0.04em;
  opacity: 0; animation: sc-fade-up 0.8s 0.5s ease forwards;
}
.sc-splash-logo span { color: #3B82F6; }
.sc-splash-sub {
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 0.85rem;
  color: #6B7A99; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.5rem;
  opacity: 0; animation: sc-fade-up 0.8s 0.7s ease forwards;
}
@keyframes sc-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Cursor blob + dot ── */
#sc-cursor-blob {
  position: fixed; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.12), rgba(6,182,212,0.06) 60%, transparent);
  pointer-events: none; z-index: 9990; top: 0; left: 0; will-change: transform;
  opacity: 0; transition: opacity 1s ease;
}
#sc-cursor-dot {
  position: fixed; width: 12px; height: 12px; border-radius: 50%;
  background: #3B82F6; pointer-events: none; z-index: 9991; top: -20px; left: -20px;
  mix-blend-mode: screen; transform: translate(-50%,-50%); transition: background 0.2s;
}
body:has(a:hover) #sc-cursor-dot,
body:has(button:hover) #sc-cursor-dot { background: #F59E0B; width: 20px; height: 20px; }
@media (max-width: 900px) { #sc-cursor-blob, #sc-cursor-dot { display: none; } body { cursor: auto; } }
body { cursor: none; }
@media (max-width: 900px) { body { cursor: auto; } }

/* ── Click sparks ── */
.sc-spark {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: #3B82F6; pointer-events: none; z-index: 9992;
  transform: translate(-50%, -50%);
  animation: sc-spark-fly 0.9s ease-out forwards;
}
@keyframes sc-spark-fly {
  0% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(0); }
}

/* ── Nav brand dot pulse ── */
.sc-nav-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #3B82F6; margin-left: 4px; vertical-align: middle;
  animation: sc-dot-pulse 2s infinite;
}
@keyframes sc-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
  50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 0 5px rgba(59,130,246,0); }
}

/* ── Section fade-in ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html.js-ready .fade-in { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
  html.js-ready .fade-in.visible { opacity: 1; transform: translateY(0); }
  html.js-ready .fade-in.force-show { opacity: 1; transform: none; transition: none; }
  html.js-ready .stagger-item { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  html.js-ready .stagger-item.in-view { opacity: 1; transform: translateY(0) scale(1); }
  html.js-ready .stagger-item.force-show { opacity: 1; transform: none; transition: none; }
  html.js-ready .stagger-item.scale-rotate { transform: scale(.92) rotate(-1deg); }
  html.js-ready .stagger-item.scale-rotate.in-view { transform: scale(1) rotate(0); }
  html.js-ready .stagger-item.bounce { transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
  html.js-ready [data-count] { transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
  html.js-ready [data-count].in-view { transform: translateY(0); }
}
html:not(.js-ready) .fade-in,
html:not(.js-ready) .stagger-item { opacity: 1 !important; transform: none !important; }
/* Extra safety — items that never got triggered */
.stagger-item.force-show { opacity: 1 !important; transform: none !important; }
.fade-in.force-show { opacity: 1 !important; transform: none !important; }

/* ── Section divider scale ── */
.sc-divider {
  height: 1px; background: linear-gradient(90deg, transparent, rgba(59,130,246,0.4), transparent);
  transform: scaleX(0.6); transition: transform 0.8s cubic-bezier(.22,.61,.36,1);
}
.sc-divider.sc-div--visible { transform: scaleX(1); }

/* ── Hover lift ── */
.hover-lift { transition: transform .35s ease, box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-6px); }

/* ── 3D card spotlight ── */
.svc-card, .plan-card {
  --sx: 50%; --sy: 50%;
  background-image: radial-gradient(circle at var(--sx) var(--sy), rgba(59,130,246,0.08) 0%, transparent 55%);
}
.svc-card:hover, .plan-card:hover {
  background-image: radial-gradient(circle at var(--sx) var(--sy), rgba(59,130,246,0.12) 0%, transparent 55%);
}

/* ── Button arrow ── */
.btn-arrow { display: inline-block; transition: transform 0.25s ease; }
.btn-primary:hover .btn-arrow,
.btn-a:hover .btn-arrow,
.nav-cta:hover .btn-arrow { transform: translateX(4px); }

/* ── Nav link underline ── */
.nav-page-link { position: relative; }
.nav-page-link::after {
  content: ''; position: absolute; bottom: 2px; left: 0.75rem; right: 0.75rem; height: 1.5px;
  background: #3B82F6; transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-page-link:hover::after { transform: scaleX(1); }

/* ── Live ticker ── */
#sc-ticker {
  position: fixed; bottom: 80px; left: -400px; z-index: 1000;
  background: rgba(13,17,23,0.97); border: 1px solid rgba(59,130,246,0.3);
  border-radius: 50px; padding: 0.7rem 1.4rem; font-size: 0.82rem;
  color: #F0F4FF; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 600;
  transition: left 0.6s cubic-bezier(.34,1.56,.64,1); pointer-events: none;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4); backdrop-filter: blur(10px);
}
#sc-ticker.sc-ticker--in { left: 24px; }

/* ── Field focus ── */
.sc-focused {
  border-color: #3B82F6 !important;
  background: rgba(59,130,246,0.04) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* ── Hero section title tight ── */
.section-title { transition: letter-spacing 0.6s ease; }
.section-title.visible { letter-spacing: -0.03em; }

/* ── FAB ring pulse (for contact button) ── */
.sc-fab-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid rgba(59,130,246,0.5);
  animation: sc-ring-pulse 2s infinite;
}
@keyframes sc-ring-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Hero text rise stagger ── */
.hero-rise { opacity: 0; transform: translateY(32px); }
.hero-rise.visible { animation: sc-fade-up 0.8s ease forwards; }
.hero-rise:nth-child(1) { animation-delay: 0.1s; }
.hero-rise:nth-child(2) { animation-delay: 0.3s; }
.hero-rise:nth-child(3) { animation-delay: 0.5s; }
.hero-rise:nth-child(4) { animation-delay: 0.7s; }
.hero-rise:nth-child(5) { animation-delay: 0.9s; }

/* ── Hero stats counter bounce ── */
.hero-stat-num { display: inline-block; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }

/* ── Gallery glint sweep ── */
@keyframes sc-glint {
  0% { left: -100%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 150%; opacity: 0; }
}
.sc-glint {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.25), transparent);
  pointer-events: none; transform: skewX(-20deg);
  animation: sc-glint 0.9s ease-out forwards;
}

/* ── Ken-Burns hero (if hero has image) ── */
.hero-ken-burns {
  animation: sc-kb 22s ease-in-out infinite alternate;
}
@keyframes sc-kb {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, -1%); }
}