/* ==========================================================================
   Base / Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background: var(--fd-black);
  color: var(--fd-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: default;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; color: inherit; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 400;
  background: var(--fd-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection { background: var(--fd-purple); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fd-black); }
::-webkit-scrollbar-thumb { background: var(--fd-black-3); border-radius: 10px; border: 2px solid var(--fd-black); }

/* ============ Kicker / eyebrow shared ============ */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-yellow);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--fd-yellow);
}

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 56px); }
.section-head__note { margin-top: 16px; color: var(--fd-ink-dim); font-size: 16px; max-width: 46ch; }
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.section-head--split .section-head__note { margin-top: 0; }

/* ============ Preloader ============ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--fd-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark img {
  width: 72px; height: 72px;
  animation: spin-pulse 1.6s ease-in-out infinite;
}
.preloader__bar {
  width: 180px; height: 3px;
  background: var(--fd-line);
  border-radius: 10px;
  overflow: hidden;
}
.preloader__bar span {
  display: block; height: 100%; width: 0%;
  background: var(--fd-grad-brand);
  animation: bar-load 1.4s var(--ease-out) forwards;
}
@keyframes bar-load { to { width: 100%; } }
@keyframes spin-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(8deg); }
}

/* ============ Custom cursor ============ */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fd-yellow);
  pointer-events: none !important;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease-out), height .3s var(--ease-out), background .3s;
  display: none;
}
.cursor.is-clicking {
  animation: cursor-click .4s ease-out;
}
@keyframes cursor-click {
  0%   { transform: translate(-50%,-50%) scale(1); }
  40%  { transform: translate(-50%,-50%) scale(2.2); opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.cursor__label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fd-black);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.cursor.is-active { width: 64px; height: 64px; background: var(--fd-green); }
.cursor.is-active .cursor__label { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}

/* ============ Grain ============ */
.grain {
  position: fixed; inset: -100px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%,2%); }
  50% { transform: translate(2%,-1%); }
  75% { transform: translate(-1%,-2%); }
  100% { transform: translate(0,0); }
}

/* ============ Reveal animation base ============ */
.reveal-up, .reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
}
.reveal-up { transform: translateY(36px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-scale { transform: scale(0.92); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-up.is-visible, .reveal-scale.is-visible { opacity: 1; transform: none; }

/* stagger via --i */
.reveal-up { transition-delay: calc(var(--i, 0) * 90ms); }