/* ============================================================
   EasyStudio — Headless frontend
   Shared design system / global styles
   ============================================================ */

@font-face { font-family: 'GeistFallback'; src: local('Helvetica Neue'), local('Arial'); }

:root {
  /* canvas */
  --bg:        #000000;
  --bg-2:      #050506;
  --surface:   #0d0d0f;
  --surface-2: #161618;
  --line:      #222225;
  --line-2:    #454545;

  /* ink */
  --white:     #f4f3ef;
  --ink:       #e9e8e3;
  --muted:     #9a9a9d;
  --faint:     #6a6a6e;

  /* brand blue */
  --blue:        #0000ff;
  --blue-bright: #5b5bff;  /* legible on dark */
  --blue-soft:   #2a2aff;

  /* type */
  --font: 'Geist', 'GeistFallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* metrics */
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1680px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-feature-settings: "ss01", "cv01";
  font-feature-settings: "ss01", "cv01";
}

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

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* hide native cursor only where custom cursor active */
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: clamp(5rem, 12vh, 11rem); }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--blue-bright);
  border-radius: 50%;
  box-shadow: 0 0 12px 1px var(--blue);
}
.eyebrow.no-dot::before { display: none; }

/* ---------- type ---------- */
.display {
  font-weight: 540;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1.display { font-size: clamp(3.1rem, 11.5vw, 13rem); }
h2.display { font-size: clamp(2.4rem, 6.4vw, 6.2rem); }
h3.display { font-size: clamp(1.9rem, 3.4vw, 3.3rem); letter-spacing: -0.025em; line-height: 1; }
.lede { font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.42; color: var(--ink); max-width: 36ch; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.blue { color: var(--blue-bright); }

/* word/line reveal masks */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; will-change: transform; }
.r-word { display: inline-block; overflow: hidden; vertical-align: top; }
.r-word > span { display: inline-block; will-change: transform; }

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9000;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
.cursor-ring {
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border: 1px solid rgba(255,255,255,0.6);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cursor-ring .clabel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; opacity: 0; transition: opacity .3s; mix-blend-mode: difference;
}
body.cz-hover .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: rgba(255,255,255,0.9); }
body.cz-view .cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--blue); border-color: var(--blue); mix-blend-mode: normal; }
body.cz-view .cursor-ring .clabel { opacity: 1; }
body.cz-view .cursor-dot { opacity: 0; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; } }

/* ============================================================
   Preloader
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--pad);
}
#preloader .pl-count {
  font-family: var(--font); font-weight: 500;
  font-size: clamp(4rem, 18vw, 16rem); line-height: 0.8;
  letter-spacing: -0.04em; color: var(--white);
}
#preloader .pl-count .pct { color: var(--blue-bright); }
#preloader .pl-word { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.6rem; }
.pl-bar { position: fixed; left: 0; bottom: 0; height: 2px; background: var(--blue); width: 0%; z-index: 10001; }

/* page transition overlay */
#pt-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--blue);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
#pt-overlay .pt-mark { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; opacity: 0; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--pad);
  mix-blend-mode: difference;
}
.nav .logo { display: flex; align-items: center; gap: 0.6rem; }
.nav .logo img { height: 44px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem); }
.nav-links a {
  font-size: 0.92rem; letter-spacing: -0.01em; position: relative; padding: 0.2rem 0;
  color: var(--white);
}
.nav-links a .nl-num { font-family: var(--mono); font-size: 0.6rem; vertical-align: super; color: var(--muted); margin-right: 0.25em; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 100px; padding: 0.6rem 1.1rem; color: var(--white);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.nav-cta:hover { background: var(--white); color: #000; border-color: var(--white); }
.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav { mix-blend-mode: normal; background: linear-gradient(var(--bg), transparent); }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 5px; }
  .nav-burger span { width: 26px; height: 2px; background: var(--white); display: block; transition: .3s; }
  .mnav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .mnav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* mobile menu panel */
#mobile-menu {
  position: fixed; inset: 0; z-index: 999; background: var(--bg-2);
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: var(--pad);
  clip-path: inset(0 0 100% 0); pointer-events: none;
}
#mobile-menu.open { pointer-events: auto; }
#mobile-menu a { font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 500; letter-spacing: -0.03em; color: var(--white); }
#mobile-menu a .mm-num { font-family: var(--mono); font-size: 0.8rem; color: var(--blue-bright); vertical-align: super; margin-right: 0.4em; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 1rem; letter-spacing: -0.01em; padding: 1.05rem 1.7rem;
  border-radius: 100px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); color: var(--white);
}
.btn .btn-fill { position: absolute; inset: 0; background: var(--blue); z-index: -1; transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover .btn-fill { transform: translateY(0); }
.btn:hover { border-color: var(--blue); color: #fff; }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translate(4px,-4px); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary .btn-fill { background: #fff; }
.btn-primary:hover { color: #000; }

/* ============================================================
   Marquee
   ============================================================ */
.marquee { display: flex; overflow: hidden; width: 100%; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: 4.5rem; padding-right: 4.5rem; white-space: nowrap; }
.marquee__track span { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; color: var(--faint); display: inline-flex; align-items: center; gap: 4.5rem; }
.marquee__track span::after { content: "✦"; color: var(--blue-bright); font-size: 0.7rem; }

/* ============================================================
   Placeholder media
   ============================================================ */
.ph {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 12px, transparent 12px 24px);
  display: flex; align-items: center; justify-content: center;
}
.ph .ph-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ph .ph-media { will-change: transform; position: absolute; inset: -8%; background-image: repeating-linear-gradient(135deg, rgba(91,91,255,0.05) 0 16px, transparent 16px 32px); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-top: clamp(4rem, 9vh, 8rem); position: relative; overflow: hidden; }
.footer-big { font-size: clamp(3.5rem, 16vw, 17rem); font-weight: 540; letter-spacing: -0.04em; line-height: 0.82; color: var(--white); white-space: nowrap; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(3rem,6vh,5rem); border-top: 1px solid var(--line); margin-top: clamp(3rem,7vh,6rem); }
.footer-col h5 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.2rem; font-weight: 400; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col ul a { color: var(--muted); transition: color .3s; font-size: 0.98rem; }
.footer-col ul a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--faint); flex-wrap: wrap; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.5rem; } }

/* glow utility */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); background: var(--blue); opacity: 0.22; pointer-events: none; z-index: 0; }

/* generic reveal initial state (JS animates) */
[data-reveal] { will-change: transform, opacity; }

/* divider row */
.rowline { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .reveal-line > span, .r-word > span { transform: none !important; }
}