/* NGT cinematic effects layer.
   Visual effects only: it never changes the site's text, images or layout.
   Delete the two <link>/<script> tags pointing at /cinematic/ to switch it off. */

:root {
  --cin-brand: 12, 93, 226;     /* #0C5DE2 */
  --cin-accent: 56, 189, 248;   /* sky-400 */
  --cin-ease: cubic-bezier(.16, 1, .3, 1);
}

/* 1. Opening shot: letterbox bars part to reveal the page (on full page loads). */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 50vh;
  background: #05070d;
  z-index: 2147483000;
  pointer-events: none;
  animation: cin-curtain 1.25s var(--cin-ease) .15s forwards;
}
body::before { top: 0;    transform-origin: top; }
body::after  { bottom: 0; transform-origin: bottom; }
@keyframes cin-curtain {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); visibility: hidden; }
}

/* 2. Scroll progress bar. */
#cin-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147482000;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgb(var(--cin-brand)), rgb(var(--cin-accent)));
  box-shadow: 0 0 12px rgba(var(--cin-brand), .6);
}

/* 3. 3D particle field over the first (hero) section. */
#cin-stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* 4. Cursor spotlight. */
#cin-spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  mix-blend-mode: multiply;
  background: radial-gradient(circle, rgba(var(--cin-brand), .10) 0%, rgba(var(--cin-accent), .05) 35%, transparent 70%);
  will-change: transform;
}
#cin-spot.cin-on { opacity: 1; }

/* 5. Film grain. */
#cin-grain {
  position: fixed;
  inset: -50%;
  z-index: 2147481000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cin-grain 1s steps(6) infinite;
}
@keyframes cin-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* 6. Scroll reveal: elements rise out of a soft focus as they enter the frame.
   Uses the standalone translate/scale properties so it stacks with the
   site's own Tailwind transforms instead of replacing them. */
[data-cin-reveal] {
  transition:
    opacity 1s var(--cin-ease) var(--cin-delay, 0ms),
    translate 1.2s var(--cin-ease) var(--cin-delay, 0ms),
    scale 1.2s var(--cin-ease) var(--cin-delay, 0ms),
    filter 1s var(--cin-ease) var(--cin-delay, 0ms);
}
[data-cin-reveal="wait"] {
  opacity: 0;
  translate: 0 56px;
  scale: .96;
  filter: blur(10px);
}

/* 7. 3D tilt cards and magnetic buttons (motion is driven from cinematic.js). */
[data-cin-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-cin-mag]  { transition: translate .45s var(--cin-ease); }

/* Accessibility and print: no motion, everything visible. */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, #cin-grain, #cin-stars, #cin-spot { display: none !important; }
  [data-cin-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; transition: none !important; }
}
@media print {
  body::before, body::after, #cin-progress, #cin-grain, #cin-stars, #cin-spot { display: none !important; }
  [data-cin-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
}