/* ==========================================================================
   MANASVANI | FACE YOGA MASTERCLASS - GLOBAL STYLESHEET
   Reusable, Clean & High-Fidelity Typography and Component System
   ========================================================================== */

/* 1. Base Typography & Resets */
@layer base {
  html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  }
  
  body {
    overscroll-behavior: none;
  }
}

/* 2. Global Display & Headline Typography (Playfair Display Serif) */
:root {
  --color-surface-canvas: rgb(248, 250, 248);
  --color-surface-card: #ffffff;
  --color-surface-celadon: #f0fdf4;
  --color-emerald-deep: #042f24;
  --color-emerald-forest: #064e3b;
  --color-secondary: rgb(0, 108, 73);
  --color-mint-vibrant: #10b981;
}

.bg-surface-canvas {
  background-color: rgb(248, 250, 248) !important;
}

.bg-surface-card {
  background-color: #ffffff !important;
}

.bg-surface-celadon {
  background-color: #f0fdf4 !important;
}

.text-emerald-deep {
  color: #042f24 !important;
}

.text-secondary {
  color: rgb(0, 108, 73) !important;
}

.text-emerald-forest {
  color: #064e3b !important;
}

.font-display-xl,
.font-display-lg,
.font-display-lg-mobile,
.font-display-xl-mobile,
.font-headline-lg,
.font-headline-md,
.font-headline-sm,
.font-headline-lg-mobile,
h1, h2 {
  font-family: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif !important;
  font-optical-sizing: auto;
}

/* Body and UI Labels (Plus Jakarta Sans) */
.font-body-lg,
.font-body-md,
.font-body-sm,
.font-title-lg,
.font-title-md,
.font-label-md,
.font-label-sm {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 3. Reusable UI Components */

/* Glassmorphic Navbar & Modals */
.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
  background: rgba(4, 47, 36, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 3D Curriculum Deck Cards */
.deck-card {
  background-color: #ffffff;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease-out;
  text-align: left !important;
}

.deck-card h4,
.deck-card p,
.deck-card div,
.deck-card span {
  text-align: left !important;
}

/* Material Symbols Filled Icons (replaces inline font-variation-settings) */
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Star Rating Filled */
.star-rating {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: #f59e0b;
}

/* Ambient Radial Glow on Dark Sections */
.radial-glow-dark {
  background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(16, 185, 129, 0.15), rgba(255, 255, 255, 0));
}

/* Smooth Transitions & Focus States */
.btn-interactive {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-interactive:active {
  transform: scale(0.98);
}

/* 4. Dynamic Interactive Timeline */
.timeline-item {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.5;
}

.timeline-item.timeline-active {
  opacity: 1;
}

.timeline-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left !important;
}

.timeline-card h3,
.timeline-card .font-display-lg {
  text-align: left !important;
}

.timeline-item.timeline-active .timeline-card {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 14px 32px -4px rgba(16, 185, 129, 0.16), 0 4px 12px rgba(4, 47, 36, 0.05) !important;
  background-color: #ffffff !important;
}

.timeline-node {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item.timeline-active .timeline-node {
  transform: scale(1.3);
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.25), 0 0 16px rgba(16, 185, 129, 0.45) !important;
}

.timeline-node-dot {
  transition: all 0.3s ease;
}

.timeline-item.timeline-active .timeline-node-dot {
  background-color: #059669 !important;
  transform: scale(1.25);
}

.timeline-badge {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item.timeline-active .timeline-badge {
  transform: scale(1.05);
  box-shadow: 0 8px 20px -2px rgba(4, 47, 36, 0.28) !important;
}

/* 4. Bonus Punched Ticket Cards */
.bonus-punched-card {
  position: relative;
  background: transparent !important;
  min-height: 220px;
}

.bonus-punched-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 4px 14px rgba(4, 47, 36, 0.05)) drop-shadow(0 1px 3px rgba(4, 47, 36, 0.03));
  transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bonus-punched-card:hover .bonus-punched-svg {
  filter: drop-shadow(0 12px 28px rgba(4, 47, 36, 0.09)) drop-shadow(0 3px 8px rgba(4, 47, 36, 0.04));
}

/* 5. Continuous Credibility Carousel */
.marquee-container {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

.marquee-container:active {
  cursor: grabbing;
}

.marquee-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.marquee-continuous-track,
.proof-marquee-continuous-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
}

.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

/* 6. Atmospheric Background Pattern Textures */
.bg-grid-hero {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(6, 78, 59, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 78, 59, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 35%, transparent 85%);
  pointer-events: none;
}

/* Distinct, clearly visible GrowthSchool-style Dot Matrix Clusters */
.bg-dot-cluster {
  background-image: radial-gradient(circle, #10b981 1.75px, transparent 1.75px);
  background-size: 16px 16px;
  opacity: 0.65;
  pointer-events: none;
}

/* Section 6: Balanced Premium Texture (Subtle, visible, corner-faded to avoid clutter) */
.bg-revenue-mesh {
  position: relative;
}

.bg-revenue-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: 
    radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.06) 45%, transparent 70%),
    radial-gradient(circle at 0% 100%, rgba(16, 185, 129, 0.09) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.bg-revenue-mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Concentric Geometric Orbit/Aura Rings positioned outside bounds for sweeping arcs */
  background-image: repeating-radial-gradient(circle at 108% -8%, transparent 0px, transparent 48px, rgba(6, 78, 59, 0.09) 49px, transparent 50px, transparent 98px);
  mask-image: radial-gradient(ellipse 85% 70% at 96% 4%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 96% 4%, #000 35%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* 7. Floating Vertical Motion for Badges (3-5px lively float) */
@keyframes float-subtle-y {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes float-subtle-y-alt {
  0%, 100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0px);
  }
}

.animate-float-subtle {
  animation: float-subtle-y 2.2s ease-in-out infinite;
}

.animate-float-subtle-alt {
  animation: float-subtle-y-alt 2.6s ease-in-out infinite;
}

/* 8. Continuous Flashy Shimmering / Shining Light Sweep Effect for CTAs */
@keyframes cta-shimmer-sweep {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }
  100% {
    transform: translateX(240%) skewX(-20deg);
  }
}

[data-dynamic="cta-link"]:not(.font-label-md),
a[href="#enrollment"]:not(.font-label-md),
button[data-enroll-trigger="true"],
#submit-enroll-btn,
.btn-shine {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
}

[data-dynamic="cta-link"]:not(.font-label-md)::after,
a[href="#enrollment"]:not(.font-label-md)::after,
button[data-enroll-trigger="true"]::after,
#submit-enroll-btn::after,
.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 65%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 15%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.5) 55%,
    rgba(255, 255, 255, 0.08) 85%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-20deg);
  animation: cta-shimmer-sweep 2s linear infinite;
  pointer-events: none;
  z-index: 10;
}

/* 9. Unparalleled Recognition Responsive Grid View-More Rules */
/* Mobile: Show 4 items by default (hide 5th onwards) */
@media (max-width: 767px) {
  .recognition-hidden-mobile,
  .recognition-hidden-all {
    display: none !important;
  }
}

/* Desktop: Show 6 items by default (hide 7th onwards) */
@media (min-width: 768px) {
  .recognition-hidden-all {
    display: none !important;
  }
}

/* Expanded state: Show all items */
#recognition-grid.recognition-expanded .recognition-hidden-mobile,
#recognition-grid.recognition-expanded .recognition-hidden-all {
  display: block !important;
  animation: fadeInGrid 0.4s ease forwards;
}

@keyframes fadeInGrid {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 10. Video Testimonials Carousel & Cards */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.video-testimonial-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.video-testimonial-card:hover {
  transform: translateY(-4px);
}

.video-play-pulse {
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: play-pulse-glow 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes play-pulse-glow {
  to {
    box-shadow: 0 0 0 16px rgba(220, 38, 38, 0);
  }
}

.text-left {
  text-align: left !important;
}

@media (min-width: 1024px) {
  .lg\:text-left {
    text-align: left !important;
  }
}

/* 11. Mobile Headings (25px on mobile for section main h2 headings) */
@media (max-width: 639px) {
  main section:not(#hero-section):not(.hero-section) h2 {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }

  .timeline-card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}

/* 12. Celebrity Mentorship & Credibility Section (Meet Your Mentor Dark Green Theme) */
.cred-section-bg {
  background: #042f24 !important;
  background: radial-gradient(circle at 50% 15%, #073d30 0%, #042f24 60%, #021f18 100%) !important;
}

.cred-slider-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 16px 0 32px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.cred-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.cred-track {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: credInfiniteMarquee 75s linear infinite;
  will-change: transform;
}
.cred-track:hover {
  animation-play-state: paused;
}

@keyframes credInfiniteMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 13px)); }
}

.cred-slide {
  width: 380px;
  flex: 0 0 380px;
  box-sizing: border-box;
}

.cred-card {
  background: #021f18;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.cred-card:hover {
  transform: translateY(-6px);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.15);
}

.cred-media {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #03221a;
}

.cred-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.45s ease;
  display: block;
}

.cred-card:hover .cred-media img {
  transform: scale(1.05);
}

.cred-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(7, 61, 48, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #6ee7b7;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 2;
}

.cred-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #073d30;
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 0;
  outline: none;
}

.cred-arrow-btn:hover {
  background: #10b981;
  color: #042f24;
  border-color: #10b981;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4);
}

@media (max-width: 768px) {
  .cred-slide {
    width: 310px;
    flex: 0 0 310px;
  }
  .cred-media {
    height: 240px;
  }
  .cred-slide.cred-hide-mobile {
    display: none !important;
  }
  .video-testimonial-card.video-hide-mobile {
    display: none !important;
  }
}