@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400&display=swap');

:root {
    --bg-light: #F8F8F8;
    --bg-dark: #030303;
    --text-dark: #111111;
    --text-light: #FFFFFF;
    --text-muted-dark: #777777;
    --text-muted-light: #999999;
    --accent: #FF7A00;
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-light);
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

.container-fluid {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
}

.section-padding {
    padding: 160px 0;
}

.eyebrow {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted-light);
    display: block;
    margin-bottom: 24px;
}

.eyebrow.dark-text {
    color: var(--text-muted-dark);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 30px 0;
    transition: all 0.4s ease;
    mix-blend-mode: difference; /* This makes the white text invert on light backgrounds nicely if needed, or we just handle it via JS*/
}

.nav-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    height: 30px;
    object-fit: contain;
    filter: invert(1);
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-light); /* changed to light so mix-blend computes to dark on light backgrounds */
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 40px;
}

.nav-links li a {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--text-light); /* Always light so mix-blend difference creates black on white backgrounds */
    transition: opacity 0.3s;
    font-weight: 400;
}

.nav-links li a:hover {
    opacity: 0.6;
}

.btn-nav {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--text-light);
    border-radius: 100px;
}

.btn-nav:hover {
    background: var(--text-light);
    color: var(--text-dark) !important;
}

/* Full Screen Hero Container (Dark) */
.hero-fullscreen {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.fullscreen-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none; /* ensures animation interactions pass through */
}

.saffron-title {
    font-family: var(--font-heading);
    font-size: 10vw;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-shadow: 0 10px 40px rgba(255,122,0,0.4);
    margin-top: -15vh; /* Places Ekalavya just above the eye graphic ideally */
}

/* Intro Section (Moved from Hero) */
.intro-section {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.sanskrit-tagline {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 30px;
    font-style: italic;
    opacity: 0.9;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-muted-dark);
    max-width: 600px;
    font-family: var(--font-body);
}



/* Vision Section (Dark) */
.vision-section {
    background-color: var(--bg-dark);
    color: var(--text-light);
    min-height: 120vh; /* Extra height for scroll effect */
    position: relative;
    overflow: hidden;
}

.vision-container {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 150px;
}

.vision-text-side {
    width: 45%;
    position: relative;
    z-index: 10;
}

.vertical-line-block {
    position: relative;
    padding-left: 60px;
}

.vertical-line-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.vertical-line-block h2 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 40px;
}

.vision-p {
    font-size: 1.1rem;
    color: var(--text-muted-light);
    max-width: 80%;
    line-height: 1.8;
}

.minimal-features {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.minimal-feature h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 4px;
    font-weight: 500;
}

.minimal-feature p {
    font-size: 0.95rem;
    color: var(--text-muted-light);
    max-width: 80%;
}

.vision-graphic-side {
    width: 50%;
    position: relative;
}

.scrolling-graphic {
    position: sticky;
    top: 30vh;
    left: 0;
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s linear;
}

.scrolling-logo {
    width: 30vw;
    max-width: 500px;
    object-fit: contain;
    filter: drop-shadow(0 0 60px rgba(255,122,0,0.3));
}

/* Journey / Roadmap (Light) */
.journey {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.section-top {
    text-align: center;
    margin-bottom: 100px;
}

.section-top h2 {
    font-size: 3rem;
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto;
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.journey-card {
    padding: 0 20px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.journey-card h3 {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 200;
    color: var(--accent);
    margin-bottom: 20px;
}

.journey-card h4 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 16px;
}

.journey-card p {
    color: var(--text-muted-dark);
}

/* Enquiry Minimalist (Image 1 Style) */
.enquiry {
    background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%23050505"/></svg>') center/cover;
    background-color: #050505;
    color: var(--text-light);
    text-align: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.enquiry-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.enquiry-text h1 {
    font-family: var(--font-heading);
    font-size: 8vw;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.enquiry-text p {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    color: var(--text-muted-light);
    margin-bottom: 80px;
}

.minimal-form {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

.input-line {
    margin-bottom: 30px;
}

.input-line input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding: 15px 0;
    color: var(--text-light);
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.3s;
}

.input-line input::placeholder {
    color: var(--text-muted-light);
}

.input-line input:focus {
    border-bottom-color: var(--text-light);
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-muted-light);
    cursor: pointer;
}

.btn-subscribe {
    background: var(--text-light);
    color: var(--text-dark);
    border: none;
    border-radius: 100px;
    padding: 12px 30px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.btn-subscribe:hover {
    transform: scale(1.05);
}

/* Footer Null */
.footer {
    background-color: #050505;
    color: var(--text-muted-light);
    padding: 30px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.75rem;
    font-family: var(--font-heading);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-container-split {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 40px;
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .hero-content, .hero-graphic {
        width: 100%;
    }
    .hero-title, .hero-subtitle {
        text-align: center;
    }
    .hero-subtitle {
        margin: 0 auto;
    }
    .vision-container {
        flex-direction: column;
    }
    .vision-text-side, .vision-graphic-side {
        width: 100%;
    }
    .journey-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 12vw;
    }
    .vertical-line-block h2 {
        font-size: 2.5rem;
    }
    .nav-links {
        display: none; /* simple hidden for strictly minimal approach, or hamburger */
    }
    .footer-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* Extracted from index1.html */

:root{
  --orange:#f5a623;
  --orange-deep:#c97b0a;
  --orange-bright:#fbbf24;
  --orange-glow:#ff9500;
}

/* ─── tall scroll driver ─── */
#scroll-driver{height:700vh;position:relative}

/* ─── sticky full-screen canvas ─── */
#sticky-scene{
  position:sticky;
  top:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #1a0d35 0%, #0d0820 50%, #060310 100%);
}

/* ─── SVG fills screen ─── */
svg#scene{width:100vw;height:100vh;display:block}

/* ─── progress bar ─── */
#prog-bar{
  position:absolute;top:0;left:0;
  height:3px;
  background:linear-gradient(90deg,#c97b0a,#f5a623,#fbbf24);
  width:0%;z-index:100;
}

/* ─── scroll hint ─── */
#scroll-hint{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);
  color:#f5a62399;
  font-size:0.65rem;letter-spacing:0.3em;
  font-family:'Cinzel',serif;
  opacity:1;transition:opacity 0.6s;
  text-align:center;pointer-events:none;z-index:99;
}
#scroll-hint .arr{
  display:block;margin:0.5rem auto 0;
  width:14px;height:14px;
  border-right:1.5px solid #f5a623;
  border-bottom:1.5px solid #f5a623;
  transform:rotate(45deg);
  animation:arr-bounce 1.3s ease-in-out infinite;
}
@keyframes arr-bounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(6px)}}

/* ─── chapter label ─── */
#chapter-label{
  position:absolute;top:1.4rem;right:1.4rem;
  color:#f5a62355;font-size:0.6rem;
  letter-spacing:0.35em;text-transform:uppercase;
  font-family:'Cinzel',serif;
  z-index:99;transition:opacity 0.4s;
}

/* ════════════════════════════════════════════════
   EKALAVYA BRAND BLOCK — bottom-left entry
   Starts tiny at bottom-left, grows to full size, fades in
   ════════════════════════════════════════════════ */
#brand-block{
  position:absolute;
  left:0; bottom:0;
  z-index:50;
  pointer-events:none;
  padding:0 0 2.5rem 3rem;

  /* initial state: tiny point at bottom-left, invisible */
  transform-origin: left bottom;
  transform: scale(0.04) translate(-10px, 10px);
  opacity: 0;

  /* driven by JS — no CSS transition here, JS sets these */
  will-change: transform, opacity;
}

#brand-title{
  font-family:'Cinzel Decorative',serif;
  font-weight:900;
  font-size:clamp(2.8rem, 7vw, 6.5rem);
  line-height:1;
  letter-spacing:0.04em;
  color:#f5a623;
  text-shadow:
    0 0 40px #f5a62388,
    0 0 80px #f5a62344,
    3px 3px 0px #7a3d00,
    6px 6px 0px #4a2300,
    8px 8px 12px #00000088;
  position:relative;
}

/* accent on É */
#brand-title .accent{color:#fbbf24}

#brand-sanskrit{
  font-family:'Noto Serif Devanagari',serif;
  font-weight:600;
  font-size:clamp(0.85rem, 2vw, 1.45rem);
  color:#f5a623cc;
  letter-spacing:0.08em;
  margin-top:0.5rem;
  text-shadow:0 0 20px #f5a62366, 1px 1px 4px #000;
}

#brand-english{
  font-family:'Cinzel',serif;
  font-weight:400;
  font-size:clamp(0.75rem, 1.6vw, 1.15rem);
  color:#fbbf2499;
  letter-spacing:0.18em;
  margin-top:0.2rem;
  font-style:italic;
  text-shadow:0 0 12px #f5a62344;
}

#brand-divider{
  width:0%;height:1px;
  background:linear-gradient(90deg,#f5a623,transparent);
  margin:0.6rem 0;
  transition:width 0.8s ease;
}

/* ─── SVG ANIMATIONS ─── */
@keyframes eye-breathe{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.04) scaleX(1.01)}}
@keyframes guru-float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-8px)}}
@keyframes aura-expand{0%,100%{opacity:0.12;transform:scale(1)}50%{opacity:0.3;transform:scale(1.08)}}
@keyframes aura-expand2{0%,100%{opacity:0.07;transform:scale(1)}50%{opacity:0.18;transform:scale(1.14)}}
@keyframes particle-up{0%{opacity:0;transform:translateY(0) scale(0.4)}25%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(0.7)}}
@keyframes ray-pulse{0%,100%{opacity:0.08}50%{opacity:0.22}}
@keyframes tree-sway{0%,100%{transform:rotate(0deg)}30%{transform:rotate(1.5deg)}70%{transform:rotate(-1deg)}}
@keyframes leaf-flutter{0%,100%{transform:rotate(0deg)}33%{transform:rotate(10deg)}66%{transform:rotate(-7deg)}}
@keyframes breathe-student{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes sparkle-pop{0%,100%{opacity:0;transform:scale(0)}40%,60%{opacity:1;transform:scale(1)}}
@keyframes eye-iris-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes om-glow{0%,100%{opacity:0.15}50%{opacity:0.4}}
@keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes halo-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes beard-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes star-twinkle{0%,100%{opacity:0.2}50%{opacity:0.95}}

.eye-group{animation:eye-breathe 5s ease-in-out infinite;transform-origin:280px 175px}
.guru-inner{animation:guru-float 4s ease-in-out infinite}
.iris-inner{animation:eye-iris-pulse 4s ease-in-out infinite;transform-origin:280px 175px}
.aura1{animation:aura-expand 4s ease-in-out infinite;transform-origin:280px 175px}
.aura2{animation:aura-expand2 4s ease-in-out infinite 0.5s;transform-origin:280px 175px}
.ray-g{animation:ray-pulse 3s ease-in-out infinite}
.ray-g2{animation:ray-pulse 3s ease-in-out infinite 0.6s}
.ray-g3{animation:ray-pulse 3s ease-in-out infinite 1.2s}
.ray-g4{animation:ray-pulse 3s ease-in-out infinite 1.8s}
.tree-all{animation:tree-sway 8s ease-in-out infinite;transform-origin:390px 430px}
.lf1{animation:leaf-flutter 3s ease-in-out infinite;transform-origin:320px 210px}
.lf2{animation:leaf-flutter 3.5s ease-in-out infinite 0.7s;transform-origin:455px 225px}
.lf3{animation:leaf-flutter 2.8s ease-in-out infinite 1.3s;transform-origin:385px 165px}
.student-.sp1{animation:sparkle-pop 2.4s ease-in-out infinite 0s}
.sp2{animation:sparkle-pop 2.4s ease-in-out infinite 0.6s}
.sp3{animation:sparkle-pop 2.4s ease-in-out infinite 1.2s}
.sp4{animation:sparkle-pop 2.4s ease-in-out infinite 1.8s}
.p1{animation:particle-up 3.5s ease-out infinite 0s}
.p2{animation:particle-up 3.5s ease-out infinite 0.9s}
.p3{animation:particle-up 3.5s ease-out infinite 1.8s}
.p4{animation:particle-up 3.5s ease-out infinite 2.5s}
.om-txt{animation:om-glow 3s ease-in-out infinite}
.beard-g{animation:beard-wave 4s ease-in-out infinite;transform-origin:280px 210px}
.halo{animation:halo-spin 18s linear infinite;transform-origin:280px 143px}
.cursor{animation:cursor-blink 1s step-end infinite}
.st1{animation:star-twinkle 2.1s ease-in-out infinite}
.st2{animation:star-twinkle 2.8s ease-in-out infinite 0.4s}
.st3{animation:star-twinkle 1.9s ease-in-out infinite 1.1s}
.st4{animation:star-twinkle 3.2s ease-in-out infinite 0.7s}
.st5{animation:star-twinkle 2.4s ease-in-out infinite 1.6s}