/* physicsbase cinematic image layer
   Keeps the existing evidence-first datasheet UI, then adds depth, motion and
   purpose-built simulation imagery. Every moving treatment has a reduced-motion
   fallback and every image remains useful without JavaScript. */

:root{
  --cinema-black:#080807;
  --cinema-ivory:#f1ede4;
  --cinema-orange:#ff3b00;
  --cinema-blue:#00a8ff;
}

/* Hero: the generated field becomes a live canvas, with the original response
   panel retained as a real product artifact rather than decorative chrome. */
.hero-side-cinema{
  position:relative;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:var(--cinema-black);
}
.hero-cinema{
  position:absolute;
  inset:0;
  overflow:hidden;
  color:var(--cinema-ivory);
  background:#0b0b09;
  --cinema-x:0px;
  --cinema-y:0px;
}
.hero-cinema::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 35%,transparent 0 28%,rgba(0,0,0,.38) 73%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
  opacity:.55;
}
.hero-cinema > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:66% center;
  filter:saturate(.94) contrast(1.04) brightness(.78);
  transform:translate3d(var(--cinema-x),var(--cinema-y),0) scale(1.08);
  transition:transform 1.4s cubic-bezier(.16,.84,.34,1),filter .8s ease;
  animation:cinema-camera 18s ease-in-out infinite alternate;
}
.hero-cinema > .cinema-slide{
  position:absolute;
  inset:0;
  opacity:0;
  object-fit:contain;
  object-position:center 42%;
  animation:none;
  transform:none;
  transition:opacity 1.2s ease-in-out;
  filter:saturate(.94) brightness(.9);
}
.hero-cinema > .cinema-slide.is-active{opacity:1}
.cinema-toggle{font:inherit;color:inherit;background:#141310;border:1px solid #6f695e;padding:6px 8px;cursor:pointer}
.cinema-toggle:focus-visible{outline:2px solid #ff3b00;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hero-cinema > .cinema-slide{transition:none}}
.hero-cinema-wash{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,8,7,.68),transparent 24%,transparent 58%,rgba(8,8,7,.98) 96%),
    linear-gradient(90deg,rgba(8,8,7,.44),transparent 44%);
}
.hero-cinema-top{
  position:absolute;
  z-index:4;
  top:17px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:9.5px;
  letter-spacing:.12em;
  color:rgba(241,237,228,.72);
}
.hero-cinema-top span:first-child{display:flex;align-items:center;gap:8px}
.hero-cinema-top i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#59e18f;
  box-shadow:0 0 15px rgba(89,225,143,.9);
}
.hero-cinema-result{
  position:absolute;
  z-index:4;
  top:62px;
  left:20px;
  max-width:330px;
  text-shadow:0 2px 24px rgba(0,0,0,.85);
}
.hero-cinema-result .tag{color:#ffb095;font-size:9.5px}
.hero-cinema-result strong{
  display:block;
  margin-top:8px;
  font-size:clamp(22px,2.4vw,34px);
  line-height:1;
  letter-spacing:-.045em;
}
.hero-cinema-result p{
  max-width:33ch;
  margin-top:10px;
  color:rgba(241,237,228,.72);
  font-size:12px;
  line-height:1.5;
}
.hero-cinema-telemetry{
  position:absolute;
  z-index:4;
  left:20px;
  right:20px;
  bottom:282px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hero-cinema-telemetry span{
  padding:5px 8px;
  border:1px solid rgba(241,237,228,.25);
  background:rgba(8,8,7,.5);
  backdrop-filter:blur(8px);
  color:rgba(241,237,228,.74);
  font-size:8.5px;
  letter-spacing:.08em;
}
.hero-cinema-scan{
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  left:28%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,59,0,.95) 42%,transparent 84%);
  box-shadow:0 0 24px rgba(255,59,0,.72);
  opacity:.68;
  animation:cinema-scan 8s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.hero-side-cinema > .panel{
  position:absolute;
  z-index:5;
  left:18px;
  right:18px;
  bottom:18px;
  height:246px;
  border:1px solid rgba(241,237,228,.2);
  background:rgba(15,14,12,.86);
  box-shadow:0 24px 70px rgba(0,0,0,.44);
  backdrop-filter:blur(14px) saturate(120%);
}
.hero-side-cinema > .panel .ph{padding:9px 12px;font-size:8.5px}
.hero-side-cinema > .panel pre{padding:12px 14px;font-size:9.5px;line-height:1.42}

@keyframes cinema-camera{
  0%{transform:translate3d(calc(var(--cinema-x) - 8px),calc(var(--cinema-y) + 2px),0) scale(1.08)}
  100%{transform:translate3d(calc(var(--cinema-x) + 8px),calc(var(--cinema-y) - 3px),0) scale(1.115)}
}
@keyframes cinema-scan{
  from{transform:translateX(-90px);opacity:.28}
  to{transform:translateX(240px);opacity:.76}
}

/* A dark editorial gallery: the campaign artwork now functions as a visual
   explanation of the engine's range, with captions kept as accessible HTML. */
.cinema{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:86px 0 96px;
  color:var(--cinema-ivory);
  background:
    radial-gradient(circle at 76% 18%,rgba(0,120,255,.10),transparent 31%),
    radial-gradient(circle at 18% 80%,rgba(255,59,0,.13),transparent 30%),
    var(--cinema-black);
  border-color:#343128;
}
.cinema::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(241,237,228,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(241,237,228,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.cinema-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:70px;
  padding-bottom:42px;
}
.cinema-eyebrow{
  display:block;
  margin-bottom:18px;
  color:#ff8a64;
  font-size:10px;
  letter-spacing:.16em;
}
.cinema-head h2{
  max-width:12ch;
  font-size:clamp(2.6rem,5.8vw,5.65rem);
  line-height:.88;
  letter-spacing:-.06em;
  font-weight:600;
}
.cinema-head h2 em{font-style:normal;color:var(--cinema-orange)}
.cinema-head > p{
  max-width:46ch;
  padding-bottom:7px;
  color:rgba(241,237,228,.62);
  font-size:16px;
  line-height:1.6;
}
.cinema-stage{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:400px 360px;
  gap:16px;
  perspective:1400px;
}
.cinema-shot{
  position:relative;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
  min-height:0;
  margin:0;
  border:1px solid rgba(241,237,228,.16);
  background:var(--cinema-black);
  box-shadow:0 35px 90px rgba(0,0,0,.32);
}
.cinema-shot::after{
  content:none;
}
.cinema-shot img{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:block;
  box-sizing:border-box;
  padding:8px;
  object-fit:contain;
  object-position:center;
  background:var(--cinema-black);
  filter:saturate(.94) brightness(.94);
  transition:filter .5s ease;
}
.cinema-shot:hover img{filter:saturate(1.04) brightness(1.01)}
.cinema-shot figcaption{
  position:relative;
  display:grid;
  gap:6px;
  min-height:68px;
  align-content:center;
  padding:13px 18px 15px;
  border-top:1px solid rgba(241,237,228,.14);
  background:#0b0b09;
}
.cinema-shot figcaption span{color:#ff936f;font-size:8.5px;letter-spacing:.12em}
.cinema-shot figcaption strong{max-width:31ch;font-size:15px;line-height:1.2;letter-spacing:-.01em}
.cinema-shot-wide{grid-column:1/9;grid-row:1}
.cinema-shot-tall{grid-column:9/13;grid-row:1/3}
.cinema-shot-square{grid-column:1/5;grid-row:2}
.cinema-manifesto{
  grid-column:5/9;
  grid-row:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
  border:1px solid rgba(241,237,228,.16);
  background:
    linear-gradient(145deg,rgba(255,59,0,.13),transparent 50%),
    rgba(241,237,228,.045);
}
.cinema-manifesto > span{color:#ff936f;font-size:9px;letter-spacing:.15em}
.cinema-manifesto p{max-width:22ch;margin-top:18px;font-size:22px;line-height:1.13;letter-spacing:-.035em}
.cinema-manifesto a{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:24px;
  padding-top:15px;
  border-top:1px solid rgba(241,237,228,.22);
  color:rgba(241,237,228,.68);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.cinema-manifesto a:hover{color:#fff}

@media(max-width:880px){
  .hero-side-cinema{min-height:610px!important}
  .hero-cinema > img{object-position:62% center}
  .cinema{padding:68px 0}
  .cinema-head{grid-template-columns:1fr;gap:26px}
  .cinema-head h2{max-width:10ch}
  .cinema-stage{grid-template-rows:500px 380px 700px}
  .cinema-shot-wide{grid-column:1/13;grid-row:1}
  .cinema-shot-square{grid-column:1/7;grid-row:2}
  .cinema-manifesto{grid-column:7/13;grid-row:2}
  .cinema-shot-tall{grid-column:1/13;grid-row:3;width:min(100%,520px);
    justify-self:center}
}

@media(max-width:560px){
  .hero-side-cinema{min-height:590px!important}
  .hero-cinema-result{left:16px;right:16px;top:58px}
  .hero-cinema-result p{max-width:29ch}
  .hero-cinema-telemetry{left:16px;right:16px;bottom:274px}
  .hero-cinema-telemetry span:last-child{display:none}
  .hero-side-cinema > .panel{left:10px;right:10px;bottom:10px;height:240px}
  .hero-side-cinema > .panel pre{font-size:8.8px}
  .cinema{padding:58px 0}
  .cinema-head,.cinema-stage{padding-left:18px;padding-right:18px}
  .cinema-head h2{font-size:3rem}
  .cinema-stage{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:12px}
  .cinema-shot,.cinema-manifesto{flex:0 0 84vw;height:440px;scroll-snap-align:center}
  .cinema-shot-wide{height:300px}
  .cinema-shot-square{height:430px}
  .cinema-shot-tall{width:auto;height:620px}
  .cinema-manifesto{height:300px}
}

@media(prefers-reduced-motion:reduce){
  .hero-cinema > img,.hero-cinema-scan{animation:none!important;transform:none!important}
  .cinema-shot img,.cinema-shot:hover img{transition:none!important}
}

/* Copilot proof-load preview -------------------------------------------------
   The generated contour supplies the complex geometry; loads, supports and the
   SI legend remain crisp HTML so the engineering story survives every crop. */
.copilot-fea-frame{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(233,229,218,.16);
  background:#080908;
}
.copilot-fea-frame > svg{display:none}
.copilot-fea-viewport{
  position:relative;
  min-height:258px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 44% 48%,rgba(18,93,126,.16),transparent 46%),
    #080908;
}
.copilot-fea-viewport::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 72%,rgba(8,9,8,.68) 88%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px);
}
.copilot-fea-viewport > img{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:46% center;
  filter:saturate(1.06) contrast(1.07) brightness(.92);
  transform:scale(1.02);
}
.fea-load{
  position:absolute;
  z-index:5;
  width:2px;
  height:34px;
  background:#ff3b00;
  box-shadow:0 0 10px rgba(255,59,0,.55);
  animation:fea-load-pulse 2.2s ease-in-out infinite;
}
.fea-load::before{
  content:"";
  position:absolute;
  left:-4px;
  top:-1px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:8px solid #ff3b00;
}
.fea-load span{
  position:absolute;
  left:7px;
  top:7px;
  white-space:nowrap;
  color:#ff8b65;
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.04em;
  text-shadow:0 1px 8px #000;
}
.fea-load-a{left:14%;top:49%}
.fea-load-b{left:28%;top:23%;animation-delay:-.4s}
.fea-load-c{left:66%;top:30%;animation-delay:-.8s}
.fea-load-d{left:78%;top:45%;animation-delay:-1.2s}
.fea-fix{
  position:absolute;
  z-index:5;
  width:25px;
  height:8px;
  border-top:2px solid #f1ede4;
  background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(241,237,228,.8) 4px 5px);
  filter:drop-shadow(0 1px 4px #000);
}
.fea-fix::before{
  content:"";
  position:absolute;
  left:9px;
  top:-11px;
  width:7px;
  height:9px;
  border-left:1px solid #f1ede4;
  border-right:1px solid #f1ede4;
}
.fea-fix span{
  position:absolute;
  left:29px;
  top:-5px;
  color:#d5d0c4;
  font-family:var(--mono);
  font-size:6.5px;
  letter-spacing:.08em;
}
.fea-fix-a{left:40%;top:84%}
.fea-fix-b{left:58%;top:77%}
.fea-legend{
  position:absolute;
  z-index:6;
  top:17px;
  right:12px;
  bottom:18px;
  width:49px;
  color:#d6d1c5;
  font-family:var(--mono);
  font-size:7px;
}
.fea-legend b{position:absolute;top:0;right:2px;font-weight:400;color:#f1ede4}
.fea-legend i{
  position:absolute;
  top:23px;
  right:0;
  bottom:18px;
  width:9px;
  border:1px solid rgba(241,237,228,.3);
  background:linear-gradient(180deg,#fde725 0%,#5ec962 24%,#21918c 48%,#3b528b 73%,#440154 100%);
}
.fea-legend-max{position:absolute;top:23px;right:14px;white-space:nowrap}
.fea-legend-min{position:absolute;right:14px;bottom:15px;white-space:nowrap}
.fea-axis{
  position:absolute;
  z-index:6;
  left:11px;
  bottom:13px;
  width:34px;
  height:32px;
  color:#cfc9bc;
  font-family:var(--mono);
  font-size:6px;
}
.fea-axis i{position:absolute;left:9px;bottom:8px;width:18px;height:1px;transform-origin:left center}
.fea-axis .x{background:#ff4d37;transform:rotate(-10deg)}
.fea-axis .y{background:#5bdd7a;transform:rotate(-112deg)}
.fea-axis .z{background:#55a7ff;transform:rotate(-48deg)}
.fea-axis span{position:absolute}
.fea-axis span:nth-of-type(1){right:0;bottom:7px;color:#ff7d69}
.fea-axis span:nth-of-type(2){left:0;top:0;color:#77e58d}
.fea-axis span:nth-of-type(3){right:7px;top:0;color:#7eb9ff}
.fea-preview-label{
  position:absolute;
  z-index:6;
  left:12px;
  top:10px;
  padding:4px 6px;
  border:1px solid rgba(255,122,77,.38);
  background:rgba(8,9,8,.72);
  color:#ff8b65;
  font-size:6.5px;
  letter-spacing:.09em;
}
@keyframes fea-load-pulse{
  0%,100%{transform:translateY(2px);opacity:.72}
  50%{transform:translateY(-3px);opacity:1}
}
@media(max-width:1050px){
  .copilot-fea-viewport{min-height:230px}
  .fea-load span{display:none}
}
@media(max-width:820px){
  .copilot-fea-viewport{min-height:300px}
  .fea-load span{display:block}
}
@media(max-width:520px){
  .copilot-fea-viewport{min-height:230px}
  .fea-load span{display:none}
  .fea-legend{right:7px}
}
@media(prefers-reduced-motion:reduce){.fea-load{animation:none}}