/* ============================================================
   PAGE — movies  (movies.html, modules/moviespage.js)
   A cinema feel: projector beam in the hero, a poster wall where
   each film gets a typographic poster (or its real one), then
   where and when cards.
   ============================================================ */

/* ---------- hero: dark theatre + a projector beam ---------- */
.cine-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,11vw,7.5rem) clamp(2.6rem,6vw,4rem);
  background:radial-gradient(120% 90% at 80% 0%, #1a2a20 0%, #0a100c 55%, #050806 100%);
  color:#EAF2E6;
}
.cine-hero .wrap{position:relative;z-index:2}
.cine-hero__beam{
  position:absolute;z-index:0;top:-20%;right:-10%;width:75%;height:160%;pointer-events:none;
  background:conic-gradient(from 212deg at 100% 0%, transparent 0deg, rgba(255,236,190,.16) 14deg, rgba(255,236,190,.05) 26deg, transparent 40deg);
  filter:blur(6px);animation:cine-flicker 5s ease-in-out infinite;
}
.cine-hero__dust{                                  /* specks floating in the beam */
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,240,200,.8), transparent),
    radial-gradient(1px 1px at 82% 52%, rgba(255,240,200,.7), transparent),
    radial-gradient(1.5px 1.5px at 62% 64%, rgba(255,240,200,.6), transparent),
    radial-gradient(1px 1px at 90% 20%, rgba(255,240,200,.7), transparent),
    radial-gradient(1px 1px at 76% 78%, rgba(255,240,200,.6), transparent);
  animation:cine-drift 12s linear infinite;
}
.cine-hero .eyebrow{color:#C9D6C2}
.cine-hero h1{
  margin:.5rem 0 0;max-width:13ch;color:#F4EEE2;
  font-size:clamp(2.6rem,7.5vw,5rem);line-height:1;letter-spacing:var(--track-display);
}
.cine-hero__lead{margin:1.1rem 0 0;max-width:46ch;font-size:var(--fs-md);line-height:1.5;color:#B9C7B2}
.cine-chips{list-style:none;margin:1.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.cine-chip{
  display:flex;flex-direction:column;gap:.1rem;min-width:7rem;padding:.65rem 1rem;
  border-radius:var(--r-md);border:1px solid rgba(255,236,190,.22);background:rgba(255,236,190,.05);
}
.cine-chip b{font-family:var(--font-display);font-size:1.45rem;font-weight:600;line-height:1.05;color:#F0C868}
.cine-chip span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#8FA088}

/* ---------- the poster wall ---------- */
.cine-lineup{padding-block:clamp(3rem,8vw,5.5rem);background:var(--c-paper, var(--c-bg))}
.cine-lineup__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.cine-tbc{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:var(--r-pill);
  color:var(--c-gold);border:1px dashed color-mix(in srgb,var(--c-gold) 55%,transparent);
}
.cine-posters{
  list-style:none;margin:2.2rem 0 0;padding:0;
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(5, minmax(0,1fr));
}
.cine-poster{perspective:900px}
.cine-poster__frame{
  --rx:0deg; --ry:0deg; --gx:50%; --gy:30%;
  --p1:#7A1024; --p2:#14060a; --pa:#F0B84A;          /* palette, set per slot below */
  position:relative;overflow:hidden;aspect-ratio:2/3;border-radius:var(--r-md);
  background:linear-gradient(165deg, var(--p1), var(--p2) 78%);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.07);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.cine-poster:hover .cine-poster__frame{box-shadow:0 30px 60px -26px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb,var(--pa) 40%,transparent)}
.cine-poster--p1 .cine-poster__frame{--p1:#2B1B5E; --p2:#0B0718; --pa:#A99BFF}
.cine-poster--p2 .cine-poster__frame{--p1:#0F4C45; --p2:#04120F; --pa:#62E6C3}
.cine-poster--p3 .cine-poster__frame{--p1:#17324F; --p2:#050B14; --pa:#FF8A3D}
.cine-poster--p4 .cine-poster__frame{--p1:#5E2A66; --p2:#150A1C; --pa:#FFA36B}

.cine-poster__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine-poster__art{position:absolute;inset:0}
.cine-poster__art i{
  position:absolute;border-radius:50%;filter:blur(18px);opacity:.55;
  background:radial-gradient(circle, var(--pa), transparent 70%);
}
.cine-poster__art i:nth-child(1){width:90%;height:60%;left:-25%;top:-12%}
.cine-poster__art i:nth-child(2){width:70%;height:45%;right:-30%;bottom:18%;opacity:.35}
.cine-poster--p1 .cine-poster__art i:nth-child(1){left:30%;top:-20%}
.cine-poster--p2 .cine-poster__art i:nth-child(1){left:-10%;top:30%}
.cine-poster--p3 .cine-poster__art i:nth-child(1){left:10%;top:-30%;width:120%}
.cine-poster--p4 .cine-poster__art i:nth-child(2){right:-10%;bottom:40%}
.cine-poster__frame::after{                          /* film grain */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.35) 0 1px, transparent 1px 3px);
}
.cine-poster__type{
  position:absolute;inset:auto 0 0 0;z-index:1;padding:2.2rem .95rem 2.3rem;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--p2) 88%,transparent) 42%);
  display:flex;flex-direction:column;gap:.2rem;
}
.cine-poster__no{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;color:color-mix(in srgb,var(--pa) 80%,#fff)}
.cine-poster__main{
  font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:.98;letter-spacing:-.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.cine-poster__sub{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pa)}
.cine-poster__strip{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:.45rem .95rem;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
  border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);
}
.cine-poster__glare{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.28), transparent 45%);
  mix-blend-mode:soft-light;
}
.cine-poster:hover .cine-poster__glare{opacity:1}

.cine-poster__meta{padding:.7rem .15rem 0}
.cine-poster__title{margin:0;font-size:var(--fs-md);color:var(--c-ink);line-height:1.2}
.cine-poster__when{margin:.2rem 0 0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-mute)}
.cine-rating{
  display:inline-block;vertical-align:middle;margin-left:.3rem;padding:.05rem .35rem;border-radius:4px;
  font-family:var(--font-mono);font-size:.62rem;border:1px solid var(--c-line);color:var(--c-ink-soft);
}
.cine-note{margin:1.6rem 0 0;max-width:62ch;font-size:var(--fs-sm);color:var(--c-ink-mute)}

/* ---------- where / when ---------- */
.cine-info{padding-block:0 clamp(3rem,8vw,5rem);background:var(--c-paper, var(--c-bg))}
.cine-info__grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
.cine-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  padding:1.4rem 1.3rem;border-radius:var(--r-lg);
  background:var(--c-surface);border:1px solid var(--c-line);
}
.cine-card__label{margin:0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-mute)}
.cine-card__title{margin:0;font-size:var(--fs-lg);color:var(--c-ink)}
.cine-card__text{margin:.2rem 0 .8rem;color:var(--c-ink-soft);line-height:1.5}
.cine-card .btn{margin-top:auto}

@keyframes cine-flicker{0%,100%{opacity:1}45%{opacity:.82}50%{opacity:.95}55%{opacity:.78}}
@keyframes cine-drift{from{transform:translateY(0)}to{transform:translateY(-24px)}}

@media (max-width:980px){ .cine-posters{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:760px){ .cine-info__grid{grid-template-columns:1fr} }
@media (max-width:560px){
  /* phones: a swipeable row of posters, snapping one at a time */
  .cine-posters{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--gutter, 16px));padding:0 var(--gutter, 16px) .6rem;
    scroll-padding-inline:var(--gutter, 16px);scrollbar-width:none;
  }
  .cine-posters::-webkit-scrollbar{display:none}
  .cine-poster{scroll-snap-align:start}
  .cine-chip{min-width:0;flex:1 1 28%;padding:.55rem .7rem}
}
@media (prefers-reduced-motion:reduce){
  .cine-hero__beam,.cine-hero__dust{animation:none}
  .cine-poster__frame{transform:none;transition:none}
}

/* ---------- original minimalist poster art (screenings[].art) ---------- */
.cine-poster__svg{position:absolute;left:0;right:0;top:5%;width:100%;height:60%;z-index:0}   /* art in the top two-thirds; type owns the bottom */
.cine-poster__svg .a{fill:var(--pa)}
.cine-poster__svg .c{fill:#F4EEE2}
.cine-poster__svg .k{fill:var(--p2)}
.cine-poster__svg .l,.cine-poster__svg .la{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cine-poster__svg .l{stroke:#F4EEE2}
.cine-poster__svg .la{stroke:var(--pa)}
/* a single soft glow behind the symbol instead of the blurred blobs */
.cine-poster__art--sym{
  background:radial-gradient(55% 34% at 50% 34%, color-mix(in srgb,var(--pa) 26%,transparent), transparent 70%);
}
.cine-poster__svg{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.cine-poster:hover .cine-poster__svg{transform:scale(1.035)}
/* the symbol's own little life — slow, barely-there */
.cine-poster--p0 .cine-poster__svg circle.a{animation:cine-rise 7s ease-in-out infinite}
.cine-poster--p3 .cine-poster__svg circle.a{animation:cine-blink 2.4s ease-in-out infinite}
@keyframes cine-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cine-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .cine-poster__svg,.cine-poster__svg circle.a{animation:none;transition:none}
}


/* ---------- the poll ---------- */
.cine-pollbar{
  display:inline-flex;align-items:center;gap:.6rem;margin:1.4rem 0 0;
  padding:.5rem .95rem .5rem .75rem;border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--c-ink);
  background:color-mix(in srgb,var(--c-primary) 10%,var(--c-surface));
  border:1px solid color-mix(in srgb,var(--c-primary) 35%,var(--c-line));
}
.cine-pollbar[hidden]{display:none}
.cine-pollbar__dot{flex:none;width:8px;height:8px;border-radius:50%;background:#3FCB7E;animation:footer-dot-pulse 2.4s ease-out infinite}
.cine-vote{margin-top:.6rem}
.cine-vote[hidden]{display:none}
.cine-vote__btn{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  padding:.42rem .85rem;border-radius:var(--r-pill);
  font:600 .8rem/1 var(--font-body);color:var(--c-ink);
  background:transparent;border:1px solid var(--c-line);
  transition:border-color .2s ease, background .2s ease, transform .3s var(--ease-spring);
}
.cine-vote__btn svg{color:var(--c-primary-ink)}
.cine-vote__btn:hover:not(:disabled){border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 10%,transparent);transform:translateY(-1px)}
.cine-vote__btn:disabled{opacity:.5;cursor:default}
.cine-vote__btn.is-sending{opacity:1}
.cine-vote__btn.is-sending svg{animation:cine-beat .7s ease-in-out infinite}
.cine-vote__row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.cine-vote__row b{font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1;color:var(--c-ink)}
.cine-vote__mine{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary-ink)}
.cine-vote__track{margin-top:.35rem;height:6px;border-radius:99px;background:color-mix(in srgb,var(--c-ink) 10%,transparent);overflow:hidden}
.cine-vote__track i{display:block;height:100%;width:0;border-radius:inherit;background:color-mix(in srgb,var(--c-ink) 45%,transparent);transition:width 1s cubic-bezier(.22,1,.36,1)}
.cine-vote__track i.is-in{width:var(--w)}
.cine-vote__res.is-lead .cine-vote__track i{background:var(--c-gold)}
.cine-vote__res.is-mine .cine-vote__track i{background:#3FCB7E}
.cine-vote__res.is-lead .cine-vote__row b{color:var(--c-gold)}
@keyframes cine-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){ .cine-vote__track i{transition:none} .cine-vote__btn.is-sending svg{animation:none} }