/* ═══════════════════════════════════════════════════
   D. REUSABLE COMPONENTS
   ═══════════════════════════════════════════════════ */

/* --- Gradient text --- */
.grad{
  --grad-ink:
    radial-gradient(140% 150% at 88% 8%, rgba(255,248,238,.98) 0%, rgba(255,205,160,.82) 18%, rgba(255,123,82,.42) 40%, rgba(255,82,82,.18) 62%, transparent 82%),
    radial-gradient(170% 180% at 0% 100%, #09249a 0%, #071a78 24%, #081251 48%, #220d33 70%, #14070d 100%),
    repeating-linear-gradient(116deg, rgba(255,221,175,.32) 0 5px, rgba(255,94,76,.14) 5px 13px, transparent 13px 22px),
    conic-gradient(from 0deg at 52% 50%, #ffe4cb 0deg, #ff9a40 60deg, #ff4d49 132deg, #2c55ff 224deg, #0b1d90 300deg, #ffe4cb 360deg),
    linear-gradient(126deg, #4c70ff 0%, #8aa7ff 20%, #ffb15a 42%, #ff5e45 62%, #d32732 78%, #0f257f 100%);
  display:inline;
  vertical-align:baseline;
  line-height:inherit;
  background-image:var(--grad-ink);
  background-size:230% 230%,240% 240%,340% 340%,260% 260%,210% 210%;
  background-position:94% 8%,0% 100%,0% 0%,20% 34%,8% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(90,132,255,.3)) drop-shadow(0 0 24px rgba(255,118,64,.26));
  animation:gradStorm 1.9s cubic-bezier(.22,.61,.36,1) infinite,gradPulse 1.1s ease-in-out infinite alternate;
}
@keyframes gradStorm{
  0%{
    background-position:94% 8%,0% 100%,0% 0%,20% 34%,8% 50%;
    background-size:230% 230%,240% 240%,340% 340%,260% 260%,210% 210%;
  }
  25%{
    background-position:70% 20%,14% 90%,32% 20%,44% 42%,30% 44%;
    background-size:245% 245%,224% 224%,306% 306%,272% 272%,196% 196%;
  }
  50%{
    background-position:98% 4%,4% 100%,64% 48%,74% 56%,58% 62%;
    background-size:214% 214%,252% 252%,350% 350%,248% 248%,220% 220%;
  }
  75%{
    background-position:82% 12%,0% 88%,88% 78%,90% 74%,82% 82%;
    background-size:238% 238%,232% 232%,320% 320%,266% 266%,206% 206%;
  }
  100%{
    background-position:94% 8%,0% 100%,100% 96%,100% 86%,100% 90%;
    background-size:230% 230%,240% 240%,340% 340%,260% 260%,210% 210%;
  }
}
@keyframes gradPulse{
  0%{
    filter:drop-shadow(0 0 8px rgba(116,156,255,.24)) drop-shadow(0 0 18px rgba(255,109,68,.2));
  }
  100%{
    filter:drop-shadow(0 0 18px rgba(144,181,255,.5)) drop-shadow(0 0 38px rgba(255,102,64,.42));
  }
}
.split-text .grad{
  display:inline;
  vertical-align:baseline;
  transform:none!important;
}

/* --- Split text (reusable) --- */
.split-text .word{
  display:inline-block;overflow:hidden;margin-right:0;
  vertical-align:baseline;
  line-height:1em;
}
.grad .word,
.grad .char-wrap{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  line-height:inherit!important;
  vertical-align:baseline!important;
  transform:none!important;
  opacity:1!important;
}
.grad .word{
  margin-right:0;
  overflow:visible;
}
.split-text .word .char-wrap{
  display:inline-block;
  vertical-align:baseline;
  line-height:1em;
  transform:translateY(110%);
  opacity:0;
  transition:transform .7s var(--ease-out-expo),opacity .5s ease;
  transition-delay:var(--d);
}
.grad .word .char-wrap{
  display:inline;
}
.split-text.in .word .char-wrap{
  transform:translateY(0);opacity:1;
}

/* --- Glass card --- */
.glass-card{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  overflow:hidden;
  background-clip:padding-box;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .22s ease,border-color .22s ease;
}
.glass-card:hover{border-color:rgba(255,255,255,.18)}
.glass-card .glow{
  position:absolute;inset:-80%;
  background:
    radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(0,212,255,.16),transparent 40%),
    radial-gradient(circle at calc(var(--gx,50%) + 8%) calc(var(--gy,50%) + 8%),rgba(255,61,206,.12),transparent 44%);
  opacity:0;transition:opacity .22s ease;pointer-events:none;
}
.glass-card:hover .glow{opacity:1}
.glass-card .inner{position:relative;padding:28px;transform:translateZ(24px)}
.tilt{
  transform-origin:center center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

/* --- Magnetic button --- */
.btn-mag{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 150% at 30% 20%,rgba(124,92,255,.32),rgba(124,92,255,.06) 55%,rgba(255,255,255,.02)),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  color:var(--text);font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 16px 60px rgba(124,92,255,.12);
  overflow:hidden;user-select:none;
  background-clip:padding-box;
  transition:transform .15s ease;
  font-family:inherit;
  appearance:none;
}
.btn-mag:active{transform:scale(.97)!important}
.btn-mag .shine{
  position:absolute;inset:-50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),transparent 42%);
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:transform .1s ease;pointer-events:none;
}
.btn-mag .ripple{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:translate(-50%,-50%) scale(0);
  animation:btnRipple .6s ease-out;pointer-events:none;
}
@keyframes btnRipple{to{transform:translate(-50%,-50%) scale(20);opacity:0}}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  background-clip:padding-box;
  color:var(--muted);font-weight:500;font-size:15px;
  text-decoration:none;cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
  appearance:none;
}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}

/* --- Tag --- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--stroke);background:var(--surface);
  overflow:hidden;
  background-clip:padding-box;
  color:var(--muted);font-size:12px;font-weight:500;
}
.tag i{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--accentA),var(--accentB));
  box-shadow:0 0 0 4px rgba(0,212,255,.08);
}
html[data-theme="light"] .glass-card{
  border-color:rgba(118,145,196,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(245,249,255,.6));
  box-shadow:0 18px 44px rgba(129,148,183,.12),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .glass-card:hover{border-color:rgba(112,142,199,.28)}
html[data-theme="light"] .btn-mag{
  color:#fff;
  border-color:rgba(103,132,191,.18);
  box-shadow:0 16px 48px rgba(102,129,190,.16);
}
html[data-theme="light"] .btn-ghost{
  color:#50627f;
  border-color:rgba(121,145,193,.18);
  background:rgba(255,255,255,.64);
  box-shadow:0 10px 24px rgba(126,148,184,.12);
}
html[data-theme="light"] .btn-ghost:hover{
  color:#1b2d49;
  border-color:rgba(104,134,190,.26);
  background:rgba(255,255,255,.82);
}