:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --cinema-duration: 3000ms;
}
#cinema-content { display: contents; }
.cinema[hidden] { display: none !important; }
.cinema {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  background: #141816; color: #fff; isolation: isolate;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.cinema-scene { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.cinema-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cinema-core { position: relative; text-align: center; width: min(640px, 88vw); }
.cinema-brands { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.cinema-product { display: flex; align-items: center; justify-content: center; }
.cinema-ap { width: min(360px, 62vw); height: auto; object-fit: contain; }
.cinema-powered { display: flex; align-items: center; justify-content: center; gap: 16px; }
.cinema-powered > small, .cinema-and { color: #bbc7c0; font-size: 11px; white-space: nowrap; }
.cinema-accurate { width: 150px; height: auto; object-fit: contain; }
.cinema-neurolabs { display: flex; align-items: center; flex-direction: column; gap: 5px; flex-shrink: 0; }
.cinema-neurolabs img { width: 68px; height: auto; }
.cinema-neurolabs > span { color: #fff; font-size: 11px; font-weight: 650; letter-spacing: 2px; }
.cinema-rule { display: block; height: 1px; width: 72px; background: #1aff8e; margin: 34px auto 27px; }
.cinema-kicker { color: #bdd3c6; font-size: 10px; font-weight: 600; letter-spacing: 3px; margin: 0 0 14px; }
.cinema-title { color: #1aff8e; font: italic 46px/1.15 Georgia, serif; letter-spacing: -1.2px; margin: 0 0 17px; }
.cinema-caption { color: #bbc7c0; font-size: 12px; letter-spacing: .5px; }
.cinema-halo { position: absolute; width: 76vmax; height: 76vmax; border-radius: 50%; background: radial-gradient(ellipse, #1aff8e12, transparent 65%); z-index: -1; }
.cinema-beam { position: absolute; width: 20%; height: 160%; background: linear-gradient(90deg, transparent, #1aff8e0c, transparent); transform: translateX(-450%) rotate(25deg); z-index: -1; }
.cinema-frame { position: absolute; left: 0; right: 0; height: max(6vh, 32px); background: #0b100d; }
.cinema-frame--top { top: 0; }
.cinema-frame--bottom { bottom: 0; }
.cinema-corner { position: absolute; bottom: max(8vh, 58px); left: 5vw; font-size: 9px; letter-spacing: 2px; color: #a9bfb2; }
.cinema-skip { position: absolute; right: 5vw; bottom: max(7vh, 48px); color: #fff; background: #ffffff0a; border: 1px solid #ffffff40; border-radius: 5px; font: 12px 'Segoe UI', Arial, sans-serif; padding: 11px 15px; cursor: pointer; }
.cinema-skip span { margin-left: 14px; color: #1aff8e; }
.cinema-skip:focus-visible { outline: 2px solid #1aff8e; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .cinema-skip:hover { background: #ffffff18; } }

.cinema.is-playing { animation: cinema-curtain var(--cinema-duration) linear both; }
.cinema.is-playing .cinema-brands { animation: cinema-reveal var(--cinema-duration) var(--ease-out) both; }
.cinema.is-playing .cinema-rule { animation: cinema-rule var(--cinema-duration) var(--ease-in-out) both; }
.cinema.is-playing .cinema-kicker { animation: cinema-copy var(--cinema-duration) var(--ease-out) both; }
.cinema.is-playing .cinema-title { animation: cinema-title var(--cinema-duration) var(--ease-out) both; }
.cinema.is-playing .cinema-caption { animation: cinema-caption var(--cinema-duration) var(--ease-out) both; }
.cinema.is-playing .cinema-beam { animation: cinema-beam var(--cinema-duration) var(--ease-in-out) both; }
.cinema.is-playing .cinema-halo { animation: cinema-glow var(--cinema-duration) var(--ease-in-out) both; }
.cinema.is-playing .cinema-frame--top { animation: cinema-frame-top var(--cinema-duration) var(--ease-in-out) both; }
.cinema.is-playing .cinema-frame--bottom { animation: cinema-frame-bottom var(--cinema-duration) var(--ease-in-out) both; }
@keyframes cinema-curtain { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cinema-reveal { 0% { opacity: 0; transform: translateY(12%) scale(.95); } 26%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-5%) scale(1.02); } }
@keyframes cinema-rule { 0%, 18% { opacity: 0; transform: scaleX(.1); } 36%, 84% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.1); } }
@keyframes cinema-copy { 0%, 26% { opacity: 0; transform: translateY(25%); } 44%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-15%); } }
@keyframes cinema-title { 0%, 29% { opacity: 0; transform: translateY(20%); } 47%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10%); } }
@keyframes cinema-caption { 0%, 32% { opacity: 0; } 50%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cinema-beam { 0% { opacity: 0; transform: translateX(-450%) rotate(25deg); } 16%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(450%) rotate(25deg); } }
@keyframes cinema-glow { 0% { opacity: 0; transform: scale(.95); } 40%, 78% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes cinema-frame-top { 0%, 75% { transform: none; } 100% { transform: translateY(-100%); } }
@keyframes cinema-frame-bottom { 0%, 75% { transform: none; } 100% { transform: translateY(100%); } }

/* The second sequence gathers papers, then reveals the authenticated workspace. */
.cinema--login .cinema-core { margin-top: 104px; }
.cinema--login .cinema-ap { width: min(270px, 58vw); }
.cinema--login .cinema-neurolabs img { width: 65px; }
.cinema--login .cinema-rule { margin-top: 25px; margin-bottom: 20px; }
.cinema--login .cinema-title { font: 500 36px/1.2 'Segoe UI', Arial, sans-serif; letter-spacing: -1.2px; color: #fff; }
.cinema-pages { position: absolute; width: 150px; height: 98px; left: calc(50% - 75px); top: calc(50% - 210px); }
.cinema-page { position: absolute; width: 55px; height: 72px; border: 1px solid #86ad96; border-radius: 6px; background: #203629; top: 9px; left: 47px; }
.cinema-page::before, .cinema-page::after { content: ''; position: absolute; left: 12px; right: 12px; height: 2px; top: 24px; background: #85b599; }
.cinema-page::after { top: 36px; right: 20px; }
.cinema-page--two { background: #294d37; }
.cinema-page--three { background: #e3fff0; border-color: #e3fff0; }
.cinema-check { position: absolute; right: 28px; bottom: 6px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #1aff8e; color: #141816; font-size: 18px; }
.cinema--login.is-playing .cinema-page--one { animation: cinema-paper-left var(--cinema-duration) var(--ease-in-out) both; }
.cinema--login.is-playing .cinema-page--two { animation: cinema-paper-right var(--cinema-duration) var(--ease-in-out) both; }
.cinema--login.is-playing .cinema-page--three { animation: cinema-paper-center var(--cinema-duration) var(--ease-out) both; }
.cinema--login.is-playing .cinema-check { animation: cinema-check var(--cinema-duration) var(--ease-out) both; }
.cinema--login.is-playing .cinema-brands { animation-name: cinema-login-brands; }
.cinema--login .cinema-beam { display: none; }
@keyframes cinema-paper-left { 0% { opacity: 0; transform: translateX(-140%) rotate(-22deg); } 18% { opacity: 1; transform: translateX(-100%) rotate(-15deg); } 42%, 80% { opacity: 1; transform: translateX(-14%) rotate(-7deg); } 100% { opacity: 0; transform: translateY(-15%); } }
@keyframes cinema-paper-right { 0% { opacity: 0; transform: translateX(140%) rotate(22deg); } 20% { opacity: 1; transform: translateX(100%) rotate(15deg); } 45%, 80% { opacity: 1; transform: translateX(14%) rotate(7deg); } 100% { opacity: 0; transform: translateY(-15%); } }
@keyframes cinema-paper-center { 0%, 9% { opacity: 0; transform: translateY(24%) scale(.95); } 32%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-15%); } }
@keyframes cinema-check { 0%, 40% { opacity: 0; transform: scale(.95); } 52%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cinema-login-brands { 0%, 15% { opacity: 0; transform: translateY(10%); } 37%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-5%); } }

@media (max-width: 600px) {
  .cinema-brands { gap: 18px; }
  .cinema-powered { gap: 10px; }
  .cinema-powered > small, .cinema-and { font-size: 8px; }
  .cinema-accurate { width: 96px; }
  .cinema-neurolabs img { width: 48px; }
  .cinema-neurolabs > span { font-size: 8px; letter-spacing: 1.1px; }
  .cinema-title { font-size: 34px; }
  .cinema-kicker { font-size: 8px; letter-spacing: 2px; }
  .cinema-caption { font-size: 10px; }
  .cinema-corner { bottom: 100px; left: 0; right: 0; text-align: center; }
  .cinema-skip { bottom: 40px; }
  .cinema--login .cinema-neurolabs img { width: 48px; }
  .cinema--login .cinema-title { font-size: 29px; }
}
@media (max-height: 520px) {
  .cinema-core { transform: scale(.8); }
  .cinema--login .cinema-core { margin-top: 50px; }
  .cinema-pages { top: 20px; transform: scale(.7); }
  .cinema-rule { margin-block: 15px; }
  .cinema-corner { bottom: 20px; }
  .cinema-skip { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Only a gentle opacity exit overrides the legacy global animation:none. */
  .cinema.is-playing { animation: cinema-curtain var(--cinema-duration) linear both !important; }
  .cinema.is-playing .cinema-scene * { animation: none; transform: none; }
  .cinema-beam, .cinema-halo, .cinema-frame { display: none; }
  .cinema--login .cinema-page--one, .cinema--login .cinema-page--two { display: none; }
}
@media print { .cinema { display: none !important; } }