/* ============================================================
   RONEX — motion & micro-interactions
   ============================================================ */

/* ---- cursor glow (desktop) ---- */
.cursor-glow {
  position: fixed;
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.09) 0%, transparent 62%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.45s ease;
  mix-blend-mode: screen;
}
body.cursor-on .cursor-glow { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none !important; }
}

/* ---- gradient text shimmer ---- */
.text-grad-shimmer {
  background-size: 200% auto;
  animation: gradshimmer 6s ease-in-out infinite;
}
@keyframes gradshimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- reveal variants ---- */
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="blur"] { transform: translateY(20px); filter: blur(6px); }
[data-reveal="left"].in,
[data-reveal="right"].in,
[data-reveal="blur"].in,
[data-reveal="scale"].in { filter: none; }

/* ---- hero parallax layer ---- */
/* GSAP owns entrance transforms; CSS hover effects resume after completion. */
[data-reveal].gsap-reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
.hero-in.gsap-parallax,
.section .grid-bg.gsap-parallax { transition: none; }

.hero-in {
  will-change: transform;
  transition: transform 0.12s linear;
}
.hero .scroll-hint {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero.hero-scrolled .scroll-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

/* ---- button ripple ---- */
.btn .btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: btnripple 0.55s ease-out forwards;
}
@keyframes btnripple {
  to { transform: scale(4); opacity: 0; }
}

/* ---- magnetic lift hint ---- */
[data-magnetic] {
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), box-shadow 0.22s, background 0.22s, border-color 0.22s, color 0.22s;
}

/* ---- card spotlight (devcard, why-cell, sec-cell) ---- */
.devcard,
.why-cell,
.sec-cell {
  position: relative;
  overflow: hidden;
}
.devcard::after,
.why-cell::after,
.sec-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(380px 280px at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.14), transparent 68%);
  pointer-events: none;
}
.devcard:hover::after,
.why-cell:hover::after,
.sec-cell:hover::after,
.devcard:focus-within::after,
.why-cell:focus-within::after,
.sec-cell:focus-within::after { opacity: 1; }

.why-cell {
  transition: background 0.3s, transform 0.35s cubic-bezier(.2,.7,.3,1);
}
.why-cell:hover { transform: translateY(-3px); }
.why-cell .w-no { transition: letter-spacing 0.3s ease; }
.why-cell:hover .w-no { letter-spacing: 0.24em; }

.sec-cell {
  transition: background 0.3s, transform 0.35s cubic-bezier(.2,.7,.3,1), border-color 0.3s;
}
.sec-cell:hover { transform: translateY(-2px); }
.sec-cell:hover .sc-ic { transform: scale(1.08); }
.sec-cell .sc-ic { transition: transform 0.35s cubic-bezier(.2,.7,.3,1); }

.devcard { transition: border-color 0.3s, transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s; }
.devcard:hover {
  box-shadow: 0 24px 56px -28px rgba(var(--accent-rgb), 0.35);
}

/* ---- spark bars (scroll-triggered) ---- */
.spark i {
  animation: none;
  transform: scaleY(0.06);
  transform-origin: bottom;
}
.spark.spark-in i {
  animation: growbar 1.1s cubic-bezier(.2,.7,.3,1) both;
}
.spark.spark-in i:nth-child(1) { animation-delay: 0ms; }
.spark.spark-in i:nth-child(2) { animation-delay: 60ms; }
.spark.spark-in i:nth-child(3) { animation-delay: 120ms; }
.spark.spark-in i:nth-child(4) { animation-delay: 180ms; }
.spark.spark-in i:nth-child(5) { animation-delay: 240ms; }
.spark.spark-in i:nth-child(6) { animation-delay: 300ms; }
.spark.spark-in i:nth-child(7) { animation-delay: 360ms; }

/* ---- chip pop ---- */
.chip.active {
  animation: chippop 0.32s cubic-bezier(.2,.7,.3,1);
}
@keyframes chippop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---- CTA band hover glow ---- */
.cta-band {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.cta-band:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 32px 80px -36px rgba(var(--accent-rgb), 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ---- link arrow underline draw ---- */
.link-arrow {
  position: relative;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--accent-br);
  transition: width 0.35s cubic-bezier(.2,.7,.3,1);
}
.link-arrow:hover::after { width: calc(100% - 22px); }

/* ---- eyebrow line draw on reveal ---- */
.eyebrow { overflow: hidden; }
.eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(.2,.7,.3,1) 0.15s;
}
.eyebrow.in::before,
[data-reveal].in .eyebrow::before {
  transform: scaleX(1);
}
html[dir="rtl"] .eyebrow::before {
  transform-origin: right center;
}

/* ---- customer footprint ---- */
.customer-map__marker { transform-box: fill-box; transform-origin: center; animation: customer-marker-pulse 3s ease-in-out infinite; }
.customer-map__marker--iraq { animation-delay: .35s; }
.customer-map__marker--uae { animation-delay: .7s; }
.customer-map__marker--hungary { animation-delay: 1.05s; }
@keyframes customer-marker-pulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.customer-metric { transition: transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s; }
.customer-metric:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.32); }
.customer-logo-tile { transition: transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s; }
.customer-logo-tile:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),.34); box-shadow: 0 18px 42px -28px rgba(var(--accent-rgb),.42); }

/* ---- filter chip slide ---- */
.filter-chip {
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s cubic-bezier(.2,.7,.3,1);
}
.filter-chip:hover { transform: translateY(-2px); }
.filter-chip.active { transform: translateY(-1px); }

/* ---- section grid-bg parallax hint ---- */
.section .grid-bg {
  transition: transform 0.2s linear;
  will-change: transform;
}

/* ---- quote card desktop hover ---- */
@media (min-width: 881px) {
  .quote {
    transition: transform 0.35s cubic-bezier(.2,.7,.3,1), border-color 0.3s, background 0.3s;
  }
  .quote:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-grad-shimmer { animation: none; }
  .hero-in { transition: none; will-change: auto; }
  .why-cell:hover,
  .sec-cell:hover,
  .devcard:hover,
  .filter-chip:hover,
  .filter-chip.active,
  .quote:hover { transform: none; }
  .chip.active { animation: none; }
  .eyebrow::before { transform: scaleX(1); transition: none; }
  .spark i { transform: none; }
  .spark.spark-in i { animation: none; transform: none; }
  .btn .btn-ripple { display: none; }
  .customer-map__marker { animation: none; }
  .customer-metric:hover { transform: none; }
  .customer-logo-tile:hover { transform: none; }
}