/* ============================================================
   Chocolata Graphics — home : vidéo, hero, catégories,
   philosophy, contact
   (marquees, reveal, cat-word, bulle de survol, bandeau → components.css)
   ============================================================ */

/* Dans un groupe, les blocs image suivent le texte avec un léger décalage */
.hero__row .hero__thumb.reveal-init {
  transition-delay: 0.35s;
}

/* ---------- Hero background video ---------- */

.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

/* ---------- Hero / YOUR STORY ---------- */

.hero {
  position: relative;
  overflow: hidden;

  /* Le défilement WORKS démarre à ~700px du haut du site (header compris) */
  padding: calc(280px - var(--header-h)) 0 110px;
}

.hero > *:not(.hero-bg-video) {
  position: relative;
  z-index: 1;
}

.hero__title {
  margin-top: clamp(120px, 10vh, 170px);
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.4vw, 40px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.hero__title mark {
  background: transparent;
  color: #fff;
  padding: 0.1em 0.35em;
}

.hero__intro {
  margin-top: clamp(10px, 15vh, 10px);
}

.hero__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(20px, 15vh, 100px);
  padding-inline: clamp(16px, 6vw, 120px);
}

.hero__row .text-block {
  max-width: 630px;
  margin-inline: auto;
  text-align: center;
}

.hero__media {
  flex: 0 0 156px;
  will-change: transform;
}

.hero__thumb {
  width: 156px;
  height: 162px;
  background: var(--paper);
}

.hero__closing {
  margin-top: clamp(56px, 8vh, 96px);
}

/* ---------- Hero : révélation progressive des 3 blocs ---------- */

.hero-scroll-text {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.hero-scroll-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Texte de la home ---------- */

.hero__intro,
.hero__row .text-block,
.hero__closing,
.philosophy .text-block,
.contact__text {
  color: #fff;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.85;
}

/* ---------- Pile de catégories (façon recruit.triorb.co.jp) ---------- */
.cat-stack {
  margin-top: 0px;
}

.cat-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--i) * var(--bar-h));
  z-index: calc(10 + var(--i));
}

/* Les 4 cartes : fond sombre propre à chaque catégorie. Le mot géant et la
   liste prennent l'accent de la catégorie ; le rappel de catégorie et le
   filet de la barre passent en blanc. */
.cat-panel:nth-child(1) { background: #09002d; }
.cat-panel:nth-child(2) { background: #1a1542; }
.cat-panel:nth-child(3) { background: #282254; }
.cat-panel:nth-child(4) { background: #312c62; }

.cat-panel .cat-word,
.cat-panel .cat-list,
.cat-panel__more {
  color: var(--cat-accent);
}

.cat-panel__bar h3 {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--paper);
}

.cat-panel__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bar-h);
  padding-left: calc(28px + var(--i) * 92px);
}

.cat-panel__line {
  width: 64px;
  height: 1px;
  background: var(--paper);
}

.cat-panel__body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: clamp(420px, 58vh, 540px);
  padding-bottom: 40px;
}

/* ---------- PUBLISHING : vidéo en fond de toute la carte ---------- */

.cat-panel__body--media {
  min-height: clamp(420px, 58vh, 540px);
  overflow: visible;
}

/* La vidéo est positionnée par rapport au body mais remonte
   de la hauteur de la barre pour couvrir toute la carte. */
.cat-panel__video {
  position: absolute;
  top: calc(-1 * var(--bar-h));
  left: 0;
  width: 100%;
  height: calc(100% + var(--bar-h));
  z-index: 0;
  object-fit: cover;
  background: inherit;
}

/* Le filet + "PUBLISHING" restent au-dessus de la vidéo */
.cat-panel__bar {
  position: relative;
  z-index: 2;
}

/* Le contenu de Publishing reste au-dessus de la vidéo */
.cat-panel__body--media .cat-panel__center,
.cat-panel__body--media .cat-list {
  position: relative;
  z-index: 1;
}
.cat-panel__center {
  position: relative; /* ancre le lien étendu du mot géant */
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* Le mot géant est le lien : au clavier comme à la souris, toute la zone
   répond, via un lien « étendu » (::after) calé sur .cat-panel__center. */
.cat-panel__link {
  position: static;
}

.cat-panel__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cat-panel__link:focus-visible {
  outline: none;
}

.cat-panel__link:focus-visible::after {
  outline: 2px solid var(--paper);
  outline-offset: 6px;
}

/* Sur grand écran, le libellé n'est pas écrit sous le mot : il n'apparaît que
   dans la bulle qui suit le curseur. Il reste lu par les lecteurs d'écran. */
.cat-panel__more {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cat-list {
  grid-column: 3;
  justify-self: start;
  padding-left: clamp(12px, 2.5vw, 40px);
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 2.1;
}

/* ---------- About / Work procedures ----------
   ABOUT US vient se caler sous la dernière carte catégorie, avec le même
   espace visuel qu'entre le header et le mot géant des pages catégorie */

.about {
  padding: 0 0 90px;
}

.about .marquee--xl {
  margin-top: clamp(-32px, -1.7vw, -10px);
}

/* WORK PROCEDURES vient se caler juste sous ABOUT US (maquette) :
   on annule l'espace des descentes/interlignage entre les deux lignes */
.about .marquee--md {
  margin-top: clamp(-64px, -3.4vw, -26px);
}

.philosophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(70px, 10vh, 120px);
  padding-inline: 24px;
}

.philosophy__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: #fff;
}

.about-contact {
  background-image: url("/assets/img/about-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Contact ---------- */
.contact {
  padding-bottom: clamp(80px, 10vh, 120px);
}

.contact__text {
  margin-top: clamp(40px, 6vh, 70px);
}

.contact__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: clamp(44px, 6vh, 70px) auto 0;
  font-size: 11px;
  letter-spacing: 0.3em;
  padding: 8px 4px;
  color: #fff;
}

.contact__cta svg {
  transition: transform 0.3s ease;
}

.contact__cta:hover svg {
  transform: translateY(4px);
}

.page-home .site-footer {
  background: #fff;
  color: #1c1c1c;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero {
    padding-top: clamp(180px, 32vh, 100px);
  }

  .hero__title {
    line-height: 0.9;
  }

  .hero__row {
    flex-direction: column;
  }

  .hero__row--left {
    flex-direction: column-reverse;
  }

  .hero__row .text-block {
    text-align: center;
  }

  .cat-panel__bar {
  padding-left: 28px;
  }

  .cat-panel__body {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  gap: 0px;
  height: 300px;
  min-height: 0px;
  box-sizing: border-box;
  padding: 30px 0 44px;
}

  .cat-panel__body--media {
    grid-template-rows: auto auto;
    align-content: start;
    padding-top: 0; /* la vidéo reste collée sous la barre, sans décalage */
  }

  .cat-panel__body--media .cat-panel__center,
  .cat-panel__body--media .cat-list {
    grid-row: auto;
  }
  
  .cat-panel__center,
  .cat-list {
    grid-column: auto;
  }

  .cat-word {
  margin: 10px;
}

  .cat-list {
    justify-self: center;
    padding-left: 0;
    line-height: 1.7;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 24px;
    row-gap: 0;
    justify-content: center;
    line-height: 1.7;
  }
}


/* Pas de survol (doigt, stylet) : la bulle ne s'affiche pas, le libellé revient
   donc sous le mot géant, comme avant. Le mot reste tapable — le lien étendu
   couvre toute la zone. Même condition que .bubble dans components.css. */
@media (hover: none), (pointer: coarse) {
  .cat-panel__more {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font-size: 10px;
    letter-spacing: 0.28em;
    padding: 6px 2px;
  }
}

.home-marquee span {
  color: #fff;
}

/* ---------- About / Work procedures : blanc transparent ---------- */

.about .marquee span {
  color: rgba(255, 255, 255, 0.5);
}

/* Mobile : le premier texte (intro) atteint les bords → gouttière */
@media (max-width: 640px) {
  .hero__intro {
    padding-inline: 15px;
  }
}



/* ---------- Fond après les catégories ---------- */

.page-home main {
  background: #2e2e3b;
}