:root {
  --bg: #071525;
  --cyan: #6ff1ff;
  --text: #f6fbfd;
  --muted: #b6d2e4;
  --faint: #9fb4c2;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- cinematic hero ---------- */
.hero,
.glow,
.scrim,
.motes {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.hero { z-index: -3; overflow: hidden; }

/* The plate fills the hero box. On wide screens it becomes an image-space
   coordinate system, so the motion layers can be pinned to the artwork. */
.frame { position: absolute; inset: 0; }

.hero picture,
.hero img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero img {
  object-fit: cover;
  object-position: center center;
}

/* Motion layers are not decoration: they carry the two tail fibres and two
   background bacteria that were lifted out of the plate, and at rest they
   recompose the artwork exactly. They must stay rendered at all times —
   only their movement is optional. */
.fx { display: none; }

/* ambient turquoise bloom over the capsid */
.glow {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 24%,
      rgba(110, 236, 255, 0.17) 0%,
      rgba(96, 214, 255, 0.07) 32%,
      rgba(70, 180, 230, 0.02) 52%,
      transparent 68%);
  /* two non-harmonic cycles on different properties, so the ambient light
     never settles into an obvious repeat */
  animation: bloom 24s ease-in-out infinite,
             bloom-breathe 41s ease-in-out infinite;
}

@keyframes bloom {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

@keyframes bloom-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* gentle scrim: holds type contrast without flattening the artwork */
.scrim {
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(4, 11, 21, 0.42) 0%, transparent 18%),
    linear-gradient(to top,   rgba(4, 11, 21, 0.55) 0%, rgba(4, 11, 21, 0.22) 22%, transparent 40%);
}

/* drifting micro-particles */
.motes { z-index: 0; }

.motes span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #9fe9ff;
  opacity: var(--o);
  filter: blur(var(--b, 0.3px));
  animation: drift var(--d) linear var(--t) infinite;
}

/* one-way drift that fades in and out, so the loop point is never visible */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0);          opacity: 0; }
  14%  { transform: translate3d(3px, -5px, 0);     opacity: calc(var(--o) * 0.75); }
  40%  { transform: translate3d(9px, -15px, 0);    opacity: var(--o); }
  68%  { transform: translate3d(16px, -27px, 0);   opacity: calc(var(--o) * 0.5); }
  88%  { transform: translate3d(21px, -37px, 0);   opacity: calc(var(--o) * 0.16); }
  100% { transform: translate3d(24px, -44px, 0);   opacity: 0; }
}

/* ---------- layout ---------- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.2rem, 4.1vh, 3.2rem) 1.25rem clamp(1.1rem, 4.9vh, 3.6rem);
  text-align: center;
}

.masthead,
.message,
.colophon {
  width: 100%;
  min-width: 0;
}

/* ---------- wordmark ---------- */
.wordmark {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.1vw, 1.2rem);
  font-size: clamp(0.82rem, min(1.62vw, 2.9vh), 1.5rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  color: #eaf7fb;
  animation: rise 1.5s cubic-bezier(.2,.7,.3,1) backwards;
}

/* trailing letter-space must not break optical centring */
.wordmark span { padding-left: 0.38em; }
.wordmark em { font-style: normal; color: var(--cyan); }

.wordmark i {
  display: block;
  width: clamp(1.4rem, 2.4vw, 2.6rem);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(190, 229, 243, 0.55));
}
.wordmark .rule-r { background: linear-gradient(to left, transparent, rgba(190, 229, 243, 0.55)); }

/* ---------- headline block ---------- */
.message {
  margin-top: auto;
  margin-bottom: 0;
}

.headline {
  margin: 0 0 clamp(0.4rem, 1.72vh, 1.2rem);
  font-size: clamp(1.75rem, min(4.42vw, 7.9vh), 5.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--text);
  text-shadow: 0 2px 26px rgba(3, 12, 22, 0.55);
  animation: rise 1.5s cubic-bezier(.2,.7,.3,1) 0.1s backwards;
}

.headline em {
  font-style: normal;
  color: var(--cyan);
}

.subtitle {
  margin: 0;
  font-size: clamp(0.92rem, min(1.78vw, 3.2vh), 1.4rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  text-shadow: 0 1px 18px rgba(3, 12, 22, 0.5);
  animation: rise 1.5s cubic-bezier(.2,.7,.3,1) 0.22s backwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- colophon ---------- */
.colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(1.2rem, 3.84vh, 3rem);
  animation: rise 1.5s cubic-bezier(.2,.7,.3,1) 0.34s backwards;
}

.accent-rule {
  display: block;
  width: clamp(2.6rem, 4.2vw, 4.4rem);
  height: 1.5px;
  background: linear-gradient(to right, rgba(111, 241, 255, 0.15), var(--cyan), rgba(111, 241, 255, 0.15));
  opacity: 0.85;
}

.colophon p {
  margin: clamp(1rem, 5.22vh, 3.6rem) 0 0;
  font-size: clamp(0.64rem, min(0.86vw, 1.55vh), 0.82rem);
  letter-spacing: 0.3em;
  color: var(--faint);
}
.colophon p::after { content: ""; }

/* ---------- portrait / mobile composition ---------- */
@media (max-aspect-ratio: 1/1) {
  .hero img { object-position: center 38%; }

  .glow {
    background:
      radial-gradient(circle at 50% 29%,
        rgba(110, 236, 255, 0.16) 0%,
        rgba(96, 214, 255, 0.06) 30%,
        transparent 58%);
  }

  .scrim {
    background:
      linear-gradient(to bottom, rgba(4, 11, 21, 0.4) 0%, transparent 16%),
      linear-gradient(to top,   rgba(4, 11, 21, 0.72) 0%, rgba(4, 11, 21, 0.34) 26%, transparent 46%);
  }

  .headline { font-size: clamp(1.6rem, 7.4vw, 2.9rem); }
  .subtitle { font-size: clamp(0.9rem, 3.5vw, 1.15rem); }
  .wordmark { font-size: clamp(0.76rem, 3vw, 1rem); }
  .colophon p { font-size: clamp(0.6rem, 2.3vw, 0.74rem); }
}

/* ---------- living plate (wide screens only) ----------
   The frame takes the artwork's aspect ratio and is offset exactly the way
   object-position would crop it, which gives the layers below a stable
   image-space coordinate system at every window size. Narrow and portrait
   viewports keep the untouched single-image plate. */
@media (min-aspect-ratio: 10001/10000) {
  .frame {
    --ar: 1.77683;          /* 1672 / 941 */
    --oy: 50%;
    inset: auto;
    left: 50%;
    top: var(--oy);
    width: max(100vw, calc(100vh * var(--ar)));
    height: max(100vh, calc(100vw / var(--ar)));
    transform: translate(-50%, calc(-1 * var(--oy)));
  }

  .fx {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    will-change: transform;
  }

  /* --- two blurred background bacteria: slow, unequal, unsynchronised drift --- */
  .fx-bac-tl {
    left: 0; top: 4.8884%; width: 24.8206%; height: 54.0914%;
    background-image: url(assets/fx-bac-tl.webp);
    animation: bac-tl 79s ease-in-out infinite;
  }
  .fx-bac-r {
    left: 81.5191%; top: 17.0032%; width: 18.4809%; height: 28.1615%;
    background-image: url(assets/fx-bac-r.webp);
    animation: bac-r 97s ease-in-out infinite;
  }

  /* --- two tail fibres, each pivoting at its own knee joint --- */
  .fx-fib-l {
    left: 30.6220%; top: 48.8842%; width: 8.7321%; height: 20.5101%;
    background-image: url(assets/fx-fibre-l.webp);
    transform-origin: 88.356% 7.254%;
    animation: fibre-l 11s cubic-bezier(.37, 0, .44, 1) infinite;
  }
  .fx-fib-r {
    left: 57.2967%; top: 42.6142%; width: 10.1077%; height: 21.2540%;
    background-image: url(assets/fx-fibre-r.webp);
    transform-origin: 9.467% 7.5%;
    animation: fibre-r 7s cubic-bezier(.37, 0, .44, 1) infinite;
  }

  /* One adjustment per cycle: right settles at 2.0-3.8s of every 7s, left at
     3.6-5.4s of every 11s. Onsets are 7k+2.0 and 11m+3.6, which differ by 1.6s
     — never an integer apart, so the two fibres can never start together. */
  @keyframes fibre-r {
    0%, 28.57%   { transform: rotate(0deg); }
    35%          { transform: rotate(0.44deg); }
    41.43%       { transform: rotate(0.63deg); }
    47.14%       { transform: rotate(0.56deg); }
    54.29%, 100% { transform: rotate(0deg); }
  }
  @keyframes fibre-l {
    0%, 32.73%   { transform: rotate(0deg); }
    38.64%       { transform: rotate(-0.30deg); }
    43.18%       { transform: rotate(-0.52deg); }
    46.36%       { transform: rotate(-0.45deg); }
    49.09%, 100% { transform: rotate(0deg); }
  }

  /* translations are percentages of each layer, so drift scales with the plate */
  @keyframes bac-tl {
    0%   { transform: translate(0, 0); }
    28%  { transform: translate(1.15%, -0.92%); }
    55%  { transform: translate(1.70%, 0.46%); }
    78%  { transform: translate(0.62%, 1.08%); }
    100% { transform: translate(0, 0); }
  }
  @keyframes bac-r {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-1.26%, 1.18%); }
    61%  { transform: translate(-1.88%, -0.58%); }
    84%  { transform: translate(-0.48%, -1.36%); }
    100% { transform: translate(0, 0); }
  }
}

/* ultra-wide: cover crops vertically, so keep the capsid's headroom */
@media (min-aspect-ratio: 2/1) {
  .hero img { object-position: center 28%; }
  .frame { --oy: 28%; }
  .glow { background: radial-gradient(circle at 50% 30%, rgba(110,236,255,.16) 0%, rgba(96,214,255,.06) 30%, transparent 60%); }
}

@media (max-width: 420px) {
  .page { padding-left: 1rem; padding-right: 1rem; }
}

/* short landscape windows: keep everything on one screen */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .colophon { margin-top: clamp(0.6rem, 2vh, 1.2rem); }
  .colophon p { margin-top: clamp(0.5rem, 1.6vh, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .glow,
  .motes span,
  .wordmark,
  .headline,
  .subtitle,
  .colophon,
  .fx {
    animation: none !important;
  }
  /* .fx keeps rendering — stopped, the layers restore the original artwork */
  .glow { opacity: 0.86; transform: none; }
}