/* ============================================================
   GlowBright — Google TV style animated border hover + neon
   ============================================================ */

:root {
  --gb-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.35),
                  0 0 18px rgba(34, 211, 238, 0.28),
                  0 0 40px rgba(34, 211, 238, 0.12);
  --gb-glow-purple: 0 0 0 1px rgba(167, 139, 250, 0.35),
                    0 0 18px rgba(167, 139, 250, 0.25),
                    0 0 36px rgba(167, 139, 250, 0.1);
  --gb-glow-mixed: 0 0 0 1px rgba(34, 211, 238, 0.4),
                   0 4px 20px rgba(34, 211, 238, 0.18),
                   0 0 32px rgba(167, 139, 250, 0.15);
  --gb-lift: translateY(-3px);
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderMove {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.neon-text {
  color: var(--accent, #22d3ee);
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}
.neon-glow { box-shadow: var(--gb-glow-cyan); }
.logo-mark svg { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35)); }

/* ---------- Google TV hover ring (cards / tiles / flashcards) ---------- */
.card,
.feature-card,
.neon-border,
.tile,
a.tile,
.tile-link.tile,
.content-card,
a.content-card,
.flashcard,
.gb-flashcard,
[class*="flashcard"] {
  --angle: 0deg;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.25s ease !important;
}

.card::before,
.feature-card::before,
.neon-border::before,
.tile::before,
a.tile::before,
.content-card::before,
a.content-card::before,
.flashcard::before,
.gb-flashcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    #19f56b 0deg,
    #19f56b 50deg,
    #00baff 100deg,
    #167cff 150deg,
    #ff2455 210deg,
    #ff3b18 260deg,
    #ffd21a 315deg,
    #19f56b 360deg
  );
  -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;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.card::after,
.feature-card::after,
.neon-border::after,
.tile::after,
a.tile::after,
.content-card::after,
a.content-card::after,
.flashcard::after,
.gb-flashcard::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle),
    #19f56b,
    #00baff,
    #167cff,
    #ff2455,
    #ff3b18,
    #ffd21a,
    #19f56b
  );
  -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;
  filter: blur(5px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.card:hover,
.feature-card:hover,
.neon-border:hover,
.tile:hover,
a.tile:hover,
.tile-link:hover .tile,
.content-card:hover,
a.content-card:hover,
.flashcard:hover,
.gb-flashcard:hover {
  transform: var(--gb-lift);
  border-color: transparent !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
}

.card:hover::before,
.feature-card:hover::before,
.neon-border:hover::before,
.tile:hover::before,
a.tile:hover::before,
.content-card:hover::before,
a.content-card:hover::before,
.flashcard:hover::before,
.gb-flashcard:hover::before {
  opacity: 1;
  animation: borderMove 2.5s linear infinite;
}

.card:hover::after,
.feature-card:hover::after,
.neon-border:hover::after,
.tile:hover::after,
a.tile:hover::after,
.content-card:hover::after,
a.content-card:hover::after,
.flashcard:hover::after,
.gb-flashcard:hover::after {
  opacity: 0.55;
  animation: borderMove 2.5s linear infinite;
}

/* Keep content above rings */
.card > *,
.feature-card > *,
.tile > *,
.neon-border > *,
.content-card > *,
.flashcard > *,
.gb-flashcard > * {
  position: relative;
  z-index: 3;
}

a.card:hover,
a.feature-card:hover {
  color: inherit;
}

.tile:hover .tile-icon {
  transform: scale(1.07);
  color: #67e8f9;
}
.tile-icon {
  transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- Buttons (softer neon, not full TV ring) ---------- */
.btn {
  position: relative;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: var(--gb-lift);
  box-shadow: var(--gb-glow-mixed), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  filter: brightness(1.06);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  transform: var(--gb-lift);
  border-color: rgba(34, 211, 238, 0.45) !important;
  box-shadow: var(--gb-glow-cyan) !important;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  transform: var(--gb-lift);
  border-color: rgba(167, 139, 250, 0.55) !important;
  box-shadow: var(--gb-glow-purple) !important;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.2);
  color: var(--accent, #22d3ee);
}

.btn:active { transform: translateY(0) scale(0.98); }

/* ---------- Nav: underline handled in navigation.css (screenshot style) ---------- */

.gb-side-link {
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
.gb-side-link:hover {
  color: #e2e8f0 !important;
  background: rgba(34, 211, 238, 0.08) !important;
  box-shadow: inset 3px 0 0 #22d3ee, 0 0 16px rgba(34, 211, 238, 0.12);
  transform: translateX(2px);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.search-input:focus,
.header-search-input:focus {
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15), 0 0 18px rgba(34, 211, 238, 0.12) !important;
  outline: none;
}

.gb-profile-btn:hover,
.gb-more-btn:hover,
.theme-toggle:hover {
  box-shadow: var(--gb-glow-cyan);
  border-color: rgba(34, 211, 238, 0.4);
}

.admin-table tbody tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.admin-table tbody tr:hover {
  background: rgba(34, 211, 238, 0.06);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.12);
}

.gb-ac-item:hover {
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 12px rgba(34, 211, 238, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover::before,
  .card:hover::after,
  .tile:hover::before,
  .tile:hover::after,
  .feature-card:hover::before,
  .feature-card:hover::after,
  .neon-border:hover::before,
  .neon-border:hover::after,
  .content-card:hover::before,
  .content-card:hover::after {
    animation: none !important;
  }
  .card:hover, .tile:hover, .feature-card:hover, .neon-border:hover, .content-card:hover {
    transform: none !important;
  }
}


/* Hard exclude header/nav from TV card rings */
.site-header.card::before,
.site-header.card::after,
.nav-link::before,
.main-nav--primary .nav-link::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}