/* Alamak OY — one-screen homepage: a ninja coding by a moonlit pond. The pond, the flying code
   and the splashes are drawn on <canvas> by site.js; everything here is the static scene. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/site/fonts/geist-latin.woff2') format('woff2');
}

:root {
  --bg: #0b0d1a;
  --text: #eef1f6;
  --muted: #a3abbe;
  --accent: #a9acff;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --edge: max(20px, calc((100vw - 1200px) / 2 + 24px));
  --water: clamp(84px, 15vh, 170px);      /* site.js sets the exact value */
  --ninja-h: clamp(300px, 62vh, 640px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1 { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---- Scene --------------------------------------------------------------------------------- */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
}

.sky {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1100px 700px at 80% 6%, rgba(56, 70, 170, 0.45), transparent 62%),
    linear-gradient(180deg, #0b0d1a 0%, #111633 58%, #0d1024 100%);
}
/* Stars: a few hundred pixels of radial dots, repeated. */
.sky::before {
  content: ''; position: absolute; inset: 0 0 30% 0; opacity: 0.75;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 27% 8%, #dfe4ff, transparent),
    radial-gradient(1.4px 1.4px at 41% 26%, #fff, transparent),
    radial-gradient(1px 1px at 56% 12%, #cfd6ff, transparent),
    radial-gradient(1.2px 1.2px at 66% 31%, #fff, transparent),
    radial-gradient(1px 1px at 78% 20%, #e8ebff, transparent),
    radial-gradient(1.3px 1.3px at 89% 9%, #fff, transparent),
    radial-gradient(1px 1px at 95% 34%, #dfe4ff, transparent),
    radial-gradient(1px 1px at 6% 40%, #cfd6ff, transparent),
    radial-gradient(1.2px 1.2px at 34% 44%, #fff, transparent);
  background-size: 560px 360px;
}
.moon {
  /* In the open sky between the text and the ninja (ninja width = height × 810/930). */
  position: absolute; top: 11vh; right: calc(var(--edge) + var(--ninja-h) * 0.871 + 3vw);
  width: clamp(54px, 6.5vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffaf0 0%, #ece6d4 55%, #cdc6b2 100%);
  box-shadow: 0 0 40px 10px rgba(255, 246, 220, 0.16), 0 0 140px 40px rgba(160, 175, 255, 0.12);
}

.ninja {
  position: absolute; z-index: 1;
  right: var(--edge);
  bottom: calc(var(--water) - var(--ninja-h) * 0.118); /* the pond covers the bottom of the rock */
  height: var(--ninja-h); aspect-ratio: 810 / 930;
}
.ninja picture, .ninja img { width: 100%; height: 100%; }
.ninja img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.glow {
  position: absolute; left: 17.9%; top: 45.6%; width: 38%; height: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(150, 180, 255, 0.55), transparent);
  mix-blend-mode: screen; opacity: 0.45; pointer-events: none;
}

.pond { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* Without JavaScript there is no animated pond: draw a still one. */
html:not(.js) .stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--water); z-index: 2;
  background: linear-gradient(180deg, rgba(70, 90, 210, 0.5), rgba(8, 10, 30, 0.95));
  border-top: 1.5px solid rgba(190, 205, 255, 0.5);
}

/* ---- Text ---------------------------------------------------------------------------------- */
.top {
  position: absolute; z-index: 3; top: 0; left: var(--edge); right: var(--edge);
  height: 72px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 28px; height: 28px; }
.brand__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.top__link { color: var(--muted); text-decoration: none; font-size: 0.9375rem; }
.top__link:hover { color: var(--text); }
.top__link--tel { display: none; }

.pitch {
  position: absolute; z-index: 3; left: var(--edge);
  top: calc(72px + clamp(24px, 9vh, 120px));
  width: min(560px, 46vw);
}
.pitch__kicker { color: var(--muted); font-size: 0.9375rem; margin-bottom: 18px; }
.pitch__title {
  font-size: clamp(3rem, 6.6vw, 6.25rem); font-weight: 650;
  letter-spacing: -0.045em; line-height: 0.95;
  text-shadow: 0 2px 30px rgba(11, 13, 26, 0.6);
}
.pitch__lead {
  margin-top: 24px; max-width: 470px; color: var(--muted);
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  text-shadow: 0 1px 16px rgba(11, 13, 26, 0.8);
}
.pitch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8em 1.4em; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-weight: 550; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.86; }
.pitch__phone { color: var(--muted); text-decoration: none; }
.pitch__phone:hover { color: var(--text); }
/* Phone-number buttons: the number is only assembled by site.js, so they need JavaScript. */
button.pitch__phone, button.top__link {
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
}
button.pitch__phone { text-decoration: underline; text-decoration-color: rgba(163, 171, 190, 0.4); text-underline-offset: 4px; }
html:not(.js) [data-phone] { display: none !important; }

.hint {
  margin-top: 30px;
  font-family: var(--mono); font-size: 0.875rem; color: var(--accent);
  transition: opacity 0.6s;
}
.hint::after { content: '▍'; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.hint--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint--keys { display: none; }
  .hint--touch { display: inline; }
}
.hint.is-used { opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }

.foot {
  position: absolute; z-index: 3; left: var(--edge); right: var(--edge);
  bottom: max(14px, env(safe-area-inset-bottom));
  text-align: center; font-size: 0.8125rem; color: rgba(220, 228, 255, 0.62);
}

/* ---- Small screens: text on top, ninja below it, pond at the bottom ------------------------- */
@media (max-width: 899px) {
  :root { --ninja-h: clamp(200px, 34svh, 340px); --edge: 20px; }
  .top { height: 60px; }
  .pitch { top: 76px; right: var(--edge); width: auto; }
  .pitch__kicker { margin-bottom: 12px; font-size: 0.875rem; }
  .pitch__lead { margin-top: 16px; }
  .pitch__actions { margin-top: 22px; }
  .hint { margin-top: 16px; font-size: 0.8125rem; }
  .top__link--mail, .pitch__phone { display: none; }
  .top__link--tel { display: inline; }
  .ninja { right: auto; left: 50%; transform: translateX(-36%); }
  .moon { top: 116px; right: var(--edge); width: 46px; }
  .foot__addr { display: none; }
}
@media (max-width: 899px) and (max-height: 720px) {
  :root { --ninja-h: clamp(170px, 28svh, 260px); }
  .pitch__lead { font-size: 1rem; }
}

/* Reduced motion: the pond is a still picture, so there is nothing to type into. */
@media (prefers-reduced-motion: reduce) {
  .hint { display: none; }
}