/* ==========================================================================
   MYUNION.IN — Landing Page Styles
   Indian Tricolor Design System — Saffron / White / India Green / Navy (Ashoka)
   ========================================================================== */

:root{
  --saffron: #FF9933;
  --saffron-dark: #E67E00;
  --white: #FFFFFF;
  --india-green: #138808;
  --green-dark: #0C5C05;
  --navy: #000080;
  --navy-deep: #050b2e;
  --cream: #FFF8EE;
  --ink: #0a0e1a;
}

*{ scroll-behavior: smooth; }

html[lang="mr"] body, html[lang="hi"] body{
  font-family: 'Mukta', 'Noto Sans Devanagari', 'Poppins', sans-serif;
}
html[lang="en"] body{
  font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}
.font-deva{ font-family: 'Noto Sans Devanagari','Mukta', sans-serif; }

body{
  background: var(--ink);
  color: #0f172a;
  overflow-x: hidden;
}

/* ---------- Utility: Tricolor gradient text ---------- */
.text-tricolor{
  background: linear-gradient(90deg, var(--saffron) 0%, #f4f4f4 50%, var(--india-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-tricolor-bar{
  background: linear-gradient(90deg, var(--saffron) 0%, var(--saffron) 33.33%, var(--white) 33.33%, var(--white) 66.66%, var(--india-green) 66.66%, var(--india-green) 100%);
}

/* ---------- Glassmorphism ---------- */
.glass{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-light{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.glass-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,153,51,0.55);
  box-shadow: 0 20px 45px -15px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,153,51,0.15);
  background: rgba(255,255,255,0.09);
}

/* ---------- Header ---------- */
#site-header{
  transition: background .4s ease, box-shadow .4s ease, padding .3s ease;
}
#site-header.scrolled{
  background: rgba(5,8,25,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -10px rgba(0,0,0,0.5);
}

/* ---------- Hero ---------- */
.hero-wrap{
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,153,51,0.28), transparent 60%),
    radial-gradient(ellipse 80% 50% at 85% 90%, rgba(19,136,8,0.28), transparent 60%),
    linear-gradient(180deg, #050b2e 0%, #0a1140 45%, #050822 100%);
  overflow: hidden;
}

.hero-noise{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.35;
  pointer-events:none;
}

/* India map watermark */
.map-watermark{
  position:absolute;
  right:-6%;
  top:8%;
  width:min(58vw, 720px);
  opacity:.10;
  filter: drop-shadow(0 0 40px rgba(255,153,51,.25));
  pointer-events:none;
  animation: mapFloat 10s ease-in-out infinite;
}
@keyframes mapFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-14px) scale(1.015); }
}

/* Ashoka chakra */
.chakra{
  animation: chakraSpin 26s linear infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 22px rgba(0,0,128,.45));
}
@keyframes chakraSpin{ to{ transform: rotate(360deg); } }

.chakra-glow{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,0,128,.35), transparent 70%);
  filter: blur(10px);
  animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.08); }
}

/* Flying birds */
.bird{
  position:absolute;
  opacity:.55;
  animation: birdFly linear infinite;
}
.bird svg{ width:100%; height:100%; animation: flap .7s ease-in-out infinite alternate; }
@keyframes flap{ from{ transform: scaleY(1);} to{ transform: scaleY(.65);} }
@keyframes birdFly{
  from{ transform: translate(-10vw, 0); }
  to{ transform: translate(110vw, -6vh); }
}

/* Floating particles */
.particle{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.55);
  pointer-events:none;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.8; }
  90%{ opacity:.5; }
  100%{ transform: translateY(-100vh) translateX(20px); opacity:0; }
}

/* Tricolor ribbon */
.ribbon-wrap{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ribbon{
  position:absolute;
  width:180%;
  height:130px;
  left:-40%;
  background: linear-gradient(90deg, var(--saffron), var(--white) 50%, var(--india-green));
  opacity:.05;
  transform: rotate(-8deg);
  animation: ribbonDrift 18s ease-in-out infinite;
}
@keyframes ribbonDrift{
  0%,100%{ transform: rotate(-8deg) translateY(0); }
  50%{ transform: rotate(-6deg) translateY(30px); }
}

/* Flag wave (small emblem flag near heading) */
.flag-wave{
  display:inline-block;
  width:1em; height:1em;
  animation: waveFlag 2.2s ease-in-out infinite;
  transform-origin: 0% 50%;
}
@keyframes waveFlag{
  0%,100%{ transform: rotate(0deg); }
  25%{ transform: rotate(8deg); }
  75%{ transform: rotate(-6deg); }
}

/* Typing cursor */
.type-cursor::after{
  content:'|';
  margin-left:2px;
  animation: blink 1s step-start infinite;
  color: var(--saffron);
}
@keyframes blink{ 50%{ opacity:0; } }

/* Buttons */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:600;
  border-radius:9999px;
  padding:.85rem 1.9rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--saffron), #ff7a00);
  color:#1a0900;
  box-shadow: 0 10px 30px -8px rgba(255,153,51,.65);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(255,153,51,.8); }
.btn-outline{
  background: rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.5);
  color:#fff;
}
.btn-outline:hover{ background: rgba(255,255,255,0.16); transform: translateY(-3px); border-color:#fff; }
.btn-green{
  background: linear-gradient(135deg, var(--india-green), var(--green-dark));
  color:#fff;
  box-shadow: 0 10px 30px -8px rgba(19,136,8,.6);
}
.btn-green:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(19,136,8,.75); }
.btn-navy{
  background: linear-gradient(135deg, var(--navy), #1a1aae);
  color:#fff;
  box-shadow: 0 10px 30px -8px rgba(0,0,128,.6);
}
.btn-navy:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(0,0,128,.75); }

/* Section badges */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  padding:.4rem .95rem; border-radius:9999px;
}

/* Wave divider */
.wave-divider{ line-height:0; }
.wave-divider svg{ width:100%; height:auto; display:block; }
.wave-track{ animation: waveScroll 16s linear infinite; }
@keyframes waveScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Countdown */
.count-box{
  min-width:78px;
}
@media(min-width:640px){ .count-box{ min-width:96px; } }
.count-num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Chips */
.chip{
  transition: all .25s ease;
}
.chip:hover{
  background: rgba(255,153,51,0.16);
  border-color: rgba(255,153,51,0.55);
  transform: translateY(-3px);
}

/* Feature tile */
.tile-icon{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s ease;
}
.glass-card:hover .tile-icon{
  transform: scale(1.12) rotate(-6deg);
}

/* Independence section */
.indep-section{
  position:relative;
  background: linear-gradient(160deg, var(--saffron) 0%, var(--saffron) 32%, #fff 32%, #fff 68%, var(--india-green) 68%, var(--india-green) 100%);
}
.indep-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,25,.78), rgba(5,8,25,.88));
}

/* Marquee ticker */
.ticker-track{
  display:flex;
  width:max-content;
  animation: tickerScroll 32s linear infinite;
}
@keyframes tickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#050822; }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--saffron), var(--india-green)); border-radius:8px; }

/* Language dropdown */
.lang-menu{
  transform-origin: top right;
  transition: opacity .2s ease, transform .2s ease;
}

/* Section reveal fallback (in case AOS hasn't loaded) */
[data-aos]{ transition-property: transform, opacity; }

/* Selection color */
::selection{ background: var(--saffron); color:#1a0900; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}