/* ============================================================
   MMUST CU Phase 42.3 — Scroll Motion + Mobile Story Rail
   ============================================================ */
:root{
  --p423-blue:#0099FF;
  --p423-orange:#FF9900;
  --p423-white:#FFFFFF;
  --p423-charcoal:#1f2937;
  --p423-soft:#f5f7fa;
}

/* Stronger, polished scroll reveal. Classes are added by JS only, so
   content stays fully visible when JavaScript is unavailable. */
html.motion-capable .phase423-reveal{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.985);
  filter:blur(3px);
  transition:
    opacity .68s cubic-bezier(.22,1,.36,1),
    transform .76s cubic-bezier(.22,1,.36,1),
    filter .62s ease;
  transition-delay:calc(var(--p423-order,0) * 52ms);
  will-change:opacity,transform,filter;
}
html.motion-capable .phase423-reveal.phase423-from-left{transform:translate3d(-28px,0,0) scale(.988)}
html.motion-capable .phase423-reveal.phase423-from-right{transform:translate3d(28px,0,0) scale(.988)}
html.motion-capable .phase423-reveal.phase423-scale{transform:translate3d(0,14px,0) scale(.955)}
html.motion-capable .phase423-reveal.is-phase423-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none;
}

/* Give media/card reveals a premium, non-flashy finish. */
html.motion-capable .phase423-reveal.phase423-media{overflow:hidden}
html.motion-capable .phase423-reveal.phase423-media img{
  transform:scale(1.025);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
html.motion-capable .phase423-reveal.phase423-media.is-phase423-visible img{transform:scale(1)}

/* Tiny depth response after an item has revealed. */
@media (hover:hover) and (pointer:fine){
  html.motion-capable .phase423-reveal.is-phase423-visible.phase423-lift{
    transition-property:opacity,transform,filter,box-shadow;
  }
  html.motion-capable .phase423-reveal.is-phase423-visible.phase423-lift:hover{
    transform:translateY(-4px) scale(1.006);
  }
}

/* ============================================================
   Worship • Fellowship • Mission — mobile single-row story rail
   ============================================================ */
.home-three-stories .visual-story-grid{position:relative}
.phase423-story-cue{display:none}

@media(max-width:760px){
  .home-three-stories{overflow:hidden}
  .home-three-stories .visual-section-head{margin-bottom:14px}
  .home-three-stories .visual-story-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px max(18px,calc((100vw - min(92vw,430px))/2)) 18px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    width:100vw;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:max(18px,calc((100vw - min(92vw,430px))/2));
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .home-three-stories .visual-story-grid::-webkit-scrollbar{display:none}
  .home-three-stories .visual-story-card,
  .home-three-stories .visual-story-card:last-child{
    flex:0 0 min(84vw,390px);
    width:min(84vw,390px);
    min-height:390px;
    grid-column:auto!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    border-radius:20px;
    box-shadow:0 18px 42px rgba(31,41,55,.14);
  }
  .home-three-stories .visual-story-card>div{padding:20px}
  .home-three-stories .visual-story-card h3{font-size:22px}

  /* Soft edge glow tells the user that the row continues horizontally. */
  .home-three-stories .visual-story-grid::before,
  .home-three-stories .visual-story-grid::after{
    content:"";
    position:sticky;
    z-index:5;
    top:0;
    bottom:18px;
    flex:0 0 1px;
    width:1px;
    pointer-events:none;
  }
  .home-three-stories .visual-story-grid::before{left:0;box-shadow:18px 0 32px 18px rgba(0,153,255,.08)}
  .home-three-stories .visual-story-grid::after{right:0;box-shadow:-18px 0 32px 18px rgba(255,153,0,.09)}

  .phase423-story-cue{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:max-content;
    max-width:calc(100% - 36px);
    margin:4px auto 0;
    padding:7px 12px;
    border:1px solid rgba(0,153,255,.2);
    border-radius:999px;
    background:#fff;
    color:var(--p423-charcoal);
    box-shadow:0 7px 22px rgba(31,41,55,.07);
    font-size:12px;
    font-weight:800;
    line-height:1;
  }
  .phase423-story-cue svg{width:16px;height:16px;color:var(--p423-blue);flex:0 0 auto}
  .phase423-story-cue strong{color:var(--p423-orange)}

  .home-three-stories.is-phase423-cue-first .visual-story-card:first-child,
  .home-three-stories.is-phase423-cue-last .visual-story-card:last-child{
    animation:phase423StoryPulse .72s cubic-bezier(.22,1,.36,1);
  }
  @keyframes phase423StoryPulse{
    0%{transform:scale(.985)}
    50%{transform:scale(1.012)}
    100%{transform:scale(1)}
  }
}

/* Mobile spacing so reveal transforms never produce sideways overflow. */
@media(max-width:640px){
  html.motion-capable .phase423-reveal{transform:translate3d(0,20px,0) scale(.99)}
  html.motion-capable .phase423-reveal.phase423-from-left,
  html.motion-capable .phase423-reveal.phase423-from-right{transform:translate3d(0,20px,0) scale(.99)}
  html.motion-capable .phase423-reveal.is-phase423-visible{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html.motion-capable .phase423-reveal,
  html.motion-capable .phase423-reveal img{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }
  .home-three-stories .visual-story-grid{scroll-behavior:auto!important}
}