/* Shop-sign Work cards (trial, ?signs): each project's LED title is a coloured sign that hums dim and flickers on
   when its card is hovered; the card's glow takes the same colour. Day: deeper inks so the diodes read on paper,
   lit by a coloured halo. Night: bright tubes. Scrolling leaves a short light burn smeared from the render's edge. */
html.signs .gentry[data-id="a01"]{--sc:255,158,52;--sd:214,104,0}
html.signs .gentry[data-id="a02"]{--sc:110,255,168;--sd:16,150,84}
html.signs .gentry[data-id="a03"]{--sc:255,226,184;--sd:176,118,44}
html.signs .gentry[data-id="a04"]{--sc:255,78,52;--sd:222,44,22}
html.signs .gentry[data-id="a05"]{--sc:92,212,255;--sd:8,140,200}
html.signs .gentry[data-id="a06"]{--sc:255,128,178;--sd:206,56,120}
html.signs .gentry .gentry-title{--led-color:rgb(var(--sc))}
html.signs.light:not(.night-zone) .gentry .gentry-title{--led-color:rgb(var(--sd))}

/* rest: the sign hums dim; hover/focus: it flickers on and holds */
html.signs .gentry .gentry-title .led-core{opacity:.6;transition:opacity .45s var(--ease)}
html.signs .gentry .gentry-title .led-halo{opacity:.18;transition:opacity .45s var(--ease)}
html.signs.light:not(.night-zone) .gentry .gentry-title .led-core{opacity:.72}
html.signs .gentry:is(:hover,:focus-visible) .gentry-title :is(.led-core,.led-halo){animation:sign-flick .6s steps(1) forwards}
@keyframes sign-flick{0%{opacity:.95}9%{opacity:.2}18%{opacity:1}27%{opacity:.35}38%{opacity:1}50%{opacity:.7}62%,100%{opacity:1}}
html.signs .gentry .gentry-title{color:rgb(var(--sc))}
html.signs.light:not(.night-zone) .gentry .gentry-title{color:rgb(var(--sd))}

/* the card glows in its sign colour, and switches on with the sign */
html.signs .gentry .led-card-frame{--led-glow:rgba(var(--sc),.5)}
html.signs.light:not(.night-zone) .gentry .led-card-frame{--led-glow:rgba(var(--sd),.42)}
html.signs .gentry:is(:hover,:focus-visible) .led-card-halo{animation:sign-flick .6s steps(1) forwards;opacity:1}
/* rest: the card sits dim like an unlit shopfront, so switching it on reads as a real flash */
html.signs .gentry .gentry-plate img{filter:grayscale(.36) contrast(1.02) brightness(.77);transition:filter .5s var(--ease),transform .9s var(--ease)}
html.signs.light:not(.night-zone) .gentry .gentry-plate img{filter:grayscale(.35) contrast(1.02) brightness(.88)}
html.signs .gentry .led-card-halo{animation:none;opacity:.1}
html.signs .gentry:is(:hover,:focus-visible) .gentry-plate img{animation:sign-flick-img .6s steps(1) forwards}
html.signs .gentry:is(:hover,:focus-visible) .led-card-screen{opacity:.25;transition:opacity .3s}
html.signs .gentry .gentry-plate{transition:box-shadow .45s var(--ease)}
html.signs .gentry:is(:hover,:focus-visible) .gentry-plate{box-shadow:0 0 0 1px rgba(var(--sc),.6),0 0 60px rgba(var(--sc),.32),0 40px 90px -30px rgba(var(--sc),.38)}
html.signs.light:not(.night-zone) .gentry:is(:hover,:focus-visible) .gentry-plate{box-shadow:0 0 0 1px rgba(var(--sd),.55),0 0 50px rgba(var(--sd),.26),0 40px 90px -30px rgba(var(--sd),.3)}
@keyframes sign-flick-img{0%{filter:grayscale(0) brightness(1.1)}9%{filter:grayscale(.4) brightness(.6)}18%{filter:grayscale(0) brightness(1.18)}27%{filter:grayscale(.3) brightness(.7)}38%{filter:grayscale(0) brightness(1.15)}50%{filter:grayscale(0) brightness(.95)}62%,100%{filter:grayscale(0) contrast(1.04) brightness(1.1)}}

/* light burn: a slit-scan smear of the render's leading edge, streaking behind the card while it moves */
html.signs .sign-burn{position:absolute;left:0;right:0;height:var(--burn-h,0px);pointer-events:none;z-index:2;opacity:var(--burn-a,0);
  /* each streak fades along its own length (drawn in the canvas); the ends of the band fade out so there are no hard corners */
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
html.signs .sign-burn canvas{display:block;width:100%;height:100%;image-rendering:pixelated;filter:saturate(1.5) brightness(1.15)}
html.signs:not(.light) .sign-burn,html.signs.night-zone .sign-burn,html.signs .night .sign-burn{mix-blend-mode:screen}
html.signs.light:not(.night-zone) .sign-burn canvas{filter:saturate(1.6) brightness(1.02)}
/* each burn starts a little inside the screen (--burn-in) so the light pours out of the LEDs rather than from behind the card */
html.signs .sign-burn.is-down{top:calc(100% - var(--burn-in,0px))}
html.signs .sign-burn.is-up{bottom:calc(100% - var(--burn-in,0px))}
@media (prefers-reduced-motion:reduce){html.signs .gentry:is(:hover,:focus-visible) :is(.led-core,.led-halo,.led-card-halo){animation:none;opacity:1}html.signs .gentry:is(:hover,:focus-visible) .gentry-plate img{animation:none;filter:grayscale(0) brightness(1.1)}html.signs .sign-burn{display:none}}

/* Light mode (Jun: "only light mode looks violent"): the same switch-on, but softer. */
html.signs.light:not(.night-zone) .gentry:is(:hover,:focus-visible) .gentry-title :is(.led-core,.led-halo){animation-name:sign-flick-day}
@keyframes sign-flick-day{0%{opacity:.9}9%{opacity:.55}18%{opacity:1}27%{opacity:.65}38%{opacity:1}50%{opacity:.85}62%,100%{opacity:1}}
html.signs.light:not(.night-zone) .gentry:is(:hover,:focus-visible) .gentry-plate img{animation-name:sign-flick-img-day}
@keyframes sign-flick-img-day{0%{filter:grayscale(.1) brightness(1.02)}9%{filter:grayscale(.3) brightness(.9)}18%{filter:grayscale(0) brightness(1.04)}27%{filter:grayscale(.25) brightness(.93)}38%{filter:grayscale(0) brightness(1.03)}50%{filter:grayscale(.05) brightness(.98)}62%,100%{filter:grayscale(0) contrast(1.03) brightness(1.03)}}
html.signs.light:not(.night-zone) .gentry:is(:hover,:focus-visible) .led-card-halo{animation:none;opacity:.55}
html.signs.light:not(.night-zone) .gentry:is(:hover,:focus-visible) .gentry-plate{box-shadow:0 0 0 1px rgba(var(--sd),.35),0 0 36px rgba(var(--sd),.14),0 30px 70px -36px rgba(var(--sd),.18)}

/* Now and then a sign stutters on its own, a gentler blink than the hover switch-on (both modes). */
html.signs .gentry.sign-blink:not(:hover):not(:focus-visible) .gentry-title :is(.led-core,.led-halo){animation:sign-blink .75s steps(1)}
@keyframes sign-blink{0%{opacity:.85}14%{opacity:.45}28%{opacity:.95}46%{opacity:.55}64%{opacity:.8}100%{opacity:.6}}
html.signs .gentry.sign-blink:not(:hover):not(:focus-visible) .gentry-plate img{animation:sign-blink-img .75s steps(1)}
@keyframes sign-blink-img{0%{filter:grayscale(.2) brightness(.9)}14%{filter:grayscale(.4) brightness(.7)}28%{filter:grayscale(.15) brightness(.95)}46%{filter:grayscale(.4) brightness(.72)}64%{filter:grayscale(.25) brightness(.86)}100%{filter:grayscale(.36) contrast(1.02) brightness(.77)}}
html.signs.light:not(.night-zone) .gentry.sign-blink:not(:hover):not(:focus-visible) .gentry-plate img{animation-name:sign-blink-img-day}
@keyframes sign-blink-img-day{0%{filter:grayscale(.3) brightness(.94)}14%{filter:grayscale(.4) brightness(.86)}28%{filter:grayscale(.25) brightness(.96)}46%{filter:grayscale(.4) brightness(.87)}64%{filter:grayscale(.3) brightness(.92)}100%{filter:grayscale(.35) contrast(1.02) brightness(.88)}}

/* The light burn is a night thing only. */
html.signs.light:not(.night-zone) .sign-burn{display:none}

/* Hero video as an LED screen: diode grid and the rolling refresh line, no flashes. */
html.signs .shero-led{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:16px;--led-px:3px}
html.signs .shero-led::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 46%,rgba(0,0,0,.34) 70%) 0 0/var(--led-px) var(--led-px)}
html.signs .shero-led::after{content:"";position:absolute;left:0;right:0;top:-60%;height:60%;background:linear-gradient(to bottom,transparent 0%,rgba(255,250,240,.12) 40%,rgba(255,255,255,.2) 50%,rgba(255,250,240,.12) 60%,transparent 100%);animation:led-card-roll 7.5s linear infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){html.signs .gentry.sign-blink :is(.led-core,.led-halo,img){animation:none!important}html.signs .shero-led::after{display:none}}

/* Full-colour sand lands first; this sign powers down to its existing rest.
   The retained home cover follows the fade until its normal release. */
html.signs .gentry{--sign-rest-photo:grayscale(.36) contrast(1.02) brightness(.77);--sign-rest-core:.6}
html.signs.light:not(.night-zone) .gentry{--sign-rest-photo:grayscale(.35) contrast(1.02) brightness(.88);--sign-rest-core:.72}
html.signs .gentry.sign-returning:not(.is-away) .gentry-plate :is(img,.home-cover-hold){animation:sign-return-photo 1s cubic-bezier(.2,.65,.3,1) both}
html.signs .gentry.sign-returning:not(.is-away) .gentry-title .led-core{animation:sign-return-core 1s ease-out both}
html.signs .gentry.sign-returning:not(.is-away) .gentry-title .led-halo{animation:sign-return-title-halo 1s ease-out both}
html.signs .gentry.sign-returning:not(.is-away) .led-card-halo{animation:sign-return-halo 1s ease-out both}
@keyframes sign-return-photo{from{filter:grayscale(0) contrast(1) brightness(1)}to{filter:var(--sign-rest-photo)}}
@keyframes sign-return-core{from{opacity:1}to{opacity:var(--sign-rest-core)}}
@keyframes sign-return-title-halo{from{opacity:1}to{opacity:.18}}
@keyframes sign-return-halo{from{opacity:1}to{opacity:.1}}
@media(prefers-reduced-motion:reduce){html.signs .gentry.sign-returning :is(img,.home-cover-hold,.led-core,.led-halo,.led-card-halo){animation:none!important}}