/* Vapourspace — vapourspace.com.au landing (built from v3, Los Angeles scene) */
:root{
  --font:"Helvetica Neue",Helvetica,"Inter Tight",Arial,sans-serif;
  --kana:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --pad:clamp(20px,5.5vw,88px);
  --bg:#06111f; --ink:#e6eef8; --muted:#7f95b0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.top{position:relative;z-index:5;display:flex;align-items:center;gap:14px;padding:22px var(--pad)}
.mark{width:30px;height:30px;display:block;filter:invert(1)}
.links{margin-left:auto;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.links a{border-bottom:1px solid transparent;padding-bottom:2px}.links a:hover{border-color:currentColor}

/* hero */
.hero{position:relative;z-index:3;align-self:start;padding:clamp(40px,11vh,130px) var(--pad) 0}
.wordmark{position:relative;margin:0;color:#f4f8fc;width:min(80vw,1080px);filter:drop-shadow(0 0 26px rgba(120,175,235,.32))}
.wordmark svg{display:block;width:100%;height:auto;overflow:visible}
/* headlight sheen: a light band sweeps across the strokes now and then */
.sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;
  -webkit-mask:url(wordmark-V-tall.svg) 0 0/100% 100% no-repeat;mask:url(wordmark-V-tall.svg) 0 0/100% 100% no-repeat}
.sheen i{position:absolute;top:0;bottom:0;left:-40%;width:30%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(200,225,255,.55) 42%,#fff 50%,rgba(200,225,255,.55) 58%,rgba(255,255,255,0) 85%)}
.sheen.go{opacity:1}
.sheen.go i{animation:sweep 8s cubic-bezier(.55,0,.25,1) .4s infinite}
@keyframes sweep{0%{transform:translateX(0)}24%,100%{transform:translateX(480%)}}
.line{margin:clamp(18px,2.4vw,34px) 0 0;font-size:clamp(17px,1.7vw,24px);font-weight:400;letter-spacing:.01em;text-shadow:0 1px 18px rgba(2,6,13,.8)}
.line .l{font-weight:200}
.kana{margin:12px 0 0;font-family:var(--kana);font-weight:300;font-size:12px;letter-spacing:.42em;color:var(--muted)}

/* footer */
.foot{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,auto) 1fr;gap:clamp(18px,4vw,64px);
  padding:22px var(--pad) 26px;font-size:13px;font-weight:300;align-items:end}
.foot .k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:400}
.foot .copy{justify-self:end;color:var(--muted);font-size:11px;letter-spacing:.08em}
.foot a:hover{text-decoration:underline}
.clock{font-variant-numeric:tabular-nums}

/* LA scene (heat.js) */
.art{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.heat-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{position:absolute;inset:-50%;mix-blend-mode:screen;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ?fps=1 readout */
.fps{position:fixed;right:10px;top:10px;z-index:20;font:500 11px/1 ui-monospace,Menlo,monospace;color:#9fe870;background:rgba(0,0,0,.6);padding:6px 8px;border-radius:6px;pointer-events:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:761px) and (max-width:1100px){
  .foot{grid-template-columns:repeat(4,auto);row-gap:16px}
  .foot .copy{grid-column:1/-1;justify-self:start}
}
@media (max-width:760px){
  .foot{grid-template-columns:1fr 1fr}
  .foot .copy{justify-self:start}
  .wordmark{width:86vw}
}