/* ==========================================================================
   UP AL — Our Process (איך אנחנו עובדים)
   Five premium glass panels — no numbers, no badges, no technical texture.
   Each card is built from layered light rather than lines: a soft static
   reflection baked into the glass at rest, a warm halo glowing quietly
   behind its icon, and a cursor-follow spotlight + gentle 3D tilt that
   wake up further on interaction. The only "system" language on the
   card is a single thin chrome accent — the same material as the
   primary CTA — marking the seam between icon and title.

   On hover: the card lifts, its ambient halo blooms, a light sweep
   crosses the glass, the icon scales and brightens, and the chrome
   accent line extends and shifts to a chrome-to-blue "charged metal"
   gradient — a direct response to the visitor's own cursor. At rest, a
   soft blue/chrome halo already separates each card from the background,
   a second, much slower light sweep loops quietly, and a large ambient
   orb glows behind the grid, so the section feels alive before anyone
   touches it. All loops respect prefers-reduced-motion.
   ========================================================================== */

.process {
  position: relative;
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border-soft);
  background: radial-gradient(ellipse 90% 55% at 50% 8%, rgba(158, 207, 247, 0.05), transparent 65%);
  /* Safety net matching Why UP AL / Services: the orb below can never
     paint past this section's own box. */
  overflow: hidden;
  overflow: clip;
}

/* Ambient light source behind the card grid. Content is lifted onto its
   own stack level so it always paints above the orb. */

.process__orb {
  width: 760px;
  height: 760px;
  /* Physical `left`, not inset-inline-start: this is a symmetric centering
     transform (translateX is always physical), so a logical property here
     would miscenter the orb under RTL. */
  left: 50%;
  top: -300px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(158, 207, 247, 0.13), transparent 70%);
  opacity: 0.8;
}

.process__intro,
.process__grid {
  position: relative;
  z-index: 1;
}

.process__intro {
  max-width: 680px;
}

.process__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* ---------- Grid ----------
   A wrapping flex row rather than CSS Grid: with a fixed basis + centered
   justify-content, an uneven last row (e.g. 3 + 2) centers itself
   automatically at any viewport width, with no extra breakpoint logic. */

.process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.process-card {
  position: relative;
  flex: 1 1 300px;
  max-width: 340px;
  /* Establishes its own stacking context (perspective always does), so the
     ambient halo below and the tilt transform on the surface can layer
     predictably without touching the section's own stacking order. */
  perspective: 1000px;
}

/* Ambient halo — a soft blue/chrome glow sitting just outside the glass,
   quietly separating the card from the charcoal background even at rest,
   and blooming further on hover/focus for a "lit from within" feel. */

.process-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(158, 207, 247, 0.15), transparent 65%);
  opacity: 0.4;
  filter: blur(22px);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-premium);
}

.process-card:hover::before,
.process-card:focus-within::before {
  opacity: 0.85;
}

/* ---------- Surface ----------
   Charcoal glass, built from four layered gradients rather than a flat
   fill: a soft highlight top-start (light catching the glass), a second,
   tighter specular catch-light near the opposite corner (the beveled-edge
   reflection of premium glass), a faint diagonal sheen, and a gentle
   vignette at the base for depth. */

.process-card__surface {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--space-7) var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: radial-gradient(120% 90% at 16% -12%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(36% 28% at 84% 4%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(205deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
    radial-gradient(130% 85% at 50% 125%, rgba(0, 0, 0, 0.34), transparent 60%), var(--color-bg-elevated);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-premium), border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

.process-card:hover .process-card__surface,
.process-card:focus-within .process-card__surface {
  transform: translateY(-6px);
  border-color: rgba(158, 207, 247, 0.32);
  box-shadow: var(--shadow-card-hover);
}

/* One-shot light sweep on hover — the same device as the primary CTA
   button, scaled down to card size. */

.process-card__surface::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(75deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  transition: transform 800ms var(--ease-premium), opacity 250ms var(--ease-premium);
  pointer-events: none;
}

.process-card:hover .process-card__surface::before,
.process-card:focus-within .process-card__surface::before {
  opacity: 1;
  transform: translateX(260%) skewX(-18deg);
}

/* Ambient sweep — independent of hover: a near-invisible, very slow pass
   that occasionally crosses the glass on its own, so each card already
   feels alive before the visitor's cursor ever reaches it. Parked off the
   visible frame for most of its cycle, staggered per card below so the
   five cards never move in sync. */

.process-card__surface::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: -40%;
  width: 32%;
  background: linear-gradient(75deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
  transform: translateX(0) skewX(-18deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .process-card__surface::after {
    animation: process-ambient-sweep 13s ease-in-out infinite;
  }

  .process__grid .process-card:nth-child(1) .process-card__surface::after { animation-delay: 0s; }
  .process__grid .process-card:nth-child(2) .process-card__surface::after { animation-delay: 2.6s; }
  .process__grid .process-card:nth-child(3) .process-card__surface::after { animation-delay: 5.2s; }
  .process__grid .process-card:nth-child(4) .process-card__surface::after { animation-delay: 7.8s; }
  .process__grid .process-card:nth-child(5) .process-card__surface::after { animation-delay: 10.4s; }
}

@keyframes process-ambient-sweep {
  0%,
  8% {
    transform: translateX(0) skewX(-18deg);
  }
  46%,
  54% {
    transform: translateX(560%) skewX(-18deg);
  }
  100% {
    transform: translateX(560%) skewX(-18deg);
  }
}

/* Cursor-following spotlight — position comes from --mx/--my, set by
   js/process.js on pointer devices only. Defaults to a fixed point so the
   card still looks intentional if JS hasn't run. */

.process-card__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 15%), rgba(158, 207, 247, 0.19), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-premium);
}

.process-card:hover .process-card__glow,
.process-card:focus-within .process-card__glow {
  opacity: 1;
}

/* ---------- Icon ----------
   No badge, no ring — just the mark itself, sitting on a soft blue halo
   of light that's already glowing quietly at rest and blooms further on
   hover. */

.process-card__icon-wrap {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-block-end: var(--space-5);
}

.process-card__icon-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(158, 207, 247, 0.22), transparent 72%);
  filter: blur(9px);
  opacity: 0.55;
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium);
}

.process-card__icon {
  position: relative;
  z-index: 1;
  display: flex;
  transition: filter var(--duration-base) var(--ease-premium), transform var(--duration-base) var(--ease-premium);
}

.process-card__icon svg {
  width: 34px;
  height: 34px;
}

.process-card:hover .process-card__icon-glow,
.process-card:focus-within .process-card__icon-glow {
  opacity: 0.95;
  transform: scale(1.3);
}

.process-card:hover .process-card__icon,
.process-card:focus-within .process-card__icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(158, 207, 247, 0.45));
}

/* ---------- Chrome accent ----------
   The one deliberate piece of "hardware" on the card: a thin metallic
   line marking the seam between icon and title, the same material as
   the primary CTA at rest. On hover it extends, brightens, and shifts to
   the chrome-to-blue gradient — the same "charged metal" treatment as the
   icon stroke — so the accent reads as the card's light source waking up. */

.process-card__accent {
  position: relative;
  z-index: 1;
  display: block;
  width: 32px;
  height: 2px;
  margin-block-end: var(--space-4);
  border-radius: 1px;
  background: var(--gradient-chrome);
  opacity: 0.6;
  box-shadow: 0 0 0 rgba(158, 207, 247, 0);
  transition: width var(--duration-base) var(--ease-premium), opacity var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

.process-card:hover .process-card__accent,
.process-card:focus-within .process-card__accent {
  width: 56px;
  opacity: 1;
  background: var(--gradient-chrome-blue);
  box-shadow: var(--glow-underline);
}

/* ---------- Title, description ---------- */

.process-card__title {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin-block-end: var(--space-2);
}

.process-card__desc {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ---------- Scroll reveal stagger ---------- */

.process__grid .process-card:nth-child(1) { transition-delay: 20ms; }
.process__grid .process-card:nth-child(2) { transition-delay: 50ms; }
.process__grid .process-card:nth-child(3) { transition-delay: 80ms; }
.process__grid .process-card:nth-child(4) { transition-delay: 110ms; }
.process__grid .process-card:nth-child(5) { transition-delay: 140ms; }

/* ---------- Small screens ----------
   Matches the same padding-block reduction used across every other
   section at this breakpoint. */

@media (max-width: 560px) {
  .process {
    padding-block: var(--space-8);
  }
}

/* ---------- Reduced motion ----------
   Transition durations are already zeroed globally. The one thing that
   needs an explicit cut here is the JS-driven 3D tilt itself, handled in
   process.js (it checks prefers-reduced-motion before rotating anything).
   The spotlight glow position is a static follow, not a loop, so it's
   left active. */