/**
 * Kirti Samvaad - Motion, Animation & Visual Polish
 * Scroll-triggered reveals, stagger, card hovers, transitions
 * Respects prefers-reduced-motion throughout
 */

/* ==========================================================================
   1. SCROLL-TRIGGERED REVEAL SYSTEM
   Elements gain [data-reveal] — JS adds .is-revealed when in viewport
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-up"] {
  transform: translateY(22px);
}

[data-reveal="fade-right"] {
  transform: translateX(-22px);
}

[data-reveal="fade-left"] {
  transform: translateX(22px);
}

[data-reveal="scale-in"] {
  transform: scale(0.96) translateY(10px);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delay utilities for sibling elements */
[data-stagger="1"] { transition-delay: 0.05s; }
[data-stagger="2"] { transition-delay: 0.12s; }
[data-stagger="3"] { transition-delay: 0.19s; }
[data-stagger="4"] { transition-delay: 0.26s; }
[data-stagger="5"] { transition-delay: 0.33s; }
[data-stagger="6"] { transition-delay: 0.40s; }
[data-stagger="7"] { transition-delay: 0.47s; }
[data-stagger="8"] { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   2. LANGUAGE SWITCH TRANSITION
   Smooth cross-fade on content area during language change
   ========================================================================== */

body.lang-switching {
  pointer-events: none;
}

body.lang-switching main,
body.lang-switching .site-footer {
  opacity: 0.75;
  filter: blur(0.5px);
  transition: opacity 0.18s ease, filter 0.18s ease;
}

body:not(.lang-switching) main,
body:not(.lang-switching) .site-footer {
  opacity: 1;
  filter: none;
  transition: opacity 0.22s ease, filter 0.22s ease;
}


/* ==========================================================================
   3. PREMIUM CARD HOVER EFFECTS
   ========================================================================== */

/* Service cards — refined gold sweep, top accent bar, and smooth elevation */
.service-card {
  overflow: hidden;
  position: relative;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.28s ease;
  will-change: transform, box-shadow;
}

/* Subtle gold accent line at the top of the card that draws in on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold) 0%, #F5C278 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  z-index: 2;
  pointer-events: none;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(233, 162, 59, 0.04) 0%, rgba(233, 162, 59, 0) 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  border-radius: var(--radius-md);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(233, 162, 59, 0.5);
    box-shadow: 0 16px 36px -8px rgba(20, 43, 74, 0.12), 0 4px 14px -2px rgba(233, 162, 59, 0.08);
  }

  .service-card:hover::before {
    transform: scaleX(1);
  }

  .service-card:hover::after {
    opacity: 1;
  }

  /* Tasteful icon wrap & svg movement */
  .service-card:hover .service-icon-wrap {
    background-color: var(--color-navy-primary);
    color: var(--color-gold);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 4px 14px rgba(20, 43, 74, 0.18);
  }

  .service-card:hover .service-icon-wrap svg {
    transform: scale(1.08) rotate(3deg);
  }

  .service-card:hover .service-num {
    color: var(--color-gold-hover);
    transform: translateX(3px);
  }
}

/* Icon wrap base transition */
.service-icon-wrap {
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease;
}

.service-icon-wrap svg {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-num {
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Capability cards — icon flick */
.capability-card .capability-icon {
  transform: rotate(0deg);
}

.capability-card:hover .capability-icon {
  transform: rotate(-6deg) scale(1.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease;
}

/* Audience cards — left border pulse on hover */
.audience-card {
  transition: all var(--transition-normal);
  border-left: 3px solid transparent;
}

.audience-card:hover {
  border-left-color: var(--color-gold);
}

/* Approach cards on dark bg — glow on hover */
.approach-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}

.approach-card:hover::after {
  border-color: rgba(233, 162, 59, 0.3);
  box-shadow: 0 0 24px rgba(233, 162, 59, 0.07);
}


/* ==========================================================================
   4. BUTTON MICRO-INTERACTIONS
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

.btn:active {
  transform: translateY(0) scale(0.97) !important;
  transition: transform 0.08s ease;
}

/* Gold shimmer sweep on primary button */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn-primary:hover::after {
  left: 160%;
}

/* Navy button subtle inner glow */
.btn-secondary:hover {
  box-shadow: 0 4px 14px rgba(20, 43, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Outline button — fill on hover */
.btn-outline-light {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   5. NAVIGATION REFINEMENTS
   ========================================================================== */

/* Animated underline — uses scaleX instead of width for GPU acceleration */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* Mobile nav drawer entrance & link staggering */
.mobile-drawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mobile-nav-link {
  position: relative;
  opacity: 0.6;
  transform: translateX(8px);
  transition:
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    color var(--transition-fast),
    padding-left var(--transition-fast);
}

.mobile-drawer.is-open .mobile-nav-link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-drawer.is-open .mobile-nav-list li:nth-child(1) .mobile-nav-link { transition-delay: 0.04s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(2) .mobile-nav-link { transition-delay: 0.08s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(3) .mobile-nav-link { transition-delay: 0.12s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(4) .mobile-nav-link { transition-delay: 0.16s; }
.mobile-drawer.is-open .mobile-nav-list li:nth-child(5) .mobile-nav-link { transition-delay: 0.20s; }

.mobile-nav-link:hover {
  color: var(--color-gold-hover);
  padding-left: 0.5rem;
}

.mobile-nav-link::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--color-gold);
  border-radius: 2px;
  transition: transform var(--transition-fast);
}

.mobile-nav-link:hover::before {
  transform: translateY(-50%) scaleY(1);
}


/* ==========================================================================
   6. BRAND EMBLEM HOVER
   Prepared for future centre-stage logo intro animation
   ========================================================================== */

/* Brand emblem container — stable slot for intro animation pivot point */
.brand-emblem {
  transition: transform var(--transition-normal);
  transform-origin: center center;
}

.brand-link:hover .brand-emblem {
  transform: rotate(-3deg) scale(1.05);
}

/* The emblem should not transition during any lang-switch */
body.lang-switching .brand-emblem {
  transition: none;
}


/* ==========================================================================
   7. TAGLINE TYPOGRAPHY — PREMIUM RENDERING
   Exact Approved Copy:
   Hindi: "आपकी कीर्ति हमारा संवाद"
   English mode: "Aapki Kirti Hamara Samvaad"
   ========================================================================== */

/* Hero prominent tagline — refined editorial typography */
.hero-tagline-typed {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #874E08;
}

.lang-hi .hero-tagline-typed,
:lang(hi) .hero-tagline-typed {
  font-family: var(--font-hi);
  letter-spacing: 0;
  font-weight: 700;
}

/* Footer tagline — larger, bolder */
.footer-tagline {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--color-gold);
  line-height: 1.3;
}

.lang-hi .footer-tagline,
:lang(hi) .footer-tagline {
  font-family: var(--font-hi);
  font-size: 1.1rem;
  letter-spacing: 0;
  font-weight: 700;
}


/* ==========================================================================
   8. SECTION ACCENT VISUAL ELEMENTS
   Restrained light/shape decorators for premium depth without clutter
   ========================================================================== */

/* Closing CTA — radial glow spot behind headline */
.closing-cta-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 100%);
  height: 350px;
  background: radial-gradient(ellipse at 50% 0%, rgba(233, 162, 59, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Scope section navy box — subtle radial side glow */
.operational-scope-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 280px;
  height: 180px;
  background: radial-gradient(ellipse at 100% 100%, rgba(233, 162, 59, 0.08) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 0 0 var(--radius-md) 0;
}

/* Approach dark section — gold rule at top already in homepage.css, add bottom teal whisper */
.approach-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 140, 140, 0.4), transparent);
}


/* ==========================================================================
   9. HERO SECTION POLISH
   ========================================================================== */

/* Hero headline — static, bold, visually dominant editorial rendering */
.hero-headline {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

/* Tagline typing animation container & layout stability (CLS = 0) */
.tagline-type-container {
  display: inline;
  position: relative;
}

.tagline-grapheme {
  display: inline;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.06s ease;
}

.tagline-grapheme.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.tagline-grapheme.is-revealed {
  opacity: 1;
  visibility: visible;
}

/* Grand 3D Amber-Gold Typing Cursor */
.tagline-typing-cursor {
  display: inline-block;
  width: clamp(3px, 0.5vw, 5px);
  height: 0.92em;
  background: linear-gradient(180deg, #F9D07D 0%, #E9A23B 50%, #C27D1A 100%);
  margin-left: 4px;
  margin-right: 2px;
  vertical-align: -0.06em;
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(233, 162, 59, 0.9), 0 0 24px rgba(233, 162, 59, 0.4);
  animation: tagline-cursor-blink 0.75s infinite ease-in-out;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@keyframes tagline-cursor-blink {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.15; transform: scaleY(0.95); }
}

.tagline-typing-cursor.is-finished {
  animation: tagline-cursor-finish 1.8s forwards 1.2s;
}

@keyframes tagline-cursor-finish {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tagline-typing-cursor {
    display: none !important;
  }
  .tagline-grapheme.is-hidden {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Pillars bar animate in as a group */
.hero-pillars-bar {
  opacity: 0;
  transform: translateY(8px);
  animation: pillars-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes pillars-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pillars-bar {
    opacity: 1;
    transform: none;
    animation: none;
  }
}




/* ==========================================================================
   10. INTERACTIVE FORM ELEMENTS
   ========================================================================== */






.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  transform: translateY(-1px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.modal-container {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.modal-backdrop {
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

@media (hover: none) and (pointer: coarse) {
  .btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
}

@keyframes orbit-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-counter-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes golden-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 162, 59, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(233, 162, 59, 0); }
}

.golden-pulse {
  animation: golden-pulse 2s infinite ease-in-out;
}

.has-3d-tilt {
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  will-change: transform;
}

.sphere-panel {
  display: none;
  animation: panel-fade-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sphere-panel.is-active {
  display: block;
}

@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Grand Cinematic Chapter Portal Curtain */
body.chapter-transitioning::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(244, 190, 108, 0.25) 0%, rgba(11, 25, 48, 0.7) 100%);
  backdrop-filter: blur(4px);
  z-index: 9999;
  pointer-events: none;
  animation: chapterCurtainSweep 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes chapterCurtainSweep {
  0% { opacity: 0; transform: scaleY(0.96); }
  35% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.02); }
}