/* Dark gallery entrance; the film keeps its own blue and white identity. */
.project-spotlight[data-project="signova"] .project-display { min-height: 0; aspect-ratio: auto; background: #0c0d0e; }
.project-spotlight[data-project="signova"] .display-label { position: relative; inset: auto; padding: 18px 24px; gap: 12px; font-size: 9px; border-bottom: 1px solid #ffffff12; }
.project-spotlight[data-project="signova"] .display-status { font-size: 10px; }
.project-spotlight[data-project="signova"] .visual-note,
.project-spotlight[data-project="signova"] .display-arrow { display: none; }
.project-visual.visual-signova { position: relative; inset: auto; display: block; transform: none; background: #0c0d0e; }
.film-cover { width: 100%; position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 1.85; min-height: 360px; padding: 0; text-align: left; background: radial-gradient(ellipse at 82% 55%, #19232c 0, #0d1013 37%, #0c0d0e 67%); }
.film-cover:focus-visible { outline-offset: -5px; }
.film-cover-grid { position: absolute; inset: 0; opacity: .3; background: linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent 32%, #000); pointer-events: none; }
.film-cover-copy { position: absolute; top: 16%; left: 6%; z-index: 3; pointer-events: none; }
.film-eyebrow { display: block; color: #8d9195; font: 8px/1.5 var(--mono); letter-spacing: 1.4px; }
.film-cover-title { display: block; margin: 17px 0 16px; color: #f3f1ed; font: 800 clamp(42px, 5.7vw, 86px)/1 var(--sans); letter-spacing: -.065em; }
.film-cover-line { display: block; color: #c7c5c0; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.7; letter-spacing: .04em; }
.film-cover-scene { position: absolute; inset: 0 0 0 48%; pointer-events: none; }
.film-orbit { position: absolute; width: 84%; aspect-ratio: 1; top: 7%; left: 5%; border: 1px solid #8ca6be1e; border-radius: 50%; transform: rotate(-24deg) scaleX(.8); }
.film-orbit::after { content: ''; position: absolute; inset: 12%; border: 1px solid #8ca6be12; border-radius: 50%; }
.film-nova { position: absolute; width: 74%; right: -11%; top: -4%; height: 102%; opacity: .47; mask-image: linear-gradient(0deg, transparent 3%, #000 42%, #000 67%, transparent 98%); }
.film-nova img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 0; filter: grayscale(.85) brightness(.46); mask-image: linear-gradient(90deg, transparent, #000 37%, #000 58%, transparent 100%); }
.film-phone { position: absolute; width: 39%; max-width: 205px; aspect-ratio: 450 / 969; left: 19%; top: 13%; padding: 6px; border: 1px solid #b3bcc766; border-radius: 25px; background: #13171c; transform: perspective(950px) rotateY(-13deg) rotateZ(-8deg); box-shadow: 18px 24px 55px #000a, -2px 0 18px #7c9bbd20; overflow: hidden; transition: transform .7s cubic-bezier(.2,.7,.3,1), box-shadow .7s; }
.film-phone img { display: block; width: 103.34%; height: auto; border-radius: 18px; filter: brightness(.78) saturate(.7); transition: filter .6s; }
.film-scene-note { position: absolute; bottom: 7%; right: 7%; color: #65717e; font: 7px/1.4 var(--mono); letter-spacing: 1px; }
.film-cover-cta { position: absolute; bottom: 11%; left: 6%; width: 41%; display: flex; align-items: center; gap: 13px; z-index: 4; }
.film-play-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; color: #14100c; background: var(--accent); transition: transform .3s, box-shadow .3s; }
.film-play-icon svg { width: 24px; height: 24px; fill: currentColor; }
.film-cover-cta strong { display: block; color: #e9e3db; font: bold 9px/1.5 var(--mono); letter-spacing: 1px; }
.film-cover-cta small { display: block; color: #8b8882; font: 10px/1.5 var(--mono); margin-top: 3px; }
.film-cover-cta small i { font-style: normal; padding: 0 5px; }
.film-cta-arrow { font-size: 22px; color: #a6a096; margin-left: auto; transition: transform .3s; }
.film-cover:hover .film-phone, .film-cover:focus-visible .film-phone { transform: perspective(950px) rotateY(-5deg) rotateZ(-5deg) translateY(-7px); box-shadow: 15px 30px 65px #000a, -2px 0 22px #7c9bbd40; }
.film-cover:hover .film-phone img, .film-cover:focus-visible .film-phone img { filter: brightness(.95) saturate(.9); }
.film-cover:hover .film-play-icon, .film-cover:focus-visible .film-play-icon { transform: scale(1.06); box-shadow: 0 0 0 7px #ef7d4314; }
.film-cover:hover .film-cta-arrow { transform: translate(3px, -3px); }
.film-caption { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; padding: 17px 24px; border-top: 1px solid #ffffff12; color: #878781; font: 8px/1.5 var(--mono); letter-spacing: .8px; }
.film-caption i { font-style: normal; color: #4d4d4a; padding: 0 5px; }
body.cinema-open { overflow: hidden; }
body.cinema-open .cursor { visibility: hidden; }
#signova-cinema { margin: auto; width: min(1240px, calc(100vw - 72px), calc((100dvh - 180px) * 16 / 9)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; color: var(--white); background: #090a0b; border: 1px solid #ffffff1f; box-shadow: 0 30px 140px #000d; }
#signova-cinema::backdrop { background: #050505f2; backdrop-filter: blur(16px); }
#signova-cinema[open] { animation: cinema-arrive .3s ease-out both; }
#signova-cinema[open]::backdrop { animation: cinema-dim .3s ease-out both; }
#signova-cinema.closing { animation: cinema-leave .2s ease-in both; }
#signova-cinema.closing::backdrop { animation: cinema-undim .2s ease-in both; }
.cinema-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #ffffff16; }
.cinema-eyebrow { display: block; margin-bottom: 6px; color: #777c80; font: 8px/1.4 var(--mono); letter-spacing: 1.2px; }
.cinema-toolbar h2 { font: bold 18px/1.3 var(--sans); letter-spacing: -.5px; }
.cinema-toolbar h2 span { font: 9px/1.4 var(--mono); color: #999993; letter-spacing: 1px; margin-left: 12px; }
#close-signova-cinema { min-height: 44px; padding: 0 2px 0 14px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; font: 9px/1 var(--mono); color: #bdb8b0; }
#close-signova-cinema span { font: 27px/1 var(--sans); }
#close-signova-cinema:hover { color: var(--accent); }
#close-signova-cinema:focus-visible { outline-offset: 3px; }
.cinema-screen { background: #000; width: 100%; aspect-ratio: 16 / 9; }
.cinema-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cinema-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 24px; border-top: 1px solid #ffffff16; color: #a6a39e; }
.cinema-footer p { font-size: 12px; line-height: 1.6; }
.cinema-footer > span { font: 9px/1.5 var(--mono); white-space: nowrap; letter-spacing: 1px; }
.cinema-footer i { color: #545451; padding: 0 8px; font-style: normal; }
.film-error { margin: 0; padding: 0 24px 20px; color: #f8a16d; font-size: 13px; line-height: 1.7; }
.film-error a { text-decoration: underline; text-underline-offset: 3px; }
@keyframes cinema-arrive { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cinema-leave { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes cinema-dim { from { background: #05050500; backdrop-filter: blur(0); } to { background: #050505f2; backdrop-filter: blur(16px); } }
@keyframes cinema-undim { to { background: #05050500; backdrop-filter: blur(0); } }
@media (max-width: 900px) and (min-width: 701px) { .film-cover-title { font-size: 61px; } }
@media (max-width: 700px) {
  .project-spotlight[data-project="signova"] #project-title { font-size: clamp(23px, 7.5vw, 34px); }
  .project-spotlight[data-project="signova"] #project-title br { display: initial; }
  .project-spotlight[data-project="signova"] .display-label { padding: 14px 16px; font-size: 8px; flex-wrap: wrap; }
  .project-spotlight[data-project="signova"] .display-status { font-size: 9px; }
  .film-cover { min-height: 500px; aspect-ratio: .9; }
  .film-cover-copy { left: 7%; top: 8%; }
  .film-eyebrow { font-size: 7px; letter-spacing: .8px; }
  .film-cover-title { font-size: clamp(45px, 11.5vw, 72px); margin: 12px 0; }
  .film-cover-line { font-size: 14px; line-height: 1.65; }
  .film-cover-scene { inset: 32% -3% 23% 31%; }
  .film-phone { width: auto; height: 100%; left: 18%; top: 0; max-width: none; border-radius: 22px; padding: 5px; }
  .film-phone img { border-radius: 16px; }
  .film-nova { display: none; }
  .film-orbit { top: 10%; width: 95%; }
  .film-scene-note { display: none; }
  .film-cover-cta { left: 7%; bottom: 6%; width: 86%; }
  .film-play-icon { width: 46px; height: 46px; }
  .film-caption { padding: 14px 16px; font-size: 7px; letter-spacing: .3px; gap: 8px; flex-wrap: wrap; }
  .film-caption i { padding: 0 1px; }
  #signova-cinema { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .cinema-toolbar { padding: 12px 14px; gap: 7px; }
  .cinema-eyebrow { font-size: 7px; letter-spacing: .5px; }
  .cinema-toolbar h2 { font-size: 16px; }
  .cinema-toolbar h2 span { font-size: 7px; letter-spacing: .5px; margin-left: 5px; }
  #close-signova-cinema { font-size: 8px; gap: 8px; padding-left: 7px; }
  .cinema-footer { padding: 14px; align-items: flex-start; gap: 8px; }
  .cinema-footer p { font-size: 10px; }
  .cinema-footer > span { font-size: 8px; letter-spacing: 0; }
  .cinema-footer i { padding: 0 3px; }
  .film-error { padding: 0 14px 14px; font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #signova-cinema { width: min(calc(100vw - 24px), calc((100dvh - 96px) * 16 / 9)); max-height: calc(100dvh - 12px); }
  .cinema-toolbar { padding: 5px 14px; }
  .cinema-eyebrow { display: none; }
  .cinema-footer { padding: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #signova-cinema[open], #signova-cinema[open]::backdrop, #signova-cinema.closing, #signova-cinema.closing::backdrop { animation: none; }
  .film-cover *, .film-phone { transition: none !important; }
}
.motion-off #signova-cinema, .motion-off #signova-cinema::backdrop { animation: none; }
.motion-off .film-cover * { transition: none !important; }

