/* =========================
   RESET / BASE
========================= */

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

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  position: relative;
}

/* =========================
   CURSEUR CUSTOM
========================= */

html, a, button {
  cursor: none;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
}

.cursor::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  opacity: 0;
  transition: 0.2s;
}

/* =========================
   FOND (grain + lumière)
========================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(0,0,0,0.02), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.015), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.015) 0px,
    transparent 2px
  );
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

/* =========================
   STRUCTURE
========================= */

header, nav, .hero, .enter {
  position: relative;
  z-index: 2;
}

/* =========================
   HEADER
========================= */

header {
  padding: 40px;
}

h1 {
  font-size: 64px;
  letter-spacing: 8px;
  margin-top: 20px;
}

/* =========================
   NAV DESKTOP
========================= */

nav {
  position: fixed;
  top: 120px;
  right: 40px;
  text-align: right;
}

nav a {
  display: block;
  color: black;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 5px 0;
  opacity: 0.3;
  transition: 0.3s;
}

nav a:hover {
  opacity: 1;
}

/* =========================
   HERO
========================= */

.hero {
  height: 50vh;
  display: flex;
  align-items: center;
  padding: 40px;
}

.tagline {
  font-size: 14px;
  letter-spacing: 3px;
  opacity: 0.3;
}

/* =========================
   ENTER ARCHIVE
========================= */

.enter {
  position: fixed;
  bottom: 50px;
  left: 20px;
  right: 20px;
}

/* barcode discret */
.enter .barcode {
  height: 8px;
  width: 80px;
  opacity: 0.2;
}

/* texte */
.enter a {
  display: block;
  margin-top: 10px;

  font-size: 12px;
  letter-spacing: 6px;
  text-decoration: none;
  color: black;

  opacity: 0.35;
  transition: 0.4s ease;
}

/* hover global */
.enter:hover .barcode {
  opacity: 0.8;
  transform: scaleX(1.1);
}

.enter:hover a {
  opacity: 1;
  letter-spacing: 10px;
}

/* =========================
   BARCODE
========================= */

.barcode {
  width: 100%;
  height: 60px;
  background: repeating-linear-gradient(
    to right,
    black 0px,
    black 1px,
    white 3px
  );
}

/* =========================
   TRANSITION PAGE
========================= */

.page-transition {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.6s ease;
}

.page-transition.active {
  transform: translateY(0);
}

/* =========================
   LOADER
========================= */

.loader {
  width: 20px;
  height: 20px;
  border: 1px solid white;
  animation: pulse 0.8s infinite;
}

@keyframes pulse {
  50% { transform: scale(0.6); opacity: 0.5; }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  /* ===== RESET MOBILE ===== */
  body {
    background: #f2f2f2;
    overflow-x: hidden;
  }

  /* ===== HEADER DISCRET ===== */
  header {
    position: absolute;
    top: 20px;
    left: 20px;
    opacity: 0.25;
  }

  h1 {
    font-size: 26px;
    letter-spacing: 3px;
  }

  /* ===== NAV = CENTRE ===== */
  nav {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  nav a {
    font-size: 22px;
    letter-spacing: 4px;
    opacity: 1;
  }

  /* ===== HERO CLEAN ===== */
  .hero {
    position: absolute;
    bottom: 120px;
    left: 20px;
    right: 20px;
  }

  .tagline {
    font-size: 12px;
    opacity: 0.4;
  }

  /* ===== ENTER ARCHIVE CLEAN ===== */
  .enter {
    position: fixed;
    bottom: 30px;
    left: 20px;
    right: 20px;
  }

  .enter .barcode {
    width: 100%;
    height: 30px;
  }

  .enter a {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 3px;
    opacity: 0.6;
  }

}

/* =========================
   ENTER HOVER FX (SIGNATURE)
========================= */

/* container */
.enter {
  transition: transform 0.3s ease;
}

/* léger mouvement global */
.enter:hover {
  transform: translateX(4px);
}

/* TEXTE GLITCH */
.enter a {
  position: relative;
  display: inline-block;
}

/* duplication glitch */
.enter a::before,
.enter a::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

/* rouge glitch */
.enter a::before {
  color: rgba(255, 0, 80, 0.6);
}

/* bleu glitch */
.enter a::after {
  color: rgba(0, 100, 255, 0.6);
}

/* activation */
.enter:hover a::before {
  animation: glitch1 0.3s linear;
  opacity: 1;
}

.enter:hover a::after {
  animation: glitch2 0.3s linear;
  opacity: 1;
}

@keyframes glitch1 {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}

@keyframes glitch2 {
  0% { transform: translate(0); }
  20% { transform: translate(2px, -1px); }
  40% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, 0); }
  100% { transform: translate(0); }
}

/* =========================
   BARCODE SCAN BOOST
========================= */

.enter:hover .barcode {
  animation: scanFlash 0.4s linear;
}

@keyframes scanFlash {
  0% {
    transform: scaleX(0.3);
    opacity: 0.4;
  }
  50% {
    transform: scaleX(1.2);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.9;
  }
}

.scan-line,
.scan-transition,
.boot-screen,
.page-transition {
  pointer-events: none;
}
.page-transition.active {
  pointer-events: all;
}