/* ===================================================================
   EDUORBIT — PREMIUM ANIMATION SYSTEM v1.0
   GPU-only: transform + opacity only. 60fps on mobile.
   =================================================================== */

/* ===================== ANIMATION VARIABLES ===================== */
:root {
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --sharp: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.4s;
  --dur-mid: 0.7s;
  --dur-slow: 1.1s;
  --dur-xslow: 1.6s;
}

/* ============================================================
   SECTION WRAPPER — Each <section> enters as a full unit
   ============================================================ */
section {
  position: relative;
}

/* ============================================================
   CORE ENTRANCE VARIANTS
   All hidden by default, triggered by .in-view
   ============================================================ */

/* Fade Up (default) */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-anim].in-view {
  animation-fill-mode: both;
  animation-timing-function: var(--smooth);
  animation-duration: var(--dur-slow);
  animation-delay: var(--anim-delay, 0s);
}

/* Slide Up */
[data-anim="up"], [data-anim] {
  transform: translateY(60px);
}
[data-anim="up"].in-view, [data-anim].in-view {
  animation-name: animUp;
}

/* Slide Up Subtle */
[data-anim="up-sm"] {
  transform: translateY(30px);
}
[data-anim="up-sm"].in-view {
  animation-name: animUpSm;
  animation-duration: var(--dur-mid);
}

/* Slide from Left */
[data-anim="left"] {
  transform: translateX(-80px);
}
[data-anim="left"].in-view {
  animation-name: animLeft;
}

/* Slide from Right */
[data-anim="right"] {
  transform: translateX(80px);
}
[data-anim="right"].in-view {
  animation-name: animRight;
}

/* Scale Pop */
[data-anim="pop"] {
  transform: scale(0.8);
}
[data-anim="pop"].in-view {
  animation-name: animPop;
  animation-timing-function: var(--spring);
  animation-duration: var(--dur-mid);
}

/* Flip In (cards) */
[data-anim="flip"] {
  transform: perspective(600px) rotateX(25deg) translateY(40px);
}
[data-anim="flip"].in-view {
  animation-name: animFlip;
  animation-duration: var(--dur-slow);
}

/* Blur Fade */
[data-anim="blur"] {
  transform: translateY(20px);
  filter: blur(12px);
}
[data-anim="blur"].in-view {
  animation-name: animBlur;
  animation-duration: var(--dur-slow);
}

/* Zoom In */
[data-anim="zoom"] {
  transform: scale(1.08);
}
[data-anim="zoom"].in-view {
  animation-name: animZoom;
  animation-duration: var(--dur-slow);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes animUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes animUpSm {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes animLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes animRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes animPop {
  from { opacity: 0; transform: scale(0.8); }
  60%  { transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes animFlip {
  from { opacity: 0; transform: perspective(600px) rotateX(25deg) translateY(40px); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }
}
@keyframes animBlur {
  from { opacity: 0; transform: translateY(20px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes animZoom {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   SECTION REVEAL LINE — decorative horizontal sweep
   ============================================================ */
.section-reveal-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--smooth);
  background-size: 200% 100%;
  animation: shimmerLine 3s linear infinite;
}
section.in-view > .section-reveal-line {
  transform: scaleX(1);
}
@keyframes shimmerLine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   STAGGER CHILDREN (for grids/lists)
   Parent gets data-stagger, children automatically stagger
   ============================================================ */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
}
[data-stagger].in-view > *:nth-child(1)  { animation: animUp var(--dur-slow) var(--smooth) 0.05s both; }
[data-stagger].in-view > *:nth-child(2)  { animation: animUp var(--dur-slow) var(--smooth) 0.12s both; }
[data-stagger].in-view > *:nth-child(3)  { animation: animUp var(--dur-slow) var(--smooth) 0.19s both; }
[data-stagger].in-view > *:nth-child(4)  { animation: animUp var(--dur-slow) var(--smooth) 0.26s both; }
[data-stagger].in-view > *:nth-child(5)  { animation: animUp var(--dur-slow) var(--smooth) 0.33s both; }
[data-stagger].in-view > *:nth-child(6)  { animation: animUp var(--dur-slow) var(--smooth) 0.40s both; }
[data-stagger].in-view > *:nth-child(7)  { animation: animUp var(--dur-slow) var(--smooth) 0.47s both; }
[data-stagger].in-view > *:nth-child(8)  { animation: animUp var(--dur-slow) var(--smooth) 0.54s both; }
[data-stagger].in-view > *:nth-child(n+9) { animation: animUp var(--dur-slow) var(--smooth) 0.6s both; }

/* Fast stagger (for smaller cards) */
[data-stagger="fast"] > * { opacity: 0; transform: translateY(40px); }
[data-stagger="fast"].in-view > *:nth-child(1)  { animation: animUp var(--dur-mid) var(--smooth) 0.03s both; }
[data-stagger="fast"].in-view > *:nth-child(2)  { animation: animUp var(--dur-mid) var(--smooth) 0.08s both; }
[data-stagger="fast"].in-view > *:nth-child(3)  { animation: animUp var(--dur-mid) var(--smooth) 0.13s both; }
[data-stagger="fast"].in-view > *:nth-child(4)  { animation: animUp var(--dur-mid) var(--smooth) 0.18s both; }
[data-stagger="fast"].in-view > *:nth-child(n+5) { animation: animUp var(--dur-mid) var(--smooth) 0.23s both; }

/* ============================================================
   SPLIT TEXT CHAR ANIMATION
   JS will wrap each char in <span data-char>
   ============================================================ */
.split-text {
  display: block;
  overflow: hidden;
}
.split-text [data-char] {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  will-change: transform, opacity;
  transition: opacity 0s; /* overridden by animation */
}
.split-text.chars-in [data-char] {
  animation: charReveal 0.7s var(--spring) both;
}
.split-text.chars-in [data-char]:nth-child(1)  { animation-delay: 0.00s; }
.split-text.chars-in [data-char]:nth-child(2)  { animation-delay: 0.03s; }
.split-text.chars-in [data-char]:nth-child(3)  { animation-delay: 0.06s; }
.split-text.chars-in [data-char]:nth-child(4)  { animation-delay: 0.09s; }
.split-text.chars-in [data-char]:nth-child(5)  { animation-delay: 0.12s; }
.split-text.chars-in [data-char]:nth-child(6)  { animation-delay: 0.15s; }
.split-text.chars-in [data-char]:nth-child(7)  { animation-delay: 0.18s; }
.split-text.chars-in [data-char]:nth-child(8)  { animation-delay: 0.21s; }
.split-text.chars-in [data-char]:nth-child(9)  { animation-delay: 0.24s; }
.split-text.chars-in [data-char]:nth-child(10) { animation-delay: 0.27s; }
.split-text.chars-in [data-char]:nth-child(11) { animation-delay: 0.30s; }
.split-text.chars-in [data-char]:nth-child(12) { animation-delay: 0.33s; }
.split-text.chars-in [data-char]:nth-child(13) { animation-delay: 0.36s; }
.split-text.chars-in [data-char]:nth-child(14) { animation-delay: 0.39s; }
.split-text.chars-in [data-char]:nth-child(15) { animation-delay: 0.42s; }
.split-text.chars-in [data-char]:nth-child(n+16) { animation-delay: 0.45s; }
@keyframes charReveal {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MAGNETIC BUTTON
   (Tilt handled by JS, CSS sets the transition)
   ============================================================ */
.btn-magnetic {
  transition: transform 0.2s var(--smooth), box-shadow 0.2s var(--smooth) !important;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
/* Ripple inner layer */
.btn-magnetic .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   SHIMMER SKELETON — while content loads
   ============================================================ */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e8f0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   COUNTER POP — stat numbers
   ============================================================ */
.stat-num {
  display: inline-block;
  transition: transform 0.3s var(--spring);
}
.stat-num.counting {
  animation: countPop 0.4s var(--spring);
}
@keyframes countPop {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ============================================================
   HERO TITLE — animated gradient text
   ============================================================ */
.hero-title .title-line--accent {
  background: linear-gradient(135deg, #1B4D8E 0%, #2563EB 40%, #F5C518 70%, #1B4D8E 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ============================================================
   HERO BADGE PULSE glow
   ============================================================ */
.hero-badge {
  animation: badgeGlow 3s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 77, 142, 0); }
  50%       { box-shadow: 0 0 0 8px rgba(27, 77, 142, 0.06); }
}

/* ============================================================
   STAT DIVIDER PULSE
   ============================================================ */
.stat-divider {
  animation: statDivPulse 2.5s ease-in-out infinite;
}
@keyframes statDivPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ============================================================
   SECTION HEADING UNDERLINE DRAW
   ============================================================ */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  border-radius: 2px;
  transition: width 0.8s var(--smooth);
}
section.in-view .section-title::after {
  width: 60%;
}

/* ============================================================
   CARD TILT (3D perspective on hover — CSS only)
   ============================================================ */
.card-tilt {
  transition: transform 0.2s var(--smooth), box-shadow 0.2s var(--smooth) !important;
  will-change: transform;
  transform-style: preserve-3d;
}

/* ============================================================
   SCROLL PROGRESS BAR (top of page)
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  z-index: 10002;
  transition: width 0.1s linear;
  will-change: width;
}

/* ============================================================
   NAV LINKS STAGGER ON LOAD
   ============================================================ */
.nav-link {
  opacity: 0;
  animation: navLinkIn 0.5s var(--smooth) forwards;
}
.nav-link:nth-child(1) { animation-delay: 1.4s; }
.nav-link:nth-child(2) { animation-delay: 1.5s; }
.nav-link:nth-child(3) { animation-delay: 1.6s; }
.nav-link:nth-child(4) { animation-delay: 1.7s; }
.nav-link:nth-child(5) { animation-delay: 1.8s; }
.nav-link:nth-child(6) { animation-delay: 1.9s; }
.nav-link:nth-child(7) { animation-delay: 2.0s; }
.nav-link:nth-child(8) { animation-delay: 2.1s; }
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   COLLEGE CARD — lift + glow on hover
   ============================================================ */
.college-card {
  cursor: pointer;
  transition: transform 0.35s var(--smooth), box-shadow 0.35s var(--smooth) !important;
}
.college-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 24px 60px rgba(27, 77, 142, 0.18), 0 0 0 1.5px rgba(27, 77, 142, 0.12) !important;
}

/* ============================================================
   FEATURE CARD — slide-right reveal line on hover
   ============================================================ */
.feature-card {
  transition: transform 0.3s var(--smooth), padding-left 0.3s var(--smooth);
  position: relative;
  padding-left: 0;
}
.feature-card:hover {
  transform: translateX(8px);
}

/* ============================================================
   MARQUEE — speed up on hover
   ============================================================ */
.marquee-track {
  animation: marquee 20s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ============================================================
   SECTION TAG — animated dot
   ============================================================ */
.section-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-block;
  animation: pulse 2s infinite;
}

/* ============================================================
   CTA SECTION PARTICLES
   ============================================================ */
.cta-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245, 197, 24, 0.4);
  pointer-events: none;
  animation: particleFloat var(--float-dur, 8s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
}
@keyframes particleFloat {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; }
  33%       { transform: translateY(-40px) translateX(20px) scale(1.2); opacity: 0.8; }
  66%       { transform: translateY(-20px) translateX(-15px) scale(0.8); opacity: 0.5; }
}

/* ============================================================
   SERVICE CARD — number counter background
   ============================================================ */
.service-card .service-num {
  transition: transform 0.4s var(--spring), color 0.4s var(--smooth) !important;
}
.service-card:hover .service-num {
  transform: scale(1.3) translateX(-5px);
}

/* ============================================================
   LOAN TAB — animated indicator
   ============================================================ */
.loan-tab {
  position: relative;
  overflow: hidden;
}
.loan-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--yellow);
  transition: left 0.3s var(--smooth), right 0.3s var(--smooth);
}
.loan-tab:hover::after {
  left: 0; right: 0;
}

/* ============================================================
   FOOTER LINK HOVER — stagger slide
   ============================================================ */
.footer-links-group a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: gap 0.2s var(--smooth), color 0.25s !important;
}
.footer-links-group a::before {
  content: '→';
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s, max-width 0.2s var(--smooth);
}
.footer-links-group a:hover {
  gap: 8px;
}
.footer-links-group a:hover::before {
  opacity: 1;
  max-width: 20px;
}

/* ============================================================
   WHATSAPP FLOAT — wobble
   ============================================================ */
.wa-float {
  animation: wobble 6s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%       { transform: translateY(-8px) rotate(-3deg); }
  40%       { transform: translateY(-4px) rotate(3deg); }
  60%       { transform: translateY(-6px) rotate(-2deg); }
  80%       { transform: translateY(-2px) rotate(1deg); }
}

/* ============================================================
   PREFERS REDUCED MOTION — turn off heavy effects
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim],
  [data-stagger] > *,
  .split-text [data-char] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================
   BACKGROUND FLOATING ICONS (Engineering & Medico theme)
   ============================================================ */
.bg-floating-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
.floating-icon {
  position: absolute;
  opacity: 0.04;
  color: var(--blue);
  animation: floatAround var(--float-dur) ease-in-out var(--float-delay) infinite alternate;
  will-change: transform;
}
.floating-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.floating-icon:nth-child(3n+1) {
  color: var(--yellow);
  opacity: 0.03;
}
.floating-icon:nth-child(3n+2) {
  color: var(--blue-l);
  opacity: 0.05;
}

@keyframes floatAround {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(180deg);
  }
  100% {
    transform: translate3d(calc(var(--float-x) * -1), calc(var(--float-y) * -1), 0) rotate(360deg);
  }
}