/* Hypha's side of the story: tinted near-black, one light source, teal haze,
   lit middle tones, crisp white type, rare electric-green signal. (brand/LOOK.md) */

.hy-stage {
  background: var(--void);
  color: var(--white);
}
.hy-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(to bottom, #041009 0%, #030b08 20%, #061510 38%, #0a2219 58%, #081a13 78%, #030907 94%, #020605 100%);
}
/* the wide dim aura around the source (LOOK §3) + its lift on the middle and lower third */
.hy-aura {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 48%), rgb(8 132 85 / 0.35) 0%, rgb(1 58 33 / 0.35) 12%, rgb(1 19 13 / 0.4) 24%, transparent 36%),
    radial-gradient(70% 50% at var(--lx, 50%) calc(var(--ly, 48%) + 12%), rgb(14 63 40 / 0.55), transparent 70%);
  transition: opacity 0.4s;
}
/* teal haze: visible middle tones, never neon */
.hy-haze {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.hy-haze--far {
  background:
    radial-gradient(38% 26% at 22% 34%, rgb(25 70 58 / 0.55), transparent 70%),
    radial-gradient(34% 22% at 80% 26%, rgb(22 64 56 / 0.5), transparent 70%),
    radial-gradient(50% 20% at 50% 18%, rgb(30 80 66 / 0.32), transparent 70%);
  animation: haze-drift 28s ease-in-out infinite alternate;
}
.hy-haze--mid {
  background:
    radial-gradient(46% 18% at 30% 70%, rgb(16 58 44 / 0.6), transparent 72%),
    radial-gradient(40% 16% at 76% 74%, rgb(18 62 50 / 0.55), transparent 72%);
  animation: haze-drift 36s ease-in-out infinite alternate-reverse;
}
@keyframes haze-drift {
  from { transform: translate3d(-1.5%, 0, 0); }
  to { transform: translate3d(1.5%, -1%, 0); }
}
/* a reflective floor: the light bounces, the lower part of the world stays legible */
.hy-floor {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 0;
  height: 36%;
  background:
    radial-gradient(28% 22% at var(--lx, 50%) 6%, rgb(189 246 199 / 0.16), rgb(57 241 100 / 0.07) 40%, transparent 75%),
    linear-gradient(to bottom, rgb(54 126 98 / 0.22) 0px, rgb(14 63 40 / 0.18) 2px, rgb(10 40 30 / 0.5) 12%, rgb(5 20 15 / 0.7) 60%, rgb(2 6 5 / 0.96) 100%);
  border-top: 1px solid rgb(101 219 174 / 0.12);
}
/* near planes: dark and sharp, rim-lit by the source */
.hy-fore {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  pointer-events: none;
  background:
    radial-gradient(60% 120% at 6% 120%, #010403 0 46%, transparent 47%),
    radial-gradient(52% 110% at 98% 125%, #010403 0 44%, transparent 45%);
  filter: drop-shadow(0 -1px 0 rgb(77 218 199 / 0.22));
}

/* the light source: white core, neon body, emerald → teal halo, gradual falloff */
.rev-source,
.os-source,
.hy-mini-source {
  position: absolute;
  left: 0; top: 0;
  width: 760px; height: 760px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgb(248 253 250 / 0.95) 0%,
    rgb(189 246 199 / 0.8) 3%,
    rgb(57 241 100 / 0.42) 7%,
    rgb(54 126 98 / 0.34) 14%,
    rgb(14 63 40 / 0.32) 26%,
    rgb(3 31 17 / 0.22) 42%,
    transparent 64%);
  mix-blend-mode: screen;
}
/* speed (inv1fix 10-26): the revelation's light moves with the scroll; blended in screen mode it made the compositor
   re-blend the whole world under it every frame. It sits over near-black haze only (the page is above it), where
   plain alpha reads the same */
.rev-source { mix-blend-mode: normal; }
/* the haze drifts 1.5% over half a minute: never seen move, but it re-composited two oversized layers every frame */
.rev-stage .hy-haze { animation: none; }

.rev-space { position: absolute; inset: 0; will-change: transform; }
.rev-field, .rev-frags { position: absolute; inset: 0; }
.rev-cursors { position: absolute; inset: 0; z-index: 30; pointer-events: none; }

/* light paths, drawn in the world; their width stays the same however far the camera pulls back */
.rev-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.rev-lines .ln { fill: none; stroke: rgb(101 219 174 / 0.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0; }
.rev-lines .ln--glow { stroke: rgb(57 241 100 / 0.22); stroke-width: 6; }
.rev-lines .ln--carry,
.rev-lines .ln--flow { stroke: rgb(189 246 199 / 0.9); stroke-width: 1.8; }
.rev-lines .pk { fill: #f8fdfa; opacity: 0; }
.rev-lines .pk-h { fill: rgb(57 241 100 / 0.4); opacity: 0; }

/* the same kind of page, across many companies: far, small, quiet; a question mark until something is verified */
.fc {
  position: absolute;
  left: 0; top: 0;
  border-radius: 14px;
  background: #eef3f0;
  padding: 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  /* speed (inv1fix 10-26): dozens of these fade in while the camera pulls back; two wide blurs each made every frame
     of that pull-back repaint them. The ring and a shorter shadow keep the look at the size they are seen (0.3x) */
  box-shadow:
    0 0 0 2px rgb(77 218 199 / 0.3),
    0 16px 26px rgb(0 0 0 / 0.5);
  transition: box-shadow 0.4s;
}
.fc i { display: block; height: 16px; border-radius: 8px; background: #d5ddd9; }
.fc .fc-k { width: 36%; height: 13px; background: #bfe3cf; }
.fc .fc-t { width: 84%; height: 26px; background: #b9c4be; }
.fc .fc-t.s { width: 56%; margin-top: -6px; }
.fc .fc-l { width: 92%; }
.fc .fc-l.s { width: 62%; }
.fc-st {
  position: absolute;
  right: 22px; top: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #dfe5e2;
  color: #6d7671;
  display: grid; place-items: center;
  font: 700 26px/1 var(--f-app);
  transition: background 0.3s, color 0.3s;
}
.fc-st::before { content: "?"; }
.fc.is-ok .fc-st { background: #1e8e5a; color: #fff; }
.fc.is-ok .fc-st::before { content: "✓"; }
.fc.is-sharp {
  box-shadow:
    0 0 0 5px rgb(57 241 100 / 0.9),
    0 0 60px rgb(57 241 100 / 0.5),
    0 24px 48px rgb(0 0 0 / 0.55);
}
.fc.is-sharp .fc-st { background: #39f164; color: #04110c; }

/* the brief, and the pile of proposals behind it */
.rev-brief-wrap {
  position: absolute;
  left: 0; top: 0;
  width: 340px;
  z-index: 15;
  transform-origin: 50% 50%;
}
.rev-brief-wrap .brief {
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 0 1px rgb(77 218 199 / 0.25),
    0 0 40px rgb(57 241 100 / 0.12),
    0 30px 70px rgb(0 0 0 / 0.6);
  transition: background 0.6s, box-shadow 0.6s;
}
.rev-brief-wrap.is-blank .brief {
  background: rgb(248 253 250 / 0.94);
  box-shadow:
    0 0 0 1px rgb(189 246 199 / 0.9),
    0 0 0 4px rgb(57 241 100 / 0.12),
    0 0 50px rgb(57 241 100 / 0.38),
    0 0 140px rgb(29 130 82 / 0.45),
    0 30px 70px rgb(0 0 0 / 0.55);
}
.rev-brief-wrap.is-blank .bf-posted,
.rev-brief-wrap.is-blank .bf-foot { opacity: 0; transition: opacity 0.4s; }
.rev-brief-wrap.is-blank .bf-kind { color: #1d8252; }
.rev-brief-wrap.is-blank .bf-scope li::before { border-color: #9ad9b0; }
/* the same page, now holding a question: still lit, never a job */
.rev-brief-wrap.is-asked .brief {
  box-shadow:
    0 0 0 1px rgb(189 246 199 / 0.85),
    0 0 46px rgb(57 241 100 / 0.3),
    0 0 120px rgb(29 130 82 / 0.35),
    0 30px 70px rgb(0 0 0 / 0.55);
}
/* among many, the one we followed keeps a ring of light */
.rev-brief-wrap.is-focus .brief {
  box-shadow:
    0 0 0 4px rgb(57 241 100 / 0.95),
    0 0 70px rgb(57 241 100 / 0.55),
    0 0 160px rgb(29 130 82 / 0.45),
    0 30px 70px rgb(0 0 0 / 0.55);
}
.rev-stack { position: absolute; inset: 0; z-index: 1; }
.prop {
  position: absolute;
  left: 50%; top: 50%;
  width: 230px; height: 66px;
  margin: -33px 0 0 -115px;
  background: #f4f6f8;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(77 218 199 / 0.18), 0 14px 30px rgb(0 0 0 / 0.5);
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: repeat(3, 1fr);
  column-gap: 10px;
  padding: 10px 12px;
  opacity: 0;
}
.prop-av { grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%; align-self: center; color: #fff; font: 600 13px var(--f-app); display: grid; place-items: center; }
.prop i { display: block; height: 7px; border-radius: 4px; background: #d5dae0; align-self: center; }
.prop i.s { width: 55%; }

/* fragments of a business's real week (light, as the real tools are), lit by the source */
.fr {
  position: absolute;
  left: 0; top: 0;
  border-radius: 10px;
  background: #fff;
  color: #1d2433;
  font-family: var(--f-app);
  font-size: 13px;
  line-height: 1.35;
  box-shadow:
    0 0 0 1px rgb(77 218 199 / 0.3),
    -6px -6px 26px rgb(57 241 100 / 0.06),
    0 0 30px rgb(57 241 100 / 0.1),
    0 22px 44px rgb(0 0 0 / 0.55);
  -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgb(255 255 255 / 0.1));
  transition: box-shadow 0.35s;
  white-space: nowrap;
}
.fr.is-sel {
  box-shadow:
    0 0 0 2px var(--sel),
    0 0 34px color-mix(in srgb, var(--sel) 55%, transparent),
    0 22px 44px rgb(0 0 0 / 0.55);
}
.fr svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
.fr em { font-style: normal; display: block; font-size: 11px; color: #6a7385; margin-bottom: 2px; }
.fr-calblock { margin: 8px; padding: 8px 12px; border-radius: 6px; background: #039be5; color: #fff; min-width: 190px; }
.fr-calblock b { display: block; font-weight: 600; font-size: 14px; }
.fr-calblock span { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: 0.95; }
.fr-mail, .fr-post { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; }
/* none of it proves anyone is buying: each signal carries an open question */
.fr-q {
  position: absolute;
  right: -10px; top: -10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #26312c;
  color: #eef3f0;
  font: 700 13px/1 var(--f-app);
  font-style: normal;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px rgb(189 246 199 / 0.5);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.25s;
}
.fr.is-unproven .fr-q { opacity: 1; transform: none; }
.fr-av { width: 28px; height: 28px; border-radius: 50%; background: #5c6bc0; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.fr-mt b { font-size: 14px; }
.fr-badge { margin-left: 8px; background: #b3261e; color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 12px; }
.fr-sheet { display: grid; grid-template-columns: auto auto auto; font-family: var(--f-sheet); font-size: 12.5px; border-radius: 10px; overflow: hidden; }
.fr-sheet span { padding: 6px 10px; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; }
.fr-sheet span.h { background: #f8f9fa; color: #5f6368; font-weight: 700; font-size: 11.5px; }
.fr-chat { display: flex; gap: 10px; padding: 10px 14px 10px 10px; max-width: 300px; white-space: normal; font-size: 13.5px; }
.fr-chat em { font-weight: 600; color: #1d1c1d; font-size: 12.5px; }
.fr-note { padding: 12px 14px; max-width: 250px; white-space: normal; background: #fff8d6; border-radius: 10px; font-size: 13.5px; }
.rev-stage.is-phone .fr-chat { max-width: 212px; }
.rev-stage.is-phone .fr-note { max-width: 196px; }

/* multiplayer cursors: people who could help, and you */
.cur {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  will-change: transform, opacity;
  opacity: 0;
}
.cur > svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.55)); flex: none; }
.cur-name {
  margin: 17px 0 0 -6px;
  padding: 3px 9px 4px;
  border-radius: 3px 10px 10px 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12.5px;
  color: #04110c;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
  line-height: 1.2;
}
.cur--you .cur-name {
  box-shadow: 0 0 0 1px rgb(248 253 250 / 0.6), 0 0 26px rgb(57 241 100 / 0.65), 0 4px 16px rgb(0 0 0 / 0.4);
}
.cur--small > svg { width: 15px; height: 15px; }
/* on a phone the pills sit close together: one name drops to a second row so no two names collide */
.rev-stage.is-phone .cur--low .cur-name { margin-top: 38px; }
.cur--small .cur-name { font-size: 10.5px; padding: 2px 6px 3px; margin: 12px 0 0 -4px; }
.cur--ai .cur-name { display: inline-flex; align-items: center; gap: 4px; }
.cur--ai .cur-name svg { width: 10px; height: 10px; }

/* text on dark: crisp and above the vignette */
.on-dark { color: var(--white); }
.hy-stage .lede { color: var(--silver); }
.hy-stage .say { color: var(--white); }

/* =================== the flip, and the cover that carries it to full screen =================== */
.hy-mini {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 55%, rgb(8 132 85 / 0.35), rgb(1 58 33 / 0.3) 40%, transparent 70%),
    linear-gradient(to bottom, #041009, #0a2219 60%, #020605);
  overflow: hidden;
}
.hy-mini-source { left: 50%; top: 55%; width: 520px; height: 520px; margin: -260px 0 0 -260px; }
.flip-cover {
  position: fixed;
  z-index: 900;
  border-radius: 12px;
  background:
    radial-gradient(60% 60% at 62% 50%, rgb(8 132 85 / 0.35), rgb(1 58 33 / 0.3) 40%, transparent 70%),
    linear-gradient(to bottom, #041009, #0a2219 60%, #020605);
  transition: left 0.7s cubic-bezier(.7,0,.2,1), top 0.7s cubic-bezier(.7,0,.2,1), width 0.7s cubic-bezier(.7,0,.2,1), height 0.7s cubic-bezier(.7,0,.2,1), border-radius 0.7s, opacity 0.6s ease;
}
.flip-cover.is-full { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
.flip-cover.is-gone { opacity: 0; }

/* =================== THE OTHER SIDE · preview =================== */
.other { position: relative; background: var(--void); color: var(--white); }
.other-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  --lx: 70%;
  --ly: 46%;
}
.other-scene { position: absolute; inset: 0; }
.os-source { left: 70%; top: 46%; width: 900px; height: 900px; margin: -450px 0 0 -450px; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); opacity: 0.9; } }
.os-doc { position: absolute; left: 70%; top: 46%; width: 340px; transform: translate(-50%, -50%) scale(1.15); z-index: 3; }
/* the investigation the story followed, lit; the visitor's lens waits at the part it would start from */
.os-doc .brief {
  box-shadow:
    0 0 0 1px rgb(189 246 199 / 0.85),
    0 0 46px rgb(57 241 100 / 0.3),
    0 0 120px rgb(29 130 82 / 0.35),
    0 30px 70px rgb(0 0 0 / 0.55);
}
.os-target.bf-pill { border-style: solid; border-color: #146c2e; background: #e8f5ee; color: #0f5132; box-shadow: 0 0 0 3px rgb(57 241 100 / 0.35); }
.os-target.bf-row--q { margin-left: -6px; margin-right: -6px; padding: 4px 6px; border-radius: 8px; background: #f2fbf4; box-shadow: 0 0 0 3px rgb(57 241 100 / 0.35); }
.os-you { opacity: 1; z-index: 5; animation: you-hover 3.2s ease-in-out infinite; }
@keyframes you-hover { 50% { transform: translate(-6px, 4px); } }

.other-frame {
  position: absolute;
  inset: 12px;
  border: 1px dashed rgb(189 246 199 / 0.32);
  border-radius: 18px;
  pointer-events: none;
  z-index: 4;
}
.other-ui {
  position: relative;
  z-index: 6;
  min-height: 100vh;
  min-height: 100svh;
  padding: 9vh var(--gutter) 9vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  max-width: min(640px, 48vw);
  box-sizing: content-box;
}
.other-ui::before {
  content: "";
  position: absolute;
  inset: 0 -30% 0 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(2 6 5 / 0.82), rgb(2 6 5 / 0.6) 60%, transparent);
}
.preview-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgb(189 246 199 / 0.55);
  background: rgb(4 16 12 / 0.7);
  box-shadow: 0 0 22px rgb(57 241 100 / 0.15);
}
.pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.pv-sep { color: var(--steel); }
.pv-role { color: var(--rc, var(--mint)); }
.other-line {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(46px, 6.6vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
  text-shadow: 0 0 40px rgb(2 6 5 / 0.6);
}
.gate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.gate-label { margin: 0; width: 100%; font-size: 15px; color: var(--silver); }
.gate-label strong { font-weight: 600; color: var(--white); }
.gate-link {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--white);
  padding: 11px 18px 11px 12px;
  border-radius: 999px;
  border: 1px solid rgb(189 246 199 / 0.45);
  background: rgb(4 16 12 / 0.8);
  font-size: 15px;
}
.gate-link:hover { border-color: var(--neon); box-shadow: 0 0 24px rgb(57 241 100 / 0.25); }
.gate-play, .vnote-play {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--neon);
  position: relative;
  box-shadow: 0 0 14px rgb(57 241 100 / 0.5);
}
.gate-play::after, .vnote-play::after {
  content: ""; position: absolute; left: 10px; top: 8px;
  border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.gate-soon, .player-soon {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
}
.soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px rgb(237 216 148 / 0.7); }

.other-note { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; color: var(--silver); }
.other-back {
  align-self: flex-start;
  appearance: none;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgb(189 246 199 / 0.45);
  background: rgb(4 16 12 / 0.8);
  color: var(--white);
  font: 500 15px var(--f-body);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.other-back:hover { border-color: var(--neon); box-shadow: 0 0 24px rgb(57 241 100 / 0.25); }

/* the preview arrives: no reset, the world simply continues */
.other .preview-chip, .other .other-line, .other .other-note, .other .other-back { opacity: 0; transform: translateY(16px); }
.other.is-in .preview-chip, .other.is-in .other-line, .other.is-in .other-note, .other.is-in .other-back {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.other.is-in .other-line { transition-delay: 0.15s; }
.other.is-in .other-note { transition-delay: 0.45s; }
.other.is-in .other-back { transition-delay: 0.6s; }

@media (max-width: 899px) {
  .other-stage { --lx: 50%; --ly: 26%; }
  /* the scene keeps to the top of the screen; the words below sit on a quiet surface */
  .other-scene { bottom: auto; height: 48vh; height: 48svh; }
  .os-source { left: 50%; top: 48%; width: 640px; height: 640px; margin: -320px 0 0 -320px; }
  .os-doc { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9); }
  /* foreman 2026-10-27 01:0x GMT: border-box on a phone, so the 50vh top padding sits INSIDE the one screen (content-box made it 100svh + 50vh + 40px: ~710px of empty dark under "Change my answers", flagged by hero-b5 + hero-c5) */
  .other-ui { max-width: none; padding: 50vh var(--gutter) 40px; justify-content: flex-start; gap: 20px; box-sizing: border-box; }
  .other-ui::before { inset: 0; background: linear-gradient(to bottom, transparent 43vh, rgb(2 6 5 / 0.88) 51vh, rgb(2 6 5 / 0.92)); }
}