/* LED project screens. The photograph and its existing ::after shading stay intact.
   Only the rolling sheet's transform and the halo's opacity animate. */
.led-card-frame{
  --led-px:3px; --led-gap:rgba(14,11,7,.22);
  --led-band:rgba(255,250,240,.18); --led-edge:rgba(255,255,255,.28);
  --led-glow:rgba(var(--accent-rgb,228,199,158),.62);
  position:relative;display:block;z-index:0;border-radius:var(--r-md,6px);
}
html:not(.light) .led-card-frame,html.light.night-zone .led-card-frame{
  --led-gap:rgba(0,0,0,.36);--led-band:rgba(255,240,215,.20);
  --led-edge:rgba(255,240,215,.30);--led-glow:rgba(255,196,128,.64);
}
.led-card-frame>.gentry-plate{z-index:1;}
/* Jun: a little brighter, like a lit screen. Sand still samples the untouched photo. */
html .led-card-frame>.gentry-plate img{filter:grayscale(.1) contrast(1.03) brightness(1.07);}
html .gentry:is(:hover,:focus-visible) .led-card-frame>.gentry-plate img{filter:grayscale(.08) contrast(1.03) brightness(1.1);}
html:not(.light) .led-card-frame>.gentry-plate img{filter:grayscale(.05) brightness(1.04);}
.led-card-halo{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  box-shadow:0 0 60px 5px var(--led-glow);opacity:.3;
  animation:led-card-breathe var(--led-breathe,3.2s) cubic-bezier(.45,0,.55,1) var(--led-glow-phase,0s) infinite;
}
.led-card-screen{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit;
}
.led-card-screen::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 50%,transparent 46%,var(--led-gap) 70%) 0 0/var(--led-px) var(--led-px),
    repeating-linear-gradient(90deg,rgba(255,40,30,.04) 0 calc(var(--led-px)/3),rgba(40,255,90,.035) calc(var(--led-px)/3) calc(var(--led-px)*2/3),rgba(40,90,255,.04) calc(var(--led-px)*2/3) var(--led-px));
}
.led-card-screen::after{
  content:"";position:absolute;left:0;right:0;top:-60%;height:60%;
  background:linear-gradient(to bottom,transparent 0%,var(--led-band) 40%,var(--led-edge) 50%,var(--led-band) 60%,transparent 100%);
  animation:led-card-roll var(--led-period,6.5s) linear var(--led-phase,0s) infinite;
}
@keyframes led-card-roll{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,280%,0);}}
@keyframes led-card-breathe{0%,100%{opacity:.3;}50%{opacity:1;}}
.led-card-frame:not(.is-led-active) .led-card-halo,
.led-card-frame:not(.is-led-active) .led-card-screen::after,
body.story-open .led-card-halo,body.story-open .led-card-screen::after{animation-play-state:paused;}
.led-card-frame.is-led-near .led-card-halo{will-change:opacity;}
.led-card-frame.is-led-near .led-card-screen::after{will-change:transform;}
body.story-open .led-card-frame .led-card-halo,
body.story-open .led-card-frame .led-card-screen::after{will-change:auto;}
.gentry:is(.is-sanding,.is-away) .led-card-screen,
.gentry:is(.is-sanding,.is-away) .led-card-halo{visibility:hidden;}
@media(prefers-reduced-motion:reduce){
  .led-card-halo{animation:none!important;opacity:.25;will-change:auto!important;}
  .led-card-screen::after{display:none;animation:none!important;will-change:auto!important;}
}