/* Nobal Sanat — the cinematic tour overlay that sits on top of the hero canvas.
   The canvas stays sharp; a masked backdrop-filter softens everything except a
   circle around the assembly being introduced. v1.0.0 */

.nsc-hero__stage{ position:relative; }

.nsc-cin{
  /* z-index 1, not 4: .nsc-hero__stage never makes a stacking context, so this
     layer competes directly with .nsc-hero__copy (z-index 2). Anything higher
     and the veil would blur the headline and the buttons as well. */
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
  --fx:50%; --fy:50%; --r0:120px; --r1:240px; --cx:20px; --cy:20px;
  --cin-acc:#FFC61E;
}

/* ---------------------------------------------------------------- the veil */
.nsc-cin__veil{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility 0s linear .55s;
  background:rgba(7,10,13,.40);
  -webkit-backdrop-filter:blur(8px) saturate(.72);
          backdrop-filter:blur(8px) saturate(.72);
  -webkit-mask-image:radial-gradient(circle at var(--fx) var(--fy), rgba(0,0,0,0) var(--r0), #000 var(--r1));
          mask-image:radial-gradient(circle at var(--fx) var(--fy), rgba(0,0,0,0) var(--r0), #000 var(--r1));
}
.nsc-cin.is-mob .nsc-cin__veil{
  background:rgba(7,10,13,.50);
  -webkit-backdrop-filter:blur(4px) saturate(.8);
          backdrop-filter:blur(4px) saturate(.8);
}
.nsc-cin.is-on .nsc-cin__veil{ opacity:1; visibility:visible; transition:opacity .55s ease, visibility 0s; }

/* ------------------------------------------------------------ leader line */
.nsc-cin__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.nsc-cin__lead{
  stroke:var(--cin-acc); stroke-width:1.1; opacity:0;
  stroke-dasharray:460; stroke-dashoffset:460;
}
.nsc-cin.is-on .nsc-cin__lead{
  opacity:.92; animation:nsc-cin-draw .6s cubic-bezier(.22,.9,.3,1) .1s forwards;
}
@keyframes nsc-cin-draw{ to{ stroke-dashoffset:0; } }

/* ----------------------------------------------------------- the lock-on */
.nsc-cin__ring{
  position:absolute; left:var(--fx); top:var(--fy);
  width:calc(var(--r0)*2); height:calc(var(--r0)*2);
  margin-left:calc(var(--r0)*-1); margin-top:calc(var(--r0)*-1);
  opacity:0; transition:opacity .5s ease;
}
.nsc-cin.is-on .nsc-cin__ring{ opacity:1; }
.nsc-cin__ring i{ position:absolute; inset:0; border-radius:50%; }
.nsc-cin__ring i:first-child{
  border:1px solid rgba(255,198,30,.9);
  box-shadow:inset 0 0 0 1px rgba(7,10,13,.5), 0 0 26px rgba(255,198,30,.16);
}
.nsc-cin.is-on .nsc-cin__ring i:first-child{ animation:nsc-cin-pop .6s cubic-bezier(.16,1,.3,1); }
.nsc-cin__ring i:last-child{
  inset:-11px; border:1px dashed rgba(255,198,30,.32);
  animation:nsc-cin-spin 22s linear infinite;
}
.nsc-cin__ring b{
  position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-5px 0 0 -5px;
  border:1px solid var(--cin-acc); border-radius:50%; background:rgba(255,198,30,.22);
}
@keyframes nsc-cin-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes nsc-cin-pop{ from{ transform:scale(.72); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ------------------------------------------------------------- the caption */
.nsc-cin__card{
  position:absolute; left:var(--cx); top:var(--cy);
  width:min(300px, 60%); padding:12px 14px 13px;
  background:linear-gradient(180deg, rgba(12,16,20,.92), rgba(12,16,20,.80));
  border:1px solid rgba(255,198,30,.26);
  border-inline-start:2px solid var(--cin-acc);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transform:translateY(9px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.nsc-cin.is-on .nsc-cin__card{ opacity:1; transform:none; }
.nsc-cin__code{
  display:block; font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:.2em; color:var(--cin-acc); margin-bottom:6px;
}
.nsc-cin__title{ display:block; font-size:16px; font-weight:800; line-height:1.65; color:#F2F5F8; }
.nsc-cin__note{ display:block; margin-top:5px; font-size:12.5px; line-height:1.9; color:#A9B3BE; }
.nsc-cin.is-mob .nsc-cin__card{ width:min(230px, 74%); padding:9px 11px 10px; }
.nsc-cin.is-mob .nsc-cin__title{ font-size:13.5px; }
.nsc-cin.is-mob .nsc-cin__note{ font-size:11px; line-height:1.8; }

/* -------------------------------------------------------- the chapter line */
.nsc-cin__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.06); }
.nsc-cin__bar i{ display:block; height:100%; width:0; background:var(--cin-acc); opacity:.7; }

/* the model no longer answers the pointer, so nothing may look draggable */
.nsc-hero .nsc-hero__stage canvas{ cursor:default !important; touch-action:auto !important; }

/* nothing is draggable any more, so the invitation to drag has to go */
.nsc-hero__hint{ display:none !important; }

@media (prefers-reduced-motion: reduce){ .nsc-cin{ display:none; } }