/* CineRiver forward scroll (see js/cineriver-forward.js). Only applies under .cr-forward,
   which the script sets when visual effects are on; otherwise the classic list is unchanged.
   Transforms and opacity only, so the browser animates on the GPU. */
.cineriver-feed-viewport.cr-forward{
  position:relative;overflow:hidden;max-height:none;padding-right:0;
  height:min(calc(100dvh - var(--cineriver-navbar-height, 72px) - 13rem), 52rem);min-height:24rem;
  perspective:1100px;perspective-origin:50% 0%;overscroll-behavior:contain;touch-action:pan-y}
.cr-forward #cineriver-feed-list{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 40% -120px;
  transform:rotateY(calc(var(--cr-px, 0) * 4deg)) rotateX(calc(var(--cr-py, 0) * -3deg))}
.cr-forward .cineriver-post-list{position:absolute;inset:0;transform-style:preserve-3d}
/* The full-size 3D containers must never catch the pointer: with the mouse tilt, their plane
   can sit in front of the current card and swallow every click. Only the current card is live. */
.cr-forward #cineriver-feed-list,.cr-forward .cineriver-post-list{pointer-events:none}
.cr-forward .cineriver-post-card,
.cr-forward [data-testid="cineriver-feed-end"]{
  --cr-d:0;position:absolute;left:50%;top:3.2rem;width:min(100%,40rem);margin:0!important;
  max-height:calc(100% - 4rem);background:#15171c!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:.9rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  transform:translate3d(-50%, calc(var(--cr-d) * -2.3rem + var(--cr-lift, 0rem)), calc(var(--cr-d) * -220px));
  opacity:calc(1 - var(--cr-d) * .28);
  filter:brightness(calc(1 - var(--cr-d) * .22)) blur(calc(var(--cr-d) * 1.2px));
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;pointer-events:none}
.cr-forward .cineriver-post-card.cr-is-current,
.cr-forward [data-testid="cineriver-feed-end"].cr-is-current{pointer-events:auto;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(251,191,36,.18)}
.cr-forward [data-testid="cineriver-feed-end"]{top:40%;padding:2rem;border-radius:.75rem;background:#111;border:1px solid rgba(255,255,255,.12)}
/* Click the post behind to move forward: hand cursor, the card under the mouse rises a little
   and lights up with a POP red/cyan edge, so the gesture is found without a word. */
.cr-forward.cr-back-hover{cursor:pointer}
.cr-forward .cineriver-post-card.cr-back-hot,.cr-forward [data-testid="cineriver-feed-end"].cr-back-hot{--cr-lift:-.9rem;
  filter:brightness(calc(1.25 - var(--cr-d) * .15));box-shadow:-4px -3px 0 rgba(255,42,60,.9),4px -3px 0 rgba(22,224,255,.9),0 0 0 1px rgba(251,191,36,.7)!important}
.cr-forward .cineriver-feed-sentinel{position:absolute;bottom:0;left:0;right:0;opacity:0;visibility:hidden;animation:none!important;pointer-events:none}
.cr-forward .cineriver-empty-state{position:relative}

/* Leaving: the post grows toward the viewer, splits red/cyan and is eaten left to right
   while the Three.js dust takes its place. */
.cr-forward .cineriver-post-card.cr-leaving{
  visibility:visible!important;pointer-events:none;transition:none;
  animation:cr-leave .9s cubic-bezier(.3,0,.2,1) forwards}
.cr-forward .cineriver-post-card.cr-leaving .card-body{animation:cr-rgb .9s steps(6) forwards}
@keyframes cr-leave{
  0%{transform:translate3d(-50%,0,0) scale(1);clip-path:inset(0 0 0 0);opacity:1}
  18%{transform:translate3d(-50%,0,80px) scale(1.08);clip-path:inset(0 0 0 0);opacity:1}
  70%{opacity:.6}
  100%{transform:translate3d(-50%,0,260px) scale(1.12);clip-path:inset(0 0 0 100%);opacity:0}}
@keyframes cr-rgb{
  0%{text-shadow:none}
  20%{text-shadow:-3px 0 #ff2a3c,3px 0 #16e0ff}
  40%{text-shadow:4px 1px #ff2a3c,-4px 0 #16e0ff;transform:translateX(-2px)}
  60%{text-shadow:-6px 0 #ff2a3c,6px -1px #16e0ff;transform:translateX(3px)}
  100%{text-shadow:-8px 0 #ff2a3c,8px 0 #16e0ff}}

/* Going back: the previous post comes back from behind the viewer. */
.cr-forward .cineriver-post-card.cr-returning{animation:cr-return .7s cubic-bezier(.2,.8,.2,1)}
@keyframes cr-return{from{transform:translate3d(-50%,0,260px) scale(1.1);opacity:0}to{transform:translate3d(-50%,0,0);opacity:1}}

/* Nothing further: a small bump. */
.cr-forward.cr-bump #cineriver-feed-list{animation:cr-bump .35s ease-out}
@keyframes cr-bump{30%{transform:rotateY(calc(var(--cr-px, 0) * 4deg)) rotateX(calc(var(--cr-py, 0) * -3deg)) translateZ(-30px)}}

/* Small screens and touch: sober, no blur, two posts behind. */
.cr-forward.cr-compact .cineriver-post-card{filter:none;top:2.4rem;max-height:calc(100% - 3rem);transform:translate3d(-50%, calc(var(--cr-d) * -1.5rem + var(--cr-lift, 0rem)), calc(var(--cr-d) * -150px))}
.cr-forward.cr-compact{height:calc(100dvh - var(--cineriver-navbar-height, 64px) - 11rem)}

.cr-forward-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
.cr-forward-controls[hidden]{display:none}
.cr-forward-hint{flex-basis:100%;text-align:center;color:#fbbf24;animation:cr-hint 1.6s ease-in-out infinite}
@keyframes cr-hint{50%{opacity:.45;transform:translateY(-3px)}}

/* The shared canvas: above the feed, below modals, never catches the pointer. */
.cr-forward-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:1035;pointer-events:none;opacity:0}
.cr-forward-canvas.is-on{opacity:1}

/* Clap without WebGL or on small screens: a glitching pop on the post's corner. */
.cr-clap-pop{position:absolute;top:.75rem;right:.75rem;z-index:5;display:flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border-radius:999px;background:rgba(7,7,7,.85);border:1px solid rgba(251,191,36,.5);
  color:#f2ede3;font-weight:700;pointer-events:none;animation:cr-pop 1.7s cubic-bezier(.2,1.4,.4,1) forwards}
.cr-clap-icon{display:inline-block;animation:cr-clap .5s .25s ease-out}
.cr-clap-count{position:relative}
.cr-clap-count::before,.cr-clap-count::after{content:attr(data-text);position:absolute;inset:0;opacity:.8}
.cr-clap-count::before{color:#ff2a3c;transform:translateX(-2px);animation:g3d-split .5s steps(3) .3s 2}
.cr-clap-count::after{color:#16e0ff;transform:translateX(2px);animation:g3d-split .5s steps(3) .3s 2 reverse}
@keyframes cr-pop{0%{transform:scale(.3) translateZ(0);opacity:0}15%{transform:scale(1.15);opacity:1}25%{transform:scale(1)}
  75%{opacity:1;filter:none}100%{transform:scale(1.4);opacity:0;filter:blur(3px) drop-shadow(-4px 0 #ff2a3c) drop-shadow(4px 0 #16e0ff)}}
@keyframes cr-clap{0%{transform:rotate(0)}40%{transform:rotate(-18deg)}60%{transform:rotate(6deg)}100%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){.cr-forward-hint,.cr-clap-pop,.cr-clap-icon{animation:none}}

/* Mouse wheel past the end of a post: a gauge fills, then the next post comes. */
.cr-push-gauge{position:absolute;left:50%;bottom:.35rem;z-index:200;width:min(60%,16rem);height:4px;border-radius:2px;
  transform:translateX(-50%);background:rgba(255,255,255,.12);opacity:0;transition:opacity .2s;pointer-events:none;overflow:hidden}
.cr-push-gauge[data-dir="up"]{top:2.6rem;bottom:auto}
.cr-push-gauge.is-on{opacity:1}
.cr-push-gauge span{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--cr-push,0));
  background:linear-gradient(90deg,#ff2a3c,#fbbf24,#16e0ff);box-shadow:-2px 0 0 rgba(255,42,60,.6),2px 0 0 rgba(22,224,255,.6)}

/* Cinema-hall backdrop (js/cineriver-backdrop.js): fixed behind the page, darkened so posts stay readable. */
.cr-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0b0b0b center/cover no-repeat}
.cr-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,rgba(7,7,7,0),rgba(7,7,7,.08) 40%,rgba(7,7,7,.6) 80%)}
.cr-backdrop canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cineriver-app-page .cineriver-page-shell{position:relative;z-index:1}
.cr-mini-btn{padding:.15rem .6rem;font-size:.8rem;line-height:1.4}

/* Sponsored card every 10 posts (js/cineriver-feed-ad.js). Until its ad arrives the slot takes
   no room in the list; in the 3D deck it shows a quiet "Ad…" if it reaches the front first. */
.cineriver-ad-card{background:#101216!important;border:1px solid rgba(251,191,36,.35)!important;overflow:hidden}
.cineriver-ad-card[data-cr-ad-state="pending"],.cineriver-ad-card[data-cr-ad-state="loading"]{border:0!important;background:transparent!important;min-height:0;box-shadow:none}
.cr-forward .cineriver-ad-card[data-cr-ad-state="pending"],.cr-forward .cineriver-ad-card[data-cr-ad-state="loading"]{min-height:12rem;background:#101216!important}
.cr-forward .cineriver-ad-card[data-cr-ad-state="loading"].cr-is-current::before{content:attr(aria-label) "…";position:absolute;inset:0;display:grid;place-items:center;color:#fbbf24;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.cr-ad-badge{background:#fbbf24;color:#0b0b0b;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.cr-ad-player{background:#000}
.cr-ad-player iframe{border:0}
.cr-ad-countdown{margin-left:auto;color:#f2ede3;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-ad-countdown.is-holding{color:#fbbf24;font-weight:700;text-shadow:-1px 0 rgba(255,42,60,.7),1px 0 rgba(22,224,255,.7)}
.cr-ad-countdown.cr-ad-nudge{animation:cr-ad-nudge .35s ease-out}
@keyframes cr-ad-nudge{30%{transform:translateX(-4px)}60%{transform:translateX(3px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.cr-ad-countdown.cr-ad-nudge{animation:none}}
/* Title without a box: uppercase, RGB lettering that vibrates (FilmEcran glitch colours). */
.cr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.25rem .25rem 0}
.cr-title{position:relative;display:inline-block;margin:0;font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(1.6rem,4.2vw,2.6rem);line-height:1;color:#f2ede3;text-shadow:-2px 0 rgba(255,42,60,.85),2px 0 rgba(22,224,255,.85)}
.cr-title::before,.cr-title::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.8}
.cr-title::before{color:#ff2a3c;animation:cr-title-red 2.6s steps(1) infinite}
.cr-title::after{color:#16e0ff;animation:cr-title-cyan 2.6s steps(1) infinite}
.cr-subtitle{color:rgba(242,237,227,.72);letter-spacing:.02em}
@keyframes cr-title-red{0%,100%{transform:translate(-2px,0);clip-path:inset(0)}8%{transform:translate(-4px,1px);clip-path:inset(10% 0 55% 0)}
  10%{transform:translate(-1px,-1px);clip-path:inset(0)}52%{transform:translate(-3px,0);clip-path:inset(60% 0 5% 0)}54%{transform:translate(-2px,0);clip-path:inset(0)}}
@keyframes cr-title-cyan{0%,100%{transform:translate(2px,0);clip-path:inset(0)}8%{transform:translate(4px,-1px);clip-path:inset(50% 0 15% 0)}
  10%{transform:translate(1px,1px);clip-path:inset(0)}52%{transform:translate(3px,0);clip-path:inset(5% 0 62% 0)}54%{transform:translate(2px,0);clip-path:inset(0)}}
[data-effects="off"] .cr-title::before,[data-effects="off"] .cr-title::after{animation:none}
@media (prefers-reduced-motion:reduce){.cr-title::before,.cr-title::after{animation:none}}

/* The next post comes forward visibly: from deep in the hall, with an RGB edge, a small overshoot. */
.cr-forward .cineriver-post-card.cr-arriving{animation:cr-arrive 1s cubic-bezier(.16,.84,.3,1.12) .16s both}
@keyframes cr-arrive{
  0%{transform:translate3d(-50%,-3.5rem,-520px) scale(.82);opacity:.25;filter:blur(2px);
     box-shadow:-10px 0 0 rgba(255,42,60,.55),10px 0 0 rgba(22,224,255,.55)}
  70%{transform:translate3d(-50%,0,40px) scale(1.02);opacity:1;filter:none;
     box-shadow:-3px 0 0 rgba(255,42,60,.4),3px 0 0 rgba(22,224,255,.4)}
  100%{transform:translate3d(-50%,0,0) scale(1);opacity:1;
     box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(251,191,36,.18)}}
.cr-forward.cr-compact .cineriver-post-card.cr-arriving{animation-duration:.8s}

/* Frameless action icons (clap, report, send, edit, delete, new post): no Bootstrap box, a
   permanent thin red/cyan split, a stronger RGB vibration and a slight zoom on hover/focus.
   The hit area stays 44 px and keyboard focus keeps a visible ring. */
.cr-icon-btn{appearance:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;
  background:none;color:#f2ede3;cursor:pointer;text-decoration:none;line-height:1;transition:transform .18s cubic-bezier(.2,1.4,.4,1),color .18s}
.cr-icon-btn-sm{width:36px;height:36px}
.cr-icon-btn-sm .cr-icon{width:18px;height:18px}
.cr-icon{display:block;filter:drop-shadow(-1px 0 rgba(255,42,60,.7)) drop-shadow(1px 0 rgba(22,224,255,.7))}
.cr-icon-btn:hover,.cr-icon-btn:focus-visible{transform:scale(1.18);color:#fff}
.cr-icon-btn:hover .cr-icon,.cr-icon-btn:focus-visible .cr-icon{animation:cr-icon-vibe .32s steps(2) infinite}
.cr-icon-btn:focus-visible,.cr-text-btn:focus-visible{outline:2px solid #fbbf24;outline-offset:2px}
.cr-icon-btn:active{transform:scale(.94)}
.cr-icon-btn.is-on{color:#fbbf24}
.cr-icon-btn.is-on .cr-icon path:first-child{fill:rgba(251,191,36,.25)}
.cr-icon-btn.is-danger{color:#ff8a95}
.cr-icon-btn.is-danger:hover,.cr-icon-btn.is-danger:focus-visible{color:#ff2a3c}
@keyframes cr-icon-vibe{
  0%{filter:drop-shadow(-2px 0 rgba(255,42,60,.9)) drop-shadow(2px 0 rgba(22,224,255,.9))}
  50%{filter:drop-shadow(-3px 1px rgba(255,42,60,.9)) drop-shadow(3px -1px rgba(22,224,255,.9))}
  100%{filter:drop-shadow(-1px -1px rgba(255,42,60,.9)) drop-shadow(2px 1px rgba(22,224,255,.9))}}

/* Text buttons in the same spirit (Publier, Annuler, Liste/3D). */
.cr-text-btn{appearance:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .6rem;border:0;background:none;
  color:#f2ede3;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;text-decoration:none;cursor:pointer;
  text-shadow:-1px 0 rgba(255,42,60,.7),1px 0 rgba(22,224,255,.7);transition:transform .18s cubic-bezier(.2,1.4,.4,1),color .18s}
.cr-text-btn.is-primary{color:#fbbf24}
.cr-text-btn-sm{min-height:36px;font-size:.72rem;padding:.3rem .45rem}
.cr-text-btn:hover,.cr-text-btn:focus-visible{transform:scale(1.08);color:#fff;text-shadow:-2px 0 rgba(255,42,60,.9),2px 0 rgba(22,224,255,.9)}
.cr-text-btn.is-primary:hover,.cr-text-btn.is-primary:focus-visible{color:#fde68a}
.cr-text-btn:hover .cr-icon,.cr-text-btn:focus-visible .cr-icon{animation:cr-icon-vibe .32s steps(2) infinite}
.cr-text-btn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.cr-icon-btn,.cr-text-btn{transition:none}.cr-icon-btn:hover .cr-icon,.cr-icon-btn:focus-visible .cr-icon,.cr-text-btn:hover .cr-icon,.cr-text-btn:focus-visible .cr-icon{animation:none}}
.cr-forward .cineriver-post-card:focus-visible{outline:2px solid #fbbf24;outline-offset:3px}

/* First step back only: the card is revealed right to left as its dust lands (js: reassembledOnce). */
.cr-forward .cineriver-post-card.cr-reassembling{animation:cr-reassemble 1.25s linear both}
@keyframes cr-reassemble{
  0%,40%{clip-path:inset(0 0 0 100%);opacity:0;transform:translate3d(-50%,0,0)}
  45%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:translate3d(-50%,0,0)}}

/* Moderation notice, shown to the author only. */
.cr-moderation-notice{padding:.5rem .75rem;border-left:3px solid #fbbf24;background:rgba(251,191,36,.08);color:#f2ede3;border-radius:.25rem}
.cr-moderation-notice.is-hidden{border-left-color:#ff2a3c;background:rgba(255,42,60,.08)}

/* Visitor gate on the Social pages: the cinema hall, the RGB title and a sign-in box. */
.cr-gate{min-height:calc(100dvh - var(--cineriver-navbar-height,72px));display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.cr-gate-inner{width:100%;max-width:26rem;display:flex;flex-direction:column;gap:1.5rem;text-align:center}
.cr-gate-head .cr-title{font-size:clamp(2rem,8vw,3.2rem)}
.cr-gate-head .cr-subtitle{color:#d1d5db;margin-top:.5rem}
.cr-gate-box{text-align:left;background:rgba(8,8,8,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,193,7,.28);border-radius:.75rem;padding:1.25rem;color:#e5e7eb;
  box-shadow:-2px 0 0 rgba(255,42,60,.45),2px 0 0 rgba(0,229,255,.45),0 20px 50px rgba(0,0,0,.6)}
.cr-gate-box-title{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#ffc107;margin-bottom:1rem}
.cr-gate-input{background:#111;border-color:#374151;color:#fff}
.cr-gate-input:focus{background:#111;color:#fff;border-color:#ffc107;box-shadow:0 0 0 .2rem rgba(255,193,7,.25)}
.cr-gate-submit,.cr-gate-register,.cr-gate-google{display:block;width:100%;text-align:center;font-weight:700;border-radius:.5rem;padding:.6rem 1rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.cr-gate-submit{border:0;background:#ffc107;color:#0b0b0b;text-transform:uppercase;letter-spacing:.06em}
.cr-gate-register{border:1px solid #ffc107;color:#ffc107;background:transparent}
.cr-gate-google{border:1px solid #4b5563;color:#e5e7eb;background:transparent;font-weight:600}
.cr-gate-submit:hover,.cr-gate-register:hover,.cr-gate-google:hover,
.cr-gate-submit:focus-visible,.cr-gate-register:focus-visible,.cr-gate-google:focus-visible{transform:scale(1.02);box-shadow:-2px 0 0 #ff2a3c,2px 0 0 #00e5ff;outline:none}
.cr-gate-link{color:#d1d5db}
.cr-gate-link:hover{color:#ffc107}
.cr-gate-or{text-align:center;color:#9ca3af;margin:.9rem 0;text-transform:uppercase;letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.cr-gate-submit,.cr-gate-register,.cr-gate-google{transition:none}.cr-gate-submit:hover,.cr-gate-register:hover,.cr-gate-google:hover{transform:none}}

/* The hall screen is bright: header text gets a dark halo so it stays readable on it. */
.cineriver-app-page .cr-subtitle{color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.6)}
.cineriver-app-page .cr-head .cr-text-btn,.cineriver-app-page .cr-head .cr-icon-btn{filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}
.cineriver-app-page .cr-title{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}