/* ===========================================================================
   Par La Foi — motion.

   Every hidden rule below is guarded TWICE:
     1. by `html.pf-motion`, which only an inline boot script can add, so no JS
        means no hidden state at all;
     2. by @media (prefers-reduced-motion: no-preference), so flipping the OS
        setting mid-session instantly reveals everything.

   Only `opacity` and `transform` are animated. Nothing repeats. No will-change:
   promoting 11 layers for the life of an 8500px page costs memory forever to
   save a few milliseconds once.
   =========================================================================== */

:root{
  /* easeOutCubic. Leaves fast, settles asymptotically, no overshoot.
     CSS `ease` has a slight ease-IN at the head that reads as lag on a 560ms
     entrance; anything with overshoot reads as playful. This is a church. */
  --pf-ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  /* easeInOutSine, used only where nothing moves and direction is meaningless. */
  --pf-ease-soft: cubic-bezier(0.33, 0, 0.67, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Hidden state ----------------------------------------------------- */
  html.pf-motion [data-reveal]                 { opacity:0; }
  html.pf-motion [data-reveal="rise"]          { transform:translateY(14px); }
  html.pf-motion [data-reveal="stagger"]  > *  { opacity:0; transform:translateY(10px); }
  html.pf-motion [data-reveal="portrait"] > *  { opacity:0; transform:scale(.96); }

  /* The grid CONTAINERS stay visible and only their children hide, so a
     container taller than the viewport can still satisfy the threshold. */
  html.pf-motion [data-reveal="stagger"],
  html.pf-motion [data-reveal="portrait"]      { opacity:1; }

  /* --- P1 rise ---------------------------------------------------------- */
  html.pf-motion [data-reveal].pf-in{
    opacity:1; transform:none;
    transition:opacity .56s var(--pf-ease-out), transform .56s var(--pf-ease-out);
  }
  /* Heading follows its eyebrow, as a lockup. */
  html.pf-motion [data-reveal="rise"][data-reveal-step="1"].pf-in{ transition-delay:60ms; }

  /* --- P2 stagger (ministry cards) -------------------------------------- */
  html.pf-motion [data-reveal="stagger"].pf-in > *{
    opacity:1; transform:none;
    transition:opacity .46s var(--pf-ease-out), transform .46s var(--pf-ease-out);
  }
  html.pf-motion [data-reveal="stagger"].pf-in > *:nth-child(2){ transition-delay: 70ms; }
  html.pf-motion [data-reveal="stagger"].pf-in > *:nth-child(3){ transition-delay:140ms; }
  html.pf-motion [data-reveal="stagger"].pf-in > *:nth-child(4){ transition-delay:210ms; }
  html.pf-motion [data-reveal="stagger"].pf-in > *:nth-child(5){ transition-delay:280ms; }
  /* Cap at 5 steps: if a 7th ministry is added it must not wait 420ms. */
  html.pf-motion [data-reveal="stagger"].pf-in > *:nth-child(n+6){ transition-delay:350ms; }

  /* --- P3 portrait ------------------------------------------------------ */
  /* Scale, not translate: a gold-ringed circle sliding down reads as dropping.
     Never below .94 - the resample becomes visible on a raster portrait. */
  html.pf-motion [data-reveal="portrait"].pf-in > *{
    opacity:1; transform:none;
    transition:opacity .62s var(--pf-ease-out), transform .62s var(--pf-ease-out);
  }
  html.pf-motion [data-reveal="portrait"].pf-in > *:nth-child(2){ transition-delay: 90ms; }
  html.pf-motion [data-reveal="portrait"].pf-in > *:nth-child(3){ transition-delay:180ms; }
  html.pf-motion [data-reveal="portrait"].pf-in > *:nth-child(n+4){ transition-delay:270ms; }

  /* --- P4 verse --------------------------------------------------------- */
  /* Slow on purpose: a pure fade with no movement, on a band the reader stops at. */
  html.pf-motion [data-reveal="verse"].pf-in{
    opacity:1;
    transition:opacity .9s var(--pf-ease-soft);
  }

  /* --- P5 hero, on load ------------------------------------------------- */
  /* :not(h1) is load-bearing. The H1 is an LCP candidate and opacity:0 would
     disqualify it, pushing LCP to fonts.ready + 620ms. It is also the site's
     proposition - it should never wait on JavaScript. */
  html.pf-motion .pf-hero__inner > :not(h1){
    opacity:0; transform:translateY(10px);
  }
  html.pf-hero-in .pf-hero__inner > :not(h1){
    opacity:1; transform:none;
    transition:opacity .62s var(--pf-ease-out), transform .62s var(--pf-ease-out);
  }
  /* Slower cadence than the card grid: the hero is a reading sequence, a grid
     is a set. Children: 1 eyebrow, 2 H1, 3 lede, 4 buttons, 5 chips. */
  html.pf-hero-in .pf-hero__inner > :nth-child(3){ transition-delay:120ms; }
  html.pf-hero-in .pf-hero__inner > :nth-child(4){ transition-delay:220ms; }
  html.pf-hero-in .pf-hero__inner > :nth-child(5){ transition-delay:320ms; }
}

/* ===========================================================================
   Sticky header
   =========================================================================== */

/* Contributes exactly nothing to layout. With no positioned ancestor it
   resolves against the initial containing block - the top of the document. */
#pf-top-sentinel{
  position:absolute; top:0; left:0;
  width:1px; height:1px;
  pointer-events:none;
}

/* The condense is INSTANT - height and padding are layout properties and must
   never be transitioned. Only the hairline and shadow fade. */
.pf-header::after{
  content:"";
  position:absolute; inset:auto 0 -1px 0; height:1px;
  background:rgba(212,160,23,.55);
  box-shadow:0 8px 24px rgba(10,14,22,.38);
  opacity:0;
  transition:opacity .28s var(--pf-ease-out);
  pointer-events:none;
}
html.pf-scrolled .pf-header::after{ opacity:1; }

html.pf-scrolled .pf-header{
  padding-top:var(--wp--preset--spacing--10);
  padding-bottom:var(--wp--preset--spacing--10);
}
html.pf-scrolled .pf-lockup__sub{ display:none; }

@media (prefers-reduced-motion: reduce){
  /* The elevation still APPEARS - it is a wayfinding signal, not decoration.
     Reduced motion means less movement, not less information. */
  .pf-header::after{ transition:none; }
}