/* ============================================================
   Arktropix — Motion Layer
   Premium scroll-driven animation system (designmd Motion-Driven).
   Progressive enhancement: everything works without JS/motion.
   ============================================================ */

/* ---- easing tokens ---- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 320ms;
  --dur-mid: 620ms;
  --dur-slow: 900ms;
}

/* ============================================================
   PAGE LOAD CHOREOGRAPHY (hero)
   ============================================================ */
.js-motion .hero .hero-tag,
.js-motion .hero h1,
.js-motion .hero .hero-sub,
.js-motion .hero .d-flex,
.js-motion .hero .stat-card,
.js-motion .hero-scroll-cue {
  opacity: 0;
  transform: translateY(26px);
  will-change: transform, opacity;
}
.js-motion .hero.is-in .hero-tag,
.js-motion .hero.is-in h1,
.js-motion .hero.is-in .hero-sub,
.js-motion .hero.is-in .d-flex,
.js-motion .hero.is-in .stat-card,
.js-motion .hero.is-in .hero-scroll-cue {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
/* staggered delays */
.js-motion .hero.is-in .hero-tag       { transition-delay: 0.05s; }
.js-motion .hero.is-in h1              { transition-delay: 0.15s; }
.js-motion .hero.is-in .hero-sub      { transition-delay: 0.28s; }
.js-motion .hero.is-in .d-flex        { transition-delay: 0.40s; }
.js-motion .hero.is-in .stat-card:nth-child(1),
.js-motion .hero.is-in .col-12 .stat-card { transition-delay: 0.44s; }
.js-motion .hero.is-in .col-6:nth-child(2) .stat-card { transition-delay: 0.54s; }
.js-motion .hero.is-in .col-6:nth-child(3) .stat-card { transition-delay: 0.64s; }
.js-motion .hero.is-in .hero-scroll-cue { transition-delay: 0.9s; }

/* hero headline: per-line clip reveal */
.js-motion .hero h1 span {
  display: inline-block;
}

/* ============================================================
   SCROLL REVEAL (Intersection Observer adds .in)
   ============================================================ */
.js-motion [data-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity var(--dur-mid) var(--ease-out-quint),
              transform var(--dur-mid) var(--ease-out-quint);
}
.js-motion [data-anim="up"]      { transform: translateY(40px); }
.js-motion [data-anim="down"]    { transform: translateY(-40px); }
.js-motion [data-anim="left"]    { transform: translateX(-48px); }
.js-motion [data-anim="right"]   { transform: translateX(48px); }
.js-motion [data-anim="scale"]   { transform: scale(0.92); }
.js-motion [data-anim="blur"]    { filter: blur(12px); transform: translateY(24px); }
.js-motion [data-anim="rotate"]  { transform: translateY(40px) rotate(-3deg); }

.js-motion [data-anim].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* stagger children: parent gets data-stagger, kids animate in sequence */
.js-motion [data-stagger] > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-mid) var(--ease-out-quint),
              transform var(--dur-mid) var(--ease-out-quint);
  will-change: transform, opacity;
}
.js-motion [data-stagger].in > * {
  opacity: 1;
  transform: none;
}
.js-motion [data-stagger].in > *:nth-child(1)  { transition-delay: 0.00s; }
.js-motion [data-stagger].in > *:nth-child(2)  { transition-delay: 0.08s; }
.js-motion [data-stagger].in > *:nth-child(3)  { transition-delay: 0.16s; }
.js-motion [data-stagger].in > *:nth-child(4)  { transition-delay: 0.24s; }
.js-motion [data-stagger].in > *:nth-child(5)  { transition-delay: 0.32s; }
.js-motion [data-stagger].in > *:nth-child(6)  { transition-delay: 0.40s; }
.js-motion [data-stagger].in > *:nth-child(7)  { transition-delay: 0.48s; }
.js-motion [data-stagger].in > *:nth-child(8)  { transition-delay: 0.56s; }
.js-motion [data-stagger].in > *:nth-child(9)  { transition-delay: 0.64s; }
.js-motion [data-stagger].in > *:nth-child(10) { transition-delay: 0.72s; }

/* ============================================================
   SECTION HEADING — masked line reveal
   ============================================================ */
.js-motion .section-label[data-anim] { transition-delay: 0.0s; }
.js-motion .section-title[data-anim] { transition-delay: 0.08s; }

/* ============================================================
   PARALLAX (JS sets --p in range; translateY via var)
   ============================================================ */
.js-motion [data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* hero video subtle scale drift on scroll */
.js-motion .hero-video {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.05));
}

/* ============================================================
   MICRO-INTERACTIONS (hover)
   ============================================================ */
/* lift + glow on cards */
.service-card, .price-card, .about-card, .news-card, .stat-card,
.step, .portfolio-item, .review-card {
  transition: transform var(--dur-fast) var(--ease-out-quint),
              box-shadow var(--dur-fast) var(--ease-out-quint),
              border-color var(--dur-fast) var(--ease-out-quint);
}
@media (hover: hover) {
  .service-card:hover, .price-card:hover, .about-card:hover {
    transform: translateY(-8px);
  }
  .stat-card:hover { transform: translateY(-5px) scale(1.015); }

  /* magnetic buttons (JS drives --mx/--my) */
  .btn-primary-arktropix, .btn-secondary-arktropix {
    transition: transform var(--dur-fast) var(--ease-out-quint),
                box-shadow var(--dur-fast) var(--ease-out-quint),
                filter var(--dur-fast) var(--ease-out-quint);
  }
  .btn-magnetic {
    transform: translate(var(--mx, 0px), var(--my, 0px));
  }

  /* sheen sweep over featured items */
  .stat-card.featured { position: relative; overflow: hidden; }
  .stat-card.featured::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: skewX(-20deg); transition: left 0.7s var(--ease-out-quint); pointer-events: none;
  }
  .stat-card.featured:hover::after { left: 150%; }
}

/* nav links: animated underline already themed; add smooth color */
.navbar-arktropix .nav-link { transition: color var(--dur-fast) var(--ease-out-quint); }

/* ============================================================
   COUNTER (stat numbers pop when revealed)
   ============================================================ */
.js-motion .stat-num.is-in {
  animation: statPop 0.7s var(--ease-out-expo) both;
}
@keyframes statPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================================
   MARQUEE strip (badges) — subtle infinite drift on desktop
   ============================================================ */
@media (min-width: 992px) and (hover: hover) {
  .js-motion .badge-item {
    transition: transform var(--dur-fast) var(--ease-out-quint),
                border-color var(--dur-fast) var(--ease-out-quint);
  }
  .js-motion .badge-item:hover { transform: translateY(-3px); }
}

/* ============================================================
   SECTION ENTRANCE dividers — thin animated rule
   ============================================================ */
.js-motion .anim-rule {
  position: relative; height: 1px; background: transparent; overflow: hidden; margin: 0;
}
.js-motion .anim-rule::before {
  content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--ice, #79CCED), transparent);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.js-motion .anim-rule.in::before { transform: scaleX(1); }

/* ============================================================
   REDUCED MOTION — disable everything, show content
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-anim],
  .js-motion [data-stagger] > *,
  .js-motion .hero .hero-tag,
  .js-motion .hero h1,
  .js-motion .hero .hero-sub,
  .js-motion .hero .d-flex,
  .js-motion .hero .stat-card,
  .js-motion .hero-scroll-cue {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .js-motion [data-parallax], .js-motion .hero-video { transform: none !important; }
  .js-motion .stat-num.is-in { animation: none !important; }
  .js-motion .anim-rule::before { transform: scaleX(1) !important; }
}

/* ============================================================
   HERO 3D STAGE + BLUEPRINT (signature element)
   ============================================================ */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

/* blueprint corner brackets that draw in */
.blueprint-frame { position: absolute; inset: 6%; z-index: 2; pointer-events: none; }
.bp-corner {
  position: absolute; width: 34px; height: 34px;
  border-color: rgba(121,204,237,0.55); border-style: solid; border-width: 0;
  opacity: 0; transition: opacity 0.8s var(--ease-out-expo);
}
.js-motion .hero.is-in .bp-corner { opacity: 1; }
.bp-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; transition-delay: 0.6s; }
.bp-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; transition-delay: 0.7s; }
.bp-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; transition-delay: 0.8s; }
.bp-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; transition-delay: 0.9s; }

/* floating data tags (replace stat cards) */
.hero-datatag {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: 14px;
  background: rgba(16,25,39,0.66);
  border: 1px solid rgba(121,204,237,0.22);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  animation: floatTag 6s ease-in-out infinite;
}
.hero-datatag .dt-num { font-size: 30px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.5px; }
.hero-datatag .dt-ico { font-size: 22px; color: var(--ice, #79CCED); line-height: 1; }
.hero-datatag .dt-lbl { font-size: 12px; color: #AEC2D8; font-weight: 600; white-space: nowrap; }
.dt-1 { top: 6%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.dt-2 { bottom: 16%; left: -4%; animation-delay: 1.2s; }
.dt-3 { bottom: 22%; right: -6%; animation-delay: 2.4s; }
@keyframes floatTag {
  0%, 100% { transform: translateY(0) translateX(var(--tx, 0)); }
  50% { transform: translateY(-12px) translateX(var(--tx, 0)); }
}
.dt-1 { --tx: -50%; }

/* thin scan line sweeping the stage (blueprint scanner) */
.hero-stage::before {
  content: ''; position: absolute; left: 6%; right: 6%; height: 2px; z-index: 2;
  top: 8%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(121,204,237,0.6), transparent);
  animation: scanline 5.5s var(--ease-in-out-soft) infinite;
  opacity: 0;
}
.js-motion .hero.is-in .hero-stage::before { opacity: 1; }
@keyframes scanline {
  0% { top: 8%; opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { top: 90%; opacity: 0; }
}

@media (max-width: 991px) {
  .hero-stage { aspect-ratio: 4 / 3; max-height: 380px; margin-top: 20px; }
  .hero-datatag .dt-num { font-size: 24px; }
  .dt-2 { left: 0; } .dt-3 { right: 0; }
}

/* ============================================================
   3D TILT PANELS (cards react to pointer with depth)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.2s var(--ease-out-quint);
  }
  .tilt-shine {
    position: relative; overflow: hidden;
  }
  .tilt-shine::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(121,204,237,0.14), transparent 45%);
    opacity: 0; transition: opacity 0.3s;
  }
  .tilt-shine:hover::before { opacity: 1; }
}

/* ============================================================
   AMBIENT: floating particles behind sections
   ============================================================ */
.ambient-dots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient-dots span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(121,204,237,0.4);
  animation: driftUp linear infinite;
}
@keyframes driftUp {
  from { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  to { transform: translateY(-120px) scale(0.4); opacity: 0; }
}

/* ============================================================
   MAGNETIC + smoother reveal easing upgrades
   ============================================================ */
.js-motion [data-anim="clip"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition: clip-path var(--dur-slow) var(--ease-out-expo);
}
.js-motion [data-anim="clip"].in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .hero-datatag, .hero-stage::before { animation: none !important; }
  .ambient-dots span { animation: none !important; opacity: 0.3 !important; }
}