/* ==========================================================================
   Franck Guglietta — Page « en construction »
   Charte reprise du portfolio : #0e0e0e / #f5f5f5 / #ffffff, Inter.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------- */
:root {
  --color-black: #0e0e0e;
  --color-gray: #f5f5f5;
  --color-white: #ffffff;

  --text-on-light: var(--color-black);
  --text-muted: rgba(14, 14, 14, 0.56);

  --gutter: clamp(20px, 4vw, 48px);

  /* Même taille que le titre typewriter du portfolio (--project-title-size). */
  --typewriter-size: clamp(1.9rem, 3.1vw, 2.9rem);
  --logo-size: clamp(44px, 4.2vw, 56px);
}

/* ---- Reset ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-gray);
  color: var(--text-on-light);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01" on, "case" on;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Layout ----------------------------------------------------------
   Trois rangées : espace / bloc / espace, les deux espaces de même hauteur
   (1fr) → le bloc reste centré dans l'écran ; « Site en construction »
   est calé en haut de la rangée du haut. */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}

.status {
  align-self: start;
  margin-top: clamp(20px, 4vw, 40px);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Hero : mots qui défilent + icône --------------------------------
   Le couple (typewriter + icône) forme une seule ligne, centrée en bloc
   par rapport à la page. */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 10px);
  margin-bottom: 56px;
}

/* Comme sur le portfolio : texte aligné à GAUCHE dans une boîte de largeur
   minimale fixe (celle du mot le plus long, "Develop,") — le "D" reste à
   une position fixe et les lettres s'écrivent vers la droite, sans jamais
   faire bouger l'icône ni le centrage de la ligne. */
.typewriter {
  min-width: 4.55em; /* largeur de "Develop,|" en Inter 600 */
  text-align: left;
  font-size: var(--typewriter-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  animation: typewriter-blink 1s step-end infinite;
}

@keyframes typewriter-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Icône FG : la forme du logo sert de masque, fond noir uni (la forme
   d'origine, telle quelle). Seul effet : le reflet (.logo::after) qui traverse
   l'icône en diagonale, en mode "screen". */
.logo {
  --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,69.79v24s23.13,0,23.13,0c3.09,0,6.06-1.22,8.27-3.39l20.96-20.61H0Z'/%3E%3Cpath d='M88.18,6.21H.01v54.29s61.79,0,61.79,0l34.65-34.09c7.52-7.4,2.28-20.2-8.27-20.2Z'/%3E%3C/svg%3E");

  position: relative;
  flex: none;
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
  background: var(--color-black);
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;
}

/* Le reflet vit dans une boîte 3x plus grande que l'icône et se déplace en
   diagonale : ainsi il couvre toujours toute l'icône pendant son passage,
   sans jamais être coupé par les bords de sa propre boîte. */
.logo::after {
  content: "";
  position: absolute;
  inset: -100%;
  /* 135.5deg : bandes parallèles au côté droit de l'icône (segments
     l34.65,-34.09 et l20.96,-20.61 du tracé SVG, soit ~44.5° de pente). */
  background: linear-gradient(
    135.5deg,
    transparent 40.5%,
    rgba(255, 255, 255, 0.04) 43.5%,
    rgba(205, 215, 230, 0.2) 46.3%,
    rgba(230, 235, 242, 0.48) 48.8%,
    rgba(240, 243, 248, 0.68) 50%,
    rgba(230, 235, 242, 0.48) 51.2%,
    rgba(205, 215, 230, 0.2) 53.7%,
    rgba(255, 255, 255, 0.04) 56.5%,
    transparent 59.5%
  );
  mix-blend-mode: screen;
  transform: translate(-29%, -29%);
  animation: logo-sheen 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

/* Le reflet traverse l'icône en diagonale, du haut-gauche au bas-droite (~3,6 s), puis pause. */
@keyframes logo-sheen {
  0% {
    transform: translate(-29%, -29%);
  }
  45%,
  100% {
    transform: translate(29%, 29%);
  }
}

/* ---- Textes ---------------------------------------------------------- */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-light);
}

/* « Site en construction » : capsule au contour noir, texte noir. Le
   padding droit est réduit de la valeur du letter-spacing, ajoutée après
   la dernière lettre, pour que le texte paraisse centré. */
.status-pill {
  display: inline-block;
  padding: 6px calc(12px - 0.14em) 6px 12px;
  border: 1px solid var(--color-black);
  border-radius: 999px;
  color: var(--text-on-light);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.signature {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 0.85rem;
}

.name {
  font-weight: 600;
  color: var(--text-on-light);
}

.contact {
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.contact:hover {
  color: var(--text-on-light);
}

/* ---- Effet grille (js/grid-effect.js) --------------------------------
   L'effet est dessiné dans .grid-canvas, sous la page. Les éléments
   marqués [data-grid] y seraient redessinés (et donc déformés) : quand
   l'effet est actif (classe .grid-on sur <html>), leur version DOM devient
   invisible mais reste en place (accessibilité, mesures). Aucun ne l'est
   actuellement. Le bloc central et la capsule restent au-dessus du canvas,
   jamais déformés, et [data-grid-exclude] y efface les points. */
.grid-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.page {
  position: relative;
  z-index: 1;
}

.grid-on [data-grid] {
  opacity: 0;
}

/* Au doigt : le glissé déplace l'effet au lieu de faire défiler la page
   (le zoom à deux doigts reste possible). */
.grid-on body {
  touch-action: pinch-zoom;
}

/* Repère 0×0 inséré en début de ligne pour mesurer position et ligne de base. */
.grid-marker {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Mouvement réduit ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .logo::after,
  .typewriter-cursor {
    animation: none;
  }
}