/* ASTROMER CINEMA / imposing 92-film shuffled screen above every thumbnail.
 * Artist-approved grayscale; never crop the original film aspect ratio. */
#motion .astro-cinema-screen{position:relative;isolation:isolate;width:100%;margin:clamp(34px,5vw,80px) 0 clamp(50px,7vw,112px);color:#f0f5f5}
#motion .astro-cinema-screen::before{content:"";position:absolute;inset:-30px -20px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,rgba(203,219,231,.12),transparent 75%);filter:blur(22px)}
#motion .astro-cinema-screen-top,#motion .astro-cinema-screen-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 2px;border-top:1px solid rgba(225,238,242,.3)}
#motion .astro-cinema-screen-foot{border-top:none;border-bottom:1px solid rgba(225,238,242,.3);padding:18px 3px 23px}
#motion .astro-cinema-screen-kicker,#motion .astro-cinema-screen-count,#motion .astro-cinema-screen-small{font:400 10px/1.4 'Space Grotesk',Arial,sans-serif;letter-spacing:.22em;color:#b4c3c7}
#motion .astro-cinema-screen-count{font-variant-numeric:tabular-nums}
#motion .astro-cinema-screen-stage{position:relative;width:100%;height:clamp(520px,76svh,990px);min-height:520px;overflow:hidden;isolation:isolate;border:1px solid rgba(228,244,249,.42);background:#030507;box-shadow:0 30px 100px #000b,0 0 0 1px #fff1}
#motion .astro-cinema-screen-backdrop{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 52% 46%,#242d34 0%,#0b1014 49%,#020406 85%)}
#motion .astro-cinema-screen-backdrop::before{content:"";position:absolute;inset:-10%;opacity:.45;background:radial-gradient(ellipse at 50% 45%,transparent 14%,rgba(255,255,255,.035) 30%,transparent 35%,rgba(255,255,255,.03) 55%,transparent 58%)}
#motion .astro-cinema-screen-video{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;display:block;max-width:none;filter:grayscale(1) contrast(1.12) brightness(.92)!important}
#motion .astro-cinema-screen-line{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,#f5ffffb8,transparent) 0 0/240% 1px no-repeat,linear-gradient(270deg,transparent,#d9e8ef8a,transparent) 100% 100%/240% 1px no-repeat;animation:astro-cinema-strokes 10s ease-in-out infinite}
@keyframes astro-cinema-strokes{0%,12%{background-position:210% 0,-210% 100%;opacity:.2}42%,65%{opacity:.75}91%,100%{background-position:-210% 0,210% 100%;opacity:.18}}
#motion .astro-cinema-screen-watermark{position:absolute;top:32px;left:33px;z-index:3;color:rgba(255,255,255,.78);font:200 clamp(25px,3vw,47px)/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.13em;text-shadow:0 0 28px #000}
#motion .astro-cinema-screen-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:clamp(26px,4.5vw,68px);background:linear-gradient(to bottom,rgba(0,0,0,.18),transparent 20%,transparent 44%,rgba(0,0,0,.52) 77%,rgba(0,0,0,.92) 100%)}
#motion .astro-cinema-screen-overlay>*{pointer-events:auto}
#motion .astro-cinema-screen-info{min-width:0;max-width:72%}
#motion .astro-cinema-screen-eyebrow{display:block;color:#d8e3e8;font:400 10px/1.4 'Space Grotesk',Arial,sans-serif;letter-spacing:.23em;margin-bottom:19px}
#motion .astro-cinema-screen-title{color:#f2f6f6;font:300 clamp(36px,5vw,87px)/.98 'Space Grotesk',Arial,sans-serif;letter-spacing:-.065em;margin:0 0 14px;overflow-wrap:anywhere;max-width:850px}
#motion .astro-cinema-screen-subtitle{color:#b8c6cb;font:400 10px/1.5 'Space Grotesk',Arial,sans-serif;letter-spacing:.21em;margin:0}
#motion .astro-cinema-screen-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-bottom:4px}
#motion .astro-cinema-screen-control{width:50px;height:50px;display:grid;place-items:center;padding:0;border:1px solid rgba(233,245,248,.65);background:rgba(5,9,12,.65);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#f0f6f8;font:400 22px Arial,sans-serif;cursor:pointer;transition:transform .27s,background .27s,color .27s,border-color .27s}
#motion .astro-cinema-screen-main{width:58px;height:58px;color:#10171a;background:#ebf0f0;font-size:23px}
#motion .astro-cinema-screen-control:hover,#motion .astro-cinema-screen-control:focus-visible{background:#f5fafa;color:#0b1012;transform:translateY(-3px);border-color:white}
#motion .astro-cinema-screen-control:focus-visible{outline:2px solid #fff;outline-offset:4px}
#motion .astro-cinema-screen-seek{position:absolute;z-index:6;bottom:0;inset-inline:0;height:4px;background:#eaf3f634;pointer-events:none}
#motion .astro-cinema-screen-seek-fill{height:100%;width:0;background:#f7fafa;box-shadow:0 0 14px #fff8}
#motion .astro-cinema-screen-cue{position:absolute;z-index:5;inset-inline:0;top:50%;transform:translateY(-50%);text-align:center;padding:15px;font:400 11px/1.4 'Space Grotesk',Arial,sans-serif;letter-spacing:.18em;color:#e4f0f2;pointer-events:none;text-shadow:0 0 15px black}
#motion .astro-cinema-screen-stage[data-state="playing"] .astro-cinema-screen-cue,#motion .astro-cinema-screen[data-state="playing"] .astro-cinema-screen-cue{display:none}
#motion .astro-cinema-screen[data-state="error"] .astro-cinema-screen-cue{background:#0a0d10bb}
#motion .astro-cinema-screen-stage:fullscreen{height:100svh!important;width:100vw!important;border:none}
#motion .astro-cinema-screen-stage:fullscreen .astro-cinema-screen-overlay{padding:5vw}
@media(max-width:1000px){
 #motion .astro-cinema-screen-stage{height:clamp(510px,64svh,740px)}
 #motion .astro-cinema-screen-info{max-width:70%}
 #motion .astro-cinema-screen-title{font-size:clamp(32px,5.2vw,62px)}
 #motion .astro-cinema-screen-overlay{padding:28px}
}
@media(max-width:700px){
 #motion .astro-cinema-screen{margin:40px 0 65px}
 #motion .astro-cinema-screen-stage{height:clamp(480px,73svh,740px);min-height:480px}
 #motion .astro-cinema-screen-kicker,#motion .astro-cinema-screen-count,#motion .astro-cinema-screen-small{font-size:8px;letter-spacing:.1em}
 #motion .astro-cinema-screen-top{gap:5px}
 #motion .astro-cinema-screen-watermark{top:18px;left:20px;font-size:29px}
 #motion .astro-cinema-screen-overlay{padding:23px 18px 24px;align-items:flex-end;flex-direction:column;justify-content:flex-end}
 #motion .astro-cinema-screen-info{max-width:100%;width:100%}
 #motion .astro-cinema-screen-title{font-size:clamp(30px,7vw,48px)}
 #motion .astro-cinema-screen-eyebrow{font-size:8px;margin-bottom:9px}
 #motion .astro-cinema-screen-subtitle{font-size:9px;letter-spacing:.12em}
 #motion .astro-cinema-screen-actions{align-self:flex-start;margin:17px 0 0;gap:8px}
 #motion .astro-cinema-screen-control{width:43px;height:43px;font-size:20px}
 #motion .astro-cinema-screen-main{width:47px;height:47px;font-size:20px}
 #motion .astro-cinema-screen-cue{font-size:9px}
}
@media(max-width:410px){
 #motion .astro-cinema-screen-title{font-size:29px}
 #motion .astro-cinema-screen-overlay{padding:17px 14px 24px}
 #motion .astro-cinema-screen-control{width:39px;height:39px}
 #motion .astro-cinema-screen-main{width:43px;height:43px}
}
@media(prefers-reduced-motion:reduce){
 #motion .astro-cinema-screen-line{animation:none!important;opacity:.3}
 #motion .astro-cinema-screen-control{transition:none!important}
}


/* Compact cinema preview: the archive stays browsable without dominating the page. */
#motion .astro-cinema-screen{width:min(100%,640px);margin:14px auto 24px}
#motion .astro-cinema-screen-top{padding:8px 2px;gap:10px}
#motion .astro-cinema-screen-foot{padding:8px 3px 10px}
#motion .astro-cinema-screen-stage{height:auto;min-height:0;aspect-ratio:16/9;box-shadow:0 12px 36px #0009}
#motion .astro-cinema-screen-watermark{top:14px;left:16px;font-size:22px}
#motion .astro-cinema-screen-overlay{padding:16px}
#motion .astro-cinema-screen-info{max-width:76%}
#motion .astro-cinema-screen-eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:6px}
#motion .astro-cinema-screen-title{font-size:clamp(18px,2.4vw,30px);line-height:1.05;margin:0 0 6px;max-width:500px}
#motion .astro-cinema-screen-subtitle{font-size:8px;letter-spacing:.14em}
#motion .astro-cinema-screen-actions{gap:6px}
#motion .astro-cinema-screen-control{width:34px;height:34px;font-size:17px}
#motion .astro-cinema-screen-main{width:38px;height:38px;font-size:18px}
@media(max-width:700px){
 #motion .astro-cinema-screen{width:100%;margin:12px auto 20px}
 #motion .astro-cinema-screen-stage{height:auto;min-height:0;aspect-ratio:16/9}
 #motion .astro-cinema-screen-top{padding:7px 2px}
 #motion .astro-cinema-screen-foot{padding:7px 3px 8px}
 #motion .astro-cinema-screen-overlay{padding:11px;align-items:flex-end;flex-direction:row;justify-content:space-between;gap:8px}
 #motion .astro-cinema-screen-info{max-width:76%;width:auto}
 #motion .astro-cinema-screen-watermark{top:10px;left:11px;font-size:19px}
 #motion .astro-cinema-screen-title{font-size:clamp(15px,4.4vw,20px);line-height:1.05;margin:0 0 4px}
 #motion .astro-cinema-screen-eyebrow{font-size:7px;letter-spacing:.1em;margin-bottom:4px}
 #motion .astro-cinema-screen-subtitle{font-size:7px;letter-spacing:.08em}
 #motion .astro-cinema-screen-actions{align-self:flex-end;margin:0;gap:5px}
 #motion .astro-cinema-screen-control{width:29px;height:29px;font-size:15px}
 #motion .astro-cinema-screen-main{width:33px;height:33px;font-size:16px}
}
@media(max-width:410px){
 #motion .astro-cinema-screen-overlay{padding:8px}
 #motion .astro-cinema-screen-title{font-size:15px}
 #motion .astro-cinema-screen-control{width:27px;height:27px}
 #motion .astro-cinema-screen-main{width:30px;height:30px}
}