/* ============================================================
   CineQissa v2 — futuristic layer
   Loaded AFTER styles.css. Adds only new components; overrides
   nothing from the base sheet except the two legacy sections.
   ============================================================ */

/* --v2-glow is the BRAND gold and never changes.
   --film / --film-glow carry the spotlighted title's colour and are used only
   inside the Marquee, so a blue poster can't repaint the logo, the
   "Become a member" button or the right rail. */
:root {
  --v2-glow: 217, 178, 106;
  --film: var(--accent);
  --film-soft: var(--accent-soft);
  --film-glow: 217, 178, 106;
  --film-hi: var(--gold-hi);
  --film-lo: var(--gold-lo);
}

/* legacy sections kept in the DOM so app.js keeps working, hidden visually */
.v2-legacy { display: none !important; }

/* `.grid{display:grid}` outranks the [hidden] attribute's UA display:none, so
   the grid stayed on screen underneath the galaxy. Make hidden actually hide. */
#trending-grid[hidden], .galaxy[hidden] { display: none !important; }

/* ============ THE MARQUEE ============ */
.marquee {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); min-height: 380px; margin-bottom: 30px;
  display: flex; align-items: flex-end; background: var(--bg-raised);
  box-shadow: var(--shadow);
}
.marquee-bg {
  position: absolute; inset: -6%; background: center 28%/cover no-repeat;
  animation: v2-kenburns 26s ease-in-out infinite alternate;
  transition: opacity .7s ease, background-image .4s ease;
}
@keyframes v2-kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(1.4%, -1.4%); } }
.marquee::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 4%, rgba(10,9,12,.72) 42%, rgba(10,9,12,.28) 78%);
}
:root[data-theme="light"] .marquee::after {
  background: linear-gradient(to top, var(--bg-raised) 4%, rgba(20,14,8,.7) 46%, rgba(20,14,8,.3) 80%);
}
.marquee-grain {
  position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.marquee-body { position: relative; z-index: 3; padding: 26px 26px 24px; width: 100%; max-width: 760px; }
.marquee-greet { font-size: 12.5px; color: rgba(244,239,227,.72); margin-bottom: 14px; }
.marquee-label {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--film);
  background: rgba(var(--film-glow), .13); border: 1px solid rgba(var(--film-glow), .32);
  border-radius: 999px; padding: 4px 12px; transition: all .7s ease;
}
.marquee h1 {
  margin: 10px 0 8px; font-size: clamp(28px, 5vw, 46px); line-height: 1.04; color: #f7f2e6;
  text-shadow: 0 4px 26px rgba(0,0,0,.65);
}
.marquee-meta { color: rgba(244,239,227,.8); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.marquee-meta .mchip {
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 2px 10px;
  background: rgba(10,9,12,.4); font-size: 11.5px;
}
.marquee-over {
  color: rgba(244,239,227,.72); font-size: 13.5px; margin: 12px 0 0; max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.marquee-cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
/* solid-ish backgrounds instead of backdrop-filter: a live blur behind three
   always-visible buttons repaints on every scroll frame */
.marquee-cta .btn { background: rgba(10, 9, 12, .55); }
/* the one CTA that wears the film's colour — inside the Marquee only */
.marquee-cta .btn.primary {
  background: linear-gradient(135deg, var(--film-hi), var(--film) 55%, var(--film-lo));
  box-shadow: 0 4px 22px rgba(var(--film-glow), .35);
  color: #17130a;
}
.marquee-switch {
  position: absolute; top: 14px; right: 14px; z-index: 4; display: flex; gap: 7px;
}
.marquee-switch button {
  width: 34px; height: 48px; border-radius: 7px; border: 2px solid transparent; padding: 0;
  background: center/cover no-repeat #241d2e; cursor: pointer; opacity: .6; transition: all .3s;
}
.marquee-switch button.on { border-color: var(--film); opacity: 1; transform: scale(1.07); }
.marquee-switch button:hover { opacity: 1; }
@media (max-width: 620px) {
  .marquee { min-height: 360px; }
  /* stays top-right: the bottom edge is where the title + CTA row live */
  .marquee-switch { top: 12px; right: 12px; gap: 5px; }
  .marquee-switch button { width: 26px; height: 37px; }
  .marquee-over { display: none; }
  .marquee-body { padding: 20px 18px 20px; }
  .marquee-cta .btn { padding: 9px 15px; font-size: 12px; }
}

/* ============ YOUR PULSE ============ */
.pulse-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 8px;
}
/* No scroll snapping on the drifting rows: the auto-scroll moves a fraction of a
   pixel per frame and snapping kept yanking it straight back to the start. */
.pulse-row, #news-row { scroll-snap-type: none; }
.pulse-card { scroll-snap-align: none; }
.pulse-row::-webkit-scrollbar { height: 6px; }
.pulse-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.pulse-skel { flex: none; height: 250px; border-radius: 14px; }
.pulse-card {
  position: relative; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0;
  background: var(--bg-raised); color: inherit; font: inherit;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.pulse-card:hover { transform: translateY(-4px); border-color: rgba(var(--v2-glow), .45); box-shadow: var(--shadow); }
/* the card is built from <span>s (button children) — force block flow */
.pulse-card { display: flex; flex-direction: column; }
.pc-img {
  display: grid; place-items: center; font-size: 34px;
  height: 130px; flex: none; background: center/cover no-repeat var(--bg-hover); position: relative;
}
.pc-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-raised), transparent 62%);
}
.pc-body { display: block; padding: 12px 15px 15px; }
.pc-why {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(var(--v2-glow), .3); padding: 3px 9px; border-radius: 999px; margin-bottom: 7px;
}
.pc-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink);
}
.pc-line { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 5px; }
.pc-by { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }
.pulse-empty {
  border: 1px dashed var(--line); border-radius: 14px; padding: 22px; color: var(--ink-dim);
  font-size: 13px; grid-column: 1 / -1;
}
.pulse-empty b { color: var(--accent); }

/* ============ MOOD DIAL ============ */
.mood-dial { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.mood {
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink-dim);
  border-radius: 999px; padding: 9px 15px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; transition: all .3s;
}
.mood:hover { color: var(--ink); border-color: rgba(var(--v2-glow), .4); }
.mood.on { color: var(--accent-ink); font-weight: 800; border-color: transparent; }
.mood-search {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised);
  padding: 5px 6px 5px 14px; max-width: 640px;
  transition: border-color .25s, box-shadow .25s;
}
.mood-search:focus-within { border-color: rgba(var(--v2-glow), .55); box-shadow: var(--glow); }
.ms-ico { flex: none; font-size: 15px; }
#mood-q {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ink); font: 13px/1.3 inherit; padding: 7px 2px;
}
#mood-q::placeholder { color: var(--ink-faint); }
.ms-go { flex: none; padding: 8px 16px; font-size: 12px; }
.ms-clear { flex: none; padding: 8px 11px; font-size: 12px; }
@media (max-width: 560px) {
  .ms-go { padding: 8px 12px; }
  #mood-q::placeholder { font-size: 12px; }
}

.curator {
  font-size: 14.5px; font-style: italic; color: var(--ink-dim);
  margin: 0 0 16px; padding-left: 13px; border-left: 2px solid currentColor;
}

/* ============ HOLOGRAPHIC POSTERS ============ */
/* applied to the existing .card markup — no change to app.js */
.card.holo { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.card.holo.tilting { transition: transform .08s linear; }
.card.holo .poster { position: relative; overflow: hidden; }
.card.holo .poster::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.3), transparent 58%);
  mix-blend-mode: overlay; pointer-events: none;
}
.card.holo.tilting .poster::after { opacity: 1; }
.card.holo.tilting { box-shadow: 0 22px 50px rgba(0,0,0,.55); z-index: 5; }

/* ============ VIEW TOGGLE ============ */
.v2-viewtoggle { display: flex; gap: 4px; margin-left: auto; }
.v2-viewtoggle .vt {
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink-dim);
  border-radius: 999px; padding: 6px 13px; font-size: 11.5px; cursor: pointer; font-family: inherit;
  transition: all .25s;
}
.v2-viewtoggle .vt.on { color: var(--accent); border-color: rgba(var(--v2-glow), .5); background: var(--accent-soft); }

/* ============ POSTER GALAXY ============ */
.galaxy {
  position: relative; height: 460px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); cursor: grab; touch-action: none;
  background: radial-gradient(80% 70% at 50% 40%, var(--bg-hover), var(--bg) 75%);
}
.galaxy.dragging { cursor: grabbing; }
.galaxy-field { position: absolute; inset: 0; will-change: transform; }
.galaxy .star {
  position: absolute; border-radius: 9px; padding: 0; border: 0; cursor: pointer;
  background: center/cover no-repeat var(--bg-hover);
  box-shadow: 0 12px 34px rgba(0,0,0,.6); transition: box-shadow .3s, filter .3s;
}
.galaxy .star:hover { box-shadow: 0 0 0 2px var(--accent), 0 18px 40px rgba(0,0,0,.7); filter: brightness(1.15); }
.galaxy-zoom {
  position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 6px;
}
.galaxy-zoom button {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer; font-size: 14px; line-height: 1;
  border: 1px solid var(--line); background: rgba(10,9,12,.62); color: var(--ink);
  backdrop-filter: blur(6px); transition: all .25s;
}
:root[data-theme="light"] .galaxy-zoom button { background: rgba(255,253,248,.82); }
.galaxy-zoom button:hover { color: var(--accent); border-color: rgba(var(--v2-glow), .55); transform: translateY(-1px); }
.galaxy-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-size: 10.5px; color: var(--ink-dim); background: rgba(10,9,12,.62);
  padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(6px); pointer-events: none;
}
:root[data-theme="light"] .galaxy-hint { background: rgba(255,253,248,.8); }
@media (max-width: 620px) { .galaxy { height: 380px; } }

/* ============ LIVE TICKER (rail) ============ */
.ticker {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
  padding: 12px 14px; margin-bottom: 14px;
}
.ticker .rail-head { margin-bottom: 6px; }
.ticker .rail-head h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 99px; background: var(--good);
  box-shadow: 0 0 10px var(--good); animation: v2-beat 1.8s ease-in-out infinite;
}
@keyframes v2-beat { 50% { opacity: .35; transform: scale(.78); } }
.tick {
  display: flex; gap: 9px; align-items: baseline; padding: 7px 2px;
  border-bottom: 1px solid rgba(255,255,255,.045); font-size: 12.5px; color: var(--ink-dim);
  animation: v2-tickin .45s ease-out;
}
:root[data-theme="light"] .tick { border-bottom-color: var(--line); }
.tick:last-child { border-bottom: 0; }
@keyframes v2-tickin { from { opacity: 0; transform: translateY(-6px); } }
.tick b { color: var(--accent); font-weight: 700; }
.tick .t-what { flex: 1; min-width: 0; }
.tick time { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }

/* ============ ASK CINEQISSA (command palette) ============ */
.ask-hint {
  border: 1px solid var(--line); background: transparent; color: var(--ink-faint);
  border-radius: 999px; padding: 3px 9px; font-size: 10.5px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: all .25s;
}
.ask-hint:hover { color: var(--accent); border-color: rgba(var(--v2-glow), .45); }
.ask-hint kbd {
  font: 700 9.5px/1 ui-monospace, monospace; border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 4px; color: var(--ink-dim);
}
@media (max-width: 900px) { .ask-hint { display: none; } }

.ask-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(6,5,9,.72);
  backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center;
  padding: 11vh 16px 16px; animation: v2-fade .18s ease-out;
}
.ask-overlay[hidden] { display: none; }
:root[data-theme="light"] .ask-overlay { background: rgba(60,48,28,.42); }
@keyframes v2-fade { from { opacity: 0; } }
.ask-box {
  width: min(640px, 100%); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(var(--v2-glow), .3); background: var(--bg-raised);
  box-shadow: 0 40px 100px rgba(0,0,0,.7); animation: v2-rise .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes v2-rise { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.ask-input {
  width: 100%; border: 0; background: transparent; color: var(--ink);
  font: 16px/1.2 inherit; padding: 18px 20px; outline: none; border-bottom: 1px solid var(--line);
}
.ask-list { max-height: min(52vh, 380px); overflow-y: auto; padding: 6px; }
.ask-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 10px;
  cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left;
  color: inherit; font: inherit;
}
.ask-item.sel { background: var(--accent-soft); }
.ask-item .ai-ico {
  width: 32px; height: 46px; border-radius: 5px; flex: none; display: grid; place-items: center;
  background: center/cover no-repeat var(--bg-hover); font-size: 15px;
}
.ask-item .ai-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ask-item .ai-s { font-size: 11.5px; color: var(--ink-faint); }
.ask-item .ai-kind {
  margin-left: auto; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.ask-empty { padding: 26px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }
.ask-foot {
  display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--ink-faint);
}
.ask-foot .ask-brand { margin-left: auto; color: var(--accent); }

/* ============ ROW ARROWS ============ */
.row-wrap { position: relative; }
.row-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer; padding: 0;
  font: 400 22px/1 Georgia, serif; color: var(--ink);
  border: 1px solid var(--line); background: rgba(10, 9, 12, .78);
  box-shadow: var(--shadow); opacity: 0; transition: opacity .25s, color .25s, border-color .25s;
}
:root[data-theme="light"] .row-arrow { background: rgba(255, 253, 248, .92); }
.row-arrow.left { left: -6px; }
.row-arrow.right { right: -6px; }
.row-arrow[hidden] { display: none; }
.row-wrap:hover .row-arrow, .row-arrow:focus-visible { opacity: 1; }
.row-arrow:hover { color: var(--accent); border-color: rgba(var(--v2-glow), .55); }
/* touch devices have no hover — keep them visible there */
@media (hover: none) { .row-arrow { opacity: .9; } }

/* ============ MOTION TOGGLE ============ */
#motion-toggle { transition: opacity .25s, color .25s; }
#motion-toggle.motion-off { opacity: .4; }
/* a gentle nudge when the OS is the reason nothing is animating */
#motion-toggle.motion-hint {
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--v2-glow), .45);
}

/* ============ TRAILER ROW — focal "coverflow" scroll ============ */
/* the card in the middle sits at full size; neighbours shrink and dim, so
   scrolling promotes the next trailer into focus */
/* No leading padding: it left an ugly blank gap before the first teaser.
   focalRow() instead slides its focal point from the first card to the last
   as the row scrolls, so the ends still reach full size. */
/* proximity, not mandatory: mandatory refuses to rest at the true end of the
   row, so the last teaser could never come into focus */
#trailer-row { scroll-snap-type: x proximity; }
/* No permanent `will-change` here: it would promote all 18 cards to their own
   compositor layers for the whole session, which costs more than it saves. */
#trailer-row .trailer { scroll-snap-align: center; transform-origin: center center; }
/* Driven from JS (see focalRow) rather than a CSS scroll-driven animation:
   `animation-timeline: view(inline)` wired up correctly here but the timeline
   reported inactive (currentTime null) and nothing rendered, so one measured
   code path that works in every engine beats a clever one that half-works. */
.v2-focal-js > * {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s linear;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.v2-force-motion) .v2-focal-js > * { transform: none !important; opacity: 1 !important; filter: none !important; }
  :root:not(.v2-force-motion) #trailer-row { scroll-snap-type: x proximity; }
}

/* ============ POSTER MOTION — Pulse & News ============ */
/* the artwork breathes on its own, and leans in when you touch it */
/* Zoom via TRANSFORM, never background-size. Animating background-size can't be
   composited — it repaints the image every frame on every card and was a real
   source of scroll jank. transform runs on the GPU. */
.pc-img, .news-card .news-img { overflow: hidden; background-size: cover; background-position: center; }
.pc-img {
  transform: scale(1.02); transform-origin: center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s;
  animation: v2-breathe 18s ease-in-out infinite alternate;
}
@keyframes v2-breathe { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.pulse-card:hover .pc-img { transform: scale(1.16); filter: saturate(1.14) brightness(1.06); animation-play-state: paused; }

.news-card .news-img {
  transform: scale(1.01); transform-origin: center;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s;
}
.news-card:hover .news-img { transform: scale(1.12); filter: saturate(1.1) brightness(1.05); }

/* a light sweeps across the card as it drifts past */
.pulse-card::after, .news-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.13) 47%, transparent 60%);
  transform: translateX(-120%); opacity: 0; transition: opacity .3s;
}
.pulse-card:hover::after, .news-card:hover::after { opacity: 1; animation: v2-sweep 1.1s ease-out; }
@keyframes v2-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.news-card { position: relative; overflow: hidden; }

/* the drifting rows get a soft edge so cards fade in and out, not cut off */
.pulse-row, #news-row {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.v2-force-motion) .marquee-bg,
  :root:not(.v2-force-motion) .live-dot,
  :root:not(.v2-force-motion) .pc-img { animation: none !important; }
  :root:not(.v2-force-motion) .card.holo,
  :root:not(.v2-force-motion) .card.holo.tilting { transform: none !important; }
  :root:not(.v2-force-motion) .pulse-card::after,
  :root:not(.v2-force-motion) .news-card::after { display: none; }
  :root:not(.v2-force-motion) .pulse-row,
  :root:not(.v2-force-motion) #news-row { -webkit-mask-image: none; mask-image: none; }
}