/* Numan Ozan — single continuous surface, dark intro into light contact */

:root {
  /* One neutral grey family, read at two levels of light: the dark half
     is lit from its edges inward, the lit half from a soft spot a little
     off centre, and each half's text is the other half's tone.        */
  --ink-core: #1e1f20;     /* centre of the dark field */
  --ink-edge: #323436;     /* its edges, just perceptibly lighter */
  --ink: #26282a;          /* the dark tone in flat use */
  --paper-edge: #c9c9c7;   /* the surface the light falls on */
  --beam-x: 30%;           /* where the light is thrown from */
  --beam-y: 45%;           /* exactly where the contact block comes to rest */
  --beam-w: 46%;           /* a wide beam, roughly half the screen */
  --beam-h: 50%;
  /* shape and size of the beam; a phone swaps this for a real circle */
  --beam: calc(var(--beam-w) * (0.55 + 0.45 * var(--open, 1)))
          calc(var(--beam-h) * (0.55 + 0.45 * var(--open, 1)));
  --dusk: 0.34;            /* how far the far side falls away */
  --lid: 0.38;             /* a band along the top, where copy leaves */
  --finish: 0.62;          /* how early the dissolve settles, in screens */
  --rush: 1.3;             /* how far ahead of the dark the light arrives */
  --curve: 1;              /* 1 eases the middle, 0 is a straight line */
  --paper-spot: #f6f5f3;   /* where the light falls */
  --paper: #d8d8d6;
  --on-ink: #f4f4f3;
  --on-ink-muted: #eeeeed;
  --on-paper: #1e2022;
  --on-paper-muted: #23262a;
  --line: rgba(30, 32, 34, 0.26);

  --gutter: clamp(22px, 6vw, 120px);
  --gap: clamp(300px, 78vh, 780px);  /* quiet stretch between the two blocks */
  --measure: 40ch;
}

* { box-sizing: border-box; }

html {
  /* no scripted or animated scrolling anywhere: every movement on this
     page is the reader's own, and anchors jump plainly */
  -webkit-text-size-adjust: 100%;
  /* clip rather than hidden: a stray pixel never earns a sideways
     scrollbar, and the page keeps a single ordinary scroll container */
  overflow-x: clip;
}

body {
  margin: 0;
  position: relative;
  background: var(--paper);
  color: var(--on-paper);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 5;
  background: var(--paper);
  color: var(--on-paper);
  padding: 10px 14px;
  font-size: 14px;
  text-decoration: none;
}
.skip:focus { top: 14px; }

/* ---------- the surface ---------------------------------------------- */
/* One layer, fixed to the viewport, so the light stays where the screen
   is rather than where the page is. script.js maps the scroll position
   straight onto two opacities: the dark field, which opens from its
   centre outward, fades away while a soft spot of light a little off
   centre fades in. Mid-way the centre is already lit while the corners
   are still low, which is the crossing of the two. Nothing animates on
   its own and no edge or band travels across the screen.              */

.surface {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--paper-edge);
}

.surface::before,
.surface::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* the dark field: centre deepest, opening outward to lighter edges */
.surface::before {
  background:
    /* extra weight along the top edge: invisible while the field is
       dark, but it keeps the top of the screen down through the middle
       of the dissolve, where the intro copy leaves */
    linear-gradient(to bottom, rgba(18, 20, 22, 1.0) 0%, rgba(18, 20, 22, 0) 56%),
    radial-gradient(112% 92% at 50% 50%,
      var(--ink-core) 0%, #232527 44%, var(--ink-edge) 100%);
  opacity: var(--field, 1);
}

/* the light, thrown slightly across the screen toward the contact copy */
.surface::after {
  /* Three things fade in together: the beam itself, a diagonal fall-off
     toward the lower right, and a soft vignette that takes the top and
     bottom down a little. The beam widens as it brightens, so it reads
     as a spot opening onto the contact copy. */
  background:
    radial-gradient(var(--beam) at var(--beam-x) var(--beam-y),
      var(--paper-spot) 0%,
      rgba(246, 245, 243, 0.88) 24%,
      rgba(246, 245, 243, 0.60) 48%,
      rgba(246, 245, 243, 0.30) 70%,
      rgba(246, 245, 243, 0.10) 86%,
      rgba(246, 245, 243, 0) 100%),
    linear-gradient(to bottom,
      rgba(24, 26, 28, var(--lid, 0)) 0%,
      rgba(24, 26, 28, calc(var(--lid, 0) * 0.37)) 16%,
      rgba(24, 26, 28, 0) 30%),
    linear-gradient(104deg,
      rgba(24, 26, 28, 0) 26%,
      rgba(24, 26, 28, calc(var(--dusk) * 0.72)) 68%,
      rgba(24, 26, 28, var(--dusk)) 100%),
    radial-gradient(118% 104% at var(--beam-x) var(--beam-y),
      rgba(24, 26, 28, 0) 40%, rgba(24, 26, 28, 0.2) 100%);
  opacity: var(--spot, 0);
}

/* Without scripting the surface cannot follow the scroll, so the intro
   carries the dark field itself and the contact half stays on paper. */
html:not(.js) .surface { display: none; }
html:not(.js) body { background: var(--paper); }
html:not(.js) .intro {
  margin-bottom: 0;
  background: radial-gradient(112% 92% at 50% 50%,
    var(--ink-core) 0%, #232527 44%, var(--ink-edge) 100%);
}

/* ---------- identity row --------------------------------------------- */

.identity {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3.4vh, 34px) var(--gutter);
  color: var(--on-ink);
}

.identity .name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--on-ink);
}

/* revealed by script.js: without JavaScript the switch cannot work */
#language { display: none; }
.js #language {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid rgba(236, 236, 234, 0.30);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--on-ink-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
#language:hover { border-color: rgba(236, 236, 234, 0.66); color: var(--on-ink); }

/* ---------- intro ----------------------------------------------------- */

main { display: block; position: relative; z-index: 1; }
main:focus { outline: none; }

.intro {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* the quiet gap lives here, so the contact section itself begins
     exactly where the dark layer has finished dissolving */
  margin-bottom: var(--gap);
  padding: calc(clamp(20px, 3.4vh, 34px) + 96px) var(--gutter) clamp(34px, 7vh, 64px);
  color: var(--on-ink);
}

.intro-body { margin: auto 0; max-width: 1260px; }

.intro h1 {
  margin: 0 0 clamp(28px, 5vh, 52px);
  font-size: clamp(31px, 4.2vw, 68px);
  line-height: 1.14;
  letter-spacing: -0.021em;
  font-weight: 500;
  max-width: 22ch;
}

.intro-text {
  display: grid;
  gap: clamp(18px, 4vw, 64px);
  max-width: 1120px;
  font-size: clamp(17px, 1.05vw, 19px);
  color: var(--on-ink-muted);
}
.intro-text p { margin: 0; max-width: var(--measure); }

@media (min-width: 900px) {
  .intro-text { grid-template-columns: 1fr 1fr; }
  .intro h1 { max-width: 26ch; }
}

/* scroll cue: a plain link, no looping motion */

.cue {
  align-self: start;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 8vh, 96px);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--on-ink);
  opacity: var(--cue-opacity, 1);
}
.cue-arrow {
  display: inline-flex;
  color: var(--on-ink-muted);
  transition: transform 0.25s ease, color 0.25s ease;
}
.cue:hover .cue-arrow { transform: translateY(3px); color: var(--on-ink); }
.cue span:last-child { border-bottom: 1px solid rgba(236, 236, 234, 0.42); padding-bottom: 3px; }
.cue:hover span:last-child { border-bottom-color: var(--on-ink); }

/* ---------- contact --------------------------------------------------- */

.contact {
  position: relative;
  z-index: 1;
  /* This section starts where the dark layer has finished dissolving, so
     the contact copy always sits on settled broken white — and being a
     full screen tall, the final screenful carries no trace of the dark. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 10vh, 120px) var(--gutter) clamp(26px, 3.4vh, 46px);
  color: var(--on-paper);
}

/* The #contact anchor sits on the heading, not on the section box, so
   following it (or opening the page on it) settles on the light state. */
.contact h2 {
  scroll-margin-top: clamp(24px, 6vh, 64px);
  /* auto margins here and on the footer share the leftover height, so
     the last screenful stays balanced instead of pooling one big gap */
  margin: auto 0 20px;
  font-size: clamp(27px, 3.2vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  font-weight: 500;
}

.contact-lead {
  margin: 0;
  max-width: 46ch;
  color: var(--on-paper-muted);
}

/* ---------- the message box ------------------------------------------ */
/* Plain fields on the same surface, underlined like the links, rather
   than a panel sitting on top of it. */

.reach {
  margin: clamp(22px, 3.2vh, 30px) 0 0;
  width: min(100%, 420px);
}

.botcheck { position: absolute; left: -9999px; opacity: 0; }

.field { margin: 0 0 clamp(13px, 1.8vh, 16px); }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--on-paper);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(30, 32, 34, 0.32);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 16px;                /* keeps phones from zooming on focus */
  color: var(--on-paper);
  transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:hover,
.field textarea:hover { border-bottom-color: rgba(30, 32, 34, 0.55); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--on-paper);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.send { margin: clamp(18px, 2.4vh, 22px) 0 0; }
.send button {
  min-height: 44px;
  padding: 11px 26px;
  border: 1px solid rgba(30, 32, 34, 0.45);
  border-radius: 999px;
  background: none;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--on-paper);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.send button:hover { border-color: var(--on-paper); background: rgba(30, 32, 34, 0.06); }
.send button[disabled] { opacity: 0.55; cursor: default; }

.count {
  display: block;
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--on-paper-muted);
}
.count.near { color: var(--on-paper); }
.count:empty { display: none; }

.reach-note {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 15px;
  color: var(--on-paper-muted);
}
.reach-note:empty { display: none; }
.reach-note a { color: var(--on-paper); text-decoration: underline; text-underline-offset: 4px; }

.links {
  list-style: none;
  margin: clamp(26px, 3.6vh, 34px) 0 clamp(26px, 3.6vh, 36px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 15px;
}
.links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(30, 32, 34, 0.36);
  color: var(--on-paper-muted);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.links a:hover { color: var(--on-paper); text-decoration-color: currentColor; }

.foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--on-paper-muted);
}

/* ---------- narrow screens -------------------------------------------- */

@media (max-width: 620px) {
  :root {
    /* A shorter quiet stretch, so a swipe carries more of the dissolve
       and the change is felt rather than guessed at. */
    --gap: clamp(170px, 30vh, 300px);
    --measure: none;
    /* The contact block comes to rest at 45% of the height, so the
       light sits there. A real circle, not an ellipse, and grown wide
       enough to cover the copy while the corners still fall away. */
    --beam-x: 44%;
    --beam-y: 45%;
    --beam: circle calc(64vmax * (0.62 + 0.38 * var(--open, 1)));
    --dusk: 0.32;
    --lid: 0;
    --finish: 0;
    /* a straight line from the top of the page to the bottom */
    --rush: 1;
    --curve: 0;
  }
  body { font-size: 16px; }
  .intro { padding-top: calc(clamp(20px, 3.4vh, 34px) + 84px); }
  .intro h1 { max-width: none; font-size: clamp(27px, 7.2vw, 38px); }
  /* the composed line break belongs to wide screens; let narrow ones wrap */
  .intro h1 br { display: none; }
  .reach { width: 100%; margin-top: clamp(22px, 3.4vh, 30px); }
  /* tightened so the heading, the box and the links share one screen */
  .field { margin-bottom: clamp(14px, 1.9vh, 17px); }
  .send { margin-top: clamp(18px, 2.6vh, 24px); }
  .links { margin-top: clamp(26px, 3.4vh, 32px); margin-bottom: clamp(24px, 3.4vh, 34px); }
  .links { gap: 12px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  /* nothing eases or animates; the surface and the cue still follow the
     scroll position, because that is what keeps the text legible */
  * { transition: none !important; animation: none !important; }
}