/* Leftfield — coming soon */

@font-face {
  font-family: "LF Display";
  src: url("/assets/fonts/archivo-wordmark.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "LF Mono";
  src: url("/assets/fonts/mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2014;
}
@font-face {
  font-family: "LF Mono";
  src: url("/assets/fonts/mono-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

:root {
  --bg: #000;
  --fg: #fff;
  --dim: rgba(255, 255, 255, .62);
  --faint: rgba(255, 255, 255, .34);
  --pad: clamp(16px, 3.2vw, 44px);
  --wd: 112;
  --wg: 800;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  overflow: hidden;
  font-family: "LF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

::selection { background: #fff; color: #000; }

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

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: .085;
  background-repeat: repeat;
  animation: grain 1.1s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-4%, 3%, 0); }
  34%  { transform: translate3d(3%, -5%, 0); }
  51%  { transform: translate3d(-6%, -2%, 0); }
  68%  { transform: translate3d(5%, 4%, 0); }
  85%  { transform: translate3d(-2%, 6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(0, 0, 0, .78) 100%);
}

.flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

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

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  padding: var(--pad);
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

.wordmark {
  display: flex;
  align-items: baseline;
  font-family: "LF Display", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 13.6vw, 236px);
  line-height: .86;
  letter-spacing: -.03em;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.wordmark .ch {
  display: inline-block;
  font-variation-settings: "wdth" var(--wd), "wght" var(--wg);
  text-shadow:
    0 0 calc(var(--glow, 0) * 18px) rgba(255, 255, 255, calc(var(--glow, 0) * .95)),
    0 0 calc(var(--glow, 0) * 60px) rgba(255, 255, 255, calc(var(--glow, 0) * .55));
  opacity: var(--op, 1);
  will-change: font-variation-settings, text-shadow, opacity;
}

.js .wordmark .ch {
  --op: 0;
  animation: lf-reveal 0s 2.6s forwards; /* güvenlik: JS gelmezse harfler yine görünür */
}

@keyframes lf-reveal { to { opacity: 1; } }

.lf-ready .wordmark .ch { animation: none; } /* JS hazır: görünürlüğü intro yönetir */

.sub {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  font-size: clamp(11px, 1.02vw, 14px);
  font-weight: 500;
  letter-spacing: .52em;
  color: var(--dim);
}

.sub__text {
  display: inline-block;
  min-width: 11ch;
  margin-right: -.52em; /* sondaki harf aralığını dengele */
  white-space: pre;
}

.rule {
  width: clamp(22px, 5.5vw, 84px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* ---------- bars ---------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--faint);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

.bar--top { top: 0; padding-top: max(var(--pad), env(safe-area-inset-top)); }
.bar--bottom { bottom: 0; padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sep {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
}

.sep--short { width: 10px; }

.live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 2px #fff;
  animation: live 1.8s ease-in-out infinite;
}

@keyframes live {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ---------- cursor ---------- */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .35s ease;
}

.has-cursor .cursor.is-on { opacity: 1; }

.cursor__dot,
.cursor__ring {
  position: absolute;
  border-radius: 50%;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
}

.cursor__ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid #fff;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .35s ease;
}

.is-hot .cursor__ring {
  transform: scale(2.4);
  background: #fff;
}

.is-down .cursor__ring { transform: scale(.7); }
.is-hot.is-down .cursor__ring { transform: scale(2.1); }

@media (hover: hover) and (pointer: fine) {
  .has-cursor,
  .has-cursor * { cursor: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .wordmark { font-size: 15vw; }
  .bar { font-size: 9.5px; letter-spacing: .18em; }
  .bar--bottom .tag:first-child { display: none; }
  .bar--bottom { justify-content: center; }
  .sub { letter-spacing: .42em; }
  .sub__text { margin-right: -.42em; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .grain, .live { animation: none; }
  .js .wordmark .ch { --op: 1; animation: none; }
  .cursor__ring { transition: none; }
}