/* =========================================================================
   Hover glow for the black buttons (the founder's reference, 25 Oct 2026):
   a colored rim that lights up on the side of the cursor, a fine dotted
   texture that wakes up around the cursor and drifts slowly, and a soft
   glow around the button. Only for a mouse or trackpad; touch screens and
   disabled buttons stay as they are. public/js/gridma-glow.js moves the
   light with the cursor through --glow-x and --glow-y; without it the
   light sits in the middle. The same colors ring a field on focus.
   ========================================================================= */

:root {
  --glow-blue: #3b82f6;
  --glow-violet: #8b5cf6;
  --glow-pink: #ec4899;
  --glow-orange: #f97316;
  --glow-yellow: #facc15;
}

@media (hover: hover) and (pointer: fine) {
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin)) {
    --glow-x: 50%;
    --glow-y: 50%;
    position: relative;
    isolation: isolate;
  }

  /* The rim: a ring of color, brightest near the cursor. */
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin))::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from 200deg at var(--glow-x) var(--glow-y),
      var(--glow-blue), var(--glow-violet), var(--glow-pink), var(--glow-orange),
      var(--glow-yellow), var(--glow-violet), var(--glow-blue));
    -webkit-mask:
      radial-gradient(150px circle at var(--glow-x) var(--glow-y), #000 30%, transparent 78%),
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: source-in, xor;
    mask:
      radial-gradient(150px circle at var(--glow-x) var(--glow-y), #000 30%, transparent 78%),
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: intersect, exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  /* The texture: tiny dots tinted with the same colors, only around the
     cursor, under the label. */
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin))::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from 90deg at var(--glow-x) var(--glow-y),
      #93c5fd, #c4b5fd, #f9a8d4, #fdba74, #93c5fd);
    -webkit-mask:
      radial-gradient(circle, #000 0.9px, transparent 1.4px) 0 0 / 6px 6px repeat,
      radial-gradient(170px circle at var(--glow-x) var(--glow-y), #000 0%, transparent 72%) 0 0 / 100% 100% no-repeat;
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle, #000 0.9px, transparent 1.4px) 0 0 / 6px 6px repeat,
      radial-gradient(170px circle at var(--glow-x) var(--glow-y), #000 0%, transparent 72%) 0 0 / 100% 100% no-repeat;
    mask-composite: intersect;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    animation: gridma-glow-drift 4s linear infinite;
    animation-play-state: paused;
  }

  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin)):not(:disabled):not([aria-disabled="true"]):hover {
    filter: drop-shadow(0 0 7px rgba(139, 92, 246, 0.28)) drop-shadow(0 0 2px rgba(59, 130, 246, 0.2));
  }
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin)):not(:disabled):not([aria-disabled="true"]):hover::before {
    opacity: 1;
  }
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin)):not(:disabled):not([aria-disabled="true"]):hover::after {
    opacity: 0.55;
    animation-play-state: running;
  }
}

@keyframes gridma-glow-drift {
  to {
    -webkit-mask-position: 6px 6px, 0 0;
    mask-position: 6px 6px, 0 0;
  }
}

/* Focused field: the 2px border (transparent, see gridma-talent.css) shows
   the same colors turning around the field. The white fills the padding
   box, the colors only the border under it. On every screen, touch too. */
@property --ring-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.g-in:not([readonly]):focus {
  border-color: transparent;
  background:
    linear-gradient(var(--w), var(--w)) padding-box,
    conic-gradient(from var(--ring-a),
      var(--glow-blue), var(--glow-violet), var(--glow-pink), var(--glow-orange),
      var(--glow-yellow), var(--glow-violet), var(--glow-blue)) border-box;
  animation: gridma-ring-turn 3s linear infinite;
}
/* The select keeps its arrow on top. */
select.g-in:not([readonly]):focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat padding-box,
    linear-gradient(var(--w), var(--w)) padding-box,
    conic-gradient(from var(--ring-a),
      var(--glow-blue), var(--glow-violet), var(--glow-pink), var(--glow-orange),
      var(--glow-yellow), var(--glow-violet), var(--glow-blue)) border-box;
}

@keyframes gridma-ring-turn {
  to { --ring-a: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn)::after { animation: none; }
  .g-in:not([readonly]):focus { animation: none; }
}

/* The glow never prints. */
@media print {
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn)::before,
  :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn)::after { display: none; }
}

/* ---------- Dark theme (palette in gridma-theme.css) ----------
   The black buttons turn light in dark, where the pale dots would vanish on
   the face, so the dots take the rim's full colors. The rim and the soft
   halo already read on the dark page. */
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] :is(.btn-dark, .btn-accent, .cta-btn-dark, .g-btn:not(.sec):not(.w):not(.admin))::after {
    background: conic-gradient(from 90deg at var(--glow-x) var(--glow-y),
      var(--glow-blue), var(--glow-violet), var(--glow-pink), var(--glow-orange), var(--glow-blue));
  }
}

/* The focused field's fill is var(--w), which gridma-talent.css already turns
   into the dark page color. Only the select's black arrow would vanish on it,
   so it takes the ink color here, the same arrow the field shows at rest.
   Screen only, like the kit's dark colors. */
@media screen {
  :root[data-theme="dark"] select.g-in:not([readonly]):focus {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat padding-box,
      linear-gradient(var(--w), var(--w)) padding-box,
      conic-gradient(from var(--ring-a),
        var(--glow-blue), var(--glow-violet), var(--glow-pink), var(--glow-orange),
        var(--glow-yellow), var(--glow-violet), var(--glow-blue)) border-box;
  }
}