/* ═══════════════════════════════════════════
   Hero Animations v4
   ═══════════════════════════════════════════ */

.hero-anim {
  position: relative; width: 100%; max-width: 560px; height: clamp(300px,40vw,400px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Particles ── */
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.hero-particle {
  position: absolute; border-radius: 50%;
  animation: particleRise linear infinite;
}
.hero-particle:nth-child(1) { width:6px;height:6px;background:rgba(74,222,128,.4);left:8%;top:25%;animation-duration:4.5s;animation-delay:0s }
.hero-particle:nth-child(2) { width:4px;height:4px;background:rgba(59,130,246,.4);left:85%;top:35%;animation-duration:5s;animation-delay:1s }
.hero-particle:nth-child(3) { width:5px;height:5px;background:rgba(245,158,11,.35);left:55%;top:12%;animation-duration:4s;animation-delay:2s }
.hero-particle:nth-child(4) { width:3px;height:3px;background:rgba(74,222,128,.5);left:22%;top:65%;animation-duration:5.5s;animation-delay:.5s }
.hero-particle:nth-child(5) { width:5px;height:5px;background:rgba(139,92,246,.3);left:75%;top:70%;animation-duration:6s;animation-delay:1.5s }
.hero-particle:nth-child(6) { width:4px;height:4px;background:rgba(74,222,128,.3);left:48%;top:55%;animation-duration:4s;animation-delay:3s }
.hero-particle:nth-child(7) { width:6px;height:6px;background:rgba(59,130,246,.3);left:92%;top:15%;animation-duration:4.8s;animation-delay:2.5s }
.hero-particle:nth-child(8) { width:3px;height:3px;background:rgba(245,158,11,.4);left:35%;top:80%;animation-duration:5.2s;animation-delay:.8s }
@keyframes particleRise{0%{transform:translateY(0) translateX(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-90px) translateX(20px) scale(.2);opacity:0}}

/* ═══════════════════════════════════════════
   OPEN BOOK — glowing gold
   ═══════════════════════════════════════════ */
.anim-book-open {
  position: relative; width: 110px; height: 90px;
  animation: bFloat 4s cubic-bezier(.45,0,.55,1) infinite;
}
.anim-book-left {
  position: absolute; left: 0; top: 0;
  width: 50px; height: 80px;
  background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 40%, #F59E0B 100%);
  border-radius: 6px 2px 2px 6px;
  transform: perspective(120px) rotateY(10deg);
    background-image:
      linear-gradient(180deg, #FEF3C7 0%, #FDE68A 40%, #F59E0B 100%),
      repeating-linear-gradient(180deg, transparent, transparent 11px, rgba(0,0,0,.06) 11px, rgba(0,0,0,.06) 12px);
    background-position: 0 0, 0 8px;
  transform-origin: right center;
  box-shadow: 0 4px 20px rgba(245,158,11,.25), inset 0 0 20px rgba(255,255,255,.2);
  animation: pageGlow 3s ease-in-out infinite;
}
.anim-book-right {
  position: absolute; right: 0; top: 0;
  width: 50px; height: 80px;
  background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 40%, #F59E0B 100%);
  border-radius: 2px 6px 6px 2px;
  transform: perspective(120px) rotateY(-10deg);
    background-image:
      linear-gradient(180deg, #FEF3C7 0%, #FDE68A 40%, #F59E0B 100%),
      repeating-linear-gradient(180deg, transparent, transparent 11px, rgba(0,0,0,.06) 11px, rgba(0,0,0,.06) 12px);
    background-position: 0 0, 0 8px;
  transform-origin: left center;
  box-shadow: 0 4px 20px rgba(245,158,11,.25), inset 0 0 20px rgba(255,255,255,.2);
  animation: pageGlow 3s ease-in-out infinite .15s;
}
.anim-book-spine-line {
  position: absolute; left: 50%; top: 5px; bottom: 5px;
  width: 4px; transform: translateX(-50%);
  background: linear-gradient(180deg, #D97706, #92400E, #D97706);
  border-radius: 2px; z-index: 1;
}
.anim-book-glow {
  position: absolute; inset: -10px;
  background: radial-gradient(ellipse at 50% 50%, rgba(245,158,11,.4) 0%, transparent 70%);
  border-radius: 20px;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes bFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pageGlow { 0%,100%{box-shadow:0 4px 20px rgba(245,158,11,.2),inset 0 0 20px rgba(255,255,255,.15)} 50%{box-shadow:0 4px 30px rgba(245,158,11,.5),inset 0 0 30px rgba(255,255,255,.3)} }
@keyframes glowPulse { 0%,100%{opacity:.3} 50%{opacity:.8} }

/* ═══════════════════════════════════════════
   PENCIL — seamless body+tip
   ═══════════════════════════════════════════ */
.anim-pencil-wrap {
  position: relative; width: 60px; height: 130px;
  animation: pFloat 3s cubic-bezier(.45,0,.55,1) infinite 1.5s;
}
.anim-pencil-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 12px rgba(245,158,11,.25));
}
.anim-pencil-line { display: none; }
.anim-pencil-dot { display: none; }
@keyframes pFloat { 0%,100%{transform:translateY(0) rotate(-25deg)} 40%{transform:translateY(-10px) rotate(-24deg)} 70%{transform:translateY(-3px) rotate(-26deg)} }

/* ═══════════════════════════════════════════
   HEADPHONE — top right
   ═══════════════════════════════════════════ */
.anim-headphone {
  position: absolute; right: 18px; top: 28px;
  width: 50px; height: 50px;
  animation: hFloat 3.5s ease-in-out infinite 1.2s;
}
.anim-headphone-band {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 18px;
  border: 4px solid #3B82F6;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
}
.anim-headphone-cup {
  position: absolute; bottom: 8px;
  width: 18px; height: 24px;
  background: linear-gradient(180deg, #60A5FA, #3B82F6);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(59,130,246,.25);
}
.anim-headphone-cup.left { left: 2px; }
.anim-headphone-cup.right { right: 2px; }
.anim-headphone-wave {
  position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 3px;
  background: rgba(59,130,246,.3);
  border-radius: 2px;
  animation: hWave 1.5s ease-in-out infinite;
}
@keyframes hFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes hWave { 0%,100%{opacity:.2;transform:scaleX(.5)} 50%{opacity:.7;transform:scaleX(1)} }

/* ═══════════════════════════════════════════
   BLACKBOARD — top left
   ═══════════════════════════════════════════ */
.anim-board {
  position: absolute; left: 14px; top: 24px;
  width: 56px; height: 42px;
  animation: bFloat 4s ease-in-out infinite .5s;
}
.anim-board-frame {
  position: absolute; inset: 0;
  background: #2D1B0E;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  border: 3px solid #5C3A1E;
}
.anim-board-chalk {
  position: absolute; top: 6px; left: 8px;
  width: 7px; height: 14px;
  background: #FFFDE7;
  border-radius: 1px;
  animation: chalkBounce 2s ease-in-out infinite;
}
.anim-board-line {
  position: absolute; left: 8px;
  height: 2px;
  background: rgba(255,255,255,.35);
  border-radius: 1px;
  opacity: 0;
  animation: chalkWrite 3s ease-in-out infinite;
}
.anim-board-line:nth-child(4) { top: 16px; width: 40px; animation-delay: 1s; }
.anim-board-line:nth-child(5) { top: 24px; width: 32px; animation-delay: 1.6s; }
.anim-board-line:nth-child(6) { top: 32px; width: 36px; animation-delay: 2.2s; }
@keyframes chalkBounce { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} 60%{transform:translateY(-1px)} }
@keyframes chalkWrite { 0%,80%{opacity:0;transform:scaleX(0)} 25%{opacity:.6;transform:scaleX(1)} 50%{opacity:.3;transform:scaleX(.85)} }

/* ═══════════════════════════════════════════
   LIGHTBULB — radial rays
   ═══════════════════════════════════════════ */
.anim-bulb-wrap {
  position: relative; width: 90px; height: 110px;
  animation: bFloat 4s cubic-bezier(.45,0,.55,1) infinite .8s;
}
.anim-bulb-glass {
  position: relative; width: 64px; height: 64px;
  background: radial-gradient(circle at 45% 40%, #FFFDE7, #FDE68A 40%, #F59E0B 100%);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 0 44px rgba(245,158,11,.35), 0 0 80px rgba(245,158,11,.15);
  margin: 0 auto;
  animation: bulbPulse 3.2s ease-in-out infinite;
}
.anim-bulb-base {
  width: 28px; height: 14px;
  background: linear-gradient(180deg, #94A3B8, #64748B);
  border-radius: 0 0 7px 7px;
  margin: -4px auto 0;
}
.anim-bulb-ray {
  position: absolute;
  background: rgba(245,158,11,.2);
  border-radius: 2px;
  animation: rayPulse 3.2s ease-in-out infinite;
}
.anim-bulb-ray:nth-child(1) { top: -16px; left: 50%; width: 2px; height: 20px; margin-left: -1px; }
.anim-bulb-ray:nth-child(2) { top: -12px; left: 10px; width: 2px; height: 15px; transform: rotate(-30deg); animation-delay: .2s; }
.anim-bulb-ray:nth-child(3) { top: -12px; right: 10px; width: 2px; height: 15px; transform: rotate(30deg); animation-delay: .4s; }
.anim-bulb-ray:nth-child(4) { top: 4px; left: -14px; width: 14px; height: 2px; animation-delay: .1s; }
.anim-bulb-ray:nth-child(5) { top: 4px; right: -14px; width: 14px; height: 2px; animation-delay: .35s; }
@keyframes bulbPulse { 0%,100%{box-shadow:0 0 34px rgba(245,158,11,.25),0 0 60px rgba(245,158,11,.1)} 50%{box-shadow:0 0 54px rgba(245,158,11,.45),0 0 100px rgba(245,158,11,.2)} }
@keyframes rayPulse { 0%,100%{opacity:.2;transform:scaleY(.8)} 50%{opacity:.6;transform:scaleY(1.5)} }

/* ═══════════════════════════════════════════
   TAGLINE
   ═══════════════════════════════════════════ */
.hero-anim-tagline {
  position: absolute; bottom: max(4px, 2%); left: 50%; transform: translateX(-50%);
  font-size: clamp(14px,2vw,18px); font-weight: 700;
  background: linear-gradient(135deg, #4ADE80, #22D3EE);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  white-space: nowrap;
  opacity: 0;
  animation: tagIn 4s ease-in-out infinite 2s;
  max-width: 90%;
}
@keyframes tagIn { 0%,85%{opacity:0;transform:translateX(-50%) translateY(12px)} 12%{opacity:1;transform:translateX(-50%) translateY(0)} 35%{opacity:1;transform:translateX(-50%) translateY(0)} 55%{opacity:0;transform:translateX(-50%) translateY(-8px)} }

/* ── Responsive ── */
@media(max-width:768px){
  .hero-anim{max-width:360px;height:300px}
  .anim-book-open{width:88px;height:72px}
  .anim-book-left,.anim-book-right{width:40px;height:64px}
  .anim-pencil-wrap{width:48px;height:100px}
  .anim-bulb-wrap{width:70px;height:88px}
  .anim-bulb-glass{width:50px;height:50px}
  .anim-headphone{right:8px;top:18px;width:40px;height:40px}
  .anim-board{left:4px;top:16px;width:44px;height:34px}
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-particle,
  .anim-book-open,
  .anim-pencil-wrap,
  .anim-headphone,
  .anim-board,
  .anim-bulb-wrap,
  .anim-book-left,
  .anim-book-right,
  .anim-bulb-glass,
  .hero-anim-tagline {
    animation: none !important;
    transition: none !important;
  }
}