/* Creative Faith shared UX + motion system
   Navigation hardening: Phase 5A.3
   Motion layer: Phase 5A.5 pre-live polish
*/

:root{
  --cf-motion-ease:cubic-bezier(.22,.61,.36,1);
  --cf-motion-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Shared navigation */
.lang{display:none!important}
.mobile-nav-toggle{display:none;border:1px solid #dfe5e7;background:#fff;color:#0b141b;border-radius:999px;padding:9px 13px;font:800 11px/1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer}
.mobile-nav-panel{display:none}
.nav{
  transition:background-color .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.nav.cf-nav-scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 34px rgba(5,18,25,.07);
  border-bottom-color:rgba(11,20,27,.06);
}

@media(max-width:980px){
  .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .mobile-nav-panel{position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.98);border-bottom:1px solid rgba(11,20,27,.10);box-shadow:0 18px 36px rgba(11,20,27,.10);padding:14px max(15px,calc((100vw - min(calc(100vw - 52px),1320px))/2));z-index:45}
  .mobile-nav-panel.open{display:grid}
  .mobile-nav-panel a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid #eef1f2;font-size:14px;font-weight:750}
  .mobile-nav-panel a:last-child{border-bottom:0}
}
@media(max-width:640px){
  .mobile-nav-panel{padding-left:15px;padding-right:15px}
}
@media(min-width:981px){.mobile-nav-panel{display:none!important}}

/* Refined existing section reveals */
html.cf-motion-ready .reveal{
  transition-duration:.78s;
  transition-timing-function:var(--cf-motion-ease-out);
  transition-delay:var(--cf-reveal-delay,0ms);
}

/* Staggered child reveals. These are only hidden after JS has initialized. */
html.cf-motion-ready .cf-reveal-item{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:
    opacity .74s var(--cf-motion-ease-out),
    transform .74s var(--cf-motion-ease-out);
  transition-delay:var(--cf-delay,0ms);
}
html.cf-motion-ready .cf-reveal-item.cf-in{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Scroll depth uses the individual translate property so it can coexist
   with page-specific transform/rotate rules. */
html.cf-motion-ready .cf-parallax{
  translate:0 var(--cf-parallax-y,0px);
  will-change:translate;
}

/* A restrained camera-settle effect for feature/editorial imagery. */
html.cf-motion-ready .cf-media{
  scale:1.04;
  transition:scale 1.25s var(--cf-motion-ease-out);
  will-change:scale;
}
html.cf-motion-ready .cf-media.cf-media-in{
  scale:1.012;
}

/* Small card lift: enough feedback to feel interactive without turning
   the site into a motion demo. */
@media(hover:hover) and (pointer:fine){
  html.cf-motion-ready .cf-interactive{
    transition:
      translate .28s var(--cf-motion-ease-out),
      box-shadow .28s ease,
      border-color .28s ease;
  }
  html.cf-motion-ready .cf-interactive:hover{
    translate:0 -3px;
  }
}

/* Mobile keeps reveal motion but removes scroll-linked movement. */
@media(max-width:900px){
  html.cf-motion-ready .cf-parallax{translate:none!important;will-change:auto}
  html.cf-motion-ready .cf-media{scale:1!important;will-change:auto}
}

/* Accessibility + low-data mode. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .reveal,
  .cf-reveal-item{opacity:1!important;transform:none!important;transition:none!important}
  .cf-parallax{translate:none!important;will-change:auto!important}
  .cf-media{scale:1!important;transition:none!important;will-change:auto!important}
}
html.cf-motion-reduced .reveal,
html.cf-motion-reduced .cf-reveal-item{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
html.cf-motion-reduced .cf-parallax{
  translate:none!important;
  will-change:auto!important;
}
html.cf-motion-reduced .cf-media{
  scale:1!important;
  transition:none!important;
  will-change:auto!important;
}