/* ============================================================================
   XXVI · task 077 · the LIVE cluster (corner077.js), look B of task 074: one
   framed capsule  [ ← OPTIMIZATION | ● LIVE | RESULTS → ]
   Its own layer, fixed, under the film's section label, which stands under
   the EN/HE pair. The order from the top: the pair (28-51 px; phone 19-42),
   the label (64-76; phone 54-66), this cluster (84-107; phone 72-98), the
   film (from 115; phone 103). Its outer edge is the pair's (--cn-edge, set
   from the pair): right in English, left in Hebrew. It stands under the
   masthead (110) and under the jump's veil (109).
   Every inner class is x77-…: the page's own css styles .st, .k, .ln, .nm.
   ========================================================================== */
.cn077{ position:fixed; z-index:108; top:84px; inset-inline-end:var(--cn-edge, 63px); pointer-events:none; }
.cn077 .x77-nv{
  display:flex; align-items:center; white-space:nowrap; box-sizing:border-box; height:23px;
  font-family:var(--mono); font-size:9.5px; line-height:1; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--champ-line, rgba(201,168,118,.32)); border-radius:2px;
  background:rgba(8,9,11,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .6s var(--e15, ease);
}
.cn077.on .x77-nv{ opacity:1; pointer-events:auto; }
.cn077 .x77-sg{ height:100%; display:inline-flex; align-items:center; }
.cn077 .x77-sg + .x77-sg{ border-inline-start:1px solid rgba(201,168,118,.2); }
/* LIVE in the middle, "you are here": the same Latin word in both languages */
.cn077 .x77-lv{ gap:8px; padding:0 12px; background:var(--champ-wash, rgba(201,168,118,.13)); color:var(--champ); }
.cn077 .x77-lw{ font-family:var(--mono); font-weight:500; color:var(--champ); letter-spacing:.22em; }

/* the live dot: 5 px of champagne and a ring that leaves it every 1.8 s (as in 070) */
.cn077 .x77-dt{ position:relative; width:5px; height:5px; border-radius:50%; background:#E2C795; box-shadow:0 0 6px rgba(226,199,149,.55); flex:none; }
.cn077 .x77-dt:after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(226,199,149,.7); opacity:0; }
/* task 004 (I18): three beats each time a film comes up, then a still, lit dot (was: for as long as the film is up) */
.cn077.on .x77-dt{ animation:cn077beat 1.8s ease-in-out 3; }
.cn077.on .x77-dt:after{ animation:cn077ring 1.8s cubic-bezier(.2,.6,.3,1) 3; }
@keyframes cn077ring{ 0%{ transform:scale(1); opacity:.8; } 70%,100%{ transform:scale(3.2); opacity:0; } }
@keyframes cn077beat{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* a neighbour film */
.cn077 .x77-go{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:0 12px; height:100%;
  color:rgba(233,234,237,.58); transition:color .3s var(--e15, ease); -webkit-tap-highlight-color:transparent; }
.cn077 .x77-go .x77-ar{ color:var(--champ); font-family:var(--mono); letter-spacing:0; transition:translate .3s var(--e15, ease); }
.cn077 .x77-go:focus-visible{ color:var(--ink, #E9EAED); }
/* task 004 (I6): hover only where there is a real hover, so a tap does not leave the arrow moved and lit */
@media (hover:hover) and (pointer:fine){
  .cn077 .x77-go:hover{ color:var(--ink, #E9EAED); }
  .cn077 .x77-go[data-d="r"]:hover .x77-ar{ translate:2px 0; }
  .cn077 .x77-go[data-d="l"]:hover .x77-ar{ translate:-2px 0; }
}
/* task 004 (I9): the target is 44 px high, the look is unchanged */
.cn077 .x77-go{ position:relative; }
.cn077 .x77-go:after{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; translate:0 -50%; }
.cn077 .x77-go:focus-visible{ outline:1px solid rgba(201,168,118,.6); outline-offset:2px; border-radius:2px; }

/* the phone: one row under the label, 26 px high */
@media (max-width:820px){
  .cn077{ top:64px; } /* task 088 item 1: was 72 */
  .cn077 .x77-nv{ height:26px; font-size:9px; letter-spacing:.18em; }
  .cn077 .x77-go, .cn077 .x77-lv{ padding:0 10px; }
}

/* the jump: the screen dims to the page's ground, under the masthead (110), for a quarter second */
.cn077-veil{ position:fixed; inset:0; z-index:109; background:var(--ground, #08090B); opacity:0; pointer-events:none; transition:opacity .26s var(--e15, ease); }
.cn077-veil.on{ opacity:.94; pointer-events:auto; }

/* task 079 · item 7 (David, way A): the film just left, after a crossing - its name in champagne for 2 s (corner077.js
   takes the class off; the colour eases back in .3 s), and its arrow steps 2 px toward its side once */
.cn077 .x77-go.x77-came{ color:var(--champ); }
.cn077 .x77-go.x77-came[data-d="r"] .x77-ar{ animation:x77stepR 1.1s var(--e15, ease) 1; }
.cn077 .x77-go.x77-came[data-d="l"] .x77-ar{ animation:x77stepL 1.1s var(--e15, ease) 1; }
@keyframes x77stepR{ 0%,100%{ translate:0 0; } 40%{ translate:2px 0; } }
@keyframes x77stepL{ 0%,100%{ translate:0 0; } 40%{ translate:-2px 0; } }

@media (prefers-reduced-motion: reduce){
  .cn077, .cn077 *, .cn077-veil{ animation:none !important; transition:none !important; }
  /* task 004 (I7): the cluster and the veil still fade, in 200 ms */
  .cn077 .x77-nv, .cn077-veil{ transition:opacity .2s !important; }
}