/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');


@custom-variant dark (&:is(.dark *));



:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}


@font-face {
    font-family: 'Gambado Sans Forte';
    src: url('public\assets3\font\fonnts.com-Gambado_Sans_Forte.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.hero-custom-font {
    font-family: 'Gambado Sans Forte', sans-serif !important;
    text-transform: none;
}

/* Typography & Base Styles */
* {
  border-color: var(--border);
  outline-color: rgba(var(--ring), 0.5);
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, label, button {
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

h1 { font-size: 1.5rem; } /* 2xl equivalent */
h2 { font-size: 1.25rem; } /* xl equivalent */
h3 { font-size: 1.125rem; } /* lg equivalent */
h4, label, button, input { font-size: 1rem; } /* base equivalent */
input { font-weight: var(--font-weight-normal); }

/* Custom Animations for Hero */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
/* --- EXACT ANIMATIONS FROM YOUR TSX LOGIC --- */

/* 1. Logo Fade Down (initial: y: -20, animate: y: 0) */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-down {
    animation: fadeInDown 0.6s ease-out forwards;
}

/* 2. Content Slide In (initial: x: -50, animate: x: 0) */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slide-left {
    animation: slideInLeft 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

/* 3. Book Mockup (initial: scale: 0.8, rotateY: -30) */
@keyframes bookEntrance {
    from { opacity: 0; transform: scale(0.8) rotateY(-30deg); }
    to { opacity: 1; transform: scale(1) rotateY(0); }
}
.animate-zoom-book {
    animation: bookEntrance 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

/* 4. Scroll Indicator & Available Badge (animate: y: [0, 10, 0]) */
@keyframes customBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}
.animate-scroll-dot {
    animation: customBounce 2s ease-in-out infinite;
}

/* 5. Star Pulsing (animate: scale: [1, 1.2, 1]) */
@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.animate-star-pulse {
    animation: starPulse 2s ease-in-out infinite;
}

/* 6. Slow Spin for Sparkles (animate: rotate: 360) */
@keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: slowSpin 20s linear infinite;
}

/* 3D Context Fix */
.preserve-3d {
    transform-style: preserve-3d;
}
/* Poora Discover More block move karne ke liye */
@keyframes fullBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* Poora container 10px upar jayega */
}

.animate-full-bounce {
    animation: fullBounce 2.5s ease-in-out infinite;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}