@font-face {
  font-family: "Syne";
  src: url("fonts/syne-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* One mind, three moods. Every mood colour is a registered property so the
   whole page cross-fades when the mood changes. All three palettes share the
   same structure (c0 darkest at the top → c3 lightest at the bottom), so text
   keeps its contrast through every fade. */

@property --c0 { syntax: "<color>"; inherits: true; initial-value: #070B1A; }
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #16213F; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #C9D2E3; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #EEF1F7; }
@property --ink-light { syntax: "<color>"; inherits: true; initial-value: #EEF1F7; }
@property --ink-dark { syntax: "<color>"; inherits: true; initial-value: #0B1226; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #7FA7FF; }
@property --accent2 { syntax: "<color>"; inherits: true; initial-value: #F2A93B; }

:root {
  /* The .si letters stay amber in every mood */
  --key: #F2A93B;

  --display: "Syne", "Segoe UI", system-ui, sans-serif;
  --text: "Figtree", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1rem, 5vw, 4rem);
  --band-pad: clamp(4rem, 12vh, 9rem);
  --mood-fade: 1.5s;

  transition:
    --c0 var(--mood-fade) ease-in-out,
    --c1 var(--mood-fade) ease-in-out,
    --c2 var(--mood-fade) ease-in-out,
    --c3 var(--mood-fade) ease-in-out,
    --ink-light var(--mood-fade) ease-in-out,
    --ink-dark var(--mood-fade) ease-in-out,
    --accent var(--mood-fade) ease-in-out,
    --accent2 var(--mood-fade) ease-in-out;
}

/* Focus: brainwaves, ink night with electric blue and amber */
:root[data-mood="focus"] {
  --c0: #070B1A;
  --c1: #16213F;
  --c2: #C9D2E3;
  --c3: #EEF1F7;
  --ink-light: #EEF1F7;
  --ink-dark: #0B1226;
  --accent: #7FA7FF;
  --accent2: #F2A93B;
}

/* Flow: aura, dusk plum with mint and peach */
:root[data-mood="flow"] {
  --c0: #140F22;
  --c1: #2E2347;
  --c2: #DCD3EA;
  --c3: #F6F1F7;
  --ink-light: #F6F1F7;
  --ink-dark: #1C1530;
  --accent: #7FD8BE;
  --accent2: #F6B89A;
}

/* Logic: machine mind, blueprint teal with cyan and white line art */
:root[data-mood="logic"] {
  --c0: #04161D;
  --c1: #0C3A47;
  --c2: #C7E2E8;
  --c3: #EEF7F9;
  --ink-light: #EEF7F9;
  --ink-dark: #062029;
  --accent: #8FE3F0;
  --accent2: #EAF7F9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  /* Containing block for the page-wide .sparks layer */
  position: relative;
  margin: 0;
  background: var(--c3);
  color: var(--ink-dark);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1,
h2,
p,
ul,
dl {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bands: the page rises from the dark subconscious (top) to clear thought
   (bottom). Each band blends into the next only inside the padding between
   them, so text always sits on its own band's solid colour. */

.band {
  padding: var(--band-pad) var(--gutter);
}

.band-dream {
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--ink-light);
  background: linear-gradient(
    var(--c0) calc(100% - var(--band-pad)),
    color-mix(in srgb, var(--c0), var(--c1))
  );
}

.band-drift {
  color: var(--ink-light);
  background: linear-gradient(
    color-mix(in srgb, var(--c0), var(--c1)),
    var(--c1) var(--band-pad),
    var(--c1) calc(100% - var(--band-pad)),
    color-mix(in srgb, var(--c1), var(--c2))
  );
}

.band-wake {
  color: var(--ink-dark);
  background: linear-gradient(
    color-mix(in srgb, var(--c1), var(--c2)),
    var(--c2) var(--band-pad),
    var(--c2) calc(100% - var(--band-pad)),
    color-mix(in srgb, var(--c2), var(--c3))
  );
}

.band-clear {
  color: var(--ink-dark);
  /* Extra room at the bottom so the floating capsule never covers the form */
  padding-bottom: calc(var(--band-pad) + 5rem);
  background: linear-gradient(
    color-mix(in srgb, var(--c2), var(--c3)),
    var(--c3) var(--band-pad)
  );
}

.inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  /* Above the sparks and haze (z-index 1) */
  position: relative;
  z-index: 2;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 2.5rem;
}

.key {
  color: var(--key);
}

/* Hero: the mind lens first, the name beneath it, everything centred */

.hero {
  display: grid;
  justify-items: center;
  text-align: center;
}

.lens {
  width: min(56vw, 16rem);
  margin-bottom: 1.5rem;
}

.lens svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.name {
  font-family: var(--display);
  font-weight: 800;
  /* One line on desktop; wraps after "mind" (<wbr>) on narrow screens */
  font-size: clamp(2.25rem, 7.2vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.si {
  margin-top: 0.5em;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  white-space: nowrap;
}

.fill {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

/* script.js drives max-width; without JS the full phrase simply shows. */
.js .fill {
  max-width: 0;
  transition: max-width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.tagline {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  white-space: nowrap;
}

.word {
  display: inline-block;
  font-weight: 700;
}

/* script.js toggles .is-shown; without JS the tagline simply shows. */
.js .tagline,
.js .word {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity 0.5s ease-out,
    filter 0.5s ease-out;
}

.js .tagline.is-shown,
.js .word.is-shown {
  opacity: 1;
  filter: none;
}

.moods {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.moods button {
  padding: 0.375rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ink-light) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-light);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.4s ease-out,
    color 0.4s ease-out,
    border-color 0.4s ease-out;
}

.moods button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--c0);
}

.moods button:focus-visible,
.offer:focus-visible,
.contact button:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible,
.privacy-notice summary:focus-visible {
  outline: 2px solid var(--key);
  outline-offset: 2px;
}

.lede {
  margin-top: 2rem;
  max-width: 34ch;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
}

/* The mind lens */

.lens-water {
  fill: url(#lens-water);
}

.lens-rim {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 35%, transparent);
  stroke-width: 3;
}

.mind .brain {
  fill: color-mix(in srgb, var(--ink-light) 7%, transparent);
  stroke: color-mix(in srgb, var(--ink-light) 75%, transparent);
  stroke-width: 1.6;
}

.mind .folds {
  fill: none;
  stroke: color-mix(in srgb, var(--ink-light) 30%, transparent);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.mind .links path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.2;
}

.mind .neurons circle {
  fill: var(--ink-light);
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--d);
}

.mind .core {
  fill: var(--key);
}

.mind .core-glow {
  animation: glow 3s ease-in-out infinite;
}

.layer,
.mind .pulses {
  opacity: 0;
  transition: opacity var(--mood-fade) ease-in-out;
}

:root[data-mood="focus"] .layer-focus,
:root[data-mood="focus"] .mind .pulses,
:root[data-mood="flow"] .layer-flow,
:root[data-mood="logic"] .layer-logic {
  opacity: 1;
}

/* Focus: amber signals racing through the network, an EEG trace below */
.mind .pulses polyline,
.layer-logic .data path {
  fill: none;
  stroke: var(--key);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 200;
  animation: signal var(--dur) linear var(--d) infinite;
}

.layer-focus .eeg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 45 55;
  animation: trace 4s linear infinite;
}

/* Flow: colour rays breathing out, aura rings rippling */
.layer-flow .rays {
  transform-box: view-box;
  transform-origin: 200px 185px;
  animation: breathe 6s ease-in-out infinite;
}

.layer-flow .rays line {
  stroke-width: 2;
  stroke-linecap: round;
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--d);
}

.layer-flow .ray-a {
  stroke: var(--accent);
}

.layer-flow .ray-b {
  stroke: var(--accent2);
}

.layer-flow .ray-c {
  stroke: color-mix(in srgb, var(--ink-light) 70%, transparent);
}

.layer-flow .aura {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: view-box;
  transform-origin: 200px 185px;
  animation: ripple 6s ease-out infinite;
  animation-delay: var(--d, 0s);
}

/* Logic: circuit traces draw themselves out of the mind; data runs along them */
.layer-logic .traces path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s ease-out 0.3s;
}

:root[data-mood="logic"] .layer-logic .traces path {
  stroke-dashoffset: 0;
}

.layer-logic .trace-ends circle {
  fill: var(--accent);
}

.layer-logic .hand {
  fill: none;
  stroke: color-mix(in srgb, var(--accent2) 85%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes signal {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -208;
  }
}

@keyframes trace {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes ripple {
  from {
    transform: scale(1);
    opacity: 0.6;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Thoughts it could have: three futures wired up as a small network */

.thought-net {
  position: relative;
}

.net-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.net-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 60%, transparent);
  stroke-width: 2;
  stroke-dasharray: 1;
}

/* With JS the line starts undrawn and draws itself once it scrolls into view */
.js .net-lines path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s ease-in-out 0.4s;
}

.js .net-lines path.is-visible {
  stroke-dashoffset: 0;
}

.thought-list {
  position: relative;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}

.thought {
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 1.5rem 1.5rem 1.5rem 0.25rem;
  /* Solid, so nothing behind it shows through the text */
  background: color-mix(in srgb, var(--c0) 55%, var(--c1));
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.4;
}

.thought:nth-child(2) {
  margin-top: 7rem;
}

@media (max-width: 48rem) {
  .net-lines {
    display: none;
  }

  .thought-list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-left: 1.25rem;
    border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  }

  .thought:nth-child(2) {
    margin-top: 0;
  }
}

/* Why the name works: the domain taken apart, mind + agency + .si */

.parts {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.5rem;
  align-items: start;
}

.part {
  display: grid;
  gap: 0.5rem;
}

.emblem {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.part-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.plus {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  padding-top: 3.5rem;
  color: color-mix(in srgb, var(--ink-dark) 45%, transparent);
}

@media (max-width: 48rem) {
  .parts {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .plus {
    padding-top: 0;
  }
}

/* Contact: in the light, compact and centred */

.band-clear h2 {
  text-align: center;
}

.contact {
  display: grid;
  gap: 0.875rem;
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--ink-dark) 15%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--c2) 45%, transparent);
}

.field {
  display: grid;
  gap: 0.25rem;
}

.field span {
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ink-dark) 25%, transparent);
  border-radius: 0.75rem;
  background: var(--c3);
  color: var(--ink-dark);
  font: inherit;
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--ink-dark) 55%, transparent);
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact button {
  justify-self: center;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink-dark);
  color: var(--c3);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-status:empty {
  display: none;
}

.form-status,
.privacy {
  text-align: center;
}

.privacy {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--ink-dark) 75%, transparent);
}

.privacy-notice {
  max-width: 30rem;
  margin: 1rem auto 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink-dark) 80%, transparent);
}

.privacy-notice summary {
  text-align: center;
  font-weight: 700;
  cursor: pointer;
}

.privacy-notice dl {
  margin-top: 0.75rem;
}

.privacy-notice dt {
  font-weight: 700;
}

.privacy-notice dd {
  margin: 0 0 0.5rem;
}

/* For-sale capsule: floats at the bottom, dark in every mood, with a live
   brainwave whose frequency rises as the visitor reads down the page */

.capsule {
  position: fixed;
  /* Centred with auto margins: left: 50% would cap its width at half the screen */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  bottom: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100% - 2rem);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c0) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink-light);
}

.capsule-text {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Thinking spark: pulses slowly, glows brighter while the offer button is hovered */
.capsule-spark {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: -0.25rem;
  fill: var(--key);
  animation: think 2.6s ease-in-out infinite;
  transition: filter 0.3s ease-out;
}

.capsule:has(.offer:hover) .capsule-spark {
  filter: drop-shadow(0 0 6px var(--key));
}

.offer {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--ink-light);
  color: var(--c0);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

@keyframes think {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@media (max-width: 40rem) {
  .capsule {
    gap: 0.5rem;
    padding-left: 1rem;
  }

  .capsule-text,
  .offer {
    font-size: 0.8125rem;
  }

  .offer {
    padding: 0.4375rem 0.875rem;
  }
}

/* Synapse sparks rising through the page, behind the text */

.sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  opacity: 0;
  animation: spark-rise var(--dur) linear var(--delay) infinite;
}

.sparks i:nth-child(3n) {
  background: var(--accent2);
  box-shadow: 0 0 10px var(--accent2);
}

@keyframes spark-rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-40vh);
    opacity: 0;
  }
}

/* Thought haze: slow clouds tinted by the mood, fixed behind the text */

.haze {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.haze span {
  position: absolute;
  width: max(60vw, 26rem);
  height: 50vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  animation: haze-drift 50s ease-in-out infinite alternate;
}

.haze span:nth-child(1) {
  left: -15vw;
  top: 5vh;
}

.haze span:nth-child(2) {
  left: 50vw;
  top: 35vh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 10%, transparent), transparent);
  animation-duration: 64s;
  animation-delay: -20s;
}

.haze span:nth-child(3) {
  left: 5vw;
  top: 65vh;
  animation-duration: 58s;
  animation-delay: -35s;
}

.haze span:nth-child(4) {
  left: 60vw;
  top: -10vh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 10%, transparent), transparent);
  animation-duration: 70s;
  animation-delay: -50s;
}

@keyframes haze-drift {
  from {
    transform: translate(-6vw, -3vh) scale(1);
  }
  to {
    transform: translate(6vw, 4vh) scale(1.2);
  }
}

/* Text surfaces: comes into focus from a blur as it scrolls into view */

.js [data-surface] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(1.5rem);
  transition:
    opacity 0.9s ease-out,
    filter 0.9s ease-out,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 150ms);
}

.js [data-surface].is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

/* The network line draws itself instead of blurring in */
.js .net-lines path[data-surface] {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    transition: none;
  }

  .js .fill {
    max-width: none;
    transition: none;
  }

  .js .tagline,
  .js .word,
  .js [data-surface] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .lens *,
  .capsule-spark,
  .haze span {
    animation: none;
  }

  .js .net-lines path,
  .layer-logic .traces path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .sparks,
  .mind .pulses {
    display: none;
  }
}