/* ═══════════════════════════════════════════════════════
   style.css — Shared styles for all pages
   ═══════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design tokens ────────────────────────────────────── */
:root {
  --header-h: 80px;
  --footer-h: 52px;
  --fg:   #111;
  --muted: #888;
  --bg:   #fffbf5;
  --red : #fc223c;
}

html, body {
  min-height: 100%;
}

body {
  font-family: 'Mulish', Helvetica, Arial, sans-serif;
  color: var(--fg);
}
body::before{
  content: '';
  z-index: -99;
  width: 100%;
  height: 100%;
  background-image: url("../img/background.png");
  background-size: 100%;
  background-position: center;
  position: fixed;
}
h1, h2, h3{
  font-family: 'Kanit'
}
h1, h2{
  font-weight: 700;
}

/* ── Keyframes ────────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Header ───────────────────────────────────────────── */
header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 24px;
  /* background: var(--bg); */
}

.header-social {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-social a {
  display: flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.header-social a:hover { color: var(--red); }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
}

.logo img { width: 150px;}

/* ── Footer ───────────────────────────────────────────── */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px 24px 160px;
  gap: 5px;
}

.footer-question {
  font-size: 18px;
  color: var(--fg);
}

.footer-answer {
  font-size: 22px;
  font-family: 'Kanit';
  font-weight: 700;
  color: var(--red);
  transition: opacity 0.2s;
}

/* Project pages: footer fades in on load */
.page-project footer {
  animation: fadeIn 0.6s 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* ═══════════════════════════════════════════════════════
   Project page styles
   ═══════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.58) 100%);
  z-index: 1;
  opacity: 0;
  animation: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes opacity {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

.hero-text {
  position: relative;
  z-index: 2;
  max-width: 50%;
  color: #fff;
  text-align: center;
  animation: fadeInUp 0.7s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Back button ──────────────────────────────────────── */
/*
 * Centering: .back-btn-wrap centers with flex.
 * .back-label collapses to max-width:0 (zero visible width via
 * border-box + overflow:hidden), so the arrow alone is centered.
 * On hover, the label expands → .back-btn widens → flex re-centers it
 * → arrow slides left naturally, no explicit translateX needed.
 */
.back-btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 52px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.4s cubic-bezier(1, .21, .33, 1.03);
  color: inherit;
}

.back-btn:hover { opacity: 1; }

.back-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.back-arrow svg {
  display: block;
  transform: scaleX(-1);
}

.back-label {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-left: 12px; /* collapses with max-width (border-box) */
  transition: max-width 0.4s cubic-bezier(.59, .03, .47, .96);
}

.back-btn:hover .back-label { max-width: 96px; }

.back-label .letter {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-btn:hover .back-label .letter:nth-child(1) { opacity: 1; transition-delay:   0ms; }
.back-btn:hover .back-label .letter:nth-child(2) { opacity: 1; transition-delay:  40ms; }
.back-btn:hover .back-label .letter:nth-child(3) { opacity: 1; transition-delay:  80ms; }
.back-btn:hover .back-label .letter:nth-child(4) { opacity: 1; transition-delay: 120ms; }
.back-btn:hover .back-label .letter:nth-child(5) { opacity: 1; transition-delay: 160ms; }
.back-btn:hover .back-label .letter:nth-child(6) { opacity: 1; transition-delay: 200ms; }

/* ── Project titles ───────────────────────────────────── */
.page-project h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 12px;
  display: block;
}

.page-project h1 {
  font-size: clamp(38px, 5.5vw, 84px);
  font-weight: 700;
  line-height: 1.05;
}

/* ── Description ──────────────────────────────────────── */
.project-body {
  padding: 80px 24px;
  display: flex;
  justify-content: center;
}

.container-60 {
  width: 100%;
  max-width: 60%;
  margin: 0 auto;
}

.project-desc p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg);
}

.project-desc p + p { margin-top: 1.25em; }

/* ── Gallery ──────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 40px;
}

.gallery-item img {
  display: block;
  height: auto;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Back section (after gallery) ────────────────────── */
.back-section {
  display: flex;
  justify-content: center;
  padding: 140px 24px 150px;
  color: var(--fg);
}

/* ── Project navigation ──────────────────────────────── */
.project-nav-wrap {
  height: 60vh;
}

.project-nav {
  display: flex;
  width: 100%;
  height: 60vh;
  position: fixed;
  top: var(--header-h); /* JS le ramène à 0 dès que le header disparaît */
  left: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
}

.pnav-item {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pnav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pnav-current {
  width: 56%;
}

.pnav-current::after {
  background: linear-gradient(160deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.58) 100%);
  opacity: 0;
  animation: fadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pnav-side {
  width: 22%;
  text-decoration: none;
  cursor: pointer;
}

.pnav-side::after {
  background: rgba(0,0,0,0.45);
  transition: background 0.35s;
}

.pnav-side:hover::after {
  background: rgba(0,0,0,0.2);
}

.pnav-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px;
}

.pnav-current .pnav-content {
  animation: fadeInUp 0.7s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  padding: calc(16px + 16px * (1 - var(--shrink, 0)));
}

/* Shrinks from clamp(38px,5.5vw,84px) → clamp(26px,3.5vw,56px) as --shrink goes 0→1 */
.pnav-current .project-work {
  font-size: clamp(
    calc(26px + 12px * (1 - var(--shrink, 0))),
    calc(3.5vw + 2vw * (1 - var(--shrink, 0))),
    calc(56px + 28px * (1 - var(--shrink, 0)))
  );
}

.pnav-type {
  font-family: 'Kanit', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
  display: block;
}

.pnav-client {
  font-family: 'Kanit', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.1;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-text    { max-width: 90%; }
  .container-60 { max-width: 90%; }
  .project-body { padding: 56px 24px; }
  .page-project .header-back { left: 16px; }

  /* Mobile : center en haut, prev + next fixes en bas */
  .project-nav-wrap { height: auto; }
  .project-nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    height: auto !important;
  }
  .pnav-side {
    position: fixed;
    bottom: 0;
    height: 10vh;
    width: 50%;
    order: unset;
    z-index: 15;
  }
  .pnav-prev { left: 0; }
  .pnav-next { left: 50%; }
  .pnav-current {
    width: 100%;
    height: 44vw;
    order: unset;
  }
  .pnav-content { padding: 10px; }
  .pnav-client { font-size: clamp(11px, 3vw, 16px); }
  .pnav-current .project-work { font-size: clamp(20px, 5vw, 34px); }
  .pnav-current .pnav-content { padding: 12px; }
  /* Espace en bas pour que le footer ne se cache pas derrière la nav fixe */
  .page-project footer { padding-bottom: calc(10vh + 48px); }
}

@media (max-width: 768px) {
  .gallery { grid-template-columns: 1fr; }
}