/* Core Animation System & Premium Styling for ECOMEM GROUP */

/* Scroll-Reveal Engine Classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.reveal-slide-down {
  transform: translateY(-30px);
}

.reveal.reveal-slide-left {
  transform: translateX(-30px);
}

.reveal.reveal-slide-right {
  transform: translateX(30px);
}

.reveal.reveal-scale {
  transform: scale(0.95);
}

.reveal.reveal-fade {
  transform: none;
}

.reveal.active {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* Stagger Delay Utilities */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }
.reveal-delay-600 { transition-delay: 600ms; }
.reveal-delay-700 { transition-delay: 700ms; }
.reveal-delay-800 { transition-delay: 800ms; }

/* Micro-animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 8s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); }
}
.animate-pulse-glow {
  animation: pulse-glow 3s infinite;
}

/* Hover-Lift and Card Glow Effects */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.08), 0 10px 15px -5px rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.3);
}

.hover-lift-sm {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift-sm:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05);
}

/* Glassmorphism Accents */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-panel-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Zoom Hover Effect */
.zoom-container {
  overflow: hidden;
}
.zoom-container img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-container:hover img {
  transform: scale(1.06);
}

/* SVG Logo path animation */
.logo-sun-ray {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: 110px 100px;
}
svg:hover .logo-sun-ray {
  transform: scale(1.08) rotate(5deg);
}
.logo-water-drop {
  transition: transform 0.4s ease;
  transform-origin: 140px 75px;
}
svg:hover .logo-water-drop {
  transform: translateY(-2px) scale(1.02);
}

/* Looping Hero Photo Zoom (Ken Burns effect) */
@keyframes zoom-loop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.animate-zoom-loop {
  animation: zoom-loop 16s ease-in-out infinite;
}

/* Infinite Logo Marquee Left-to-Right (LTR) */
@keyframes marquee-ltr {
  0% {
    transform: translateX(-33.3333%);
  }
  100% {
    transform: translateX(0%);
  }
}
.animate-marquee-ltr {
  display: flex;
  width: max-content;
  animation: marquee-ltr 25s linear infinite;
}
/* Mask gradient for smooth edge fade */
.mask-gradient-x {
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* ============================================================
   ORG CHART — Company Structure Section
   Used on index.html and about.html team sections
   ============================================================ */
.org-chart { display:flex; flex-direction:column; align-items:center; width:100%; max-width:100%; overflow-x:auto; }

/* Level wrappers */
.org-level-top  { display:flex; justify-content:center; width:100%; margin-bottom:0; }
.org-level-row  { display:flex; flex-wrap:nowrap; justify-content:center; gap:0.85rem; padding:0 0.5rem; width:100%; max-width:100%; overflow-x:auto; }

/* Vertical connector (CEO → horizontal bar) */
.org-connector-v {
  width:2px; height:2rem;
  background: linear-gradient(to bottom, #10b981, #d1fae5);
  margin:0 auto;
  flex-shrink:0;
}
/* Horizontal bar — spans across all 6 member cards */
.org-connector-h-wrap {
  width:100%; max-width:1100px; display:flex; justify-content:center; padding:0 85px; flex-shrink:0;
}
.org-connector-h {
  width:100%; height:2px;
  background: linear-gradient(to right, transparent, #10b981 10%, #10b981 90%, transparent);
}

/* Branch — tick line above each member card */
.org-branch { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.org-branch-tick {
  width:2px; height:1.5rem;
  background: linear-gradient(to bottom, #10b981, #d1fae5);
  margin:0 auto;
  flex-shrink:0;
}

/* Cards — FIT 6 CARDS ON 1 ROW PERFECTLY */
.org-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:1.25rem;
  overflow:hidden;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:245px;
}
.org-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(16,185,129,.15); }

/* CEO card & Level 2 Member cards */
.org-card-ceo  { width:210px !important; position:relative; border-color:#10b981; border-width:2px; }
.org-card-member { width:175px !important; }

/* CEO Founder badge */
.org-ceo-badge {
  position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#059669,#10b981);
  color:#fff; font-size:.58rem; font-weight:800; letter-spacing:.08em;
  padding:.15rem .65rem; border-radius:999px; white-space:nowrap;
  box-shadow:0 2px 8px rgba(16,185,129,.35); z-index:2;
}

/* Photo containers */
.org-photo {
  overflow:hidden;
  background:#f1f5f9;
  margin:0 auto;
  flex-shrink:0;
  border-radius:50%;
  display:block;
}
.org-photo-ceo {
  width:95px !important;
  height:95px !important;
  margin-top:2rem;
  border:3px solid #10b981;
}
.org-photo-member {
  width:85px !important;
  height:85px !important;
  margin-top:1.1rem;
  border:2px solid #e2e8f0;
}
.org-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Info block */
.org-info { padding:.75rem .6rem .85rem; width:100%; text-align:center; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.org-name { font-weight:800; color:#0f172a; font-size:.82rem; line-height:1.25; text-align:center; }
.org-name-ceo { font-size:.9rem; text-align:center; }
.org-role {
  display:block; font-size:.62rem; font-weight:700; color:#059669;
  margin-top:.25rem; text-transform:uppercase; letter-spacing:.05em; text-align:center;
}
.org-role-ceo { color:#059669; font-weight:800; font-size:.65rem; text-align:center; }

/* Social links */
.org-socials {
  display:flex; justify-content:center; gap:.35rem;
  margin-top:.6rem; padding-top:.5rem; border-top:1px solid #f1f5f9; width:100%;
}
.org-social-btn {
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid #e2e8f0; color:#94a3b8;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
  text-decoration:none;
}
.org-social-btn:hover { border-color:#10b981; color:#10b981; background:#ecfdf5; }

/* Responsive — scroll on tablet, stack on mobile */
@media (max-width:768px) {
  .org-level-row { flex-wrap:wrap; justify-content:center; gap:1rem; }
  .org-connector-h-wrap,
  .org-connector-v,
  .org-branch-tick { display:none; }
  .org-card-ceo  { width:190px !important; }
  .org-card-member { width:160px !important; }
}