/* OddBox cinematic artwork layer.
   Original HTML, embedded styles and animation scripts remain intact.
   Remove this stylesheet link to return to the original presentation. */

.cinematic-page {
  --cinema-cyan: #5fe0c8;
}

/* Paths in --section-photo are relative to the PAGE (the variable is used by the page's own styles),
   so they include assets/. Paths in --cinematic-scene are used inside this file and stay relative to it. */

/* Full-bleed environments sit behind the original content and canvases. */
.cinematic-home .photo-hero {
  --section-photo: url("assets/images/intelligence-sanctuary.webp");
}
.cinematic-home .photo-industry {
  --section-photo: url("assets/images/precision-factory.webp");
}
.cinematic-home .photo-contact {
  --section-photo: url("assets/images/intelligence-sanctuary.webp");
}
.cinematic-home .photo-hero::before {
  opacity: .94;
  filter: none;
  background-position: 63% center;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 82%, transparent);
}
.cinematic-home .photo-hero::after {
  background: linear-gradient(90deg, #0b0e11da 0%, #0b0e1180 43%, #0b0e1130 72%, #0b0e113d 100%);
}
.cinematic-home .photo-industry::before {
  opacity: .68;
  filter: none;
  background-position: 62% center;
}
.cinematic-home .photo-industry::after {
  background: linear-gradient(90deg, #0b0e11e8, #0b0e11a8 45%, #0b0e1155);
}
.cinematic-home .photo-hardware::before {
  opacity: .48;
  filter: saturate(.8) contrast(1.08);
}
.cinematic-home .photo-contact::before {
  opacity: .72;
  filter: none;
  background-position: 70% center;
}
.cinematic-home .photo-contact::after {
  background: linear-gradient(90deg, #0b0e11d9, #0b0e117a);
}

.cinematic-portfolio .p-hero,
.cinematic-industry .p-hero,
.cinematic-fusion .p-hero {
  position: relative;
  isolation: isolate;
}
.cinematic-portfolio .p-hero {
  --cinematic-scene: url("images/intelligence-sanctuary.webp");
  --cinematic-position: 68% center;
}
.cinematic-industry .p-hero {
  --cinematic-scene: url("images/precision-factory.webp");
  --cinematic-position: 63% center;
}
.cinematic-fusion .p-hero {
  --cinematic-scene: url("images/fusion-chamber.webp");
  --cinematic-position: 64% center;
}
.cinematic-page .p-hero::before,
.cinematic-page .p-hero::after {
  content: "";
  position: absolute;
  top: -38px;
  bottom: -32px;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent);
}
.cinematic-page .p-hero::before {
  z-index: -2;
  background-image: var(--cinematic-scene);
  background-size: cover;
  background-position: var(--cinematic-position);
  opacity: .88;
}
.cinematic-page .p-hero::after {
  z-index: -1;
  background: linear-gradient(90deg, #0b0e11e8 0%, #0b0e11bf 36%, #0b0e117d 62%, #0b0e1130 100%);
}
.cinematic-fusion .p-hero::after {
  background: linear-gradient(90deg, #0b0e11ed 0%, #0b0e11c9 42%, #0b0e118c 68%, #0b0e1140 100%);
}

/* Keep decoding overlays, original transforms and reveal classes untouched. */
.cinematic-page .hero-head,
.cinematic-page .p-hero h1 {
  text-shadow: 0 3px 28px #0009;
}
.cinematic-page .hero-sub,
.cinematic-page .p-sub {
  text-shadow: 0 2px 18px #000b;
}
.cinematic-page .hero-label,
.cinematic-page .kicker {
  text-shadow: 0 0 22px #c3f36b32;
}
.cinematic-page .hero .manifest {
  background: linear-gradient(135deg, #14211bdc, #0d1519eb 62%);
  border-color: #b6e87945;
  box-shadow: 0 32px 90px #0009, 0 0 75px #5fe0c80d, inset 0 1px 0 #eaffcc15;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cinematic-page .manifest .m-top {
  border-bottom-color: #b8df892b;
}
.cinematic-page .manifest li.final {
  background: linear-gradient(90deg, #c3f36b12, #5fe0c80b);
  border-color: #c3f36b35;
}
.cinematic-page .btn.primary {
  box-shadow: 0 8px 28px #c3f36b15, inset 0 1px 0 #ffffff45;
}
.cinematic-page .btn.primary:hover {
  box-shadow: 0 12px 35px #c3f36b2b, inset 0 1px 0 #ffffff55;
}
.cinematic-page .btn.ghost {
  background: #0c151ab3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Light the existing frames, diagrams and real product screenshots. */
.cinematic-page .vault-fig,
.cinematic-page .term {
  box-shadow: 0 24px 72px #0007, 0 0 70px #5fe0c807, inset 0 1px 0 #c3f36b14;
}
.cinematic-page .photo-hardware .opt {
  background: linear-gradient(130deg, #15211cea, #0c1419ec);
  box-shadow: 0 18px 50px #0004, inset 0 1px 0 #eaffcc0a;
}
.cinematic-page .contact {
  background: linear-gradient(115deg, #101a1dec, #111b1bdc);
  border-color: #b5dd7935;
  box-shadow: 0 28px 90px #0007, inset 0 1px 0 #c3f36b12;
}
.cinematic-page .pf-card,
.cinematic-page .card {
  box-shadow: 0 18px 55px #0004, inset 0 1px 0 #c3f36b0b;
}
.cinematic-page .pf-card:hover,
.cinematic-page .card:hover {
  box-shadow: 0 22px 65px #0006, 0 0 32px #5fe0c80b, inset 0 1px 0 #c3f36b16;
}
.cinematic-fusion .tok {
  border: 1px solid #8cd6bb29;
  border-radius: 24px;
  padding: 22px;
  background: radial-gradient(ellipse at 50% 45%, #5fe0c80c, transparent 70%), #0b1319cf;
  box-shadow: 0 25px 75px #0007, inset 0 1px 0 #c3f36b14;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cinematic-page .masthead {
  border-bottom-color: #a9cc8225;
}

/* Lighter image downloads on narrow screens; content layout stays original. */
@media (max-width: 760px) {
  .cinematic-home .photo-hero,
  .cinematic-home .photo-contact {
    --section-photo: url("assets/images/intelligence-sanctuary-mobile.webp");
  }
  .cinematic-home .photo-industry {
    --section-photo: url("assets/images/precision-factory-mobile.webp");
  }
  .cinematic-portfolio .p-hero {
    --cinematic-scene: url("images/intelligence-sanctuary-mobile.webp");
  }
  .cinematic-industry .p-hero {
    --cinematic-scene: url("images/precision-factory-mobile.webp");
  }
  .cinematic-fusion .p-hero {
    --cinematic-scene: url("images/fusion-chamber-mobile.webp");
  }
  .cinematic-home .photo-hero::before {
    opacity: .72;
    background-position: 67% center;
  }
  .cinematic-home .photo-hero::after {
    background: linear-gradient(180deg, #0b0e11a8, #0b0e119e 60%, #0b0e11c9);
  }
  .cinematic-page .p-hero::before {
    opacity: .69;
    background-position: 70% center;
  }
  .cinematic-page .p-hero::after {
    background: linear-gradient(90deg, #0b0e11df, #0b0e11a8);
  }
  .cinematic-fusion .tok {
    padding: 14px;
  }
}

/* Existing motion preferences and animation timing are inherited unchanged. */
@media (prefers-reduced-transparency: reduce) {
  .cinematic-page .hero .manifest,
  .cinematic-page .contact,
  .cinematic-fusion .tok {
    background-color: #10191d;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Cooling page hero */
.cinematic-cooling .p-hero{position:relative;isolation:isolate;--cinematic-scene:url("images/cooling-hall.webp");--cinematic-position:60% center}
@media (max-width:760px){.cinematic-cooling .p-hero{--cinematic-scene:url("images/cooling-hall-mobile.webp")}}

/* Animated backgrounds (assets/cine-video.js): a looping 3D scene over the still, under the shading.
   !important keeps page rules such as ".hero>div" from turning the layer into a layout item. */
div.cine-bgv{position:absolute!important;z-index:-2!important;top:0!important;bottom:0!important;left:50%!important;right:auto!important;width:100vw!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;transform:translateX(-50%)!important;
  overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.8s ease;grid-area:auto!important;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent)}
div.cine-bgv.on{opacity:var(--bgv-op,.85)}
div.cine-bgv video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--bgv-pos,center)}
.cinematic-page .p-hero div.cine-bgv{top:-38px!important;bottom:-32px!important}
@media (prefers-reduced-motion:reduce){div.cine-bgv{display:none!important}}

/* Section 02 "the engine": the vault graph plays behind the text, shaded so the words stay readable. */
.cinematic-home #vault{position:relative;isolation:isolate}
div.cine-bgv[data-shade]::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0b0e11f0 0%,#0b0e11b4 42%,#0b0e1188 70%,#0b0e11a0 100%)}
/* the section is tall: show the whole graph, centred, instead of a close-up */
.cinematic-home #vault div.cine-bgv video{object-fit:contain;background:#0b0e11}
@media (max-width:760px){div.cine-bgv[data-shade]::after{background:#0b0e11cc}.cinematic-home #vault div.cine-bgv video{object-fit:cover}}