/**
 * PRAHAR COMMUNITY — MASTER MOTION ENGINE STYLESHEET
 * Engineering Aesthetic: Precise, Fast, Calm, Anti-Fragile
 * Follows W3C View Transitions & Progressive Enhancement Architecture
 */

/* ==========================================================================
   1. MOTION DESIGN SYSTEM TOKENS
   ========================================================================== */
:root {
  --motion-duration-fast: 150ms;
  --motion-duration-base: 300ms;
  --motion-duration-slow: 600ms;
  --motion-duration-epic: 900ms;

  /* Engineering Curves */
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* Crisp Expo Out */
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* Mechanical Reciprocal */
  --motion-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* Crisp Damped Settle */

  --motion-stagger-step: 75ms;
  --motion-reveal-distance: 24px;
  --motion-glow-color: rgba(0, 229, 153, 0.18);
}

/* ==========================================================================
   2. VIEW TRANSITIONS API (CROSS-DOCUMENT PAGE NAVIGATION)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: var(--motion-duration-fast) var(--motion-ease-out) both motion-vt-fade-out;
}

::view-transition-new(root) {
  animation: var(--motion-duration-base) var(--motion-ease-out) both motion-vt-fade-in;
}

@keyframes motion-vt-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.995); }
}

@keyframes motion-vt-fade-in {
  from { opacity: 0; transform: scale(1.005); }
  to { opacity: 1; transform: scale(1); }
}

/* Persistent elements during View Transitions */
#siteHeader {
  view-transition-name: site-header;
}
#topBanner {
  view-transition-name: top-banner;
}
footer.site-footer {
  view-transition-name: site-footer;
}

/* Fallback Page Transition Layer (for browsers without native View Transitions) */
.motion-page-transition-active {
  opacity: 0 !important;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out) !important;
}

/* ==========================================================================
   3. PROGRESSIVE ENHANCEMENT: SCROLL REVEALS
   ========================================================================== */
/* When JS is disabled or not yet parsed, content is 100% visible by default.
   Hidden states ONLY apply when html has .js-motion */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: transform, opacity;
  transition:
    opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* CRITICAL PERFORMANCE & LCP RULE:
   Above-the-fold Hero content must NEVER start at opacity: 0.
   Guarantees sub-second Largest Contentful Paint (LCP) and zero paint delay on mobile. */
.hero-section,
.hero-section [data-reveal],
.hero-section .hero-title,
.hero-section .hero-editorial-collage,
.hero-section .hero-collage-main,
.hero-section .hero-two-col > div {
  opacity: 1 !important;
  transform: none !important;
}

html.js-motion [data-reveal="fade-up"] {
  transform: translate3d(0, 16px, 0);
}

html.js-motion [data-reveal="fade-down"] {
  transform: translate3d(0, -16px, 0);
}

html.js-motion [data-reveal="fade-left"] {
  transform: translate3d(-18px, 0, 0);
}

html.js-motion [data-reveal="fade-right"] {
  transform: translate3d(18px, 0, 0);
}

html.js-motion [data-reveal="scale-up"] {
  transform: translate3d(0, 12px, 0) scale(0.97);
}

/* Revealed State */
html.js-motion [data-reveal].is-revealed,
html.js-motion .is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
  will-change: auto !important;
}

/* Stagger Children Automation */
html.js-motion [data-stagger] > *:nth-child(1) { transition-delay: calc(var(--motion-stagger-step) * 1); }
html.js-motion [data-stagger] > *:nth-child(2) { transition-delay: calc(var(--motion-stagger-step) * 2); }
html.js-motion [data-stagger] > *:nth-child(3) { transition-delay: calc(var(--motion-stagger-step) * 3); }
html.js-motion [data-stagger] > *:nth-child(4) { transition-delay: calc(var(--motion-stagger-step) * 4); }
html.js-motion [data-stagger] > *:nth-child(5) { transition-delay: calc(var(--motion-stagger-step) * 5); }
html.js-motion [data-stagger] > *:nth-child(6) { transition-delay: calc(var(--motion-stagger-step) * 6); }
html.js-motion [data-stagger] > *:nth-child(7) { transition-delay: calc(var(--motion-stagger-step) * 7); }
html.js-motion [data-stagger] > *:nth-child(8) { transition-delay: calc(var(--motion-stagger-step) * 8); }

/* ==========================================================================
   4. SCROLL PROGRESS BAR (TOP VIEWPORT ACCENT)
   ========================================================================== */
#motionProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #00e599), #00ffaa);
  z-index: 10000;
  pointer-events: none;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(0, 229, 153, 0.4);
}

/* Modern CSS Scroll-Timeline (Zero JS overhead where supported) */
@supports (animation-timeline: scroll()) {
  #motionProgressBar {
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    animation: motionScrollProgress linear;
    animation-timeline: scroll();
    transition: none;
  }
  @keyframes motionScrollProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ==========================================================================
   5. ANNOUNCEMENT BANNER MOTION
   ========================================================================== */
#topBanner {
  animation: motionBannerSlideDown var(--motion-duration-slow) var(--motion-ease-out) both;
}

@keyframes motionBannerSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#topBanner a#bannerLink {
  position: relative;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

#topBanner a#bannerLink::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.7);
  transform-origin: left center;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

#topBanner a#bannerLink:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   6. HEADER & NAVIGATION PHYSICS
   ========================================================================== */
.site-header {
  transition:
    padding var(--motion-duration-base) var(--motion-ease-out),
    background-color var(--motion-duration-base) var(--motion-ease-out),
    backdrop-filter var(--motion-duration-base) var(--motion-ease-out),
    box-shadow var(--motion-duration-base) var(--motion-ease-out);
}

.site-header.scrolled {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Nav links underline glide */
.nav-links {
  position: relative;
}

.nav-link {
  position: relative;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent, #00e599);
  transform: translateX(-50%);
  transition: width var(--motion-duration-base) var(--motion-ease-out);
  border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
}

/* Mobile Menu Stagger Cascade */
.mobile-drawer {
  transition:
    transform var(--motion-duration-slow) var(--motion-ease-out),
    opacity var(--motion-duration-base) var(--motion-ease-out);
}

.mobile-drawer.open .mobile-nav-link {
  animation: motionMobileLinkSlide var(--motion-duration-base) var(--motion-ease-out) both;
}

.mobile-drawer.open .mobile-nav-link:nth-child(1) { animation-delay: 50ms; }
.mobile-drawer.open .mobile-nav-link:nth-child(2) { animation-delay: 80ms; }
.mobile-drawer.open .mobile-nav-link:nth-child(3) { animation-delay: 110ms; }
.mobile-drawer.open .mobile-nav-link:nth-child(4) { animation-delay: 140ms; }
.mobile-drawer.open .mobile-nav-link:nth-child(5) { animation-delay: 170ms; }
.mobile-drawer.open .mobile-nav-link:nth-child(6) { animation-delay: 20ms; }
.mobile-drawer.open .mobile-nav-link:nth-child(7) { animation-delay: 230ms; }

@keyframes motionMobileLinkSlide {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Theme Toggle Button Micro-spin */
#themeToggleBtn {
  transition: transform var(--motion-duration-base) var(--motion-ease-spring);
}

#themeToggleBtn:active {
  transform: scale(0.9) rotate(180deg);
}

/* ==========================================================================
   7. HERO & TERMINAL MICRO-INTERACTIONS
   ========================================================================== */
/* Technical crosshairs fade-in */
.tech-crosshair {
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out);
}

/* Technical status dot pulse */
.tech-status-dot {
  position: relative;
}

.tech-status-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--accent, #00e599);
  animation: motionStatusPulse 2.5s infinite ease-out;
}

@keyframes motionStatusPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Avatar stack entrance */
.avatar-stack img {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out), z-index 0s;
}

.avatar-stack img:hover {
  transform: translateY(-3px) scale(1.15);
  z-index: 10;
}

/* Desktop Ambient Cursor Glow */
@media (min-width: 1024px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--motion-glow-color) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
    transform: translate(calc(var(--cursor-x, -1000px) - 300px), calc(var(--cursor-y, -1000px) - 300px));
    transition: opacity var(--motion-duration-base) ease;
    will-change: transform;
  }
}

/* ==========================================================================
   8. CARD ELEVATION & SPECULAR DEPTH
   ========================================================================== */
.glass-card,
.event-card,
.member-card,
.stat-card,
.mission-principle-card,
.value-card,
.step-card {
  transition:
    transform var(--motion-duration-base) var(--motion-ease-out),
    border-color var(--motion-duration-base) var(--motion-ease-out),
    box-shadow var(--motion-duration-base) var(--motion-ease-out);
  will-change: transform;
}

.glass-card:hover,
.mission-principle-card:hover,
.value-card:hover,
.step-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 153, 0.4) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 16px rgba(0, 229, 153, 0.06);
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

.event-card-img {
  transition: transform var(--motion-duration-slow) var(--motion-ease-out);
}

.event-card:hover .event-card-img {
  transform: scale(1.035);
}

/* Gallery image zoom settle */
.gallery-card {
  overflow: hidden;
}

.gallery-card img {
  transition: transform var(--motion-duration-slow) var(--motion-ease-out);
}

.gallery-card:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   9. TIMELINE CONNECTOR LINE ANIMATION
   ========================================================================== */
.timeline-track-line {
  position: relative;
}

.timeline-track-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: var(--accent, #00e599);
  transition: height var(--motion-duration-epic) var(--motion-ease-out);
}

.timeline-track-line.is-revealed::before {
  height: 100%;
}

/* ==========================================================================
   10. FAQ ACCORDION SMOOTH HEIGHT & ICON ROTATION
   ========================================================================== */
.faq-item {
  transition: border-color var(--motion-duration-base) var(--motion-ease-out);
}

.faq-question-btn {
  cursor: pointer;
  width: 100%;
}

.faq-icon-indicator,
.faq-question-btn svg,
.faq-toggle-icon {
  display: inline-block;
  transition: transform var(--motion-duration-base) var(--motion-ease-out);
}

.faq-item.active .faq-icon-indicator,
.faq-item.active .faq-toggle-icon,
.faq-item.active .faq-question-btn svg {
  transform: rotate(45deg);
}

/* Smooth height without markup changes */
.faq-item .faq-answer-body {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height var(--motion-duration-base) var(--motion-ease-out),
    opacity var(--motion-duration-base) var(--motion-ease-out),
    transform var(--motion-duration-base) var(--motion-ease-out),
    padding var(--motion-duration-base) var(--motion-ease-out);
}

.faq-item.active .faq-answer-body {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  padding: 0 1.5rem 1.25rem !important;
}

/* FAQ Category Filter Button Transition */
.faq-category-btn,
.event-filter-btn {
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out),
    transform var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}

.faq-category-btn:active,
.event-filter-btn:active {
  transform: scale(0.96);
}

/* ==========================================================================
   11. BUTTONS, LINKS & PRESS FEEDBACK
   ========================================================================== */
.btn-primary,
.btn-secondary,
button[type="submit"] {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out),
    filter var(--motion-duration-fast) var(--motion-ease-out);
}

.btn-primary:active,
.btn-secondary:active,
button[type="submit"]:active {
  transform: scale(0.97) !important;
}

/* Arrow nudge on CTA buttons */
.btn-primary:hover span:last-child,
a[href*=".html"]:hover span[style*="arrow"],
a.nav-cta:hover span:last-child {
  transform: translateX(4px);
  display: inline-block;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

/* Form input focus glow */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent, #00e599) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 153, 0.15) !important;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}

/* ==========================================================================
   12. FOOTER WORDMARK REVEAL
   ========================================================================== */
.footer-watermark,
.site-footer span[aria-hidden="true"] {
  display: inline-block;
  transition:
    opacity var(--motion-duration-epic) var(--motion-ease-out),
    transform var(--motion-duration-epic) var(--motion-ease-out),
    letter-spacing var(--motion-duration-epic) var(--motion-ease-out);
}

html.js-motion .footer-watermark,
html.js-motion .site-footer span[aria-hidden="true"] {
  opacity: 0.02;
  letter-spacing: -0.05em;
  transform: translateY(15px);
}

html.js-motion .footer-watermark.is-revealed,
html.js-motion .site-footer span[aria-hidden="true"].is-revealed {
  opacity: 0.06 !important;
  letter-spacing: normal !important;
  transform: translateY(0) !important;
}

/* ==========================================================================
   13. COMMUNITY TRUST STRIP INFINITE MARQUEE SCROLLER
   ========================================================================== */
.activity-trust-strip .marquee-container {
  width: 100%;
  overflow: hidden;
  user-select: none;
  display: flex;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.activity-trust-strip .marquee-track {
  display: flex !important;
  flex-direction: row !important;
  width: max-content !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: center;
  animation: marqueeScroll 26s linear infinite !important;
  animation-iteration-count: infinite !important;
  gap: 2.75rem;
  padding: 0.35rem 0;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .activity-trust-strip .marquee-container:hover .marquee-track {
    animation-play-state: paused !important;
  }
}

@keyframes marqueeScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ==========================================================================
   14. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body::before {
    display: none !important;
  }

  html.js-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  #topBanner {
    animation: none !important;
  }

  /* Marquee continuous flow preserved */
  .activity-trust-strip .marquee-track,
  .marquee-track,
  .ecosystem-track {
    animation: marqueeScroll 40s linear infinite !important;
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}