/* FilmEcran POP skin for Social (CineRiver, CineMaatch, CineDaate, outings) and Clubs.
   Loaded by base.html.twig only on those paths, scoped by class="fe-pop" on the page content and
   the HTMX modal host (the navbar and footer keep the site-wide look).
   Charter only: black #0b0b0b, yellow #ffc107, red #ff2a3c, cyan #00e5ff, cream #f2ede3.
   No Bootstrap blue is left on these pages. Nothing animates at rest: the RGB split and the
   lift happen on hover or keyboard focus only. */

/* ------------------------------------------------------------------ buttons */
.fe-pop .btn{border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;
  padding:.45rem 1.05rem;border-width:2px;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .18s,background-color .18s,color .18s,border-color .18s}
.fe-pop .btn-sm{font-size:.7rem;padding:.3rem .8rem}
.fe-pop .btn-lg{font-size:.92rem;padding:.6rem 1.4rem}
.fe-pop .btn:hover,.fe-pop .btn:focus-visible{transform:translateY(-1px) scale(1.04);box-shadow:-3px 0 0 #ff2a3c,3px 0 0 #00e5ff}
.fe-pop .btn:active{transform:scale(.96)}
.fe-pop .btn:focus{box-shadow:none}
.fe-pop .btn:focus-visible{outline:2px solid #ffc107;outline-offset:2px}
.fe-pop .btn:disabled,.fe-pop .btn.disabled{opacity:.45;transform:none;box-shadow:none}

/* Solid: the main action of a block. */
.fe-pop .btn-warning,.fe-pop .btn-primary,.fe-pop .btn-success{background:#ffc107;border-color:#ffc107;color:#0b0b0b}
.fe-pop .btn-warning:hover,.fe-pop .btn-primary:hover,.fe-pop .btn-success:hover,
.fe-pop .btn-warning:focus-visible,.fe-pop .btn-primary:focus-visible,.fe-pop .btn-success:focus-visible,
.fe-pop .btn-warning:active,.fe-pop .btn-primary:active,.fe-pop .btn-success:active{background:#ffd23f;border-color:#ffd23f;color:#0b0b0b}
.fe-pop .btn-danger{background:#ff2a3c;border-color:#ff2a3c;color:#0b0b0b}
.fe-pop .btn-danger:hover,.fe-pop .btn-danger:focus-visible,.fe-pop .btn-danger:active{background:#ff4a59;border-color:#ff4a59;color:#0b0b0b}

/* Outline: secondary actions. */
.fe-pop .btn-outline-warning{background:transparent;border-color:#ffc107;color:#ffc107}
.fe-pop .btn-outline-warning:hover,.fe-pop .btn-outline-warning:focus-visible,.fe-pop .btn-outline-warning:active,.fe-pop .btn-outline-warning.active{background:rgba(255,193,7,.12);border-color:#ffc107;color:#ffc107}
.fe-pop .btn-outline-light,.fe-pop .btn-outline-secondary{background:transparent;border-color:rgba(242,237,227,.45);color:#f2ede3}
.fe-pop .btn-outline-light:hover,.fe-pop .btn-outline-light:focus-visible,.fe-pop .btn-outline-light:active,.fe-pop .btn-outline-light.active,
.fe-pop .btn-outline-secondary:hover,.fe-pop .btn-outline-secondary:focus-visible,.fe-pop .btn-outline-secondary:active,.fe-pop .btn-outline-secondary.active{
  background:rgba(242,237,227,.08);border-color:#f2ede3;color:#fff}
.fe-pop .btn-outline-danger{background:transparent;border-color:#ff2a3c;color:#ff6b78}
.fe-pop .btn-outline-danger:hover,.fe-pop .btn-outline-danger:focus-visible,.fe-pop .btn-outline-danger:active{background:rgba(255,42,60,.14);border-color:#ff2a3c;color:#ff8a95}
.fe-pop .btn-outline-success,.fe-pop .btn-outline-info,.fe-pop .btn-outline-primary{background:transparent;border-color:#00e5ff;color:#00e5ff}
.fe-pop .btn-outline-success:hover,.fe-pop .btn-outline-info:hover,.fe-pop .btn-outline-primary:hover,
.fe-pop .btn-outline-success:focus-visible,.fe-pop .btn-outline-info:focus-visible,.fe-pop .btn-outline-primary:focus-visible,
.fe-pop .btn-outline-success:active,.fe-pop .btn-outline-info:active,.fe-pop .btn-outline-primary:active{background:rgba(0,229,255,.1);border-color:#00e5ff;color:#7df3ff}
.fe-pop .btn-link{color:#ffc107;text-transform:none;letter-spacing:0;font-weight:700;border-color:transparent}
.fe-pop .btn-link:hover,.fe-pop .btn-link:focus-visible{color:#ffd23f;box-shadow:none;text-shadow:-2px 0 rgba(255,42,60,.8),2px 0 rgba(0,229,255,.8)}

/* ------------------------------------------------------------------ no blue left */
.fe-pop .form-control:focus,.fe-pop .form-select:focus,.fe-pop .form-check-input:focus{border-color:#ffc107;box-shadow:0 0 0 .2rem rgba(255,193,7,.25)}
.fe-pop .form-check-input:checked{background-color:#ffc107;border-color:#ffc107}
.fe-pop .form-range::-webkit-slider-thumb{background:#ffc107}
.fe-pop .form-range::-moz-range-thumb{background:#ffc107}
.fe-pop .nav-pills .nav-link.active,.fe-pop .nav-pills .show>.nav-link{background:#ffc107;color:#0b0b0b}
.fe-pop .nav-tabs .nav-link.active{background:transparent;color:#ffc107;border-color:rgba(255,193,7,.5) rgba(255,193,7,.5) transparent}
.fe-pop .nav-link{color:#f2ede3}
.fe-pop .nav-link:hover,.fe-pop .nav-link:focus{color:#ffc107}
.fe-pop .page-link{background:#0b0b0b;border-color:rgba(242,237,227,.2);color:#f2ede3}
.fe-pop .page-link:hover,.fe-pop .page-link:focus{background:rgba(255,193,7,.12);color:#ffc107;box-shadow:none}
.fe-pop .page-item.active .page-link{background:#ffc107;border-color:#ffc107;color:#0b0b0b}
.fe-pop .list-group-item.active{background:#ffc107;border-color:#ffc107;color:#0b0b0b}
.fe-pop .progress-bar{background:#ffc107}
.fe-pop .bg-primary{background-color:#ffc107!important;color:#0b0b0b}
.fe-pop .bg-info{background-color:#00e5ff!important;color:#0b0b0b}
.fe-pop .text-primary,.fe-pop .link-primary{color:#ffc107!important}
.fe-pop .text-info{color:#00e5ff!important}
.fe-pop .alert-info,.fe-pop .alert-primary{background:#101314;border:1px solid rgba(0,229,255,.45);color:#d6fbff}
.fe-pop .alert-info a,.fe-pop .alert-primary a{color:#ffc107}
.fe-pop .dropdown-item.active,.fe-pop .dropdown-item:active{background:#ffc107;color:#0b0b0b}

/* ------------------------------------------------------------------ images */
/* Posters and portraits: the RGB misregistration of the charter, on hover only. */
.fe-pop img[src*="image.tmdb.org"],.fe-pop img[src*="/uploads/"],.fe-pop .fe-glitch{transition:filter .18s,transform .18s}
.fe-pop a:hover img[src*="image.tmdb.org"],.fe-pop a:focus-visible img[src*="image.tmdb.org"],
.fe-pop a:hover img[src*="/uploads/"],.fe-pop a:focus-visible img[src*="/uploads/"],
.fe-pop .fe-glitch:hover{filter:drop-shadow(-3px 0 0 rgba(255,42,60,.85)) drop-shadow(3px 0 0 rgba(0,229,255,.85));transform:translateY(-1px)}

/* ------------------------------------------------------------------ calm */
html[data-effects="off"] .fe-pop .btn,html[data-effects="off"] .fe-pop img{transition:none}
html[data-effects="off"] .fe-pop .btn:hover,html[data-effects="off"] .fe-pop .btn:focus-visible{transform:none}
html[data-effects="off"] .fe-pop a:hover img,html[data-effects="off"] .fe-pop .fe-glitch:hover{filter:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .fe-pop .btn,.fe-pop img{transition:none}
  .fe-pop .btn:hover,.fe-pop .btn:focus-visible,.fe-pop a:hover img,.fe-pop .fe-glitch:hover{transform:none}
}

/* ------------------------------------------------------------------ shared POP motion
   Any block marked data-fe-pop-in lands with a small overshoot when the page opens (once).
   Feed cards and the clap get their feedback from js/fe-pop-motion.js (Web Animations).
   Both stop with reduced motion or when visual effects are switched off. */
.fe-pop [data-fe-pop-in]{animation:fe-pop-land .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fe-pop-land{0%{opacity:0;transform:translateY(12px) scale(.97)}100%{opacity:1;transform:none}}

/* Brand names stay text: CineMaatch, CineRiver… drawn with the RGB split. */
.fe-pop .fe-pop-wordmark{position:relative;display:inline-block;margin:0 0 .3rem;font-size:clamp(2rem,6.5vw,3.2rem);font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;line-height:1;color:#f2ede3}
.fe-pop .fe-pop-wordmark::before,.fe-pop .fe-pop-wordmark::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.85}
.fe-pop .fe-pop-wordmark::before{color:#ff2a3c;transform:translate(-3px,0)}
.fe-pop .fe-pop-wordmark::after{color:#00e5ff;transform:translate(3px,0)}
.fe-pop .fe-pop-head:hover .fe-pop-wordmark::before{animation:fe-pop-split .34s steps(2,end) 1}
.fe-pop .fe-pop-head:hover .fe-pop-wordmark::after{animation:fe-pop-split .34s steps(2,end) 1 reverse}
@keyframes fe-pop-split{0%{transform:translate(-6px,1px);clip-path:inset(0 0 55% 0)}50%{transform:translate(5px,-1px);clip-path:inset(45% 0 0 0)}100%{transform:translate(-3px,0);clip-path:inset(0)}}

html[data-effects="off"] .fe-pop [data-fe-pop-in],html[data-effects="off"] .fe-pop .fe-pop-head:hover .fe-pop-wordmark::before,
html[data-effects="off"] .fe-pop .fe-pop-head:hover .fe-pop-wordmark::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .fe-pop [data-fe-pop-in],.fe-pop .fe-pop-head:hover .fe-pop-wordmark::before,.fe-pop .fe-pop-head:hover .fe-pop-wordmark::after{animation:none}
}