/* ayt-brand.css — Ayt brand style kit.
 *
 * Self-contained utility classes in the Aytict neon-magenta / hexagon identity:
 * brand colour tokens, gradient text, glow buttons & cards, hexagon badges,
 * neon borders and a few tasteful animations. No dependencies — link it and use
 * the classes:
 *   <link rel="stylesheet" href="/ui/ayt-brand.css">
 *   <a class="ayt-btn ayt-btn--glow">Get started</a>
 */

:root {
  --ayt-magenta: #c800b6;
  --ayt-magenta-lt: #ff2fd0;
  --ayt-violet: #8a2be2;
  --ayt-plum: #500050;
  --ayt-ink: #0d0612;
  --ayt-ink-2: #160a1f;
  --ayt-mist: #e8e0f5;
  --ayt-dim: #9d8fb6;
  --ayt-brand-gradient: linear-gradient(135deg, var(--ayt-magenta-lt), var(--ayt-violet) 55%, var(--ayt-plum));
  --ayt-brand-gradient-soft: linear-gradient(135deg, rgba(255,47,208,.18), rgba(138,43,226,.18));
  --ayt-glow: 0 0 24px rgba(255, 0, 200, .45);
}

/* ---- Brand text ---------------------------------------------------------- */
.ayt-gradient-text {
  background: var(--ayt-brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ayt-glow-text { color: var(--ayt-magenta-lt); text-shadow: var(--ayt-glow); }
.ayt-eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; font-weight: 700;
  color: var(--ayt-magenta-lt);
}

/* ---- Buttons ------------------------------------------------------------- */
.ayt-btn {
  display: inline-flex; align-items: center; gap: .5em; justify-content: center;
  padding: .62em 1.3em; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 700; text-decoration: none; color: #fff;
  background: var(--ayt-brand-gradient); background-size: 160% 160%;
  transition: transform .15s ease, box-shadow .2s ease, background-position .4s ease;
}
.ayt-btn:hover { transform: translateY(-1px); background-position: 100% 100%; }
.ayt-btn:active { transform: translateY(0); }
.ayt-btn--glow { box-shadow: var(--ayt-glow); }
.ayt-btn--glow:hover { box-shadow: 0 0 34px rgba(255, 0, 200, .65); }
.ayt-btn--ghost {
  background: transparent; color: var(--ayt-magenta-lt);
  border: 1px solid rgba(255, 47, 208, .55);
}
.ayt-btn--ghost:hover { background: var(--ayt-brand-gradient-soft); }

/* ---- Cards / surfaces ---------------------------------------------------- */
.ayt-card {
  background: linear-gradient(180deg, rgba(22,10,31,.85), rgba(13,6,18,.85));
  border: 1px solid rgba(138, 43, 226, .35); border-radius: 14px;
  padding: 22px 24px; color: var(--ayt-mist);
}
.ayt-card--glow { box-shadow: 0 14px 44px rgba(120, 0, 110, .35); }
/* Animated gradient border. */
.ayt-card--edge {
  position: relative; background-clip: padding-box; border: 1px solid transparent;
}
.ayt-card--edge::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: var(--ayt-brand-gradient); background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ayt-edge 6s linear infinite;
}
@keyframes ayt-edge { to { background-position: 200% 200%; } }

/* ---- Hexagon badge (the brand shape) ------------------------------------- */
.ayt-hex {
  --ayt-hex-size: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ayt-hex-size); height: var(--ayt-hex-size);
  background: var(--ayt-brand-gradient); color: #fff; font-weight: 800;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.ayt-hex--outline {
  background: var(--ayt-ink); color: var(--ayt-magenta-lt);
  position: relative;
}
.ayt-hex--outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ayt-brand-gradient);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.ayt-hex--outline > * { position: relative; z-index: 1; }

/* ---- Chips / tags -------------------------------------------------------- */
.ayt-chip {
  display: inline-flex; align-items: center; gap: .4em; padding: .28em .8em;
  border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ayt-magenta-lt);
  background: var(--ayt-brand-gradient-soft); border: 1px solid rgba(255, 47, 208, .4);
}

/* ---- Dividers & rules ---------------------------------------------------- */
.ayt-rule { height: 2px; border: 0; background: var(--ayt-brand-gradient); border-radius: 2px; opacity: .7; }

/* ---- Backgrounds --------------------------------------------------------- */
.ayt-bg-mesh {
  background:
    radial-gradient(60% 80% at 15% 10%, rgba(255,47,208,.14), transparent 60%),
    radial-gradient(50% 70% at 90% 20%, rgba(138,43,226,.16), transparent 60%),
    var(--ayt-ink);
}
/* Subtle hexagon-grid texture. */
.ayt-bg-hex {
  background-color: var(--ayt-ink);
  background-image: radial-gradient(rgba(200, 0, 182, .12) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
}

/* ---- Animations (opt-in) ------------------------------------------------- */
.ayt-pulse { animation: ayt-pulse 2.4s ease-in-out infinite; }
@keyframes ayt-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 0, 200, 0); }
  50% { box-shadow: var(--ayt-glow); }
}
.ayt-shine {
  background: linear-gradient(100deg, var(--ayt-mist) 30%, var(--ayt-magenta-lt) 50%, var(--ayt-mist) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ayt-shine 3.5s linear infinite;
}
@keyframes ayt-shine { to { background-position: -220% 0; } }
.ayt-float { animation: ayt-float 5s ease-in-out infinite; }
@keyframes ayt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .ayt-pulse, .ayt-shine, .ayt-float, .ayt-card--edge::before { animation: none; }
}