/* ============================================================
   NAV — importee du projet juno (burger os + cafard + panneau)
   Les chemins d'images pointent vers ../img/
   ============================================================ */

:root{
  --ease: cubic-bezier(.7, .05, .25, 1);
  --dur: .65s;
  --ink: #6d1d2a;
}
a { color: inherit; text-decoration: none; }

/* police de la nav (comme sur juno) : thin partout, regular sur les liens */
.nav,
.nav-title,
.nav-item p,
.nav-hint{
  font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
}

/* ---------- Topbar (sticky strip + fade) ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Thinner bar — solid portion still covers the bones; the gradient fade
     is now tighter for a more refined look. */
  height: 130px;
  z-index: 40;
  pointer-events: none; /* clicks pass through to content / burger */
  background-image: url("../img/nav.svg");
  transition: opacity var(--dur) var(--ease);
  opacity: 0;
}

/* When the menu is open, only the bones (now the cross) should be visible. */
body.is-open .topbar {
  opacity: 0;
}

/* ---------- Burger / Cross ---------- */

.burger {
  position: fixed;
  top: 10px;
  right: 32px;
  width: 150px;
  height: 150px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 50; /* above the topbar */
  -webkit-tap-highlight-color: transparent;
}

.bone {
  position: absolute;
  /* Anchor at the center of the burger button.
     Each state then specifies an exact translate + rotate. */
  left: 50%;
  top: 50%;
  width: 115%;
  display: block;
  transform-origin: 50% 50%;
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}

.bone img {
  width: 100%;
  height: auto;
  display: block;
  /* drop-shadow (pas box-shadow) : suit l'alpha du PNG/SVG, donc l'ombre
     épouse la silhouette de l'os, pas un rectangle. */
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.50));
}

/* Cafard animé (Lottie) qui remplace os_2.svg dans le bouton.
   Le rendu lottie est un <svg> qui remplit ce conteneur. */
.roach-anim {
  width: 100%;
  aspect-ratio: 300 / 400;
  display: block;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.50));
}
.roach-anim svg { display: block; }
/* Image statique légère affichée au repos ; masquée dès que le Lottie est monté. */
.roach-rest { width: 100%; height: 100%; object-fit: contain; display: block; }
.roach-anim.roach-live .roach-rest { display: none; }

#burger{
    top: 62px;               /* en haut de page : descendu, l'indice au-dessus reste lisible */
    transition: top var(--dur) var(--ease);
}
/* des qu'on scrolle, l'indice disparait et le cafard remonte */
body.is-scrolled #burger{
    top: 18px;
}
/* nav ouverte : pas de mecanique de scroll, le cafard reste en place et l'indice visible */
body.is-open #burger{
    top: 62px;
}
body.is-open .nav-hint.is-hidden{
    opacity: 1;
}

/* ---- CLOSED state ----
   Top bone: slightly to the right, sitting higher, almost horizontal.
   Bottom bone: slightly to the left, sitting lower, gentle tilt. */
.bone--top {
  transform: translate(-50%, -50%) translate(10%, -45%) rotate(-15deg);
}

.bone--bottom {
  transform: translate(-50%, -80%) translate(-8%, 20%) rotate(-28deg);
}

/* ---- OPEN state ----
   Both bones converge to the exact center of the button
   and cross at ±45° to form the X. */
body.is-open .bone--top {
  transform: translate(-30%, -90%) rotate(-45deg);
}

body.is-open .bone--bottom {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- Indice au-dessus du bouton ----------
   Petit texte au-dessus du roach. Même couche (z-index) que le burger, donc il
   reste visible au-dessus de la nav ouverte. Fond sortant au scroll via la
   classe `.is-hidden` (gérée en JS). */
.nav-hint {
  position: fixed;
  top: 14px;               /* au-dessus du cafard */
  right: 46px;
  width: 150px;
  margin: 0;
  z-index: 50;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #000;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity var(--dur) var(--ease);
}

.nav-hint.is-hidden {
  opacity: 0;
}

/* ---------- Home (closed) ---------- */


/* ---------- Nav (open) ---------- */

.nav {
  background: ivory;             /* meme blanc casse que le site */
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: 14vh 6vw 6vh;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 10;
  /* Fond solide identique au body -> la nav est une vraie couche opaque,
     plus de transparence si jamais le contenu en dessous met du temps à
     se cacher (ou ne se cache pas du tout sur certains navigateurs). */
  background: ivory;             /* meme blanc casse que le site */
}

body.is-open .nav {
  opacity: 1;
  pointer-events: auto;
}

.nav-inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}


.nav-title {
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.nav-item {
  margin-bottom: 1.5rem;
}

.nav-link {
  display: inline-block;
  font-family: "suisse_intl_monoregular", ui-monospace, monospace;
  font-size: 13px;
  margin-bottom: 0.35rem;
  transition: opacity .2s;
}

.nav-link:hover { opacity: 0.55; }

.nav-item p {
  font-size: 12px;
  line-height: 1.5;
  color: #6d1d2a;
}

/* ---------- Reveal animation for nav items ---------- */

body.is-open .nav-item,
body.is-open .nav-title {
  animation: rise .6s var(--ease) both;
}

/* Section 1 : Site (titre + 2 items) */
body.is-open .nav-section:nth-child(1) .nav-title { animation-delay: .10s; }
body.is-open .nav-section:nth-child(1) .nav-item:nth-of-type(1) { animation-delay: .15s; }
body.is-open .nav-section:nth-child(1) .nav-item:nth-of-type(2) { animation-delay: .20s; }
/* Section 2 : Projects (titre + 4 items) */
body.is-open .nav-section:nth-child(2) .nav-title { animation-delay: .25s; }
body.is-open .nav-section:nth-child(2) .nav-item:nth-of-type(1) { animation-delay: .30s; }
body.is-open .nav-section:nth-child(2) .nav-item:nth-of-type(2) { animation-delay: .35s; }
body.is-open .nav-section:nth-child(2) .nav-item:nth-of-type(3) { animation-delay: .40s; }
body.is-open .nav-section:nth-child(2) .nav-item:nth-of-type(4) { animation-delay: .45s; }
/* Section 3 : Lab (titre + 3 items) */
body.is-open .nav-section:nth-child(3) .nav-title { animation-delay: .50s; }
body.is-open .nav-section:nth-child(3) .nav-item:nth-of-type(1) { animation-delay: .55s; }
body.is-open .nav-section:nth-child(3) .nav-item:nth-of-type(2) { animation-delay: .60s; }
body.is-open .nav-section:nth-child(3) .nav-item:nth-of-type(3) { animation-delay: .65s; }
body.is-open .nav-section:nth-child(3) .nav-item:nth-of-type(4) { animation-delay: .70s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Small screens ---------- */


/* ---------- petits ecrans ---------- */
@media (max-width: 600px) {
  .burger { width: 115px; height: 115px; top: 4px; right: 18px; }
  .roach-anim { transform: scale(0.68); }
  .nav-hint { top: 8px; right: 26px; width: 120px; text-align: center; font-size: 7px; letter-spacing: 0.1em; }
  #burger { top: 48px; }   /* l'os ne remonte plus sous l'indice */
  body.is-scrolled #burger { top: 4px; }
  body.is-open #burger { top: 48px; }
  .topbar { height: 105px; }
  .nav { padding: 12vh 6vw 4vh; }
}
@media (min-width: 900px) {
  .nav-inner { max-width: 920px; gap: 3.5rem; }
  .nav-title { margin-bottom: 1.75rem; }
  .nav-item { margin-bottom: 2rem; }
  .nav-link { font-size: 22px; margin-bottom: 0.6rem; }
  .nav-item p { font-size: 15px; line-height: 1.6; }
}
@media (min-width: 1400px) { .nav-inner { max-width: 1080px; } }

/* ============================================================
   MENU OUVERT — agencement sobre (inspire de tiger.exposed)
   colonnes etroites, 14px, lignes separees par un pointille fin
   ============================================================ */

.nav{
    background: ivory;
    padding: 190px 5vw 8vh;          /* degage le cafard en haut */
    justify-content: flex-start;
}

.nav .nav-inner{
    max-width: 480px;                /* une seule colonne */
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 32px;
    align-self: flex-start;          /* ne s'etire pas sur toute la hauteur */
    align-content: flex-start;       /* colonnes empilees serrees sur mobile */
}

.nav .nav-section{
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* titres de colonne : meme taille que le reste, en gras */
.nav .nav-title{
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: #000;
    margin: 0;
    padding: 0 0 4px;
}

.nav .nav-item{
    border-top: 1px solid #000;
    padding: 4px 0;
    margin: 0;
}
.nav .nav-section .nav-item:last-child{ border-bottom: 1px solid #000; }

.nav .nav-link{
    display: block;
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: #000;
    margin: 0;
    opacity: 1;
    text-decoration: none;
}
.nav .nav-link:hover{
    opacity: 1;
    text-decoration: underline;
}

/* les descriptions n'encombrent plus la liste : elles s'affichent dans l'apercu */
.nav .nav-item p{ display: none; }

/* --- apercu en bas a droite : machine a sous d'icones + description --- */
.nav-apercu{
    position: fixed;
    right: 5vw;
    bottom: 5vh;
    z-index: 11;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.nav-apercu.is-visible{ opacity: 1; }

.nav-apercu-fenetre{
    width: 110px;
    height: 110px;
    overflow: hidden;
}
.nav-apercu-bande img{
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
}
.nav-apercu.is-visible .nav-apercu-bande{
    animation: nav-rouleau .45s step-end infinite;
}
@keyframes nav-rouleau{
      0% { transform: translateY(0) }
     25% { transform: translateY(-20%) }
     50% { transform: translateY(-40%) }
     75% { transform: translateY(-60%) }
    100% { transform: translateY(0) }
}

.nav-apercu-texte{
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #000;
    text-align: right;
    margin: 0;
}

@media (max-width: 600px){
    .nav{ padding: 150px 6vw 6vh; }
    .nav-apercu{ display: none; }     /* pas de survol sur mobile */
}