/* ============================================================
   CUREX24 — Flair Layer (CSS)
   Adds top-notch interaction: pointer-tracking 3D hover with
   dynamic shadow, dramatic press/tap animation, click ring-ping
   on the custom cursor, and a swipeable carousel skin (with dot
   indicators) reused by several content grids.

   Purely additive: no existing rules are modified. Respects
   prefers-reduced-motion and coarse-pointer devices.
   ============================================================ */

/* ---------- 1. Box flair — pointer-tracked hover + shadow ---------- */
.flair-box {
  /* Pointer position inside the box (0..100%), refreshed by JS */
  --fx: 50%;
  --fy: 50%;
  /* Pointer offset from centre (-1..1), used to nudge the box */
  --ftx: 0;
  --fty: 0;
  /* Tilt accent colour — overridden per-variant below */
  --flair-accent: 11, 114, 231;

  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.35s ease;
  will-change: transform, box-shadow;
}

/* Soft radial highlight that tracks the cursor */
.flair-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--fx) var(--fy),
    rgba(var(--flair-accent), 0.18) 0%,
    rgba(var(--flair-accent), 0.08) 30%,
    rgba(var(--flair-accent), 0) 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}

/* Conic accent border that fades in on hover */
.flair-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: conic-gradient(
    from 140deg at var(--fx) var(--fy),
    rgba(var(--flair-accent), 0.55),
    rgba(124, 92, 255, 0.35),
    rgba(10, 165, 164, 0.45),
    rgba(var(--flair-accent), 0.55)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

/* Keep tile content above the decorative pseudo-elements */
.flair-box > * { position: relative; z-index: 2; }

.flair-box:hover,
.flair-box:focus-within {
  transform:
    translate3d(calc(var(--ftx) * 4px), -6px, 0)
    rotateX(calc(var(--fty) * -3deg))
    rotateY(calc(var(--ftx) * 3deg));
  box-shadow:
    /* directional cast based on pointer */
    calc(var(--ftx) * -10px) calc(18px + var(--fty) * -10px) 38px -10px rgba(15, 23, 42, 0.18),
    0 28px 60px -22px rgba(var(--flair-accent), 0.35),
    0 2px 0 rgba(255, 255, 255, 0.6) inset;
}
.flair-box:hover::before,
.flair-box:focus-within::before { opacity: 1; }
.flair-box:hover::after,
.flair-box:focus-within::after { opacity: 0.9; }

/* Per-variant accent hues so each section has its own colour identity */
.problem-tile.flair-box  { --flair-accent: 11, 114, 231; }   /* blue */
.auto-card.flair-box     { --flair-accent: 10, 165, 164; }   /* teal */
.trust-card.flair-box    { --flair-accent: 124, 92, 255; }   /* violet */
.wf-step.flair-box       { --flair-accent: 23, 168, 74; }    /* green */
.role-card.flair-box     { --flair-accent: 14, 165, 233; }   /* sky */
.feature3d.flair-box     { --flair-accent: 37, 99, 235; }    /* deep blue */

/* ---------- 2. Press / tap animation ---------- */
.flair-box.is-pressing {
  transform:
    translate3d(0, -2px, 0)
    scale(0.975);
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out;
  box-shadow:
    0 6px 18px -6px rgba(var(--flair-accent), 0.55),
    0 0 0 4px rgba(var(--flair-accent), 0.18),
    0 0 0 1px rgba(var(--flair-accent), 0.35) inset,
    0 20px 40px -22px rgba(15, 23, 42, 0.35);
}

/* Expanding ring that bursts out of the tap origin */
.flair-pulse {
  position: absolute;
  left: var(--px, 50%);
  top:  var(--py, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  border: 2px solid rgba(var(--flair-accent, 11, 114, 231), 0.75);
  background: radial-gradient(
    circle,
    rgba(var(--flair-accent, 11, 114, 231), 0.35) 0%,
    rgba(var(--flair-accent, 11, 114, 231), 0) 70%
  );
  opacity: 0.95;
  animation: flair-pulse 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes flair-pulse {
  0%   { transform: scale(0.3);  opacity: 0.95; }
  60%  { opacity: 0.55; }
  100% { transform: scale(18);   opacity: 0; }
}

/* Secondary slower halo that follows the burst */
.flair-pulse.flair-pulse--halo {
  border-color: rgba(124, 92, 255, 0.45);
  animation-duration: 1100ms;
  animation-delay: 60ms;
}

/* ---------- 3. Custom-cursor click ping ----------
   Hooks into the existing .aa-cursor-ring set up by
   advanced-animations.js — we just add an extra ring overlay
   that pings on click. The element is created by flair.js. */
.flair-cursor-ping {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2001;
  border: 2px solid rgba(11, 114, 231, 0.65);
  opacity: 0.9;
  animation: flair-cursor-ping 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes flair-cursor-ping {
  0%   { transform: translate3d(var(--cpx, 0), var(--cpy, 0), 0) scale(0.4); opacity: 0.9; }
  100% { transform: translate3d(var(--cpx, 0), var(--cpy, 0), 0) scale(2.6); opacity: 0; }
}

/* ---------- 4. Swipeable carousel skin (for grids) ---------- */
.flair-carousel-wrap {
  position: relative;
  margin-top: 1.4rem;
}

/* A scroller wraps a grid we turn into a horizontal carousel.
   The double-class selector beats `.problem-grid` / `.automation-grid`
   without resorting to !important. */
.flair-carousel.flair-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.6rem 0.25rem 1.1rem;
  /* When converted from a grid, the grid template would interfere. */
  grid-template-columns: none;
}
.flair-carousel::-webkit-scrollbar { display: none; }

.flair-carousel > * {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2rem) / 3);
  min-width: 0;
}
@media (max-width: 980px) {
  .flair-carousel > * { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 640px) {
  .flair-carousel > * { flex: 0 0 86%; }
}

/* Grabbing affordance while dragging */
.flair-carousel.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.flair-carousel.is-grabbing > * { pointer-events: none; }

/* Edge fade so partially-visible cards feel cinematic */
.flair-carousel-wrap::before,
.flair-carousel-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.flair-carousel-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg, #f7fafc), rgba(247, 250, 252, 0));
}
.flair-carousel-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg, #f7fafc), rgba(247, 250, 252, 0));
}
.flair-carousel-wrap.has-prev::before { opacity: 1; }
.flair-carousel-wrap.has-next::after  { opacity: 1; }

/* Prev / next paddle buttons */
.flair-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #0b72e7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 12px 28px -10px rgba(15, 23, 42, 0.25),
    0 2px 6px -2px rgba(15, 23, 42, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.flair-carousel-btn:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    0 18px 34px -10px rgba(11, 114, 231, 0.35),
    0 4px 10px -3px rgba(15, 23, 42, 0.15);
}
.flair-carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}
.flair-carousel-btn--prev { left: -18px; }
.flair-carousel-btn--next { right: -18px; }
@media (max-width: 720px) {
  .flair-carousel-btn { display: none; }
}

/* Dot indicators */
.flair-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}
.flair-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease, transform 0.25s ease;
}
.flair-dot:hover { transform: scale(1.2); background: rgba(15, 23, 42, 0.32); }
.flair-dot.is-active {
  width: 26px;
  background: linear-gradient(90deg, #0b72e7, #0aa5a4);
}

/* ---------- 5. Reduced-motion fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  .flair-box,
  .flair-box:hover,
  .flair-box:focus-within {
    transform: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .flair-box::before,
  .flair-box::after,
  .flair-pulse,
  .flair-cursor-ping {
    animation: none !important;
    transition: none !important;
  }
  .flair-carousel { scroll-behavior: auto; }
}