/* 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: 44%;
  --beam-w: 46%;           /* a wide beam, roughly half the screen */
  --beam-h: 50%;
  --dusk: 0.34;            /* how far the far side falls away */
  --paper-spot: #f6f5f3;   /* where the light falls */
  --paper: #d8d8d6;
  --on-ink: #ececea;
  --on-ink-muted: #d9d9d8;
  --on-paper: #1e2022;
  --on-paper-muted: #23262a;
  --line: rgba(30, 32, 34, 0.26);

  --gutter: clamp(22px, 6vw, 120px);
  --gap: clamp(340px, 82vh, 880px);  /* 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: 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(calc(var(--beam-w) * (0.55 + 0.45 * var(--open, 1)))
                    calc(var(--beam-h) * (0.55 + 0.45 * var(--open, 1)))
                    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(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) 42%, 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(26px, 5vh, 58px) var(--gutter) clamp(34px, 6vh, 64px);
  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);
}

.email {
  margin: clamp(26px, 5vh, 44px) 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.email a {
  display: inline-block;
  padding: 11px 0;            /* keeps a comfortable touch target */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(30, 32, 34, 0.38);
  overflow-wrap: break-word;
  transition: text-decoration-color 0.2s ease;
}
.email a:hover { text-decoration-color: currentColor; }

.links {
  list-style: none;
  margin: clamp(34px, 8vh, 76px) 0 clamp(44px, 9vh, 104px);
  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 {
    --gap: clamp(320px, 88vh, 820px);
    --measure: none;
    --beam-x: 50%;
    --beam-y: 40%;
    --beam-w: 96%;
    --beam-h: 54%;
    --dusk: 0.26;
  }
  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; }
  .email { font-size: 17px; }
  .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; }
}