/* ==========================================================================
   SIA Labs - Cinematic motion layer  (v1.0)
   Loaded on the front page only. Sits on top of the existing React app and
   never changes its markup. Everything here is switched off for visitors who
   ask for reduced motion (the html.sia-cine class is never added for them).
   ========================================================================== */

:root {
  --sia-cine-gold: 225, 193, 132;
  --sia-cine-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- 1. Before the script starts: hide only the hero pieces it will animate.
         A 4 s safety timer in the <head> snippet removes this if JS fails. -- */
html.sia-cine:not(.sia-cine-ready) .sx-copy > *,
html.sia-cine:not(.sia-cine-ready) .sx-art,
html.sia-cine:not(.sia-cine-ready) .sx-panel-slot,
html.sia-cine:not(.sia-cine-ready) .sx-strip,
html.sia-cine:not(.sia-cine-ready) .sx-hero__skyline,
html.sia-cine:not(.sia-cine-ready) .hero-copy > *,
html.sia-cine:not(.sia-cine-ready) .hero .network,
html.sia-cine:not(.sia-cine-ready) .hero-footer {
  opacity: 0;
}

/* Black cover for the very first paint while the intro is being built. */
html.sia-cine-intro body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #050608;
}

/* --- 2. The gate: logo alone on a dark screen, click to enter ------------ */
.sia-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --x: 50%;
  --y: 45%;
}
.sia-intro.is-entering { cursor: default; }
.sia-intro__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px circle at var(--x) var(--y), rgba(var(--sia-cine-gold), .09), transparent 62%);
  transition: opacity .6s ease;
}
.sia-intro.is-entering .sia-intro__light { opacity: 0; }
.sia-gate {
  all: unset;
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px;
  border-radius: 50%;
  cursor: pointer;
}
.sia-gate:focus-visible { outline: 1px solid rgba(var(--sia-cine-gold), .7); outline-offset: 4px; }
.sia-gate__fly {
  position: relative;
  display: grid;
  place-items: center;
  transition: transform .5s var(--sia-cine-ease);
  will-change: transform;
}
.sia-gate__halo {
  position: absolute;
  inset: -45% -28%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--sia-cine-gold), .2), transparent 72%);
  animation: sia-breathe 3.6s ease-in-out infinite;
}
.sia-gate__ring {
  position: absolute;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(var(--sia-cine-gold), .32);
  opacity: 0;
}
.sia-intro.is-ready:not(.is-entering) .sia-gate__ring { animation: sia-ring 2.8s ease-out infinite; }
.sia-intro__logo { transition: filter .5s ease, scale .5s var(--sia-cine-ease); }
.sia-gate:hover .sia-intro__logo,
.sia-gate:focus-visible .sia-intro__logo {
  scale: 1.04;
  filter: drop-shadow(0 0 44px rgba(var(--sia-cine-gold), .6));
}
.sia-gate__word {
  font: 600 28px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .3em;
  color: rgb(var(--sia-cine-gold));
}
.sia-intro__hint {
  margin-top: 22px;
  padding: 14px 26px 14px calc(26px + .3em);
  font: 600 clamp(15px, 2vw, 18px)/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #fff6e0;
  border: 1px solid rgba(var(--sia-cine-gold), .7);
  border-radius: 999px;
  background: rgba(var(--sia-cine-gold), .1);
  box-shadow: 0 0 30px -6px rgba(var(--sia-cine-gold), .55);
  opacity: 0;
  translate: 0 8px;
  transition: opacity .8s ease, translate .8s var(--sia-cine-ease);
}
.sia-intro.is-ready .sia-intro__hint {
  opacity: 1;
  translate: 0 0;
  animation: sia-blink 2.6s ease-in-out 1.2s infinite;
}
.sia-intro.is-entering .sia-intro__hint { animation: none; }
.sia-intro__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255, 244, 214, .5), rgba(var(--sia-cine-gold), .14) 28%, transparent 62%);
}
.sia-intro__shock {
  position: fixed;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 1.5px solid rgba(var(--sia-cine-gold), .9);
  box-shadow: 0 0 40px rgba(var(--sia-cine-gold), .45), inset 0 0 30px rgba(var(--sia-cine-gold), .3);
}
@keyframes sia-breathe {
  0%, 100% { opacity: .55; transform: scale(.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
@keyframes sia-ring {
  0%   { opacity: 0;  transform: scale(.72); }
  25%  { opacity: .9; }
  100% { opacity: 0;  transform: scale(1.3); }
}
@keyframes sia-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 30px -6px rgba(var(--sia-cine-gold), .55); }
  50%      { opacity: .7; box-shadow: 0 0 14px -6px rgba(var(--sia-cine-gold), .3); }
}
@media (max-width: 760px) {
  .sia-gate { padding: 24px; }
}
.sia-intro__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5vh;
  background: #050608;
}
.sia-intro__bar--top { top: 0; }
.sia-intro__bar--bottom { bottom: 0; }
.sia-intro__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
}
.sia-intro__logo {
  width: min(380px, 72vw);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(var(--sia-cine-gold), .35));
}
.sia-intro__line {
  width: min(520px, 80vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--sia-cine-gold), .95), transparent);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .7s var(--sia-cine-ease);
}
.sia-intro__tag {
  font: 500 clamp(12px, 1.5vw, 15px)/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(var(--sia-cine-gold), .92);
  padding-left: .42em;
}

/* --- 3. Hero atmosphere: gold dust canvas + anamorphic flare ------------- */
.sia-dust {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
          mask-image: linear-gradient(#000 70%, transparent);
}
.sia-flare {
  position: absolute;
  z-index: 4;
  height: 2px;
  width: 90vw;
  margin-left: -45vw;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(var(--sia-cine-gold), .55) 35%, transparent);
  box-shadow: 0 0 18px 2px rgba(var(--sia-cine-gold), .35);
  mix-blend-mode: screen;
  opacity: 0;
}

/* --- 4. Film grain + soft vignette (fixed, never blocks clicks) ---------- */
.sia-grain {
  position: fixed;
  inset: -50%;
  z-index: 2147482000;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: sia-grain 1.2s steps(6) infinite;
}
.sia-vignette {
  position: fixed;
  inset: 0;
  z-index: 2147481999;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .38));
}
@keyframes sia-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-3%, 8%); }
  80%  { transform: translate(7%, 2%); }
  100% { transform: translate(0, 0); }
}

/* --- 5. Scroll reveals (attribute is removed again once finished) -------- */
html.sia-cine [data-sia-reveal] {
  transition:
    opacity 1s var(--sia-cine-ease),
    translate 1.15s var(--sia-cine-ease),
    filter 1s var(--sia-cine-ease),
    clip-path 1.35s var(--sia-cine-ease);
  transition-delay: var(--sia-d, 0ms);
  will-change: opacity, translate, filter;
}
html.sia-cine [data-sia-reveal="up"]:not([data-sia-in]) {
  opacity: 0;
  translate: 0 44px;
  filter: blur(8px);
}
html.sia-cine [data-sia-reveal="wipe"]:not([data-sia-in]) {
  opacity: 0;
  translate: 0 28px;
  filter: blur(12px);
  clip-path: inset(0 0 100% 0);
}
html.sia-cine [data-sia-reveal="wipe"][data-sia-in] {
  clip-path: inset(-10% -5% -20% -5%);
}

/* Gold line that draws across the "Our approach" steps */
html.sia-cine [data-sia-line] { position: relative; }
html.sia-cine [data-sia-line]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--sia-cine-gold), 0), rgba(var(--sia-cine-gold), .9) 30%, rgba(var(--sia-cine-gold), .25));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s var(--sia-cine-ease) .15s;
}
html.sia-cine [data-sia-line][data-sia-in]::before { transform: scaleX(1); }

/* Magnetic gold buttons: soft glow while the pointer is near */
html.sia-cine [data-sia-mag] {
  box-shadow: 0 10px 40px -10px rgba(var(--sia-cine-gold), .55);
}