/* FilmEcran light "3D glitch" for posters, people photos and titles (see js/glitch-3d.js).
   Everything is gated on html[data-effects="on"], so the page is unchanged when it is off. */
.g3d{position:relative;display:inline-block;max-width:100%;perspective:900px;vertical-align:top;--g3d-x:0;--g3d-y:0}
.g3d.is-fill{display:block;width:100%;height:100%}
.g3d-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;mix-blend-mode:screen}
.g3d-ghost.is-red{filter:url(#g3d-only-red)}
.g3d-ghost.is-cyan{filter:url(#g3d-only-cyan)}

[data-effects="on"] .g3d .g3d-main,
[data-effects="on"] .g3d .g3d-ghost{
  transform:rotateY(calc(var(--g3d-x) * 7deg)) rotateX(calc(var(--g3d-y) * -6deg));
  transition:transform .25s ease-out,opacity .2s}
[data-effects="on"] .g3d.is-hover .g3d-ghost{opacity:.55}
[data-effects="on"] .g3d.is-hover .g3d-ghost.is-red{transform:rotateY(calc(var(--g3d-x) * 7deg)) rotateX(calc(var(--g3d-y) * -6deg)) translate(calc(var(--g3d-x) * -5px - 2px),0)}
[data-effects="on"] .g3d.is-hover .g3d-ghost.is-cyan{transform:rotateY(calc(var(--g3d-x) * 7deg)) rotateX(calc(var(--g3d-y) * -6deg)) translate(calc(var(--g3d-x) * 5px + 2px),0)}
[data-effects="on"] .g3d.is-glitch .g3d-ghost{opacity:.8;animation:g3d-jitter .45s steps(3) 1}

.g3d-text{position:relative}
.g3d-text::before,.g3d-text::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
[data-effects="on"] .g3d-text.is-glitch::before{color:#ff2a3c;animation:g3d-split .5s steps(3) 1}
[data-effects="on"] .g3d-text.is-glitch::after{color:#16e0ff;animation:g3d-split .5s steps(3) 1 reverse}
@keyframes g3d-split{
  0%{opacity:.8;transform:translate(-3px,0);clip-path:inset(0 0 60% 0)}
  50%{opacity:.8;transform:translate(3px,1px);clip-path:inset(40% 0 20% 0)}
  100%{opacity:0;transform:none;clip-path:inset(0)}}
@keyframes g3d-jitter{0%{clip-path:inset(0)}33%{clip-path:inset(15% 0 45% 0)}66%{clip-path:inset(55% 0 10% 0)}100%{clip-path:inset(0)}}

/* Page transition from an image link (glitch-3d.js + glitch-3d-enter.js). The page and a
   full-screen copy of the clicked image are two faces of one cube, turning together
   around the screen's centre; the image face then holds (with a light RGB jitter) while
   the next page loads, and that page dissolves out of the same image. Transform and
   opacity only, so it stays cheap. */
html.g3d-leaving{overflow:hidden;background:#070707}
html.g3d-leaving body{animation:g3d-cube-out .75s cubic-bezier(.65,0,.35,1) both;pointer-events:none}
.g3d-face{position:fixed;inset:0;z-index:2147483000;background:#070707 var(--g3d-face-img) center/cover no-repeat;
  transform-origin:50% 50%;animation:g3d-cube-in .75s cubic-bezier(.65,0,.35,1) both;pointer-events:none}
.g3d-face::after{content:"";position:absolute;inset:0;
  background:radial-gradient(rgba(0,0,0,.35) 1px,transparent 1.4px) 0 0/5px 5px,linear-gradient(0deg,rgba(7,7,7,.55),rgba(7,7,7,0) 45%)}
.g3d-face i{position:absolute;inset:0;background:inherit;mix-blend-mode:screen;opacity:0;animation:g3d-face-jitter .5s steps(3) .75s infinite}
.g3d-face i.is-red{filter:url(#g3d-only-red);transform:translateX(-6px)}
.g3d-face i.is-cyan{filter:url(#g3d-only-cyan);transform:translateX(6px);animation-direction:reverse}
html.g3d-entering::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:#070707 var(--g3d-enter-img) center/cover no-repeat;animation:g3d-dissolve .8s cubic-bezier(.4,0,.2,1) .05s both}
@keyframes g3d-cube-out{
  from{transform:perspective(1200px) translateZ(-50vw) rotateY(0) translateZ(50vw);filter:brightness(1)}
  to{transform:perspective(1200px) translateZ(-50vw) rotateY(-90deg) translateZ(50vw);filter:brightness(.25)}}
@keyframes g3d-cube-in{
  from{transform:perspective(1200px) translateZ(-50vw) rotateY(90deg) translateZ(50vw);filter:brightness(.25)}
  to{transform:perspective(1200px) translateZ(-50vw) rotateY(0) translateZ(50vw);filter:brightness(1)}}
@keyframes g3d-face-jitter{0%{opacity:.7;clip-path:inset(0 0 70% 0)}50%{opacity:.7;clip-path:inset(40% 0 20% 0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes g3d-dissolve{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}

/* The discreet on/off switch: a small mark in the bottom-left corner. */
.g3d-toggle{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:1040;
  width:26px;height:26px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(7,7,7,.55);
  color:#fbbf24;font-size:12px;line-height:1;cursor:pointer;opacity:.35;transition:opacity .2s}
.g3d-toggle:hover,.g3d-toggle:focus-visible{opacity:1}
.g3d-toggle[aria-pressed="false"]{color:#a59d90}

/* Remove button on liked/recent films and people: hidden in the depth, it comes toward the
   viewer when the card is hovered and glitches red/cyan under the pointer. Always shown
   on touch screens. */
.js-like-item:has(.g3d-remove-form){perspective:500px}
.g3d-remove-form{position:absolute;top:6px;right:6px;z-index:20;margin:0}
.g3d-remove{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;background:rgba(7,7,7,.72);backdrop-filter:blur(4px);color:#f6f1e8;cursor:pointer;
  transform:translateZ(-60px) scale(.7);opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .2s,background .2s,border-color .2s}
.g3d-remove span,.g3d-remove span::before{position:absolute;width:14px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.g3d-remove span::before{content:"";inset:0;transform:rotate(90deg)}
.js-like-item:hover .g3d-remove,.g3d-remove:focus-visible{transform:translateZ(18px) scale(1);opacity:1}
.g3d-remove:hover,.g3d-remove:focus-visible{background:#ff2a3c;border-color:#ff2a3c;outline:none}
.g3d-remove:hover span,.g3d-remove:focus-visible span{box-shadow:-2px 0 0 #16e0ff,2px 0 0 #fbbf24;animation:g3d-remove-glitch .4s steps(2) infinite}
@keyframes g3d-remove-glitch{0%{transform:rotate(45deg) translate(-1px,0)}50%{transform:rotate(45deg) translate(1px,1px)}100%{transform:rotate(45deg)}}
@media (hover:none){.g3d-remove{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.g3d-remove{transition:none}.g3d-remove:hover span{animation:none}}