/* ==========================================================================
   FLUX — raymarched liquid metal
   The page is deliberately quiet. Everything loud is happening in the shader.
   ========================================================================== */

:root{
  --void:  #05060a;
  --paper: #eef1f6;
  --muted: rgba(238,241,246,.56);
  --faint: rgba(238,241,246,.28);
  --line:  rgba(238,241,246,.12);
  --hot:   #7de2ff;

  --shell: clamp(18px, 4vw, 68px);
  --ease:  cubic-bezier(.22,.61,.36,1);
  --mono:  ui-monospace,SFMono-Regular,Menlo,"JetBrains Mono",Consolas,monospace;
  --sans:  'Inter',-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}

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

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

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

h1,h2,p,dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
canvas{ display:block; }

.tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ==========================================================================
   Bar
   ========================================================================== */

.bar{
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px var(--shell);
  mix-blend-mode:difference;
}
.bar b{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.32em; }
.bar a{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
  transition:color .3s var(--ease);
}
.bar a:hover{ color:var(--paper); }

/* ==========================================================================
   Stage
   ========================================================================== */

.stage{ position:fixed; inset:0; z-index:1; }
.stage canvas{ width:100%; height:100%; }

/* The shader takes a beat to compile on a cold GPU — hold a flat colour over
   it so the first frame is never a white flash. */
.veil{
  position:fixed;
  inset:0;
  z-index:2;
  background:var(--void);
  pointer-events:none;
  transition:opacity .9s var(--ease);
}
.veil.is-gone{ opacity:0; }

/* ==========================================================================
   Beats
   ========================================================================== */

.story{ position:relative; z-index:3; pointer-events:none; }
.story a{ pointer-events:auto; }

.beat{
  min-height:100vh;
  display:grid;
  align-content:center;
  padding:0 var(--shell);
}
.beat--l{ justify-items:start; }
.beat--r{ justify-items:end; text-align:right; }
.beat--c{ justify-items:center; text-align:center; }

.copy{
  max-width:min(38ch,46vw);
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.copy.is-in{ opacity:1; transform:none; }

.copy h1,
.copy h2{
  margin:.3em 0 .42em;
  font-size:clamp(40px,7vw,104px);
  font-weight:200;
  letter-spacing:-.045em;
  line-height:.96;
}
.copy em{ font-style:normal; color:var(--hot); }
.copy p{ font-size:clamp(13px,1.05vw,15px); color:var(--muted); }

/* live readout of what the shader is doing */
.meter{
  display:grid;
  gap:9px;
  margin-top:26px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}
.meter div{ display:flex; align-items:center; gap:12px; }
.meter span{ min-width:8ch; }
.meter i{
  position:relative;
  display:block;
  width:clamp(90px,14vw,170px);
  height:1px;
  background:var(--line);
}
.meter i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--v,0%);
  background:var(--hot);
  box-shadow:0 0 8px var(--hot);
  transition:width .12s linear;
}
.meter b{ font-weight:500; color:var(--muted); }

/* ==========================================================================
   Foot
   ========================================================================== */

.foot{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  padding:26px var(--shell);
  background:var(--void);
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  color:var(--faint);
}
.foot a:hover{ color:var(--paper); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:820px){
  .copy{ max-width:none; }
  .beat--r{ justify-items:start; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .copy{ opacity:1; transform:none; }
}