/* The Glamour PhotoJournalist — the Flip (page-turn reader).
   Loaded only by the flip pages (home + person sections).

   ALL stage behaviour is gated behind html.flip-on, a class flip.js adds
   on load. With JS off, nothing in this file applies: the cards stay
   stacked in normal document flow (base styles live in system/lib.php)
   and the page scrolls normally — fully crawlable and readable.

   Motion v3 — a SINGLE page turns, driven by the gesture itself
   (see assets/flip.js). Only one card ever rotates: for NEXT it lifts
   away around its top edge while the next card sits static beneath it,
   brightening as it is revealed; for PREV the previous card unfolds
   down over the current one. Depth comes from three overlay values
   flip.js writes per frame as CSS custom properties on the cards:
     --sh  shade on the turning page (black gradient, strongest mid-turn)
     --vl  veil: flat black dim on the card beneath
     --cs  cast shadow the turning page throws onto the card beneath,
           rendered as an inset box-shadow near the pivot (top edge)
   All three default to 0, so at rest every card is clean. */

/* --- the stage --- */
html.flip-on .flipwrap{position:relative;height:100vh;height:100dvh;overflow:hidden;background:#050505;-webkit-perspective:1600px;perspective:1600px}
html.flip-on .flipcard{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:none;margin:0;overflow:hidden;background:#050505;-webkit-backface-visibility:hidden;backface-visibility:hidden;--sh:0;--vl:0;--cs:0;box-shadow:inset 0 16vh 10vh -8vh rgba(0,0,0,var(--cs))}

/* --- overlays (never intercept taps) --- */
/* veil: flat dim on the card beneath the turning page */
html.flip-on .flipcard::before{content:"";position:absolute;inset:0;background:#000;opacity:var(--vl);pointer-events:none;z-index:5}
/* shade: gradient on the turning page itself, weighted to the free edge */
html.flip-on .flipcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.95) 100%);opacity:var(--sh);pointer-events:none;z-index:6}

/* --- resting states (classes set by flip.js applyStates) --- */
html.flip-on .flipcard.is-current{visibility:visible;z-index:2;transform-origin:top center;transform:rotateX(0deg)}
html.flip-on .flipcard.is-before{visibility:hidden;z-index:1}
html.flip-on .flipcard.is-after{visibility:hidden;z-index:1}
/* the immediate next card renders statically beneath the current one,
   ready to be revealed; all further cards stay hidden */
html.flip-on .flipcard.is-after.is-under{visibility:visible;z-index:1;transform:rotateX(0deg)}

/* --- "Swipe up to flip" hint (flip.js adds it to the first card) --- */
.fliphint{text-align:center;font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.55;margin:16px 0 0;animation:fliphintpulse 2.2s ease-in-out infinite}
html.hint-done .fliphint{display:none}
@keyframes fliphintpulse{0%,100%{opacity:.35}50%{opacity:.75}}
@media (prefers-reduced-motion: reduce){
  .fliphint{animation:none}
}