/* =========================================================================
   kshift.me — the page is the Shift key.   (minimal cut)
   warm-paper risograph · acid-lime + coral · IBM Plex Mono / Hack (code mono)
   mobile-first; the title itself is the only control.
   ========================================================================= */

:root {
  --bg:        #f1e9d9;
  --bg-2:      #e7dcc4;
  --fg:        #18150f;
  --fg-soft:   rgba(24, 21, 15, 0.7);
  --accent:    #c7f23b; /* acid-lime — the shift highlight */
  --pop:       #ff5b45; /* riso coral — misregistration / waves */
  --line:      #18150f;
  --on-accent: #18150f;
  --ambient:   rgba(24, 21, 15, 0.32);
  --card:      #fbf6ea;

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --code: "Hack Nerd Font Mono", "Hack", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
  font-family: var(--mono);
}

html.night {
  --bg:        #16130d;
  --bg-2:      #241b10;
  --fg:        #f3ecdb;
  --fg-soft:   rgba(243, 236, 219, 0.78);
  --accent:    #c7f23b;
  --pop:       #ff6a52;
  --line:      #0d0b07;
  --on-accent: #18150f;
  --ambient:   rgba(0, 0, 0, 0.5);
  --card:      #241d12;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--fg);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-2), transparent 60%),
    var(--bg);
  overflow-x: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 420ms var(--ease), color 420ms var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* ---- decorative layers ------------------------------------------------- */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
html.night .grain { mix-blend-mode: screen; opacity: 0.14; }

/* soft spotlight so the copy stays crisp over the field */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(54% 50% at 50% 48%, var(--bg) 0%, transparent 76%);
  background:
    radial-gradient(54% 48% at 50% 46%, var(--bg) 0%, color-mix(in oklab, var(--bg) 56%, transparent) 46%, transparent 78%),
    radial-gradient(70% 36% at 50% 88%, color-mix(in oklab, var(--bg) 60%, transparent), transparent 72%);
}

/* ---- stage ------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 1.6rem);
  min-height: 100svh;
  padding:
    calc(env(safe-area-inset-top) + clamp(2rem, 6vh, 4rem))
    clamp(1.25rem, 6vw, 2rem)
    calc(env(safe-area-inset-bottom) + clamp(2.4rem, 7vh, 4rem));
  text-align: center;
}

/* title — the hero AND the only control */
.title {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-weight: 700;
  font-size: clamp(3.5rem, 22vw, 13.5rem);
  line-height: 0.84;
  letter-spacing: -0.04em;
  color: var(--fg);
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms var(--ease);
}
.title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--pop);
  transform: translate(clamp(3px, 0.06em, 10px), clamp(2px, 0.055em, 9px));
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.title:active { transform: translateY(0.012em) scale(0.992); }
.title:focus-visible {
  outline: 3px dashed var(--fg);
  outline-offset: 0.18em;
}
@media (hover: hover) {
  .title:hover::before { transform: translate(0.085em, 0.075em); }
}

/* tagline — a single line of code-mono; static, never reflows at runtime */
.tagline {
  margin: 0;
  max-width: 28rem;
  text-wrap: balance;
  font-family: var(--code);
  font-weight: 400;
  font-size: clamp(0.92rem, 3.9vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg-soft);
}
.tagline em {
  font-style: normal;
  font-weight: 700;
  color: var(--pop);
  position: relative;
  white-space: nowrap;
}
.tagline em::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.06em;
  height: 0.45em;
  z-index: -1;
  background: var(--accent);
  transform: rotate(-0.8deg);
  opacity: 0.85;
}

/* hint — pinned bottom-centre; self-presses, then fades after first shift */
.hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 1.1rem);
  z-index: 3;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55em;
  font-size: clamp(0.72rem, 2.7vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--fg-soft);
  text-shadow: 0 0 0.5em var(--bg), 0 0 0.5em var(--bg);
  pointer-events: none;
  animation: rise 0.7s var(--ease) 0.5s backwards;
  transition: opacity 500ms var(--ease);
}
.hint.is-hushed { opacity: 0; }
.hint kbd {
  font-family: var(--mono);
  font-size: 0.92em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.32em;
  color: var(--fg);
  border: 1.6px solid var(--fg-soft);
  border-radius: 0.42em;
  box-shadow: 0 0.14em 0 var(--fg-soft);
  animation: keytap 2.6s var(--ease) infinite;
}
@keyframes keytap {
  0%, 70%, 100% { transform: translateY(0); box-shadow: 0 0.14em 0 var(--fg-soft); }
  80% { transform: translateY(0.13em); box-shadow: 0 0.02em 0 var(--fg-soft); }
}

/* signature — the one real link */
.sign {
  margin-top: clamp(0.6rem, 3vw, 1.2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.3rem 0.65rem 0.3rem 0.3rem;
  text-decoration: none;
  color: var(--fg);
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 0.2rem 0 var(--line);
  cursor: default;
  transition: transform 130ms var(--ease), box-shadow 130ms var(--ease), background 240ms var(--ease);
}
.sign__face {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex: 0 0 auto;
}
.sign__handle {
  font-size: clamp(0.85rem, 3.4vw, 0.98rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sign__at { color: var(--pop); }
@media (hover: hover) {
  .sign:hover {
    transform: translateY(-0.14rem);
    box-shadow: 0 0.42rem 0 var(--line);
    background: var(--accent);
  }
  .sign:hover .sign__handle,
  .sign:hover .sign__at { color: var(--on-accent); }
}
.sign:active { transform: translateY(0.05rem); box-shadow: 0 0.1rem 0 var(--line); }
.sign:focus-visible { outline: 3px solid var(--pop); outline-offset: 3px; }

/* ---- shift-held: the title capitalises (mono → no reflow) -------------- */
body.is-shifting .title { text-transform: uppercase; }
body.is-shifting .title::before {
  color: var(--accent);
  transform: translate(0.085em, 0.075em);
}

/* ---- entrance ---------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
.stage > * { animation: rise 0.7s var(--ease) backwards; }
.title   { animation-delay: 0.08s; }
.tagline { animation-delay: 0.2s; }
.sign    { animation-delay: 0.32s; }

/* ---- short-and-wide (landscape phones) --------------------------------- */
@media (max-height: 560px) and (min-width: 561px) {
  .title { font-size: clamp(2.8rem, 12vw, 7rem); }
  .stage { gap: 0.8rem; }
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* keep day↔night a gentle crossfade — never a hard luminance cut */
  body { transition: background-color 380ms ease, color 380ms ease !important; }
}