/* =========================================================
   ENHANCEMENTS — Animations · Parallax · Micro-interactions
   Extends styles.css (forest luxury)
   ========================================================= */

/* ---------- KEYFRAMES ---------- */
@keyframes fadeInUp   { from { opacity:0; transform: translateY(40px);} to { opacity:1; transform: translateY(0);} }
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes slideInLeft  { from { opacity:0; transform: translateX(-50px);} to { opacity:1; transform: translateX(0);} }
@keyframes slideInRight { from { opacity:0; transform: translateX(50px);} to { opacity:1; transform: translateX(0);} }
@keyframes slowSpin   { from { transform: rotate(0);} to { transform: rotate(360deg);} }
@keyframes slowZoom   { from { transform: scale(1) translate3d(0,0,0);} to { transform: scale(1.08);} }
@keyframes float      { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
@keyframes floatRot   { 0%,100% { transform: translateY(0) rotate(0);} 50% { transform: translateY(-14px) rotate(8deg);} }
@keyframes shimmer    { 0% { background-position: -200% 0;} 100% { background-position: 200% 0;} }
@keyframes breathe    { 0%,100% { transform: scale(1); opacity: .45;} 50% { transform: scale(1.12); opacity: .85;} }
@keyframes glowPulse  { 0%,100% { box-shadow: 0 0 0 rgba(184,147,90,.0), var(--shadow-md);} 50% { box-shadow: 0 0 30px rgba(184,147,90,.35), var(--shadow-lg);} }
@keyframes scroll     { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes wheelSpin  { from { transform: rotate(0);} to { transform: rotate(360deg);} }

/* ---------- SCROLL REVEAL ---------- */
.reveal       { opacity: 0; transform: translateY(36px);
                transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; }
.reveal-left  { opacity: 0; transform: translateX(-48px);
                transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(48px);
                transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-scale { opacity: 0; transform: scale(.92);
                transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1; transform: none;
}
.delay-1  { transition-delay: .1s; }
.delay-2  { transition-delay: .22s; }
.delay-3  { transition-delay: .34s; }
.delay-4  { transition-delay: .46s; }

/* ---------- PAGE PROGRESS BAR ---------- */
.page-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(to right, var(--gold), var(--green-main), var(--gold));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  z-index: 200; width: 0;
  box-shadow: 0 0 10px rgba(184,147,90,.5);
  transition: width .12s linear;
}

/* ---------- NAVBAR SCROLLED STATE ---------- */
.navbar { transition: box-shadow .3s var(--ease), background .3s var(--ease), padding .3s var(--ease); }
.navbar.scrolled {
  background: rgba(255,253,248,.98);
  box-shadow: var(--shadow-md);
}
.navbar.scrolled .nav-inner { padding: 10px 28px; }

/* ---------- HERO — slow zoom + parallax ---------- */
.hero::before {
  will-change: transform;
  animation: slowZoom 24s ease-in-out infinite alternate;
  transform-origin: center;
}
.hero-content { animation: fadeInUp 1.2s var(--ease) both; }
.hero-logo { animation: fadeIn 1.6s var(--ease) .3s both, float 6s ease-in-out 2s infinite; }
.hero h1 { animation: fadeInUp 1.1s var(--ease) .4s both; }
.hero-sub { animation: fadeInUp 1.1s var(--ease) .6s both; }
.hero-ctas { animation: fadeInUp 1.1s var(--ease) .8s both; }

/* Decorative hero particles (subtle) */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-particles span {
  position: absolute; display: block; width: 6px; height: 6px;
  background: rgba(255,255,255,.6); border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,.5);
  animation: float 8s ease-in-out infinite;
  opacity: 0;
}

/* Hero scroll indicator */
.hero-scroll .icon { animation: float 1.8s ease-in-out infinite; }

/* ---------- GRADIENT TEXT on section heads ---------- */
.section-head h2,
.welcome h2,
.page-hero h1 {
  background: linear-gradient(120deg, var(--green-dark) 0%, var(--green-main) 45%, var(--green-dark) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-hero h1 {
  background: linear-gradient(120deg, #FFFFFF, var(--gold-soft) 50%, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- WAVE SECTION DIVIDERS ---------- */
.wave-divider { position: relative; height: 72px; margin: -72px 0 0; pointer-events: none; z-index: 3; }
.wave-divider svg { display: block; width: 100%; height: 100%; }
.wave-divider.flip svg { transform: scaleY(-1); }

/* ---------- CARDS — tilt lift + image zoom ---------- */
.card { will-change: transform; transform-style: preserve-3d; }
.card .card-img { overflow: hidden; }
.card .card-img > img,
.card .card-img img { transition: transform 1.2s var(--ease); }
.card:hover .card-img img { transform: scale(1.08); }
.card .card-img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(184,147,90,.0), rgba(184,147,90,.28));
  opacity: 0; transition: opacity .4s var(--ease); z-index: 1;
}
.card:hover .card-img::before { opacity: 1; }
.card .card-img .icon { transition: transform .6s var(--ease), opacity .4s; }
.card:hover .card-img .icon { transform: scale(1.1); opacity: 1; }

/* Top gold accent on card hover */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--gold), var(--gold-soft), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
  z-index: 2;
}
.card:hover::before { transform: scaleX(1); }

/* ---------- BUTTONS — shimmer + ripple-ish glow ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary::before, .btn-gold::before {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-25deg); pointer-events: none;
  transition: left .7s var(--ease);
}
.btn-primary:hover::before, .btn-gold:hover::before { left: 140%; }

/* Pulsing glow on primary CTA in hero */
.hero .btn-primary { animation: glowPulse 3.5s ease-in-out infinite; }

/* ---------- DHARMA WHEEL — slow rotate in divider ---------- */
.divider svg { animation: wheelSpin 60s linear infinite; transform-origin: center; }

/* ---------- STATS BAND ---------- */
.stats-band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 55%, var(--green-dark) 100%);
  color: var(--white);
  padding: 96px 28px;
}
.stats-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(184,147,90,.2), transparent 42%),
    radial-gradient(circle at 90% 85%, rgba(255,255,255,.06), transparent 45%);
}
.stats-band::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
  opacity: .5;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative; z-index: 1;
}
.stat { text-align: center; }
.stat .num-wrap {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 8px;
  color: var(--gold-soft);
}
.stat .num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw + 1rem, 4rem);
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-soft), #FFFFFF, var(--gold-soft));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s linear infinite;
}
.stat .num-suffix { color: var(--gold-soft); font-size: 1.4rem; font-family: var(--font-serif); }
.stat .label {
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 14px;
  font-weight: 500;
}
.stat .icon { width: 32px; height: 32px; color: var(--gold-soft); margin-bottom: 14px; stroke-width: 1.2; opacity: .9; }

/* ---------- MARQUEE TICKER (dharma quotes) ---------- */
.marquee {
  overflow: hidden;
  background: var(--green-dark);
  color: var(--gold-soft);
  padding: 16px 0;
  position: relative;
  border-top: 1px solid rgba(212,181,128,.12);
  border-bottom: 1px solid rgba(212,181,128,.12);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--green-dark), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--green-dark), transparent); }
.marquee-track {
  display: flex; gap: 80px;
  animation: scroll 48s linear infinite;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: .3px;
}
.marquee-track span { flex-shrink: 0; display: inline-flex; align-items: center; gap: 14px; }
.marquee-track .sep { color: var(--gold); opacity: .7; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- QUOTE ROTATOR ---------- */
.quote-rotator {
  position: relative;
  min-height: 220px;
  max-width: 820px; margin: 0 auto;
}
.quote-rotator blockquote {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw + 1rem, 2.1rem);
  line-height: 1.65;
  color: var(--green-dark);
  font-weight: 400;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.quote-rotator blockquote.active { opacity: 1; transform: translateY(0); }
.quote-dots { display: flex; gap: 10px; justify-content: center; margin-top: 36px; }
.quote-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-soft); opacity: .45; border: none; cursor: pointer;
  transition: opacity .3s, transform .3s, background .3s;
  padding: 0;
}
.quote-dots button.active { opacity: 1; background: var(--gold); transform: scale(1.3); }

/* ---------- TIMELINE ---------- */
.timeline { position: relative; max-width: 900px; margin: 40px auto; padding: 30px 0; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-soft) 10%, var(--gold) 50%, var(--gold-soft) 90%, transparent 100%);
  transform: translateX(-50%);
}
.timeline-item { position: relative; width: 50%; padding: 22px 48px; box-sizing: border-box; }
.timeline-item:nth-child(odd) { text-align: right; }
.timeline-item:nth-child(even) { margin-left: 50%; }
.timeline-item::before {
  content: ""; position: absolute; top: 32px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--gold-soft), 0 0 20px rgba(184,147,90,.4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline-item:nth-child(odd)::before  { right: -8px; }
.timeline-item:nth-child(even)::before { left: -8px; }
.timeline-item:hover::before {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--gold), 0 0 30px rgba(184,147,90,.6);
}
.timeline-card {
  background: var(--white);
  padding: 22px 26px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline-item:hover .timeline-card { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.timeline-year {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: .9rem;
  display: inline-block;
  margin-bottom: 6px;
}
.timeline-item h4 { color: var(--green-dark); margin: 4px 0 8px; font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; }
.timeline-item p { color: var(--text-mid); font-size: .95rem; line-height: 1.75; margin: 0; }

/* ---------- DECORATIVE CORNER ORNAMENTS ---------- */
.corner-ornament {
  position: absolute;
  width: 160px; height: 160px;
  opacity: .07;
  pointer-events: none;
  color: var(--gold);
  z-index: 0;
}
.corner-ornament.tl { top: 30px; left: 30px; }
.corner-ornament.tr { top: 30px; right: 30px; transform: scaleX(-1); }
.corner-ornament.bl { bottom: 30px; left: 30px; transform: scaleY(-1); }
.corner-ornament.br { bottom: 30px; right: 30px; transform: scale(-1,-1); }
.corner-ornament svg { width: 100%; height: 100%; }

/* Lotus watermark behind quote */
.quote .lotus-watermark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  opacity: .05;
  pointer-events: none;
  color: var(--gold);
  z-index: 0;
}
.quote .lotus-watermark svg { width: 100%; height: 100%; animation: breathe 8s ease-in-out infinite; transform-origin: center; }
.quote > .container { position: relative; z-index: 1; }

/* ---------- FLOATING DECORATIVE LEAVES ---------- */
.floating-deco {
  position: absolute; pointer-events: none;
  color: var(--green-main); opacity: .1;
  animation: floatRot 7s ease-in-out infinite;
}

/* ---------- CUSTOM SCROLLBAR ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--green-soft) var(--cream); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--green-soft);
  border-radius: 10px;
  border: 2px solid var(--cream);
  transition: background .3s;
}
::-webkit-scrollbar-thumb:hover { background: var(--green-main); }

/* ---------- SECTION-HEAD ornament line ---------- */
.section-head .eyebrow {
  position: relative; padding: 0 20px;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: ""; position: absolute; top: 50%; width: 24px; height: 1px;
  background: var(--gold-soft);
}
.section-head .eyebrow::before { left: -12px; }
.section-head .eyebrow::after  { right: -12px; }

/* ---------- INFO BANNER (below navbar) ---------- */
.info-banner {
  background: linear-gradient(to right, var(--green-dark), var(--green-main), var(--green-dark));
  color: var(--gold-soft);
  padding: 8px 24px;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .5px;
  border-bottom: 1px solid rgba(212,181,128,.15);
}
.info-banner a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.info-banner a:hover { color: #FFF; }

/* ---------- IMAGE REVEAL MASK ---------- */
.img-reveal {
  position: relative; overflow: hidden;
}
.img-reveal::after {
  content: ""; position: absolute; inset: 0;
  background: var(--green-dark);
  transform-origin: left; transform: scaleX(1);
  transition: transform 1.1s var(--ease);
}
.img-reveal.visible::after { transform: scaleX(0); transform-origin: right; }

/* ---------- RESPONSIVE TIMELINE ---------- */
@media (max-width: 720px) {
  .timeline::before { left: 24px; }
  .timeline-item { width: 100%; padding-left: 52px; padding-right: 16px; text-align: left !important; margin-left: 0 !important; }
  .timeline-item::before { left: 16px !important; right: auto !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ---------- PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-content, .hero h1, .hero-sub, .hero-ctas,
  .divider svg, .stat .num, .hero .btn-primary, .hero-particles span,
  .marquee-track, .floating-deco, .quote .lotus-watermark svg,
  .page-progress { animation: none !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}