/* Edu pages — enhanced visuals and micro-animations */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .edu-blob,
  .edu-card,
  .edu-btn-primary,
  .edu-btn-secondary {
    transition: none !important;
    animation: none !important;
  }
}

.edu-page { position: relative; }

/* Hero decorative blobs */
.edu-hero { position: relative; overflow: hidden; }
.edu-hero .edu-blob {
  position: absolute; inset: auto; display: block; width: 28rem; height: 28rem;
  filter: blur(60px); opacity: .35; pointer-events: none; transform: translateZ(0);
  border-radius: 9999px;
  background: radial-gradient( circle at 30% 30%, rgba(124,58,237,.9), rgba(99,102,241,.35) 45%, rgba(14,165,233,.25) 70%, transparent 72% );
  animation: eduFloatA 18s ease-in-out infinite;
}
.edu-hero .edu-blob.blob-1 { top: -6rem; left: -6rem; }
.edu-hero .edu-blob.blob-2 {
  right: -8rem; top: 10%; width: 22rem; height: 22rem;
  background: radial-gradient(circle at 60% 40%, rgba(14,165,233,.9), rgba(236,72,153,.25) 55%, transparent 60%);
  animation: eduFloatB 22s ease-in-out infinite;
}
.edu-hero .edu-blob.blob-3 {
  bottom: -10rem; left: 35%; width: 20rem; height: 20rem;
  background: radial-gradient(circle at 40% 60%, rgba(236,72,153,.8), rgba(99,102,241,.3) 50%, transparent 60%);
  animation: eduFloatC 26s ease-in-out infinite;
}

@keyframes eduFloatA {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(20px, -24px) scale(1.06); }
  66%     { transform: translate(-16px, 18px) scale(0.96); }
}
@keyframes eduFloatB {
  0%,100% { transform: translate(0,0) rotate(0.001deg); }
  50%     { transform: translate(-24px, 22px) rotate(8deg); }
}
@keyframes eduFloatC {
  0%,100% { transform: translate(0,0) rotate(0.001deg); }
  50%     { transform: translate(28px, -18px) rotate(-6deg); }
}

/* Reveal on scroll */
.reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.reveal-on-scroll.in { opacity: 1; transform: none; }

/* Headings accent underline */
.edu-program h2,
.edu-benefits h2,
.edu-how h2 {
  display: inline-block; position: relative; padding-bottom: .25rem;
  background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(14,165,233,.25));
  background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 6px;
}

/* Cards: subtle glass/gradient border + interactive hover */
.edu-program .grid > div,
.edu-benefits .grid > div,
.edu-how .grid > div {
  position: relative; overflow: hidden;
}

.edu-program .grid > div::before,
.edu-benefits .grid > div::before,
.edu-how .grid > div::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,.4), rgba(14,165,233,.25), rgba(236,72,153,.25), rgba(124,58,237,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; opacity: .35;
}

.edu-program .grid > div:hover::before,
.edu-benefits .grid > div:hover::before,
.edu-how .grid > div:hover::before { opacity: .6; }

.edu-program .grid > div,
.edu-benefits .grid > div,
.edu-how .grid > div {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.edu-program .grid > div:hover,
.edu-benefits .grid > div:hover,
.edu-how .grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -18px rgba(2,8,23,.25);
}

/* Grid items reveal sequencing */
.edu-program .grid > div,
.edu-benefits .grid > div,
.edu-how .grid > div { opacity: 0; transform: translateY(12px); }
.edu-program .grid > div.in,
.edu-benefits .grid > div.in,
.edu-how .grid > div.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* Primary / secondary buttons enhancements */
.edu-btn-primary { position: relative; isolation: isolate; }
.edu-btn-primary::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 9999px;
  background: radial-gradient( 120% 120% at 10% 10%, rgba(255,255,255,.25), transparent 35% ),
              radial-gradient( 120% 120% at 90% 30%, rgba(255,255,255,.15), transparent 55% );
  filter: blur(8px); opacity: 0; transition: opacity .3s ease;
}
.edu-btn-primary:hover::after { opacity: .9; }
.edu-btn-primary:hover { transform: translateY(-1px); }

.edu-btn-secondary { transition: transform .2s ease, box-shadow .2s ease; }
.edu-btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -12px rgba(2,8,23,.25); }

/* CTA polish */
.edu-cta .max-w-4xl {
  background-image: radial-gradient( 1200px 400px at 50% -50%, rgba(255,255,255,.12), rgba(255,255,255,0) 70% );
  position: relative; overflow: hidden;
}
.edu-cta .max-w-4xl::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; opacity: .25;
  background: conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.65), rgba(255,255,255,.2), rgba(255,255,255,.65));
}

/* Dark mode tune */
.dark .edu-hero .edu-blob { opacity: .28; }
.dark .edu-cta .max-w-4xl::before { opacity: .35; }

/* Icons inside circles */
.edu-ico { width: 20px; height: 20px; color: #5b21b6; display: block; }
.dark .edu-ico { color: #fff; }

.edu-ico .draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: eduDash 1s ease forwards; }
@keyframes eduDash { to { stroke-dashoffset: 0; } }

.edu-ico.wiggle { animation: eduWiggle 2.8s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes eduWiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-4deg);} 75% { transform: rotate(4deg);} }

.edu-ico.pulse .pulse-dot { transform-origin: 50% 50%; animation: eduPulse 1.8s ease-in-out infinite; }
@keyframes eduPulse { 0%,100% { transform: scale(1); opacity:.85 } 50% { transform: scale(1.25); opacity:1 } }

.edu-ico .dot { opacity: .45; }
.edu-ico .dot-1 { animation: eduDot 1.4s infinite .0s; }
.edu-ico .dot-2 { animation: eduDot 1.4s infinite .2s; }
.edu-ico .dot-3 { animation: eduDot 1.4s infinite .4s; }
@keyframes eduDot { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }

.edu-ico .wheel { transform-origin: center; animation: eduWheel 2.2s ease-in-out infinite; }
@keyframes eduWheel { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }

/* EduChina — unique constructs */
.edu-china .china-stack { position: relative; height: 320px; perspective: 1000px; }
.edu-china .china-stack .edu-ico { width: 64px; height: 64px; filter: drop-shadow(0 6px 16px rgba(2,8,23,.15)); }
@media (max-width: 767px){ .edu-china .china-stack .edu-ico { width: 52px; height: 52px; } }
.edu-china .china-stack .stack-inner::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 70% 30%, rgba(255,255,255,.35), transparent 60% ); opacity: .5; mix-blend-mode: screen; }
@media (max-width: 767px){ .edu-china .china-stack { height: 240px; } }
.edu-china .stack-card {
  position: absolute; inset: 10%; border-radius: 1rem; --rot: 0deg; --tx: 0px; --ty: 0px;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, opacity .6s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  box-shadow: 0 20px 60px -20px rgba(2,8,23,.25);
  overflow: hidden;
}
@media (max-width: 767px){ .edu-china .stack-card{ inset: 12%; } }
.edu-china .china-stack:not(.in) .stack-card { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.96); }
.dark .edu-china .stack-card { background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.65)); }
.edu-china .stack-card::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; opacity: .35;
  background: conic-gradient(from 90deg at 50% 50%, rgba(124,58,237,.8), rgba(14,165,233,.35), rgba(236,72,153,.4), rgba(124,58,237,.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.edu-china .stack-card .stack-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.edu-china .stack-card.layer-1 { --rot: -6deg; --tx: -8px; --ty: -8px; }
.edu-china .stack-card.layer-2 { --rot: 4deg;  --tx: 8px;  --ty: 6px; }
.edu-china .stack-card.layer-3 { --rot: -2deg; --tx: 2px;  --ty: 16px; }
.edu-china .china-stack:hover .stack-card { box-shadow: 0 30px 80px -30px rgba(2,8,23,.35); }
.edu-china .china-stack:hover .stack-card.layer-1 { transform: translate(calc(var(--tx) - 6px), calc(var(--ty) - 6px)) rotate(calc(var(--rot) - 1deg)); }
.edu-china .china-stack:hover .stack-card.layer-2 { transform: translate(calc(var(--tx) + 6px), calc(var(--ty) + 4px)) rotate(calc(var(--rot) + 1deg)); }
.edu-china .china-stack:hover .stack-card.layer-3 { transform: translate(calc(var(--tx) + 2px), calc(var(--ty) + 10px)) rotate(calc(var(--rot) + 1deg)); }

/* Program — horizontal scroll snap */
.edu-china .china-snap { position: relative; overflow: hidden; }
.edu-china .china-snap::before, .edu-china .china-snap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1; pointer-events: none;
}
.edu-china .china-snap::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.edu-china .china-snap::after { right: 0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.dark .edu-china .china-snap::before { background: linear-gradient(90deg, rgba(13,16,45,1), rgba(13,16,45,0)); }
.dark .edu-china .china-snap::after { background: linear-gradient(270deg, rgba(13,16,45,1), rgba(13,16,45,0)); }
.edu-china .china-track {
  display: flex; gap: 1.25rem; overflow-x: auto; padding: 0 1rem .5rem; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; touch-action: pan-x; max-width: 100%;
}
.edu-china .china-track::-webkit-scrollbar { height: 8px; }
.edu-china .china-track::-webkit-scrollbar-thumb { background: rgba(2,8,23,.2); border-radius: 9999px; }
.dark .edu-china .china-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
.edu-china .china-track .snap-card { width: clamp(260px, 85vw, 320px); scroll-snap-align: start; scroll-snap-stop: always; flex: 0 0 auto; }

.edu-china .china-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.edu-china .china-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(2,8,23,.25); border: 0; padding: 0; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.edu-china .china-dot:hover { transform: scale(1.15); }
.dark .edu-china .china-dot { background: rgba(255,255,255,.25); }
.edu-china .china-dot.is-active { background: linear-gradient(90deg, #7c3aed, #0ea5e9); transform: scale(1.25); }

/* Benefits — soft brand gradient (light/dark aware) */
.edu-china .china-features { position: relative; }
.edu-china .china-features::before {
  content: ""; position: absolute; inset: -20px -20px auto -20px; height: 220px; z-index: -1; pointer-events:none; border-radius: 24px;
  background-image:
    radial-gradient(rgba(124,58,237,.10) 1px, rgba(124,58,237,0) 1.5px),
    radial-gradient(rgba(14,165,233,.10) 1px, rgba(14,165,233,0) 1.5px),
    radial-gradient(900px 260px at 18% -20%, rgba(124,58,237,.10), rgba(124,58,237,0) 70%),
    radial-gradient(900px 260px at 82% -10%, rgba(236,72,153,.08), rgba(236,72,153,0) 70%);
  background-size: 22px 22px, 22px 22px, auto, auto;
  background-position: 0 0, 11px 11px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(1000px 360px at 50% -20%, #000 35%, transparent 75%);
  mask-image: radial-gradient(1000px 360px at 50% -20%, #000 35%, transparent 75%);
}
.dark .edu-china .china-features::before{
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, rgba(255,255,255,0) 1.5px),
    radial-gradient(rgba(255,255,255,.06) 1px, rgba(255,255,255,0) 1.5px),
    radial-gradient(900px 260px at 18% -20%, rgba(124,58,237,.22), rgba(124,58,237,0) 70%),
    radial-gradient(900px 260px at 82% -10%, rgba(236,72,153,.16), rgba(236,72,153,0) 70%);
}

/* Steps — connectors */
.edu-china .china-steps .grid { position: relative; }
.edu-china .china-steps .grid::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(14,165,233,.35));
  opacity: .35; border-radius: 2px; display: none;
}
@media (min-width: 768px) { .edu-china .china-steps .grid::before { display: block; } }

.edu-china .china-steps .grid > div { position: relative; }
.edu-china .china-steps .grid > div::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 10px; height: 10px; transform: translateX(-50%);
  border-radius: 9999px; background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}