/* ============================================================
   VibrantMinds — Premium Animations v3
   Slider Revolution Hero + Card Redesign
   ============================================================ */

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes shimmer { 0%{left:-100%} 100%{left:200%} }
@keyframes floatY  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulseRing { 0%,100%{box-shadow:0 0 0 0 rgba(253,72,0,0)} 50%{box-shadow:0 0 0 10px rgba(253,72,0,.12)} }
@keyframes badgePop { 0%{transform:scale(0) rotate(-10deg);opacity:0} 70%{transform:scale(1.1) rotate(2deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes slideUp  { 0%{opacity:0;transform:translateY(50px) scale(.95)} 100%{opacity:1;transform:none} }
@keyframes borderFlow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ── HERO ENTRANCE KEYFRAMES ────────────────────────────────── */
@keyframes heroFadeSlideUp {
  0%   { opacity: 0; transform: translateY(38px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideLeft {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroClipReveal {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0% 0 0);   opacity: 1; }
}
@keyframes heroBadgePop {
  0%   { opacity: 0; transform: translateY(-14px) scale(.85); }
  65%  { opacity: 1; transform: translateY(3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroScalePop {
  0%   { opacity: 0; transform: scale(.7); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-25px) scale(1.08); }
  66%     { transform: translate(-20px,15px) scale(.94); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-28px,20px) scale(1.1); }
  80%     { transform: translate(18px,-10px) scale(.92); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px,30px) scale(1.06); }
}
@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  10%  { opacity: 1; transform: translateY(-5px) scale(1); }
  90%  { opacity: .6; transform: translateY(-280px) scale(.7); }
  100% { opacity: 0; transform: translateY(-300px) scale(0); }
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(8px); }
}
@keyframes halopulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .5; }
  50%     { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
}
@keyframes glowTextFlicker {
  0%,100% { text-shadow: 0 0 20px rgba(253,72,0,.45), 0 0 60px rgba(253,72,0,.2); }
  50%     { text-shadow: 0 0 35px rgba(253,72,0,.65), 0 0 90px rgba(253,72,0,.3); }
}





/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.scroll-reveal {
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.scroll-reveal.visible { opacity:1; transform:none; }

/* Stagger delays for card grids */
.card-grid > *:nth-child(1){ transition-delay:.05s }
.card-grid > *:nth-child(2){ transition-delay:.15s }
.card-grid > *:nth-child(3){ transition-delay:.25s }
.card-grid > *:nth-child(4){ transition-delay:.35s }
.card-grid > *:nth-child(5){ transition-delay:.45s }
.card-grid > *:nth-child(6){ transition-delay:.55s }

/* ══════════════════════════════════════════════════════════════
   DRIVE CARDS — Full Redesign (dark, bold, cinematic)
══════════════════════════════════════════════════════════════ */
.drive-card {
  position: relative;
  background: linear-gradient(145deg, #0d2147 0%, #06142e 100%);
  border-radius: 20px;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease;
  border: 1px solid rgba(255,255,255,.06);
  will-change: transform;
  cursor: pointer;
  min-height: 320px;
}

/* Big decorative number watermark */
.drive-card::before {
  content: attr(data-company-initial, '#');
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-size: 10rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: rgba(255,255,255,.03);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -5px;
}

/* Top gradient accent line */
.drive-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fd4800, #ff8c42, #fd4800);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  border-radius: 20px 20px 0 0;
}

.drive-card:hover {
  transform: translateY(-12px) scale(1.01);
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 10px 25px rgba(253,72,0,.2),
    inset 0 1px 0 rgba(255,255,255,.1);
  border-color: rgba(253,72,0,.5);
}
.drive-card:hover::after {
  transform: scaleX(1);
  animation: borderFlow 2s linear infinite;
}

/* Glowing orb that follows cursor (injected by JS) */
.drive-glow-orb {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,72,0,.18) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  transform: translate(-50%,-50%);
  top: 50%; left: 50%;
}
.drive-card:hover .drive-glow-orb { opacity: 1; }

/* Logo hover animation */
.drive-logo,
.drive-logo-placeholder {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.drive-card:hover .drive-logo,
.drive-card:hover .drive-logo-placeholder {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* Badge shimmer */
.badge-ctc { position:relative; overflow:hidden; }
.badge-ctc::after {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation: shimmer 2.5s ease infinite 1.5s;
}
.badge-urgency { animation: pulseRing 2s ease-in-out infinite; }

/* Live indicator (injected via JS) */
.drive-live-dot {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 700;
  color: #00d4b4;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.drive-live-dot::before {
  content: '';
  width: 7px; height: 7px;
  background: #00d4b4;
  border-radius: 50%;
  animation: pulseRing 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* First card gets a floating effect */
.card-grid > .drive-card:first-child {
  animation: floatY 4.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   COURSE CARDS — Bold Glassmorphism Redesign
══════════════════════════════════════════════════════════════ */
.course-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,22,72,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  box-shadow: 0 4px 16px rgba(0,22,72,.05);
  will-change: transform;
}

/* Animated top accent bar */
.course-card::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, #fd4800, #ff8c42, #001648, #fd4800);
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  border-radius: 20px 20px 0 0;
  z-index: 2;
}

/* Hover shimmer overlay */
.course-card::after {
  content: '';
  position: absolute;
  top:0; left:-80%;
  width:50%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(253,72,0,.05) 50%, transparent);
  pointer-events: none;
}

.course-card:hover {
  transform: translateY(-14px);
  box-shadow:
    0 30px 65px rgba(0,22,72,.15),
    0 10px 25px rgba(253,72,0,.1);
  border-color: rgba(253,72,0,.3);
}
.course-card:hover::before { transform: scaleX(1); animation: borderFlow 3s linear infinite; }
.course-card:hover::after  { animation: shimmer .9s ease forwards; }

/* Image zoom on hover */
.course-img {
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.course-card:hover .course-img { transform: scale(1.07); }

/* Course image placeholder — make it much more dramatic */
.course-img-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #001648 0%, #0d2147 40%, #1e3a78 70%, #0b1d40 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.course-img-placeholder::before {
  content: '{ }';
  position: absolute;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(253,72,0,.12);
  font-family: monospace;
}
.course-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(253,72,0,.18) 0%, transparent 60%);
}

/* Arrow button upgrade */
.course-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .3s ease;
}
.course-btn:hover, .course-card:hover .course-btn {
  background: #001648;
  transform: scale(1.18) rotate(45deg);
  box-shadow: 0 6px 20px rgba(0,22,72,.35);
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS STORY CARDS — Slider Revolution Bold Style
   Vivid solid-color background, massive quote, stacked fan layout
══════════════════════════════════════════════════════════════ */

/* Fan perspective container */
.story-fan-section {
  padding: 90px 0;
  background: #0a0f1e;
  position: relative;
  overflow: hidden;
}
.story-fan-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(253,72,0,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0,22,72,.3) 0%, transparent 50%);
  pointer-events: none;
}

/* Carousel container centering elements */
.story-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60px;
}

.story-fan-track {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 480px;
  perspective: 1200px;
  position: relative;
}

/* BASE story card — now with vivid colors, scoped to carousel */
.story-fan-track .story-card {
  position: absolute !important;
  width: 340px;
  min-height: 420px;
  border-radius: 22px !important;
  padding: 40px 36px !important;
  border: none !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: perspective(900px) translate3d(0, 0, -250px) rotateY(0deg) scale(0.7);
  transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .65s ease, z-index .65s step-end !important;
  box-shadow: 0 15px 45px rgba(0,0,0,.35) !important;
  cursor: grab;
}
.story-fan-track .story-card:active {
  cursor: grabbing;
}

/* Color variants per card dynamically or via cycling in JS */
.story-fan-track .story-card:nth-child(5n+1) { background: linear-gradient(145deg, #e8450a, #c73600) !important; }
.story-fan-track .story-card:nth-child(5n+2) { background: linear-gradient(145deg, #fd6520, #e84500) !important; }
.story-fan-track .story-card:nth-child(5n+3) { background: linear-gradient(145deg, #b8763e, #9a5e28) !important; }
.story-fan-track .story-card:nth-child(5n+4) { background: linear-gradient(145deg, #001648, #00204f) !important; }
.story-fan-track .story-card:nth-child(5n+5) { background: linear-gradient(145deg, #d44200, #b53800) !important; }

/* Giant decorative quote mark */
.story-fan-track .story-card::before {
  content: '\201C';
  position: absolute;
  top: -15px;
  left: 24px;
  font-size: 9rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(255,255,255,.15);
  line-height: 1;
  pointer-events: none;
}

/* 3D active card (center) */
.story-fan-track .story-card.active-card {
  opacity: 1;
  pointer-events: auto;
  transform: perspective(900px) translate3d(0, 0, 80px) rotateY(0deg) scale(1);
  z-index: 5;
  box-shadow: 0 35px 85px rgba(0,0,0,.55) !important;
}

/* 3D prev card (left) */
.story-fan-track .story-card.prev-card {
  opacity: 0.75;
  pointer-events: auto;
  transform: perspective(900px) translate3d(-250px, 0, -60px) rotateY(18deg) scale(0.86);
  z-index: 3;
}

/* 3D next card (right) */
.story-fan-track .story-card.next-card {
  opacity: 0.75;
  pointer-events: auto;
  transform: perspective(900px) translate3d(250px, 0, -60px) rotateY(-18deg) scale(0.86);
  z-index: 3;
}

.story-fan-track .story-card.active-card:hover {
  transform: perspective(900px) translate3d(0, -10px, 120px) rotateY(0deg) scale(1.02) !important;
  z-index: 10;
  box-shadow: 0 45px 100px rgba(0,0,0,.65) !important;
}

/* Navigation buttons */
.story-carousel-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: all 0.3s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(8px);
  outline: none;
}
.story-carousel-btn:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
  box-shadow: 0 8px 25px rgba(253,72,0,0.35);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.story-carousel-btn.prev-btn { left: 10px; }
.story-carousel-btn.next-btn { right: 10px; }

/* Carousel Dots */
.story-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  z-index: 10;
}
.story-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.16,1,.3,1);
  border: none;
  padding: 0;
}
.story-carousel-dot.active {
  background: var(--color-orange);
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(253,72,0,0.5);
}

/* Story quote text */
.story-fan-track .story-quote-text {
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  margin-bottom: 30px;
  flex: 1;
  font-family: Georgia, serif;
  margin-top: 20px;
}

/* Separator line */
.story-fan-track .story-divider {
  width: 40px;
  height: 1.5px;
  background: rgba(255,255,255,.4);
  margin: 20px 0;
}

/* Author name */
.story-author-name {
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin: 0;
}
.story-author-role {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
}

/* Company badge inside card */
.story-company-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  width: fit-content;
  backdrop-filter: blur(4px);
}

/* Star rating */
.story-stars {
  color: #fbbf24;
  font-size: .9rem;
  letter-spacing: 2px;
  margin-bottom: 6px;
  display: block;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.theme-btn-primary {
  position: relative;
  overflow: hidden;
}
.theme-btn-primary::after {
  content: '';
  position: absolute;
  top:50%; left:50%;
  width:0; height:0;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .55s ease, height .55s ease, opacity .55s ease;
  opacity: 0;
}
.theme-btn-primary:hover::after {
  width: 350px; height: 350px; opacity: 1;
}

/* ── SECTION BADGES ──────────────────────────────────────────── */
.section-tag,
.badge,
.banner-tag {
  animation: badgePop .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-play-state: paused;
}
.section-tag.visible,
.badge.visible,
.banner-tag.visible {
  animation-play-state: running;
}

/* ── STAT CAPSULES ───────────────────────────────────────────── */
.stat-capsule-item {
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  cursor: default;
}
.stat-capsule-item:hover { transform: translateY(-5px); }
.stat-capsule-item:hover .stat-capsule-number { color: var(--color-orange); }
.stat-capsule-number { transition: color .3s ease; }

/* ── PARTNER LOGOS ───────────────────────────────────────────── */
.partner-card {
  transition: transform .3s ease, filter .3s ease;
  filter: grayscale(15%) brightness(.9);
}
.partner-card:hover {
  transform: scale(1.1) translateY(-3px);
  filter: grayscale(0%) brightness(1.05);
}

/* ── SECTION TITLE UNDERLINE ─────────────────────────────────── */
.section-title-underline {
  display: block;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #fd4800, #ff8c42);
  border-radius: 3px;
  margin-top: 8px;
  transition: width .8s cubic-bezier(.16,1,.3,1) .15s;
}
.section-title-underline.visible { width: 56px; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media(max-width: 991px) {
  .story-carousel-container {
    padding: 0 10px;
  }
  .story-fan-track {
    height: 440px;
    perspective: none;
  }
  .story-fan-track .story-card {
    position: absolute !important;
    transform: scale(0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 100%;
    max-width: 320px;
    transition: transform .4s ease, opacity .4s ease !important;
  }
  .story-fan-track .story-card.active-card {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    z-index: 5;
  }
  .story-carousel-btn {
    width: 42px;
    height: 42px;
  }
  .story-carousel-btn.prev-btn { left: -5px; }
  .story-carousel-btn.next-btn { right: -5px; }
  .story-fan-track .story-card { min-height: 300px !important; }
  .drive-card:hover,
  .course-card:hover { transform: translateY(-6px); }
}
@media(max-width:600px){
  .story-fan-track .story-card { padding: 28px 22px !important; }
  .story-fan-track .story-card::before { font-size: 6rem; }
}