/* =====================================================================
 * Lok-N-Blok cinematic public-page layer
 * Adds page-aware autoplay video, kinetic construction grid animation,
 * stronger depth, and higher-impact surfaces on non-admin pages only.
 * ===================================================================== */

:root {
  --lnb-cinema-bg: #050a07;
  --lnb-cinema-ink: #f4f8f5;
  --lnb-cinema-soft: #c8d5cc;
  --lnb-cinema-muted: #8a9b90;
  --lnb-cinema-line: rgba(216, 226, 219, .16);
  --lnb-cinema-green: #3dcc6e;
  --lnb-cinema-gold: #f0c35a;
  --lnb-cinema-blue: #65b7ff;
  --lnb-cinema-steel: #9db0aa;
}

html.lnb-cinematic-booted body {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(101, 183, 255, .06), transparent 28%),
    linear-gradient(225deg, rgba(240, 195, 90, .06), transparent 36%),
    linear-gradient(180deg, #050a07 0%, #07110d 48%, #030604 100%);
}

html.lnb-cinematic-booted :is(main, section, footer, .page-group, .lnb-footer, .lnb-cta, .wrap) {
  position: relative;
  z-index: 2;
}

.lnb-cinema-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.lnb-cinema-ambient::before,
.lnb-cinema-ambient::after {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: .45;
}

.lnb-cinema-ambient::before {
  background-image:
    linear-gradient(rgba(61, 204, 110, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 183, 255, .065) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(240, 195, 90, .09) 49%, transparent 51% 100%);
  background-size: 72px 72px, 72px 72px, 260px 260px;
  transform: perspective(900px) rotateX(58deg) translate3d(0, -24%, 0);
  transform-origin: center top;
  animation: lnbCinemaGrid 18s linear infinite;
}

.lnb-cinema-ambient::after {
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(255, 255, 255, .065) 36%, transparent 39% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  animation: lnbCinemaBeam 9s cubic-bezier(.16, 1, .3, 1) infinite;
}

@keyframes lnbCinemaGrid {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 72px 72px, -72px 72px, 260px 0; }
}

@keyframes lnbCinemaBeam {
  0%, 18% { transform: translate3d(-18%, 0, 0); opacity: .18; }
  52% { transform: translate3d(12%, 0, 0); opacity: .55; }
  82%, 100% { transform: translate3d(18%, 0, 0); opacity: .2; }
}

.lnb-cinema {
  --cinema-accent: var(--lnb-cinema-green);
  --cinema-hot: var(--lnb-cinema-gold);
  --cinema-cool: var(--lnb-cinema-blue);
  width: min(1180px, calc(100% - 56px));
  margin: clamp(26px, 5vw, 64px) auto;
  padding: clamp(16px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(280px, .9fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(216, 226, 219, .2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(61, 204, 110, .12), transparent 30%),
    linear-gradient(315deg, rgba(101, 183, 255, .12), transparent 32%),
    linear-gradient(180deg, rgba(15, 24, 20, .88), rgba(4, 9, 7, .94));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  isolation: isolate;
  position: relative;
}

.lnb-cinema::before,
.lnb-cinema::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.lnb-cinema::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .03) 18px 19px);
  transform: translateX(-100%);
  animation: lnbCinemaSweep 7s ease-in-out infinite;
}

.lnb-cinema::after {
  inset: 1px;
  border-radius: 7px;
  background:
    linear-gradient(115deg, rgba(61, 204, 110, .22), transparent 22% 74%, rgba(240, 195, 90, .18)),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .22));
  opacity: .55;
  mix-blend-mode: screen;
}

@keyframes lnbCinemaSweep {
  0%, 22% { transform: translateX(-100%); }
  52% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.lnb-cinema--investor { --cinema-accent: #f0c35a; --cinema-hot: #65b7ff; --cinema-cool: #3dcc6e; }
.lnb-cinema--regional { --cinema-accent: #65b7ff; --cinema-hot: #f0c35a; --cinema-cool: #6ee89a; }
.lnb-cinema--customer { --cinema-accent: #f0c35a; --cinema-hot: #3dcc6e; --cinema-cool: #65b7ff; }
.lnb-cinema--trust { --cinema-accent: #9db0aa; --cinema-hot: #f0c35a; --cinema-cool: #65b7ff; }

.lnb-cinema__stage {
  min-height: clamp(260px, 34vw, 430px);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #020403;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.lnb-cinema__video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.18);
  transform: scale(1.015);
}

.lnb-cinema__stage::before,
.lnb-cinema__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lnb-cinema__stage::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .58)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 7px),
    linear-gradient(110deg, transparent 0 32%, rgba(101, 183, 255, .18) 34%, transparent 38% 100%);
  mix-blend-mode: screen;
}

.lnb-cinema__stage::after {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .68);
}

.lnb-cinema__hud {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  color: #fff;
  z-index: 2;
}

.lnb-cinema__signal {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  background: rgba(3, 7, 5, .58);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.lnb-cinema__signal::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cinema-accent);
  box-shadow: 0 0 14px var(--cinema-accent);
  animation: lnbCinemaLive 1.6s ease-in-out infinite;
}

@keyframes lnbCinemaLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.72); }
}

.lnb-cinema__readout {
  display: grid;
  gap: 5px;
  justify-items: end;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  letter-spacing: .11em;
}

.lnb-cinema__readout span {
  display: block;
  min-width: 126px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cinema-accent), var(--cinema-hot), var(--cinema-cool));
  transform-origin: left center;
  animation: lnbCinemaMeter 2.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

@keyframes lnbCinemaMeter {
  0%, 100% { transform: scaleX(.35); opacity: .72; }
  55% { transform: scaleX(1); opacity: 1; }
}

.lnb-cinema__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  color: var(--lnb-cinema-soft);
}

.lnb-cinema__eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .045);
  color: var(--cinema-accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.lnb-cinema__title {
  margin: 0;
  max-width: 11ch;
  color: var(--lnb-cinema-ink);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(2rem, 4vw, 4.35rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: .95;
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(61, 204, 110, .18);
}

.lnb-cinema__body {
  max-width: 56ch;
  margin: 0;
  color: rgba(232, 237, 233, .82);
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  line-height: 1.64;
}

.lnb-cinema__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lnb-cinema__metric {
  min-width: 0;
  padding: 13px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  overflow: hidden;
  position: relative;
}

.lnb-cinema__metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cinema-accent), var(--cinema-hot));
}

.lnb-cinema__metric strong {
  display: block;
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.05;
  white-space: nowrap;
}

.lnb-cinema__metric span {
  display: block;
  margin-top: 6px;
  color: rgba(232, 237, 233, .68);
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lnb-cinema__line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--cinema-accent), var(--cinema-hot), transparent);
  transform-origin: left center;
  animation: lnbCinemaLine 3.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

@keyframes lnbCinemaLine {
  0%, 100% { transform: scaleX(.28); opacity: .5; }
  52% { transform: scaleX(1); opacity: 1; }
}

html.lnb-cinematic-booted :is(.lnb-nav, nav, .top-nav, header.top-nav) {
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 14px 50px rgba(0, 0, 0, .28);
}

html.lnb-cinematic-booted :is(.lnb-hero, .hero, .page-hero, .vault-hero, .article-hero) {
  position: relative;
  isolation: isolate;
}

html.lnb-cinematic-booted :is(.lnb-hero, .hero, .page-hero, .vault-hero, .article-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 32%, rgba(61, 204, 110, .09) 33%, transparent 36% 100%),
    linear-gradient(230deg, transparent 0 58%, rgba(240, 195, 90, .08) 59%, transparent 62% 100%);
  opacity: .7;
}

html.lnb-cinematic-booted :is(h1, .page-title) {
  text-shadow: 0 20px 70px rgba(61, 204, 110, .18);
}

html.lnb-cinematic-booted .lnb-cinema-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(216, 226, 219, .18) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .22);
  animation: lnbSurfaceRise .72s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--lnb-surface-delay, 0ms);
}

html.lnb-cinematic-booted .lnb-cinema-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .08) 50%, transparent 58% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 34%);
  opacity: 0;
  transform: translateX(-80%);
  transition: opacity .25s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}

html.lnb-cinematic-booted .lnb-cinema-surface:hover::after {
  opacity: 1;
  transform: translateX(80%);
}

html.lnb-cinematic-booted :is(.lnb-card, .card, .legal-card, .team-card, .trust-item, .case-card, .blog-card, .territory-card):hover {
  border-color: rgba(61, 204, 110, .48) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), 0 0 0 1px rgba(240, 195, 90, .12);
}

html.lnb-cinematic-booted :is(.lnb-btn, .btn, .nav-cta, button[type="submit"]) {
  position: relative;
  overflow: hidden;
}

html.lnb-cinematic-booted :is(.lnb-btn, .btn, .nav-cta, button[type="submit"])::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .24), transparent 66%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

html.lnb-cinematic-booted :is(.lnb-btn, .btn, .nav-cta, button[type="submit"]):hover::before {
  transform: translateX(120%);
}

@keyframes lnbSurfaceRise {
  from { opacity: .01; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 860px) {
  .lnb-cinema {
    width: min(100% - 32px, 680px);
    grid-template-columns: 1fr;
  }

  .lnb-cinema__stage {
    min-height: clamp(220px, 56vw, 360px);
  }

  .lnb-cinema__title {
    max-width: 12ch;
  }
}

@media (max-width: 540px) {
  .lnb-cinema {
    width: calc(100% - 24px);
    padding: 12px;
    margin: 28px auto;
  }

  .lnb-cinema__hud {
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: 1fr;
  }

  .lnb-cinema__readout {
    justify-items: start;
  }

  .lnb-cinema__metrics {
    grid-template-columns: 1fr;
  }

  .lnb-cinema__metric strong {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnb-cinema-ambient::before,
  .lnb-cinema-ambient::after,
  .lnb-cinema::before,
  .lnb-cinema__signal::before,
  .lnb-cinema__readout span,
  .lnb-cinema__line,
  html.lnb-cinematic-booted .lnb-cinema-surface {
    animation: none !important;
  }

  html.lnb-cinematic-booted .lnb-cinema-surface {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .lnb-cinema,
  .lnb-cinema-ambient {
    display: none !important;
  }
}