/* =============================================================
   TRENDS — grain, cursor hairline, progressive topbar glass
   A pure additive layer: delete the <link>/<script> lines to revert.

   NOTE (design contract): the ambient aurora orbs and the scroll
   reveal that used to live here were removed — the platform keeps
   exactly ONE ambient system (f-body::before pools + f3d orbs)
   and ONE scroll-reveal system (.f3d-reveal in final3d.css).
   ============================================================= */

/* ---------- 1. Film grain (kills flat-gradient banding, adds texture) ---------- */
.trend-grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.f-body.dark ~ .trend-grain, .f-body.dark .trend-grain { opacity: 0.05; }

/* ---------- 2. Cursor-following hairline on key cards ----------
   The border illuminates under the pointer (spotlight border).
   The interior radial wash was removed: the f3d glare sheen
   already owns the inside of the card — one light per surface. */
.trend-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--f-dur-md) var(--f-ease);
}
.trend-host { position: relative; }
.trend-host:hover .trend-glow { opacity: 1; }

/* hairline that lights up where the cursor is */
.trend-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--d-c, var(--s-c, var(--f-navy, #2b4e8b))) 38%, transparent) 0%,
    transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ---------- 3. Top bar: progressive glass on scroll ---------- */
.f-top { transition: box-shadow var(--f-dur-md) var(--f-ease), background var(--f-dur-md) var(--f-ease); }
.f-top.trend-scrolled {
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow:
    inset 0 -0.5px 0 color-mix(in srgb, var(--f-ink, #161513) 10%, transparent),
    0 6px 24px -14px color-mix(in srgb, var(--f-ink, #161513) 22%, transparent);
}

/* ---------- 4. Selection + focus, branded ---------- */
::selection {
  background: color-mix(in srgb, var(--f-cs, #4a6285) 24%, transparent);
}