/* ============================================================
   ZEN EVOLVED — cosmic design system
   Colours are taken from real stellar classes: blue-white through
   gold to amber, over deep-space navy and nebula violet.
   ============================================================ */

:root {
  --void:      #03060e;  /* deep space */
  --void-2:    #060b18;
  --membrane:  #0a1120;
  --border:    rgba(150, 180, 240, 0.16);
  --border-lit:rgba(190, 215, 255, 0.5);

  --fg:        #d3ddf2;
  --fg-dim:    #8695b4;
  --fg-faint:  #55637f;

  /* stellar palette — spectral-class colours, blue-white through amber */
  --star:      #ffd89b;  /* G-class gold, the warm accent */
  --star-deep: #b8873f;
  --star-blue: #8fb2ff;  /* O/B-class blue-white */
  --chrome:    #c3d8ff;  /* A-class white */
  --irid:      #a98cff;  /* nebula violet, used sparingly */

  --font-display: 'Cinzel Decorative', serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--fg);
  font-family: var(--font-ui);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- canvas backdrop ---------- */

/* Viewport units, not percentages: a percentage height here resolves against
   the document rather than the viewport in some renderers, which stretches the
   canvas to full page height and distorts the aspect ratio badly.
   JS also pins the pixel size on resize as a belt-and-braces guarantee. */
.cosmos {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
}

/* Static night sky behind the canvas, in case 2D context is unavailable */
.cosmos-fallback {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background:
    radial-gradient(ellipse at 18% 26%, rgba(58,86,190,0.20), transparent 55%),
    radial-gradient(ellipse at 80% 18%, rgba(116,72,186,0.16), transparent 55%),
    radial-gradient(ellipse at 66% 80%, rgba(38,74,158,0.15), transparent 55%),
    var(--void);
}

/* Kept light: the star field has to stay visible right out to the edges */
.scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(3,6,14,0.62) 100%);
}

/* ---------- layout ---------- */

main { position: relative; z-index: 2; }

.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12vh 6vw;
  position: relative;
}

.section--auto { min-height: 0; padding: 16vh 6vw; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; }
.wrap--narrow { max-width: 680px; }

/* ---------- typography ---------- */

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 9rem);
  line-height: 0.95;
  /* wide tracking on long single words (TRANSMISSION, PROLIFERATION)
     pushes them past the viewport, so this stays modest */
  letter-spacing: 0.08em;
  max-width: 100%;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  text-align: center;
  text-shadow: 0 0 70px rgba(143, 178, 255, 0.35);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.3rem, 3vw, 2.1rem); }

.statement {
  font-family: var(--font-ui);
  font-weight: 200;
  font-size: clamp(1.5rem, 4.4vw, 3.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #edf3ff;
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--fg);
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--star);
  opacity: 0.75;
  margin: 0 0 1.6em;
  text-align: center;
}

.eyebrow--left { text-align: left; }

.quote {
  font-weight: 200;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  color: #dfe8ff;
  font-style: italic;
  border-left: 1px solid var(--star-deep);
  padding-left: clamp(18px, 3vw, 34px);
  max-width: 42ch;
}

.muted { color: var(--fg-dim); }
.tiny  { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--fg-faint); }

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: rgba(8, 14, 28, 0.55);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all .45s var(--ease);
  backdrop-filter: blur(6px);
}
.btn:hover {
  border-color: var(--border-lit);
  color: #fff;
  box-shadow: 0 0 30px rgba(143, 178, 255, 0.18);
  transform: translateY(-1px);
}
.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.btn--solid {
  background: rgba(255, 216, 155, 0.09);
  border-color: var(--star-deep);
  color: #ffeccd;
}

.field {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: rgba(6, 11, 24, 0.72);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  transition: border-color .4s var(--ease);
}
.field:focus { outline: none; border-color: var(--border-lit); }
.field::placeholder { color: var(--fg-faint); }

.panel {
  background: rgba(5, 10, 22, 0.78);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: clamp(28px, 5vw, 56px);
  backdrop-filter: blur(14px);
}

/* ---------- protein-molecule navigation ---------- */

/* Centred wrap rather than a fixed grid: the number of destinations changes
   over time, and a rigid 3-column grid leaves an odd count ragged on the
   last row. This keeps any count balanced. */
.molecule-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 5vw, 60px);
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- the enso mark ---------- */

.enso {
  position: relative;
  width: min(78vw, 66vh, 620px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: block;
}

.enso__canvas,
.enso__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* rings and lettering are lit rather than drawn, so both carry a soft bloom
   and neither sits at full opacity. Two stacked drop-shadows: a tight one
   that halos the strokes and a wide faint one that washes outward, which is
   what sells them as light instead of ink. */
.enso__svg {
  filter:
    drop-shadow(0 0 6px rgba(200, 222, 255, 0.8))
    drop-shadow(0 0 22px rgba(160, 195, 255, 0.38));
}

.enso__ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
}
.enso__ring--glow {
  stroke: rgba(196, 219, 255, 0.18);
  filter: blur(5px);
}

/* a step brighter than the lines, so the name leads the band */
.enso__text {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
}

.enso__spin {
  animation: enso-spin 54s linear infinite;
}
@keyframes enso-spin {
  to { transform: rotate(360deg); }
}

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

/* ---------- glowing stone panel ---------- */
/* Matches the backdrop used on the social accounts, so arriving from there
   feels like the same place. Deliberately faint — it sits behind content. */

.stone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.stone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(86, 66, 40, 0.30), transparent 62%),
    radial-gradient(ellipse at 18% 84%, rgba(52, 42, 30, 0.24), transparent 60%),
    radial-gradient(ellipse at 84% 16%, rgba(40, 34, 26, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(10, 9, 8, 0.86), rgba(6, 6, 7, 0.94));
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 32%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 32%, transparent 78%);
}

/* the repeating carved lettering */
.stone__glyphs {
  position: absolute;
  inset: -12%;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 2vw, 26px);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 26%, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 26%, transparent 74%);
  animation: stone-breathe 11s ease-in-out infinite;
}

.stone__glyphs span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.62rem, 1.15vw, 0.92rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
  /* faint on purpose: this is carved texture, not a headline */
  color: rgba(226, 194, 138, 0.17);
  text-shadow:
    0 0 10px rgba(226, 178, 96, 0.2),
    0 0 26px rgba(200, 140, 60, 0.12);
}

/* darkens the middle so the icons and label sit clear of the pattern */
.stone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(3, 6, 14, 0.9) 0%,
    rgba(3, 6, 14, 0.62) 38%,
    rgba(3, 6, 14, 0) 70%
  );
}

/* every other one is inverted, the way the stone pattern reads */
.stone__glyphs span:nth-child(even)      { transform: rotate(180deg); opacity: 0.62; }
.stone__glyphs span:nth-child(3n)        { opacity: 0.44; }
.stone__glyphs span:nth-child(4n)        { transform: rotate(180deg); opacity: 0.8; }
.stone__glyphs span:nth-child(5n)        { opacity: 0.34; }

@keyframes stone-breathe {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

@media (max-width: 640px) {
  .stone__glyphs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* social platform marks, sitting a step below the main destinations */
.social-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  margin: 0 auto;
  /* wide enough for all six on one row, wraps to 3 + 3 on narrow screens */
  max-width: 700px;
}

.mol {
  position: relative;
  display: block;
  text-decoration: none;
  line-height: 0;
  border-radius: 50%;
  transition: transform .7s var(--ease);
}
.mol canvas { display: block; }
.mol:hover { transform: scale(1.06); }

/* label is invisible at rest — it only materialises on approach */
.mol__label {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translate(-50%, 6px);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--star);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  text-shadow: 0 0 14px rgba(3, 6, 14, 0.95);
}
.mol:hover .mol__label,
.mol:focus-visible .mol__label,
.mol.is-revealed .mol__label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.mol:focus-visible { outline: 1px solid var(--border-lit); outline-offset: 8px; }

/* corner nav that follows you down the page */
.mol-dock {
  position: fixed;
  right: clamp(10px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--ease);
}
.mol-dock.is-visible { opacity: 1; pointer-events: auto; }
.mol-dock .mol__label { bottom: 50%; left: auto; right: calc(100% + 10px); transform: translate(6px, 50%); }
.mol-dock .mol:hover .mol__label { transform: translate(0, 50%); }

/* ---------- scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(38px) scale(0.965);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal][data-reveal-delay="1"] { transition-delay: .12s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .36s; }

[data-parallax] { will-change: transform; }

/* fades out as you scroll past it — set by JS */
[data-scroll-fade] { will-change: opacity, transform; }

/* ---------- scroll cue ---------- */

.cue {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--fg-faint);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.cue__line {
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, var(--star), transparent);
  animation: cue-drip 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue-drip {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- misc ---------- */

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  margin: 6vh 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8vh;
  color: var(--fg-faint);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .4s var(--ease);
}
.back:hover { color: var(--star); }

.site-footer {
  position: relative;
  z-index: 2;
  padding: 10vh 6vw 6vh;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ---------- page transitions ---------- */

.page-in  { animation: page-in 1s var(--ease) both; }
.page-out { animation: page-out .5s var(--ease) both; pointer-events: none; }

@keyframes page-in {
  from { opacity: 0; filter: blur(14px); transform: scale(1.02); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
@keyframes page-out {
  to { opacity: 0; filter: blur(18px) brightness(1.5); transform: scale(0.985); }
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .mol__label { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 640px) {
  .section { padding: 10vh 6vw; }
  .mol-dock { display: none; }
  .molecule-field { gap: 22px; max-width: 340px; }
}