/* ==========================================================================
   AI SISTEM. THE CINEMATIC LAYER
   /about · /why-ai-visibility-matters · /faq

   The reading pages were black rectangles with prose in them. The homepage is
   a machine: a canvas world behind everything, scanlines, grain, a HUD frame,
   glitch, a live ticker. These pages now run on the same hardware, and each
   one gets its OWN set pieces so they read as three rooms in one building
   rather than three copies of the lobby.

   Everything here is first-party. No external asset, no font beyond the two
   already loaded, no library. The motion is canvas and CSS, and all of it
   surrenders to prefers-reduced-motion.
   ========================================================================== */

/* ---------- the world behind everything ---------- */
/* A canvas is a REPLACED element, so `inset: 0` alone does not stretch it: the
   box collapses to the intrinsic size and pbFit then measures 300x150 and
   renders the whole world into the top-left corner. The explicit 100% is what
   actually makes it full bleed. */
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.atmo { position: fixed; inset: 0; pointer-events: none; z-index: 92; }
.atmo::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; }
.atmo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,2,.55) 100%); }
.noise { position: fixed; inset: -60px; pointer-events: none; z-index: 91; opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(3) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 34%{transform:translate(-24px,14px)}
  67%{transform:translate(18px,-20px)} 100%{transform:translate(0,0)} }

.hud-corner { position: fixed; width: 26px; height: 26px; z-index: 90; pointer-events: none; opacity: .8; }
.hud-corner::before, .hud-corner::after { content: ""; position: absolute; background: var(--line-red); }
.hud-corner::before { width: 100%; height: 1px; } .hud-corner::after { width: 1px; height: 100%; }
.hud-tl { top: 14px; left: 14px; } .hud-tl::before{top:0;left:0} .hud-tl::after{top:0;left:0}
.hud-tr { top: 14px; right: 14px; } .hud-tr::before{top:0;right:0} .hud-tr::after{top:0;right:0}
.hud-bl { bottom: 46px; left: 14px; } .hud-bl::before{bottom:0;left:0} .hud-bl::after{bottom:0;left:0}
.hud-br { bottom: 46px; right: 14px; } .hud-br::before{bottom:0;right:0} .hud-br::after{bottom:0;right:0}

/* the scroll rail. How far into the machine you are */
.railwrap { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 88;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.railwrap .pct { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--dim);
  writing-mode: vertical-rl; }
.rail { width: 1px; height: 180px; background: var(--line); position: relative; }
.rail i { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--red);
  box-shadow: 0 0 10px var(--red-glo); }

/* ---------- content sits above the world ---------- */
.mod, .phead, .foot, .cine { position: relative; z-index: 2; }

/* ---------- glitch ---------- */
.glitch { position: relative; }
.glitch .g { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.glitch.on .g1 { color: var(--red); animation: gl1 2.8s steps(1) infinite; }
.glitch.on .g2 { color: #3aa0ff; animation: gl2 3.4s steps(1) infinite; }
@keyframes gl1 { 0%,93%,100%{opacity:0;transform:none} 94%{opacity:.8;transform:translate(-3px,1px)}
  96%{opacity:0} 97%{opacity:.6;transform:translate(2px,-1px)} 98%{opacity:0} }
@keyframes gl2 { 0%,90%,100%{opacity:0;transform:none} 91%{opacity:.5;transform:translate(3px,1px)}
  92.5%{opacity:0} 95%{opacity:.4;transform:translate(-2px,2px)} 95.5%{opacity:0} }

/* ---------- reveal choreography ---------- */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .95s var(--eo), transform .95s var(--eo); }
.rv.in { opacity: 1; transform: none; }
.rs > * { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--eo), transform .85s var(--eo); }
.rs.in > * { opacity: 1; transform: none; }
.rs.in > *:nth-child(1){transition-delay:.04s} .rs.in > *:nth-child(2){transition-delay:.12s}
.rs.in > *:nth-child(3){transition-delay:.2s}  .rs.in > *:nth-child(4){transition-delay:.28s}
.rs.in > *:nth-child(5){transition-delay:.36s} .rs.in > *:nth-child(6){transition-delay:.44s}
.rs.in > *:nth-child(7){transition-delay:.52s} .rs.in > *:nth-child(8){transition-delay:.6s}

/* ==========================================================================
   THE PAGE HERO. Full bleed, the machine breathing
   ========================================================================== */
.cine-hero { position: relative; z-index: 2; min-height: 86vh; display: flex; align-items: center;
  padding: 150px 0 90px; overflow: clip; }
.cine-hero .wrap { width: 100%; }
.cine-hero .boot { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--red);
  text-transform: uppercase; margin-bottom: 26px; min-height: 15px; }
.cine-hero .boot .cur { display: inline-block; width: 7px; height: 12px; background: var(--red);
  vertical-align: -1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cine-hero h1 { font-family: var(--disp); font-weight: 700; letter-spacing: -.035em; line-height: .95;
  color: var(--white); text-transform: uppercase; font-size: clamp(40px, 8.2vw, 104px); margin: 0 0 30px; }
.cine-hero h1 .ln { display: block; }
.cine-hero h1 .rd { color: var(--red); }
.cine-hero .lead { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.7; color: var(--steel);
  max-width: 660px; }
.cine-hero .lead b { color: var(--white); }

/* the readout strip under a hero */
.readout { display: flex; flex-wrap: wrap; gap: 0; margin-top: 44px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.readout div { flex: 1 1 150px; padding: 18px 22px 16px; border-right: 1px solid var(--line); }
.readout div:last-child { border-right: none; }
.readout b { display: block; font-family: var(--mono); font-size: clamp(20px, 2.6vw, 30px);
  color: var(--white); font-weight: 600; letter-spacing: -.02em; }
.readout span { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.readout .hot b { color: var(--red); }

/* ==========================================================================
   SET PIECE. THE ERA MACHINE  (/why)
   Three ways a customer has chosen a business. It plays itself.
   ========================================================================== */
.era { border: 1px solid var(--line); background: rgba(3,4,8,.72); backdrop-filter: blur(8px);
  position: relative; overflow: hidden; }
.era::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.era-bar { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.era-bar button { flex: 1; background: none; border: none; border-right: 1px solid var(--line);
  color: var(--dim); padding: 15px 10px; cursor: pointer; font: inherit; letter-spacing: inherit;
  text-transform: inherit; transition: color .3s ease, background .3s ease; position: relative; }
.era-bar button:last-child { border-right: none; }
.era-bar button.on { color: var(--white); background: rgba(230,33,44,.07); }
.era-bar button.on::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; background: var(--red); box-shadow: 0 0 12px var(--red-glo); }
.era-stage { position: relative; min-height: 330px; padding: 34px 32px 38px; }
.era-panel { position: absolute; inset: 34px 32px 38px; opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--eo), transform .5s var(--eo); pointer-events: none; }
.era-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.era-panel h3 { font-size: clamp(19px, 2.3vw, 26px); font-weight: 600; color: var(--white);
  letter-spacing: -.02em; margin: 0 0 8px; }
.era-panel .yr { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--red);
  text-transform: uppercase; margin-bottom: 14px; }
.era-panel p { font-size: 15.5px; line-height: 1.7; color: var(--steel); max-width: 560px; margin: 0 0 20px; }

/* the little visual each era draws */
.era-vis { display: flex; flex-direction: column; gap: 7px; }
.era-vis .row { height: 10px; background: rgba(160,190,220,.13); border-radius: 1px;
  transform-origin: left; animation: slidein .5s var(--eo) backwards; }
@keyframes slidein { from { transform: scaleX(0); opacity: 0; } }
.era-vis .row.mine { background: var(--red); box-shadow: 0 0 12px var(--red-glo); }
.era-vis .answer { border-left: 2px solid var(--red); padding: 12px 0 12px 16px;
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--steel); }
.era-vis .answer b { color: var(--white); font-weight: 600; }
.era-vis .answer .you { color: var(--red); }

/* ==========================================================================
   SET PIECE. THE HANDOFF  (/why)
   The kitchen-table referral, and the thirty seconds that overturn it.
   ========================================================================== */
.handoff { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line);
  background: rgba(3,4,8,.72); backdrop-filter: blur(8px); }
.handoff > div { padding: 30px 30px 34px; }
.handoff > div:first-child { border-right: 1px solid var(--line); }
.hoff-head { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 20px; display: flex; align-items: center; gap: 9px; }
.hoff-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); font-style: normal;
  transition: background .4s ease, box-shadow .4s ease; }
.hoff-head.live i { background: var(--red); box-shadow: 0 0 9px var(--red-glo);
  animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.msg { font-size: 15px; line-height: 1.6; margin-bottom: 14px; opacity: 0;
  transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.msg.in { opacity: 1; transform: none; }
.msg .who { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.msg .said { color: var(--steel); }
.msg .said b { color: var(--white); }
.msg.ai .said { color: var(--white); font-family: var(--mono); font-size: 13.5px; line-height: 1.7; }
.msg.ai .said em { font-style: normal; color: var(--red); }
.verdict-strip { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); opacity: 0; transition: opacity .7s ease; }
.verdict-strip.in { opacity: 1; }
.verdict-strip b { color: var(--red); }

/* ==========================================================================
   SET PIECE. THE SILENT LOG  (/why)
   Every system reporting normal while the call goes somewhere else.
   ========================================================================== */
.silentlog { border: 1px solid var(--line); background: rgba(3,4,8,.8); font-family: var(--mono); }
.silentlog .lg-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); }
.silentlog .lg-bar .ok { margin-left: auto; color: #4ade80; }
.silentlog .lg-body { padding: 8px 0; }
.silentlog .lg { display: flex; align-items: baseline; gap: 16px; padding: 9px 18px; font-size: 12.5px;
  color: var(--steel); border-bottom: 1px solid rgba(160,190,220,.05); }
.silentlog .lg:last-child { border-bottom: none; }
.silentlog .lg .t { color: var(--dim); font-size: 11px; flex: 0 0 62px; }
.silentlog .lg .st { margin-left: auto; color: #4ade80; font-size: 10px; letter-spacing: .16em; }
.silentlog .lg.bad { color: var(--white); background: rgba(230,33,44,.05); }
.silentlog .lg.bad .st { color: var(--red); }
.silentlog .lg-foot { padding: 16px 18px; border-top: 1px solid var(--line); font-size: 11.5px;
  color: var(--dim); letter-spacing: .04em; }
.silentlog .lg-foot b { color: var(--white); }

/* ==========================================================================
   SET PIECE. ASSUMPTION GAUGES  (/why)
   ========================================================================== */
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gauge { border: 1px solid var(--line); background: rgba(6,8,13,.8); padding: 26px 24px 28px;
  position: relative; overflow: hidden; }
.gauge::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--red), transparent); opacity: .55; }
.gauge .said { font-size: 16.5px; line-height: 1.45; color: var(--white); font-weight: 600;
  letter-spacing: -.01em; margin-bottom: 18px; }
.gauge .meter { height: 3px; background: rgba(160,190,220,.12); position: relative; margin-bottom: 8px; }
.gauge .meter i { position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--red); box-shadow: 0 0 10px var(--red-glo); transition: width 1.4s var(--eo); }
.gauge .verdict { font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.gauge p { font-size: 14.5px; line-height: 1.68; color: var(--steel); margin: 0; }
.gauge p b { color: var(--white); }

/* ==========================================================================
   SET PIECE. THE QUERY CONSOLE  (/faq)
   Every question is a query. The answer decodes.
   ========================================================================== */
.console { border: 1px solid var(--line); background: rgba(3,4,8,.78); backdrop-filter: blur(10px);
  position: relative; overflow: hidden; }
.console::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.con-bar { display: flex; align-items: center; gap: 11px; padding: 13px 20px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.con-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); font-style: normal;
  box-shadow: 0 0 9px var(--red-glo); animation: pulse 2s ease-in-out infinite; }
.con-bar .rt { margin-left: auto; color: var(--dim); }

.q { border-bottom: 1px solid var(--line); position: relative; }
.q:last-child { border-bottom: none; }
.q > button { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: grid; grid-template-columns: 58px 1fr 30px; align-items: baseline; gap: 14px;
  padding: 22px 22px 22px 20px; font: inherit; color: inherit; transition: background .28s ease; }
.q > button:hover { background: rgba(230,33,44,.045); }
.q > button .idx { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--red); }
.q > button .ask { font-size: 17.5px; font-weight: 600; color: var(--white); letter-spacing: -.01em;
  line-height: 1.42; }
.q > button .plus { font-family: var(--mono); font-size: 17px; color: var(--red); text-align: right;
  transition: transform .3s var(--eo); }
.q.open > button { background: rgba(230,33,44,.06); }
.q.open > button .plus { transform: rotate(45deg); }
/* The `grid-template-rows: 0fr -> 1fr` trick does not resolve here: `1fr` in an
   auto-height container computes to 0, so the panel never opened. A measured
   max-height set by script always works, at the cost of the script owning the
   number. `.out` keeps overflow hidden so the answer is clipped while it moves. */
.q .out { overflow: hidden; max-height: 0; transition: max-height .45s var(--eo); }
.q .ans { padding: 4px 26px 26px 92px; }
.q .ans .line { font-size: 15.5px; line-height: 1.8; color: var(--steel); margin: 0 0 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.q.open .ans .line { opacity: 1; transform: none; }
.q.open .ans .line:nth-child(1){transition-delay:.1s} .q.open .ans .line:nth-child(2){transition-delay:.2s}
.q.open .ans .line:nth-child(3){transition-delay:.3s} .q.open .ans .line:nth-child(4){transition-delay:.4s}
.q .ans .line:last-child { margin-bottom: 0; }
.q .ans .line b { color: var(--white); }
.q .ans .line.flag { border-left: 2px solid var(--red); padding-left: 16px; color: var(--white);
  font-weight: 600; }

/* ==========================================================================
   SET PIECE. OPERATING PARAMETERS  (/about)
   The house rules, presented as machine constraints with a status lamp.
   ========================================================================== */
.params { border: 1px solid var(--line); background: rgba(3,4,8,.72); }
.param { display: grid; grid-template-columns: 92px 1fr; gap: 22px; padding: 24px 26px;
  border-bottom: 1px solid var(--line); }
.param:last-child { border-bottom: none; }
.param .lamp { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #4ade80; display: flex; align-items: center; gap: 7px; padding-top: 4px; }
.param .lamp i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; font-style: normal;
  box-shadow: 0 0 8px rgba(74,222,128,.6); }
.param h3 { font-size: 16.5px; font-weight: 600; color: var(--white); margin: 0 0 7px;
  letter-spacing: -.01em; }
.param p { font-size: 15px; line-height: 1.7; color: var(--steel); margin: 0; }

/* the counting authority instrument */
.instr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line); background: rgba(3,4,8,.72); }
.instr div { padding: 30px 26px 28px; border-right: 1px solid var(--line); }
.instr div:last-child { border-right: none; }
.instr b { display: block; font-family: var(--mono); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(28px, 4vw, 46px); color: var(--red); line-height: 1; }
.instr span { display: block; margin-top: 11px; font-size: 13.5px; color: var(--steel); }

/* ---------- shared: a full-bleed statement band ---------- */
.band { position: relative; z-index: 2; padding: 118px 0; overflow: clip;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 36px;
  text-align: center; }
.band .say { font-family: var(--disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.03em; line-height: 1.04; font-size: clamp(30px, 5.6vw, 66px); color: var(--white);
  margin: 0; }
.band .say .rd { color: var(--red); }
.band .sub { margin: 26px auto 0; max-width: 620px; font-size: 16.5px; line-height: 1.75;
  color: var(--steel); }
.band canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .5; }

@media (max-width: 900px) {
  .gauges, .instr { grid-template-columns: 1fr; }
  .instr div { border-right: none; border-bottom: 1px solid var(--line); }
  .instr div:last-child { border-bottom: none; }
  .handoff { grid-template-columns: 1fr; }
  .handoff > div:first-child { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .cine-hero { min-height: auto; padding: 118px 0 64px; }
  .railwrap, .hud-corner { display: none; }
  .readout div { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .era-stage { min-height: 430px; padding: 26px 20px 30px; }
  .era-panel { inset: 26px 20px 30px; }
  .era-bar button { padding: 13px 6px; font-size: 9px; letter-spacing: .1em; }
  .handoff > div { padding: 24px 20px 28px; }
  .q > button { grid-template-columns: 34px 1fr 22px; gap: 10px; padding: 18px 16px; }
  .q > button .ask { font-size: 16px; }
  .q .ans { padding: 2px 18px 22px 60px; }
  .param { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; }
  .band { padding: 78px 0; }
  .band .inner { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .noise, .con-bar i, .hoff-head.live i { animation: none !important; }
  .rv, .rs > *, .msg { opacity: 1 !important; transform: none !important; transition: none !important; }
  .glitch.on .g { animation: none !important; }
  .era-vis .row { animation: none !important; }
}