/* ============================================================================
   THE CHURCH — "The Kept Book" · mobile layer  (progressive enhancement)
   Additive over pilgrimage.css. EVERYTHING here is gated on:
     · body.sp-kb            (a flag the templates add — remove it to disable)
     · @media (max-width:760px)   (phones only — desktop is never touched)
   Degrades to the existing book: no JS / no support → the normal page shows.
   Tokens (--gold, --serif …) come from pilgrimage.css.
   ========================================================================== */

/* ---- keyframes (namespaced kb*) ------------------------------------------ */
@keyframes kbShimmer{0%{background-position:-140% 0}100%{background-position:240% 0}}
@keyframes kbEdge{0%{background-position:0 -140%}100%{background-position:0 240%}}
@keyframes kbBreath{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.015)}}
@keyframes kbLift{to{opacity:0;transform:translateY(-16%) scale(1.04)}}
@keyframes kbFade{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   THE DEEPER DEVELOP — the darkroom bloom, phones only
   The reveal engine (pilgrimage.js) already toggles .is-visible; we only make
   the arrival deeper + slower on mobile. Same specificity as the base rule,
   loaded later → wins, but only inside this media query.
   ========================================================================== */
@media (max-width:760px){
  html.js body.sp-kb .reveal.sp-develop img{
    filter:brightness(.42) saturate(.8) contrast(1.08);
    transform:scale(1.05);
    transition:filter 1.8s cubic-bezier(.16,1,.3,1),
               transform 1.8s cubic-bezier(.16,1,.3,1);
  }
  html.js body.sp-kb .reveal.is-visible.sp-develop img{ filter:none; transform:none; }
}

/* ==========================================================================
   Everything below is phones-only + .sp-kb
   ========================================================================== */
@media (max-width:760px){

  /* ---- folios catch the light -------------------------------------------- */
  body.sp-kb .sp-folio{
    background:linear-gradient(100deg,#8a6d3b,#c4a267,#f3e6c4,#c4a267,#8a6d3b);
    background-size:250% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:kbShimmer 5s linear infinite;
  }

  /* ---- the gilt fore-edge (a thin thread of gold down the right) --------- */
  .sp-kb-edge{
    pointer-events:none;
    position:fixed;top:0;bottom:0;right:0;width:7px;z-index:60;
    background:linear-gradient(180deg,#f3e6c4,#c4a267,#8a6d3b,#c4a267,#f3e6c4);
    background-size:100% 300%;animation:kbEdge 5s linear infinite;
    text-indent:-9999px;overflow:hidden;
  }

  /* ---- the pointer / tilt sheen ------------------------------------------ */
  .sp-kb-sheen{
    position:fixed;inset:-20% -40%;z-index:59;pointer-events:none;opacity:0;
    transition:opacity .5s ease;mix-blend-mode:soft-light;
    background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.4) 50%,transparent 57%);
  }

  /* ---- dusk — press & hold lowers the lights ----------------------------- */
  .sp-kb-dusk{
    position:fixed;inset:0;z-index:58;pointer-events:none;opacity:0;
    transition:opacity .9s ease;mix-blend-mode:multiply;
    background:radial-gradient(120% 90% at 50% 40%,
      rgba(21,19,16,0) 0%,rgba(21,19,16,.28) 42%,rgba(21,19,16,.82) 100%);
  }
  .sp-kb-dusk-note{
    position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));
    z-index:59;text-align:center;pointer-events:none;opacity:0;transition:opacity .6s ease;
    font:400 8.5px "Inter",sans-serif;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(245,241,234,.72);
  }
  body.sp-kb.sp-dusk .sp-kb-dusk{opacity:1}
  body.sp-kb.sp-dusk .sp-kb-dusk-note{opacity:1}
  /* in dusk the photographs stay lit — a touch warmer/brighter than the room */
  body.sp-kb.sp-dusk .sp-develop img,
  body.sp-kb.sp-dusk .sp-figure img{filter:brightness(1.06) saturate(1.04) contrast(1.02)}

  /* ==========================================================================
     THE THRESHOLD — the cover that greets you with the church of this hour
     Built by mobile.js from #sp-kb-threshold JSON; a first-load ritual.
     ========================================================================== */
  .sp-kb-cover{
    position:fixed;inset:0;z-index:9998;display:block;width:100%;border:0;padding:0;margin:0;
    text-align:left;cursor:pointer;background:#20222f;color:var(--paper,#F5F1EA);
    overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;
    animation:kbFade .8s cubic-bezier(.16,1,.3,1) both;
  }
  .sp-kb-cover.is-lifting{animation:kbLift .85s cubic-bezier(.16,1,.3,1) both}
  .sp-kb-cover[hidden]{display:none}

  .sp-kb-cover__img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
    filter:brightness(.4) saturate(.78) contrast(1.08);transform:scale(1.06);opacity:.4;
    transition:filter 1.8s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1),opacity 1.3s ease;
  }
  .sp-kb-cover.is-open .sp-kb-cover__img{filter:none;transform:none;opacity:1}
  .sp-kb-cover__breath{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
    background:linear-gradient(180deg,rgba(43,47,66,.6),rgba(90,74,82,.28) 42%,rgba(201,155,110,.5));
    animation:kbBreath 9s ease-in-out infinite;}
  .sp-kb-cover__veil{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(20,18,15,.42) 0,transparent 30%,rgba(20,18,15,.28) 60%,rgba(20,18,15,.92) 100%);}
  .sp-kb-cover__gilt{position:absolute;top:14px;bottom:14px;right:0;width:8px;pointer-events:none;
    background:linear-gradient(180deg,#f3e6c4,#c4a267,#8a6d3b,#c4a267,#f3e6c4);
    background-size:100% 300%;animation:kbEdge 5s linear infinite;}
  .sp-kb-cover__now{position:absolute;left:26px;top:calc(74px + env(safe-area-inset-top));
    font:400 9.5px "Inter",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,241,234,.72);}
  .sp-kb-cover__block{position:absolute;left:26px;right:26px;bottom:22%;}
  .sp-kb-cover__kick{display:flex;gap:12px;align-items:baseline;margin-bottom:12px;}
  .sp-kb-cover__folio{font-family:var(--serif,"Cormorant Garamond",serif);font-style:italic;color:var(--gold,#C4A267);font-size:1.1rem;}
  .sp-kb-cover__k{font:400 9px "Inter",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,241,234,.66);}
  .sp-kb-cover__title{display:block;font-family:var(--serif,"Cormorant Garamond",serif);font-weight:400;
    font-size:clamp(2.6rem,12vw,3.4rem);line-height:.9;color:var(--paper,#F5F1EA);text-shadow:0 2px 34px rgba(0,0,0,.55);}
  .sp-kb-cover__line{display:block;font-family:var(--serif,"Cormorant Garamond",serif);font-style:italic;
    font-size:1.24rem;line-height:1.34;color:rgba(245,241,234,.92);margin-top:14px;max-width:24ch;}
  .sp-kb-cover__lift{position:absolute;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));
    text-align:center;font-family:var(--serif,"Cormorant Garamond",serif);font-style:italic;font-size:1.2rem;}
  .sp-kb-cover__lift span{
    background:linear-gradient(100deg,#c9ad74,#f3e6c4,#c9ad74);background-size:250% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:kbShimmer 4s linear infinite;}
}

/* while the cover is up, freeze the page behind it */
body.sp-kb-locked{overflow:hidden}

/* ---- respect reduced motion: no bloom, no shimmer, no breath ------------- */
@media (prefers-reduced-motion:reduce){
  body.sp-kb .sp-folio,
  .sp-kb-edge,.sp-kb-cover,.sp-kb-cover__img,.sp-kb-cover__breath,
  .sp-kb-cover__gilt,.sp-kb-cover__lift span{animation:none!important}
  html.js body.sp-kb .reveal.sp-develop img{filter:none!important;transform:none!important;transition:none!important}
  .sp-kb-cover__img{filter:none;transform:none;opacity:1}
  .sp-kb-cover.is-lifting{animation:none!important;display:none}
}