/* ── kwe-global.css ── shared styles loaded on every page ── */

/* Base fonts — Inter body, Space Grotesk headings */
body, p, label, input, textarea, button, .kwe-page {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* Ensure fixed navbar doesn't overlap page content */
.kwe-page { padding-top: 80px; }

/* ────────────────────────────────────────────────
   idx-cta-anim-btn  (from kwe-index-07-cta.css)
   Usage: <a class="idx-cta-anim-btn">
            <div class="idx-cta-anim-loader">
              <div class="idx-cta-anim-glow"></div>
            </div>
            <span class="idx-cta-anim-text">Label</span>
          </a>
──────────────────────────────────────────────── */
@keyframes idx-cta-t {
  0%   { transform: translate(-55%); }
  100% { transform: translate(55%); }
}
@keyframes idx-cta-o {
  0%, 100% { opacity: 0; }
  15%       { opacity: 1; }
  65%       { opacity: 0; }
}

.idx-cta-anim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 60px;
  padding: 0 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, rgb(26,26,26) 0%, rgb(10,10,10) 100%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 20px rgba(244,63,94,0.1);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}
.idx-cta-anim-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 0 30px rgba(244,63,94,0.2);
}

.idx-cta-anim-loader {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background: transparent;
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0, transparent 6px, black 7px, black 8px);
  mask: repeating-linear-gradient(90deg, transparent 0, transparent 6px, black 7px, black 8px);
}

.idx-cta-anim-glow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    radial-gradient(circle at 50% 50%, #f43f5e 0%, transparent 50%),
    radial-gradient(circle at 45% 45%, #f43f5e 0%, transparent 45%),
    radial-gradient(circle at 55% 55%, rgba(244,63,94,0.53) 0%, transparent 45%),
    radial-gradient(circle at 45% 55%, rgba(244,63,94,0.67) 0%, transparent 45%),
    radial-gradient(circle at 55% 45%, rgba(244,63,94,0.80) 0%, transparent 45%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%);
  mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%);
  animation: idx-cta-t 2s infinite alternate, idx-cta-o 4s infinite;
  animation-timing-function: cubic-bezier(0.6,0.8,0.5,1);
  filter: drop-shadow(0 0 8px rgba(244,63,94,0.6));
}

.idx-cta-anim-text {
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  user-select: none;
  color: #fff;
  text-shadow: 0 0 12px rgba(244,63,94,0.27), 0 0 4px rgba(244,63,94,0.13);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* ────────────────────────────────────────────────
   idx-edu-anim-btn  (from kwe-index-04-education.css)
   Usage: <a class="idx-edu-anim-btn">
            <div class="idx-edu-anim-loader">
              <div class="idx-edu-anim-glow"></div>
            </div>
            <span class="idx-edu-anim-text">Label</span>
          </a>
──────────────────────────────────────────────── */
@keyframes idx-edu-anim-transform {
  0%   { transform: translate(-55%); }
  100% { transform: translate(55%); }
}
@keyframes idx-edu-anim-opacity {
  0%, 100% { opacity: 0; }
  15%       { opacity: 1; }
  65%       { opacity: 0; }
}

.idx-edu-anim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 60px;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, rgb(26,26,26) 0%, rgb(10,10,10) 100%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 20px rgba(244,63,94,0.1);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}
.idx-edu-anim-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 0 30px rgba(244,63,94,0.2);
}

.idx-edu-anim-loader {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background: transparent;
  -webkit-mask: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 6px,
    black 7px, black 8px
  );
  mask: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 6px,
    black 7px, black 8px
  );
}

.idx-edu-anim-glow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    radial-gradient(circle at 50% 50%, #f43f5e 0%, transparent 50%),
    radial-gradient(circle at 45% 45%, #f43f5e 0%, transparent 45%),
    radial-gradient(circle at 55% 55%, rgba(244,63,94,0.53) 0%, transparent 45%),
    radial-gradient(circle at 45% 55%, rgba(244,63,94,0.67) 0%, transparent 45%),
    radial-gradient(circle at 55% 45%, rgba(244,63,94,0.80) 0%, transparent 45%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%);
  mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%);
  animation: idx-edu-anim-transform 2s infinite alternate,
             idx-edu-anim-opacity   4s infinite;
  animation-timing-function: cubic-bezier(0.6,0.8,0.5,1);
  filter: drop-shadow(0 0 8px rgba(244,63,94,0.6));
}

.idx-edu-anim-text {
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  user-select: none;
  color: #fff;
  text-shadow:
    0 0 12px rgba(244,63,94,0.27),
    0 0 4px  rgba(244,63,94,0.13);
  white-space: nowrap;
  letter-spacing: -0.01em;
}