/* Cinema surface for 3d.romapa.ru. Official red stays #D91E20. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@500;600&display=swap');

html, body.theme-cinema {
  background: #0d1012;
  color: #f3f4f2;
  color-scheme: dark;
  overflow-x: clip;
}
body.theme-cinema {
  --paper: #0d1012;
  --white: #14191c;
  --ink: #f3f4f2;
  --muted: #a5afb5;
  --line: rgba(192, 211, 222, 0.16);
  --mint: #1b1516;
  --dark: #0a0c0e;
  --ease: cubic-bezier(.22, .8, .22, 1);
  font-family: Manrope, Arial, Helvetica, sans-serif;
  position: relative;
}
body.theme-cinema h1,
body.theme-cinema h2,
body.theme-cinema h3 {
  font-family: Unbounded, Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: -0.04em;
}
body.theme-cinema h1 { letter-spacing: -0.045em; overflow-wrap: anywhere; max-width: 100%; }
body.theme-cinema h2,
body.theme-cinema h3 { overflow-wrap: break-word; word-break: normal; max-width: 100%; }
body.theme-cinema .accent {
  color: #ff6a5c;
  text-shadow: 0 0 32px #d91e2044;
}
body.theme-cinema .logo-mark {
  filter: drop-shadow(0 0 12px #d91e2066);
}
.cinema-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body.theme-cinema > :not(.cinema-bg) {
  position: relative;
  z-index: 1;
}
body.theme-cinema > .header {
  z-index: 400;
  isolation: isolate;
}
.cinema-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .42;
  animation: cinema-drift 22s var(--ease) infinite alternate;
}
.cinema-orb-a {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  left: -12vw; top: -8vh;
  background: radial-gradient(circle, #d91e2066, transparent 68%);
}
.cinema-orb-b {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  right: -10vw; bottom: 8vh;
  background: radial-gradient(circle, #3d6d8860, transparent 70%);
  animation-duration: 28s; animation-delay: -8s;
}
.cinema-orb-c {
  width: 28vw; height: 28vw; max-width: 380px; max-height: 380px;
  left: 42vw; top: 38vh;
  background: radial-gradient(circle, #d91e2033, transparent 72%);
  animation-duration: 34s; animation-delay: -14s;
}
.cinema-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(192,211,222,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,211,222,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 78%);
  animation: cinema-grid-shift 48s linear infinite;
}
.cinema-grain {
  position: absolute; inset: -20%;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: cinema-grain 1.2s steps(2) infinite;
}
@keyframes cinema-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(6%,8%,0) scale(1.08); }
}
@keyframes cinema-grid-shift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 72px 72px, 72px 72px; }
}
@keyframes cinema-grain {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-2%,1%); }
}

body.theme-cinema .header {
  z-index: 400;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(#0d1012ee, #0d101299);
  border-bottom-color: rgba(255,255,255,.05);
}
body.theme-cinema .header-inner { overflow: visible; }
body.theme-cinema .hero h1 { z-index: auto; }
body.theme-cinema .contour-switch { display: none; }
body.theme-cinema .contour-switch-menu { display: block; position: relative; z-index: 430; }
body.theme-cinema .contour-switch-panel {
  z-index: 440;
  background: #151f25;
  border-color: #657c8c66;
  box-shadow: 0 20px 60px #000a;
}
body.theme-cinema .contour-switch-panel a { color: #f3f4f2; }
body.theme-cinema .contour-switch-panel a.is-current {
  background: rgba(255,255,255,.08);
  color: #fff;
}
body.theme-cinema .wrap,
body.theme-cinema .hero-copy { min-width: 0; max-width: 100%; }
body.theme-cinema .logo { color: #f3f4f2; }
body.theme-cinema .logo .logo-contour { border-color: rgba(243,244,242,.55); }
body.theme-cinema .contour-switch,
body.theme-cinema .contour-switch-menu > summary {
  background: linear-gradient(#19212699, #10161955);
  border-color: var(--line);
  color: #c2cacf;
}
body.theme-cinema .contour-switch a { color: #c2cacf; }
body.theme-cinema .contour-switch a.is-current,
body.theme-cinema .contour-switch a:hover {
  color: #fff; background: rgba(255,255,255,.08);
}
body.theme-cinema .nav > a:not(.btn):hover { color: #fff; }
body.theme-cinema .btn.dark { background: #f4f3f0; color: #141719; }
body.theme-cinema .btn.secondary { color: #f3f4f2; border-color: var(--line); }
body.theme-cinema .menu-toggle { border-color: var(--line); color: #f3f4f2; }
body.theme-cinema .hero-visual {
  background: radial-gradient(ellipse at 50% 42%, #2a1214 0%, #14191c 52%, #0d1012 100%);
}
body.theme-cinema .work-image,
body.theme-cinema .service-stage,
body.theme-cinema .lab-space,
body.theme-cinema .case-view { background: #1b2227; }
body.theme-cinema .card-tag { background: rgba(13,16,18,.78); color: #dce0e2; }
body.theme-cinema .pill {
  background: rgba(20,25,28,.88);
  border-color: var(--line);
  color: #dce0e2;
}
body.theme-cinema .contact-link,
body.theme-cinema .request-panel,
body.theme-cinema .cookie,
body.theme-cinema .dialog,
body.theme-cinema .service-card,
body.theme-cinema .direction-card {
  background: #14191c;
  border-color: var(--line);
  color: #f3f4f2;
}
body.theme-cinema .contact-link:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
body.theme-cinema .contact-link strong { color: #f3f4f2; }
body.theme-cinema .contact-link small { color: #a5afb5; }
body.theme-cinema .request-wrap {
  background: #14191c;
  border: 1px solid var(--line);
}
body.theme-cinema .request-copy p,
body.theme-cinema .request-contact small { color: #a5afb5; }
body.theme-cinema .request-summary { color: #f3f4f2; }
body.theme-cinema .request-panel[open] .request-summary { border-bottom-color: var(--line); }
body.theme-cinema .field label { color: #c5d0d6; }
body.theme-cinema .field input,
body.theme-cinema .field textarea,
body.theme-cinema .field select {
  background: #0e171d;
  border-color: #57738355;
  color: #f3f4f2;
}
body.theme-cinema .field input::placeholder,
body.theme-cinema .field textarea::placeholder { color: #8b9aa3; }
body.theme-cinema .file-label {
  border-color: #57738355;
  background: #0e171d;
  color: #f3f4f2;
}
body.theme-cinema .file-label strong,
body.theme-cinema .file-label span { color: #f3f4f2; }
body.theme-cinema .file-label small { color: #a5afb5; }
body.theme-cinema .file-label.drag-over { background: rgba(217, 30, 32, 0.12); }
body.theme-cinema .calc-box {
  background: #0e171d;
  border-color: #57738355;
}
body.theme-cinema .calc-optional,
body.theme-cinema .calc-note,
body.theme-cinema .calc-summary::after,
body.theme-cinema .calc-box .form-result { color: #a5afb5; }
body.theme-cinema .calc-box[open] .calc-summary { border-bottom-color: var(--line); }
body.theme-cinema .consent { color: #a5afb5; }
body.theme-cinema .consent a { color: #dce0e2; }
body.theme-cinema .form-result {
  background: #15232b;
  border-color: #57738355;
  color: #f3f4f2;
}
body.theme-cinema .contact-page .lead,
body.theme-cinema .answer-page .lead,
body.theme-cinema .answer-card p { color: #a5afb5; }
body.theme-cinema .answer-card,
body.theme-cinema .contact-checklist { border-top-color: var(--line); }
body.theme-cinema .answer-card a { color: #ff8a7a; }
body.theme-cinema .scroll-orbit {
  background: rgba(13, 16, 18, 0.96);
  border-color: var(--line);
  color: #f3f4f2;
  box-shadow: 0 16px 44px #0008;
}
body.theme-cinema .disassembly-bar {
  background: rgba(13, 16, 18, 0.96);
  border-top-color: var(--line);
  color: #dce0e2;
}
body.theme-cinema .footer { border-top-color: var(--line); }
body.theme-cinema .footer-links a { color: #dce0e2; }
body.theme-cinema .mobile-cta {
  background: rgba(13,16,18,.95);
  border-top-color: var(--line);
}

.cover-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  background: #14191c;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.cover-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cover-card img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center 72%;
  transform: scale(1.04);
  transition: transform .7s var(--ease);
  animation: cinema-kenburns 18s var(--ease) infinite alternate;
  z-index: 0;
}
.cover-card:hover img { transform: scale(1.08); animation-play-state: paused; }
.cover-card .number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #dce0e2;
  padding: 14px 16px 0;
}
.cover-card .mono {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #96aebd;
  padding: 14px 16px 0;
}
@keyframes cinema-kenburns {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to { transform: scale(1.1) translate3d(0,-1.5%,0); }
}
.cover-card:after { display: none; }
.cover-card .mono,
.cover-card h3,
.cover-card p,
.cover-card .number { position: relative; z-index: 2; }
.cover-card h3 {
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  margin: 8px 0 0;
  padding: 0 16px;
  color: #fff;
  max-width: none;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.cover-card p {
  color: #c5ced3;
  font-size: 13px;
  line-height: 1.5;
  max-width: none;
  margin: 8px 0 0;
  padding: 0 16px 16px;
  overflow-wrap: break-word;
  word-break: normal;
}
.cover-card > .arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13,16,18,.72);
  color: #f3f4f2;
}
.cover-card .number .arrow {
  position: static;
  width: auto;
  height: auto;
  background: none;
}
body.theme-cinema .service-stage .poster {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}

body.theme-cinema .nav.open {
  z-index: 420;
  background: #0d1012;
  border-bottom-color: var(--line);
  box-shadow: 0 24px 48px #000c;
}

@media (max-width: 1440px) {
  body.theme-cinema .contour-switch { display: none; }
  body.theme-cinema .contour-switch-menu { display: block; position: relative; z-index: 430; }
}
@media (max-width: 1100px) {
  body.theme-cinema .nav,
  body.theme-cinema .nav.open {
    z-index: 420;
    background: #0d1012;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px #000c;
  }
  body.theme-cinema .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 22px 22px;
  }
}
@media (max-width: 680px) {
  body.theme-cinema .contour-switch,
  body.theme-cinema .contour-switch-menu { display: none; }
  body.theme-cinema .hero h1,
  body.theme-cinema h1 {
    font-size: clamp(32px, 9.2vw, 48px) !important;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  body.theme-cinema .formats {
    flex-wrap: wrap;
    gap: 14px 22px;
    overflow: visible;
    white-space: normal;
  }
}
@media (max-width: 900px) {
  body.theme-cinema .services-grid,
  body.theme-cinema .direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cover-card h3 { font-size: 16px; }
  .cover-card p { font-size: 12px; padding-bottom: 14px; }
}
@media (max-width: 680px) {
  body.theme-cinema .services-grid,
  body.theme-cinema .direction-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cover-card img { aspect-ratio: 16 / 9; }
  .cover-card h3 { font-size: 20px; }
  .cover-card p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-orb, .cinema-grid, .cinema-grain, .cover-card img { animation: none !important; transition: none !important; }
  .cover-card:hover, .cover-card:hover img { transform: none; }
}