/* The open-air cinema: the night scene, the screen, the board and the programme.
   Used two ways: over the walk (index.html loads it when the cinema opens) and as its own pages in cinema/,
   written by johnstoszkowski-rebrand/cinema/build.py. The films themselves play through assets/film.js. */
.cinema{--text:'Barlow',system-ui,sans-serif;--label:'Barlow Semi Condensed','Barlow',sans-serif;--display:'Barlow Condensed','Barlow',sans-serif;--ease:cubic-bezier(.2,.75,.15,1)}
.cinema{position:fixed;inset:0;z-index:2800;overflow:hidden;color:#f3eee3;font-family:var(--text);
  background:radial-gradient(140% 75% at 50% 108%,#5a3550 0%,#2a2a4a 34%,#121428 64%,#05060d 100%);opacity:0;transition:opacity 1.1s ease}
.cinema.in{opacity:1}
.cinema .stars,.cinema .stars2{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;opacity:0;transition:opacity 2.2s ease .5s}
.cinema.in .stars,.cinema.in .stars2{opacity:1}
.cinema.in .stars2{animation:cine-twinkle 4.6s ease-in-out 2.6s infinite alternate}
@keyframes cine-twinkle{from{opacity:1}to{opacity:.25}}
.cinema .moon{position:absolute;right:9%;top:11%;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fffaf0,#e9e2cf 60%,#cfc7b2);
  box-shadow:0 0 30px 8px rgba(255,248,225,.16);opacity:0;transition:opacity 2s ease .6s}
.cinema.in .moon{opacity:.9}
.cinema .festoon{position:absolute;left:0;top:0;width:100%;height:150px;pointer-events:none}
.cinema .festoon path{fill:none;stroke:#141420;stroke-width:1.6}
.cinema .bulb{fill:#4a3b2a;transition:fill .25s}
.cinema .glow{fill:url(#cineGlow);opacity:0;transition:opacity .35s}
.cinema.lit .bulb{fill:#ffe1a3}
.cinema.lit .glow{opacity:1;animation:cine-flick 5s ease-in-out infinite}
@keyframes cine-flick{0%,100%{opacity:1}47%{opacity:1}50%{opacity:.55}53%{opacity:1}}
.cinema .cine-ground{position:absolute;left:0;right:0;bottom:0;width:100%;height:26vh;pointer-events:none}   /* an svg sizes itself from its height unless told its width */
.cinema .cine-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:118px 20px 24vh}
.cinema .scr{--sw:min(70vw,920px,calc((100vh - 440px) * 16 / 9));position:relative;width:var(--sw);aspect-ratio:16/9;background:#26272f;
  box-shadow:0 0 0 7px #ece6d8,0 0 0 9px #191920;transition:background-color 1.2s,box-shadow 1.4s}
.cinema .scr::before,.cinema .scr::after{content:"";position:absolute;top:-9px;width:9px;height:calc(100% + 9px + 26vh);background:linear-gradient(90deg,#2a2018,#4a3826 45%,#21180f);z-index:-1}
.cinema .scr::before{left:-30px}
.cinema .scr::after{right:-30px}
.cinema .scr .poster{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:saturate(.75) brightness(.7);transition:opacity 1.4s}
.cinema .scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .9s}
.cinema.projector .scr{background:#d9d4c7;box-shadow:0 0 0 7px #ece6d8,0 0 0 9px #191920,0 0 90px 18px rgba(255,236,200,.16)}
.cinema.projector .scr .poster{opacity:1}
.cinema.rolling .scr iframe{opacity:1}
.cinema .beam{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 1.6s ease;
  background:linear-gradient(to top,rgba(255,240,210,.22),rgba(255,240,210,.05) 70%,rgba(255,240,210,.02))}
.cinema.projector .beam{opacity:1}
.cinema .mote{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(255,246,225,.8);opacity:0;animation:cine-mote linear infinite}
.cinema.projector .mote{opacity:1}
@keyframes cine-mote{from{transform:translate(0,0)}to{transform:translate(var(--dx),-140px)}}
.cinema .cine-board{position:absolute;left:5%;bottom:6vh;z-index:2;width:250px;padding:16px 18px 18px;background:#121212;border-radius:4px;transform:rotate(-1.5deg);
  box-shadow:0 0 0 4px #2a2a2a,0 18px 30px rgba(0,0,0,.6);opacity:0;transition:opacity .8s ease 1.2s}
.cinema.in .cine-board{opacity:1}
.cinema .cine-board{outline:3px dotted #ffe1a3;outline-offset:6px}
.cinema .cine-board small{display:block;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.3em;color:#ffcf7a}
.cinema .cine-board b{display:block;margin:.35rem 0 .25rem;font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.cinema .cine-board span{display:block;font-family:var(--label);font-size:.9rem;color:#cfcabe}
.cinema .cine-board i{display:block;margin-top:.7rem;font-family:'Caveat','Barlow Semi Condensed',cursive;font-style:normal;font-weight:600;font-size:1.3rem;line-height:1.15;color:#ffe9b8}
.cinema .cine-board em{display:block;margin-top:.5rem;font-family:var(--label);font-style:italic;font-size:.78rem;color:#8f8a80}
.cinema .cine-x{position:absolute;right:18px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:.5rem;min-height:42px;padding:0 .95rem;border:1.5px solid rgba(243,238,227,.55);border-radius:22px;
  background:rgba(10,10,20,.4);color:#f3eee3;font-family:var(--label);font-weight:600;font-size:.92rem;cursor:pointer;transition:background-color .2s,border-color .2s}
.cinema .cine-x:hover,.cinema .cine-x:focus-visible{background:rgba(243,238,227,.14);border-color:#f3eee3}
.cinema .cine-x:focus-visible{outline:2px solid #ffcf7a;outline-offset:3px}
@media (max-width:1000px){
  .cinema .cine-stage{justify-content:flex-start;padding:128px 14px 40px;overflow-y:auto}
  .cinema .cine-board{order:1}
  .cinema .cine-prog{order:3}
  .cinema .scr{--sw:min(92vw,calc((100vh - 360px) * 16 / 9))}
  .cinema .scr::before{left:-16px}.cinema .scr::after{right:-16px}
  .cinema .cine-board{position:relative;left:auto;bottom:auto;margin-top:40px;width:min(300px,86vw)}
  .cinema .moon{width:30px;height:30px;right:7%;top:12%}
}
@media (prefers-reduced-motion:reduce){
  .cinema.lit .glow,.cinema.in .stars2,.cinema .mote{animation:none}
  .cinema,.cinema *{transition-duration:.01s !important;transition-delay:0s !important}
}
.cinema .cine-board i:empty{display:none}
/* why it's showing: a caption under the screen, kept clear of the board and the programme either side */
.cinema .cine-why{position:relative;z-index:2;margin-top:22px;width:min(var(--sw,600px),600px,calc(90vw - 580px));text-align:center;opacity:0;transition:opacity .8s ease 1.3s}
.cinema.in .cine-why{opacity:1}
.cinema .cine-why small{display:block;margin-bottom:.4rem;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.3em;color:#ffcf7a}
.cinema .cine-why p{margin:0;font-family:var(--text);font-style:italic;font-size:.95rem;line-height:1.5;color:#ece6d8;text-wrap:balance}
.cinema .cine-why p:empty{display:none}
.cinema .cine-prog{position:absolute;right:5%;bottom:6vh;z-index:2;opacity:0;transition:opacity .8s ease 1.4s}
.cinema.in .cine-prog{opacity:1}
.cinema .cine-prog small{display:block;margin:0 0 .5rem;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.3em;color:#ffcf7a}
.cinema .cine-reel{display:flex;gap:12px}
.cinema .cine-tile{display:block;width:132px;padding:0;border:0;background:none;color:#f3eee3;cursor:pointer;text-align:left;font:inherit;text-decoration:none}
.cinema .cine-tile img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:3px solid #ece6d8;filter:brightness(.6) saturate(.7);transition:filter .3s,transform .3s var(--ease),box-shadow .3s}
.cinema .cine-tile span{display:block;margin-top:.35rem;font-family:var(--label);font-weight:600;font-size:.82rem;color:#cfcabe;transition:color .3s}
.cinema .cine-tile:hover img,.cinema .cine-tile:focus-visible img{filter:none;transform:translateY(-3px)}
.cinema .cine-tile[aria-current="true"] img{filter:none;box-shadow:0 0 0 2px #ffcf7a,0 0 26px 4px rgba(255,207,122,.35)}
.cinema .cine-tile[aria-current="true"] span{color:#ffcf7a}
.cinema .cine-tile:focus-visible{outline:2px solid #ffcf7a;outline-offset:4px}
/* Screen 1 (my films, through assets/film.js) and Screen 2 (scenes from the telly) */
.cinema .scr .cine-film{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .9s ease}
.cinema.rolling .scr .cine-film{opacity:1}
.cinema .cine-head{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .75rem;margin:0 0 .55rem}
.cinema .cine-tabs{display:flex;gap:6px}
.cinema .cine-tabs button{min-height:30px;padding:0 .8rem;border:1.5px solid rgba(243,238,227,.35);border-radius:99px;background:none;color:#cfcabe;cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;transition:background-color .2s,color .2s,border-color .2s}
.cinema .cine-tabs button:hover{border-color:#f3eee3;color:#f3eee3}
.cinema .cine-tabs button[aria-selected="true"]{background:#ffcf7a;border-color:#ffcf7a;color:#121212}
.cinema .cine-tabs button:focus-visible{outline:2px solid #ffcf7a;outline-offset:3px}
.cinema .cine-sub{margin:0;font-family:var(--label);font-style:italic;font-weight:500;font-size:.82rem;color:#cfcabe}
.cinema .cine-tile.soon{cursor:default}
.cinema .cine-tile.soon img,.cinema .cine-tile.soon:hover img{filter:grayscale(1) brightness(.42);border-style:dashed;transform:none}
.cinema .cine-tile.soon span{color:#8f8a80}
.cinema .cine-tile.soon i{display:block;font-family:var(--label);font-style:italic;font-size:.72rem;color:#8f8a80}
/* while one of my films plays on a small screen, the words on the cards turn up under it, in place of "what it's about" */
.cinema .cine-why .fm-note{min-height:3.4em;padding:0;font-size:.95rem;line-height:1.45;color:#ece6d8}
.cinema .cine-why .fm-note p{margin:0;font-style:normal}
.cinema .cine-why .fm-note b{display:block;margin:0 0 .25rem;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#ffcf7a}
.cinema .cine-why .fm-note em{font-style:italic}
.cinema:not(.fm-playing) .cine-why .fm-note{display:none}
.cinema.fm-playing .cine-why:has(.fm-note.narrow) > small,.cinema.fm-playing .cine-why:has(.fm-note.narrow) > p{display:none}
@media (max-width:1100px){.cinema .cine-tile{width:104px}}
@media (max-width:1000px){
  .cinema .cine-why{order:2;width:min(340px,92vw);margin-top:28px}   /* after the desktop rule above, so it wins */
  .cinema.fm-playing .cine-why{order:0;margin-top:18px}   /* while one of my films plays, its words sit straight under the picture */
  .cinema .cine-prog{position:relative;right:auto;bottom:auto;margin-top:26px;width:min(340px,92vw)}
  .cinema .cine-reel{gap:8px}
  .cinema .cine-tile{width:auto;flex:1 1 0;min-width:0}
}

/* on its own page the way out is back to the map, not lights up */
.cinema.page .cine-x svg.x{display:none}
.cinema:not(.page) .cine-x svg.arrow{display:none}
.cinema .cine-x svg.arrow{width:18px;height:10px}
/* a film made full screen inside the page has to sit above the board, the captions and the button, which share its layer */
html.fm-maxed .cinema .scr .cine-film{z-index:50}
.cinema .moon[hidden]{display:none}
/* a phone held sideways (or any short window): a proper-sized screen, with the board and programme scrolling beneath it */
@media (max-height:520px){
  .cinema .cine-stage{justify-content:flex-start;padding:60px 14px 40px;overflow-y:auto}
  .cinema .scr{--sw:min(80vw,calc((100vh - 76px) * 16 / 9))}
  .cinema .scr::before{left:-16px}.cinema .scr::after{right:-16px}
  .cinema .cine-board{order:1;position:relative;left:auto;bottom:auto;margin-top:34px;width:min(340px,86vw)}
  .cinema .cine-why{order:2;width:min(440px,92vw);margin-top:26px}
  .cinema.fm-playing .cine-why{order:0;margin-top:16px}
  .cinema .cine-prog{order:3;position:relative;right:auto;bottom:auto;margin-top:24px;width:min(440px,92vw)}
  .cinema .cine-reel{gap:8px}
  .cinema .cine-tile{width:auto;flex:1 1 0;min-width:0}
  .cinema .moon{width:30px;height:30px}
}
/* when one of my films has finished, the way to watch it again is under the screen, not on the end card */
.cinema .cine-again{display:none;align-items:center;gap:.45rem;min-height:40px;margin:.85rem auto 0;padding:0 1.1rem 0 .9rem;border:0;border-radius:99px;background:#d11f78;color:#fff;cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.cinema .cine-again svg{width:.85rem;height:.85rem;fill:currentColor}
.cinema .cine-again:hover{background:#b0175f}
.cinema .cine-again:focus-visible{outline:2px solid #ffcf7a;outline-offset:3px}
.cinema.fm-done .cine-again{display:inline-flex}
@media (max-width:1000px),(max-height:520px){.cinema.fm-done .cine-why{order:0;margin-top:18px}}
.cinema.fm-done .cine-why > small,.cinema.fm-done .cine-why > p{display:none}   /* finished: the slot under the screen is just the way to watch again */
.cinema.fm-done .cine-again{margin-top:0}