/* ==========================================================================
   home-idea — v22 « Craft »
   « Let your / Autonomous Bots / handle the work. » + skyline-office.webp
   Double page de magazine : typographie à gauche calée sur la gouttière du
   header, aquarelle recadrée à droite, bords fondus dans le blanc, parallaxe
   ≤ 12 px, entrée chorégraphiée titre → image.
   Scopé sur #idea. Chargé après toutes les feuilles existantes.
   ========================================================================== */

#idea.idea-v22 {
  --idea-ease: cubic-bezier(.2, .7, .2, 1);
  /* rythme vertical sur la grille de 8 px */
  --idea-pad-top: clamp(72px, 6.4vw, 112px);
  --idea-pad-bottom: clamp(64px, 5.6vw, 96px);
  --idea-art-zoom: 1.06;          /* recadrage : mange le blanc mort à gauche et en haut */
  --idea-art-shift: 0px;          /* parallaxe image (JS, ±6 px) */
  --idea-copy-shift: 0px;         /* contre-parallaxe titre (JS, ±3,3 px) */
  padding-block: var(--idea-pad-top) var(--idea-pad-bottom);
}

/* ---------- Cadre : la double page ---------- */

#idea.idea-v22 .story-frame {
  /* 47vw ≈ le format du tableau moins la bande blanche morte du haut */
  height: min(47vw, 704px);
  min-height: 520px;
  /* même largeur utile que le header : le titre tombe sur la gouttière */
  max-width: 1560px;
  align-items: center;
}

#idea.idea-v22 .story-content {
  width: min(100%, 1560px);
  padding-inline: var(--gutter);
  transform: translate3d(0, var(--idea-copy-shift), 0);
  will-change: transform;
}

#idea.idea-v22 .story-copy {
  width: min(46%, 660px);
  /* la colonne de texte occupe la marge blanche du tableau */
  margin-left: 0;
}

/* ---------- Typographie ---------- */

#idea.idea-v22 h2 {
  font-size: clamp(2.45rem, 4.45vw, 4.15rem);
  line-height: 1.045;
  letter-spacing: -.043em;
  text-wrap: balance;
  hanging-punctuation: first last;
}

#idea.idea-v22 .idea-line {
  display: inline-block;
  /* interlettrage optique : la ligne longue respire un cheveu de plus */
  will-change: transform, opacity;
}

#idea.idea-v22 .idea-line.nowrap { letter-spacing: -.046em; }
#idea.idea-v22 .idea-line.ink-blue { letter-spacing: -.041em; }

/* ---------- Entrée chorégraphiée : ligne 1 → 2 → 3 → image ---------- */

.js #idea.idea-v22 .idea-line {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .58s var(--idea-ease),
    transform .68s var(--idea-ease);
}
.js #idea.idea-v22 .idea-line.is-visible { opacity: 1; transform: none; }
.js #idea.idea-v22 .idea-line:nth-child(1) { transition-delay: 0ms; }
.js #idea.idea-v22 .idea-line:nth-child(3) { transition-delay: 90ms; }
.js #idea.idea-v22 .idea-line:nth-child(5) { transition-delay: 180ms; }

.js #idea.idea-v22 .story-art {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .72s var(--idea-ease) 260ms,
    transform .82s var(--idea-ease) 260ms;
}
.js #idea.idea-v22 .story-art.is-visible { opacity: 1; transform: none; }

/* ---------- L'aquarelle : cadrage + fondu des bords ---------- */

#idea.idea-v22 .story-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* fondu des quatre bords vers le blanc pur */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 4.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5.5%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 4.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5.5%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

#idea.idea-v22 .story-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* on garde le bas (l'ombre au sol) et la droite (le bureau) : le blanc mort
     part du haut, le fondateur et la skyline prennent la moitié droite */
  object-position: 50% 100%;
  /* le papier de l'aquarelle est à #fdfdfd : on le clippe sur le blanc pur de
     la page pour qu'aucun rectangle ne se devine autour de l'illustration */
  filter: contrast(1.022) brightness(1.005);
  transform: translate3d(0, var(--idea-art-shift), 0) scale(var(--idea-art-zoom));
  transform-origin: 100% 100%;
  will-change: transform;
}

/* ---------- Grand écran : on ne dépasse pas la largeur du tableau ---------- */

@media (min-width: 1700px) {
  #idea.idea-v22 .story-content { width: 100%; }
}

/* ---------- Mobile 390 : titre puis image, hauteurs justes ---------- */

@media (max-width: 760px) {
  #idea.idea-v22 {
    padding-block: clamp(48px, 12vw, 72px) clamp(32px, 8vw, 56px);
  }
  #idea.idea-v22 .story-frame {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding-top: 0;
  }
  #idea.idea-v22 .story-content { padding-inline: 24px; }
  #idea.idea-v22 .story-copy { width: 100%; }
  #idea.idea-v22 h2 {
    font-size: clamp(2.15rem, 9.1vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -.04em;
  }
  #idea.idea-v22 .story-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(76vw, 340px);
    margin-top: 24px;
    flex: 0 0 auto;
  }
  #idea.idea-v22 .story-art img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 100% 100%;
    /* zoom mobile : le fondateur, le téléphone et la skyline, rien d'autre */
    transform: translate3d(0, var(--idea-art-shift), 0) scale(1.36);
    transform-origin: 100% 100%;
  }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  #idea.idea-v22 .story-content,
  #idea.idea-v22 .story-art img {
    transform: none;
  }
  #idea.idea-v22 .story-art img { transform: scale(var(--idea-art-zoom)); }
  .js #idea.idea-v22 .idea-line,
  .js #idea.idea-v22 .story-art {
    opacity: 1;
    transform: none;
    transition: none;
  }
  @media (max-width: 760px) {
    #idea.idea-v22 .story-art img { transform: scale(1.36); }
  }
}