/* Layout: one continuous sky, two screens tall. Screen 1: horizon glow + lockup centred. Scrolling shrinks the lockup into a header and reveals screen 2 (the darkest part of the sky) with one line and the contact address. The whole scroller is run through the rising-wave displacement filter. */
:root{
  --bg:#04071a;          /* near-black blue at the foot */
  --fg:#e9ecf2;
  --fg-2:#a9b3cc;
  --glow-core:#eef3ff;
  --glow-mid:#5b8dff;
  --glow-deep:#1b45c9;
  --glow-edge:#061030;
  --wordmark:"Baloo 2",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--wordmark);overflow:hidden;-webkit-font-smoothing:antialiased}

/* the scroller: fixed to the viewport, filtered; its content is 200vh tall */
.world{position:fixed;inset:0;overflow:hidden;z-index:0;will-change:filter}
.scroller{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;z-index:1}
.sky{position:absolute;left:0;top:0;width:100%;height:200vh;height:200svh;z-index:0;pointer-events:none;will-change:transform;
  background:
    radial-gradient(150vw 100vh at 50% -50vh,
      var(--glow-edge) 0%, #10339e 44%, var(--glow-deep) 54%, var(--glow-mid) 63%, #b9ccff 69%, var(--glow-core) 72%, #a7bdff 75%, var(--glow-mid) 79%, var(--glow-deep) 86%, transparent 100%),
    linear-gradient(180deg, #1b45c9 0%, #1538ad 18%, #0d2275 30%, #071347 40%, var(--bg) 52%, #03050f 100%);
  filter:saturate(1.05) blur(6px)}
.sky::after{content:"";position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

.screen{position:relative;z-index:1;height:100vh;height:100svh;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#s2{display:grid;place-items:center}
.about{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px);text-align:center}
.line{margin:0;font-weight:500;font-size:clamp(22px,2.8vw,36px);line-height:1.25;letter-spacing:.005em;text-wrap:balance;max-width:24ch}
.mail{font:inherit;font-weight:400;font-size:clamp(14px,1.3vw,17px);letter-spacing:.06em;color:var(--fg-2);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .25s}
.mail:hover,.mail:focus-visible{color:var(--fg);outline:none}

/* lockup: symbol spans the cap height of the K (measured in-browser for Baloo 2 500: cap top .153em below the line box, cap height .614em) */
.brand{position:absolute;left:0;top:0;z-index:2;transform-origin:0 0;font-size:clamp(34px,5.2vw,72px);color:var(--fg);display:flex;align-items:flex-start;gap:.16em;white-space:nowrap;animation:in 1.6s cubic-bezier(.2,.7,.2,1) both;pointer-events:none}
.brand svg{height:.614em;width:auto;margin-top:.153em;display:block;flex:none}
.word{font-weight:500;font-size:1em;letter-spacing:.01em;line-height:1}
@keyframes in{from{opacity:.001}to{opacity:1}}

.down{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;background:none;border:0;padding:10px;cursor:pointer;color:var(--fg);opacity:.55;animation:breathe 3.2s ease-in-out infinite;transition:opacity .3s}
.down svg{display:block;width:22px;height:22px}
.down.gone{opacity:0;pointer-events:none;animation:none}
@keyframes breathe{50%{transform:translateX(-50%) translateY(5px)}}
@media (prefers-reduced-motion: reduce){.brand,.down{animation:none}.world{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}