/* ==========================================================================
   SIA Labs - Cinematic motion for the inner pages  (v1.0)
   Loaded on EVERY page (the home page needs the page-transition rule too).
   Everything that moves is switched off for visitors who ask for reduced
   motion: the html.sia-pg class is never added for them and the page
   transition sits inside a no-preference media query.
   ========================================================================== */

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

/* --- 1. Page-to-page transitions -----------------------------------------
   Chrome / Edge 126+ and Safari 18.2+. Other browsers simply change page.
   The menu bar and the "Contact SIA" button stay still while the new page
   is wiped in from the top behind a thin gold light. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sia-site-header { view-transition-name: sia-header; }
  .sia-contact-open { view-transition-name: sia-cta; }
  ::view-transition-old(root) { animation: sia-vt-out .45s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: sia-vt-in .75s cubic-bezier(.16, 1, .3, 1) both; }
  ::view-transition-group(sia-header),
  ::view-transition-group(sia-cta) { animation-duration: .5s; }
}
@keyframes sia-vt-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes sia-vt-in  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.sia-wipe {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 2147483000;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .95) 50%, transparent);
  box-shadow: 0 0 22px 3px rgba(var(--sia-cine-gold), .45);
}

/* --- 2. Page title -------------------------------------------------------- */
html.sia-pg:not(.sia-pg-ready) .sia-entry-title { opacity: 0; }
.sia-title-line {
  display: block;
  width: min(240px, 50%);
  height: 1px;
  margin-top: 18px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(var(--sia-cine-gold), .95), rgba(var(--sia-cine-gold), 0));
}
.sia-readtime {
  display: block;
  margin-top: 14px;
  font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(var(--sia-cine-gold), .85);
}

/* --- 3. Scroll reveals (the attribute is removed again once finished) ----- */
html.sia-pg [data-sia-reveal] {
  transition:
    opacity 1s var(--sia-cine-ease),
    translate 1.15s var(--sia-cine-ease),
    filter 1s var(--sia-cine-ease),
    transform 1.4s var(--sia-cine-ease);
  transition-delay: var(--sia-d, 0ms);
}
html.sia-pg [data-sia-reveal="up"]:not([data-sia-in]) {
  opacity: 0;
  translate: 0 40px;
  filter: blur(8px);
}
html.sia-pg [data-sia-reveal="line"] { transform-origin: left center; }
html.sia-pg [data-sia-reveal="line"]:not([data-sia-in]) { transform: scaleX(0); }
html.sia-pg [data-sia-reveal="img"] img {
  transition: clip-path 1.5s var(--sia-cine-ease), scale 1.8s var(--sia-cine-ease), filter 1.2s var(--sia-cine-ease);
  transition-delay: var(--sia-d, 0ms);
}
html.sia-pg [data-sia-reveal="img"]:not([data-sia-in]) img {
  clip-path: inset(0 0 100% 0);
  scale: 1.08;
  filter: brightness(1.6) blur(6px);
}
html.sia-pg [data-sia-reveal="img"]:not([data-sia-in]) figcaption { opacity: 0; }
html.sia-pg [data-sia-reveal="img"] figcaption { transition: opacity 1s ease .5s; }

/* --- 4. Our Approach: a gold timeline that draws as you scroll ----------- */
.sia-steps { position: relative; }
.sia-steps > .sia-stepzone { margin-left: 56px; }
.sia-rail {
  position: absolute;
  left: 18px;
  width: 1px;
  pointer-events: none;
  background: rgba(255, 255, 255, .12);
}
.sia-rail__fill {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform: scaleY(0);
  background: linear-gradient(rgb(var(--sia-cine-gold)), rgba(var(--sia-cine-gold), .55));
  box-shadow: 0 0 10px rgba(var(--sia-cine-gold), .5);
}
.sia-step-dot {
  position: absolute;
  left: 18px;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  pointer-events: none;
  background: #080a0d;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background .5s ease, border-color .5s ease, box-shadow .6s ease, scale .6s var(--sia-cine-ease);
}
.sia-step-dot.is-on {
  background: rgb(var(--sia-cine-gold));
  border-color: rgb(var(--sia-cine-gold));
  box-shadow: 0 0 0 5px rgba(var(--sia-cine-gold), .14), 0 0 18px rgba(var(--sia-cine-gold), .7);
  scale: 1.1;
}
.sia-steps h2.sia-step { transition: color .6s ease; }
.sia-steps h2.sia-step.is-on { color: #dfc58d; }
@media (max-width: 760px) {
  .sia-steps > .sia-stepzone { margin-left: 38px; }
  .sia-rail, .sia-step-dot { left: 11px; }
}

/* --- 5. Solutions: cards that lean toward the pointer --------------------- */
.sia-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 46px;
}
.sia-card {
  position: relative;
  padding: 26px 24px 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: border-color .4s ease, box-shadow .5s ease, transform .5s var(--sia-cine-ease);
}
.sia-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--sia-cine-gold), .14), transparent 45%);
  transition: opacity .4s ease;
}
.sia-card:hover {
  border-color: rgba(var(--sia-cine-gold), .45);
  box-shadow: 0 22px 50px -26px rgba(var(--sia-cine-gold), .4);
}
.sia-card:hover::before { opacity: 1; }
.sia-card > h2 { margin: 0 0 12px; font-size: 21px; }
.sia-card > p:last-child { margin-bottom: 0; }
.sia-card__num {
  display: block;
  margin-bottom: 14px;
  font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .3em;
  color: rgba(var(--sia-cine-gold), .9);
}
@media (max-width: 760px) {
  .sia-cards { grid-template-columns: 1fr; }
}

/* --- 6. Small details ----------------------------------------------------- */
.sia-num { color: rgb(var(--sia-cine-gold)); font-variant-numeric: tabular-nums; }

/* reading progress on Insights articles */
.sia-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(var(--sia-cine-gold), .35), rgb(var(--sia-cine-gold)));
  box-shadow: 0 0 12px rgba(var(--sia-cine-gold), .6);
}

/* gold buttons glow while the pointer is near (they also drift toward it) */
html.sia-pg [data-sia-mag] {
  transition: box-shadow .4s ease;
  box-shadow: 0 10px 34px -12px rgba(var(--sia-cine-gold), .55);
}

/* the floating "Contact SIA" button catches the light once per visit */
.sia-contact-open.sia-shine { overflow: hidden; }
.sia-contact-open.sia-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: sia-shine 1.5s ease 1 both;
}
@keyframes sia-shine {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* contact form: fields glow gold while you type */
#sia-inquiry input:not([type=checkbox]),
#sia-inquiry textarea { transition: border-color .3s ease, box-shadow .3s ease; }
#sia-inquiry input:not([type=checkbox]):focus,
#sia-inquiry textarea:focus {
  outline: none;
  border-color: rgba(var(--sia-cine-gold), .85);
  box-shadow: 0 0 0 3px rgba(var(--sia-cine-gold), .15), 0 0 26px -6px rgba(var(--sia-cine-gold), .55);
}
/* ... and a gold seal draws itself when the inquiry is sent */
.sia-seal { margin-top: 16px; }
.sia-seal svg { display: block; width: 46px; height: 46px; overflow: visible; filter: drop-shadow(0 0 10px rgba(var(--sia-cine-gold), .55)); }
.sia-seal circle,
.sia-seal path { fill: none; stroke: rgb(var(--sia-cine-gold)); stroke-linecap: round; stroke-linejoin: round; }
.sia-seal circle { stroke-width: 1.5; stroke-dasharray: 126; stroke-dashoffset: 126; animation: sia-draw .9s var(--sia-cine-ease) forwards; }
.sia-seal path { stroke-width: 2.2; stroke-dasharray: 32; stroke-dashoffset: 32; animation: sia-draw .55s .55s var(--sia-cine-ease) forwards; }
@keyframes sia-draw { to { stroke-dashoffset: 0; } }

/* soft film grain, same as the home page but quieter for reading */
.sia-pg-grain {
  position: fixed;
  inset: -50%;
  z-index: 2147482000;
  pointer-events: none;
  opacity: .035;
  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-pg-grain 1.2s steps(6) infinite;
}
@keyframes sia-pg-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); }
}
@media (prefers-reduced-motion: reduce) {
  .sia-pg-grain, .sia-contact-open.sia-shine::after { animation: none; }
  .sia-seal circle, .sia-seal path { animation: none; stroke-dashoffset: 0; }
}

/* --- 7. Page not found: big gold 404 in gold dust ------------------------ */
.sia-404 { position: relative; margin: 0 0 6px; padding-top: 6px; }
.sia-404__dust {
  position: absolute;
  left: -10%;
  top: -40px;
  width: 120%;
  height: calc(100% + 60px);
  pointer-events: none;
}
.sia-404__eyebrow {
  position: relative;
  font: 500 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(var(--sia-cine-gold), .9);
}
.sia-404__num {
  position: relative;
  display: flex;
  gap: .04em;
  margin: 10px 0 0 -.04em;
  font: 700 clamp(120px, 24vw, 260px)/.9 Arial, Helvetica, sans-serif;
  letter-spacing: -.02em;
}
.sia-404__num span {
  display: inline-block;
  background: linear-gradient(180deg, #fff3d6 0%, rgb(var(--sia-cine-gold)) 45%, #7d5f2c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 36px rgba(var(--sia-cine-gold), .3));
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.sia-404__zero { animation: sia-flicker 5.5s steps(1) 2.5s infinite; }
@keyframes sia-flicker {
  0%, 90%, 100% { opacity: 1; }
  91% { opacity: .35; }
  92% { opacity: 1; }
  94% { opacity: .55; }
  95% { opacity: 1; }
}
.sia-404__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}
.sia-404__label {
  width: 100%;
  margin-bottom: 4px;
  font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(var(--sia-cine-gold), .85);
}
.sia-404__links a {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #e9e9e7;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.sia-404__links a:hover,
.sia-404__links a:focus-visible {
  color: #fff6e0;
  border-color: rgba(var(--sia-cine-gold), .7);
  background-color: rgba(var(--sia-cine-gold), .08);
  box-shadow: 0 0 22px -6px rgba(var(--sia-cine-gold), .6);
}

/* --- 8. Gold cursor (desktop mice and trackpads only) --------------------
   The normal arrow stays; a soft gold ring follows it and grows over
   anything clickable. Hidden over text fields so typing is never covered. */
.sia-cursor-dot,
.sia-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483646;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
.sia-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: rgb(var(--sia-cine-gold));
  box-shadow: 0 0 10px rgba(var(--sia-cine-gold), .9);
}
.sia-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}
.sia-cursor-ring__in {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--sia-cine-gold), .65);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .3s ease, border-color .3s ease;
}
html.sia-cursor-on .sia-cursor-dot,
html.sia-cursor-on .sia-cursor-ring { opacity: 1; }
html.sia-cursor-link .sia-cursor-ring__in { transform: scale(1.7); border-color: rgba(var(--sia-cine-gold), .95); background-color: rgba(var(--sia-cine-gold), .12); }
html.sia-cursor-down .sia-cursor-ring__in { transform: scale(.8); }
html.sia-cursor-text .sia-cursor-dot,
html.sia-cursor-text .sia-cursor-ring { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sia-404__zero { animation: none; }
}

/* Fix for the live site: the theme's gold link colour also hit the gold
   "Open the Intelligence Studio" button on the 404 page, hiding its text. */
.sia-content-page a.sia-studio-cta,
.sia-content-page a.sia-studio-cta:visited { color: #101316; }