/* ════════════════════════════════════════════════════════════════
   subject-anim.css — Subject-themed, tech-driven background animations
   Themes: .theme-math .theme-science .theme-history .theme-english
   Drop a <div class="subject-anim theme-xxx"> with <span> symbols
   as the FIRST child of any positioned hero/section.
   ════════════════════════════════════════════════════════════════ */

/* ── animation layer ──────────────────────────────────────────── */
.subject-anim{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  z-index:0;
}
/* keep real content above the animation */
.has-anim{ position:relative; overflow:hidden; }
.has-anim > .container,
.has-anim > .wrap,
.has-anim > *:not(.subject-anim){ position:relative; z-index:1; }

/* drifting symbols */
.subject-anim span{
  position:absolute; font-weight:800; line-height:1;
  opacity:.16; user-select:none;
  animation:svDrift linear infinite;
  will-change:transform, opacity;
}
@keyframes svDrift{
  0%   { transform:translateY(20vh) translateX(0) rotate(0deg) scale(.9); opacity:0; }
  10%  { opacity:.18; }
  50%  { transform:translateY(-10vh) translateX(22px) rotate(160deg) scale(1.1); opacity:.22; }
  90%  { opacity:.12; }
  100% { transform:translateY(-40vh) translateX(-10px) rotate(320deg) scale(.9); opacity:0; }
}

/* spread out the symbols (positions + speeds) */
.subject-anim span:nth-child(1){ left:6%;  bottom:-6%; font-size:46px; animation-duration:15s; animation-delay:0s; }
.subject-anim span:nth-child(2){ left:20%; bottom:-12%;font-size:30px; animation-duration:19s; animation-delay:2s; }
.subject-anim span:nth-child(3){ left:34%; bottom:-8%; font-size:58px; animation-duration:22s; animation-delay:1s; }
.subject-anim span:nth-child(4){ left:48%; bottom:-14%;font-size:34px; animation-duration:17s; animation-delay:3s; }
.subject-anim span:nth-child(5){ left:60%; bottom:-6%; font-size:50px; animation-duration:21s; animation-delay:.5s;}
.subject-anim span:nth-child(6){ left:72%; bottom:-12%;font-size:28px; animation-duration:18s; animation-delay:2.5s;}
.subject-anim span:nth-child(7){ left:84%; bottom:-8%; font-size:44px; animation-duration:23s; animation-delay:1.5s;}
.subject-anim span:nth-child(8){ left:92%; bottom:-14%;font-size:32px; animation-duration:16s; animation-delay:3.5s;}
.subject-anim span:nth-child(9){ left:14%; bottom:-16%;font-size:40px; animation-duration:24s; animation-delay:4s; }
.subject-anim span:nth-child(10){left:78%; bottom:-16%;font-size:38px; animation-duration:20s; animation-delay:.8s;}

/* ── tech grid glow overlay (shared) ──────────────────────────── */
.subject-anim::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,165,233,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.06) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
  animation:svGridPan 24s linear infinite;
}
@keyframes svGridPan{ to{ background-position:46px 46px; } }

/* ── per-subject colors ───────────────────────────────────────── */
.theme-math    span{ color:#0ea5e9; }
.theme-science span{ color:#10b981; }
.theme-history span{ color:#8b5cf6; }
.theme-english span{ color:#f43f5e; }
.theme-commerce span{ color:#f59e0b; }

/* science atoms get an orbit shimmer */
.theme-science span{ animation-timing-function:ease-in-out; }

/* respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .subject-anim span, .subject-anim::before{ animation:none !important; }
  .subject-anim span{ opacity:.12; }
}

/* ════════ Homepage subject cards — themed mini watermark ════════ */
.skill-home-solid .col-md-3{ position:relative; overflow:hidden; }
.skill-home-solid .col-md-3 .card-anim{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.skill-home-solid .col-md-3 .box-area,
.skill-home-solid .col-md-3 .icons{ position:relative; z-index:1; }
.card-anim span{
  position:absolute; font-size:26px; font-weight:800; opacity:.10;
  animation:svDrift linear infinite;
}
.card-anim span:nth-child(1){ left:12%; bottom:-10%; animation-duration:14s; }
.card-anim span:nth-child(2){ left:62%; bottom:-12%; font-size:20px; animation-duration:18s; animation-delay:2s; }
.card-anim span:nth-child(3){ left:82%; bottom:-8%;  font-size:30px; animation-duration:16s; animation-delay:1s; }