/* Arcadian section FX — shared texture + stacking context for cursor effects */
.sec-tex, .arc-hero, .arc-footer { position: relative; overflow: hidden; }
.sec-tex > *, .arc-hero > *, .arc-footer > * { position: relative; z-index: 1; }

/* The glow layers are background, not content. This file loads after signal.css,
   so the > * rule above outranks their own single-class rules on source order and
   would force them position:relative — collapsing these empty divs to zero height
   and killing the gradients. Re-assert absolute at higher specificity. */
.arc-hero > .arc-hero-anim, .arc-hero > .arc-hero-glow {
  position: absolute; z-index: 0;
}

/* Footer intentionally excluded below (was previously included alongside
   .sec-tex/.arc-hero) -- with more black/grid-textured sections now
   stacked through a page (Overview, Who You'll Meet, More Events), a
   gridded footer directly underneath read as one gridline too many;
   plain blue-900 reads cleaner as the page's closing element. */
.sec-tex::before, .arc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  opacity: 0.55;
}
/* Article hero (post.njk) sits behind a full column of reading copy right
   below it, unlike the other .arc-hero uses (homepage, solution pages)
   that are mostly headline + art — the grid read as too busy there.
   Scoped to .page-post so every other .arc-hero keeps the standard 0.55. */
.page-post .arc-hero::before { opacity: 0.25; }

/* AW-384 follow-up: the full 0.55 gridline opacity above reads fine behind
   a hero (headline + art) or a card grid, but is too distracting behind a
   long stretch of actual prose — an insight/event article body, or one of
   About's longer narrative sections. Scoped with :has() to wherever a
   .sec-tex section actually contains body copy (.arc-prose for
   post.njk/event.njk articles, .arc-body-col for About), rather than
   touching the texture everywhere else it still works at full strength.
   Higher specificity than the plain .sec-tex::before rule above (an extra
   class-equivalent selector), so no !important needed. */
.sec-tex:has(.arc-prose)::before,
.sec-tex:has(.arc-body-col)::before {
  opacity: 0.05;
}

.sec-tex::after, .arc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(34,211,238,0.38) 1.4px, transparent 1.6px);
  background-size: 48px 48px; background-position: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 90% at 88% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 88% 0%, #000 0%, transparent 62%);
  opacity: 0.5;
}

/* Footer keeps the dot texture (::after above) but drops the grid-line
   texture — content: none unsets the generated box for just this element
   without touching the shared .sec-tex/.arc-hero rule above. */
.arc-footer::before { content: none; }

.sec-plain, .arc-cta-strip { position: relative; overflow: hidden; }
.sec-plain > *, .arc-cta-strip > * { position: relative; z-index: 1; }

/* ---------- Card spotlight (cursor-following glow) ---------- */
.arc-card { position: relative; --mx: 50%; --my: 50%; }
.arc-card > * { position: relative; z-index: 1; }
.arc-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; clip-path: inherit; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%);
}
.arc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; clip-path: inherit; padding: 1px; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(200px circle at var(--mx) var(--my), var(--accent), transparent 60%);
  -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;
}
.arc-card:hover::before, .arc-card:hover::after { opacity: 1; }
.arc-card--link::before {
  background: radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb, var(--text-primary) 12%, transparent), transparent 65%);
}
.arc-card--link::after {
  background: radial-gradient(200px circle at var(--mx) var(--my), color-mix(in srgb, var(--text-primary) 55%, transparent), transparent 60%);
}

/* ---------- Button: cursor spotlight + press ripple ---------- */
@property --arc-spot { syntax: '<number>'; inherits: false; initial-value: 0; }
.arc-btn { position: relative; overflow: hidden; --mx: 50%; --my: 50%; --arc-spot: 0; }
.arc-btn--tertiary { overflow: visible; }
.arc-btn:hover { --arc-spot: 1; }

/* Primary: gradient direction rotates smoothly on hover — light left, dark right.
   The spotlight lives in the background stack, so it sits behind the label. */
@property --arc-ang { syntax: '<angle>'; inherits: false; initial-value: 135deg; }
.arc-btn--primary {
  --arc-ang: 135deg;
  background-image:
    radial-gradient(120px circle at var(--mx) var(--my), rgb(120 240 255 / calc(var(--arc-spot) * 0.5)), rgb(120 240 255 / 0) 70%),
    linear-gradient(var(--arc-ang), #0862A2 0%, #22D3EE 100%) !important;
  transition: --arc-ang .55s cubic-bezier(.4,0,.2,1), --arc-spot .22s ease, transform .1s var(--ease, ease);
}
.arc-btn--primary:hover, .arc-btn--primary:active { --arc-ang: 315deg; }

.arc-btn--secondary {
  background-image: radial-gradient(140px circle at var(--mx) var(--my), rgb(34 211 238 / calc(var(--arc-spot) * 0.16)), rgb(34 211 238 / 0) 70%) !important;
  transition: --arc-spot .22s ease, border-color var(--dur-fast, .15s) var(--ease, ease),
              background-color var(--dur-fast, .15s) var(--ease, ease), transform .1s var(--ease, ease);
}

.arc-btn-ripple {
  position: absolute; z-index: 0; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px;
  border: 1.5px solid rgba(34,211,238,0.85);
  animation: arcBtnRipple 460ms cubic-bezier(.22,.61,.36,1) forwards;
}
.arc-btn--primary .arc-btn-ripple { border-color: rgba(255,255,255,0.8); }
@keyframes arcBtnRipple {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(16); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-btn-ripple { display: none; }
}