/* ===========================================================
   iTumbuh site-wide motion layer (homepage + every public page).
   Motion only: no colours, sizes or layout change. Animates transform /
   opacity / clip-path, entrance animations use fill-mode `backwards` so
   nothing is left transformed afterwards, and prefers-reduced-motion
   switches it off. Homepage-only effects live in home-motion.css.
   =========================================================== */

@keyframes smUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* ---------- Navbar: reading-progress bar + shadow once scrolled ---------- */
.navbar{transition:box-shadow .3s ease, border-color .3s ease;}
.navbar.is-scrolled{box-shadow:0 8px 24px rgba(17,24,39,.08);border-bottom-color:transparent;}
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#3B82F6,#10B981 55%,#F59E0B);
  transform:scaleX(0);transform-origin:left center;
  border-radius:0 3px 3px 0;
}

/* ---------- Menu underline: slides in from the left, leaves to the right ---------- */
.nav-links > a::after,.nav-drop-btn::after{
  height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transform-origin:right center;transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.nav-links > a:hover::after,.nav-links > a:focus-visible::after,.nav-links > a.active::after,
.nav-item:hover .nav-drop-btn::after,.nav-item:focus-within .nav-drop-btn::after,.nav-drop-btn.active::after{transform-origin:left center;}

/* Dropdowns glide down and their links cascade in. */
.dropdown-menu{transform:translateX(-50%) translateY(10px);transition:opacity .18s ease, transform .25s cubic-bezier(.22,.61,.36,1);}
.nav-item:hover .dropdown-menu,.nav-item:focus-within .dropdown-menu{transform:translateX(-50%) translateY(0);}
@keyframes smDd{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
.nav-item:hover .dropdown-menu a,.nav-item:focus-within .dropdown-menu a{animation:smDd .3s cubic-bezier(.22,.61,.36,1) backwards;}
.dropdown-menu a:nth-child(2){animation-delay:.03s !important;}
.dropdown-menu a:nth-child(3){animation-delay:.06s !important;}
.dropdown-menu a:nth-child(4){animation-delay:.09s !important;}
.dropdown-menu a:nth-child(5){animation-delay:.12s !important;}
.dropdown-menu a:nth-child(6){animation-delay:.15s !important;}

/* ---------- Page banner (About, Features, Resources, FAQ, Contact...) ---------- */
.page-hero-inner > *{animation:smUp .8s cubic-bezier(.22,.61,.36,1) backwards;}
.page-hero-inner > :nth-child(1){animation-delay:.05s;}
.page-hero-inner > :nth-child(2){animation-delay:.15s;}
.page-hero-inner > :nth-child(3){animation-delay:.25s;}
.page-hero-inner > :nth-child(4){animation-delay:.35s;}
.page-hero-inner > :nth-child(5){animation-delay:.45s;}
@keyframes smNudge{0%,86%,100%{transform:none;}89%{transform:rotate(-12deg);}92%{transform:rotate(10deg);}95%{transform:rotate(-6deg);}}
.page-hero-stat svg{transform-origin:50% 60%;animation:smNudge 5s 2.5s ease-in-out infinite;}

/* ---------- Buttons: shine sweep (magnetic pull is in site-motion.js) ---------- */
.hero-cta .btn,.cta-btns .btn,.sc-cta{position:relative;overflow:hidden;}
.hero-cta .btn::after,.cta-btns .btn::after,.sc-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-160%) skewX(-18deg);
}
.hero-cta .btn:hover::after,.cta-btns .btn:hover::after,.sc-cta:hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .75s ease;}

/* ---------- Cards lift on hover ----------
   `translate` rather than `transform`, so the lift stays snappy instead of
   inheriting the slower transition the scroll-reveal puts on transform. */
.feature-card,.info-card,.team-card,.video-card,.article-card,.ind-card,.contact-card,.hub-card{
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), translate .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.feature-card:hover,.info-card:hover,.team-card:hover,.video-card:hover,.article-card:hover,.ind-card:hover,.hub-card:hover{transform:none;translate:0 -6px;box-shadow:0 16px 34px rgba(17,24,39,.1);}
.feature-card.reveal:not(.is-visible):hover,.info-card.reveal:not(.is-visible):hover,.team-card.reveal:not(.is-visible):hover,
.video-card.reveal:not(.is-visible):hover,.article-card.reveal:not(.is-visible):hover,.ind-card.reveal:not(.is-visible):hover,.hub-card.reveal:not(.is-visible):hover{transform:translateY(16px);}
.chip{transition:all .2s ease, translate .2s ease;}
.chip:hover{translate:0 -2px;}

/* Icons answer the hover with a small wiggle (uses `rotate`, so any
   existing hover scale on the same icon still applies). */
@keyframes smWiggle{0%,100%{rotate:0deg;}30%{rotate:-11deg;}60%{rotate:7deg;}}
.feature-card:hover .icon-circle,.info-card:hover .icon-circle,.group:hover .icon-circle,
.contact-row:hover .contact-ic,.team-card:hover .team-avatar,.hub-card:hover .hub-ic{animation:smWiggle .6s ease;}
@keyframes smHop{0%,100%{translate:0 0;}40%{translate:0 -4px;}70%{translate:0 1px;}}
.qa-item:hover svg{animation:smHop .5s ease;}
.faq-icon{transition:all .2s, scale .2s ease;}
.faq-q:hover .faq-icon{scale:1.12;}

/* ---------- Photos: wipe open on scroll, zoom gently on hover ---------- */
.split.reveal .media{clip-path:inset(8% 8% 8% 8% round 28px);transition:clip-path 1.1s .1s cubic-bezier(.22,.61,.36,1);}
.split.reveal.is-visible .media{clip-path:inset(0 round var(--radius-lg));}
.split .media-photo,.article-card .media-photo{transition:scale .7s cubic-bezier(.22,.61,.36,1);}
.split .media:hover .media-photo,.article-card:hover .media-photo{scale:1.06;}

/* ---------- CTA: the soft circles drift ---------- */
@keyframes smDrift{from{translate:0 0;}to{translate:18px -16px;}}
.cta .decor.c1{animation:smDrift 7s ease-in-out infinite alternate;}
.cta .decor.c2{animation:smDrift 9s -3s ease-in-out infinite alternate-reverse;}

@media (prefers-reduced-motion: reduce){
  .page-hero-inner > *,.page-hero-stat svg,.cta .decor,.qa-item:hover svg,
  .feature-card:hover .icon-circle,.info-card:hover .icon-circle,.group:hover .icon-circle,
  .contact-row:hover .contact-ic,.team-card:hover .team-avatar,.hub-card:hover .hub-ic{animation:none;}
  .split.reveal .media{clip-path:none;transition:none;}
  .split .media-photo,.article-card .media-photo{transition:none;scale:1;}
  .dropdown-menu{transition:opacity .12s ease;transform:translateX(-50%);}
  .nav-item:hover .dropdown-menu,.nav-item:focus-within .dropdown-menu{transform:translateX(-50%);}
  .nav-item:hover .dropdown-menu a,.nav-item:focus-within .dropdown-menu a{animation:none;}
}

/* ---------- Narrowest phones (<= 360px) ----------
   Once the light/dark switch joined the bar, logo + switch + BM|EN + menu
   button were ~19px wider than a 320px screen and the page scrolled
   sideways. Tighten spacing a notch so the row fits. */
@media (max-width:360px){
  .navbar .wrap{padding-left:14px;padding-right:14px;}
  .navbar .nav-right{gap:6px;}
  .navbar .brand{font-size:17px;gap:6px;}
  .navbar .brand-mark{width:32px;height:32px;}
  .navbar .lang-switch button{padding:7px 8px;}
  .navbar .theme-toggle{width:32px;height:32px;}
  .navbar .nav-toggle{width:40px;height:40px;}
}