/* =========================================================================
   Aurora - the finish layer that sits over every page.

   Everything here is additive: ambient depth behind the content, a reveal as
   sections scroll in, and richer hover on the cards the pages already use. No
   layout is changed, so a page keeps its structure and just gains atmosphere.

   Two rules that must not be broken:
   - Content is visible without JavaScript. The reveal only hides things once
     the script has marked the document with .js-reveal, so a failed script
     leaves the page fully readable rather than blank.
   - Motion is opt-out. Everything animated here stops under
     prefers-reduced-motion.
   ========================================================================= */

/* --- Ambient aurora ------------------------------------------------------
   Two slow-drifting colour fields behind the content. Fixed, so it reads as
   depth in the room rather than something scrolling past. Transform-only
   animation, and pointer-events off so it can never eat a click. */
body::before {
  content: '';
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 12%, rgba(88, 166, 255, 0.16), transparent 62%),
    radial-gradient(34vmax 28vmax at 82% 8%, rgba(139, 92, 246, 0.15), transparent 62%),
    radial-gradient(30vmax 26vmax at 62% 88%, rgba(236, 72, 153, 0.10), transparent 62%);
  filter: blur(28px) saturate(120%);
  animation: aurora-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

/* --- Reveal on scroll ---------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --- Card finish ---------------------------------------------------------
   One hover language for the cards these pages already have, instead of each
   page inventing its own. The sheen is a pseudo-element so it costs no extra
   markup, and it is masked to the card so it cannot bleed outside. */
.connect-step,
.seo-card,
.dlx-faq-item,
.home-faq-item,
.user-tile {
  position: relative;
  isolation: isolate;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s ease,
              box-shadow 0.32s ease;
}
.connect-step::after,
.seo-card::after,
.user-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(88, 166, 255, 0.16), transparent 70%);
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.connect-step:hover,
.seo-card:hover,
.user-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.95),
              0 0 28px -12px rgba(139, 92, 246, 0.75);
}
.connect-step:hover::after,
.seo-card:hover::after,
.user-tile:hover::after { opacity: 1; }

/* --- Section headings ---------------------------------------------------- */
.connect-header h2,
.seo-header h2,
.home-faq-titlebar h2,
.dlx-faq-head h2 { position: relative; }
.connect-header h2::after,
.seo-header h2::after {
  content: '';
  display: block;
  width: 84px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #58a6ff, #8b5cf6, #ec4899);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.7);
}

/* --- Ladder --------------------------------------------------------------
   The rows already carry top-rank / top-1..3 classes, but nothing styled
   them, so the podium looked like every other row. */
.ladder-row { position: relative; }
.ladder-row:hover {
  background: linear-gradient(90deg, rgba(88, 166, 255, 0.10), rgba(139, 92, 246, 0.04) 60%, transparent);
}
.ladder-row.top-rank::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.ladder-row.top-1 { background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.03) 55%, transparent); }
.ladder-row.top-1::before { background: linear-gradient(180deg, #fbbf24, #f59e0b); box-shadow: 0 0 16px rgba(245, 158, 11, 0.85); }
.ladder-row.top-2 { background: linear-gradient(90deg, rgba(203, 213, 225, 0.13), rgba(203, 213, 225, 0.03) 55%, transparent); }
.ladder-row.top-2::before { background: linear-gradient(180deg, #e2e8f0, #94a3b8); box-shadow: 0 0 14px rgba(203, 213, 225, 0.7); }
.ladder-row.top-3 { background: linear-gradient(90deg, rgba(180, 83, 9, 0.15), rgba(180, 83, 9, 0.03) 55%, transparent); }
.ladder-row.top-3::before { background: linear-gradient(180deg, #d97706, #b45309); box-shadow: 0 0 14px rgba(217, 119, 6, 0.7); }
.ladder-row.top-rank .char-name { font-weight: 800; letter-spacing: 0.2px; }
.rank-medal { filter: drop-shadow(0 0 10px currentColor); }

/* --- Motion opt-out ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .connect-step:hover,
  .seo-card:hover,
  .user-tile:hover { transform: none; }
}

/* --- Image motion --------------------------------------------------------
   Costs nothing to load: no scripts, no extra files, no new requests. Only
   transform and opacity are animated, which the compositor handles on its own
   thread, so scrolling and painting are untouched.

   Each figure gets a slightly different duration and delay. Identical timing
   on every card is what makes an animated page look cheap, because the eye
   picks up the machine rhythm immediately. */
.step-char img,
.seo-char img,
.dlx-client-logo img {
  animation: art-float 7s ease-in-out infinite;
  will-change: transform;
}
.connect-step:nth-child(2) .step-char img { animation-duration: 8.4s; animation-delay: -1.6s; }
.connect-step:nth-child(3) .step-char img { animation-duration: 6.6s; animation-delay: -3.1s; }
.seo-card:nth-child(2n) .seo-char img { animation-duration: 8.8s; animation-delay: -2.2s; }
.seo-card:nth-child(3n) .seo-char img { animation-duration: 7.6s; animation-delay: -4.4s; }

@keyframes art-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* The glow under the character art breathes against the float, so the figure
   reads as hovering rather than sliding. */
.step-char::after { animation: art-glow 7s ease-in-out infinite; }
@keyframes art-glow {
  0%, 100% { opacity: 0.32; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.55; transform: translateX(-50%) scale(1.12); }
}

/* Hovering a card lifts its figure further and brightens it. */
.connect-step:hover .step-char img,
.seo-card:hover .seo-char img {
  animation-play-state: paused;
  transform: translate3d(0, -14px, 0) scale(1.05);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.65)) saturate(115%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

/* The hero art drifts more slowly than anything else, so it feels heavy. */
.hero-banner img {
  animation: hero-drift 11s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -7px, 0) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .step-char img, .seo-char img, .dlx-client-logo img,
  .hero-banner img, .step-char::after { animation: none; }
  .connect-step:hover .step-char img,
  .seo-card:hover .seo-char img { transform: none; }
}