/* ============================================================
   Chocolata Graphics — composants partagés :
   marquees, apparition au scroll, mots catégorie, view more,
   bandeau d'images
   ============================================================ */

/* ---------- Marquees (Cormorant Garamond) ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee span {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
}

.marquee--xl span {
  font-size: clamp(110px, 14.5vw, 270px);
  letter-spacing: 0.01em;
}

.marquee--md span {
  font-size: clamp(48px, 5.4vw, 100px);
}

.marquee--red span {
  color: var(--red);
}

/* Slash de séparation (slash.svg de la DA) : masqué pour suivre la couleur
   du texte, calé sur la hauteur des capitales et posé sur la ligne de base */
.marquee__slash {
  display: inline-block;
  height: 0.62em;
  aspect-ratio: 234.51 / 198.7;
  margin-inline: 0.12em;
  background: currentColor;
  -webkit-mask: url("/assets/img/slash.svg") no-repeat center / contain;
  mask: url("/assets/img/slash.svg") no-repeat center / contain;
}

/* ---------- Marquee géant (pages catégorie, travail, contact) ----------
   Taille et calage communs ; chaque page définit sa couleur via
   `.page-xxx .marquee--giant { color: … }`. */
.marquee--giant {
  font-size: clamp(150px, 26vw, 380px);
  line-height: 0.72;
  margin-top: -0.04em;
}

.marquee--giant span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0.01em;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---------- Apparition au scroll ----------
   L'état masqué (.reveal-init) est posé par le JS : sans JS, tout reste visible. */
.reveal-init {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-view.reveal-init,
.in-view .reveal-init {
  opacity: 1;
  transform: none;
}

/* ---------- Mot catégorie (Gotham thin, césure imposée par la DA) ----------
   GRA/PHI/C… — la graisse 100 doit exister dans le kit Adobe pqk8esc. */

.cat-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
  font-size: clamp(52px, 6.5vw, 120px);
  line-height: 0.78;
  letter-spacing: 0.16em;
  text-indent: 0.16em; /* compense le letter-spacing du dernier caractère */
}

/* ---------- Bulle de survol (ovale du picto + « voir plus ») ----------
   Un seul exemplaire par page, dans base.njk. Le JS la déplace (translate sur
   .bubble) pendant que l'apparition joue sur .bubble__inner : les deux
   animations ne se marchent donc jamais dessus. */
.bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  width: 74px;
  height: 76px;
  margin: -38px 0 0 -37px; /* centrée sur le curseur */
  pointer-events: none;
  will-change: transform;
}

/* Zoom à l'entrée, dézoom à la sortie — pas de fondu : l'ovale naît du curseur
   et y retourne. */
.bubble__inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bubble.is-on .bubble__inner {
  transform: scale(1);
}

.bubble__shape {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: var(--bubble-color, var(--red));
  transition: fill 0.3s ease;
}

.bubble__label {
  grid-area: 1 / 1;
  max-width: 78%;
  font-size: 7px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
}

.bubble__label:lang(ja) {
  font-size: 8px;
  letter-spacing: 0.06em;
}

/* Pas de bulle au doigt ni au stylet : elle ne remplace jamais une info. */
@media (hover: none), (pointer: coarse) {
  .bubble {
    display: none;
  }
}

/* Sans mouvement : simple apparition, pas de zoom. */
@media (prefers-reduced-motion: reduce) {
  .bubble__inner {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .bubble.is-on .bubble__inner {
    transform: none;
    opacity: 1;
  }
}

/* ---------- Bandeau d'images ---------- */
.works-strip {
  padding-bottom: 26px;
}

.strip {
  overflow: hidden;
}

.strip__track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

/* Même cadre que la vignette de la grille (250 × 197), juste un peu plus
   large : une seule image sert aux deux endroits. */
.strip__item {
  width: 280px;
  aspect-ratio: 250 / 197;
  background: var(--placeholder);
  flex-shrink: 0;
  transition: opacity 0.35s ease;
}

.strip__item:hover {
  opacity: 0.82;
}

.strip__link {
  display: block;
  height: 100%;
}

.strip__link picture {
  display: block;
  height: 100%;
}

.strip__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strip__nav {
  display: flex;
  justify-content: center;
  gap: clamp(60px, 10vw, 140px);
  margin-top: 22px;
}

.strip__btn {
  padding: 10px 14px;
  opacity: 0.75;
  color: #fff;
  transition: opacity 0.3s ease;
}

.strip__btn:hover {
  opacity: 1;
}