@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

/* =========================
   DESIGN TOKENS
========================= */

:root {
  /* Colors */
  /* Base */
  --color-bg: #f4f7ff;
  --color-text: #0b0f1a;

  /* Text hierarchy (beaucoup plus lisible) */
  --color-text-muted: #5a6475;
  --color-text-soft: #8b93a6;

  /* Borders (plus subtil, moins “gris UI”) */
  --color-border: #dbe3f3;

  /* Accent taupe (signature douce, premium) */
  --color-accent: #2f6bff;

  /* Utility */
  --color-inverse: #ffffff;

  /* Spacing system (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Typography */
  --font-sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text-base: 18px;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.074rem;
  --text-4xl: 2.488rem;
  --text-5xl: 2.986rem;

  --line-tight: 1.2;
  --line-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-medium: 250ms;

  /* Layout */
  --container-width: 1600px;
}

/* =========================
   SKILL LABELS (draggable)
========================= */
.skill-zone {
  position: relative;
  margin-top: var(--space-8);
  height: 120px;

  border-radius: 24px;

  /* subtil mais perceptible */
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--color-border);

  backdrop-filter: blur(8px);

  /* overflow visible : les labels peuvent sortir de la zone au drag */
  overflow: visible;

  /* 👇 DOT GRID */
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px,
      transparent 1px);

  background-size: 20px 20px;

}

.skill-zone::before {
  content: "My skill";
  position: absolute;
  top: 16px;
  left: 20px;

  font-size: 12px;
  color: var(--color-text-soft);
  letter-spacing: 0.2px;
}

.skill-ghost {
  position: absolute;
  width: max-content;
  padding: 10px 20px;

  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.2px;
  color: transparent;

  border: 1.5px dashed rgba(0, 0, 0, 0.18);
  background: transparent;

  pointer-events: none;
  z-index: 1;

  transition: opacity 200ms ease, border-color 200ms ease;
}

.skill {
  position: absolute;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 10;
  letter-spacing: -0.2px;

  transition: box-shadow 150ms ease, scale 150ms ease;
  will-change: transform, left, top;
}

.skill--dragging {
  cursor: grabbing;
  scale: 1.08;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}

.skill-design {
  background: #eeedfe;
  color: #3c3489;
  border: 1.5px solid #afa9ec;
}

.skill-ux {
  background: #e1f5ee;
  color: #085041;
  border: 1.5px solid #5dcaa5;
}

.skill-ui {
  background: #faece7;
  color: #712b13;
  border: 1.5px solid #f0997b;
}

.skill-research {
  background: #faeeda;
  color: #633806;
  border: 1.5px solid #ef9f27;
}

.skill-strategy {
  background: #fbeaf0;
  color: #72243e;
  border: 1.5px solid #ed93b1;
}


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

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   LAYOUT
========================= */
header {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.cursor-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.trail-img {
  position: absolute;
  width: 120px;
  aspect-ratio: 16 / 9;
  object-fit: cover;

  transform: translate(-50%, -50%) scale(0.9);
  opacity: 1;

  transition:
    transform 1.2s cubic-bezier(.22, 1, .36, 1),
    opacity 2s ease;

  filter: saturate(1.1) contrast(1.05);
}

/* =========================================================
   NAVIGATION
   - Styles globaux de la barre de navigation
   - Structure + typographie + interactions
   ========================================================= */

/* =========================
   NAV CONTAINER (LAYOUT)
========================= */
nav {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  font-size: var(--text-sm);
}

/* =========================
   BRAND / LOGO
========================= */
.logo {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  color: var(--color-text);
}

/* =========================
   NAV LINKS LIST
========================= */
.nav-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* =========================
   NAV LINKS BASE STYLE
========================= */
.nav-links a {
  text-decoration: none;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

/* =========================
   NAV LINKS HOVER (underline animation)
========================= */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-out);
}

.nav-links a:hover {
  color: var(--color-text);
}

/* .nav-links a:hover::after {
  transform: scaleX(1);
} */

/* =========================
   NAV PAGE
========================= */

.nav-page a::before {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(0%);
  width: 14px;
  height: 14px;

  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out),
    transform var(--duration-medium) var(--ease-out);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11 5.07089C7.93431 5.5094 5.5094 7.93431 5.07089 11H7V13H5.07089C5.5094 16.0657 7.93431 18.4906 11 18.9291V17H13V18.9291C16.0657 18.4906 18.4906 16.0657 18.9291 13H17V11H18.9291C18.4906 7.93431 16.0657 5.5094 13 5.07089V7H11V5.07089ZM3.05493 11C3.51608 6.82838 6.82838 3.51608 11 3.05493V1H13V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H23V13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451V23H11V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H1V11H3.05493ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.nav-page a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}


/* =========================
   NAV SOCIAL
========================= */

.nav-social a::before {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(0%) translateX(0px) scale(.8);
  width: 14px;
  height: 14px;

  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out),
    transform var(--duration-medium) var(--ease-out);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 3.44772 3 3V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.nav-social a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(2px) scale(1);
}

/* =========================
   HERO / HEADER CONTENT
========================= */
.header-content {
  max-width: 720px;
}

.header-content h1 {
  font-size: var(--text-3xl);
  line-height: var(--line-tight);
  margin-bottom: var(--space-4);
  margin-top: var(--space-9);
  letter-spacing: -0.5px;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.8%;
}

.header-content h1 strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.header-content h1 a {
  position: relative;
  display: inline-block;
  color: var(--color-text-soft);
  text-decoration: none;
  width: fit-content;
  transition: var(--duration-medium);
}



.header-content h1 a:hover {
  color: var(--color-accent);
  padding-right: 20px;
}

.header-content h1 a:hover::after {
  opacity: 0;
}

.header-content p {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.header-content h1 a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(0%) translateX(0px) scale(.8);
  width: 14px;
  height: 14px;

  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out),
    transform var(--duration-medium) var(--ease-out);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 3.44772 3 3V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.header-content h1 a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(2px) scale(1);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  header {
    padding: var(--space-6) var(--space-4);
  }

  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .nav-links {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .header-content h1 {
    font-size: var(--text-xl);
  }
}






/* =========================
   PROJECTS (EDITORIAL + INTERACTIVE)
========================= */

.projects {
  margin-top: var(--space-9);
}

.projects-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* =========================
   GRID → FLEX (for expansion effect)
========================= */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-9);
  align-items: stretch;
}

.projects-grid {
  margin-bottom: var(--space-9);
}

/* =========================
   PROJECT ITEM
========================= */

.project {
  flex: 1;
  display: flex;
  flex-direction: column;

  text-decoration: none;
  color: inherit;

  transition: all 400ms var(--ease-out);
  cursor: pointer;
  transform-origin: 0 0;
  transform: scale(1);
}

/* Hover expansion */
.project:hover {
  cursor: none;
}

/* Dim others when hovering grid */
.projects:has(.project:hover) .project:not(:hover) {
  opacity: 0.55;
}

.project:hover {
  opacity: 1;
}

/* =========================
   IMAGE
========================= */

.project-media {
  width: 100%;
  aspect-ratio: 16 / 9;

  background: #e9edf5;

  transition: transform 700ms var(--ease-out);
  will-change: transform;
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   TEXT
========================= */

.project-info {
  margin-top: var(--space-3);
}

.project-info h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.3px;
  color: var(--color-text-muted);
}

.project-info span {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  .projects-grid {
    flex-direction: column;
  }

  .project:hover {
    flex: 1;
    transform: none;
  }
}


.cursor-label {
  position: fixed;
  top: 0;
  left: 0;

  transform: translate(-50%, -50%) scale(0.8) rotate(-12deg);
  opacity: 0;
  filter: blur(8px);

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(12px);

  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;

  pointer-events: none;
  white-space: nowrap;
  z-index: 99999;

  transition:
    opacity 0.35s cubic-bezier(.22, 1, .36, 1),
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    filter 0.35s cubic-bezier(.22, 1, .36, 1);
}

.cursor-label.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

#cursorDot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--color-text-muted);
  pointer-events: none;
  z-index: -1;
  transform: translate(0, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

#cursorDot.is-none {
  background: var(--color-bg);
}

#cursorDot.is-link {
  background: var(--color-inverse);
  border: 1px solid var(--color-border);
  transform: translate(-50%, -50%);
}

#cursorDot.is-underline {
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent);
  transform-origin: left center;
}