/* Shared, decorative motion for the public landing and sign-in screens. */
.cinematic-surface { position: relative; isolation: isolate; background-color: #071426; }
.cinematic-surface::before, .cinematic-surface::after { display: none; }
.cinematic-scene { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.cinematic-scene > span { position: absolute; display: block; pointer-events: none; }
.cinematic-photo {
  inset: -9%;
  background: url('./numlekka-digital-studio-hero.png') center / cover no-repeat;
  animation: cinematic-camera 16s ease-in-out infinite alternate;
  will-change: transform;
}
.cinematic-shade { inset: 0; background: linear-gradient(100deg, rgba(3,12,29,.88), rgba(3,18,38,.53) 55%, rgba(3,15,32,.48)), linear-gradient(0deg, #071426, transparent 42%); }
.cinematic-light {
  inset: -20%; opacity: .75;
  background: radial-gradient(ellipse at 72% 40%, rgba(0,159,255,.48), transparent 38%), radial-gradient(ellipse at 40% 78%, rgba(0,215,173,.26), transparent 35%);
  animation: cinematic-light 10s ease-in-out infinite alternate;
  will-change: transform;
}
.cinematic-ring {
  width: 82%; height: 78%; right: -28%; top: 4%;
  border: 1px solid rgba(120,224,255,.34); border-radius: 50%;
  box-shadow: 0 0 30px rgba(33,161,221,.09), inset 0 0 30px rgba(33,161,221,.07);
  transform: rotate(-32deg); animation: cinematic-orbit 12s ease-in-out infinite alternate;
}
.cinematic-ring.ring-two { right: -24%; top: 10%; opacity: .5; animation-delay: -6s; animation-duration: 15s; }
.cinematic-ring.ring-three { right: -20%; top: 16%; opacity: .3; animation-delay: -9s; animation-duration: 18s; }
.cinematic-toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cinematic-control {
  position: absolute; z-index: 2; right: max(20px, env(safe-area-inset-right)); bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 13px;
  border: 1px solid rgba(210,232,255,.3); border-radius: 999px;
  background: rgba(6,22,43,.88); color: #e5f1ff; font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .025em; cursor: pointer; user-select: none;
}
.cinematic-control::before { content: 'Ⅱ'; font-size: 12px; }
.cinematic-control .motion-paused { display: none; }
.cinematic-toggle:checked ~ .cinematic-scene > span { animation-play-state: paused; }
.cinematic-toggle:checked ~ .cinematic-control::before { content: '▶'; }
.cinematic-toggle:checked ~ .cinematic-control .motion-playing { display: none; }
.cinematic-toggle:checked ~ .cinematic-control .motion-paused { display: inline; }
.cinematic-toggle:focus-visible ~ .cinematic-control { outline: 3px solid #80d6ff; outline-offset: 4px; }
.cinematic-control:hover { border-color: #80d6ff; background: #102f51; }
@keyframes cinematic-camera { from { transform: translate3d(-3%, 1%, 0) scale(1.02); } to { transform: translate3d(3%, -2%, 0) scale(1.12); } }
@keyframes cinematic-light { from { transform: translate3d(-8%, -4%, 0) rotate(-8deg); } to { transform: translate3d(9%, 6%, 0) rotate(8deg); } }
@keyframes cinematic-orbit { from { transform: translate3d(-8%, -4%, 0) rotate(-32deg) scale(.94); } to { transform: translate3d(5%, 8%, 0) rotate(-15deg) scale(1.08); } }
@media (max-width: 767px) {
  .cinematic-photo { background-position: 58% center; }
  .cinematic-ring { width: 135%; height: 60%; right: -80%; }
  .cinematic-control { min-height: 44px; bottom: 12px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-scene > span { animation: none !important; will-change: auto; }
  .cinematic-control, .cinematic-toggle { display: none; }
}